diff --git a/bs/docs.js b/bs/docs.js
new file mode 100755
index 0000000..973ecfe
--- /dev/null
+++ b/bs/docs.js
@@ -0,0 +1,24 @@
+#!/usr/bin/env nodejsscript
+/* jshint esversion: 11,-W097, -W040, module: true, node: true, expr: true, undef: true *//* global echo, $, pipe, s, fetch, cyclicLoop */
+const path_target= {
+ root: "docs/",
+ html: "docs/index.html",
+ css: "docs/"
+};
+import { createHTMl } from "./docs/jsdom.js";
+const ssr= createHTMl("");
+import { register } from "../jsdom.js";
+const { el }= await register(ssr.dom);
+
+echo("Loading components…");
+const pkg= s.cat("package.json").xargs(JSON.parse);
+import { head, body, css } from "../docs_src/index.html.js";
+document.head.append(head(pkg, path_target));
+document.body.append(body(pkg));
+document.body.append(
+ el("script", { src: "https://cdn.jsdelivr.net/npm/shiki" }),
+ el("script", { src: "index.js", type: "module" })
+);
+
+s.echo(ssr.serialize()).to(path_target.html);
+s.echo(css.content).to(path_target.css+"index.css");
diff --git a/bs/docs/jsdom.js b/bs/docs/jsdom.js
new file mode 100644
index 0000000..339cde3
--- /dev/null
+++ b/bs/docs/jsdom.js
@@ -0,0 +1,34 @@
+import { JSDOM } from "jsdom";
+const html_default= "";
+let keys= [];
+let dom= null;
+import { relative } from 'node:path';
+import { writeFileSync } from 'node:fs';
+export function createHTMl(html, options= {}){
+ if(!html) html= html_default;
+ if(dom) cleanHTML();
+ // set a default url if we don't get one - otherwise things explode when we copy localstorage keys
+ if (!('url' in options)) { Object.assign(options, { url: 'http://localhost:3000' }) }
+
+ dom= new JSDOM(html, options);
+ const window= dom.window;
+ if(!keys.length)
+ keys= Object.getOwnPropertyNames(window).filter((k) => !k.startsWith('_') && !(k in globalThis));
+ keys.forEach(key=> globalThis[key]= window[key]);
+ globalThis.document= window.document
+ globalThis.window= window
+ window.console= globalThis.console
+ return {
+ dom,
+ writeToFS({ html, css }){
+ if(css) this.style.writeToFile(css, relative(html, css).slice(1));
+ if(html) writeFileSync(html, dom.serialize());
+ },
+ serialize(){ return dom.serialize(); }
+ };
+}
+export function cleanHTML(){
+ if(!dom) return;
+ keys.forEach(key=> delete globalThis[key]);
+ dom= false;
+}
diff --git a/docs/index.css b/docs/index.css
new file mode 100644
index 0000000..a5786d7
--- /dev/null
+++ b/docs/index.css
@@ -0,0 +1,21 @@
+:root {
+ color-scheme: dark light;
+ --body-max-width: 40rem;
+}
+*, ::before, ::after { box-sizing: border-box; }
+body > * {
+ margin-inline: max(.5rem, calc(50% - var(--body-max-width) / 2));
+ font-family: Tahoma, Verdana, Arial, sans-serif;
+}
+h1{
+ text-align: center;
+ text-wrap: balanc;
+}
+.note{
+ font-size: .9rem;
+ font-style: italic;
+}
+.example{
+ --body-max-width: 80rem;
+ height: 20rem;
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..d9ef61e
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,23 @@
+`deka-dom-el` — Introduction/Guide`deka-dom-el` — Introduction/Guide
The library tries to provide pure JavaScript tool(s) to create reactive interfaces.The main goals are:
- provide a small wrapper around the native JavaScript DOM
- keep library size under 10kB
- zero dependencies (if possible)
- prefer a declarative/functional approach
- unopinionated (allow alternative methods)
It is, in fact, an reimplementation of jaandrle/dollar_dom_component.
import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";
+const clicks= S(0);
+document.body.append(
+ el("<>").append(
+ el("p", S(()=>
+ "Hello World "+"🎉".repeat(clicks())
+ )),
+ el("button", {
+ type: "button",
+ onclick: ()=> clicks(clicks()+1),
+ textContent: "Fire"
+ })
+ )
+);
+