babel-plugin-minibum-jsx 1.1.0

package/README

@@ -0,0 +1,9 @@
+Minibum JSX
+===========
+
+Minibum JSX is a lightweight JSX plugin for the Minibum ecosystem. It enables
+JSX syntax in application source files and transforms JSX elements into the
+runtime calls required to create and compose UI components.
+
+The plugin is intended to keep component markup concise while fitting into a
+small, fast build pipeline.

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "babel-plugin-minibum-jsx",
+  "version": "1.1.0",
+  "description": "A Babel plugin that transforms JSX into Minibum.",
+  "main": "src/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": "./src/index.js",
+    "./types": "./types/index.d.ts"
+  },
+  "type": "module",
+  "files": [
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "test": "vitest",
+    "prepublishOnly": "npm test -- --run"
+  },
+  "keywords": [
+    "babel-plugin",
+    "babel",
+    "jsx",
+    "minibum"
+  ],
+  "peerDependencies": {
+    "@babel/core": ">=7"
+  },
+  "devDependencies": {
+    "@babel/core": "^8.0.5",
+    "@babel/plugin-syntax-jsx": "^8.0.1",
+    "@types/convert-source-map": "^2.0.3",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.1"
+  }
+}

package/src/index.js

@@ -0,0 +1,331 @@
+/**
+ * babel-plugin-minibum-jsx
+ *
+ * Transforms classic JSX into MiniBum's fine-grained reactive API.
+ *
+ * Standard elements:
+ *   <div className="c">{count}</div>
+ *   → E.div({ className: "c", children: count })
+ *
+ * Control-flow:
+ *   <For each={items}>{(item) => <li>{item}</li>}</For>
+ *   → E.list(items, (item) => E.li({ children: item }))
+ *
+ *   <Show when={visible}><p>Hi</p></Show>
+ *   → E.cond(visible, () => E.p({ children: "Hi" }))
+ *
+ *   <Show when={visible} fallback={<p>Loading</p>}>
+ *     <p>Ready</p>
+ *   </Show>
+ *   → E.cond(visible, () => E.p({ children: "Ready" }), () => E.p({ children: "Loading" }))
+ *
+ * Also supports the aliases <List> and <Cond>.
+ */
+
+"use strict";
+import syntaxJsx from "@babel/plugin-syntax-jsx";
+
+export default function minibumJsx({ types: t }) {
+  // ------------------------------------------------------------------
+  // Helpers
+  // ------------------------------------------------------------------
+
+  function isComponent(name) {
+    return typeof name === "string" && /^[A-Z]/.test(name);
+  }
+
+  function getName(node) {
+    if (t.isJSXIdentifier(node)) return node.name;
+    return null;
+  }
+
+  function convertAttrValue(value) {
+    if (value == null) return t.booleanLiteral(true);
+    if (t.isJSXExpressionContainer(value)) return value.expression;
+    return value;
+  }
+
+  function buildAttributes(attrs) {
+    if (!attrs || attrs.length === 0) return null;
+    const props = [];
+    for (const attr of attrs) {
+      if (t.isJSXSpreadAttribute(attr)) {
+        props.push(t.spreadElement(attr.argument));
+        continue;
+      }
+      const key = attr.name.name;
+      props.push(
+        t.objectProperty(
+          t.isValidIdentifier(key) ? t.identifier(key) : t.stringLiteral(key),
+          convertAttrValue(attr.value)
+        )
+      );
+    }
+    return t.objectExpression(props);
+  }
+
+  function convertChild(child) {
+    if (t.isJSXText(child)) {
+      const text = child.value.replace(/\s+/g, " ").trim();
+      return text ? t.stringLiteral(text) : null;
+    }
+    if (t.isJSXExpressionContainer(child)) {
+      return t.isJSXEmptyExpression(child.expression)
+        ? null
+        : child.expression;
+    }
+    if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+      return transformNode(child);
+    }
+    if (t.isJSXSpreadChild(child)) {
+      return child.expression;
+    }
+    return child;
+  }
+
+  function buildChildren(children) {
+    const out = [];
+    for (const c of children) {
+      const v = convertChild(c);
+      if (v != null) out.push(v);
+    }
+    return out;
+  }
+
+  function buildConfig(attrsExpr, childrenArr) {
+    const props = [];
+    if (attrsExpr) {
+      if (t.isObjectExpression(attrsExpr)) {
+        props.push(...attrsExpr.properties);
+      } else {
+        props.push(t.spreadElement(attrsExpr));
+      }
+    }
+    if (childrenArr.length === 1) {
+      props.push(t.objectProperty(t.identifier("children"), childrenArr[0]));
+    } else if (childrenArr.length > 1) {
+      props.push(
+        t.objectProperty(
+          t.identifier("children"),
+          t.arrayExpression(childrenArr)
+        )
+      );
+    }
+    return t.objectExpression(props);
+  }
+
+  /** Extract a named prop from an attributes ObjectExpression (or null). */
+  function getProp(attrsExpr, propName) {
+    if (!attrsExpr || !t.isObjectExpression(attrsExpr)) return null;
+    for (const p of attrsExpr.properties) {
+      if (
+        t.isObjectProperty(p) &&
+        ((t.isIdentifier(p.key) && p.key.name === propName) ||
+          (t.isStringLiteral(p.key) && p.key.value === propName))
+      ) {
+        return p.value;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Wrap an expression in an arrow function if it is not already a function.
+   * Used so that E.cond / E.list always receive a factory.
+   */
+  function ensureFunction(expr) {
+    if (
+      t.isArrowFunctionExpression(expr) ||
+      t.isFunctionExpression(expr)
+    ) {
+      return expr;
+    }
+    return t.arrowFunctionExpression([], expr);
+  }
+
+  // ------------------------------------------------------------------
+  // Control-flow transforms
+  // ------------------------------------------------------------------
+
+  /**
+   * <For each={sig}>{(item) => ...}</For>
+   * <List each={sig}>{(item) => ...}</List>
+   * → E.list(sig, mapFn)
+   */
+  function transformFor(opening, children) {
+    const attrs = buildAttributes(opening.attributes);
+    const eachExpr = getProp(attrs, "each");
+
+    if (!eachExpr) {
+      throw new Error(
+        `[minibum-jsx] <For>/<List> requires an "each" prop (the signal or array).`
+      );
+    }
+
+    const kids = buildChildren(children);
+    if (kids.length === 0) {
+      throw new Error(
+        `[minibum-jsx] <For>/<List> requires a map function as its child.`
+      );
+    }
+
+    let mapFn = kids[0];
+    if (kids.length > 1 || !t.isFunction(mapFn)) {
+      mapFn = t.arrowFunctionExpression(
+        [],
+        kids.length === 1 ? kids[0] : t.arrayExpression(kids)
+      );
+    }
+
+    return t.callExpression(
+      t.memberExpression(t.identifier("E"), t.identifier("list")),
+      [eachExpr, mapFn]
+    );
+  }
+  
+
+  /**
+   * <Show when={sig}>...</Show>
+   * <Cond when={sig}>...</Cond>
+   * → E.cond(sig, () => content [, () => fallback])
+   */
+function transformShow(opening, children) {
+  const attrs = buildAttributes(opening.attributes);
+  const whenExpr = getProp(attrs, "when");
+
+  if (!whenExpr) {
+    throw new Error(
+      `[minibum-jsx] <Show>/<Cond> requires a "when" prop (the condition signal).`
+    );
+  }
+
+  const fallbackExpr = getProp(attrs, "fallback");
+  const kids = buildChildren(children);
+
+  let thenExpr;
+
+  if (kids.length === 0) {
+    thenExpr = t.nullLiteral();
+  } else if (kids.length === 1) {
+    thenExpr = kids[0];
+  } else {
+    thenExpr = t.arrayExpression(kids);
+  }
+
+  let body = thenExpr;
+
+  if (fallbackExpr) {
+    body = t.conditionalExpression(
+      t.identifier("v"),
+      thenExpr,
+      fallbackExpr
+    );
+  } else {
+    body = t.logicalExpression(
+      "&&",
+      t.identifier("v"),
+      thenExpr
+    );
+  }
+
+  const callback = t.arrowFunctionExpression(
+    [t.identifier("v")],
+    body
+  );
+
+  return t.callExpression(
+    t.memberExpression(
+      t.identifier("E"),
+      t.identifier("cond")
+    ),
+    [whenExpr, callback]
+  );
+}
+
+  // ------------------------------------------------------------------
+  // Main transform
+  // ------------------------------------------------------------------
+
+  function transformNode(node) {
+    // Fragment
+    if (t.isJSXFragment(node)) {
+      const kids = buildChildren(node.children);
+      return t.callExpression(
+        t.memberExpression(t.identifier("E"), t.identifier("fragment")),
+        kids
+      );
+    }
+
+    const opening = node.openingElement;
+    const name = getName(opening.name);
+
+    // Control-flow components
+    if (name === "For" || name === "List") {
+      return transformFor(opening, node.children);
+    }
+    if (name === "Show" || name === "Cond") {
+      return transformShow(opening, node.children);
+    }
+
+    // Normal element / component
+    const attrs = buildAttributes(opening.attributes);
+    const kids = buildChildren(node.children);
+    const config = buildConfig(attrs, kids);
+
+    // Member expression <E.something>
+    if (t.isJSXMemberExpression(opening.name)) {
+      const callee = opening.name;
+      return t.callExpression(
+        t.memberExpression(
+          t.identifier(callee.object.name),
+          t.identifier(callee.property.name)
+        ),
+        [config]
+      );
+    }
+
+    // Component (PascalCase)
+    if (isComponent(name)) {
+      return t.callExpression(t.identifier(name), [config]);
+    }
+
+    // HTML / SVG tag
+    return t.callExpression(
+      t.memberExpression(t.identifier("E"), t.identifier(name)),
+      [config]
+    );
+  }
+
+  // ------------------------------------------------------------------
+  // Visitor
+  // ------------------------------------------------------------------
+
+  return {
+    name: "babel-plugin-minibum-jsx",
+    // This removes the need for users to manually add @babel/plugin-syntax-jsx to their configs.
+     inherits: syntaxJsx, 
+    visitor: {
+      Program: {
+        enter(path) {
+          // JSX output uses E.*; provide the runtime automatically unless
+          // the user already declares/imports E.
+          if (!path.scope.hasBinding("E")) {
+            path.unshiftContainer(
+              "body",
+              t.importDeclaration(
+                [t.importDefaultSpecifier(t.identifier("E"))],
+                t.stringLiteral("minibum")
+              )
+            );
+          }
+        },
+      },
+      JSXElement(path) {
+        path.replaceWith(transformNode(path.node));
+      },
+      JSXFragment(path) {
+        path.replaceWith(transformNode(path.node));
+      },
+    },
+  };
+};

package/types/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * babel-plugin-minibum-jsx
+ *
+ * Transforms classic JSX into MiniBum's fine-grained reactive API.
+ *
+ * Standard elements:
+ *   <div className="c">{count}</div>
+ *   → E.div({ className: "c", children: count })
+ *
+ * Control-flow:
+ *   <For each={items}>{(item) => <li>{item}</li>}</For>
+ *   → E.list(items, (item) => E.li({ children: item }))
+ *
+ *   <Show when={visible}><p>Hi</p></Show>
+ *   → E.cond(visible, () => E.p({ children: "Hi" }))
+ *
+ *   <Show when={visible} fallback={<p>Loading</p>}>
+ *     <p>Ready</p>
+ *   </Show>
+ *   → E.cond(visible, () => E.p({ children: "Ready" }), () => E.p({ children: "Loading" }))
+ *
+ * Also supports the aliases <List> and <Cond>.
+ */
+export default function minibumJsx({ types: t }: {
+    types: any;
+}): {
+    name: string;
+    inherits: (api: import("@babel/core").PluginAPI, options: object, dirname: string) => import("@babel/core").PluginObject<object & import("@babel/core").PluginPass<object>>;
+    visitor: {
+        Program: {
+            enter(path: any): void;
+        };
+        JSXElement(path: any): void;
+        JSXFragment(path: any): void;
+    };
+};