j-templates 8.0.0 → 8.0.2

package/Node/component.d.ts

@@ -17,7 +17,7 @@ export declare class Component<D = void, T = void, E = {}> {
     /**
      * Returns the component's virtual node injector.
      */
-    get Injector(): import("../Utils/injector").Injector;
+    get Injector(): import("../Utils").Injector;
     /**
      * Indicates whether the component has been destroyed.
      */

package/Node/vNode.js

@@ -17,9 +17,7 @@ var vNode;
             definition,
             type: definition.type,
             injector: definition.componentFactory
-                ? injector_1.Injector.Scope(injector_1.Injector.Current(), function () {
-                    return new injector_1.Injector();
-                })
+                ? new injector_1.Injector()
                 : (injector_1.Injector.Current() ?? new injector_1.Injector()),
             parentNode: null,
             node: definition.node ?? null,
@@ -134,7 +132,7 @@ function InitNode(vnode, parentNode) {
             nodeConfig_1.NodeConfig.attributeAssignment(node, attrs);
     }
     if (componentFactory) {
-        vnode.component = componentFactory(vnode);
+        vnode.component = injector_1.Injector.Scope(vnode.injector, componentFactory, vnode);
         vnode.component.Bound();
         Children(vnode, ComponentChildren.bind(vnode.component));
     }

package/SYNTAX_PRIMER.md

@@ -594,7 +594,7 @@ Template() {
 
 > ⚠️ **Falsy edge case:** the falsy-collapse rule applies broadly — **`0`, `""`, and `NaN` also collapse to `[]`**, not just `false`/`null`/`undefined`. Only *truthy* non-array values are wrapped as `[value]`.
 
-**Also accepts** `Promise<T>` and `Promise<T[]>` for async data. While a Promise is pending, the scope evaluates to `null` (falsy), so the element renders nothing until resolved — there is no built-in placeholder; implement one yourself if needed.
+**Also accepts** `Promise<T>` and `Promise<T[]>` for async data. While a Promise is pending, the scope evaluates to `null` (falsy), so the element renders nothing until resolved — there is no built-in placeholder; implement one yourself if needed. While a newer promise is pending, the last resolved value is kept.
 
 The `false`/`true` behavior makes `data:` a clean conditional rendering mechanism. **The child function is invoked with the truthy value as its data argument** — e.g. `data: () => this.isLoading` calls the child with `true` when loading. It renders its child once when true and nothing when false, with its own isolated reactive scope.
 
@@ -979,6 +979,8 @@ get userData(): User | null { return getUserSync(this.Data.userId); }
 
 **Pattern 3 (@ComputedAsync):** Getter must be synchronous. Returns default value initially, then computed value with same reference via ApplyDiff.
 
+Shared async-scope behavior — typing, pending/old-value semantics, batching, and `scope()` composition — is covered in [Async Scopes](#async-scopes).
+
 ### State Location
 
 | State Type | Location | API |
@@ -995,6 +997,46 @@ get userData(): User | null { return getUserSync(this.Data.userId); }
 
 ---
 
+## Async Scopes
+
+Any function that supplies a scope value can be `async` — a `@Scope()` getter, a `props` or `data` function, or a `scope()`/`gate()`/`peek()`/`mapped()` callback. Services use the same mechanism through `ObservableScope.Create(async)` (see [Async Patterns](#async-patterns)).
+
+**Typing unwraps the resolved value.** The helper signatures declare `() => T | Promise<T>`, so TypeScript infers the resolved value, not the promise:
+
+```typescript
+scope(async () => (await fetch(url)).text());  // typed string, not Promise<string>
+```
+
+The same unwrap applies to config functions — `FunctionOr<T>` for `props`/`attrs`/`on`, and the `Promise<Array<T>> | Promise<T>` union for `data:`. **The `async` keyword is required:** `IsAsync` detects it via `Symbol.toStringTag`. A plain function that merely *returns* a promise (`() => fetch(url)`) is treated as a synchronous scope whose value is the promise itself — it is never resolved (see Traps #17).
+
+**Pending behavior.** An async scope renders nothing until its first result arrives: the initial value is `null`, so async `data:` collapses to no children and an async `props:` function applies nothing (the assignment closures skip null inputs). After the first result, the scope **keeps the last result while a new one is pending** — the value is replaced only when the promise resolves, and a resolution that arrives after a newer re-run has started is discarded.
+
+```typescript
+// Valid: nothing is applied to the element until the promise resolves.
+div({ props: async () => ({ innerHTML: await getMarkup() }) });
+```
+
+**Batching.** Async scopes are greedy — a dependency change marks the scope dirty and queues the re-run on the microtask queue (batched), instead of re-evaluating and propagating synchronously. This is the `greedy: true` behavior noted in Async Patterns.
+
+**Composition with `scope()`.** `scope()` can compose an async value inside a synchronous scope. The inner scope registers as a dependency of the enclosing watch context, so the **outer scope re-runs when the inner one resolves**:
+
+```typescript
+Template() {
+  return div({
+    props: () => ({
+      innerText: scope(async () => (await fetch(`/api/summary?open=${this.openCount}`)).text()),
+      className: "summary-container",
+    }),
+  });
+}
+```
+
+`scope()` must be called inside a watch context — a `@Scope()` getter, a children function, or a `props:`/`data:` function (see Traps #11).
+
+**Dependency capture.** Only reactive reads before the first `await` are tracked — reads after it happen outside the watch context and don't re-run the scope (see Traps #2). Read every reactive value the async scope depends on before the first `await`.
+
+---
+
 ## Scope Selection Decision Tree
 
 Need derived data?

package/Store/Tree/observableNode.js

@@ -374,7 +374,7 @@ var ObservableNode;
             // Replacing rootNode
             const rootPatch = diffResult[0].value;
             const rootType = (0, json_2.JsonType)(root);
-            const rootPatchType = (0, json_2.JsonType)(root);
+            const rootPatchType = (0, json_2.JsonType)(rootPatch);
             if (rootType !== rootPatchType)
                 throw new Error("Unable to change type of Root ObservableNode: " + rootType);
             switch (rootType) {

package/Utils/decorators.js

@@ -846,7 +846,7 @@ function WatchDecorator(target, propertyKey, descriptor, scopeFunction) {
             return scopeFunction(instance);
         }
         const scope = observableScope_1.ObservableScope.Gated(scopeFunctionWrapper);
-        const propertyMap = GetScopeMapForInstance(this);
+        const propertyMap = GetScopeMapForInstance(instance);
         propertyMap[propertyKey] = [scope, undefined];
         observableScope_1.ObservableScope.Watch(scope, function (scope) {
             instance[propertyKey](observableScope_1.ObservableScope.Value(scope));

package/Utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./decorators";
 export * from "./animation";
+export { Injector } from "./injector";
 export { IDestroyable } from "./utils.types";

package/Utils/index.js

@@ -14,5 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Injector = void 0;
 __exportStar(require("./decorators"), exports);
 __exportStar(require("./animation"), exports);
+var injector_1 = require("./injector");
+Object.defineProperty(exports, "Injector", { enumerable: true, get: function () { return injector_1.Injector; } });

package/index.d.ts

@@ -1,2 +1,3 @@
 export { Component } from './Node/component';
 export { InlineScope as scope, GateScope as gate, PeekScope as peek, MappedScope as mapped } from './Store/Tree/observableScope';
+export { vNode } from './Node/vNode.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "j-templates",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "description": "j-templates",
   "license": "MIT",
   "repository": "https://github.com/TypesInCode/jTemplates",