Using external modules (including Svelte components)

[obrienmd]

Me again :) I'm getting deeper into this lib (and loving it, thank you!), and it seems that I'm unable to import Svelte or js modules in a .svelte.tsx file, as they don't use typedraft.

A couple example errors follow. The first is from the Svelte examples demo project - I haven't tested all components, but it seems that both this one (7-lifecycle/update) and the one that imports mapbox assets (15-context-api/context-api) both exhibit this behavior. The second is an attempt to import svelte-routing.

If it would be helpful to publish my test repo to Github, please let me know!

Javascript module (elizabot): Import code in .svelte.tsx component: import Eliza from 'elizabot';

bundles src/main.js → public\build\bundle.js...
[!] (plugin Rollup Core) 
Error: Could not load C:\blahblah\svelte-draft-tutorial\node_modules\elizabot\elizadata.js.tsx 
(imported by C:\blahblah\svelte-draft-tutorial\node_modules\elizabot\elizadata.js?commonjs-proxy): 
ENOENT: no such file or directory, open 'C:\blahblah\svelte-draft-tutorial\node_modules\elizabot\elizadata.js.tsx'
Error: Could not load C:\blahblah\svelte-draft-tutorial\node_modules\elizabot\elizadata.js.tsx 
(imported by C:\blahblah\svelte-draft-tutorial\node_modules\elizabot\elizadata.js?commonjs-proxy): 
ENOENT: no such file or directory, open 'C:\blahblah\svelte-draft-tutorial\node_modules\elizabot\elizadata.js.tsx'

Svelte module (svelte-router): Import code in .svelte.tsx component: import { Router, Link, Route } from "svelte-routing";

bundles src/main.js → public\build\bundle.js...
[!] (plugin Rollup Core)
Error: Could not load C:\blahblah\svelte-draft-tutorial\node_modules\svelte-routing\src\Link.svelte.tsx 
(imported by C:\blahblah\svelte-draft-tutorial\node_modules\svelte-routing\src\index.js): 
ENOENT: no such file or directory, open 'C:\blahblah\svelte-draft-tutorial\node_modules\svelte-routing\src\Link.svelte.tsx'  
Error: Could not load C:\blahblah\svelte-draft-tutorial\node_modules\svelte-routing\src\Link.svelte.tsx 
(imported by C:\blahblah\svelte-draft-tutorial\node_modules\svelte-routing\src\index.js): 
ENOENT: no such file or directory, open 'C:\blahblah\svelte-draft-tutorial\node_modules\svelte-routing\src\Link.svelte.tsx'

[obrienmd]

Dug a bit further, seems to stem from: https://github.com/mistlog/rollup-plugin-svelte-draft/blob/master/src/index.ts#L24

if (importee.endsWith(".svelte") || importee.endsWith(".js"))
            {
                return `${resolvePath(importer, "..", importee)}.tsx`;
            }

Where any file id processed by rollup ending in .svelte or .js has .tsx appended to it.

I can think of a couple different solutions. I'd love feedback on them! #2 in particular could be made a configurable behavior with a sane default, as long as I'm not completely mangling best practices by suggesting it:

1. Add a check that the importer and importee do not include "node_modules". This would resolve external dependency imports, but wouldn't help with imports from outside node modules. On the other hand, those can probably be converted to tsx rather easily. Doing this solved my near-term problem. I also had to modify rollup.config.js svelte plugin config as follows - note the changes to extensions and include:

   svelte({
     extensions: [".tsx", ".svelte"],
     include: ["./src/**/*.svelte.tsx", "./**/*.svelte"],
     dev: !production,
     css: css => {
       css.write("public/build/bundle.css");
     }
   }),

2. Force users to import using the .tsx extension and get rid of this id transformation. I am pretty weak on rollup - heck, I'm no export on node and typescript import best-practices in general - so I don't know if this makes any sense at all. However, if it does make sense, I think it trades a bit of shortcut magic for clearer, or more explicit, imports.

[mistlog]

Thanks for your solution!

Add a check that the importer and importee do not include "node_modules"

Yes we can check it, however I figure out that we can keep it as is and only deal with svelte-related files, in this way, it's more clear and concise.

Link: https://github.com/mistlog/rollup-plugin-svelte-draft/blob/refine-extension/src/index.ts#L28

Force users to import using the .tsx extension

It may be verbose to include extension in import, and I think .svelte.tsx is too long so I simplified it to .tsx

Thus the convention of extension would be:

• raw svelte: *.svelte
• svelte-draft: *.tsx
• typedraft: *.js.tsx
• javascript: *.js
• typescript: *.ts

They should be compatible and can be used together so that we can progressively refactor current project.

I refactored the demo and you can find the svelte-routing example. As for sapper support, see https://github.com/mistlog/sapper-template.