mobx-mantle 0.6.1 → 0.7.0

package/dist/index.cjs

@@ -60,6 +60,9 @@ function withInjectionScope(resolve, construct) {
 function captureServiceScope(owner) {
   scopes.set(owner, _nullishCoalesce(constructingScope, () => ( { resolve: globalConfig.resolveService, values: /* @__PURE__ */ new WeakSet() })));
 }
+function getServiceResolver(owner) {
+  return _optionalChain([scopes, 'access', _2 => _2.get, 'call', _3 => _3(owner), 'optionalAccess', _4 => _4.resolve]);
+}
 function resolveService(owner, token) {
   return resolveInScope(scopes.get(owner), token);
 }
@@ -70,7 +73,7 @@ function inject(token) {
   return resolveInScope(constructingScope, token);
 }
 function resolveInScope(scope, token) {
-  if (!_optionalChain([scope, 'optionalAccess', _2 => _2.resolve])) throw new Error("[mobx-mantle] Service injection requires configure({ resolveService }), a ServiceProvider, or withInjectionScope() during construction.");
+  if (!_optionalChain([scope, 'optionalAccess', _5 => _5.resolve])) throw new Error("[mobx-mantle] Service injection requires configure({ resolveService }), a ServiceProvider, or withInjectionScope() during construction.");
   const value = scope.resolve(token);
   if ((typeof value !== "object" || value === null) && typeof value !== "function") {
     throw new Error("[mobx-mantle] Services must be objects or functions; wrap primitive configuration in an object.");
@@ -79,7 +82,7 @@ function resolveInScope(scope, token) {
   return value;
 }
 function isServiceValue(owner, value) {
-  return _nullishCoalesce(_optionalChain([scopes, 'access', _3 => _3.get, 'call', _4 => _4(owner), 'optionalAccess', _5 => _5.values, 'access', _6 => _6.has, 'call', _7 => _7(value)]), () => ( false));
+  return _nullishCoalesce(_optionalChain([scopes, 'access', _6 => _6.get, 'call', _7 => _7(owner), 'optionalAccess', _8 => _8.values, 'access', _9 => _9.has, 'call', _10 => _10(value)]), () => ( false));
 }
 function withOwnerServiceScope(owner, construct) {
   const scope = scopes.get(owner);
@@ -113,7 +116,7 @@ function isModel(model, type) {
 
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? _react.useLayoutEffect : _react.useEffect;
 var uncommittedReactionRegistry = typeof FinalizationRegistry !== "undefined" ? new FinalizationRegistry((adm) => {
-  _optionalChain([adm, 'access', _8 => _8.reaction, 'optionalAccess', _9 => _9.dispose, 'call', _10 => _10()]);
+  _optionalChain([adm, 'access', _11 => _11.reaction, 'optionalAccess', _12 => _12.dispose, 'call', _13 => _13()]);
   adm.reaction = null;
 }) : void 0;
 if (process.env.NODE_ENV !== "production" && !uncommittedReactionRegistry) {
@@ -122,10 +125,11 @@ if (process.env.NODE_ENV !== "production" && !uncommittedReactionRegistry) {
   );
 }
 var isServer = typeof window === "undefined";
+var trackedComponents = /* @__PURE__ */ new WeakSet();
 function createReaction(adm) {
   adm.reaction = new (0, _mobx.Reaction)(`mantle-observer(${adm.name})`, () => {
     adm.stateVersion = /* @__PURE__ */ Symbol();
-    _optionalChain([adm, 'access', _11 => _11.onStoreChange, 'optionalCall', _12 => _12()]);
+    _optionalChain([adm, 'access', _14 => _14.onStoreChange, 'optionalCall', _15 => _15()]);
   });
   if (adm.holder) {
     adm.holder.current = adm.reaction;
@@ -144,7 +148,7 @@ function useMantleObserver(render, name, holder) {
       name,
       holder,
       subscribe(onStoreChange) {
-        _optionalChain([uncommittedReactionRegistry, 'optionalAccess', _13 => _13.unregister, 'call', _14 => _14(adm2)]);
+        _optionalChain([uncommittedReactionRegistry, 'optionalAccess', _16 => _16.unregister, 'call', _17 => _17(adm2)]);
         adm2.onStoreChange = onStoreChange;
         if (!adm2.reaction) {
           createReaction(adm2);
@@ -153,7 +157,7 @@ function useMantleObserver(render, name, holder) {
         }
         return () => {
           adm2.onStoreChange = null;
-          _optionalChain([adm2, 'access', _15 => _15.reaction, 'optionalAccess', _16 => _16.dispose, 'call', _17 => _17()]);
+          _optionalChain([adm2, 'access', _18 => _18.reaction, 'optionalAccess', _19 => _19.dispose, 'call', _20 => _20()]);
           adm2.reaction = null;
           if (adm2.holder) {
             adm2.holder.current = null;
@@ -170,7 +174,7 @@ function useMantleObserver(render, name, holder) {
   adm.holder = holder;
   if (!adm.reaction) {
     createReaction(adm);
-    _optionalChain([uncommittedReactionRegistry, 'optionalAccess', _18 => _18.register, 'call', _19 => _19(admRef, adm, adm)]);
+    _optionalChain([uncommittedReactionRegistry, 'optionalAccess', _21 => _21.register, 'call', _22 => _22(admRef, adm, adm)]);
   }
   _react.useSyncExternalStore.call(void 0, adm.subscribe, adm.getSnapshot, adm.getSnapshot);
   let result;
@@ -193,7 +197,9 @@ function observer(fc) {
   const name = fc.displayName || fc.name || "observed";
   const Observed = (props) => useMantleObserver(() => fc(props), name);
   Observed.displayName = `observer(${name})`;
-  return _react.memo.call(void 0, Observed);
+  const Memoized = _react.memo.call(void 0, Observed);
+  trackedComponents.add(Memoized);
+  return Memoized;
 }
 
 // src/decorators.ts
@@ -213,7 +219,7 @@ function annotation(value, kind) {
       map = key.metadata[ANNOTATIONS];
       name = key.name;
     } else {
-      if (typeof _target === "function" || kind === "method" && typeof _optionalChain([descriptor, 'optionalAccess', _20 => _20.value]) !== "function" || kind === "getter" && !_optionalChain([descriptor, 'optionalAccess', _21 => _21.get]) || kind === "field" && descriptor) {
+      if (typeof _target === "function" || kind === "method" && typeof _optionalChain([descriptor, 'optionalAccess', _23 => _23.value]) !== "function" || kind === "getter" && !_optionalChain([descriptor, 'optionalAccess', _24 => _24.get]) || kind === "field" && descriptor) {
         throw new Error(`[mobx-mantle] This decorator requires a public instance ${kind}.`);
       }
       map = _nullishCoalesce(legacy.get(_target), () => ( /* @__PURE__ */ Object.create(null)));
@@ -302,7 +308,7 @@ function registerReactive(host, create) {
   host._reactiveSpecs.push(spec);
   return () => {
     spec.stopped = true;
-    _optionalChain([spec, 'access', _22 => _22.dispose, 'optionalCall', _23 => _23()]);
+    _optionalChain([spec, 'access', _25 => _25.dispose, 'optionalCall', _26 => _26()]);
   };
 }
 function activateSpecs(host) {
@@ -461,7 +467,7 @@ var Behavior = class {
    * ```
    */
   watch(source, callback, options) {
-    const expr = toWatchExpression(source, _optionalChain([options, 'optionalAccess', _24 => _24.fireImmediately]), this.constructor.name);
+    const expr = toWatchExpression(source, _optionalChain([options, 'optionalAccess', _27 => _27.fireImmediately]), this.constructor.name);
     return registerReactive(this, () => {
       const dispose = _mobx.reaction.call(void 0, 
         expr,
@@ -473,8 +479,8 @@ var Behavior = class {
           }
         },
         {
-          delay: _optionalChain([options, 'optionalAccess', _25 => _25.delay]),
-          fireImmediately: _optionalChain([options, 'optionalAccess', _26 => _26.fireImmediately])
+          delay: _optionalChain([options, 'optionalAccess', _28 => _28.delay]),
+          fireImmediately: _optionalChain([options, 'optionalAccess', _29 => _29.fireImmediately])
         }
       );
       return this._addCleanup(dispose);
@@ -506,7 +512,7 @@ var Behavior = class {
       let cleanup;
       const dispose = _mobx.autorun.call(void 0, 
         () => {
-          _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _27 => _27()]));
+          _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _30 => _30()]));
           cleanup = void 0;
           try {
             const result = fn();
@@ -517,10 +523,10 @@ var Behavior = class {
             reportError(e, { phase: "effect", name: this.constructor.name, isBehavior: true });
           }
         },
-        { delay: _optionalChain([options, 'optionalAccess', _28 => _28.delay]) }
+        { delay: _optionalChain([options, 'optionalAccess', _31 => _31.delay]) }
       );
       return this._addCleanup(() => {
-        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _29 => _29()]));
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _32 => _32()]));
         dispose();
       });
     });
@@ -643,7 +649,7 @@ function createBehavior(Def, options) {
         }
       }
       this._pendingSyncs = null;
-      const autoObservable = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _30 => _30.autoObservable]), () => ( globalConfig.autoObservable));
+      const autoObservable = _nullishCoalesce(_optionalChain([options, 'optionalAccess', _33 => _33.autoObservable]), () => ( globalConfig.autoObservable));
       const annotations = getAnnotations(this);
       if (annotations) {
         _mobx.makeObservable.call(void 0, this, annotations);
@@ -706,7 +712,7 @@ function createBehavior(Def, options) {
 }
 function isBehavior(value) {
   if (value === null || typeof value !== "object") return false;
-  return _optionalChain([value, 'access', _31 => _31.constructor, 'optionalAccess', _32 => _32[BEHAVIOR_MARKER]]) === true;
+  return _optionalChain([value, 'access', _34 => _34.constructor, 'optionalAccess', _35 => _35[BEHAVIOR_MARKER]]) === true;
 }
 function childBehaviors(inst) {
   return Array.isArray(inst._behaviors) ? inst._behaviors : [];
@@ -752,8 +758,8 @@ function unmountBehavior(behavior, visited = /* @__PURE__ */ new WeakSet()) {
   const inst = behavior.instance;
   if (visited.has(inst)) return;
   visited.add(inst);
-  _mobx.runInAction.call(void 0, () => _optionalChain([behavior, 'access', _33 => _33.layoutCleanup, 'optionalCall', _34 => _34()]));
-  _mobx.runInAction.call(void 0, () => _optionalChain([behavior, 'access', _35 => _35.cleanup, 'optionalCall', _36 => _36()]));
+  _mobx.runInAction.call(void 0, () => _optionalChain([behavior, 'access', _36 => _36.layoutCleanup, 'optionalCall', _37 => _37()]));
+  _mobx.runInAction.call(void 0, () => _optionalChain([behavior, 'access', _38 => _38.cleanup, 'optionalCall', _39 => _39()]));
   if ("onUnmount" in inst && typeof inst.onUnmount === "function") {
     try {
       _mobx.runInAction.call(void 0, () => inst.onUnmount());
@@ -798,6 +804,18 @@ function warnUncollectedBehaviors(host, hostName, entries, visited = /* @__PURE_
 var componentRefs = /* @__PURE__ */ new WeakSet();
 var ComponentParentContext = _react2.default.createContext(void 0);
 var componentParents = /* @__PURE__ */ new WeakMap();
+var ownerScopes = /* @__PURE__ */ new WeakMap();
+function ownerScope(owner) {
+  let scope = ownerScopes.get(owner);
+  if (!scope) {
+    scope = { handle: { current: owner }, resolver: getServiceResolver(owner), substitutions: void 0 };
+    ownerScopes.set(owner, scope);
+  }
+  return scope;
+}
+function withRef(props, ref) {
+  return ref == null ? props : { ...props, ref };
+}
 var activeComponentConstruction;
 function constructComponent(ComponentClass, props, parentHandle) {
   const previousScope = activeComponentConstruction;
@@ -846,7 +864,7 @@ var PropsBox = class {
     this._atom = _mobx.createAtom.call(void 0, name);
   }
   get() {
-    const own = _optionalChain([this, 'access', _37 => _37._renderReaction, 'optionalAccess', _38 => _38.current]);
+    const own = _optionalChain([this, 'access', _40 => _40._renderReaction, 'optionalAccess', _41 => _41.current]);
     if (!own || _mobx._getGlobalState.call(void 0, ).trackingDerivation !== own) {
       this._atom.reportObserved();
     }
@@ -885,7 +903,7 @@ var Component = class {
   }
   /** Return the immediate ancestor in the live Mantle view tree. */
   getParent() {
-    return _optionalChain([componentParents, 'access', _39 => _39.get, 'call', _40 => _40(this), 'optionalAccess', _41 => _41.current]);
+    return _optionalChain([componentParents, 'access', _42 => _42.get, 'call', _43 => _43(this), 'optionalAccess', _44 => _44.current]);
   }
   /** Find the nearest parent with the supplied logical model identity. */
   findParent(type) {
@@ -918,6 +936,34 @@ var Component = class {
     componentRefs.add(r);
     return r;
   }
+  /**
+   * A tracked view of this instance, for handing to code you don't control
+   * (a table's row renderer, an error boundary's fallback, a map popup).
+   * Created once, so its identity is stable. Re-renders on its own when the
+   * state it reads changes. Forwards refs. Carries this model's context, so
+   * `findParent()` and services resolve inside it even when a library renders
+   * it in its own React root.
+   *
+   * @example
+   * ```tsx
+   * row = this.view((props: RowProps) => (
+   *   <tr {...props} className={props.id === this.activeId ? 'active' : ''} />
+   * ));
+   * ```
+   */
+  view(render) {
+    const owner = this;
+    const name = `${owner.constructor.name}.${render.name || "view"}`;
+    const View = _react.forwardRef.call(void 0, (props, ref) => {
+      const scope = ownerScope(owner);
+      const rendered = useMantleObserver(() => render(withRef(props, ref)), name);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComponentParentContext.Provider, { value: scope.handle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ServiceContext.Provider, { value: scope.resolver, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModelContext.Provider, { value: scope.substitutions, children: rendered }) }) });
+    });
+    View.displayName = name;
+    const Memoized = _react.memo.call(void 0, View);
+    trackedComponents.add(Memoized);
+    return Memoized;
+  }
   /**
    * Register a cleanup function to run automatically on unmount.
    * Returns a function that can be called for early cleanup.
@@ -979,7 +1025,7 @@ var Component = class {
    * ```
    */
   watch(source, callback, options) {
-    const expr = toWatchExpression(source, _optionalChain([options, 'optionalAccess', _42 => _42.fireImmediately]), this.constructor.name);
+    const expr = toWatchExpression(source, _optionalChain([options, 'optionalAccess', _45 => _45.fireImmediately]), this.constructor.name);
     return registerReactive(this, () => {
       const dispose = _mobx.reaction.call(void 0, 
         expr,
@@ -991,8 +1037,8 @@ var Component = class {
           }
         },
         {
-          delay: _optionalChain([options, 'optionalAccess', _43 => _43.delay]),
-          fireImmediately: _optionalChain([options, 'optionalAccess', _44 => _44.fireImmediately])
+          delay: _optionalChain([options, 'optionalAccess', _46 => _46.delay]),
+          fireImmediately: _optionalChain([options, 'optionalAccess', _47 => _47.fireImmediately])
         }
       );
       return this._addCleanup(dispose);
@@ -1037,7 +1083,7 @@ var Component = class {
       let cleanup;
       const dispose = _mobx.autorun.call(void 0, 
         () => {
-          _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _45 => _45()]));
+          _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _48 => _48()]));
           cleanup = void 0;
           try {
             const result = fn();
@@ -1048,10 +1094,10 @@ var Component = class {
             reportError(e, { phase: "effect", name: this.constructor.name, isBehavior: false });
           }
         },
-        { delay: _optionalChain([options, 'optionalAccess', _46 => _46.delay]) }
+        { delay: _optionalChain([options, 'optionalAccess', _49 => _49.delay]) }
       );
       return this._addCleanup(() => {
-        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _47 => _47()]));
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _50 => _50()]));
         dispose();
       });
     });
@@ -1108,6 +1154,7 @@ var BASE_EXCLUDES = /* @__PURE__ */ new Set([
   "onUnmount",
   "render",
   "ref",
+  "view",
   "addCleanup",
   "_addCleanup",
   "watch",
@@ -1140,7 +1187,7 @@ function makeComponentObservable(instance, autoBind) {
     if (BASE_EXCLUDES.has(key)) continue;
     if (key in annotations) continue;
     const value = instance[key];
-    if (typeof value === "function" || isServiceValue(instance, value)) continue;
+    if (typeof value === "function" || isServiceValue(instance, value) || trackedComponents.has(value)) continue;
     if (isBehavior(value)) {
       annotations[key] = _mobx.observable.ref;
       continue;
@@ -1205,14 +1252,15 @@ function createComponent(ComponentClass, templateOrOptions) {
     }
     if (!vmRef.current) {
       applyMobxActionPolicy();
-      const substitution = _optionalChain([substitutions, 'optionalAccess', _48 => _48.get, 'call', _49 => _49(ComponentClass)]);
+      const substitution = _optionalChain([substitutions, 'optionalAccess', _51 => _51.get, 'call', _52 => _52(ComponentClass)]);
       if (substitution && !substitution.template && !template) throw new Error("[mobx-mantle] A substituted integrated model requires an explicit test template.");
       const instance = withInjectionScope(resolver, () => substitution ? constructComponent(SubstituteComponent, props, parentHandle) : constructComponent(ComponentClass, props, parentHandle));
-      substitutedTemplate.current = _optionalChain([substitution, 'optionalAccess', _50 => _50.template]);
+      substitutedTemplate.current = _optionalChain([substitution, 'optionalAccess', _53 => _53.template]);
       setModelIdentity(instance, ComponentClass);
       if (substitution) installSubstituteState(instance, substitution.state());
       instance.forwardRef = ref;
       instance._propsBox._renderReaction = renderReactionRef.current;
+      ownerScopes.set(instance, { handle: componentHandle, resolver: getServiceResolver(instance), substitutions });
       if (!substitution) instance._collectBehaviors();
       const decoratorAnnotations = getAnnotations(instance);
       if (substitution) {
@@ -1238,12 +1286,12 @@ function createComponent(ComponentClass, templateOrOptions) {
         ownKeys: () => Reflect.ownKeys(instance.props),
         getOwnPropertyDescriptor: (_, key) => Reflect.getOwnPropertyDescriptor(instance.props, key)
       });
-      withOwnerServiceScope(instance, () => _mobx.runInAction.call(void 0, () => _optionalChain([instance, 'access', _51 => _51.onCreate, 'optionalCall', _52 => _52(reactiveProps)])));
+      withOwnerServiceScope(instance, () => _mobx.runInAction.call(void 0, () => _optionalChain([instance, 'access', _54 => _54.onCreate, 'optionalCall', _55 => _55(reactiveProps)])));
       if (process.env.NODE_ENV !== "production" && autoObservable && !decoratorAnnotations && !substitution) {
         for (const key of Object.keys(instance)) {
           if (BASE_EXCLUDES.has(key) || key.startsWith("_")) continue;
           const value = instance[key];
-          if (typeof value === "function" || isServiceValue(instance, value)) continue;
+          if (typeof value === "function" || isServiceValue(instance, value) || trackedComponents.has(value)) continue;
           if (!_mobx.isObservableProp.call(void 0, instance, key)) {
             console.warn(
               `[mobx-mantle] ${ComponentClass.name}.${key} was first assigned in onCreate() and is not reactive. Declare it as a class field so it can be made observable.`
@@ -1281,7 +1329,7 @@ function createComponent(ComponentClass, templateOrOptions) {
       vm._layoutMountBehaviors();
       let cleanup;
       try {
-        const result = _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _53 => _53.onLayoutMount, 'optionalCall', _54 => _54()]));
+        const result = _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _56 => _56.onLayoutMount, 'optionalCall', _57 => _57()]));
         if (process.env.NODE_ENV !== "production" && result instanceof Promise) {
           console.error(
             `[mobx-mantle] ${ComponentClass.name}.onLayoutMount() returned a Promise. Lifecycle methods must be synchronous. Use a sync onLayoutMount that calls an async method instead.`
@@ -1292,14 +1340,14 @@ function createComponent(ComponentClass, templateOrOptions) {
         reportError(e, { phase: "onLayoutMount", name: ComponentClass.name, isBehavior: false });
       }
       return () => {
-        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _55 => _55()]));
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _58 => _58()]));
       };
     }, [vm]);
     _react.useEffect.call(void 0, () => {
       vm._mountBehaviors();
       let cleanup;
       try {
-        const result = _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _56 => _56.onMount, 'optionalCall', _57 => _57()]));
+        const result = _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _59 => _59.onMount, 'optionalCall', _60 => _60()]));
         if (process.env.NODE_ENV !== "production" && result instanceof Promise) {
           console.error(
             `[mobx-mantle] ${ComponentClass.name}.onMount() returned a Promise. Lifecycle methods must be synchronous. Use a sync onMount that calls an async method instead.`
@@ -1313,9 +1361,9 @@ function createComponent(ComponentClass, templateOrOptions) {
         warnUncollectedBehaviors(vm, ComponentClass.name, vm._behaviors);
       }
       return () => {
-        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _58 => _58()]));
+        _mobx.runInAction.call(void 0, () => _optionalChain([cleanup, 'optionalCall', _61 => _61()]));
         try {
-          _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _59 => _59.onUnmount, 'optionalCall', _60 => _60()]));
+          _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _62 => _62.onUnmount, 'optionalCall', _63 => _63()]));
         } catch (e) {
           reportError(e, { phase: "onUnmount", name: ComponentClass.name, isBehavior: false });
         }
@@ -1326,7 +1374,7 @@ function createComponent(ComponentClass, templateOrOptions) {
     }, [vm]);
     _react.useEffect.call(void 0, () => {
       try {
-        _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _61 => _61.onUpdate, 'optionalCall', _62 => _62()]));
+        _mobx.runInAction.call(void 0, () => _optionalChain([vm, 'access', _64 => _64.onUpdate, 'optionalCall', _65 => _65()]));
       } catch (e) {
         reportError(e, { phase: "onUpdate", name: ComponentClass.name, isBehavior: false });
       }
@@ -1348,6 +1396,24 @@ function createComponent(ComponentClass, templateOrOptions) {
 function createForwardRef(ComponentClass, templateOrOptions) {
   return createComponent(ComponentClass, templateOrOptions);
 }
+function createView(ModelClass, template) {
+  const name = `${ModelClass.name}.${template.name || "view"}`;
+  const View = _react.forwardRef.call(void 0, (props, ref) => {
+    let vm = _optionalChain([_react.useContext.call(void 0, ComponentParentContext), 'optionalAccess', _66 => _66.current]);
+    while (vm && !isModel(vm, ModelClass)) vm = vm.getParent();
+    if (!vm) {
+      throw new Error(
+        `[mobx-mantle] createView(${ModelClass.name}): no ${ModelClass.name} is mounted above this view.`
+      );
+    }
+    const model = vm;
+    return useMantleObserver(() => template(withRef({ ...props, vm: model }, ref)), name);
+  });
+  View.displayName = name;
+  const Memoized = _react.memo.call(void 0, View);
+  trackedComponents.add(Memoized);
+  return Memoized;
+}
 
 // src/useBehavior.ts
 
@@ -1419,10 +1485,10 @@ function shared(store, key, options = {}) {
   const fields = options.fields ? [...options.fields] : ownDataFields(store);
   const storage = options.persist === false ? null : safeStorage();
   const channel = typeof BroadcastChannel === "function" ? new BroadcastChannel(`mantle-shared:${key}`) : null;
-  _optionalChain([channel, 'optionalAccess', _63 => _63.unref, 'optionalCall', _64 => _64()]);
+  _optionalChain([channel, 'optionalAccess', _67 => _67.unref, 'optionalCall', _68 => _68()]);
   let stored = null;
   try {
-    stored = _nullishCoalesce(_optionalChain([storage, 'optionalAccess', _65 => _65.getItem, 'call', _66 => _66(key)]), () => ( null));
+    stored = _nullishCoalesce(_optionalChain([storage, 'optionalAccess', _69 => _69.getItem, 'call', _70 => _70(key)]), () => ( null));
   } catch (e5) {
     stored = null;
   }
@@ -1434,10 +1500,10 @@ function shared(store, key, options = {}) {
       if (json === current) return;
       current = json;
       try {
-        _optionalChain([storage, 'optionalAccess', _67 => _67.setItem, 'call', _68 => _68(key, json)]);
+        _optionalChain([storage, 'optionalAccess', _71 => _71.setItem, 'call', _72 => _72(key, json)]);
       } catch (e6) {
       }
-      _optionalChain([channel, 'optionalAccess', _69 => _69.postMessage, 'call', _70 => _70(json)]);
+      _optionalChain([channel, 'optionalAccess', _73 => _73.postMessage, 'call', _74 => _74(json)]);
     }
   );
   const receive = (json) => {
@@ -1451,13 +1517,13 @@ function shared(store, key, options = {}) {
   const onStorage = (event) => {
     if (event.key === key && event.newValue !== null) receive(event.newValue);
   };
-  _optionalChain([channel, 'optionalAccess', _71 => _71.addEventListener, 'call', _72 => _72("message", onMessage)]);
+  _optionalChain([channel, 'optionalAccess', _75 => _75.addEventListener, 'call', _76 => _76("message", onMessage)]);
   window.addEventListener("storage", onStorage);
   registry.set(store, {
     dispose() {
       stopPublish();
-      _optionalChain([channel, 'optionalAccess', _73 => _73.removeEventListener, 'call', _74 => _74("message", onMessage)]);
-      _optionalChain([channel, 'optionalAccess', _75 => _75.close, 'call', _76 => _76()]);
+      _optionalChain([channel, 'optionalAccess', _77 => _77.removeEventListener, 'call', _78 => _78("message", onMessage)]);
+      _optionalChain([channel, 'optionalAccess', _79 => _79.close, 'call', _80 => _80()]);
       window.removeEventListener("storage", onStorage);
       registry.delete(store);
     }
@@ -1465,7 +1531,7 @@ function shared(store, key, options = {}) {
   return store;
 }
 function unshare(store) {
-  _optionalChain([registry, 'access', _77 => _77.get, 'call', _78 => _78(store), 'optionalAccess', _79 => _79.dispose, 'call', _80 => _80()]);
+  _optionalChain([registry, 'access', _81 => _81.get, 'call', _82 => _82(store), 'optionalAccess', _83 => _83.dispose, 'call', _84 => _84()]);
 }
 function shareStores(stores, options = {}) {
   const { prefix = "shared", ...rest } = options;
@@ -1497,5 +1563,6 @@ function shareStores(stores, options = {}) {
 
 
 
-exports.Behavior = Behavior; exports.Component = Component; exports.ModelProvider = ModelProvider; exports.ServiceProvider = ServiceProvider; exports.ViewModel = Component; exports.action = action2; exports.computed = computed2; exports.configure = configure; exports.createBehavior = createBehavior; exports.createComponent = createComponent; exports.createForwardRef = createForwardRef; exports.createServiceToken = createServiceToken; exports.inject = inject; exports.isModel = isModel; exports.observable = observable2; exports.observer = observer; exports.shareStores = shareStores; exports.shared = shared; exports.toValue = _chunkWNF647U6cjs.toValue; exports.unshare = unshare; exports.useBehavior = useBehavior; exports.withInjectionScope = withInjectionScope;
+
+exports.Behavior = Behavior; exports.Component = Component; exports.ModelProvider = ModelProvider; exports.ServiceProvider = ServiceProvider; exports.ViewModel = Component; exports.action = action2; exports.computed = computed2; exports.configure = configure; exports.createBehavior = createBehavior; exports.createComponent = createComponent; exports.createForwardRef = createForwardRef; exports.createServiceToken = createServiceToken; exports.createView = createView; exports.inject = inject; exports.isModel = isModel; exports.observable = observable2; exports.observer = observer; exports.shareStores = shareStores; exports.shared = shared; exports.toValue = _chunkWNF647U6cjs.toValue; exports.unshare = unshare; exports.useBehavior = useBehavior; exports.withInjectionScope = withInjectionScope;
 //# sourceMappingURL=index.cjs.map