@vielzeug/ripple 1.2.0 → 1.2.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/dist/devtools.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @vielzeug/ripple — debug utilities for reactivity visualisation.
|
|
3
|
+
*
|
|
4
|
+
* Import from the dedicated sub-path so it is tree-shaken from production bundles:
|
|
5
|
+
* ```ts
|
|
6
|
+
* import { installDevTools, debugEffect } from '@vielzeug/ripple/devtools';
|
|
7
|
+
* ```
|
|
8
|
+
*
|
|
9
|
+
* The hot-path stub (`getDevToolsHook`) lives in `devtools-hook.ts` and is the only
|
|
10
|
+
* part that ships in the core bundle.
|
|
11
|
+
*/
|
|
1
12
|
import type { EffectCallback, EffectHandle, EffectOptions, RippleDevToolsHook } from './types';
|
|
2
13
|
export type { DisposeEvent, MutateEvent, NamedEvent, RippleDevToolsHook, WriteEvent } from './types';
|
|
3
14
|
/**
|
package/dist/devtools.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../src/devtools.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../src/devtools.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAa,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQ1G,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrG;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,kBAAkB,GAAG,IAAI,KAAG,IAQjE,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,cAAc,EAAE,UAAU,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,KAAG,YA+CxF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.cjs","names":[],"sources":["../../src/devtools.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"devtools.cjs","names":[],"sources":["../../src/devtools.ts"],"sourcesContent":["/**\n * @vielzeug/ripple — debug utilities for reactivity visualisation.\n *\n * Import from the dedicated sub-path so it is tree-shaken from production bundles:\n * ```ts\n * import { installDevTools, debugEffect } from '@vielzeug/ripple/devtools';\n * ```\n *\n * The hot-path stub (`getDevToolsHook`) lives in `devtools-hook.ts` and is the only\n * part that ships in the core bundle.\n */\n\nimport type { DepEntry } from './tracking';\nimport type { CleanupFn, EffectCallback, EffectHandle, EffectOptions, RippleDevToolsHook } from './types';\n\nimport { setDevToolsHook } from './devtools-hook';\nimport { effect } from './effect';\nimport { withSourceObserver } from './tracking';\n\n// Re-export all hook types from the core types module so consumers of the\n// sub-path don't need to import from two places.\nexport type { DisposeEvent, MutateEvent, NamedEvent, RippleDevToolsHook, WriteEvent } from './types';\n\n// ── installDevTools ───────────────────────────────────────────────────────────\n\n/**\n * Installs a DevTools hook for observing ripple internals.\n * Pass `null` to uninstall.\n *\n * Import from the dedicated sub-path to keep this out of production bundles:\n * ```ts\n * import { installDevTools } from '@vielzeug/ripple/devtools';\n *\n * installDevTools({\n * write({ name, oldValue, newValue }) {\n * console.log(`[ripple] ${name ?? '(unnamed)'}: ${String(oldValue)} → ${String(newValue)}`);\n * },\n * dispose({ kind, name }) {\n * console.log(`[ripple] ${kind} \"${name ?? '(unnamed)'}\" disposed`);\n * },\n * });\n * ```\n */\nexport const installDevTools = (hook: RippleDevToolsHook | null): void => {\n setDevToolsHook(hook);\n\n // Keep the globalThis mirror in sync for browser-extension DevTools.\n // Use assignment (not delete) — configurable property semantics vary by environment.\n if (typeof globalThis !== 'undefined') {\n (globalThis as Record<string, unknown>)['__RIPPLE_DEVTOOLS__'] = hook ?? undefined;\n }\n};\n\n// ── debugEffect ───────────────────────────────────────────────────────────────\n\n/**\n * Wraps `effect()` and logs reactive dependency information on every run:\n * - **Initial run**: logs all deps the effect subscribed to.\n * - **Re-runs**: logs which deps changed (with old and new version numbers).\n *\n * Use instead of `effect()` when debugging unexpected re-renders.\n *\n * @example\n * ```ts\n * import { debugEffect } from '@vielzeug/ripple/devtools';\n *\n * const stop = debugEffect(() => {\n * renderUser(userId.value, name.value);\n * }, { name: 'renderUser' });\n * ```\n */\nexport const debugEffect = (fn: EffectCallback, options?: Omit<EffectOptions, 'trace'>): EffectHandle => {\n const label = options?.name ?? 'anonymous';\n\n // Track versions seen on the last run so we can diff on the next run.\n let prevDeps: DepEntry[] = [];\n\n const wrappedFn = (): CleanupFn | void => {\n const currentDeps: DepEntry[] = [];\n\n // SourceObserver is scoped to the current TrackingCtx — nested computed\n // recomputes run in their own context (no observer), so no identity check needed.\n const result = withSourceObserver((source) => {\n currentDeps.push({ source, version: source.version });\n }, fn);\n\n if (prevDeps.length === 0) {\n // First run — log initial subscriptions.\n if (currentDeps.length > 0) {\n console.group(`[ripple:debug] \"${label}\" initial deps:`);\n\n for (const dep of currentDeps) {\n console.debug(` ${dep.source.name ?? '(unnamed)'} (v${dep.source.version})`);\n }\n\n console.groupEnd();\n }\n } else {\n // Re-run — log which sources changed.\n const changed = prevDeps.filter((d) => d.source.version !== d.version);\n\n if (changed.length > 0) {\n console.group(`[ripple:debug] \"${label}\" re-running — changed sources:`);\n\n for (const dep of changed) {\n console.debug(` ${dep.source.name ?? '(unnamed)'} (v${dep.version} -> v${dep.source.version})`);\n }\n\n console.groupEnd();\n }\n }\n\n prevDeps = currentDeps;\n\n return result;\n };\n\n return effect(wrappedFn, options);\n};\n"],"mappings":"mKA2CA,IAAa,EAAmB,GAA0C,CACxE,EAAA,gBAAgB,CAAI,EAIhB,OAAO,WAAe,MACxB,WAAwC,oBAAyB,GAAQ,IAAA,GAE7E,EAoBa,GAAe,EAAoB,IAAyD,CACvG,IAAM,EAAQ,GAAS,MAAQ,YAG3B,EAAuB,CAAC,EA0C5B,OAAO,EAAA,WAxCmC,CACxC,IAAM,EAA0B,CAAC,EAI3B,EAAS,EAAA,mBAAoB,GAAW,CAC5C,EAAY,KAAK,CAAE,SAAQ,QAAS,EAAO,OAAQ,CAAC,CACtD,EAAG,CAAE,EAEL,GAAI,EAAS,SAAW,MAElB,EAAY,OAAS,EAAG,CAC1B,QAAQ,MAAM,mBAAmB,EAAM,gBAAgB,EAEvD,IAAK,IAAM,KAAO,EAChB,QAAQ,MAAM,KAAK,EAAI,OAAO,MAAQ,YAAY,KAAK,EAAI,OAAO,QAAQ,EAAE,EAG9E,QAAQ,SAAS,CACnB,MACK,CAEL,IAAM,EAAU,EAAS,OAAQ,GAAM,EAAE,OAAO,UAAY,EAAE,OAAO,EAErE,GAAI,EAAQ,OAAS,EAAG,CACtB,QAAQ,MAAM,mBAAmB,EAAM,gCAAgC,EAEvE,IAAK,IAAM,KAAO,EAChB,QAAQ,MAAM,KAAK,EAAI,OAAO,MAAQ,YAAY,KAAK,EAAI,QAAQ,OAAO,EAAI,OAAO,QAAQ,EAAE,EAGjG,QAAQ,SAAS,CACnB,CACF,CAIA,MAFA,GAAW,EAEJ,CACT,EAEyB,CAAO,CAClC"}
|
package/dist/src/devtools.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.js","names":[],"sources":["../../src/devtools.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"devtools.js","names":[],"sources":["../../src/devtools.ts"],"sourcesContent":["/**\n * @vielzeug/ripple — debug utilities for reactivity visualisation.\n *\n * Import from the dedicated sub-path so it is tree-shaken from production bundles:\n * ```ts\n * import { installDevTools, debugEffect } from '@vielzeug/ripple/devtools';\n * ```\n *\n * The hot-path stub (`getDevToolsHook`) lives in `devtools-hook.ts` and is the only\n * part that ships in the core bundle.\n */\n\nimport type { DepEntry } from './tracking';\nimport type { CleanupFn, EffectCallback, EffectHandle, EffectOptions, RippleDevToolsHook } from './types';\n\nimport { setDevToolsHook } from './devtools-hook';\nimport { effect } from './effect';\nimport { withSourceObserver } from './tracking';\n\n// Re-export all hook types from the core types module so consumers of the\n// sub-path don't need to import from two places.\nexport type { DisposeEvent, MutateEvent, NamedEvent, RippleDevToolsHook, WriteEvent } from './types';\n\n// ── installDevTools ───────────────────────────────────────────────────────────\n\n/**\n * Installs a DevTools hook for observing ripple internals.\n * Pass `null` to uninstall.\n *\n * Import from the dedicated sub-path to keep this out of production bundles:\n * ```ts\n * import { installDevTools } from '@vielzeug/ripple/devtools';\n *\n * installDevTools({\n * write({ name, oldValue, newValue }) {\n * console.log(`[ripple] ${name ?? '(unnamed)'}: ${String(oldValue)} → ${String(newValue)}`);\n * },\n * dispose({ kind, name }) {\n * console.log(`[ripple] ${kind} \"${name ?? '(unnamed)'}\" disposed`);\n * },\n * });\n * ```\n */\nexport const installDevTools = (hook: RippleDevToolsHook | null): void => {\n setDevToolsHook(hook);\n\n // Keep the globalThis mirror in sync for browser-extension DevTools.\n // Use assignment (not delete) — configurable property semantics vary by environment.\n if (typeof globalThis !== 'undefined') {\n (globalThis as Record<string, unknown>)['__RIPPLE_DEVTOOLS__'] = hook ?? undefined;\n }\n};\n\n// ── debugEffect ───────────────────────────────────────────────────────────────\n\n/**\n * Wraps `effect()` and logs reactive dependency information on every run:\n * - **Initial run**: logs all deps the effect subscribed to.\n * - **Re-runs**: logs which deps changed (with old and new version numbers).\n *\n * Use instead of `effect()` when debugging unexpected re-renders.\n *\n * @example\n * ```ts\n * import { debugEffect } from '@vielzeug/ripple/devtools';\n *\n * const stop = debugEffect(() => {\n * renderUser(userId.value, name.value);\n * }, { name: 'renderUser' });\n * ```\n */\nexport const debugEffect = (fn: EffectCallback, options?: Omit<EffectOptions, 'trace'>): EffectHandle => {\n const label = options?.name ?? 'anonymous';\n\n // Track versions seen on the last run so we can diff on the next run.\n let prevDeps: DepEntry[] = [];\n\n const wrappedFn = (): CleanupFn | void => {\n const currentDeps: DepEntry[] = [];\n\n // SourceObserver is scoped to the current TrackingCtx — nested computed\n // recomputes run in their own context (no observer), so no identity check needed.\n const result = withSourceObserver((source) => {\n currentDeps.push({ source, version: source.version });\n }, fn);\n\n if (prevDeps.length === 0) {\n // First run — log initial subscriptions.\n if (currentDeps.length > 0) {\n console.group(`[ripple:debug] \"${label}\" initial deps:`);\n\n for (const dep of currentDeps) {\n console.debug(` ${dep.source.name ?? '(unnamed)'} (v${dep.source.version})`);\n }\n\n console.groupEnd();\n }\n } else {\n // Re-run — log which sources changed.\n const changed = prevDeps.filter((d) => d.source.version !== d.version);\n\n if (changed.length > 0) {\n console.group(`[ripple:debug] \"${label}\" re-running — changed sources:`);\n\n for (const dep of changed) {\n console.debug(` ${dep.source.name ?? '(unnamed)'} (v${dep.version} -> v${dep.source.version})`);\n }\n\n console.groupEnd();\n }\n }\n\n prevDeps = currentDeps;\n\n return result;\n };\n\n return effect(wrappedFn, options);\n};\n"],"mappings":";;;;AA2CA,IAAa,KAAmB,MAA0C;CAKxE,AAJA,EAAgB,CAAI,GAIhB,OAAO,aAAe,QACxB,WAAwC,sBAAyB,KAAQ,KAAA;AAE7E,GAoBa,KAAe,GAAoB,MAAyD;CACvG,IAAM,IAAQ,GAAS,QAAQ,aAG3B,IAAuB,CAAC;CA0C5B,OAAO,QAxCmC;EACxC,IAAM,IAA0B,CAAC,GAI3B,IAAS,GAAoB,MAAW;GAC5C,EAAY,KAAK;IAAE;IAAQ,SAAS,EAAO;GAAQ,CAAC;EACtD,GAAG,CAAE;EAEL,IAAI,EAAS,WAAW;OAElB,EAAY,SAAS,GAAG;IAC1B,QAAQ,MAAM,mBAAmB,EAAM,gBAAgB;IAEvD,KAAK,IAAM,KAAO,GAChB,QAAQ,MAAM,KAAK,EAAI,OAAO,QAAQ,YAAY,KAAK,EAAI,OAAO,QAAQ,EAAE;IAG9E,QAAQ,SAAS;GACnB;SACK;GAEL,IAAM,IAAU,EAAS,QAAQ,MAAM,EAAE,OAAO,YAAY,EAAE,OAAO;GAErE,IAAI,EAAQ,SAAS,GAAG;IACtB,QAAQ,MAAM,mBAAmB,EAAM,gCAAgC;IAEvE,KAAK,IAAM,KAAO,GAChB,QAAQ,MAAM,KAAK,EAAI,OAAO,QAAQ,YAAY,KAAK,EAAI,QAAQ,OAAO,EAAI,OAAO,QAAQ,EAAE;IAGjG,QAAQ,SAAS;GACnB;EACF;EAIA,OAFA,IAAW,GAEJ;CACT,GAEyB,CAAO;AAClC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vielzeug/ripple",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -43,6 +43,9 @@
|
|
|
43
43
|
"access": "public",
|
|
44
44
|
"registry": "https://registry.npmjs.org/"
|
|
45
45
|
},
|
|
46
|
+
"engines": {
|
|
47
|
+
"node": ">=18"
|
|
48
|
+
},
|
|
46
49
|
"devDependencies": {
|
|
47
50
|
"@types/node": "^26.1.0",
|
|
48
51
|
"typescript": "~6.0.3",
|