From 102d1af6a44481e00a30ab5c7674e21bca96ead8 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Tue, 26 Sep 2023 16:02:10 +0200 Subject: [PATCH 1/2] :sparkles: Add docs page --- bs/docs.js | 24 ++ bs/docs/jsdom.js | 34 ++ docs/index.css | 21 + docs/index.html | 23 + docs/index.js | 19 + docs_src/components/example.html.js | 44 ++ docs_src/components/examples/helloWorld.js | 14 + docs_src/index.css.js | 44 ++ docs_src/index.html.js | 51 +++ docs_src/layout/head.html.js | 47 ++ package-lock.json | 480 +++++++++++++++++++++ package.json | 1 + 12 files changed, 802 insertions(+) create mode 100755 bs/docs.js create mode 100644 bs/docs/jsdom.js create mode 100644 docs/index.css create mode 100644 docs/index.html create mode 100644 docs/index.js create mode 100644 docs_src/components/example.html.js create mode 100644 docs_src/components/examples/helloWorld.js create mode 100644 docs_src/index.css.js create mode 100644 docs_src/index.html.js create mode 100644 docs_src/layout/head.html.js 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:

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"
+		})
+	)
+);
+
\ No newline at end of file diff --git a/docs/index.js b/docs/index.js new file mode 100644 index 0000000..276f2c4 --- /dev/null +++ b/docs/index.js @@ -0,0 +1,19 @@ +const langs= { + javascript: 'js', + js: 'js', + html: 'html', +}; + +const highlighter= await shiki.getHighlighter({ + theme: 'css-variables', + langs: ['js', 'html', 'shell'], +}); +const codeBlocks= document.querySelectorAll('pre code[class*="language-"]'); + +codeBlocks.forEach((block)=> { + const lang= block.className.replace('language-', ''); + const html= highlighter.codeToHtml(block.textContent, { + lang: langs[lang] || lang, + }); + block.innerHTML= html; +}); diff --git a/docs_src/components/example.html.js b/docs_src/components/example.html.js new file mode 100644 index 0000000..f8b06da --- /dev/null +++ b/docs_src/components/example.html.js @@ -0,0 +1,44 @@ +let loaded= false; +import { styles } from "../index.css.js"; +export const css= styles().scope(example).css` +:host{ + --body-max-width: 80rem; + height: 20rem; +} +` +import { el } from "../../jsdom.js"; +export function example({ src, language= "javascript" }){ + register(); + const cwd= "components"; + src= "."+src.slice(src.indexOf(cwd)+cwd.length); + const code= s.cat(new URL(src, import.meta.url)) + .toString() + .replaceAll(' from "../../../index-with-signals.js";', ' from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js";'); + const id= "code-"+Math.random().toString(36).slice(2, 7); + return el("<>").append( + el("div", { id, className: example.name }).append( + el("pre").append( + el("code", { + className: "language-"+language, + textContent: code + }) + ) + ), + el("script", ` + Flems(document.getElementById("${id}"), { + files: [{ + name: ".js", + content: ${JSON.stringify(code)} + }], + toolbar: false, + }) + `) + ); +} +function register(){ + if(loaded) return; + document.head.append( + el("script", { src: "https://flems.io/flems.html", type: "text/javascript", charset: "utf-8" }) + ); + loaded= true; +} diff --git a/docs_src/components/examples/helloWorld.js b/docs_src/components/examples/helloWorld.js new file mode 100644 index 0000000..7f05790 --- /dev/null +++ b/docs_src/components/examples/helloWorld.js @@ -0,0 +1,14 @@ +import { el, S } from "../../../index-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" + }) + ) +); diff --git a/docs_src/index.css.js b/docs_src/index.css.js new file mode 100644 index 0000000..2a2f015 --- /dev/null +++ b/docs_src/index.css.js @@ -0,0 +1,44 @@ +const scopes= new WeakSet(); +const s= { + scope(s){ + if(!scopes.has(s)){ + scopes.add(s); + this.host= s.name; + } + return this; + }, + css(...a){ + let c= css(...a); + if(this.host){ + c= c.replaceAll(":host", "."+this.host); + this.host= ""; + } + if(this.content) this.content+= "\n"; + this.content+= c; + return this; + }, + include(...i){ + if(this.content) this.content+= "\n"; + this.content+= i.map(i=> typeof i === "string" ? i : i.content).join("\n"); + return this; + } +}; +export function css(...a){ + return String.raw(...a).trim(); +} +export function styles(){ return Object.assign(Object.create(s), { content: "" }); } +export const common= css` +: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; +} +`; diff --git a/docs_src/index.html.js b/docs_src/index.html.js new file mode 100644 index 0000000..049d9c0 --- /dev/null +++ b/docs_src/index.html.js @@ -0,0 +1,51 @@ +import { el } from "../jsdom.js"; +import { head as headCommon } from "./layout/head.html.js"; +export function head(pkg, path_target){ + return headCommon({ + id: "index", + title: pageName(pkg), + description: "Introducing basic concepts.", + pkg, path_target + }); +} + +import { styles, common } from "./index.css.js"; +import { example, css as example_css } from "./components/example.html.js"; +export const css= styles() +.include(common) +.css` +.note{ + font-size: .9rem; + font-style: italic; +} +` +.include(example_css); +export function body(pkg){ + return el("<>").append( + el("h1", pageName(pkg)), + el("p").append( + "The library tries to provide pure JavaScript tool(s) to create reactive interfaces.", + "The main goals are:" + ), + el("ul").append( + el("li", "provide a small wrapper around the native JavaScript DOM"), + el("li", "keep library size under 10kB"), + el("li", "zero dependencies (if possible)"), + el("li", "prefer a declarative/functional approach"), + el("li", "unopinionated (allow alternative methods)"), + ), + el("p", { className: "note" }).append( + "It is, in fact, an reimplementation of ", + el("a", { + href: "https://github.com/jaandrle/dollar_dom_component", + title: "GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.", + textContent: "jaandrle/dollar_dom_component" + }), + ".", + ), + example({ src: "./components/examples/helloWorld.js" }) + ); +} +function pageName(pkg){ + return `\`${pkg.name}\` — Introduction/Guide`; +} diff --git a/docs_src/layout/head.html.js b/docs_src/layout/head.html.js new file mode 100644 index 0000000..495e73c --- /dev/null +++ b/docs_src/layout/head.html.js @@ -0,0 +1,47 @@ +import { el } from "../../jsdom.js"; +/** + * @param {object} def + * @param {string} def.id Page `id` is used as stylesheet name. + * @param {string} def.title Page `title` is also used as `h1` + * @param {string} def.description Page 'description'. + * @param {object} def.pkg Package information. + * @param {string} def.pkg.name + * @param {string} def.pkg.description + * @param {string} def.pkg.homepage + * @param {{ root: string, css: string}} def.path_target Final URL where the page will be rendered. + * @param {object} def + * */ +export function head({ id, title, description, pkg, path_target }){ + return el("<>").append( + el("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), + el("link", { rel: "stylesheet", href: stylesheetHref(path_target, id) }), + + el("meta", { name: "description", content: description }), + el(metaTwitter, pkg), + el(metaFacebook, pkg), + el("title", title), + ); +} +function metaTwitter({ name, description, homepage }){ + return el("<>").append( + el("meta", { name: "twitter:card", content: "summary_large_image" }), + //el("meta", { name: "twitter:domain", content: "" }), + el("meta", { name: "twitter:url", content: homepage }), + el("meta", { name: "twitter:title", content: name }), + el("meta", { name: "twitter:description", content: description }), + //el("meta", { name: "twitter:image", content: "" }), + el("meta", { name: "twitter:creator", content: "@jaandrle" }), + ); +} +function metaFacebook({ name, description, homepage }){ + return el("<>").append( + el("meta", { name: "og:url", content: homepage }), + el("meta", { name: "og:title", content: name }), + el("meta", { name: "og:description", content: description }), + //el("meta", { name: "og:image", content: "" }), + el("meta", { name: "og:creator", content: "@jaandrle" }), + ); +} +function stylesheetHref(path_target, name){ + return path_target.css.replace(path_target.root, "")+name+".css"; +} diff --git a/package-lock.json b/package-lock.json index 4c32ab3..86581d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "devDependencies": { "@size-limit/preset-small-lib": "^8.2.6", "esbuild": "^0.19.2", + "jsdom": "^22.1.0", "jshint": "^2.13.6", "nodejsscript": "github:jaandrle/nodejsscript#dev-v1", "size-limit-node-esbuild": "^0.2.0" @@ -840,6 +841,15 @@ "size-limit": "8.2.6" } }, + "node_modules/@tootallnate/once": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", + "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==", + "dev": true, + "engines": { + "node": ">= 10" + } + }, "node_modules/@types/glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz", @@ -887,6 +897,12 @@ "@types/node": "*" } }, + "node_modules/abab": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", + "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==", + "dev": true + }, "node_modules/abort-controller": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", @@ -899,6 +915,18 @@ "node": ">=6.5" } }, + "node_modules/agent-base": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "dev": true, + "dependencies": { + "debug": "4" + }, + "engines": { + "node": ">= 6.0.0" + } + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -975,6 +1003,12 @@ "node": ">=0.12.0" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1079,6 +1113,18 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1109,6 +1155,18 @@ "node": ">=18" } }, + "node_modules/cssstyle": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz", + "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==", + "dev": true, + "dependencies": { + "rrweb-cssom": "^0.6.0" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", @@ -1118,12 +1176,58 @@ "node": ">= 12" } }, + "node_modules/data-urls": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz", + "integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==", + "dev": true, + "dependencies": { + "abab": "^2.0.6", + "whatwg-mimetype": "^3.0.0", + "whatwg-url": "^12.0.0" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/date-now": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", "integrity": "sha512-AsElvov3LoNB7tf5k37H2jYSB+ZZPMT5sG2QjJCcdlV5chIv6htBUBUui2IKRjgtKAKtCBN7Zbwa+MtwLjSeNw==", "dev": true }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/decimal.js": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", + "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==", + "dev": true + }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -1173,6 +1277,18 @@ "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==", "dev": true }, + "node_modules/domexception": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz", + "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==", + "dev": true, + "dependencies": { + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/domhandler": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz", @@ -1319,6 +1435,20 @@ "node": ">=8" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dev": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/formdata-polyfill": { "version": "4.0.10", "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", @@ -1421,6 +1551,18 @@ "node": ">= 0.4.0" } }, + "node_modules/html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "dev": true, + "dependencies": { + "whatwg-encoding": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/htmlparser2": { "version": "3.8.3", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz", @@ -1434,6 +1576,45 @@ "readable-stream": "1.1" } }, + "node_modules/http-proxy-agent": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz", + "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==", + "dev": true, + "dependencies": { + "@tootallnate/once": "2", + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/https-proxy-agent": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", + "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", + "dev": true, + "dependencies": { + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -1537,12 +1718,60 @@ "node": ">=0.12.0" } }, + "node_modules/is-potential-custom-element-name": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", + "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", + "dev": true + }, "node_modules/isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==", "dev": true }, + "node_modules/jsdom": { + "version": "22.1.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz", + "integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==", + "dev": true, + "dependencies": { + "abab": "^2.0.6", + "cssstyle": "^3.0.0", + "data-urls": "^4.0.0", + "decimal.js": "^10.4.3", + "domexception": "^4.0.0", + "form-data": "^4.0.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy-agent": "^5.0.0", + "https-proxy-agent": "^5.0.1", + "is-potential-custom-element-name": "^1.0.1", + "nwsapi": "^2.2.4", + "parse5": "^7.1.2", + "rrweb-cssom": "^0.6.0", + "saxes": "^6.0.0", + "symbol-tree": "^3.2.4", + "tough-cookie": "^4.1.2", + "w3c-xmlserializer": "^4.0.0", + "webidl-conversions": "^7.0.0", + "whatwg-encoding": "^2.0.0", + "whatwg-mimetype": "^3.0.0", + "whatwg-url": "^12.0.1", + "ws": "^8.13.0", + "xml-name-validator": "^4.0.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "canvas": "^2.5.0" + }, + "peerDependenciesMeta": { + "canvas": { + "optional": true + } + } + }, "node_modules/jshint": { "version": "2.13.6", "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.13.6.tgz", @@ -1646,6 +1875,27 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "dev": true, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dev": true, + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", @@ -1676,6 +1926,12 @@ "node": ">=4" } }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, "node_modules/nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", @@ -1773,6 +2029,12 @@ "node": ">=0.10.0" } }, + "node_modules/nwsapi": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz", + "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", + "dev": true + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -1794,6 +2056,30 @@ "node": ">=4" } }, + "node_modules/parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "dev": true, + "dependencies": { + "entities": "^4.4.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", @@ -1836,6 +2122,27 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/psl": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", + "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==", + "dev": true + }, + "node_modules/punycode": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", + "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", + "dev": true + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -1892,6 +2199,12 @@ "node": ">= 0.10" } }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "dev": true + }, "node_modules/resolve": { "version": "1.22.4", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz", @@ -1919,6 +2232,12 @@ "node": ">=0.10.0" } }, + "node_modules/rrweb-cssom": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz", + "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==", + "dev": true + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -1954,6 +2273,24 @@ "node": ">=6" } }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true + }, + "node_modules/saxes": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", + "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==", + "dev": true, + "dependencies": { + "xmlchars": "^2.2.0" + }, + "engines": { + "node": ">=v12.22.7" + } + }, "node_modules/semver": { "version": "7.5.3", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", @@ -2100,6 +2437,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/symbol-tree": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", + "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==", + "dev": true + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -2112,6 +2455,33 @@ "node": ">=8.0" } }, + "node_modules/tough-cookie": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", + "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==", + "dev": true, + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tr46": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz", + "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==", + "dev": true, + "dependencies": { + "punycode": "^2.3.0" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", @@ -2130,6 +2500,37 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "dev": true, + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, + "node_modules/w3c-xmlserializer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", + "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==", + "dev": true, + "dependencies": { + "xml-name-validator": "^4.0.0" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/web-streams-polyfill": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", @@ -2139,6 +2540,49 @@ "node": ">= 8" } }, + "node_modules/webidl-conversions": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", + "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "dev": true, + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/whatwg-mimetype": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz", + "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/whatwg-url": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz", + "integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==", + "dev": true, + "dependencies": { + "tr46": "^4.1.1", + "webidl-conversions": "^7.0.0" + }, + "engines": { + "node": ">=14" + } + }, "node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", @@ -2162,6 +2606,42 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/ws": { + "version": "8.14.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", + "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", + "dev": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xml-name-validator": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", + "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/xmlchars": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", + "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", + "dev": true + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index f44e5fc..f337c8f 100644 --- a/package.json +++ b/package.json @@ -91,6 +91,7 @@ "devDependencies": { "@size-limit/preset-small-lib": "^8.2.6", "esbuild": "^0.19.2", + "jsdom": "^22.1.0", "jshint": "^2.13.6", "nodejsscript": "github:jaandrle/nodejsscript#dev-v1", "size-limit-node-esbuild": "^0.2.0" From 7bbc58e3cc5504844fba144a71cd8c634c0400c4 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Mon, 9 Oct 2023 13:51:55 +0200 Subject: [PATCH 2/2] `elCode` --- docs_src/components/example.html.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/docs_src/components/example.html.js b/docs_src/components/example.html.js index f8b06da..8a10c67 100644 --- a/docs_src/components/example.html.js +++ b/docs_src/components/example.html.js @@ -24,17 +24,16 @@ export function example({ src, language= "javascript" }){ }) ) ), - el("script", ` - Flems(document.getElementById("${id}"), { - files: [{ - name: ".js", - content: ${JSON.stringify(code)} - }], - toolbar: false, - }) - `) + elCode({ id, content: code }) ); } +function elCode({ id, content }){ + const options= JSON.stringify({ + files: [{ name: ".js", content }], + toolbar: false + }); + return el("script", `Flems(document.getElementById("${id}"), JSON.parse(${options}));`); +} function register(){ if(loaded) return; document.head.append(