1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-03 20:35:53 +02:00

🐛 DDE + dd<el> in md

This commit is contained in:
Jan Andrle 2025-03-07 21:45:44 +01:00
parent d742d960ac
commit 7f3b818fa5
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
8 changed files with 39 additions and 17 deletions

View File

@ -6,7 +6,7 @@
<img src="docs/assets/logo.svg" alt="Deka DOM Elements Logo" width="180" height="180"> <img src="docs/assets/logo.svg" alt="Deka DOM Elements Logo" width="180" height="180">
</p> </p>
# Deka DOM Elements (dd<el> or dde) # Deka DOM Elements (dd<\el\> or DDE)
***Vanilla for flavouring — a full-fledged feast for large projects*** ***Vanilla for flavouring — a full-fledged feast for large projects***
@ -74,7 +74,7 @@ Creating reactive elements, components, and Web Components using the native
This library bridges the gap between minimal solutions like van/hyperscript and more comprehensive frameworks like This library bridges the gap between minimal solutions like van/hyperscript and more comprehensive frameworks like
[solid-js](https://github.com/solidjs/solid), offering a balanced trade-off between size, complexity, and usability. [solid-js](https://github.com/solidjs/solid), offering a balanced trade-off between size, complexity, and usability.
Following functional programming principles, dd<el> starts with pure JavaScript (DOM API) and gradually adds Following functional programming principles, dd\<el\> starts with pure JavaScript (DOM API) and gradually adds
auxiliary functions. These range from minor improvements to advanced features for building complete declarative auxiliary functions. These range from minor improvements to advanced features for building complete declarative
reactive UI templates. reactive UI templates.
@ -96,7 +96,7 @@ into existing projects.
```html ```html
<script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
<script type="module"> <script type="module">
const { el, S } = dde; const { el, S } = DDE;
</script> </script>
``` ```

View File

@ -9,7 +9,7 @@ export async function build({ files, filesOut, minify= "partial", iife= true }){
echo(`Processing ${file} (minified: ${minify})`); echo(`Processing ${file} (minified: ${minify})`);
const out= filesOut(file); const out= filesOut(file);
const esbuild_output= buildEsbuild({ file, out, minify }); const esbuild_output= buildEsbuild({ file, out, minify });
echoVariant(esbuild_output.stderr.split("\n")[1].trim()+ " (esbuild)"); echoVariant(esbuild_output.stderr.split("\n")[1].trim());
const file_dts= file_root+".d.ts"; const file_dts= file_root+".d.ts";
const file_dts_out= filesOut(file_dts); const file_dts_out= filesOut(file_dts);
@ -25,21 +25,22 @@ export async function build({ files, filesOut, minify= "partial", iife= true }){
return 0; return 0;
async function toIIFE(file, file_root){ async function toIIFE(file, file_root){
const name= "iife"; const fileMark= "iife";
const out= filesOut(file_root+".js", name); const name= "DDE";
const out= filesOut(file_root+".js", fileMark);
const params= [ const params= [
"--format=iife", "--format=iife",
"--global-name=dde", "--global-name="+name,
]; ];
const dde_output= buildEsbuild({ file, out, minify, params }); const dde_output= buildEsbuild({ file, out, minify, params });
echoVariant(`${out} (${file} → globalThis.${name})`) echoVariant(`${out} (${name})`)
const file_dts= file_root+".d.ts"; const file_dts= file_root+".d.ts";
const file_dts_out= filesOut(file_dts, name); const file_dts_out= filesOut(file_dts, fileMark);
echoVariant(file_dts_out, true); echoVariant(file_dts_out, true);
buildDts({ buildDts({
name, name: fileMark,
bundle: out, bundle: out,
entry: file_dts, entry: file_dts,
}) })

View File

@ -1,4 +1,4 @@
var dde = (() => { var DDE = (() => {
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames; var __getOwnPropNames = Object.getOwnPropertyNames;

File diff suppressed because one or more lines are too long

2
dist/iife.js vendored
View File

@ -1,4 +1,4 @@
var dde = (() => { var DDE = (() => {
var __defProp = Object.defineProperty; var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames; var __getOwnPropNames = Object.getOwnPropertyNames;

2
dist/iife.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -6,8 +6,29 @@
version="1.1" version="1.1"
id="svg5" id="svg5"
xml:space="preserve" xml:space="preserve"
sodipodi:docname="logo.svg"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="3.296875"
inkscape:cx="128"
inkscape:cy="101.61137"
inkscape:window-width="1920"
inkscape:window-height="1052"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g2" /><defs
id="defs4"><linearGradient id="defs4"><linearGradient
id="bgGradient" id="bgGradient"
x1="18" x1="18"
@ -47,7 +68,7 @@
id="g2" id="g2"
transform="translate(0.4430186,-1.5165883)"><g transform="translate(0.4430186,-1.5165883)"><g
id="g1" id="g1"
transform="matrix(1.5900346,0,0,1.5900346,-127.12651,-66.626074)"><g transform="matrix(1.5900346,0,0,1.5900346,-121.12651,-66.626074)"><g
opacity="0.25" opacity="0.25"
fill="#ffffff" fill="#ffffff"
filter="url(#glow)" filter="url(#glow)"

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -28,7 +28,7 @@ export function page({ pkg, info }){
const page_id= info.id; const page_id= info.id;
return el(simplePage, { info, pkg }).append( return el(simplePage, { info, pkg }).append(
el("p").append(...T` el("p").append(...T`
Welcome to Deka DOM Elements (dd<el> or dde) a lightweight library for building dynamic UIs with Welcome to Deka DOM Elements (dd<el> or DDE) a lightweight library for building dynamic UIs with
a declarative syntax that stays close to the native DOM API. dd<el> gives you powerful reactive tools a declarative syntax that stays close to the native DOM API. dd<el> gives you powerful reactive tools
without the complexity and overhead of larger frameworks. without the complexity and overhead of larger frameworks.
`), `),