@preact-mvc/core 0.1.5 → 0.1.7

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Injector, InjectionToken, inject, runInInjectionContext, getCurrentInje
 export type { Provider, Token, Type } from './injector';
 export { Injectable, Controller, Module, Component } from './decorators';
 export type { InjectableMeta, ModuleMeta, ComponentMeta } from './decorators';
-export { View, installViewInterop } from './view';
+export { View, installViewInterop, errorHint } from './view';
 export { bootstrap, createModuleInjector, getModuleInjector } from './module';
 export { pmvc } from './pmvc';
 export { InjectorContext, useInjector, useService, Provide } from './context';

package/dist/index.js

@@ -5,7 +5,7 @@ export { Injector, InjectionToken, inject, runInInjectionContext, getCurrentInje
 // Metadata
 export { Injectable, Controller, Module, Component } from './decorators';
 // Class-based views
-export { View, installViewInterop } from './view';
+export { View, installViewInterop, errorHint } from './view';
 // Modules & bootstrap
 export { bootstrap, createModuleInjector, getModuleInjector } from './module';
 // Class-flag utilities — pmvc.isView(x), pmvc.isController(x), ...

package/dist/module.js

@@ -4,8 +4,11 @@ import { InjectorContext } from './context';
 import { installViewInterop } from './view';
 import { ownMeta } from './decorators';
 // Modules are the unit of provider scoping. A module's providers (plus those
-// of its imports, transitively) register into a single child Injector. The
-// injector tree mirrors the view tree: root injector -> AppModule injector ->
+// of its imports, transitively) register into a single Injector. The
+// bootstrap module registers into the ROOT injector itself — matching
+// Angular, where eager module providers share the root scope — so
+// providedIn: 'root' services can inject them. Only feature/lazy modules
+// get child injectors: root injector (holding the app module's graph) ->
 // feature/lazy module injectors -> per-view injectors.
 export function getModuleMeta(mod) {
     return ownMeta(mod, '__module');
@@ -63,11 +66,14 @@ export function getModuleInjector(mod, parent) {
 export function bootstrap(RootModule, el) {
     installViewInterop();
     const root = new Injector(null, 'root');
-    const appInjector = createModuleInjector(RootModule, root);
-    const meta = getModuleMeta(RootModule);
-    const App = meta.bootstrap?.[0];
+    // The bootstrapped module is eager: its providers and imports merge into
+    // the root injector, so providedIn: 'root' services (instantiated under
+    // root) can inject them — including forRoot() bundles like
+    // RouterModule.forRoot().
+    registerModule(RootModule, root, new Set());
+    const App = getModuleMeta(RootModule).bootstrap?.[0];
     if (!App) {
         throw new Error('Root module must declare a bootstrap component: @Module({ bootstrap: [AppView] })');
     }
-    render(h(InjectorContext.Provider, { value: appInjector }, h(App, {})), el);
+    render(h(InjectorContext.Provider, { value: root }, h(App, {})), el);
 }

package/dist/view.d.ts

@@ -8,4 +8,6 @@ export declare abstract class View<P = {}> extends PreactComponent<P> {
 }
 /** Identity stamp read — a subclass of a View stays a view. */
 export declare function isView(t: any): boolean;
+/** Map a caught error to a known-cause hint, or null when unrecognized. */
+export declare function errorHint(error: any): string | null;
 export declare function installViewInterop(): void;

package/dist/view.js

@@ -35,6 +35,27 @@ export function isView(t) {
 // Real Preact class component (not a View — it must be instantiated by Preact).
 // Wraps every view host so mount/render failures stay local instead of
 // aborting the whole render pass.
+// Opaque upstream error signatures -> actionable guidance, appended to the
+// boundary output and the console.error. Add entries when a cryptic thrown
+// error has a known real cause.
+const ERROR_HINTS = [
+    [
+        /Hook can only be invoked from render methods/,
+        'a hook ran outside a render pass. A common cause: a function component ' +
+            'mounts a Preact sub-tree with render() inside useEffect. Pending ' +
+            "useEffects flush inside options.__r on a re-render, and the nested " +
+            "diff corrupts preact/debug's hook tracking for the outer component. " +
+            'Mount sub-trees in useLayoutEffect instead.',
+    ],
+];
+/** Map a caught error to a known-cause hint, or null when unrecognized. */
+export function errorHint(error) {
+    const msg = String(error?.message ?? error);
+    for (const [re, hint] of ERROR_HINTS)
+        if (re.test(msg))
+            return hint;
+    return null;
+}
 class ViewErrorBoundary extends PreactComponent {
     constructor() {
         super(...arguments);
@@ -42,12 +63,16 @@ class ViewErrorBoundary extends PreactComponent {
     }
     componentDidCatch(error) {
         console.error(`[framework] ${this.props.viewName} failed:`, error);
+        const hint = errorHint(error);
+        if (hint)
+            console.error(`[framework] hint for ${this.props.viewName}:`, hint);
         this.setState({ error });
     }
     render() {
         const err = this.state.error;
         if (!err)
             return this.props.children;
+        const hint = errorHint(err);
         return h('div', {
             style: {
                 border: '1px solid #e53935',
@@ -57,7 +82,7 @@ class ViewErrorBoundary extends PreactComponent {
                 fontFamily: 'monospace',
                 fontSize: '0.85rem',
             },
-        }, h('strong', null, `${this.props.viewName} failed to mount`), h('pre', { style: { whiteSpace: 'pre-wrap', margin: '0.5rem 0' } }, String(err?.message ?? err)), h('button', { onClick: () => this.setState({ error: null }) }, 'Retry'));
+        }, h('strong', null, `${this.props.viewName} failed`), h('pre', { style: { whiteSpace: 'pre-wrap', margin: '0.5rem 0' } }, String(err?.message ?? err)), hint ? h('p', { style: { margin: '0 0 0.5rem' } }, `hint: ${hint}`) : null, h('button', { onClick: () => this.setState({ error: null }) }, 'Retry'));
     }
 }
 // --- Host -------------------------------------------------------------------
@@ -120,6 +145,42 @@ function hostFor(cls) {
     hostCache.set(cls, host);
     return host;
 }
+// --- preact/debug resilience --------------------------------------------------
+// preact/hooks flushes a component's pending useEffects inside options.__r
+// when it re-renders before the async afterPaint pass. A pending effect that
+// calls render() runs a nested diff whose `diffed` clears preact/debug's
+// hooksAllowed flag — and the flag stays cleared when the component's own
+// render body resumes, so its next hook throws "Hook can only be invoked
+// from render methods" falsely. The flag itself is module-local and cannot
+// be repaired, so instead the guard's question is answered precisely:
+// function component types are wrapped so `currentRender` is the instance
+// executing its body, and the options.__h/_hook check tolerates a corrupt
+// flag only when the hook's component provably IS that instance.
+let currentRender = null;
+const wrappedTypes = new WeakMap();
+function isFunctionComponentType(t) {
+    return typeof t === 'function' && !(t.prototype && t.prototype.render);
+}
+function wrapFunctionComponent(type) {
+    let wrapped = wrappedTypes.get(type);
+    if (!wrapped) {
+        wrapped = function (props, ctx) {
+            const prev = currentRender;
+            currentRender = this;
+            try {
+                return type.call(this, props, ctx);
+            }
+            finally {
+                currentRender = prev;
+            }
+        };
+        // Statics (displayName, metadata stamps) resolve off the original type.
+        Object.setPrototypeOf(wrapped, type);
+        wrapped.displayName = type.displayName || type.name;
+        wrappedTypes.set(type, wrapped);
+    }
+    return wrapped;
+}
 let installed = false;
 // Install the vnode interceptor. Must run before any view class is rendered;
 // called on module load and again defensively from bootstrap().
@@ -127,11 +188,35 @@ export function installViewInterop() {
     if (installed)
         return;
     installed = true;
+    // preact/debug installs its hook guard on options.__h (dist build) or
+    // options._hook (source build). Component-type wrapping only engages when
+    // a guard exists to protect: production has no check that can corrupt.
+    // The guard must already be installed, so `import 'preact/debug'` has to
+    // precede framework imports (preset-vite injects it first).
+    const guardKeys = ['__h', '_hook'].filter((k) => typeof options[k] === 'function');
+    const debugLoaded = guardKeys.length > 0;
+    for (const key of guardKeys) {
+        const check = options[key];
+        options[key] = (comp, index, type) => {
+            try {
+                check(comp, index, type);
+            }
+            catch (err) {
+                if (!comp || comp !== currentRender)
+                    throw err;
+                // comp is executing its own render body: the call is legal, the
+                // guard's flag was cleared by a nested diffed inside options.__r.
+            }
+        };
+    }
     const prev = options.vnode;
     options.vnode = (vnode) => {
         const t = vnode.type;
         if (isView(t))
             vnode.type = hostFor(t);
+        else if (debugLoaded && isFunctionComponentType(t)) {
+            vnode.type = wrapFunctionComponent(t);
+        }
         prev?.(vnode);
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact-mvc/core",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Angular-inspired modules/DI/decorators + class-based JSX views rendered by Preact + signal reactivity",
   "type": "module",
   "sideEffects": false,