Using Preact with UserScript

• The wisdom and source code of the predecessors in /villagepump, /programming-notes, and /takker were very helpful.
  • https://github.com/takker99/scrapbox-katex-previewer/blob/main/App.tsx
    • This one is simple and easy to understand.
    • I want to create something even simpler (takker)

script.js

import {html, render} from 'https://scrapbox.io/api/code/programming-notes/htm@3.0.4%2Fpreact/script.js';
 
(() => {
	const root = document.getElementById('app-container');
	render(html`<p>Hello</p>`, root);
})()

• This is the minimum rendering code.

  • This is how it looks with added styles.
    • 
  • I will bundle preact myself later.

• It seems that you need to wrap the JSX syntax with “html““.

  • It’s not JSX syntax, but a JSX-like syntax that can be written in plain JS using tagged templates (takker).
  • https://github.com/developit/htm