graftjs 0.1.0 → 0.4.0

package/README.md

@@ -20,7 +20,7 @@ Compose React components by wiring named parameters together.
 No prop drilling. No Context. No useState. No useEffect. No manual subscriptions.
 
 ```
-npm install graft
+npm install graftjs
 ```
 
 ## Why
@@ -43,7 +43,7 @@ A **source** is a component with no inputs that pushes values over time — a We
 
 **`instantiate`** creates an isolated copy of a subgraph. It takes a template — a function that builds and returns a component — and returns a new component. Each subscription gets its own fresh instance, so any `state()` or `source()` calls inside the template produce independent cells. This is how you get local state.
 
-**`compose({ into, from, key })`** wires `from`'s output into `into`'s input named `key`. Returns a new component whose inputs are `into`'s remaining inputs plus `from`'s inputs.
+**`compose({ into, from, key })`** wires `from`'s output into `into`'s input named `key`. **`compose({ into, from: { k1: A, k2: B } })`** wires multiple inputs at once. Both return a new component whose inputs are the remaining unsatisfied ones.
 
 When you're done composing, **`toReact`** converts the result into a regular `React.FC` (requires the output to be `ReactElement`).
 
@@ -130,14 +130,12 @@ const PriceCard = component({
 
 // --- Wiring ---
 
-// PriceFeed → FormatPrice → PriceCard.displayPrice
 const LivePrice = compose({ into: FormatPrice, from: PriceFeed, key: "price" });
-const WithPrice = compose({ into: PriceCard, from: LivePrice, key: "displayPrice" });
-
-// CoinName (async) → Header → PriceCard.header
 const NamedHeader = compose({ into: Header, from: CoinName, key: "name" });
+
+// Wire both into PriceCard at once
 const App = toReact(
-  compose({ into: WithPrice, from: NamedHeader, key: "header" }),
+  compose({ into: PriceCard, from: { displayPrice: LivePrice, header: NamedHeader } }),
 );
 
 // One prop left — everything else is wired internally.
@@ -187,18 +185,24 @@ const FetchAge = component({
 
 The input schema is the source of truth for both TypeScript types and runtime validation. The output schema declares the type of value the component produces. Use `View` for components that return JSX.
 
-### `compose({ into, from, key })`
+### `compose({ into, from, key })` / `compose({ into, from: { ... } })`
 
 Wire `from`'s output into `into`'s input named `key`. Returns a new component.
 
 ```tsx
 import { compose } from "graft";
 
-// UserCard needs { name, email, age }
-// FetchAge needs { userId } and produces a number
-// After composing on "age":
-//   → new component needs { name, email, userId }
+// Single-wire: one output into one input
 const UserCardWithAge = compose({ into: UserCard, from: FetchAge, key: "age" });
+// UserCard needs { name, email, age }, FetchAge needs { userId }
+// → new component needs { name, email, userId }
+
+// Multi-wire: wire several inputs at once
+const FullCard = compose({
+  into: UserCard,
+  from: { age: FetchAge, email: FetchEmail },
+});
+// → new component needs { name, userId }
 ```
 
 The key insight: `"age"` disappears from the inputs because it's now satisfied internally. `"userId"` appears because FetchAge needs it and nobody provides it yet.
@@ -318,9 +322,8 @@ const Form = component({
   ),
 });
 
-const WithName = compose({ into: Form, from: NameField, key: "name" });
 const App = toReact(
-  compose({ into: WithName, from: EmailField, key: "email" }),
+  compose({ into: Form, from: { name: NameField, email: EmailField } }),
 );
 
 // Each field maintains its own text value independently.
@@ -449,20 +452,20 @@ const ExtractEmail = component({
 
 // --- Wiring ---
 
-const WithPostCount = compose({ into: ProfilePage, from: PostCount, key: "postCount" });
-// Inputs: { name, email, avatarUrl, userId }
-
-const WithAvatar = compose({ into: WithPostCount, from: Avatar, key: "avatarUrl" });
-// Inputs: { name, userId, email }
-
-const WithName = compose({ into: WithAvatar, from: ExtractName, key: "name" });
+const WithUserData = compose({
+  into: ProfilePage,
+  from: {
+    postCount: PostCount,
+    avatarUrl: Avatar,
+    name: ExtractName,
+    email: ExtractEmail,
+  },
+});
 // Inputs: { userId, email, userInfo }
 
-const WithEmail = compose({ into: WithName, from: ExtractEmail, key: "email" });
-// Inputs: { userId, userInfo }
-
-const WithUserInfo = compose({ into: WithEmail, from: UserInfo, key: "userInfo" });
-// Inputs: { userId }
+const WithUserInfo = compose({ into: WithUserData, from: UserInfo, key: "userInfo" });
+// Inputs: { userId, email }
+// (email is needed by Avatar directly and by UserInfo → ExtractEmail)
 
 const ProfilePageReact = toReact(WithUserInfo);
 
@@ -552,6 +555,14 @@ This means:
 
 Reference equality is intentional. Two different objects with identical content (`{ x: 1 } !== { x: 1 }`) are *not* deduped — this matches React's behavior and avoids the cost and surprises of deep comparison.
 
+## No unnecessary re-renders
+
+In React, when a parent re-renders, all its children re-render too — unless you manually opt out with `memo`, `useMemo`, `useCallback`, etc. A state change at the top of the tree cascades through every child, even ones that don't use that state. Preventing unnecessary renders is a constant tax on the developer.
+
+Graft doesn't have this problem. A value change only propagates along the explicit `compose()` edges. If source A feeds into component X, and source B feeds into component Y, then A changing has zero effect on Y — there's no shared tree to cascade through. Each component only re-runs when its actual inputs change.
+
+This isn't an optimization. It's a structural property of the architecture — graft simply doesn't have a mechanism to produce unnecessary re-renders in the first place.
+
 ## How it works
 
 Graft is a runtime library, not a compiler plugin. `compose()` is a regular function call that:
@@ -566,7 +577,7 @@ The type-level generics ensure TypeScript knows exactly what inputs the composed
 ## Install
 
 ```
-npm install graft
+npm install graftjs
 ```
 
 Requires React 18+ as a peer dependency. Uses [zod v4](https://zod.dev) (`zod/v4` import) for schemas.

package/dist/compose.d.ts

@@ -2,15 +2,15 @@ import React, { type ReactElement } from "react";
 import { z } from "zod/v4";
 import { type GraftComponent } from "./types.js";
 /**
- * compose({ into, from, key }):
- *   - into: a component with inputs SA that produces OA
- *   - from: a component with inputs SB that produces OB
- *   - key: an input name of `into` whose type matches OB
- *   - Result: a component whose inputs are SA minus key, plus SB,
- *     and whose output is OA
+ * compose({ into, from, key }) — single-wire form:
+ *   Wires `from`'s output into `into`'s input named `key`.
  *
- * If either `from` or `into` is async, the composed run is async.
- * `from`'s output feeds into `into[key]`, remaining params bubble up.
+ * compose({ into, from: { k1: A, k2: B, ... } }) — multi-wire form:
+ *   Wires multiple components into `into` at once. Each key in `from`
+ *   names an input of `into`, and its value is the component that provides it.
+ *   Equivalent to chaining single-wire compose calls.
+ *
+ * In both forms, unsatisfied inputs bubble up as the composed component's props.
  *
  * subscribe() propagates reactivity: subscribes to `from`, and whenever
  * `from` emits, re-subscribes to `into` with the new value, forwarding
@@ -20,6 +20,10 @@ import { type GraftComponent } from "./types.js";
  * it passes the sentinel directly to the outer callback without calling
  * `into`'s run/subscribe.
  */
+export declare function compose<SA extends z.ZodObject<z.ZodRawShape>, OA>({ into, from }: {
+    into: GraftComponent<SA, OA>;
+    from: Record<string, GraftComponent<z.ZodObject<z.ZodRawShape>, unknown>>;
+}): GraftComponent<z.ZodObject<z.ZodRawShape>, OA>;
 export declare function compose<SA extends z.ZodObject<z.ZodRawShape>, SB extends z.ZodObject<z.ZodRawShape>, K extends string & keyof z.infer<SA>, OA, OB>({ into, from, key }: {
     into: GraftComponent<SA, OA>;
     from: GraftComponent<SB, OB>;

package/dist/compose.js

@@ -28,26 +28,23 @@ function splitProps(parsed, into, from, key) {
     };
     return { fromInput, buildIntoInput };
 }
-/**
- * compose({ into, from, key }):
- *   - into: a component with inputs SA that produces OA
- *   - from: a component with inputs SB that produces OB
- *   - key: an input name of `into` whose type matches OB
- *   - Result: a component whose inputs are SA minus key, plus SB,
- *     and whose output is OA
- *
- * If either `from` or `into` is async, the composed run is async.
- * `from`'s output feeds into `into[key]`, remaining params bubble up.
- *
- * subscribe() propagates reactivity: subscribes to `from`, and whenever
- * `from` emits, re-subscribes to `into` with the new value, forwarding
- * `into`'s emissions to the outer callback.
- *
- * If `from` emits GraftLoading or GraftError, compose short-circuits —
- * it passes the sentinel directly to the outer callback without calling
- * `into`'s run/subscribe.
- */
+// Implementation
 export function compose({ into, from, key }) {
+    // Multi-wire form: from is a Record<string, GraftComponent>
+    if (!key && typeof from === "object" && from !== null && from._tag !== "graft-component") {
+        const entries = Object.entries(from);
+        if (entries.length === 0)
+            return into;
+        let result = into;
+        for (const [k, provider] of entries) {
+            result = composeSingle(result, provider, k);
+        }
+        return result;
+    }
+    // Single-wire form
+    return composeSingle(into, from, key);
+}
+function composeSingle(into, from, key) {
     // Build the new schema: into's shape minus key, plus from's shape
     const intoShape = { ...into.schema.shape };
     delete intoShape[key];
@@ -58,7 +55,8 @@ export function compose({ into, from, key }) {
         const { fromInput, buildIntoInput } = splitProps(parsed, into, from, key);
         const fromOutput = from.run(fromInput);
         const runInto = (resolvedFromOutput) => {
-            return into.run(buildIntoInput(resolvedFromOutput));
+            const validated = from.outputSchema.parse(resolvedFromOutput);
+            return into.run(buildIntoInput(validated));
         };
         if (isPromise(fromOutput)) {
             return fromOutput.then((v) => runInto(v));
@@ -90,8 +88,10 @@ export function compose({ into, from, key }) {
                 cb(fromValue);
                 return;
             }
-            // Subscribe to into with the new from value
-            intoCleanup = into.subscribe(buildIntoInput(fromValue), (intoValue) => {
+            // Validate from's output at the boundary
+            const validated = from.outputSchema.parse(fromValue);
+            // Subscribe to into with the validated from value
+            intoCleanup = into.subscribe(buildIntoInput(validated), (intoValue) => {
                 if (!disposed)
                     cb(intoValue);
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graftjs",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "Compose React components by wiring named parameters — type-safe, no prop drilling, no hooks",
   "type": "module",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "build": "tsc",
-    "test": "npx tsx --test tests/*.test.tsx",
+    "test": "npx tsx --test --test-force-exit tests/*.test.tsx",
     "prepublishOnly": "tsc"
   },
   "repository": {