Workflow for Sandbox / Example Environment?

Buuntu commented 4 years ago

Current Behavior

What's the recommended workflow for linking to the local code before publishing? As a form of testing primarily (not to replace automated tests but to try out new feautres). I can do npm link library-name but then VSCode seems to forget that every time I rebuild the code, and I have to restart the TS server in order for linting to not complain. Granted this last part may be a VS Code problem but that's probably a significant amount of people using TSDX.

Additionally, even with npm link there are caveats to having the same react library in two places, so you have to include aliases in your example package.json like so:

  "alias": {
    "react": "../node_modules/react",
    "react-dom": "../node_modules/react-dom/profiling"
  },

Otherwise you will probably get a React hook error, as React doesn't let you have two different versions at the same time.

Desired Behavior

Would be great if the recommended workflow for having an example/sandbox as part of a library would be included in the main documentation.

Who does this impact? Who is this for?

All users who want to include an example/sandbox in their library.

agilgur5 commented 4 years ago

Not quite TSDX specific, but relevant question.

For React libraries the React template already has an example directory and it just has import { mylib } from './' which will pull from package.json.main, i.e. dist/.

I think that's the optimal method for that, no need to link anything.

There are also tools like yalc and relative-deps among others to simplify linking, but they're mostly for monorepos or multiple repos. An example isn't normally a separate repo though

Buuntu commented 4 years ago

Doesn't importing from dist require you to build every time though?

jaredpalmer commented 4 years ago

Correct. Not ideal for large projects but sometimes desired none the less

Buuntu commented 4 years ago

So the suggested workflow is to import like @agilgur5 suggested + running npm run watch in a separate terminal, and not using something like yalc or npm link like I have been? Should this be included in the React template README? I can submit a PR if you think that's a good idea.

agilgur5 commented 4 years ago

Doesn't importing from dist require you to build every time though?

If you're changing your source code, yes. But dist is built code, if you're only iterating on the example you won't need to re-build src.

Should this be included in the React template README?

It's already in it: https://github.com/formium/tsdx/tree/master/templates/react#commands

The recommended workflow is to run TSDX in one terminal [...] Then run the example inside another

jaredpalmer / tsdx