mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-01 19:55:53 +02:00
⚡ bs/lint
This commit is contained in:
parent
f2ce23d9f7
commit
508d93bb1a
@ -86,7 +86,10 @@ To balance these requirements, numerous compromises have been made. To summarize
|
||||
- [dist/](dist/) (`https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/`…)
|
||||
|
||||
## Signals
|
||||
- [Signals — whats going on behind the scenes \| by Ryan Hoffnan \| ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63)
|
||||
- [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)
|
||||
- there is also [tc39/proposal-signals: A proposal to add signals to JavaScript.](https://github.com/tc39/proposal-signals)
|
||||
- [Signals — whats going on behind the scenes \| by Ryan Hoffnan \|
|
||||
ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63)
|
||||
- [The Evolution of Signals in JavaScript - DEV
|
||||
Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)
|
||||
- there is also [tc39/proposal-signals:
|
||||
A proposal to add signals to JavaScript.](https://github.com/tc39/proposal-signals)
|
||||
- [Observer pattern - Wikipedia](https://en.wikipedia.org/wiki/Observer_pattern)
|
||||
|
4
docs/components/examples/debugging/dom-reactive-mark.js
Normal file
4
docs/components/examples/debugging/dom-reactive-mark.js
Normal file
@ -0,0 +1,4 @@
|
||||
// Example of reactive element marker
|
||||
<!--<dde:mark type=\"reactive\" source=\"...\">-->
|
||||
<!-- content that updates when signal changes -->
|
||||
<!--</dde:mark>-->
|
@ -3,8 +3,8 @@ import { S } from "deka-dom-el/signals";
|
||||
// Debugging a derived signal
|
||||
const name = S('Alice');
|
||||
const greeting = S(() => {
|
||||
console.log('Computing greeting...');
|
||||
return 'Hello, ' + name.get();
|
||||
console.log('Computing greeting...');
|
||||
return 'Hello, ' + name.get();
|
||||
});
|
||||
|
||||
// Monitor the derived signal
|
||||
@ -17,4 +17,4 @@ name.set('Bob'); // Should trigger computation and listener
|
||||
// Computing greeting...
|
||||
// Greeting changed to: Hello, Alice
|
||||
// Computing greeting...
|
||||
// Greeting changed to: Hello, Bob
|
||||
// Greeting changed to: Hello, Bob
|
||||
|
@ -10,10 +10,10 @@ const { el } = await register(dom);
|
||||
|
||||
// Use deka-dom-el normally
|
||||
dom.window.document.body.append(
|
||||
el("div", { className: "container" }).append(
|
||||
el("h1", "Hello, SSR World!"),
|
||||
el("p", "This content was rendered on the server.")
|
||||
)
|
||||
el("div", { className: "container" }).append(
|
||||
el("h1", "Hello, SSR World!"),
|
||||
el("p", "This content was rendered on the server.")
|
||||
)
|
||||
);
|
||||
|
||||
// Wait for any async operations to complete
|
||||
|
@ -10,8 +10,10 @@ styles.css`
|
||||
--secondary-dark: #4a0027;
|
||||
--secondary-rgb: 112, 0, 55;
|
||||
|
||||
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono',
|
||||
SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
|
||||
--body-max-width: 40rem;
|
||||
--sidebar-width: 20rem;
|
||||
|
@ -103,7 +103,8 @@ export function page({ pkg, info }){
|
||||
el("p", t`There are two fundamental ways to make your DOM reactive with signals:`),
|
||||
el("ol").append(
|
||||
el("li", t`Reactive attributes: Update properties, attributes, and styles of existing elements`),
|
||||
el("li", t`Reactive elements: Dynamically create or update DOM elements based on data changes (for conditions and loops)`)
|
||||
el("li").append(...T`Reactive elements: Dynamically create or update DOM elements based on data changes
|
||||
(for conditions and loops)`)
|
||||
),
|
||||
el(example, { src: fileURL("./components/examples/signals/dom-attrs.js"), page_id }),
|
||||
el("p").append(...T`
|
||||
|
@ -36,7 +36,10 @@ export function page({ pkg, info }){
|
||||
el("p").append(...T`
|
||||
You can also monitor signal changes by adding a listener:
|
||||
`),
|
||||
el(code, { content: "// Log every time the signal changes\nS.on(signal, value => console.log('Signal changed:', value));", page_id }),
|
||||
el(code, {
|
||||
content:
|
||||
"// Log every time the signal changes\nS.on(signal, value => console.log('Signal changed:', value));",
|
||||
page_id }),
|
||||
|
||||
el("h4", t`Debugging derived signals`),
|
||||
el("p").append(...T`
|
||||
@ -103,7 +106,7 @@ export function page({ pkg, info }){
|
||||
that are automatically updated when signal values change. These elements are wrapped in special
|
||||
comment nodes for debugging (to be true they are also used internaly, so please do not edit them by hand):
|
||||
`),
|
||||
el(code, { content: "// Example of reactive element marker\n<!--<dde:mark type=\"reactive\" source=\"...\">-->\n<!-- content that updates when signal changes -->\n<!--</dde:mark>-->", page_id }),
|
||||
el(code, { src: fileURL("./components/examples/debugging/dom-reactive-mark.js"), page_id }),
|
||||
el("p").append(...T`
|
||||
This is particularly useful when debugging why a reactive section isn't updating as expected.
|
||||
You can inspect the elements between the comment nodes to see their current state and the
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { T, t } from "./utils/index.js";
|
||||
import { T, t } from "./utils/index.js";
|
||||
export const info= {
|
||||
title: t`Server-Side Rendering (SSR)`,
|
||||
description: t`Using deka-dom-el for server-side rendering with jsdom to generate static HTML.`,
|
||||
|
3
index.d.ts
vendored
3
index.d.ts
vendored
@ -54,7 +54,8 @@ type IsReadonly<T, K extends keyof T> =
|
||||
type ElementAttributes<T extends SupportedElement>= Partial<{
|
||||
[K in keyof _fromElsInterfaces<T>]:
|
||||
_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
|
||||
? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=> ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
|
||||
? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=>
|
||||
ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
|
||||
: (IsReadonly<_fromElsInterfaces<T>, K> extends false
|
||||
? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
|
||||
: ddeStringable)
|
||||
|
1437
package-lock.json
generated
1437
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "deka-dom-el",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.0",
|
||||
"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",
|
||||
@ -92,11 +92,11 @@
|
||||
"typescript"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@size-limit/preset-small-lib": "~11.0",
|
||||
"@size-limit/preset-small-lib": "~11.2",
|
||||
"dts-bundler": "~0.1",
|
||||
"editorconfig-checker": "~6.0",
|
||||
"esbuild": "~0.24",
|
||||
"jsdom": "~25.0",
|
||||
"esbuild": "~0.25",
|
||||
"jsdom": "~26.0",
|
||||
"jshint": "~2.13",
|
||||
"nodejsscript": "^1.0.2",
|
||||
"size-limit-node-esbuild": "~0.3"
|
||||
|
Loading…
x
Reference in New Issue
Block a user