@farm.js/react 0.1.0-beta.4 → 0.1.0-beta.5

package/README.md

@@ -32,6 +32,19 @@ binding. The runtime uses direct subscription indexes rather than proxies or a c
 scan. Use `compiler: { reactivity: "static" }` to retain only the complete build-time dependency
 lists for comparison or diagnosis.
 
+Compiler output also selects its runtime capabilities at build time. A direct counter imports only
+the cell scheduler and direct-binding core; conditionals, keyed rows and LIS, nested host ranges,
+and component islands are retained only when a compiled component in that module needs them. Plain
+keyed rows omit the larger recursive-host and row-conditional extensions. This selection is
+automatic and does not add a configuration option or asynchronous runtime loading. The legacy
+`createCompiledComponent` export remains a complete compatibility entry for hand-authored
+definitions, while generated code uses the tree-shakable feature entry.
+
+The persisted production-size fixtures and regression gate live in
+[`RUNTIME_SIZE_RESULTS.md`](./RUNTIME_SIZE_RESULTS.md). The recorded direct-only runtime premium is
+73.6% smaller than the complete compatibility runtime premium; the feature-heavy keyed benchmark
+application removes 6,185 gzip bytes from its previous compiler-on build.
+
 For selective adoption, use annotation mode:
 
 ```ts

package/dist/compiler-runtime.cjs

@@ -1883,11 +1883,7 @@ function longestIncreasingSubsequencePositions(sequence) {
   }
   return positions;
 }
-function createKeyedRowsBlockComponent(owner) {
-  const rowHostScopeOwner = {
-    subscribe: () => () => {
-    }
-  };
+function createKeyedRowConditionalRuntime() {
   class FarmKeyedRowConditional extends React__default.default.Component {
     constructor() {
       super(...arguments);
@@ -1929,6 +1925,22 @@ function createKeyedRowsBlockComponent(owner) {
     }
   }
   FarmKeyedRowConditional.displayName = "FarmCompiledKeyedRowConditional";
+  return {
+    Component: FarmKeyedRowConditional,
+    readValues: readKeyedRowConditionalValues,
+    changed: keyedRowConditionalChanged
+  };
+}
+function createKeyedRowHostRuntime() {
+  const owner = {
+    subscribe: () => () => {
+    }
+  };
+  return {
+    mount: (element, descriptor, requestFallback) => mountCompilerHostTree(owner, element, descriptor, requestFallback)
+  };
+}
+function createKeyedRowsBlockComponent(owner, options = {}) {
   class FarmKeyedRowsBlock extends React__default.default.Component {
     constructor() {
       super(...arguments);
@@ -2001,7 +2013,9 @@ function createKeyedRowsBlockComponent(owner) {
       this.rowConditional = (item, index, conditionalId, render) => {
         if (this.state.fallback) return render(item, index);
         const key = keyedRowIdentity(this.currentProps.rowKey(item, index));
-        return React__default.default.createElement(FarmKeyedRowConditional, {
+        const Conditional = options.conditionals?.Component;
+        if (!Conditional) return render(item, index);
+        return React__default.default.createElement(Conditional, {
           key: `${key}:${conditionalId}`,
           owner: this.conditionalOwner,
           rowKey: key,
@@ -2095,12 +2109,10 @@ function createKeyedRowsBlockComponent(owner) {
     }
     mountRowHostScope(element, descriptor, props = this.currentProps) {
       if (!props.hostBlocks) return void 0;
-      return mountCompilerHostTree(
-        rowHostScopeOwner,
-        element,
-        descriptor,
-        this.requestHostScopeFallback
-      );
+      return options.hostBlocks?.mount(element, descriptor, this.requestHostScopeFallback) || null;
+    }
+    readConditionalValues(props, item, index) {
+      return options.conditionals?.readValues(props, item, index) || EMPTY_KEYED_ROW_CONDITIONAL_VALUES;
     }
     pruneEventHandlers(keys) {
       const active = new Set(keys);
@@ -2141,7 +2153,7 @@ function createKeyedRowsBlockComponent(owner) {
           values: this.hasReactOwnedRows() ? this.currentProps.bindings.map(() => UNSET_KEYED_ROW_BINDING) : readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
           item: rows.items[index],
           index,
-          conditionalValues: readKeyedRowConditionalValues(
+          conditionalValues: this.readConditionalValues(
             this.currentProps,
             rows.items[index],
             index
@@ -2253,13 +2265,13 @@ function createKeyedRowsBlockComponent(owner) {
           }
         }
         applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
-        const conditionalValues = readKeyedRowConditionalValues(
+        const conditionalValues = this.readConditionalValues(
           this.currentProps,
           rows.items[index],
           index
         );
         for (const [id, values] of conditionalValues) {
-          if (keyedRowConditionalChanged(existing.conditionalValues.get(id), values)) {
+          if (options.conditionals?.changed(existing.conditionalValues.get(id), values)) {
             conditionalChanges.push({ key, id, item: rows.items[index], index });
           }
         }
@@ -2296,13 +2308,13 @@ function createKeyedRowsBlockComponent(owner) {
           }
         }
         applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
-        const conditionalValues = readKeyedRowConditionalValues(
+        const conditionalValues = this.readConditionalValues(
           this.currentProps,
           rows.items[index],
           index
         );
         for (const [id, values] of conditionalValues) {
-          if (keyedRowConditionalChanged(existing.conditionalValues.get(id), values)) {
+          if (options.conditionals?.changed(existing.conditionalValues.get(id), values)) {
             conditionalChanges.push({ key, id, item: rows.items[index], index });
           }
         }
@@ -2386,13 +2398,13 @@ function createKeyedRowsBlockComponent(owner) {
             }
           }
           applyKeyedRowBindings(this.currentProps, existing, rows.items[index], index);
-          const conditionalValues = readKeyedRowConditionalValues(
+          const conditionalValues = this.readConditionalValues(
             this.currentProps,
             rows.items[index],
             index
           );
           for (const [id, values] of conditionalValues) {
-            if (keyedRowConditionalChanged(existing.conditionalValues.get(id), values)) {
+            if (options.conditionals?.changed(existing.conditionalValues.get(id), values)) {
               conditionalChanges.push({ key, id, item: rows.items[index], index });
             }
           }
@@ -2419,7 +2431,7 @@ function createKeyedRowsBlockComponent(owner) {
           values: readKeyedRowBindingValues(this.currentProps, rows.items[index], index),
           item: rows.items[index],
           index,
-          conditionalValues: readKeyedRowConditionalValues(
+          conditionalValues: this.readConditionalValues(
             this.currentProps,
             rows.items[index],
             index
@@ -2898,12 +2910,86 @@ function createComponentBlockComponent(owner) {
   FarmComponentBlock.displayName = "FarmCompiledComponentIsland";
   return FarmComponentBlock;
 }
-function createCompiledComponent(definition) {
+var conditionalRuntimeFeature = {
+  name: "conditional",
+  create: (owner) => ({
+    Conditional: createConditionalBlockComponent(owner)
+  })
+};
+var hostConditionalRuntimeFeature = {
+  name: "host-conditional",
+  create: (owner) => ({
+    HostConditional: createHostConditionalBlockComponent(owner)
+  })
+};
+var conditionalRangesRuntimeFeature = {
+  name: "conditional-ranges",
+  create: (owner) => ({
+    ConditionalRanges: createConditionalRangesBlockComponent(owner)
+  })
+};
+var keyedListRuntimeFeature = {
+  name: "keyed-list",
+  create: (owner) => ({
+    KeyedList: createKeyedListBlockComponent(owner)
+  })
+};
+var keyedRowsRuntimeFeature = {
+  name: "keyed-rows",
+  create: (owner) => ({
+    KeyedRows: createKeyedRowsBlockComponent(owner)
+  })
+};
+var keyedRowsConditionalRuntimeFeature = {
+  name: "keyed-rows:conditional",
+  create: (owner) => ({
+    KeyedRows: createKeyedRowsBlockComponent(owner, {
+      conditionals: createKeyedRowConditionalRuntime()
+    })
+  })
+};
+var keyedRowsHostRuntimeFeature = {
+  name: "keyed-rows:host",
+  create: (owner) => ({
+    KeyedRows: createKeyedRowsBlockComponent(owner, {
+      hostBlocks: createKeyedRowHostRuntime()
+    })
+  })
+};
+var keyedRowsCompleteRuntimeFeature = {
+  name: "keyed-rows:complete",
+  create: (owner) => ({
+    KeyedRows: createKeyedRowsBlockComponent(owner, {
+      conditionals: createKeyedRowConditionalRuntime(),
+      hostBlocks: createKeyedRowHostRuntime()
+    })
+  })
+};
+var keyedRangesRuntimeFeature = {
+  name: "keyed-ranges",
+  create: (owner) => ({
+    KeyedRanges: createKeyedRangesBlockComponent(owner)
+  })
+};
+var mixedRangesRuntimeFeature = {
+  name: "mixed-ranges",
+  create: (owner) => ({
+    MixedRanges: createMixedRangesBlockComponent(owner)
+  })
+};
+var componentRuntimeFeature = {
+  name: "component",
+  create: (owner) => ({
+    Component: createComponentBlockComponent(owner)
+  })
+};
+function createCompiledComponentWithFeatures(definition, runtimeFeatures) {
   const stateSignature = definition.stateSignature || String(definition.initialize.length);
+  const runtimeSignature = [...new Set(runtimeFeatures.map((feature) => feature.name))].sort().join(",");
   if (definition.hmrId) {
     const registry = getCompilerHmrRegistry();
     const existing = registry.get(definition.hmrId);
-    if (existing?.stateSignature === stateSignature) {
+    if (existing?.stateSignature === stateSignature && existing.runtimeSignature === runtimeSignature) {
       existing.definition.current = definition;
       existing.component.displayName = `FarmCompiled(${definition.displayName})`;
       for (const refresh of existing.refreshListeners) refresh();
@@ -2977,34 +3063,17 @@ function createCompiledComponent(definition) {
           }
         };
       });
-      this.blockRuntime = {
-        Conditional: createConditionalBlockComponent({
-          setRoot: (id, root) => this.setBlockRoot(id, root),
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
-        HostConditional: createHostConditionalBlockComponent({
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
-        ConditionalRanges: createConditionalRangesBlockComponent({
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
-        KeyedList: createKeyedListBlockComponent({
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
-        KeyedRows: createKeyedRowsBlockComponent({
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
-        KeyedRanges: createKeyedRangesBlockComponent({
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
-        MixedRanges: createMixedRangesBlockComponent({
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
-        Component: createComponentBlockComponent({
-          subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
-        }),
+      const featureOwner = {
+        setRoot: (id, root) => this.setBlockRoot(id, root),
+        subscribe: (id, refresh) => this.subscribeToBlock(id, refresh)
+      };
+      const blockRuntime = {
         target: (id) => this.bindingTarget(id)
       };
+      for (const feature of runtimeFeatures) {
+        Object.assign(blockRuntime, feature.create(featureOwner));
+      }
+      this.blockRuntime = blockRuntime;
     }
     usesHybridReactivity() {
       return definitionReference.current.reactivity === "hybrid";
@@ -3355,12 +3424,38 @@ function createCompiledComponent(definition) {
       component,
       definition: definitionReference,
       refreshListeners,
-      stateSignature
+      stateSignature,
+      runtimeSignature
     });
   }
   return component;
 }
+var COMPLETE_RUNTIME_FEATURES = [
+  conditionalRuntimeFeature,
+  hostConditionalRuntimeFeature,
+  conditionalRangesRuntimeFeature,
+  keyedListRuntimeFeature,
+  keyedRowsCompleteRuntimeFeature,
+  keyedRangesRuntimeFeature,
+  mixedRangesRuntimeFeature,
+  componentRuntimeFeature
+];
+function createCompiledComponent(definition) {
+  return createCompiledComponentWithFeatures(definition, COMPLETE_RUNTIME_FEATURES);
+}
 
+exports.componentRuntimeFeature = componentRuntimeFeature;
+exports.conditionalRangesRuntimeFeature = conditionalRangesRuntimeFeature;
+exports.conditionalRuntimeFeature = conditionalRuntimeFeature;
 exports.createCompiledComponent = createCompiledComponent;
+exports.createCompiledComponentWithFeatures = createCompiledComponentWithFeatures;
+exports.hostConditionalRuntimeFeature = hostConditionalRuntimeFeature;
+exports.keyedListRuntimeFeature = keyedListRuntimeFeature;
+exports.keyedRangesRuntimeFeature = keyedRangesRuntimeFeature;
+exports.keyedRowsCompleteRuntimeFeature = keyedRowsCompleteRuntimeFeature;
+exports.keyedRowsConditionalRuntimeFeature = keyedRowsConditionalRuntimeFeature;
+exports.keyedRowsHostRuntimeFeature = keyedRowsHostRuntimeFeature;
+exports.keyedRowsRuntimeFeature = keyedRowsRuntimeFeature;
+exports.mixedRangesRuntimeFeature = mixedRangesRuntimeFeature;
 //# sourceMappingURL=compiler-runtime.cjs.map
 //# sourceMappingURL=compiler-runtime.cjs.map