demo: on each page link to setup template

[hpvd]

would be perfectly helpful to understand how it's done asap, to have on every page of the demo a direct deeplink to it's tsx template file

e.g.
on:
https://liveviews.cc/auto-complete
link to:
https://github.com/beenotung/ts-liveview/blob/master/server/app/pages/auto-complete-demo.tsx

[beenotung]

Good suggestion, I'll add a link to the source file of each pages, maybe also show the code with syntax highlight

[hpvd]

maybe also show the code with syntax highlight

yeah! As always there is a tool advertising... The lightest suitable tool I know so far is
prismjs https://github.com/PrismJS/prism/

• only 2KB minified & gzipped (core). Each language definition adds roughly 300-500 bytes.
• supports tsx and more see https://prismjs.com/#supported-languages
• should support your usage of embedded css in tsx

[beenotung]

prismjs looks like great choice, mush smaller than highlight.js

[beenotung]

I can get the basic syntax highlight working; trying to figure out how to enable two languages syntax highlight at the same time.

With class="lang-tsx":

With class="lang-css":

[hpvd]

great!

regarding second language:
the example code is a scroll box (hard to see) where highlighting of inline code is demonstrated:
https://prismjs.com/#examples

got there from this issue and the mentioned merge: PrismJS/prism#2776

[beenotung]

Updated the deployed version to show source code of each demo pages.

Will explore using regex to extract /* css */ and /* html */ and wrap them into corresponding <code class="language-xxx"> (hence there will be nested <code>)

Screenshot of current version https://liveviews.cc/auto-complete:

[beenotung]

Maybe it would be helpful to omit the import statements for simplicity.

(Updated to hide import statements by default but able to show them after click to expand (using <details> and <summary>)

[hpvd]

looks great in the demo!

[hpvd]

just found, the prism.js file seems to be loaded twice
(found it because seeing a flickering when loading the page with throttled speed)

btw: the file also looks a little"huge" 11/31KB. Would have expected a little less, even with all languages included (min+gzipped).

[beenotung]

The double loading phenomenon is expected, because the style and script tag is included in the component, not directly in the app skeleton, hence if the component is used multiple times, the resources will be loaded multiple times. On another hand, if the component is not used in that page, it's not loaded.

Normally, subsequent loading should be answered from the browser cache.

I can think up a workaround, to inject the resources only once by marking a flag in the render context, and inject them in a place of dom that will not be removed throughout the whole life cycle.

This workaround may work but it'll (slightly) increase the complexity.

[hpvd]

when starting to dive a little deeper into the stunning demo by looking into webdev tools,
on the very first look the direct loading of prism.js and prism.css is a little diluting/diminishing the great benefits of your solution: size, speed and simplicity.

Of course it's great to be able to directly look into the setup and one should keep it!

Since you already hide the setup code and make users to click a button to show it
-> what do you think about loading all the resources needed for showing the setup on this click too?

[beenotung]

what do you think about loading all the resources needed for showing the setup on this click too?

That is a great suggestion!

We can load the additional js and css upon the click event.

In additional, the long code that are hidden by default can also be loaded lazily.

That is possible for clients with javascript enabled, but it'll require a full page load for clients without/disabled javascript. So I prefer to keep the code content inline but load the js and css lazily.

On the other hand, I'll try to do the parsing and code generation (wrapping span with classes) on the server at boot-time or build-time. This way may result in lighter runtime 🤔