Skip to content

Commit

Permalink
switch to svelte-retag
Browse files Browse the repository at this point in the history
  • Loading branch information
@typhonrt
typhonrt committed Jun 19, 2023
1 parent 5c12791 commit a648f3d
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 5 deletions.
4 changes: 2 additions & 2 deletions src/plugin/renderer/compile/compileNavBundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,11 @@ const navComponentScript = `
* @type {string}
*/
const indexJS = `
import Component from 'svelte-tag';
import svelteRetag from 'svelte-retag';
import NavigationSite from 'VirtualComponent.js';
new Component({
svelteRetag({
component: NavigationSite,
tagname: 'wc-dmt-nav',
attributes:['pageurl'],
Expand Down
6 changes: 3 additions & 3 deletions src/web-components/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Component from 'svelte-tag';
import svelteRetag from 'svelte-retag';

import WrapTest from './WrapTest.svelte';

Expand All @@ -7,11 +7,11 @@ import { scrollActivation } from './scrollActivation.js';
import './dmt-nav-web-component.js';

// Currently in Svelte v3 there is no standard way to create a Svelte based web component that doesn't use the shadow
// DOM. `svelte-tag` provides a workaround. This allows the Svelte components specified below to be loaded as custom
// DOM. `svelte-retag` provides a workaround. This allows the Svelte components specified below to be loaded as custom
// elements and remain in the main document flow allowing styles and interactivity loaded from the `main.js` to take
// effect. The good news is that Svelte v4 coming soon solves this issue!

new Component({
svelteRetag({
component: WrapTest,
tagname: 'wc-dmt-wrap',
shadow: false
Expand Down

11 comments on commit a648f3d

@patricknelson
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Congrats on being the first dependent to show up in https://github.com/patricknelson/svelte-retag/network/dependents!

I was poking around and realized that svelte-retag isn't actually defined in package.json yet. Is this still working well for you?

@typhonrt
Copy link
Contributor Author

@typhonrt typhonrt commented on a648f3d Jul 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@patricknelson I'll keep a eye out for where your effort heads. I did follow what you put out and gave it a shot, but it had visual glitches in my case. I only had so much time to try a different approach and swapped back to my old hack of sorts. I also didn't particularly like the additional <svelte-retag> wrapper that seemed to show up.

What I created is a TypeDoc "theme augmentation". I alter the default static HTML output of TypeDoc and dynamically create a Svelte component in the doc generation for the left-hand side navigation loaded as web component then promptly turn off that feature of TypeDoc. There are other normal Svelte components and optionally other Svelte web components. This is for improving the default output of TypeDoc. My approach saves 90% disk space over the current default theme for large projects and is 80% faster in doc gen.

For reducing the visual aspects during loading my hack is in the HTML augmentation opacity: 0 is added as an inline style on the body element. I take it off in a script that runs after the web components and other Svelte components have loaded, so no visual glitches.
https://github.com/typhonjs-typedoc/typedoc-theme-dmt/blob/main/src/components/index.js#L57

Basically this is a lot of static pages that load and have non-shadow DOM Svelte web components. If I had a bit more time I would have perhaps tried svelte-retag for a bit longer or got in contact, but the current solution is good enough.

Anyway.. I made another project using typedoc-theme-dmt that produces the entire TS built-in library declarations + WebGPU, WebCodecs, and WebXR. It has a NPM plugin where when you generate docs w/ TypeDoc it will link the modern web / JS symbols to the generated docs:
https://typhonjs-typedoc.github.io/ts-lib-docs/2023/dom/

My main project is a large runtime / integrated framework for Svelte and ultimately generated end-to-end documentation with this project and the TS built in lib docs:
https://typhonjs-fvtt-lib.github.io/api-docs/index.html

@patricknelson
Copy link

@patricknelson patricknelson commented on a648f3d Jul 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What visual glitches did you experience?

Confirming: Also, what practical impact did the extra <svelte-retag> tag have in your case? It exists for some important reasons (but only relevant for slots in the light DOM).

Did you use shadow DOM or light DOM? Thanks.

Edit: Oops, re-read to answer my last Q.

@typhonrt
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What visual glitches did you experience?

Same as any light dom / WC loading where the static page loads first and then the WC; so a flash / glitch as they appear. This particular project is probably not a pure or good test case as I'm modifying the output of another source. I still need to load a JS script that has issues in general IE the main.js bundle from the TypeDoc default theme. I slightly modify it to replace the search functionality w/ a Svelte powered component (not WC). I'm trying to drastically improve the "default theme" experience by augmentation rather than 100% replacing the default TypeDoc theme. It is quite possible that svelte-retag solves the problem in general, but due to the mixed environment I'm dealing with I can't leverage the solution in this case.

Also, what practical impact did the extra tag have in your case?

Just cleanliness. If I couldn't solve the visual glitch aspect then why have an extra wrapping WC. I did try some "static wrapping" via slots of generated HTML content and that worked fine too without svelte-retag, but backed that out due to implementation time. IE I was thinking of trying the augment the details / summary elements that expand w/ Web Animaton / WAPI Svelte actions for animation. Just ran out of time for that idea. Some initial tests though looked reasonably promising.

It again is a probably a bit of a fight with the main.js bundle that controls those detail elements (open / closed state via local storage). I'm not entirely replacing the default TypeDoc theme just augmenting it.
It is possible if I completely replaced the default TypeDoc theme output and re-implemented what is in the main.js bundle that svelte-retag aspects would be more obvious or work as intended.

The idea behind what I'm doing is to create something that drastically improves the default theme UX while being able to keep up with changes to the core TypeDoc experience as new features are added / removed from the default theme without having a completely separate replacement of the theme. What I put together does work well and drastically improves the disk space efficiency. The TS built-in lib DOM API alone is 1.4+ GB of disk space w/ the standard TypeDoc default theme and under 140 (~137MB) with my "theme augmentation". This is why I can get away with hosting it on Github Pages.

@patricknelson
Copy link

@patricknelson patricknelson commented on a648f3d Jul 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as any light dom / WC loading where the static page loads first and then the WC; so a flash / glitch as they appear. This

Check out this IIFE demo. If you compile to UMD/IIFE and load it in the <head>, it should not flicker at all, even if you have light DOM slots. I'm super not familiar with your project whatsoever, but maybe it might help and possibly nudge you in the right direction (in case svelte-retag might still work in this case).

Also, what practical impact did the extra tag have in your case?

Just cleanliness.

Thankfully that is more just visually if you're looking at the DOM in DevTools. It serves a very important practical function to help isolate the DOM hierarchy during early parsing. See patricknelson/svelte-retag#8 for implementation and check out the source code comments for a deeper explanation. 😄 https://github.com/patricknelson/svelte-retag/blob/1.0.0/index.js#L24-L35

Unfortunately that last bit of what you're talking about is a bit too in the weeds for me right now, but I respect/appreciate the effort to improve things (that's what drives my passion too)!

@typhonrt
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately that last bit of what you're talking about is a bit too in the weeds for me right now, but I respect/appreciate the effort to improve things (that's what drives my passion too)!

Yeah, No worries. This particular project is not a clean use case since I am still involving an ESM bundle that I don't fully control that has to run after the web components are initialized. Things are working adequately w/ reasonable results for the work around in place. If I do further pursue full control and not just an augmentation of the default TypeDoc theme I'll have a bit more liberty in choosing a loading strategy.

@patricknelson
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p.s. FWIW, I've submitted an official feature request for Svelte to support slots in the light DOM so that we don't have to resort to reinventing the wheel (like svelte-retag, svelte-tag and the sort of stuff I'm sure you might have done).

Keep an eye on it here: sveltejs/svelte#8963

@patricknelson
Copy link

@patricknelson patricknelson commented on a648f3d Jul 13, 2023 •
edited by typhonrt
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p.s. Re-reading my comment from above, I'm realizing now I didn't link to my demo! 🤦‍♂️

See: https://svelte-retag.vercel.app/iife.html

Yeah.. I have checked it out.. I can't use an IIFE bundle in this case as things go. In this "theme augmentation" I'm still loading the main.js payload from the default theme and it has timing issues in regard to the web components loading, so must be managed via ESM. So, the IIFE approach required for svelte-retag is not going to work for this particular project at this time. In the future if I take over all of the JS handling from the default theme I'll certainly consider it.

I'm glad you are advocating for better light DOM web component support in Svelte nonetheless.

@typhonrt
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops.. actually edited your last post instead of further commenting... :O

@patricknelson
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well that's freaky. 😆

So, the IIFE approach required for svelte-retag

svelte-retag doesn't require it by any means. That's just a feature that it allows for in other circumstances where you maybe have more control over your components and the ability to build a package that can load early, svelte-retag allows you to run/load early to proactively render your custom elements / web components without any issues even if they have slot content. However, I understand that's not possible in your situation (svelte-retag works fine as ESM modules, which was how it was originally built anyway).

@typhonrt
Copy link
Contributor Author

@typhonrt typhonrt commented on a648f3d Jul 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

svelte-retag doesn't require it by any means. That's just a feature that it allows for in other circumstances where you maybe have more control over your components and the ability to build a package that can load early, svelte-retag allows you to run/load early to proactively render your custom elements / web components without any issues even if they have slot content. However, I understand that's not possible in your situation (svelte-retag works fine as ESM modules, which was how it was originally built anyway).

Absolutely. I of course was using svelte-tag first before giving retag a go and indeed tried things via ESM. I'll keep an eye out on how your efforts progress. :D

Please sign in to comment.