svelte-retag doesnot work with await import statement

[baseplate-admin]

Describe the bug

If i import component using await import, the import doesn't work.

Reproduction

So lets consider these samples :

This works :

// @ts-ignore
import svelteRetag from "svelte-retag";

import CommentBox from "$components/specific/CommentBox/Index.svelte";
import MyAnime from "$components/specific/MyAnime/Index.svelte";

// Specific Components
svelteRetag({
    component: CommentBox,
    tagname: `coreproject-specific-commentbox`,
    attributes: [`submit_url`],
    shadow: false,
    hydratable: true
});
svelteRetag({
    component: MyAnime,
    tagname: `coreproject-specific-my-anime-list`,
    attributes: [`anime_name`, `anime_status`, `anime_image`, `anime_current_episodes`, `anime_total_episodes`, `dropdown_class`, `anime_description`, `anime_studio`, `anime_genres`],
    shadow: false,
    hydratable: true
});

This doesn't work :

// @ts-ignore
import svelteRetag from "svelte-retag";

// Specific Components
svelteRetag({
    component: await import("$components/specific/CommentBox/Index.svelte"),
    tagname: `coreproject-specific-commentbox`,
    attributes: [`submit_url`],
    shadow: false,
    hydratable: true
});
svelteRetag({
    component: await import("$components/specific/MyAnime/Index.svelte"),
    tagname: `coreproject-specific-my-anime-list`,
    attributes: [`anime_name`, `anime_status`, `anime_image`, `anime_current_episodes`, `anime_total_episodes`, `dropdown_class`, `anime_description`, `anime_studio`, `anime_genres`],
    shadow: false,
    hydratable: true
});

Logs

Uncaught TypeError: opts.component is not a constructor
    _renderSvelteComponent index.js:474
    renderElements index.js:40
2 index.js:474:28
    _renderSvelteComponent index.js:474
    renderElements index.js:40

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 7700X 8-Core Processor
    Memory: 20.72 GB / 31.21 GB
  Binaries:
    Node: 20.6.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (119.0.2151.93)
    Internet Explorer: 11.0.22621.1

Severity

annoyance

[patricknelson]

I'm new to dynamic imports, but thankfully this has nothing to do with svelte-retag. Just use the .default property, e.g.

import svelteRetag from 'svelte-retag';

svelteRetag({
	component: (await import('./HelloWorld.svelte')).default,
	tagname: 'hello-world',
});

Works fine for me.

Edit: p.s. If this is wrong, please feel free to reopen and let me know. 😅

[patricknelson]

Actually @baseplate-admin, after giving this more thought, I might want to support a variant of this as an enhancement: Lazy dynamic imports. That is, more specifically: Not import() or await import() but instead () => import(), i.e. a callback which returns a Promise.

This could be used to enable the ability of defining custom elements like <hello-world> without necessarily importing them until after they're actually used in the HTML/DOM. Was this what you were ultimately trying to accomplish?

So, this would support two major use cases (one building upon the other).

1. Explicitly calling svelteRetag but passing a lazy dynamic import, e.g.

   svelteRetag({
   	component: () => import('./HelloWorld.svelte'),
   	tagname: 'hello-world',
   });

   And the import of ./HelloWorld.svelte wouldn't happen until after <hello-world> is encountered.

2. We could then build upon that by automatically defining many components in bulk ahead of time, e.g. via Vite's Glob Import feature import.meta.glob('./**/*.svelte') and then automatically set tag names based on file name.

While you could already do option 2 right now, it would only be possible via adding { eager: true } like import.meta.glob('./**/*.svelte', { eager: true })). Anyway @baseplate-admin if I do this, I would need to either completely change this issue (convert to enhancement, change title and description) or create a new one. 🤔

[baseplate-admin]

Anyway @baseplate-admin if I do this, I would need to either completely change this issue (convert to enhancement, change title and description) or create a new one

It's okay if you modify this issue :) ( personally i think since you figured out a better approach on this issue, it's better to rename this one )

This could be used to enable the ability of defining custom elements like without necessarily importing them until after they're actually used in the HTML/DOM. Was this what you were ultimately trying to accomplish?

So the problem i faced was, the project I am working on is large in nature ( 10+ MB ). I want to split split each svelte component into it's own .js file, instead of using one large bundle file. This drastically improves the FOUC performance of the website.

This is the bundle size before await import:

../static/.vite/manifest.json                                         6.53 kB │ gzip:   0.86 kB
../static/coreproject.asset.Kokoro-SemiBoldItalic.ixtmLYl7.woff2     36.18 kB
../static/coreproject.asset.Kokoro-BoldItalic.qI4mF21P.woff2         36.18 kB
../static/coreproject.asset.Kokoro-Italic.uaj3Riha.woff2             36.92 kB
../static/coreproject.asset.Kokoro-Bold.4fcmChkF.woff2               39.82 kB
../static/coreproject.asset.Kokoro-SemiBold.MAoxE-AD.woff2           39.98 kB
../static/coreproject.asset.Kokoro-Regular.RfpxELwh.woff2            40.41 kB
../static/coreproject.asset.index.46WfX2Md.css                        1.32 kB │ gzip:   0.62 kB
../static/coreproject.asset.index.hyP7NsuW.css                      102.38 kB │ gzip:  17.22 kB
../static/coreproject.chunk._commonjsHelpers.5-cIlDoe.js              0.31 kB │ gzip:   0.24 kB │ map:     0.13 kB
../static/coreproject.chunk.index.esm.7ZU_BHz0.js                     5.71 kB │ gzip:   2.93 kB │ map:     8.01 kB
../static/coreproject.entry.easytimer.EfkVFB83.js                     7.24 kB │ gzip:   2.88 kB │ map:    34.19 kB
../static/coreproject.entry.register.JSRn3LgI.js                     28.28 kB │ gzip:  10.18 kB │ map:   136.97 kB
../static/coreproject.entry.htmx.TaxAOfcZ.js                         56.27 kB │ gzip:  16.83 kB │ map:   230.86 kB
../static/coreproject.entry.hyperscript.kn0nY75f.js                  94.96 kB │ gzip:  26.47 kB │ map:   219.25 kB
../static/coreproject.chunk.index.esm.dwzZYf7S.js                   174.96 kB │ gzip:  81.02 kB │ map:   177.24 kB
../static/coreproject.chunk.index.esm.0AbFLnpp.js                   214.06 kB │ gzip:  94.58 kB │ map:   216.66 kB
../static/coreproject.chunk.index.esm.h-q4_oJ_.js                   425.35 kB │ gzip: 196.26 kB │ map:   428.34 kB
../static/coreproject.chunk.index.esm.F35oWm2J.js                   459.13 kB │ gzip: 202.46 kB │ map:   462.12 kB
../static/coreproject.chunk.index.esm.7m77ow97.js                   464.88 kB │ gzip: 231.61 kB │ map:   490.47 kB
../static/coreproject.chunk.index.esm.XbRhiM0i.js                   489.24 kB │ gzip: 225.61 kB │ map:   491.87 kB
../static/coreproject.chunk.index.esm.ZT1N5kiN.js                   565.13 kB │ gzip: 269.45 kB │ map:   567.75 kB
../static/coreproject.chunk.index.esm.1uJe1-pR.js                   596.23 kB │ gzip: 271.59 kB │ map:   598.86 kB
../static/coreproject.chunk.index.esm.ImDc22WR.js                   639.86 kB │ gzip: 281.03 kB │ map:   642.48 kB
../static/coreproject.chunk.index.esm.-6AdGpRj.js                   730.97 kB │ gzip: 340.19 kB │ map:   733.60 kB
../static/coreproject.chunk.index.esm.qoep7B_f.js                   804.56 kB │ gzip: 366.03 kB │ map:   807.18 kB
../static/coreproject.chunk.index.esm.Ipz4x2MM.js                   811.02 kB │ gzip: 371.37 kB │ map:   814.35 kB
../static/coreproject.chunk.index.esm.lIq_N4yZ.js                 1,216.41 kB │ gzip: 565.00 kB │ map: 1,219.04 kB
../static/coreproject.entry.index.QMLtyh7Q.js                     1,243.26 kB │ gzip: 393.74 kB │ map: 2,726.71 kB

This is the bundle size after await import:

../static/.vite/manifest.json                                        23.24 kB │ gzip:   2.32 kB
../static/coreproject.asset.Kokoro-SemiBoldItalic.ixtmLYl7.woff2     36.18 kB
../static/coreproject.asset.Kokoro-BoldItalic.qI4mF21P.woff2         36.18 kB
../static/coreproject.asset.Kokoro-Italic.uaj3Riha.woff2             36.92 kB
../static/coreproject.asset.Kokoro-Bold.4fcmChkF.woff2               39.82 kB
../static/coreproject.asset.Kokoro-SemiBold.MAoxE-AD.woff2           39.98 kB
../static/coreproject.asset.Kokoro-Regular.RfpxELwh.woff2            40.41 kB
../static/coreproject.asset.Index.46WfX2Md.css                        1.32 kB │ gzip:   0.62 kB
../static/coreproject.asset.index.hyP7NsuW.css                      102.38 kB │ gzip:  17.22 kB
../static/coreproject.chunk.each.-oqiv04n.js                          0.13 kB │ gzip:   0.14 kB │ map:     4.04 kB
../static/coreproject.chunk._commonjsHelpers.5-cIlDoe.js              0.31 kB │ gzip:   0.24 kB │ map:     0.13 kB
../static/coreproject.chunk.Index.gCjgE0HX.js                         0.95 kB │ gzip:   0.55 kB │ map:     0.83 kB
../static/coreproject.chunk.Index.gICmB5P1.js                         0.95 kB │ gzip:   0.55 kB │ map:     0.83 kB
../static/coreproject.chunk.preload-helper.H5tK7HSf.js                0.95 kB │ gzip:   0.60 kB │ map:     0.13 kB
../static/coreproject.chunk.Index.YfYq1_V8.js                         0.97 kB │ gzip:   0.48 kB │ map:     1.11 kB
../static/coreproject.chunk.Index.IGI89-5t.js                         1.03 kB │ gzip:   0.59 kB │ map:     0.91 kB
../static/coreproject.chunk.Index.VQ_-SwUh.js                         1.04 kB │ gzip:   0.60 kB │ map:     0.91 kB
../static/coreproject.chunk.Index.g5Beh79I.js                         1.05 kB │ gzip:   0.60 kB │ map:     0.93 kB
../static/coreproject.chunk.Index.j4TPyIBK.js                         1.09 kB │ gzip:   0.63 kB │ map:     0.96 kB
../static/coreproject.chunk.Index.mwl_S5n7.js                         1.20 kB │ gzip:   0.67 kB │ map:     1.09 kB
../static/coreproject.chunk.Index.rIRaFJwk.js                         1.21 kB │ gzip:   0.62 kB │ map:     1.00 kB
../static/coreproject.chunk.Index.Dwyj-T1p.js                         1.22 kB │ gzip:   0.63 kB │ map:     1.17 kB
../static/coreproject.chunk.Index.S7f8dsCI.js                         1.23 kB │ gzip:   0.72 kB │ map:     1.13 kB
../static/coreproject.chunk.Index.m1HqqgoL.js                         1.25 kB │ gzip:   0.69 kB │ map:     1.23 kB
../static/coreproject.chunk.Index._tC2liuT.js                         1.33 kB │ gzip:   0.76 kB │ map:     1.28 kB
../static/coreproject.chunk.Index.q_Cx6xF5.js                         1.41 kB │ gzip:   0.81 kB │ map:     1.27 kB
../static/coreproject.chunk.Index.miwBtL35.js                         1.45 kB │ gzip:   0.68 kB │ map:     1.45 kB
../static/coreproject.chunk.Index.ChjI5wu6.js                         1.45 kB │ gzip:   0.74 kB │ map:     1.32 kB
../static/coreproject.chunk.Index._dWsB-ZV.js                         1.49 kB │ gzip:   0.78 kB │ map:     1.35 kB
../static/coreproject.chunk.Index.OW2A2AZo.js                         1.50 kB │ gzip:   0.79 kB │ map:     1.36 kB
../static/coreproject.chunk.Index.eNKjvz8X.js                         1.54 kB │ gzip:   0.80 kB │ map:     1.49 kB
../static/coreproject.chunk.Index.Bzxwcnma.js                         1.54 kB │ gzip:   0.74 kB │ map:     1.57 kB
../static/coreproject.chunk.Index.UtpnH4Ur.js                         1.56 kB │ gzip:   0.81 kB │ map:     1.51 kB
../static/coreproject.chunk.Index.zuIMKu4r.js                         1.57 kB │ gzip:   0.80 kB │ map:     1.79 kB
../static/coreproject.chunk.Index.eptf_36i.js                         1.59 kB │ gzip:   0.93 kB │ map:     1.47 kB
../static/coreproject.chunk.Index.3FJoscsc.js                         1.61 kB │ gzip:   0.88 kB │ map:     1.47 kB
../static/coreproject.chunk.Index.-2WF-kaN.js                         1.61 kB │ gzip:   0.87 kB │ map:     1.47 kB
../static/coreproject.chunk.Index.ZIjoBqyt.js                         1.67 kB │ gzip:   0.90 kB │ map:     1.66 kB
../static/coreproject.chunk.Index.94qjRHFU.js                         1.72 kB │ gzip:   0.84 kB │ map:     1.58 kB
../static/coreproject.chunk.Index.jztN-mgi.js                         1.72 kB │ gzip:   0.82 kB │ map:     1.79 kB
../static/coreproject.chunk.Index.d1pz6nbi.js                         1.90 kB │ gzip:   0.91 kB │ map:     1.71 kB
../static/coreproject.chunk.Index.aVR-sCWN.js                         1.91 kB │ gzip:   1.07 kB │ map:     1.77 kB
../static/coreproject.chunk.Index.edSJ8a7k.js                         1.91 kB │ gzip:   1.07 kB │ map:     1.78 kB
../static/coreproject.chunk.Index.1bh806ox.js                         2.01 kB │ gzip:   1.11 kB │ map:     1.87 kB
../static/coreproject.chunk.Index._XQBgcfX.js                         2.06 kB │ gzip:   1.05 kB │ map:     1.88 kB
../static/coreproject.chunk.Index.Vj8E_Kca.js                         2.12 kB │ gzip:   0.90 kB │ map:     2.27 kB
../static/coreproject.chunk.Index.UauWsCM8.js                         2.21 kB │ gzip:   1.04 kB │ map:     3.14 kB
../static/coreproject.chunk.Index.15hE_D64.js                         2.23 kB │ gzip:   1.03 kB │ map:     3.18 kB
../static/coreproject.chunk.Index.-Z3JR3MX.js                         2.30 kB │ gzip:   1.09 kB │ map:     2.16 kB
../static/coreproject.chunk.Index.wjuy4qYp.js                         2.31 kB │ gzip:   1.13 kB │ map:     2.69 kB
../static/coreproject.chunk.Index.SGybuoKj.js                         2.53 kB │ gzip:   1.20 kB │ map:     3.47 kB
../static/coreproject.chunk.Index.bZTpm6G5.js                         2.54 kB │ gzip:   1.15 kB │ map:     2.61 kB
../static/coreproject.chunk.Index.Xx2Mncqr.js                         2.77 kB │ gzip:   1.43 kB │ map:     2.63 kB
../static/coreproject.chunk.Index.Sn0Q3PtZ.js                         2.89 kB │ gzip:   1.14 kB │ map:     4.23 kB
../static/coreproject.chunk.Index.s38NhnjV.js                         3.15 kB │ gzip:   1.57 kB │ map:     3.03 kB
../static/coreproject.chunk.Index.BGNcwDjv.js                         4.77 kB │ gzip:   2.00 kB │ map:     5.35 kB
../static/coreproject.chunk.Index.jXZmbUH0.js                         5.32 kB │ gzip:   2.23 kB │ map:     5.54 kB
../static/coreproject.chunk.index.esm.7ZU_BHz0.js                     5.71 kB │ gzip:   2.93 kB │ map:     8.01 kB
../static/coreproject.entry.easytimer.EfkVFB83.js                     7.24 kB │ gzip:   2.88 kB │ map:    34.19 kB
../static/coreproject.chunk.index.vTrRw-G_.js                         8.24 kB │ gzip:   3.53 kB │ map:     9.54 kB
../static/coreproject.chunk.index._9vMi-ax.js                         8.66 kB │ gzip:   3.54 kB │ map:    95.31 kB
../static/coreproject.chunk.Index.zAO-Aiqo.js                         8.68 kB │ gzip:   3.20 kB │ map:     8.68 kB
../static/coreproject.entry.index.Cxd2XD8u.js                        15.57 kB │ gzip:   4.17 kB │ map:    53.97 kB
../static/coreproject.chunk.Index.jQgzB9pD.js                        16.81 kB │ gzip:   6.75 kB │ map:    38.05 kB
../static/coreproject.chunk.Index.fSPSO0qx.js                        19.07 kB │ gzip:   7.12 kB │ map:    53.59 kB
../static/coreproject.chunk.classname.r0xsQ-TV.js                    20.06 kB │ gzip:   6.64 kB │ map:   104.51 kB
../static/coreproject.entry.register.D_-KkPz6.js                     27.48 kB │ gzip:   9.77 kB │ map:   136.97 kB
../static/coreproject.entry.htmx.TaxAOfcZ.js                         56.27 kB │ gzip:  16.83 kB │ map:   230.86 kB
../static/coreproject.entry.hyperscript.kn0nY75f.js                  94.96 kB │ gzip:  26.47 kB │ map:   219.25 kB
../static/coreproject.chunk.index.esm.dwzZYf7S.js                   174.96 kB │ gzip:  81.02 kB │ map:   177.24 kB
../static/coreproject.chunk.index.esm.0AbFLnpp.js                   214.06 kB │ gzip:  94.58 kB │ map:   216.66 kB
../static/coreproject.chunk.index.esm.h-q4_oJ_.js                   425.35 kB │ gzip: 196.26 kB │ map:   428.34 kB
../static/coreproject.chunk.index.esm.F35oWm2J.js                   459.13 kB │ gzip: 202.46 kB │ map:   462.12 kB
../static/coreproject.chunk.index.esm.7m77ow97.js                   464.88 kB │ gzip: 231.61 kB │ map:   490.47 kB
../static/coreproject.chunk.index.esm.XbRhiM0i.js                   489.24 kB │ gzip: 225.61 kB │ map:   491.87 kB
../static/coreproject.chunk.index.esm.ZT1N5kiN.js                   565.13 kB │ gzip: 269.45 kB │ map:   567.75 kB
../static/coreproject.chunk.index.esm.1uJe1-pR.js                   596.23 kB │ gzip: 271.59 kB │ map:   598.86 kB
../static/coreproject.chunk.index.esm.ImDc22WR.js                   639.86 kB │ gzip: 281.03 kB │ map:   642.48 kB
../static/coreproject.chunk.index.esm.-6AdGpRj.js                   730.97 kB │ gzip: 340.19 kB │ map:   733.60 kB
../static/coreproject.chunk.index.esm.qoep7B_f.js                   804.56 kB │ gzip: 366.03 kB │ map:   807.18 kB
../static/coreproject.chunk.index.esm.Ipz4x2MM.js                   811.02 kB │ gzip: 371.37 kB │ map:   814.35 kB
../static/coreproject.chunk.Index.cpNNh98l.js                     1,081.87 kB │ gzip: 346.55 kB │ map: 2,282.95 kB
../static/coreproject.chunk.index.esm.lIq_N4yZ.js                 1,216.41 kB │ gzip: 565.00 kB │ map: 1,219.04 kB

See many many small chunks? That's what i was looking for

[baseplate-admin]

My another reason behind this was to prevent duplication,

by importing files, i dont have to declare them twice.

---

Explicitly calling svelteRetag but passing a lazy dynamic import, e.g.

svelteRetag({
	component: () => import('./HelloWorld.svelte'),
	tagname: 'hello-world',
});

And the import of ./HelloWorld.svelte wouldn't happen until after is encountered.

Uh can you do this?

And the import of ./HelloWorld.svelte wouldn't happen until after is encountered.

Is this possible to do? I dont think it is possible without some rather tricky sorcery. youtube for example uses the current approach i took (minus splitting chunks)

[patricknelson]

And the import of ./HelloWorld.svelte wouldn't happen until after is encountered.

Is this possible to do? I dont think it is possible without some rather tricky sorcery.

Most definitely. 😄 The hard part for me right now is settling on a very solid and intuitive syntax that is also efficient. That's critical because if I don't get that right, folks will get confused and start submitting issues/bugs and using the library in unexpected ways.

e.g. Right now this library is officially "backward compatible with svelte-tag" (the library I forked and eventually rewrote this library from). So, some concepts were:

// Most intuitive for user, but requires inferring if this is just an arrow function (*both* lambda or callback func) vs. an actual component
svelteRetag({
	component: () => import('./HelloWorld.svelte'),
	tagname: 'hello-world',
});

// Less intuitive, but far more efficient at the library level as it's not having to perform any advanced juggling to infer type
svelteRetag({
	component: () => import('./HelloWorld.svelte'),
	lazy: true, // required if above is not a component but a lazy dynamic import
	tagname: 'hello-world',
});

But folks could get confused with that second syntax and just set lazy: true without realizing they then need to define component completely differently. 😕 Right now I think I efficiently can go the first route but only if component is using a lambda, since then the component.prototype is undefined. If the user used this syntax, we'd be boned, since both a Svelte component (using class syntax) as well as a function() have a prototype, they are both typeof function and etc.

[patricknelson]

Ok. Give me some time to update the title and the initial comment (I'll scrap it and replace with my own), if that's alright. I'll add a disclaimer so folks know who wrote it, since that first comment will be under your name.

Also: There's already some witchcraft in svelte-tag (well, I understand it very thoroughly, but it is very tricky sorcery indeed). It involves the ability to support context, since I need to compensate for the existing asynchrony of HTML custom element initialization vs. the synchronous top-down initialization of native Svelte components. And this lazy dynamic import behavior breaks that a little bit when multiple instances of the same tag exist at the same time at initial load (multiple import()'s), so... while the first component is easy, multiple means a bit more of rewrite.

Hold off on this issue and I'll reopen it soon.

[patricknelson]

Actually @baseplate-admin, I probably shouldn't have promised to just edit this issue. It's intuitive to us, but for anyone else they'd have to read through this entire convo for context. Plus, I have a standard template for feature requests. I think it'll be simpler if I instead just create a new issue with the feature request template, explain your problem (in your words and pinging you) and then layout the technical specs as I see them.

I'll revert my changes to this issue now.

[baseplate-admin]

Sounds great :D

[patricknelson]

Ok, see #32. For now though, I'd suggest you try the following:

1. Use await import in the following way

   svelteRetag({
   	component: (await import('./HelloWorld.svelte')).default,
   	tagname: 'hello-world',
   });

2. Setup multiple entry points grouped by logical type (e.g. global.ts, widgets.ts) where you think they may be used together but not always on every page. This is just to prevent loading everything all at once. This depends on your situation and only you can figure this out for now 😄

3. Take those groups and then include them on each page as necessary

[baseplate-admin]

Use await import in the following way

This works. I wrote this type of codes before but forgot about the default part.

[baseplate-admin]

Hey one more thing.

Can svelte-retag be configured like this?

svelteRetag({
    css: import('./app.css?inline')
});

This would be seriously awesome

[patricknelson]

Not sure; if that's a feature you'd seriously like to have, please submit an issue for that (feature template) and explain it in detail if you can. Just note that any implementation for this needs to support all the existing features (light + shadow, including compilation targets: iife/umd + esm) or very clearly outline what is supported and what is not, etc.

Wish I could answer your Q off hand, however.

[patricknelson]

p.s. Please feel free to contribute as well. I appreciate the interest! It's a lot of work to help, especially for anything outside of my own use case (which triggered creation of this library) and PR's are welcome as long as they can conform. I don't have a contributions doc yet but essentially everything must have unit tests and of course cannot break any existing use cases.

[baseplate-admin]

please submit an issue for that (feature template) and explain it in detail if you can. Just note that any implementation for this needs to support all the existing features (light + shadow, including compilation targets: iife/umd + esm) or very clearly outline what is supported and what is not, etc.

Fair enough, i will explain in detail shortly ( in the morning..perhaps )

Please feel free to contribute as well.

Thanks :D, I also would like to contribute to this project myself.

[patricknelson]

K. If possible, let's please ensure that the scope is limited only to those things which are either actual bugs with svelte-tag itself or are features that cannot be accomplished without modifying svelte-retag itself (and are central to it's primary goal of turning Svelte components custom elements).

Right now just be warned that I'm already sort of at my limit in terms of time, bandwidth and mental capacity. 😞 So, there's not much room for much else beyond that (even reviewing these tickets can be a bit draining).

[patricknelson]

Btw @baseplate-admin QQ for you: When you invoke svelteRetag(), how were you loading your component CSS files into your project? Are you letting Vite inject them somehow on build (which is Vite's typical workflow for static sites), are you manually referencing them or doing something else like maybe automatically fetching *.css and importing them that way?

[patricknelson]

Never mind! Scratch that... looks like that's happening via Vite's async module loading magic. That is:

const modules = import.meta.glob('./src/**/*.svelte');

Results in the following compiled output (and includes the CSS file, e.g. hello-world-baa746fb.css):

let modules = Object.assign({
	'./src/hello-world.svelte': () => preload(() => import('./hello-world-fbb45795.js'), [
		'./hello-world-fbb45795.js',
		'./some-other-dependency-5181c010.js',
		'./hello-world-baa746fb.css'
	], import.meta.url),
});

[baseplate-admin]

Hi sorry for late response,

how were you loading your component CSS files into your project? Are you letting Vite inject them somehow on build

I import index.postcss ( which iteself is a tailwind file ) inside my django template.

are you manually referencing them or doing something else like maybe automatically fetching *.css and importing them that way?

Not at all, but i ideally would like for tailwind to be supported when shadow: true