@farm.js/react 0.1.0-beta.0

package/dist/vite.mjs

@@ -0,0 +1,571 @@
+import { normalizePath } from 'vite';
+import { transformAsync, types, traverse } from '@babel/core';
+
+// src/vite.ts
+function isComponentName(name) {
+  return /^[A-Z]/.test(name);
+}
+function directiveValues(node) {
+  return (node.directives || []).map((directive) => directive.value.value);
+}
+function isUseStateCall(expression, useStateNames, reactNames) {
+  if (!types.isCallExpression(expression)) return false;
+  if (types.isIdentifier(expression.callee)) return useStateNames.has(expression.callee.name);
+  return types.isMemberExpression(expression.callee) && !expression.callee.computed && types.isIdentifier(expression.callee.object) && reactNames.has(expression.callee.object.name) && types.isIdentifier(expression.callee.property, { name: "useState" });
+}
+function cloneExpression(expression) {
+  return types.cloneNode(expression, true);
+}
+function expressionFile(expression) {
+  return types.file(types.program([types.expressionStatement(expression)]));
+}
+function collectStateDependencies(expression, statesByValue) {
+  const dependencies = /* @__PURE__ */ new Set();
+  const file = expressionFile(cloneExpression(expression));
+  traverse(file, {
+    ReferencedIdentifier(path) {
+      const state = statesByValue.get(path.node.name);
+      if (state && !path.scope.hasBinding(path.node.name)) dependencies.add(state.index);
+    }
+  });
+  return [...dependencies].sort((left, right) => left - right);
+}
+function referencesIdentifier(expression, name) {
+  let referenced = false;
+  traverse(expressionFile(cloneExpression(expression)), {
+    ReferencedIdentifier(path) {
+      if (path.node.name === name && !path.scope.hasBinding(name)) {
+        referenced = true;
+      }
+    }
+  });
+  return referenced;
+}
+function findContainingEvent(path) {
+  const attribute = path.findParent((parent) => parent.isJSXAttribute());
+  if (!attribute?.isJSXAttribute() || !types.isJSXIdentifier(attribute.node.name)) return null;
+  return /^on[A-Z]/.test(attribute.node.name.name) ? attribute : null;
+}
+function validateSetterUsage(root, statesBySetter) {
+  const file = expressionFile(types.cloneNode(root, true));
+  let reason;
+  traverse(file, {
+    ReferencedIdentifier(path) {
+      if (reason) return;
+      const state = statesBySetter.get(path.node.name);
+      if (!state || path.scope.hasBinding(path.node.name)) return;
+      const parent = path.parentPath;
+      if (!parent.isCallExpression() || parent.node.callee !== path.node || !findContainingEvent(parent)) {
+        reason = `${state.setterName} must be called inside a JSX event handler`;
+      }
+    }
+  });
+  return reason;
+}
+function rewriteStateAccess(expression, stateParameter, statesByValue, statesBySetter) {
+  const file = expressionFile(cloneExpression(expression));
+  traverse(file, {
+    CallExpression(path) {
+      const callee = path.get("callee");
+      if (!callee.isIdentifier() || callee.scope.hasBinding(callee.node.name)) return;
+      const state = statesBySetter.get(callee.node.name);
+      if (!state) return;
+      callee.replaceWith(
+        types.memberExpression(
+          types.memberExpression(types.cloneNode(stateParameter), types.numericLiteral(state.index), true),
+          types.identifier("set")
+        )
+      );
+    },
+    ReferencedIdentifier(path) {
+      const state = statesByValue.get(path.node.name);
+      if (!state || path.scope.hasBinding(path.node.name)) return;
+      path.replaceWith(
+        types.callExpression(
+          types.memberExpression(
+            types.memberExpression(types.cloneNode(stateParameter), types.numericLiteral(state.index), true),
+            types.identifier("get")
+          ),
+          []
+        )
+      );
+    }
+  });
+  return file.program.body[0].expression;
+}
+function cleanJsxText(value) {
+  const lines = value.replace(/\r/g, "").split("\n");
+  let result = "";
+  for (let index = 0; index < lines.length; index += 1) {
+    const lastNonEmptyLine = lines.slice(index + 1).every((line2) => line2.trim().length === 0);
+    let line = lines[index].replace(/\t/g, " ").replace(/ +/g, " ");
+    if (index > 0) line = line.replace(/^ /, "");
+    if (!lastNonEmptyLine) line = line.replace(/ $/, "");
+    if (line) result += line + (!lastNonEmptyLine ? " " : "");
+  }
+  return result;
+}
+function isTextExpression(expression) {
+  let supported = true;
+  traverse(expressionFile(cloneExpression(expression)), {
+    CallExpression(path) {
+      supported = false;
+      path.stop();
+    },
+    OptionalCallExpression(path) {
+      supported = false;
+      path.stop();
+    },
+    JSXElement(path) {
+      supported = false;
+      path.stop();
+    },
+    JSXFragment(path) {
+      supported = false;
+      path.stop();
+    },
+    ObjectExpression(path) {
+      supported = false;
+      path.stop();
+    },
+    Function(path) {
+      supported = false;
+      path.stop();
+    }
+  });
+  return supported;
+}
+function jsxAttributeName(attribute) {
+  return types.isJSXIdentifier(attribute.name) ? attribute.name.name : void 0;
+}
+function analyzeHostTree(root, statesByValue) {
+  const bindings = [];
+  const visit = (element, path) => {
+    const tag = element.openingElement.name;
+    if (!types.isJSXIdentifier(tag) || !/^[a-z]/.test(tag.name)) {
+      return "compiled trees currently support host elements only";
+    }
+    for (const attribute of element.openingElement.attributes) {
+      if (types.isJSXSpreadAttribute(attribute)) return "JSX attribute spreads are not supported yet";
+      const name = jsxAttributeName(attribute);
+      if (!name) return "namespaced JSX attributes are not supported yet";
+      if (name === "ref" || name === "dangerouslySetInnerHTML") {
+        return `${name} requires React ownership`;
+      }
+      if (!types.isJSXExpressionContainer(attribute.value) || types.isJSXEmptyExpression(attribute.value.expression)) {
+        continue;
+      }
+      const expression = attribute.value.expression;
+      const dependencies = collectStateDependencies(expression, statesByValue);
+      if (dependencies.length === 0 || /^on[A-Z]/.test(name)) continue;
+      if (name === "style" || name === "children" || name === "key") {
+        return `stateful ${name} bindings are not supported yet`;
+      }
+      bindings.push({
+        kind: "attribute",
+        path: [...path],
+        dependencies,
+        name,
+        value: cloneExpression(expression)
+      });
+    }
+    const nestedElements = element.children.filter(
+      (child) => types.isJSXElement(child)
+    );
+    const expressionChildren = element.children.filter(
+      (child) => types.isJSXExpressionContainer(child)
+    );
+    for (const child of expressionChildren) {
+      if (types.isJSXEmptyExpression(child.expression)) continue;
+      if (!isTextExpression(child.expression)) {
+        return "dynamic child structures require React reconciliation";
+      }
+    }
+    if (nestedElements.length === 0) {
+      const dependencies = /* @__PURE__ */ new Set();
+      const parts = [];
+      for (const child of element.children) {
+        if (types.isJSXText(child)) {
+          const text = cleanJsxText(child.value);
+          if (text) parts.push(types.stringLiteral(text));
+        } else if (types.isJSXExpressionContainer(child) && !types.isJSXEmptyExpression(child.expression)) {
+          collectStateDependencies(child.expression, statesByValue).forEach(
+            (dependency) => dependencies.add(dependency)
+          );
+          parts.push(cloneExpression(child.expression));
+        }
+      }
+      if (dependencies.size > 0) {
+        bindings.push({
+          kind: "text",
+          path: [...path],
+          dependencies: [...dependencies].sort((left, right) => left - right),
+          value: types.arrayExpression(parts)
+        });
+      }
+    } else {
+      for (const child of expressionChildren) {
+        if (!types.isJSXEmptyExpression(child.expression) && collectStateDependencies(child.expression, statesByValue).length > 0) {
+          return "mixed element and stateful text children are not supported yet";
+        }
+      }
+      let elementIndex = 0;
+      for (const child of element.children) {
+        if (!types.isJSXElement(child)) continue;
+        const reason2 = visit(child, [...path, elementIndex]);
+        if (reason2) return reason2;
+        elementIndex += 1;
+      }
+    }
+    return void 0;
+  };
+  const reason = visit(root, []);
+  return reason ? { reason } : { bindings };
+}
+function lazyInitialValue(expression) {
+  const value = types.identifier("_initial");
+  const initializer = expression ? cloneExpression(expression) : types.identifier("undefined");
+  return types.callExpression(
+    types.arrowFunctionExpression(
+      [],
+      types.blockStatement([
+        types.variableDeclaration("const", [types.variableDeclarator(value, initializer)]),
+        types.returnStatement(
+          types.conditionalExpression(
+            types.binaryExpression(
+              "===",
+              types.unaryExpression("typeof", types.cloneNode(value)),
+              types.stringLiteral("function")
+            ),
+            types.callExpression(types.cloneNode(value), []),
+            types.cloneNode(value)
+          )
+        )
+      ])
+    ),
+    []
+  );
+}
+function clonePropsParameter(path) {
+  const parameter = path.node.params[0];
+  return parameter && types.isIdentifier(parameter) ? types.cloneNode(parameter, true) : types.identifier("_props");
+}
+function bindingObject(binding, componentPath, stateParameter, statesByValue, statesBySetter) {
+  const properties = [
+    types.objectProperty(types.identifier("kind"), types.stringLiteral(binding.kind)),
+    types.objectProperty(
+      types.identifier("path"),
+      types.arrayExpression(binding.path.map((part) => types.numericLiteral(part)))
+    ),
+    types.objectProperty(
+      types.identifier("dependencies"),
+      types.arrayExpression(binding.dependencies.map((part) => types.numericLiteral(part)))
+    )
+  ];
+  if (binding.name)
+    properties.push(types.objectProperty(types.identifier("name"), types.stringLiteral(binding.name)));
+  properties.push(
+    types.objectProperty(
+      types.identifier("read"),
+      types.arrowFunctionExpression(
+        [clonePropsParameter(componentPath), types.cloneNode(stateParameter)],
+        rewriteStateAccess(binding.value, stateParameter, statesByValue, statesBySetter)
+      )
+    )
+  );
+  return types.objectExpression(properties);
+}
+function wrapperElement(definitionIdentifier, props) {
+  const name = types.jsxIdentifier(definitionIdentifier.name);
+  const attributes = props ? [types.jsxSpreadAttribute(types.cloneNode(props))] : [];
+  return types.jsxElement(types.jsxOpeningElement(name, attributes, true), null, [], true);
+}
+function compileCandidate(candidate, createComponentIdentifier, useStateNames, reactNames) {
+  const { path, name, statementPath } = candidate;
+  if (path.node.async || path.node.generator)
+    return "async and generator components are not supported";
+  if (path.node.typeParameters) return "generic components are not supported yet";
+  if (path.node.params.length > 1 || path.node.params[0] && !types.isIdentifier(path.node.params[0])) {
+    return "components must use zero parameters or one props identifier";
+  }
+  if (!types.isBlockStatement(path.node.body)) return "components must use a block body";
+  const states = [];
+  let returned;
+  for (const statement of path.node.body.body) {
+    if (types.isReturnStatement(statement)) {
+      if (returned) return "components must have one unconditional return";
+      returned = statement;
+      continue;
+    }
+    if (!types.isVariableDeclaration(statement) || statement.declarations.length !== 1) {
+      return "only top-level useState declarations and one return are supported in Group 1";
+    }
+    const declaration = statement.declarations[0];
+    if (statement.kind !== "const" || !types.isArrayPattern(declaration.id) || declaration.id.elements.length !== 2 || !types.isIdentifier(declaration.id.elements[0]) || !types.isIdentifier(declaration.id.elements[1]) || !isUseStateCall(declaration.init, useStateNames, reactNames) || declaration.init.arguments.length > 1 || declaration.init.arguments[0] && !types.isExpression(declaration.init.arguments[0])) {
+      return "only const [value, setValue] = useState(initial) declarations are supported";
+    }
+    states.push({
+      valueName: declaration.id.elements[0].name,
+      setterName: declaration.id.elements[1].name,
+      index: states.length,
+      initialValue: declaration.init.arguments[0]
+    });
+  }
+  if (states.length === 0) return "no local useState binding was found";
+  if (!returned?.argument || !types.isJSXElement(returned.argument)) {
+    return "the component must return one host JSX element";
+  }
+  const statesByValue = new Map(states.map((state) => [state.valueName, state]));
+  const statesBySetter = new Map(states.map((state) => [state.setterName, state]));
+  for (const state of states) {
+    if (state.initialValue && (collectStateDependencies(state.initialValue, statesByValue).length > 0 || [...statesBySetter].some(
+      ([setterName]) => referencesIdentifier(state.initialValue, setterName)
+    ))) {
+      return "useState initializers cannot reference another local state binding";
+    }
+  }
+  const setterReason = validateSetterUsage(returned.argument, statesBySetter);
+  if (setterReason) return setterReason;
+  const analysis = analyzeHostTree(returned.argument, statesByValue);
+  if (analysis.reason) return analysis.reason;
+  const stateParameter = path.scope.generateUidIdentifier("farmState");
+  const definitionIdentifier = path.scope.generateUidIdentifier(`${name}Compiled`);
+  const propsParameter = clonePropsParameter(path);
+  const rewrittenRoot = rewriteStateAccess(
+    returned.argument,
+    stateParameter,
+    statesByValue,
+    statesBySetter
+  );
+  const definition = types.callExpression(types.cloneNode(createComponentIdentifier), [
+    types.objectExpression([
+      types.objectProperty(types.identifier("displayName"), types.stringLiteral(name)),
+      types.objectProperty(
+        types.identifier("initialize"),
+        types.arrowFunctionExpression(
+          [types.cloneNode(propsParameter)],
+          types.arrayExpression(states.map((state) => lazyInitialValue(state.initialValue)))
+        )
+      ),
+      types.objectProperty(
+        types.identifier("render"),
+        types.arrowFunctionExpression(
+          [types.cloneNode(propsParameter), types.cloneNode(stateParameter)],
+          rewrittenRoot
+        )
+      ),
+      types.objectProperty(
+        types.identifier("bindings"),
+        types.arrayExpression(
+          (analysis.bindings || []).map(
+            (binding) => bindingObject(binding, path, stateParameter, statesByValue, statesBySetter)
+          )
+        )
+      )
+    ])
+  ]);
+  const originalProps = path.node.params[0];
+  path.get("body").replaceWith(
+    types.blockStatement([
+      types.returnStatement(
+        wrapperElement(
+          definitionIdentifier,
+          originalProps && types.isIdentifier(originalProps) ? originalProps : void 0
+        )
+      )
+    ])
+  );
+  statementPath.insertAfter(
+    types.variableDeclaration("const", [types.variableDeclarator(definitionIdentifier, definition)])
+  );
+  return void 0;
+}
+function collectCandidates(programPath) {
+  const candidates = [];
+  programPath.traverse({
+    FunctionDeclaration(path) {
+      if (!path.node.id || !isComponentName(path.node.id.name)) return;
+      const parent = path.parentPath;
+      if (!parent.isProgram() && !parent.isExportNamedDeclaration() && !parent.isExportDefaultDeclaration()) {
+        return;
+      }
+      candidates.push({
+        name: path.node.id.name,
+        path,
+        statementPath: parent.isProgram() ? path : parent
+      });
+    },
+    VariableDeclarator(path) {
+      if (!types.isIdentifier(path.node.id) || !isComponentName(path.node.id.name) || !types.isFunctionExpression(path.node.init) && !types.isArrowFunctionExpression(path.node.init)) {
+        return;
+      }
+      const declaration = path.parentPath;
+      const statement = declaration.parentPath;
+      if (!statement) return;
+      const topLevel = statement.isProgram() ? declaration : statement.isExportNamedDeclaration() && statement.parentPath.isProgram() ? statement : null;
+      if (!topLevel) return;
+      candidates.push({
+        name: path.node.id.name,
+        path: path.get("init"),
+        statementPath: topLevel
+      });
+    }
+  });
+  return candidates;
+}
+async function compileReactModule(code, id, options) {
+  const compiled = [];
+  const diagnostics = [];
+  const plugin = () => ({
+    name: "farm-react-aot",
+    visitor: {
+      Program(programPath) {
+        const moduleDirectives = new Set(directiveValues(programPath.node));
+        const useStateNames = /* @__PURE__ */ new Set();
+        const reactNames = /* @__PURE__ */ new Set();
+        for (const statement of programPath.node.body) {
+          if (!types.isImportDeclaration(statement) || statement.source.value !== "react") continue;
+          for (const specifier of statement.specifiers) {
+            if (types.isImportDefaultSpecifier(specifier) || types.isImportNamespaceSpecifier(specifier)) {
+              reactNames.add(specifier.local.name);
+            } else if (types.isImportSpecifier(specifier) && types.isIdentifier(specifier.imported, { name: "useState" })) {
+              useStateNames.add(specifier.local.name);
+            }
+          }
+        }
+        const candidates = collectCandidates(programPath);
+        const createComponentIdentifier = programPath.scope.generateUidIdentifier("createCompiledComponent");
+        for (const candidate of candidates) {
+          const functionDirectives = new Set(
+            types.isBlockStatement(candidate.path.node.body) ? directiveValues(candidate.path.node.body) : []
+          );
+          const explicitlySelected = moduleDirectives.has(options.directive) || functionDirectives.has(options.directive);
+          if (functionDirectives.has("use no compiler")) continue;
+          if (options.mode === "annotation" && !explicitlySelected) continue;
+          const reason = compileCandidate(
+            candidate,
+            createComponentIdentifier,
+            useStateNames,
+            reactNames
+          );
+          if (reason) {
+            diagnostics.push({
+              component: candidate.name,
+              reason,
+              selected: explicitlySelected
+            });
+          } else {
+            compiled.push(candidate.name);
+          }
+        }
+        if (compiled.length > 0) {
+          programPath.unshiftContainer(
+            "body",
+            types.importDeclaration(
+              [
+                types.importSpecifier(
+                  createComponentIdentifier,
+                  types.identifier("createCompiledComponent")
+                )
+              ],
+              types.stringLiteral("@farm.js/react/compiler-runtime")
+            )
+          );
+        }
+      }
+    }
+  });
+  const result = await transformAsync(code, {
+    filename: id,
+    sourceType: "module",
+    ast: false,
+    code: true,
+    sourceMaps: true,
+    sourceFileName: id,
+    configFile: false,
+    babelrc: false,
+    parserOpts: {
+      plugins: ["jsx", "typescript"]
+    },
+    generatorOpts: {
+      comments: true,
+      compact: false
+    },
+    plugins: [plugin]
+  });
+  return {
+    code: result?.code || code,
+    map: result?.map || null,
+    compiled,
+    diagnostics
+  };
+}
+
+// src/index.ts
+var DEFAULT_COMPILER_DIRECTIVE = "use compiler";
+function normalizeReactCompilerOptions(value) {
+  const options = value === true ? {} : value;
+  const mode = options.mode || "infer";
+  if (mode !== "infer" && mode !== "annotation") {
+    throw new TypeError(`Unknown React compiler mode: ${String(mode)}`);
+  }
+  if (options.directive !== void 0 && mode !== "annotation") {
+    throw new TypeError("The React compiler directive can only be configured in annotation mode.");
+  }
+  const directive = options.directive?.trim() || DEFAULT_COMPILER_DIRECTIVE;
+  const onUnsupported = options.onUnsupported || "fallback";
+  if (!["fallback", "warn", "error"].includes(onUnsupported)) {
+    throw new TypeError(`Unknown unsupported-component behavior: ${String(onUnsupported)}`);
+  }
+  return { mode, directive, onUnsupported };
+}
+
+// src/vite.ts
+function readCompilerOptions(rendererOptions) {
+  const experimental = rendererOptions?.experimental;
+  if (!experimental || typeof experimental !== "object") return false;
+  const compiler = experimental.compiler;
+  if (!compiler) return false;
+  if (compiler === true) return normalizeReactCompilerOptions(true);
+  if (typeof compiler !== "object") {
+    throw new TypeError(
+      "React experimental.compiler must be a boolean or compiler options object."
+    );
+  }
+  const normalized = compiler;
+  if ((normalized.mode === "infer" || normalized.mode === "annotation") && typeof normalized.directive === "string" && (normalized.onUnsupported === "fallback" || normalized.onUnsupported === "warn" || normalized.onUnsupported === "error")) {
+    return normalized;
+  }
+  return normalizeReactCompilerOptions(compiler);
+}
+function createFarmRendererPlugin(options = {}) {
+  const compilerOptions = readCompilerOptions(options.rendererOptions);
+  if (!compilerOptions) return [];
+  let projectRoot = "";
+  return [
+    {
+      name: "farm:react-aot-compiler",
+      enforce: "pre",
+      configResolved(config) {
+        projectRoot = normalizePath(config.root).replace(/\/$/, "");
+      },
+      async transform(code, id) {
+        const cleanId = normalizePath(id.split("?", 1)[0]);
+        if (!/\.[jt]sx$/.test(cleanId) || cleanId.includes("/node_modules/") || projectRoot && !cleanId.startsWith(`${projectRoot}/`))
+          return null;
+        const result = await compileReactModule(code, cleanId, compilerOptions);
+        for (const diagnostic of result.diagnostics) {
+          const message = `[react-compiler] ${diagnostic.component}: ${diagnostic.reason}; using React.`;
+          if (compilerOptions.onUnsupported === "error") this.error(message);
+          if (compilerOptions.onUnsupported === "warn" || diagnostic.selected) this.warn(message);
+        }
+        if (result.compiled.length === 0) return null;
+        return { code: result.code, map: result.map };
+      }
+    }
+  ];
+}
+
+export { createFarmRendererPlugin };
+//# sourceMappingURL=vite.mjs.map
+//# sourceMappingURL=vite.mjs.map