@getforma/core 0.6.1 → 0.8.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.
Files changed (52) hide show
  1. package/README.md +93 -8
  2. package/dist/chunk-3U57L2TY.cjs +38 -0
  3. package/dist/chunk-3U57L2TY.cjs.map +1 -0
  4. package/dist/{chunk-TKGUHASG.js → chunk-N522P3G6.js} +20 -12
  5. package/dist/chunk-N522P3G6.js.map +1 -0
  6. package/dist/chunk-OZCHIVAZ.js +35 -0
  7. package/dist/chunk-OZCHIVAZ.js.map +1 -0
  8. package/dist/{chunk-YSKF3VRA.cjs → chunk-YMIMKO4W.cjs} +51 -20
  9. package/dist/chunk-YMIMKO4W.cjs.map +1 -0
  10. package/dist/forma-runtime-csp.js +1 -1
  11. package/dist/forma-runtime.js +1 -1
  12. package/dist/formajs-runtime-hardened.global.js +1 -1
  13. package/dist/formajs-runtime-hardened.global.js.map +1 -1
  14. package/dist/formajs-runtime.global.js +1 -1
  15. package/dist/formajs-runtime.global.js.map +1 -1
  16. package/dist/formajs.global.js +1 -1
  17. package/dist/formajs.global.js.map +1 -1
  18. package/dist/index.cjs +112 -115
  19. package/dist/index.cjs.map +1 -1
  20. package/dist/index.d.cts +30 -21
  21. package/dist/index.d.ts +30 -21
  22. package/dist/index.js +25 -50
  23. package/dist/index.js.map +1 -1
  24. package/dist/runtime-hardened.cjs +106 -27
  25. package/dist/runtime-hardened.cjs.map +1 -1
  26. package/dist/runtime-hardened.js +107 -28
  27. package/dist/runtime-hardened.js.map +1 -1
  28. package/dist/runtime.cjs +128 -50
  29. package/dist/runtime.cjs.map +1 -1
  30. package/dist/runtime.js +102 -24
  31. package/dist/runtime.js.map +1 -1
  32. package/dist/signal-B4_wQJHs.d.cts +53 -0
  33. package/dist/signal-B4_wQJHs.d.ts +53 -0
  34. package/dist/ssr/index.cjs +19 -2
  35. package/dist/ssr/index.cjs.map +1 -1
  36. package/dist/ssr/index.js +19 -2
  37. package/dist/ssr/index.js.map +1 -1
  38. package/dist/tc39-compat.cjs +4 -12
  39. package/dist/tc39-compat.cjs.map +1 -1
  40. package/dist/tc39-compat.d.cts +1 -1
  41. package/dist/tc39-compat.d.ts +1 -1
  42. package/dist/tc39-compat.js +3 -11
  43. package/dist/tc39-compat.js.map +1 -1
  44. package/package.json +2 -2
  45. package/dist/chunk-DPSAVBCP.js +0 -26
  46. package/dist/chunk-DPSAVBCP.js.map +0 -1
  47. package/dist/chunk-KH3F5NRU.cjs +0 -29
  48. package/dist/chunk-KH3F5NRU.cjs.map +0 -1
  49. package/dist/chunk-TKGUHASG.js.map +0 -1
  50. package/dist/chunk-YSKF3VRA.cjs.map +0 -1
  51. package/dist/signal-CfLDwMyg.d.cts +0 -29
  52. package/dist/signal-CfLDwMyg.d.ts +0 -29
package/README.md CHANGED
@@ -192,6 +192,45 @@ batch(() => {
192
192
  });
193
193
  ```
194
194
 
195
+ #### Custom Equality
196
+
197
+ Skip updates when the new value is equal to the current value:
198
+
199
+ ```typescript
200
+ const [pos, setPos] = createSignal(
201
+ { x: 0, y: 0 },
202
+ { equals: (a, b) => a.x === b.x && a.y === b.y },
203
+ );
204
+
205
+ setPos({ x: 0, y: 0 }); // skipped — values are equal
206
+ setPos({ x: 1, y: 0 }); // applied — values differ
207
+ ```
208
+
209
+ #### Computed with Previous Value
210
+
211
+ The computed getter receives the previous value for efficient diffing:
212
+
213
+ ```typescript
214
+ const changes = createComputed((prev) => {
215
+ const current = items();
216
+ if (prev) console.log(`${prev.length} → ${current.length} items`);
217
+ return current;
218
+ });
219
+ ```
220
+
221
+ #### Reactive Introspection
222
+
223
+ Type guards and utilities from alien-signals 3.x:
224
+
225
+ ```typescript
226
+ import { isSignal, isComputed, getBatchDepth, trigger } from '@getforma/core';
227
+
228
+ isSignal(count); // true — is this a signal getter?
229
+ isComputed(doubled); // true — is this a computed value?
230
+ getBatchDepth(); // 0 outside batch, 1+ inside
231
+ trigger(doubled); // force recomputation even if deps unchanged
232
+ ```
233
+
195
234
  ### Conditional Rendering
196
235
 
197
236
  ```typescript
@@ -240,12 +279,17 @@ const [state, setState] = createStore({
240
279
  items: [1, 2, 3],
241
280
  });
242
281
 
243
- // Read reactively
282
+ // Read reactively — tracked at the exact property path
244
283
  state.user.name; // 'Alice'
284
+ state.items[0]; // 1
285
+
286
+ // Setter API — partial object merge (batched)
287
+ setState({ user: { ...state.user, name: 'Bob' } });
288
+ setState(prev => ({ items: [...prev.items, 4] }));
245
289
 
246
- // Mutate — only affected subscribers update
247
- setState('user', 'name', 'Bob');
248
- setState('items', items => [...items, 4]);
290
+ // Or mutate directly via proxy — only affected subscribers update
291
+ state.user.name = 'Bob'; // only "user.name" subscribers notified
292
+ state.items.push(4); // array mutation batched automatically
249
293
  ```
250
294
 
251
295
  ### Components
@@ -332,6 +376,40 @@ provide(ThemeCtx, 'dark');
332
376
  const theme = inject(ThemeCtx); // 'dark'
333
377
  ```
334
378
 
379
+ ### History (undo/redo)
380
+
381
+ ```typescript
382
+ import { createHistory } from '@getforma/core';
383
+
384
+ const [state, setState, { undo, redo, canUndo, canRedo }] = createHistory({ text: '' });
385
+
386
+ setState({ text: 'hello' });
387
+ setState({ text: 'hello world' });
388
+
389
+ undo(); // state.text === 'hello'
390
+ canUndo(); // true
391
+ redo(); // state.text === 'hello world'
392
+ ```
393
+
394
+ ### Reducer
395
+
396
+ ```typescript
397
+ import { createReducer } from '@getforma/core';
398
+
399
+ const [state, dispatch] = createReducer(
400
+ (state, action) => {
401
+ switch (action.type) {
402
+ case 'INCREMENT': return { count: state.count + 1 };
403
+ case 'DECREMENT': return { count: state.count - 1 };
404
+ default: return state;
405
+ }
406
+ },
407
+ { count: 0 },
408
+ );
409
+
410
+ dispatch({ type: 'INCREMENT' }); // state() === { count: 1 }
411
+ ```
412
+
335
413
  ## Islands Architecture
336
414
 
337
415
  For server-rendered HTML, activate independent interactive regions. Each island callback receives the root DOM element and parsed props, then returns a component tree — the same `h()` calls you'd use for client-side rendering. The hydration system walks the descriptor tree against the existing SSR DOM, attaching event handlers and reactive bindings without recreating elements.
@@ -432,11 +510,14 @@ FormaJS shares Solid's core insight — fine-grained signals updating the real D
432
510
  | **CSP** | Relies on compiler output | Hand-written expression parser; hardened build has no `new Function()` |
433
511
  | **Islands** | Via [solid-start](https://start.solidjs.com/) meta-framework | Built-in `activateIslands()` — no meta-framework needed |
434
512
  | **Ecosystem** | Mature (router, meta-framework, devtools) | Minimal — reactive core only, you bring the architecture |
513
+ | **SSR runtime** | Node.js required | Node.js via `renderToString`, or Rust walker (no JS runtime on the server) |
435
514
  | **Size** | ~7KB | ~15KB (includes runtime parser, stores, SSR) |
436
515
 
437
- **When to choose FormaJS:** You want to progressively enhance server-rendered HTML, need CSP compliance without a build step, or prefer a single library that scales from a `<script>` tag to a full SSR pipeline.
516
+ **When to choose FormaJS:** You want islands hydration built into the library, not bolted on through a meta-framework. You need CSP compliance without a build step. You want three entry points (CDN, hyperscript, JSX) sharing one signal graph. Or you're building on a Rust backend and want your frontend reactive layer to integrate natively with the server stack.
517
+
518
+ **When to choose Solid:** You want a mature JavaScript ecosystem with routing, SSR meta-framework (SolidStart), devtools, and community-built component libraries. Your backend is Node.js and you want SSR in the same language as your frontend.
438
519
 
439
- **When to choose Solid:** You want a mature ecosystem with routing, SSR meta-framework, and community-built component libraries.
520
+ > FormaJS is the reactive layer of the [Forma stack](https://getforma.dev). The full pipeline compiles components to a binary IR (FMIR), renders them in Rust via `forma-ir`, and serves pages through `forma-server` SSR without Node.js, binary IR over the wire, deployed for ~$18/month.
440
521
 
441
522
  ## Stability
442
523
 
@@ -444,7 +525,8 @@ Some features are more battle-tested than others:
444
525
 
445
526
  | Feature | Status | Notes |
446
527
  |---------|--------|-------|
447
- | Signals (`createSignal`, `createEffect`, `createComputed`, `batch`) | **Stable** | Core primitive, well-tested |
528
+ | Signals (`createSignal`, `createEffect`, `createComputed`, `batch`) | **Stable** | Core primitive, well-tested. Custom `equals` option supported. |
529
+ | Reactive introspection (`isSignal`, `isComputed`, `trigger`, `getBatchDepth`) | **Stable** | alien-signals 3.x type guards |
448
530
  | `h()` / JSX rendering | **Stable** | |
449
531
  | `mount()`, `createShow`, `createSwitch`, `createList` | **Stable** | |
450
532
  | HTML Runtime (`data-*` directives) | **Stable** | Expression parser covers common patterns |
@@ -452,7 +534,10 @@ Some features are more battle-tested than others:
452
534
  | `createStore` (deep reactivity) | **Stable** | |
453
535
  | Components (`defineComponent`, lifecycle) | **Stable** | |
454
536
  | Context (`createContext`, `provide`, `inject`) | **Stable** | |
455
- | Islands (`activateIslands`) | **Stable** | 10 activation + 88 hydration tests |
537
+ | Islands (`activateIslands`, disposal, triggers) | **Stable** | 10 activation + 88 hydration + 10 trigger tests |
538
+ | `createHistory` (undo/redo) | **Stable** | |
539
+ | `createReducer` | **Stable** | 8 tests |
540
+ | `data-fetch`, `data-transition:*` | **Stable** | Fully implemented in HTML Runtime |
456
541
  | SSR (`renderToString`, `renderToStream`) | **Beta** | Functional, API may evolve |
457
542
  | TC39 Signals compat (`Signal.State`, `Signal.Computed`) | **Beta** | 9 tests, but tracks an evolving TC39 proposal |
458
543
 
@@ -0,0 +1,38 @@
1
+ 'use strict';
2
+
3
+ var alienSignals = require('alien-signals');
4
+
5
+ // src/reactive/signal.ts
6
+ function applySignalSet(s, v, equals) {
7
+ if (typeof v !== "function") {
8
+ if (equals) {
9
+ const prevSub2 = alienSignals.setActiveSub(void 0);
10
+ const prev2 = s();
11
+ alienSignals.setActiveSub(prevSub2);
12
+ if (equals(prev2, v)) return;
13
+ }
14
+ s(v);
15
+ return;
16
+ }
17
+ const prevSub = alienSignals.setActiveSub(void 0);
18
+ const prev = s();
19
+ alienSignals.setActiveSub(prevSub);
20
+ const next = v(prev);
21
+ if (equals && equals(prev, next)) return;
22
+ s(next);
23
+ }
24
+ function createSignal(initialValue, options) {
25
+ const s = alienSignals.signal(initialValue);
26
+ const getter = s;
27
+ const eq = options?.equals;
28
+ const setter = (v) => applySignalSet(s, v, eq);
29
+ return [getter, setter];
30
+ }
31
+ function createComputed(fn) {
32
+ return alienSignals.computed(fn);
33
+ }
34
+
35
+ exports.createComputed = createComputed;
36
+ exports.createSignal = createSignal;
37
+ //# sourceMappingURL=chunk-3U57L2TY.cjs.map
38
+ //# sourceMappingURL=chunk-3U57L2TY.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/reactive/signal.ts","../src/reactive/computed.ts"],"names":["prevSub","setActiveSub","prev","createRawSignal","rawComputed"],"mappings":";;;;;AAkEA,SAAS,cAAA,CACP,CAAA,EACA,CAAA,EACA,MAAA,EACM;AACN,EAAA,IAAI,OAAO,MAAM,UAAA,EAAY;AAC3B,IAAA,IAAI,MAAA,EAAQ;AAEV,MAAA,MAAMA,QAAAA,GAAUC,0BAAa,MAAS,CAAA;AACtC,MAAA,MAAMC,QAAO,CAAA,EAAE;AACf,MAAAD,yBAAA,CAAaD,QAAO,CAAA;AACpB,MAAA,IAAI,MAAA,CAAOE,KAAAA,EAAM,CAAC,CAAA,EAAG;AAAA,IACvB;AACA,IAAA,CAAA,CAAE,CAAC,CAAA;AACH,IAAA;AAAA,EACF;AAGA,EAAA,MAAM,OAAA,GAAUD,0BAAa,MAAS,CAAA;AACtC,EAAA,MAAM,OAAO,CAAA,EAAE;AACf,EAAAA,yBAAA,CAAa,OAAO,CAAA;AACpB,EAAA,MAAM,IAAA,GAAQ,EAAqB,IAAI,CAAA;AACvC,EAAA,IAAI,MAAA,IAAU,MAAA,CAAO,IAAA,EAAM,IAAI,CAAA,EAAG;AAClC,EAAA,CAAA,CAAE,IAAI,CAAA;AACR;AAqBO,SAAS,YAAA,CAAgB,cAAiB,OAAA,EAA0E;AACzH,EAAA,MAAM,CAAA,GAAIE,oBAAmB,YAAY,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS,CAAA;AACf,EAAA,MAAM,KAAK,OAAA,EAAS,MAAA;AACpB,EAAA,MAAM,SAA0B,CAAC,CAAA,KAA4B,cAAA,CAAe,CAAA,EAAG,GAAG,EAAE,CAAA;AAEpF,EAAA,OAAO,CAAC,QAAQ,MAAM,CAAA;AACxB;AC7EO,SAAS,eAAkB,EAAA,EAAuC;AACvE,EAAA,OAAOC,sBAAY,EAAE,CAAA;AACvB","file":"chunk-3U57L2TY.cjs","sourcesContent":["/**\n * Forma Reactive - Signal\n *\n * Fine-grained reactive primitive backed by alien-signals.\n * API: createSignal returns [getter, setter] tuple following SolidJS conventions.\n *\n * TC39 Signals equivalent: Signal.State\n */\n\nimport { signal as createRawSignal, setActiveSub } from 'alien-signals';\n\n// ---------------------------------------------------------------------------\n// Public API\n// ---------------------------------------------------------------------------\n\nexport type SignalGetter<T> = () => T;\nexport type SignalSetter<T> = (v: T | ((prev: T) => T)) => void;\n\nexport interface SignalOptions<T> {\n /** Debug name — attached to getter in dev mode for devtools inspection. */\n name?: string;\n /**\n * Custom equality check. When provided, the setter will read the current\n * value and only update the signal if `equals(prev, next)` returns `false`.\n *\n * Default: none (alien-signals uses strict inequality `!==` internally).\n *\n * ```ts\n * const [pos, setPos] = createSignal(\n * { x: 0, y: 0 },\n * { equals: (a, b) => a.x === b.x && a.y === b.y },\n * );\n *\n * setPos({ x: 0, y: 0 }); // skipped — equals returns true\n * setPos({ x: 1, y: 0 }); // applied — equals returns false\n * ```\n */\n equals?: (prev: T, next: T) => boolean;\n}\n\n/**\n * Wrap a value so the setter treats it as a literal value, not a functional updater.\n *\n * When `T` is itself a function type, passing a function to the setter is\n * ambiguous -- it looks like a functional update (`prev => next`). Use\n * `value()` to disambiguate:\n *\n * ```ts\n * const [getFn, setFn] = createSignal<() => void>(() => console.log('a'));\n *\n * // BUG: interpreted as a functional update -- calls the arrow with prev\n * // setFn(() => console.log('b'));\n *\n * // Correct: wraps in a thunk so the setter stores it as-is\n * setFn(value(() => console.log('b')));\n * ```\n */\nexport function value<T>(v: T): () => T {\n return () => v;\n}\n\ntype RawSignal<T> = {\n (): T;\n (value: T): void;\n};\n\nfunction applySignalSet<T>(\n s: RawSignal<T>,\n v: T | ((prev: T) => T),\n equals?: (prev: T, next: T) => boolean,\n): void {\n if (typeof v !== 'function') {\n if (equals) {\n // Read current value without tracking\n const prevSub = setActiveSub(undefined);\n const prev = s();\n setActiveSub(prevSub);\n if (equals(prev, v)) return; // skip — values are equal\n }\n s(v);\n return;\n }\n\n // Functional update: read prev without tracking\n const prevSub = setActiveSub(undefined);\n const prev = s();\n setActiveSub(prevSub);\n const next = (v as (prev: T) => T)(prev);\n if (equals && equals(prev, next)) return; // skip — values are equal\n s(next);\n}\n\n/**\n * Create a reactive signal.\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * console.log(count()); // 0\n * setCount(1);\n * setCount(prev => prev + 1);\n * ```\n *\n * With custom equality:\n *\n * ```ts\n * const [pos, setPos] = createSignal(\n * { x: 0, y: 0 },\n * { equals: (a, b) => a.x === b.x && a.y === b.y },\n * );\n * ```\n */\nexport function createSignal<T>(initialValue: T, options?: SignalOptions<T>): [get: SignalGetter<T>, set: SignalSetter<T>] {\n const s = createRawSignal<T>(initialValue) as RawSignal<T>;\n const getter = s as unknown as SignalGetter<T>;\n const eq = options?.equals;\n const setter: SignalSetter<T> = (v: T | ((prev: T) => T)) => applySignalSet(s, v, eq);\n\n return [getter, setter];\n}\n","/**\n * Forma Reactive - Computed\n *\n * Lazy, cached derived value that participates in the reactive graph.\n * Backed by alien-signals for automatic dependency tracking\n * and cache invalidation.\n *\n * TC39 Signals equivalent: Signal.Computed\n */\n\nimport { computed as rawComputed } from 'alien-signals';\n\n/**\n * Create a lazy, cached computed value.\n *\n * Note: Unlike SolidJS's createComputed (which is an eager synchronous\n * side effect), this is a lazy cached derivation — equivalent to\n * SolidJS's createMemo. Both createComputed and createMemo in FormaJS\n * are identical.\n *\n * The getter receives the previous value as an argument, enabling\n * efficient diffing patterns without a separate signal:\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * const doubled = createComputed(() => count() * 2);\n * console.log(doubled()); // 0\n * setCount(5);\n * console.log(doubled()); // 10\n * ```\n *\n * With previous value (for diffing):\n *\n * ```ts\n * const changes = createComputed((prev) => {\n * const next = items();\n * if (prev) console.log(`changed from ${prev.length} to ${next.length} items`);\n * return next;\n * });\n * ```\n */\nexport function createComputed<T>(fn: (previousValue?: T) => T): () => T {\n return rawComputed(fn);\n}\n"]}
@@ -1,14 +1,21 @@
1
- import { createComputed, createSignal } from './chunk-DPSAVBCP.js';
2
- import { effect, startBatch, endBatch, pauseTracking, resumeTracking } from 'alien-signals';
1
+ import { createComputed, createSignal } from './chunk-OZCHIVAZ.js';
2
+ import { effect, effectScope, startBatch, endBatch, setActiveSub } from 'alien-signals';
3
+ export { getBatchDepth, isComputed, isEffect, isEffectScope, isSignal, trigger } from 'alien-signals';
3
4
 
4
- // src/reactive/root.ts
5
5
  var currentRoot = null;
6
6
  var rootStack = [];
7
7
  function createRoot(fn) {
8
- const scope = { disposers: [] };
8
+ const scope = { disposers: [], scopeDispose: null };
9
9
  rootStack.push(currentRoot);
10
10
  currentRoot = scope;
11
11
  const dispose = () => {
12
+ if (scope.scopeDispose) {
13
+ try {
14
+ scope.scopeDispose();
15
+ } catch {
16
+ }
17
+ scope.scopeDispose = null;
18
+ }
12
19
  for (const d of scope.disposers) {
13
20
  try {
14
21
  d();
@@ -17,14 +24,15 @@ function createRoot(fn) {
17
24
  }
18
25
  scope.disposers.length = 0;
19
26
  };
27
+ let result;
20
28
  try {
21
- return fn(dispose);
29
+ scope.scopeDispose = effectScope(() => {
30
+ result = fn(dispose);
31
+ });
22
32
  } finally {
23
33
  currentRoot = rootStack.pop() ?? null;
24
- if (rootStack.length === 0) {
25
- rootStack.length = 0;
26
- }
27
34
  }
35
+ return result;
28
36
  }
29
37
  function registerDisposer(dispose) {
30
38
  if (currentRoot) {
@@ -237,11 +245,11 @@ function batch(fn) {
237
245
  }
238
246
  }
239
247
  function untrack(fn) {
240
- pauseTracking();
248
+ const prev = setActiveSub(void 0);
241
249
  try {
242
250
  return fn();
243
251
  } finally {
244
- resumeTracking();
252
+ setActiveSub(prev);
245
253
  }
246
254
  }
247
255
 
@@ -1815,5 +1823,5 @@ function createList(items, keyFn, renderFn, options) {
1815
1823
  }
1816
1824
 
1817
1825
  export { Fragment, __DEV__, batch, cleanup, createEffect, createList, createMemo, createReducer, createRef, createResource, createRoot, createShow, fragment, h, hydrateIsland, internalEffect, on, onCleanup, onError, popSuspenseContext, pushSuspenseContext, reconcileList, reportError, untrack };
1818
- //# sourceMappingURL=chunk-TKGUHASG.js.map
1819
- //# sourceMappingURL=chunk-TKGUHASG.js.map
1826
+ //# sourceMappingURL=chunk-N522P3G6.js.map
1827
+ //# sourceMappingURL=chunk-N522P3G6.js.map