docs: a code component for react, svelte, vue and angular

[lvolland]

a Code component per framework, one folder each, ticking the four boxes on #26.

examples/react/Code.jsx              react 19
examples/svelte/Code.svelte          svelte 5, with the svelte 4 form noted in the file
examples/vue/Code.vue + App.vue      vue 3
examples/angular/code.component.ts   angular 22

this supersedes #42, and takes two things from it

i hadn't seen #42 when i opened this. @dflock got to vue first, seventeen months ago,
and was right on two counts where i was wrong:

• one folder per framework, matching node-require/ and node-ts-module/. i had
  four loose files in examples/frameworks/. restructured
• the theme imported by the component, so the example carries its own styling
  instead of relying on a <link> the reader has to remember. adopted in all four

their App.vue is here too, and the commit credits them.

the one thing i changed from #42 is the path. @speed-highlight/core/dist/themes/default.css
is not reachable — dist/themes was never in exports:

@speed-highlight/core/dist/themes/default.css   ERR_PACKAGE_PATH_NOT_EXPORTED
@speed-highlight/core/themes/default.css        resolves

closes #42, and #26.

verified

all four are the exact files that produced that screenshot, in one vite 8 production
build, with no <link> in the page — the styling comes from the components alone:

react:3  vue:3  svelte:3  angular:3      keyword spans in the built page
white-space: pre                          theme reached the dom
.shj-syn-kwd → rgb(238, 17, 102)          #e16, the default theme's keyword colour

for angular i also checked the built dom keeps class="shj-lang-js shj-multiline" and the
gutter cells, since that was the one thing i wasn't sure survived its sanitizer.

two things the components have in common, and why

they render the string, they don't highlight the node. highlightElement on a mounted
node fights the framework: it owns that dom and wipes the spans on its next render.

they all guard the same race. highlightText is async because it imports the language,
so a component whose props change before that resolves would paint the stale result over the
new one. i built #42's component against vue 3.5.40 and changed its props after mount to be
sure this was worth the lines:

#42        const a = 1;      ← still the first render, it highlights in onMounted only
this pr    def f(): pass

notes

• injecting the html is safe even for untrusted code, since sanitize escapes &, < and
  > in every token. i threw 7 injection payloads across 5 languages at highlightText and
  no foreign tag came out. each readme says so, because it is the first question anyone asks
• angular needs no bypassSecurityTrustHtml — its sanitizer keeps the class attribute. i
  checked the allow-list and then checked the rendered dom
• no build config, no scaffold, no package.json per framework — one component each, meant
  to be copied
• vite needs no plugin: it globs the language directory by itself now. the 2023 advice in
  [BUG] Unable to import language when bundled by Vite. #31 is out of date, worth knowing

[matubu]

#42

[lvolland]

hadn't seen #42 — @dflock got to vue first and was right on two things i got wrong: one folder per framework (matching node-require/), and importing the theme from the component instead of a <link>. both adopted, their App.vue is in, and the commit credits them.

one change to their version: dist/themes/default.css isn't reachable, dist/themes was never in exports. @speed-highlight/core/themes/default.css is the path that resolves.

rebuilt with no <link> in the page to check the components really do carry their own styling — all four still render, .shj-syn-kwd comes out #e16. this closes #42 now.