@ipxjs/refract 0.10.0 → 0.10.2
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 +35 -31
- package/package.json +1 -1
- package/src/refract/devtools.ts +7 -1
package/README.md
CHANGED
|
@@ -158,9 +158,10 @@ subsequent renders to the same container.
|
|
|
158
158
|
|
|
159
159
|
### DevTools hook integration
|
|
160
160
|
|
|
161
|
-
|
|
161
|
+
Call `setDevtoolsHook(...)` to enable commit and unmount events. Refract uses
|
|
162
|
+
the explicit hook you provide, or falls back to
|
|
162
163
|
`window.__REFRACT_DEVTOOLS_GLOBAL_HOOK__` (or `globalThis` in non-browser
|
|
163
|
-
environments)
|
|
164
|
+
environments) when called with no argument.
|
|
164
165
|
|
|
165
166
|
```ts
|
|
166
167
|
import { setDevtoolsHook } from "refract";
|
|
@@ -224,22 +225,22 @@ The values below are from a local run on February 17, 2026.
|
|
|
224
225
|
|
|
225
226
|
| Framework | JS bundle (raw) | JS bundle (gzip) |
|
|
226
227
|
|---------------------------|----------------:|-----------------:|
|
|
227
|
-
| Refract (`core`) |
|
|
228
|
-
| Refract (`core+hooks`) |
|
|
229
|
-
| Refract (`core+context`) |
|
|
230
|
-
| Refract (`core+memo`) |
|
|
231
|
-
| Refract (`core+security`) |
|
|
232
|
-
| Refract (`refract`) |
|
|
233
|
-
| React | 189.74 kB | 59.
|
|
234
|
-
| Preact | 14.46 kB | 5.
|
|
228
|
+
| Refract (`core`) | 10.02 kB | 3.74 kB |
|
|
229
|
+
| Refract (`core+hooks`) | 12.08 kB | 4.49 kB |
|
|
230
|
+
| Refract (`core+context`) | 10.66 kB | 4.00 kB |
|
|
231
|
+
| Refract (`core+memo`) | 10.70 kB | 3.97 kB |
|
|
232
|
+
| Refract (`core+security`) | 10.93 kB | 4.03 kB |
|
|
233
|
+
| Refract (`refract`) | 14.45 kB | 5.28 kB |
|
|
234
|
+
| React | 189.74 kB | 59.52 kB |
|
|
235
|
+
| Preact | 14.46 kB | 5.95 kB |
|
|
235
236
|
|
|
236
237
|
Load-time metrics are machine-dependent, so the benchmark script prints a fresh
|
|
237
238
|
per-run timing table (median, p95, min/max, sd) for every framework.
|
|
238
|
-
The CI preset (`make bench-ci`, 40 measured + 5 warmup runs)
|
|
239
|
-
|
|
239
|
+
The CI preset (`make bench-ci`, 40 measured + 5 warmup runs) enforces default
|
|
240
|
+
guardrails (`DCL p95 <= 16ms`, `DCL sd <= 2ms`).
|
|
240
241
|
|
|
241
|
-
From this snapshot, Refract `core` gzip JS is about
|
|
242
|
-
and the full `refract` entrypoint is about
|
|
242
|
+
From this snapshot, Refract `core` gzip JS is about 15.9x smaller than React,
|
|
243
|
+
and the full `refract` entrypoint is about 11.3x smaller.
|
|
243
244
|
|
|
244
245
|
### Component Combination Benchmarks (Vitest)
|
|
245
246
|
|
|
@@ -249,15 +250,15 @@ Higher `hz` is better.
|
|
|
249
250
|
|
|
250
251
|
| Component usage profile | Mount (hz) | Mount vs base | Reconcile (hz) | Reconcile vs base |
|
|
251
252
|
|-------------------------|------------|---------------|----------------|-------------------|
|
|
252
|
-
| `base` |
|
|
253
|
-
| `memo` |
|
|
254
|
-
| `context` |
|
|
255
|
-
| `fragment` |
|
|
256
|
-
| `keyed` |
|
|
257
|
-
| `memo+context` |
|
|
258
|
-
| `memo+context+keyed` |
|
|
259
|
-
|
|
260
|
-
In this run, `
|
|
253
|
+
| `base` | 5160.53 | baseline | 3262.99 | baseline |
|
|
254
|
+
| `memo` | 4858.51 | -5.9% | 5092.55 | +56.1% |
|
|
255
|
+
| `context` | 3862.01 | -25.2% | 4954.24 | +51.8% |
|
|
256
|
+
| `fragment` | 4656.36 | -9.8% | 3760.97 | +15.3% |
|
|
257
|
+
| `keyed` | 5754.75 | +11.5% | 4311.45 | +32.1% |
|
|
258
|
+
| `memo+context` | 5872.59 | +13.8% | 4621.45 | +41.6% |
|
|
259
|
+
| `memo+context+keyed` | 5555.42 | +7.7% | 4509.78 | +38.2% |
|
|
260
|
+
|
|
261
|
+
In this run, `memo+context` was the fastest mount profile, while
|
|
261
262
|
`memo` was the fastest reconcile profile.
|
|
262
263
|
|
|
263
264
|
### Running the Benchmark
|
|
@@ -304,7 +305,7 @@ How Refract compares to React and Preact:
|
|
|
304
305
|
| SVG support | Yes | Yes | Yes |
|
|
305
306
|
| **Components** | | | |
|
|
306
307
|
| Functional components | Yes | Yes | Yes |
|
|
307
|
-
| Class components |
|
|
308
|
+
| Class components | Partial⁶ | Yes | Yes |
|
|
308
309
|
| **Hooks** | | | |
|
|
309
310
|
| useState | Yes | Yes | Yes |
|
|
310
311
|
| useEffect | Yes | Yes | Yes |
|
|
@@ -329,10 +330,10 @@ How Refract compares to React and Preact:
|
|
|
329
330
|
| className prop | Yes | Yes | Yes¹ |
|
|
330
331
|
| dangerouslySetInnerHTML | Yes | Yes | Yes |
|
|
331
332
|
| Portals | Yes | Yes | Yes |
|
|
332
|
-
| Suspense / lazy | No
|
|
333
|
+
| Suspense / lazy | No⁸ | Yes | Yes² |
|
|
333
334
|
| Error boundaries | Yes³ | Yes | Yes |
|
|
334
335
|
| Server-side rendering | No | Yes | Yes |
|
|
335
|
-
| Hydration | No
|
|
336
|
+
| Hydration | No⁹ | Yes | Yes |
|
|
336
337
|
| **Security** | | | |
|
|
337
338
|
| Default HTML sanitizer for `dangerouslySetInnerHTML` | Yes | No | No |
|
|
338
339
|
| Configurable HTML sanitizer hook (`setHtmlSanitizer`) | Yes | No | No |
|
|
@@ -340,19 +341,22 @@ How Refract compares to React and Preact:
|
|
|
340
341
|
| Fiber architecture | Yes | Yes | No |
|
|
341
342
|
| Concurrent rendering | No | Yes | No |
|
|
342
343
|
| Automatic batching | Yes | Yes | Yes |
|
|
343
|
-
| memo / PureComponent |
|
|
344
|
+
| memo / PureComponent | Partial¹⁰ | Yes | Yes |
|
|
344
345
|
| **Ecosystem** | | | |
|
|
345
346
|
| DevTools | Basic (hook API) | Yes | Yes |
|
|
346
|
-
| React compatibility layer |
|
|
347
|
-
| **Bundle Size (gzip, JS)** | ~3.
|
|
347
|
+
| React compatibility layer | Partial⁶ | N/A | Yes⁷ |
|
|
348
|
+
| **Bundle Size (gzip, JS)** | ~3.7-5.3 kB⁴ | ~59.5 kB | ~6.0 kB |
|
|
348
349
|
|
|
349
350
|
¹ Preact supports both `class` and `className`.
|
|
350
351
|
² Preact has partial Suspense support via `preact/compat`.
|
|
351
|
-
³ Refract uses the `useErrorBoundary` hook
|
|
352
|
+
³ Refract core uses the `useErrorBoundary` hook; compat wrappers can emulate class-style boundaries.
|
|
352
353
|
⁴ Refract size depends on entrypoint (`refract/core` vs `refract` full).
|
|
353
354
|
⁵ Refract exposes `useTransition` / `useDeferredValue` but currently runs both synchronously (no concurrent scheduling).
|
|
354
|
-
⁶ Available via opt-in compat entrypoints (`refract/compat/react*`).
|
|
355
|
+
⁶ Available via opt-in compat entrypoints (`refract/compat/react*`) with partial React API parity.
|
|
355
356
|
⁷ Preact compatibility is provided through `preact/compat`.
|
|
357
|
+
⁸ Compat exports `Suspense`/`lazy`, but full suspension/fallback semantics are not implemented.
|
|
358
|
+
⁹ `hydrateRoot` is exposed in compat, but currently performs client render rather than true SSR hydration.
|
|
359
|
+
¹⁰ `memo` is supported; `PureComponent` is compat-oriented and does not guarantee full React shallow-compare behavior.
|
|
356
360
|
|
|
357
361
|
## License
|
|
358
362
|
|
package/package.json
CHANGED
package/src/refract/devtools.ts
CHANGED
|
@@ -32,6 +32,7 @@ export interface RefractDevtoolsHook {
|
|
|
32
32
|
let explicitHook: RefractDevtoolsHook | null | undefined = undefined;
|
|
33
33
|
let activeHook: RefractDevtoolsHook | null = null;
|
|
34
34
|
let activeRendererId = 1;
|
|
35
|
+
let commitReporterRegistered = false;
|
|
35
36
|
|
|
36
37
|
const containerIds = new WeakMap<Node, number>();
|
|
37
38
|
let nextContainerId = 1;
|
|
@@ -40,6 +41,7 @@ const fiberIds = new WeakMap<Fiber, number>();
|
|
|
40
41
|
let nextFiberId = 1;
|
|
41
42
|
|
|
42
43
|
export function setDevtoolsHook(hook?: RefractDevtoolsHook | null): void {
|
|
44
|
+
ensureDevtoolsCommitReporting();
|
|
43
45
|
explicitHook = hook;
|
|
44
46
|
activeHook = null;
|
|
45
47
|
activeRendererId = 1;
|
|
@@ -68,7 +70,11 @@ export function reportDevtoolsCommit(rootFiber: Fiber, deletions: Fiber[]): void
|
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
|
|
71
|
-
|
|
73
|
+
function ensureDevtoolsCommitReporting(): void {
|
|
74
|
+
if (commitReporterRegistered) return;
|
|
75
|
+
commitReporterRegistered = true;
|
|
76
|
+
registerCommitHandler(reportDevtoolsCommit);
|
|
77
|
+
}
|
|
72
78
|
|
|
73
79
|
function resolveHook(): RefractDevtoolsHook | null {
|
|
74
80
|
if (explicitHook !== undefined) return explicitHook;
|