mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-03-31 11:35:52 +02:00
🐛 📺 v0.9.5-alpha (#44)
* ⚡ 📺 package (version and publint) * 🔤 docs typos * 🐛 this address / fixes #43 * ⚡ tiny el optimalization * 🔤 improve docs wording * 🔤 case-studies/products.js (AbortSignal) * 🔤 🐛 case-studies/image-gallery.js
This commit is contained in:
parent
4c450ae763
commit
f2c85ec983
12
README.md
12
README.md
@ -1,5 +1,5 @@
|
||||
**Alpha**
|
||||
| [Docs](https://jaandrle.github.io/deka-dom-el "Official documentation and guide site")
|
||||
| [Docs&Examples](https://jaandrle.github.io/deka-dom-el "Official documentation and guide site")
|
||||
| [NPM](https://www.npmjs.com/package/deka-dom-el "Official NPM package page")
|
||||
| [GitHub](https://github.com/jaandrle/deka-dom-el "Official GitHub repository")
|
||||
([*Gitea*](https://gitea.jaandrle.cz/jaandrle/deka-dom-el "GitHub repository mirror on my own Gitea instance"))
|
||||
@ -9,7 +9,7 @@
|
||||
```javascript
|
||||
// 🌟 Reactive component with clear separation of concerns
|
||||
document.body.append(
|
||||
el(EmojiCounter, { initial: "🚀" })
|
||||
el(EmojiCounter, { initial: "🚀" }),
|
||||
);
|
||||
|
||||
function EmojiCounter({ initial }) {
|
||||
@ -34,7 +34,7 @@ function EmojiCounter({ initial }) {
|
||||
el(Option, "🎉"),
|
||||
el(Option, "🚀"),
|
||||
el(Option, "💖"),
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
function Option({ textContent }){
|
||||
@ -56,10 +56,10 @@ Creating reactive elements, components, and Web Components using the native
|
||||
## Features at a Glance
|
||||
|
||||
- ✅ **No build step required** — use directly in browsers or Node.js
|
||||
- ☑️ **Lightweight** — ~10-15kB minified (original goal 10kB) with **zero**/minimal dependencies
|
||||
- ✅ **Declarative & functional approach** for clean, maintainable code
|
||||
- ✅ **Minimalized footprint** — ~10-15kB minified bundle (original goal 10kB), **zero**/minimal dependencies and
|
||||
small in-memory size (auto-releasing resources as much as possible)
|
||||
- ✅ **Declarative & functional approach support** for clean, maintainable code
|
||||
- ✅ **Signals and events** for reactive UI
|
||||
- ✅ **Auto-releasing resources** for memory management but nice development experience
|
||||
- ✅ **Memoization for performance** — optimize rendering with intelligent caching
|
||||
- ☑️ **Optional build-in signals** with support for custom reactive implementations (#39)
|
||||
- ☑️ **Server-side rendering** support via [jsdom](https://github.com/jsdom/jsdom)
|
||||
|
@ -9,3 +9,4 @@ npx editorconfig-checker -format gcc ${additional}
|
||||
npx jshint index.js src ${additional}
|
||||
[ "$one" = 'vim' ] && exit 0
|
||||
npx size-limit
|
||||
npx publint
|
||||
|
5
dist/esm-with-signals.js
vendored
5
dist/esm-with-signals.js
vendored
@ -430,9 +430,10 @@ function createElement(tag, attributes, ...addons) {
|
||||
scoped = 1;
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
el = /** @type {Element} */
|
||||
tag(attributes || void 0);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
name: tag.name,
|
||||
|
2
dist/esm-with-signals.min.js
vendored
2
dist/esm-with-signals.min.js
vendored
File diff suppressed because one or more lines are too long
5
dist/esm.js
vendored
5
dist/esm.js
vendored
@ -414,9 +414,10 @@ function createElement(tag, attributes, ...addons) {
|
||||
scoped = 1;
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
el = /** @type {Element} */
|
||||
tag(attributes || void 0);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
name: tag.name,
|
||||
|
2
dist/esm.min.js
vendored
2
dist/esm.min.js
vendored
File diff suppressed because one or more lines are too long
5
dist/iife-with-signals.js
vendored
5
dist/iife-with-signals.js
vendored
@ -475,9 +475,10 @@ var DDE = (() => {
|
||||
scoped = 1;
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
el = /** @type {Element} */
|
||||
tag(attributes || void 0);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
name: tag.name,
|
||||
|
2
dist/iife-with-signals.min.js
vendored
2
dist/iife-with-signals.min.js
vendored
File diff suppressed because one or more lines are too long
5
dist/iife.js
vendored
5
dist/iife.js
vendored
@ -456,9 +456,10 @@ var DDE = (() => {
|
||||
scoped = 1;
|
||||
const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0);
|
||||
scope.push({ scope: tag, host });
|
||||
el = tag(attributes || void 0);
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
el = /** @type {Element} */
|
||||
tag(attributes || void 0);
|
||||
if (el.nodeName === "#comment") break;
|
||||
const is_fragment = isInstance(el, enviroment.F);
|
||||
const el_mark = createElement.mark({
|
||||
type: "component",
|
||||
name: tag.name,
|
||||
|
2
dist/iife.min.js
vendored
2
dist/iife.min.js
vendored
File diff suppressed because one or more lines are too long
@ -82,10 +82,10 @@ export function ImageGallery(images= imagesSample) {
|
||||
closeLightbox();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
document.querySelector('.lightbox-prev-btn').click();
|
||||
onPrevImage(e);
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
document.querySelector('.lightbox-next-btn').click();
|
||||
onNextImage(e);
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -126,12 +126,12 @@ export function ImageGallery(images= imagesSample) {
|
||||
el("div", {
|
||||
className: "gallery-item",
|
||||
dataTag: image.alt.toLowerCase()
|
||||
}).append(
|
||||
}, onImageClick(image.id)).append(
|
||||
el("img", {
|
||||
src: image.src,
|
||||
alt: image.alt,
|
||||
loading: "lazy"
|
||||
}, onImageClick(image.id)),
|
||||
}),
|
||||
el("div", { className: "gallery-item-caption" }).append(
|
||||
el("h3", image.title),
|
||||
el("p", image.alt)
|
||||
@ -146,41 +146,41 @@ export function ImageGallery(images= imagesSample) {
|
||||
S.el(isLightboxOpen, open => !open
|
||||
? el()
|
||||
: el("div", { className: "lightbox-overlay" }, on("click", closeLightbox)).append(
|
||||
el("div", {
|
||||
className: "lightbox-content",
|
||||
onClick: e => e.stopPropagation() // Prevent closing when clicking inside
|
||||
}).append(
|
||||
el("button", {
|
||||
className: "lightbox-close-btn",
|
||||
"aria-label": "Close lightbox"
|
||||
}, on("click", closeLightbox)).append("×"),
|
||||
el("div", {
|
||||
className: "lightbox-content",
|
||||
onClick: e => e.stopPropagation() // Prevent closing when clicking inside
|
||||
}).append(
|
||||
el("button", {
|
||||
className: "lightbox-close-btn",
|
||||
ariaLabel: "Close lightbox",
|
||||
}, on("click", closeLightbox)).append("×"),
|
||||
|
||||
el("button", {
|
||||
className: "lightbox-prev-btn",
|
||||
"aria-label": "Previous image"
|
||||
}, on("click", onPrevImage)).append("❮"),
|
||||
el("button", {
|
||||
className: "lightbox-prev-btn",
|
||||
ariaLabel: "Previous image",
|
||||
}, on("click", onPrevImage)).append("❮"),
|
||||
|
||||
el("button", {
|
||||
className: "lightbox-next-btn",
|
||||
"aria-label": "Next image"
|
||||
}, on("click", onNextImage)).append("❯"),
|
||||
el("button", {
|
||||
className: "lightbox-next-btn",
|
||||
ariaLabel: "Next image",
|
||||
}, on("click", onNextImage)).append("❯"),
|
||||
|
||||
S.el(selectedImage, img => !img
|
||||
? el()
|
||||
: el("div", { className: "lightbox-image-container" }).append(
|
||||
el("img", {
|
||||
src: img.src,
|
||||
alt: img.alt,
|
||||
className: "lightbox-image"
|
||||
}),
|
||||
el("div", { className: "lightbox-caption" }).append(
|
||||
el("h2", img.title),
|
||||
el("p", img.alt)
|
||||
)
|
||||
)
|
||||
S.el(selectedImage, img => !img
|
||||
? el()
|
||||
: el("div", { className: "lightbox-image-container" }).append(
|
||||
el("img", {
|
||||
src: img.src,
|
||||
alt: img.alt,
|
||||
className: "lightbox-image",
|
||||
}),
|
||||
el("div", { className: "lightbox-caption" }).append(
|
||||
el("h2", img.title),
|
||||
el("p", img.alt),
|
||||
),
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +1,13 @@
|
||||
import { el, on } from "deka-dom-el";
|
||||
import { el, on, scope } from "deka-dom-el";
|
||||
import { S } from "deka-dom-el/signals";
|
||||
|
||||
export function ProductCatalog() {
|
||||
const { signal }= scope;
|
||||
|
||||
const itemsPerPage = 5;
|
||||
const products = asyncSignal(S, fetchProducts, { initial: [], keepLast: true });
|
||||
const products = asyncSignal(S,
|
||||
fetchProducts,
|
||||
{ initial: [], keepLast: true, signal });
|
||||
const searchTerm = S("");
|
||||
const handleSearch = (e) => searchTerm.set(e.target.value);
|
||||
const sortOrder = S("default");
|
||||
@ -220,10 +224,14 @@ function simulateNetworkDelay(min = 300, max = 1200) {
|
||||
* @template T
|
||||
* @param {typeof S} S - Signal constructor
|
||||
* @param {(params: { signal: AbortSignal }) => Promise<T>} invoker - Async function to execute
|
||||
* @param {{ initial?: T, keepLast?: boolean }} options - Configuration options
|
||||
* @param {{ initial?: T, keepLast?: boolean, signal?: AbortSignal }} options - Configuration options
|
||||
* @returns {Object} Status signals and control methods
|
||||
*/
|
||||
export function asyncSignal(S, invoker, { initial, keepLast } = {}) {
|
||||
export function asyncSignal(S, invoker, { initial, keepLast, signal } = {}) {
|
||||
/** @type {(s: AbortSignal) => AbortSignal} */
|
||||
const anySignal = !signal || !AbortSignal.any // TODO: make better
|
||||
? s=> s
|
||||
: s=> AbortSignal.any([s, signal]);
|
||||
// Status tracking signals
|
||||
const status = S("pending");
|
||||
const result = S(initial);
|
||||
@ -242,7 +250,7 @@ export function asyncSignal(S, invoker, { initial, keepLast } = {}) {
|
||||
|
||||
try {
|
||||
const data = await invoker({
|
||||
signal: controller.signal,
|
||||
signal: anySignal(controller.signal),
|
||||
});
|
||||
if (!controller.signal.aborted) {
|
||||
status.set("resolved");
|
||||
|
@ -74,13 +74,11 @@ export function h3({ textContent, id }){
|
||||
if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
|
||||
return el("h3", { id }).append(
|
||||
el("a", {
|
||||
className: "heading-anchor",
|
||||
href: "#"+id,
|
||||
textContent: "#",
|
||||
title: `Link to this section: ${textContent}`,
|
||||
"aria-label": `Link to section ${textContent}`
|
||||
className: "heading-anchor",
|
||||
href: "#"+id,
|
||||
title: `Link to this section: ${textContent}`,
|
||||
}),
|
||||
" ",
|
||||
"# ",
|
||||
textContent,
|
||||
);
|
||||
}
|
||||
|
@ -41,7 +41,12 @@ export function page({ pkg, info }){
|
||||
el("h4", t`Key Benefits of dd<el>`),
|
||||
el("ul").append(
|
||||
el("li", t`No build step required — use directly in the browser`),
|
||||
el("li", t`Lightweight core (~10–15kB minified) without unnecessary dependencies (0 at now 😇)`),
|
||||
el("li", t`Minimalized footprint:`),
|
||||
el("ul").append(
|
||||
el("li", t`lightweight core (~10–15kB minified)`),
|
||||
el("li", t`…without unnecessary dependencies (0 at now 😇)`),
|
||||
el("li", t`auto-releasing resources with focus on performance and development experience`),
|
||||
),
|
||||
el("li", t`Natural DOM API — work with real DOM nodes, not abstractions`),
|
||||
el("li", t`Built-in (but optional) reactivity with simplified but powerful signals system`),
|
||||
el("li", t`Clean code organization with the 3PS pattern`)
|
||||
|
@ -151,7 +151,7 @@ export function header({ info: { href, title, description }, pkg }){
|
||||
),
|
||||
el("span", {
|
||||
className: "version-badge",
|
||||
"aria-label": "Version",
|
||||
ariaLabel: "Version",
|
||||
textContent: pkg.version || ""
|
||||
})
|
||||
),
|
||||
@ -165,13 +165,13 @@ export function header({ info: { href, title, description }, pkg }){
|
||||
function nav({ href, pkg }){
|
||||
return el("nav", {
|
||||
role: "navigation",
|
||||
"aria-label": "Main navigation",
|
||||
ariaLabel: "Main navigation",
|
||||
className: nav.name
|
||||
}).append(
|
||||
el("a", {
|
||||
href: pkg.homepage,
|
||||
className: "github-link",
|
||||
"aria-label": "View on GitHub",
|
||||
ariaLabel: "View on GitHub",
|
||||
target: "_blank",
|
||||
rel: "noopener noreferrer",
|
||||
}).append(
|
||||
@ -185,11 +185,11 @@ function nav({ href, pkg }){
|
||||
return el("a", {
|
||||
href: isIndex ? "./" : p.href,
|
||||
title: p.description || `Go to ${p.title}`,
|
||||
"aria-current": isCurrent ? "page" : null,
|
||||
ariaCurrent: isCurrent ? "page" : null,
|
||||
}).append(
|
||||
el("span", {
|
||||
className: "nav-number",
|
||||
"aria-hidden": "true",
|
||||
ariaHidden: "true",
|
||||
textContent: `${i+1}. `
|
||||
}),
|
||||
p.title
|
||||
|
@ -168,6 +168,22 @@ export function page({ pkg, info }){
|
||||
el("li", t`name - The name of the component function`),
|
||||
el("li", t`host - Indicates whether the host is "this" (for DocumentFragments) or "parentElement"`),
|
||||
),
|
||||
el("div", { className: "warning" }).append(
|
||||
el("p").append(T`
|
||||
There are edge case when the mark can be missing. For example, the (utility) components with reactive
|
||||
keys such as ${el("code", ".textContent")}, ${el("code", ".innerText")} or ${el("code", ".innerHTML")}.
|
||||
As they change the content of the host element.
|
||||
`),
|
||||
el(code, { content: `
|
||||
function Counter() {
|
||||
const count = S(0);
|
||||
return el("button",
|
||||
{ textContent: count, type: "button" },
|
||||
on("click", () => count.set(count.get() + 1)),
|
||||
);
|
||||
}
|
||||
`, language: "js" }),
|
||||
),
|
||||
|
||||
el("h4", t`Identifying reactive elements in the DOM`),
|
||||
el("p").append(T`
|
||||
|
65
package-lock.json
generated
65
package-lock.json
generated
@ -15,7 +15,8 @@
|
||||
"esbuild": "~0.25",
|
||||
"jsdom": "~26.0",
|
||||
"jshint": "~2.13",
|
||||
"nodejsscript": "^1.0.2",
|
||||
"nodejsscript": "^1.0",
|
||||
"publint": "^0.3",
|
||||
"size-limit-node-esbuild": "~0.3"
|
||||
},
|
||||
"engines": {
|
||||
@ -614,6 +615,19 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@publint/pack": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@publint/pack/-/pack-0.1.2.tgz",
|
||||
"integrity": "sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://bjornlu.com/sponsor"
|
||||
}
|
||||
},
|
||||
"node_modules/@sindresorhus/merge-streams": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
|
||||
@ -2229,6 +2243,16 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/package-manager-detector": {
|
||||
"version": "0.2.11",
|
||||
"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-0.2.11.tgz",
|
||||
"integrity": "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"quansync": "^0.2.7"
|
||||
}
|
||||
},
|
||||
"node_modules/parse5": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
|
||||
@ -2306,6 +2330,28 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/publint": {
|
||||
"version": "0.3.9",
|
||||
"resolved": "https://registry.npmjs.org/publint/-/publint-0.3.9.tgz",
|
||||
"integrity": "sha512-irTwfRfYW38vomkxxoiZQtFtUOQKpz5m0p9Z60z4xpXrl1KmvSrX1OMARvnnolB5usOXeNfvLj6d/W3rwXKfBQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@publint/pack": "^0.1.2",
|
||||
"package-manager-detector": "^0.2.9",
|
||||
"picocolors": "^1.1.1",
|
||||
"sade": "^1.8.1"
|
||||
},
|
||||
"bin": {
|
||||
"publint": "src/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://bjornlu.com/sponsor"
|
||||
}
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
@ -2316,6 +2362,23 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/quansync": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz",
|
||||
"integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/sxzz"
|
||||
}
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
|
23
package.json
23
package.json
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "deka-dom-el",
|
||||
"version": "0.9.4-alpha",
|
||||
"version": "0.9.5-alpha",
|
||||
"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
|
||||
"author": "Jan Andrle <andrle.jan@centrum.cz>",
|
||||
"license": "MIT",
|
||||
"homepage": "https://jaandrle.github.io/deka-dom-el/",
|
||||
"homepage": "https://github.com/jaandrle/deka-dom-el",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com/jaandrle/deka-dom-el.git"
|
||||
@ -17,20 +17,20 @@
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./index.js",
|
||||
"types": "./index.d.ts"
|
||||
"types": "./index.d.ts",
|
||||
"import": "./index.js"
|
||||
},
|
||||
"./signals": {
|
||||
"import": "./signals.js",
|
||||
"types": "./signals.d.ts"
|
||||
"types": "./signals.d.ts",
|
||||
"import": "./signals.js"
|
||||
},
|
||||
"./jsdom": {
|
||||
"import": "./jsdom.js",
|
||||
"types": "./jsdom.d.ts"
|
||||
"types": "./jsdom.d.ts",
|
||||
"import": "./jsdom.js"
|
||||
},
|
||||
"./src/signals-lib": {
|
||||
"import": "./src/signals-lib/signals-lib.js",
|
||||
"types": "./src/signals-lib/signals-lib.d.ts"
|
||||
"types": "./src/signals-lib/signals-lib.d.ts",
|
||||
"import": "./src/signals-lib/signals-lib.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
@ -103,7 +103,8 @@
|
||||
"esbuild": "~0.25",
|
||||
"jsdom": "~26.0",
|
||||
"jshint": "~2.13",
|
||||
"nodejsscript": "^1.0.2",
|
||||
"nodejsscript": "^1.0",
|
||||
"publint": "^0.3",
|
||||
"size-limit-node-esbuild": "~0.3"
|
||||
}
|
||||
}
|
||||
|
@ -51,9 +51,9 @@ export function createElement(tag, attributes, ...addons){
|
||||
const host= (...c)=> !c.length ? el_host :
|
||||
(scoped===1 ? addons.unshift(...c) : c.forEach(c=> c(el_host)), undefined);
|
||||
scope.push({ scope: tag, host });
|
||||
el= tag(attributes || undefined);
|
||||
const is_fragment= isInstance(el, env.F);
|
||||
el= /** @type {Element} */(tag(attributes || undefined));
|
||||
if(el.nodeName==="#comment") break;
|
||||
const is_fragment= isInstance(el, env.F);
|
||||
const el_mark= createElement.mark({
|
||||
type: "component",
|
||||
name: tag.name,
|
||||
|
Loading…
x
Reference in New Issue
Block a user