@toyz/loom 0.12.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -23,6 +23,16 @@ Loom was born out of pure spite for boilerplate. What began as an ironic "what i
|
|
|
23
23
|
|
|
24
24
|
It powers [placing.space](https://placing.space) in production — a real-time collaborative pixel canvas — so it's been battle-tested with WebSocket streams, thousands of DOM nodes, and zero framework overhead.
|
|
25
25
|
|
|
26
|
+
## Why Loom?
|
|
27
|
+
|
|
28
|
+
Most frameworks make you choose: **lightweight or batteries-included.** Loom doesn't.
|
|
29
|
+
|
|
30
|
+
- **~20KB gzipped baseline** — smaller than React + ReactDOM alone, but includes a router, DI container, reactivity system, and lifecycle management out of the box.
|
|
31
|
+
- **No virtual DOM** — JSX compiles to real DOM nodes. The morpher diffs the live DOM directly and patches in-place. No throwaway object trees, no GC pressure, no overhead on top of the work you were going to do anyway.
|
|
32
|
+
- **Zero dependencies** — the entire framework is one `package.json` entry. No version conflicts, no transitive supply chain risk, no "which router do we pick" debates.
|
|
33
|
+
- **Pay-as-you-go** — built-in components (`<loom-virtual>`, `<loom-canvas>`, `<loom-icon>`, `<loom-image>`) and systems (`@form`, `@api`, `CollectionStore`) are tree-shaken if you don't import them. You only ship what you use.
|
|
34
|
+
- **Web standards** — built on custom elements, Shadow DOM, and TC39 Stage 3 decorators. When browsers ship native decorator support, your code gets faster for free.
|
|
35
|
+
|
|
26
36
|
## Features
|
|
27
37
|
|
|
28
38
|
- **`@component` / `@styles`** — register custom elements and scoped styles in one line
|
|
@@ -101,11 +111,12 @@ class ClickCounter extends LoomElement {
|
|
|
101
111
|
|
|
102
112
|
## TSConfig
|
|
103
113
|
|
|
104
|
-
Loom
|
|
114
|
+
Loom uses TC39 decorators, which require `es2022` or later. Point your config at the Loom JSX runtime:
|
|
105
115
|
|
|
106
116
|
```json
|
|
107
117
|
{
|
|
108
118
|
"compilerOptions": {
|
|
119
|
+
"target": "es2022",
|
|
109
120
|
"jsx": "react-jsx",
|
|
110
121
|
"jsxImportSource": "@toyz/loom"
|
|
111
122
|
}
|
|
@@ -118,6 +129,7 @@ For Vite:
|
|
|
118
129
|
// vite.config.ts
|
|
119
130
|
export default defineConfig({
|
|
120
131
|
esbuild: {
|
|
132
|
+
target: "es2022",
|
|
121
133
|
jsx: "automatic",
|
|
122
134
|
jsxImportSource: "@toyz/loom",
|
|
123
135
|
},
|
|
@@ -20,9 +20,16 @@ import { type Constructor } from "../bus";
|
|
|
20
20
|
* @on(window, "resize")
|
|
21
21
|
* onResize(e: Event) { ... }
|
|
22
22
|
* ```
|
|
23
|
+
*
|
|
24
|
+
* Resolver — lazily resolve target at connect time (shadow DOM, @query, etc.):
|
|
25
|
+
* ```ts
|
|
26
|
+
* @on(el => el.shadow, "scroll")
|
|
27
|
+
* onShadowScroll(e: Event) { ... }
|
|
28
|
+
* ```
|
|
23
29
|
*/
|
|
24
30
|
export declare function on<T extends LoomEvent>(type: Constructor<T>): (method: Function, context: ClassMethodDecoratorContext) => void;
|
|
25
31
|
export declare function on(target: EventTarget, event: string): (method: Function, context: ClassMethodDecoratorContext) => void;
|
|
32
|
+
export declare function on(resolver: (el: any) => EventTarget, event: string): (method: Function, context: ClassMethodDecoratorContext) => void;
|
|
26
33
|
/**
|
|
27
34
|
* Auto-broadcast to the bus.
|
|
28
35
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/decorators/events.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE/C
|
|
1
|
+
{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/decorators/events.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,EAAE,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAChI,wBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AACzH,wBAAgB,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAiCxI;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,SAAS,EACtC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACtB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,CAAC,IAwBrB,OAAO,QAAQ,GAAG,4BAA4B,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,2BAA2B,GAAG,6BAA6B,oBApB7G,OAAO,WAAW,OAAO,EAAE,cA0BrD"}
|
|
@@ -25,9 +25,13 @@ export function on(typeOrTarget, event) {
|
|
|
25
25
|
this[CONNECT_HOOKS] = [];
|
|
26
26
|
this[CONNECT_HOOKS].push((el) => {
|
|
27
27
|
if (event !== undefined) {
|
|
28
|
+
// Resolve target: arrow/function resolver has no .prototype, class constructors do
|
|
29
|
+
const target = typeof typeOrTarget === "function" && !typeOrTarget.prototype
|
|
30
|
+
? typeOrTarget(el)
|
|
31
|
+
: typeOrTarget;
|
|
28
32
|
const fn = (e) => method.call(el, e);
|
|
29
|
-
|
|
30
|
-
return () =>
|
|
33
|
+
target.addEventListener(event, fn);
|
|
34
|
+
return () => target.removeEventListener(event, fn);
|
|
31
35
|
}
|
|
32
36
|
else {
|
|
33
37
|
return bus.on(typeOrTarget, (e) => method.call(el, e));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/decorators/events.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,GAAG,EAAoB,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/decorators/events.ts"],"names":[],"mappings":"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"}
|