preacts

Run preact standalone in the browser.

- no transpiler necessary
- no build chain
- just import one tiny ~12kB file

Supports

- Writing html and css Template literals
- Custom Components. Generate and register a custom element from a preact component.
- css rendering using CSSStyleSheet

Based on

- preact and preact hooks
- HTM (Hyperscript Tagged Markup) and html/preact
- preact-custom-element
- preact-signals
- wouter

Readings

- preact and Web Components: (npm)
- preact and PWA:
- Using Preact with HTM and ImportMaps:
- Syntax highlighting and language support via the inline-html extension.

Install

npm:

``bash
npm i --save-dev @kruemelo/preacts
cp node-modules/@kruemelo/preacts/dist/preacts.js preacts.js
`

Replace with your desired target location.

Use

index.html:

`html







`

You need to adjust importmap: Replace with the path the preacts.js file is accessible for the browser.

Greeting.js:

`js
import { html, css } from "preacts";

export const Greeting = ({ name = 'world', count }) => {
return html

Hello, ${count === 0 ? name : "again"}!

;
};

// css
const backgroundColor = "lightgreen";
const style = css
.Greeting {
background-color: ${backgroundColor};
}
;

css.render(style);
`

Build lib

`bash
npm run build
`

Run

`bash


prerequisites

npm install http-server -g
npm i

startup the server open test in browser

http-server -o /test
``