Local Development w/ NPM Link
From @Gerark:
Hello! this is probably a base webdev question but I can't find a good reference for the issue I'm having atm. I'm working on a TyphonJS template project and I'm importing a custom svelte library ( basically a UI component library ). I'd like to use npm link to work a bit more effectively without having to publish to npm a new package over and over whenever I make changes to the custom library. Apart from the npm link command to call on both sides ( with different parameters ) is there anything I should take care of? [3:39 PM] I get a bunch of errors telling me I'm trying to import stuffs with a wrong path but I thought npm link was going to work seamlessly and that I shouldn't be forced into changing the way how path should be written when importing a component.
35 Replies
Do you have links to the UI component repo and your main project?
not my main project but I have a version of the custom lib published on npm
Just taking a look at the repo could be a start. I want to take a quick look and see the configuration and structure of the ancillary component repo.
I use NPM link all the time to develop TRL and it takes a few tricks. There are few subtle things you have to modify in the Vite config as well. So after looking at the component repo I can discuss some troubleshooting / aspects that also need to be modified w/ the Vite config.
Sorry it took me a bit: https://www.npmjs.com/package/@gerark/just-svelte-lib this is the link to the package.
npm
@gerark/just-svelte-lib
Everything you need to build a Svelte project, powered by
create-svelte.. Latest version: 0.0.25, last published: a day ago. Start using @gerark/just-svelte-lib in your project by running npm i @gerark/just-svelte-lib. There are no other projects in the npm registry using ...I can list the Vite config aspects though that are relevant:
- Add
fs: { strict: false } to the server: {} section:
https://vitejs.dev/config/server-options.html#server-fs-strict
- You also need to add the NPM package name to the dedupe section. If you are using the example Vite config this is defined here:
In the dedupe array add your UI component package name like dedupe: ['svelte', '@gerark/just-svelte-lib']
-----
You can pretty easily see if the NPM link worked correctly by examining your package from the IDE. In the node_module folder / your package folder as it will be a symlink to your local package working directory. You'll see the contents of the local package.that's actually working. The
node_module looks correct when I do npm link @gerark/just-svelte-lib
My question is: Do I have to modify how I should import my component? Should I change the directory? ( it doesn't seem to be the correct way ).You do need to make the mods mentioned in the Vite config. You might as well try and add those now and see if things work.
yup I'm doing that right now. Do I have to do that all on the vite config of the importer project ( included the server thing mentioned first ) ?
The project that consumes the linked package. You don't have to do anything in the linked package itself.
Can I keep the package as a dependency? Like this:
or should I remove it when I'm using the linking approach?
What I get btw is a bunch of errors similar to this:
Or this ( just to give an example of an attempt to import components )
You don't have to modify the
package.json.
Perhaps paste in your Vite config file in the target project.Maybe the vite config from the project which is importing the lib could help? I'm pretty sure I'm fucking up somewhere badly.
ahah 😄
if you see that:
Ignore it as it was an extra attempt.
( which of course didn't work at all )
just to give a status update if I use the exact config modifications you proposed and then:
- I run:
npm install
- Then : npm link @gerark/just-svelte-lib
- and i run with: npm run dev
I don't get anymore the importing errors but it looks like the library being used is the npm packaged one. Not the link ( I changed the default color of a button component and I see no changes )You can't use the dev server when you link a package as the dev server caches files I believe. Try a production build and see if the color changed.
Production build ->
npm run build ? In that case I get this error ( very similar to the issue with resolving the import ):
So I'm leaning towards it being an issue w/ the
package.json in your ancillary UI component package. Or perhaps something recent in changes to Vite. For instance I can across this: https://github.com/vitejs/vite/issues/13801
See the last comment in the issue above.
Do you have a repo for your UI component library? I can try and test locally linking easier that way.GitHub
GitHub - Gerark/just-svelte-lib: A svelte component library meant t...
A svelte component library meant to be shared across foundry modules projects - GitHub - Gerark/just-svelte-lib: A svelte component library meant to be shared across foundry modules projects
I randomly tried one of the last comment in the Issue you linked without success 😦
So you are using a very old version of SvelteKit (SK) to build your component library. It has changed a bit.
When building your project via SK It appears that the generated
package.json was incorrect for themeStore; when I built things locally it gave an export condition like:
So that export condition wasn't correct at least when I built locally.
I recommend that you update all dependencies including TS and more to the latest.
The latest @sveltejs/package in the v2 series no longer creates an automatic package.json. You can refer to the information here on how to migrate:
https://github.com/sveltejs/kit/pull/8922
You must put a package.json in the src/lib directory. I used the package.json minus the devDependencies as follows:I was able to build the component library and run the local SK server to test without changes.
oh my 🤦 I thought I got the latest but tbh I can't even remember from where I got that 😐 thank you!!! I'll try it out asap.
It's very old.. You were using ".next" / pre-1.0.0 imports. Here is what I updated to:
I must have followed a very outdated tutorial
It'll output things in a
dist folder now. Use npm link from that dist folder which is the actual package.
Also when creating the new package.json consider making index.js files and provide separate sub-path exports for actions, components, etc. You can then just update the index.js for each sub-path export with new source files and this will make things much cleaner.
I didn't have a problem in linking an example end project with the Vite config changes mentioned.I really appreciate it. Thank you for taking time.
I should mention that there are resource in TRL for color handling.
colord is available and there is a Svelte enabled trie search library as well that accomplishes what fuzzysort does more or less. Probably a lot of other aspects that can be leveraged as well instead of a complete separate set of dependencies.
https://typhonjs-fvtt-lib.github.io/api-docs/modules/_runtime_color_colord.html
https://typhonjs-fvtt-lib.github.io/api-docs/classes/_runtime_data_struct_search_trie.TrieSearch.htmlOh yes I'm aware of them 🙂 I wanted to go all-in and starting from scratch to get used to svelte as much as possible. In fact most of the component I implemented are very raw 😅
out of curiosity I wanted to try out the SvelteKit official page/tutorial: https://kit.svelte.dev/docs/creating-a-project
If I create the project from there I get these dependencies instead which looks way older compared to what you copied above:
SvelteKit docs
Creating a project • SvelteKit documentation
The automatic project creator / CLI starter might not be coded for the latest dependencies. I usually just manage
package.json myself so choose the latest / don't depend on a project creator. Also the ^2.0.0 for instance will install the latest 2.x.x package. But for SK ^1.20.4 only installs the latest in 1.20.X when 1.25.2 is out. Worth reviewing the semantic versioning / how it works: https://docs.npmjs.com/about-semantic-versioningoh jeez... there's so much to learn XD as a simple game developer landing in the web world is like being in alice in wonderland lol. Cool stuff everywhere.
I thought the automatic project creator was going to setup for latest packages with that
"npm create svelte@latest" thing. My bad
just dropping by to say that after updating everything the npm link works as expected. It works also when running through npm run dev. I just have to npm run build my library package to update the dist folder.Excellent. I always like to hear about success stories.
I do encourage you to try and use what is available in TRL especially for ancillary libraries thst are already covered. TRL is a collection of 1st and 3rd party libraries that are best in class and many resources that help extend Svelte. It doesn't get in the way of learning Svelte.
It also doesn't hurt to involve the standard library as well instead recreating all components from scratch. In time the standard library is going to be significantly flushed out though there will be a few more lateral moves w/ Svelte 5 and getting what currently exists cross-platform (Foundry + SvelteKit / raw Svelte). Certainly fine to fill in the gaps in the meantime and try your hand at creating reusable components.
You can set TRL as a
peerDependency like: https://github.com/typhonjs-fvtt-lib/svelte-standard/blob/main/package.json#L46I'm not sure what standard library actually means in this context. Does Svelte provides a standard library and if the answer is yes what they provide? Or are you talking about TRL in this case?
So there are two parts to TRL. The main runtime distribution which contains the bulk of the libraries and main desktop / app UI JS / components. There are some FVTT aspects in the main runtime as well. Then there is the "standard library" which contain additional FVTT utilities and a suite of components. In the API docs you can find the library code under
#standard, but all of the components aren't in the docs quite yet. This can make discovery a little bit more challenging as you need to peruse the standard library repo. Here is a link to the components sub-path export:
https://github.com/typhonjs-fvtt-lib/svelte-standard/tree/main/src/component/standard
Some of the components are demoed in essential-svelte-esm.
It can be handy to take a look at the implementation of the components as they are data oriented and have strong support for a11y / keyboard navigation. There are many things there that can be leveraged vs building a complete separate component library or using a 3rd party library.
In the future I'll be supporting advanced usage of import maps for both the main runtime & standard libraries such that a large majority of TRL won't be compiled into your end project build. This will significantly optimize package size as in things being reduced by ~90% or more. Aligning with this general effort will bring big dividends down the road.
In the template repo and essential-svelte-esm you can see how the main runtime & standard libraries are setup:
https://github.com/typhonjs-fvtt-demo/essential-svelte-esm/blob/main/package.json#L12-L20