TyphonJSTyphonJS (Michael)

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.

TyphonJS (Michael)•193d ago

Do you have links to the UI component repo and your main project?

Gerark•193d ago

not my main project but I have a version of the custom lib published on npm

TyphonJS (Michael)•193d ago

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.

Gerark•193d ago

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 ...

TyphonJS (Michael)•193d ago

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:

const s_RESOLVE_CONFIG = {
   browser: true,
   dedupe: ['svelte']
};

const s_RESOLVE_CONFIG = {
   browser: true,
   dedupe: ['svelte']
};

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.

Gerark•193d ago

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 ).

TyphonJS (Michael)•193d ago

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.

Gerark•193d ago

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 ) ?

TyphonJS (Michael)•193d ago

The project that consumes the linked package. You don't have to do anything in the linked package itself.

Gerark•193d ago

Can I keep the package as a dependency? Like this:

"dependencies": {
    "@gerark/just-svelte-lib": "^0.0.25",
},

"dependencies": {
    "@gerark/just-svelte-lib": "^0.0.25",
},

or should I remove it when I'm using the linking approach? What I get btw is a bunch of errors similar to this:

Failed to resolve import "@gerark/just-svelte-lib/styles/themeStore" from "src\ModuleSettings.js". Does the file exist

Failed to resolve import "@gerark/just-svelte-lib/styles/themeStore" from "src\ModuleSettings.js". Does the file exist

Or this ( just to give an example of an attempt to import components )

Failed to resolve import "@gerark/just-svelte-lib/components/Typography/Typography.svelte" from "src\view\selection-window\CombatantGrid.svelte". Does the file exist?

Failed to resolve import "@gerark/just-svelte-lib/components/Typography/Typography.svelte" from "src\view\selection-window\CombatantGrid.svelte". Does the file exist?

TyphonJS (Michael)•193d ago

You don't have to modify the package.json. Perhaps paste in your Vite config file in the target project.

Gerark•193d ago

Maybe the vite config from the project which is importing the lib could help? I'm pretty sure I'm fucking up somewhere badly.

vite.config.mjs

Gerark•193d ago

ahah 😄 if you see that:

       optimizeDeps: {
           exclude: ['@gerark/just-svelte-lib']
       }

       optimizeDeps: {
           exclude: ['@gerark/just-svelte-lib']
       }

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 )

TyphonJS (Michael)•193d ago

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.

Gerark•193d ago

Production build -> npm run build ? In that case I get this error ( very similar to the issue with resolving the import ):

[vite]: Rollup failed to resolve import "@gerark/just-svelte-lib/styles/themeStore" from "C:/Data/TTRPG/FoundryData/Data/Data/modules/just-popcorn-initiative/src/ModuleSettings.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

[vite]: Rollup failed to resolve import "@gerark/just-svelte-lib/styles/themeStore" from "C:/Data/TTRPG/FoundryData/Data/Data/modules/just-popcorn-initiative/src/ModuleSettings.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

TyphonJS (Michael)•193d ago

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.

Gerark•193d ago

https://github.com/Gerark/just-svelte-lib

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

Gerark•193d ago

I randomly tried one of the last comment in the Issue you linked without success 😦

TyphonJS (Michael)•193d ago

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:

{
  exports: {
    "./styles/themeStore": "./styles/them"  
  }

{
  exports: {
    "./styles/themeStore": "./styles/them"  
  }

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:

TyphonJS (Michael)•193d ago

message.txt

TyphonJS (Michael)•193d ago

I was able to build the component library and run the local SK server to test without changes.

Gerark•193d ago

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.

TyphonJS (Michael)•193d ago

It's very old.. You were using ".next" / pre-1.0.0 imports. Here is what I updated to:

TyphonJS (Michael)•193d ago

package.json

Gerark•193d ago

I must have followed a very outdated tutorial

TyphonJS (Michael)•193d ago

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.

Gerark•193d ago

I really appreciate it. Thank you for taking time.

TyphonJS (Michael)•193d ago

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.html

Gerark•193d ago

Oh 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 😅

Gerark•193d ago

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

package.json

TyphonJS (Michael)•193d ago

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-versioning

Gerark•192d ago

oh 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.

TyphonJS (Michael)•192d ago

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#L46

Gerark•191d ago

I'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?

TyphonJS (Michael)•191d ago

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

TyphonJS Join

293Members

View on Discord

Want results from more Discord servers?

Add your server

Issues Configuring TyphonJS in TSI'm receiving this message in my TS Files: `Cannot find module '#runtime/svelte/application' or its TRL / Svelte based game systemsThis post is a list of repos for game systems built with TRL / Svelte for Foundry. Please DM me if y List of TjsdocumentsLink to original response: https://discord.com/channels/737953117999726592/1067337319041998869/11562 Is there a way to export the quest log?I'm trying to setup a world for the PF2E Beginner Box but right now I working in a beta testing wor Fabricate@MisterPotts. Just starting a forum post to keep track of the conversation. > Fabricate doesn't ma Svelte 5 TJSDocument PrototypeGreets @FVTT ▹ Developer. As some of you might have seen there is a bit of paradigm shift that is Funky interaction with fokus managementTJS's Focus Management is creating fun issues for me again. focusKeep = true causes my drag and drop How to get rid of funky Prosemirror overlapHi. I'm getting some overlap with Prosemirror (see image) any ideas how to avoid that? ``` "@ty FQL / TextEditor enrichment issueFrom @ooblekie: > can anyone give me a hand as to why the text keeps coming up as object promise in TJSDocument not working properly with Module Sub-Types (Data Models)In Foundry, modules can define a [Sub-Types](<https://foundryvtt.com/article/module-sub-types/>) usi TRL `0.1.2` - Fine Tuning releaseGreets @FVTT ▹ Developer! I have just released a fine tuning release that brings a few more feature Embed a DropDown/MenuList made with SvelteHello again! 😄 I've been pondering creating a second module for Foundry and a few questions popped Slide Animations for SvelteApplicationI'd like my window ( which is an EmptyApplicationShell ) to play a slide-in animation when open and Bug: Multiple ProseMirror editors on same svelte component do not save properlySimple reproduction in a foundry world with at least one actor defined: ``` <svelte:options accessor System Works in Dev Mode but not after buildAfter updating to 0.1.1, I noticed something odd happening. The TITAN system now seems to work when Error building after updating to TRL 0.1.1Recently updated the TITAN system to TRL 0.1.1, but when I `npm run build` it errors out. Not sure w TJSApplication Character Sheet odd behavior with unlinked tokensHas anyone else experienced weird when using a TJSApplication as a character sheet with unlinked tok TJSDocumentCollection best practices?Hi! I've got a little component I'm using whose purpose is basically to just show a tiny preview of Release `TRL 0.1.1` - Patch releaseGreets @FVTT ▹ Developer! I have just released a patch / fix release that fixes a small oversight i Uncaught TypeError: $storeElementRoot is undefinedHi! Encountering the following error when trying to resize an application based on a TJSApplicationS

Gaming

Programming

Local Development w/ NPM Link