Skip to content

Repository files navigation

Shared code extension

This example extension shows how to use code from other directories in your extension.

In order to test this extension - run block run from within hello-world-typescript-block after running npm install in the root folder

Developing against a shared library

Sometimes using a relative path is fine (as is done in this example). Othertimes it's useful to package your shared code as an independent library, but also allow development against the local version of your library.

In this case, you can use npm link.

In order to get this running in this example:

  • Change directories: cd ./hello-world-shared; then run npm link
  • Change directories: cd ../hello-world-typescript-block;
  • Run npm install --save ../hello-world-shared to install
  • Run npm link hello-world-shared to use the link

Now you can replace:

import {Hello} from '../../hello-world-shared';

with:

import {Hello} from 'hello-world-shared';

And then if you use the library instead, you won't have to change any code!

(Thanks Ronen!)

A note about npm install

If you inspect the npm install command you will see that we install packages from three different places from reach of the three package.json's

This is done so that there is only a single React installation that all of the packages and reference. If there are multiple React installations in your repository there can be issues. Oftentimes exhibiting itself as an Invalid hook call if using hooks.

In order to alleviate this issue - we install react once at the root level so that all installations can share the same single react installation.

(There are other reasonable solutions to this same problem - eg: use of hardlinks, like with pnpm or yarn v2)

About

Shared code app examples

Resources

Stars

4 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages