jskelet 0.5.5 → 0.6.0

package/src/migrate/transform/jsx-to-component.mjs

@@ -0,0 +1,302 @@
+/**
+ * Presentational React bileşeni → `views/components/*.js` HTML-string fonksiyon.
+ */
+import { t } from "../babel.mjs";
+import { parseSource } from "../parse.mjs";
+import { exprToSource } from "./expr-source.mjs";
+
+/**
+ * @typedef {{ status: 'ok' | 'partial' | 'skipped', notes: string[], name: string | null, code: string | null }} ComponentResult
+ */
+
+/**
+ * @param {string} code
+ * @param {string} filename
+ * @returns {ComponentResult}
+ */
+export function transformComponent(code, filename) {
+  /** @type {ComponentResult} */
+  const result = { status: "ok", notes: [], name: null, code: null };
+
+  if (/["']use client["']/.test(code) || /\buse(State|Effect|Memo|Callback|Ref|Context)\s*\(/.test(code)) {
+    result.status = "skipped";
+    result.notes.push("client / hooks — use island transform");
+    return result;
+  }
+
+  let ast;
+  try {
+    ast = parseSource(code, filename);
+  } catch (error) {
+    result.status = "skipped";
+    result.notes.push(error instanceof Error ? error.message : String(error));
+    return result;
+  }
+
+  const fn = findComponentFunction(ast);
+  if (!fn) {
+    result.status = "skipped";
+    result.notes.push("no exported function component with JSX return found");
+    return result;
+  }
+
+  result.name = fn.name;
+  const props = fn.props;
+  const jsx = fn.jsx;
+  const body = renderJsxToTemplate(jsx, result);
+  if (result.status === "skipped") return result;
+
+  const propsParam = props.length
+    ? `{ ${props.map((p) => (p === "className" ? "class: className" : p)).join(", ")} }`
+    : "props = {}";
+
+  const needsCn = body.includes("cn(");
+  const imports = ["esc", "attrs", ...(needsCn ? ["cn"] : [])];
+  const preamble = extractPreamble(ast);
+
+  result.code =
+    `import { ${imports.join(", ")} } from "jskelet/html";\n` +
+    (preamble ? `\n${preamble}\n` : "\n") +
+    `export function ${camelName(fn.name)}(${propsParam}) {\n` +
+    `  return ${body};\n` +
+    `}\n`;
+
+  if (result.notes.length && result.status === "ok") result.status = "partial";
+  return result;
+}
+
+/**
+ * Import dışı üst seviye const'ları (TONES vb.) kopyala.
+ * @param {import('@babel/types').File} ast
+ * @returns {string}
+ */
+function extractPreamble(ast) {
+  /** @type {string[]} */
+  const lines = [];
+  for (const node of ast.program.body) {
+    if (t.isImportDeclaration(node)) continue;
+    if (t.isExportNamedDeclaration(node) || t.isExportDefaultDeclaration(node)) continue;
+    if (t.isVariableDeclaration(node)) {
+      lines.push(printVar(node));
+    }
+  }
+  return lines.join("\n");
+}
+
+/**
+ * @param {import('@babel/types').VariableDeclaration} stmt
+ * @returns {string}
+ */
+function printVar(stmt) {
+  const decls = stmt.declarations
+    .map((d) => {
+      const id = t.isIdentifier(d.id) ? d.id.name : "/* pat */";
+      const init = d.init ? ` = ${exprToSource(d.init)}` : "";
+      return id + init;
+    })
+    .join(", ");
+  return `${stmt.kind} ${decls};`;
+}
+
+/**
+ * @param {import('@babel/types').File} ast
+ * @returns {{ name: string, props: string[], jsx: import('@babel/types').JSXElement | import('@babel/types').JSXFragment } | null}
+ */
+function findComponentFunction(ast) {
+  for (const node of ast.program.body) {
+    // export function Badge(...) { return <...> }
+    if (t.isExportNamedDeclaration(node) && t.isFunctionDeclaration(node.declaration)) {
+      const decl = node.declaration;
+      if (!decl.id) continue;
+      const jsx = findReturnJsx(decl.body);
+      if (!jsx) continue;
+      return { name: decl.id.name, props: propsFromParams(decl.params), jsx };
+    }
+    // export const Badge = (...) => <...>
+    if (
+      t.isExportNamedDeclaration(node) &&
+      node.declaration &&
+      t.isVariableDeclaration(node.declaration)
+    ) {
+      for (const d of node.declaration.declarations) {
+        if (!t.isIdentifier(d.id)) continue;
+        if (!d.init) continue;
+        if (t.isArrowFunctionExpression(d.init) || t.isFunctionExpression(d.init)) {
+          let jsx = null;
+          if (t.isJSXElement(d.init.body) || t.isJSXFragment(d.init.body)) {
+            jsx = d.init.body;
+          } else if (t.isBlockStatement(d.init.body)) {
+            jsx = findReturnJsx(d.init.body);
+          }
+          if (!jsx) continue;
+          return { name: d.id.name, props: propsFromParams(d.init.params), jsx };
+        }
+      }
+    }
+    // export default function
+    if (t.isExportDefaultDeclaration(node) && t.isFunctionDeclaration(node.declaration)) {
+      const decl = node.declaration;
+      const name = decl.id?.name ?? "Component";
+      const jsx = findReturnJsx(decl.body);
+      if (!jsx) continue;
+      return { name, props: propsFromParams(decl.params), jsx };
+    }
+  }
+  return null;
+}
+
+/**
+ * @param {import('@babel/types').BlockStatement} body
+ * @returns {import('@babel/types').JSXElement | import('@babel/types').JSXFragment | null}
+ */
+function findReturnJsx(body) {
+  for (const stmt of body.body) {
+    if (t.isReturnStatement(stmt) && stmt.argument) {
+      if (t.isJSXElement(stmt.argument) || t.isJSXFragment(stmt.argument)) {
+        return stmt.argument;
+      }
+      if (t.isParenthesizedExpression(stmt.argument)) {
+        const inner = stmt.argument.expression;
+        if (t.isJSXElement(inner) || t.isJSXFragment(inner)) return inner;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * @param {import('@babel/types').FunctionDeclaration['params']} params
+ * @returns {string[]}
+ */
+function propsFromParams(params) {
+  if (params.length === 0) return [];
+  const first = params[0];
+  if (t.isObjectPattern(first)) {
+    return first.properties
+      .map((p) => {
+        if (t.isObjectProperty(p) && t.isIdentifier(p.key)) return p.key.name;
+        if (t.isRestElement(p) && t.isIdentifier(p.argument)) return p.argument.name;
+        return null;
+      })
+      .filter(Boolean);
+  }
+  return [];
+}
+
+/**
+ * @param {import('@babel/types').JSXElement | import('@babel/types').JSXFragment} node
+ * @param {ComponentResult} result
+ * @returns {string} template literal expression (with backticks)
+ */
+function renderJsxToTemplate(node, result) {
+  const inner = renderNode(node, result);
+  return `\`${inner}\``;
+}
+
+/**
+ * @param {import('@babel/types').Node} node
+ * @param {ComponentResult} result
+ * @returns {string}
+ */
+function renderNode(node, result) {
+  if (t.isJSXFragment(node)) {
+    return node.children.map((c) => renderNode(c, result)).join("");
+  }
+  if (t.isJSXText(node)) {
+    return escapeTemplate(node.value);
+  }
+  if (t.isJSXExpressionContainer(node)) {
+    if (t.isJSXEmptyExpression(node.expression)) return "";
+    return `\${esc(${exprToSource(node.expression)})}`;
+  }
+  if (t.isJSXElement(node)) {
+    return renderElement(node, result);
+  }
+  result.notes.push(`unsupported node ${node.type}`);
+  result.status = "partial";
+  return "";
+}
+
+/**
+ * @param {import('@babel/types').JSXElement} el
+ * @param {ComponentResult} result
+ * @returns {string}
+ */
+function renderElement(el, result) {
+  const nameNode = el.openingElement.name;
+  if (!t.isJSXIdentifier(nameNode)) {
+    result.notes.push("namespaced JSX not supported");
+    result.status = "partial";
+    return "";
+  }
+  const tag = nameNode.name;
+  /** @type {Record<string, string>} */
+  const staticAttrs = {};
+  /** @type {string[]} */
+  const dynamicParts = [];
+
+  for (const attr of el.openingElement.attributes) {
+    if (t.isJSXSpreadAttribute(attr)) {
+      result.notes.push("spread attributes");
+      result.status = "partial";
+      continue;
+    }
+    if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name)) continue;
+    let key = attr.name.name;
+    if (key === "className") key = "class";
+    if (key === "htmlFor") key = "for";
+    if (key === "dangerouslySetInnerHTML") {
+      result.notes.push("dangerouslySetInnerHTML in component — use raw html prop");
+      result.status = "partial";
+      continue;
+    }
+
+    if (attr.value === null) {
+      staticAttrs[key] = "true";
+      continue;
+    }
+    if (t.isStringLiteral(attr.value)) {
+      staticAttrs[key] = attr.value.value;
+      continue;
+    }
+    if (t.isJSXExpressionContainer(attr.value) && t.isExpression(attr.value.expression)) {
+      const src = exprToSource(attr.value.expression);
+      if (key === "class" && src.startsWith("cn(")) {
+        dynamicParts.push(`class: ${src}`);
+      } else {
+        dynamicParts.push(`${JSON.stringify(key)}: ${src}`);
+      }
+    }
+  }
+
+  const attrsCall =
+    Object.keys(staticAttrs).length || dynamicParts.length
+      ? `\${attrs({ ${[
+          ...Object.entries(staticAttrs).map(([k, v]) => `${JSON.stringify(k)}: ${JSON.stringify(v)}`),
+          ...dynamicParts,
+        ].join(", ")} })}`
+      : "";
+
+  const children = el.children.map((c) => renderNode(c, result)).join("");
+  if (el.openingElement.selfClosing && !children) {
+    return `<${tag}${attrsCall} />`;
+  }
+  return `<${tag}${attrsCall}>${children}</${tag}>`;
+}
+
+/**
+ * @param {string} text
+ * @returns {string}
+ */
+function escapeTemplate(text) {
+  return text.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+}
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function camelName(name) {
+  if (!name) return "component";
+  return name.charAt(0).toLowerCase() + name.slice(1);
+}

package/src/migrate/transform/jsx-to-jsk.mjs

@@ -0,0 +1,330 @@
+/**
+ * JSX AST → `.jsk` şablon metni.
+ */
+import { t } from "../babel.mjs";
+import { tryJskExpr, collectRootIdents, exprToSource } from "./expr-source.mjs";
+
+/**
+ * @typedef {{ status: 'ok' | 'partial' | 'skipped', notes: string[], bindings: Set<string> }} TransformReport
+ */
+
+/**
+ * @param {import('@babel/types').Node} jsx
+ * @returns {{ source: string, report: TransformReport }}
+ */
+export function jsxToJsk(jsx) {
+  /** @type {TransformReport} */
+  const report = { status: "ok", notes: [], bindings: new Set() };
+  const source = renderNode(jsx, report);
+  if (report.notes.length && report.status === "ok") report.status = "partial";
+  return { source, report };
+}
+
+/**
+ * @param {import('@babel/types').Node | null | undefined} node
+ * @param {TransformReport} report
+ * @returns {string}
+ */
+function renderNode(node, report) {
+  if (!node) return "";
+
+  if (t.isJSXFragment(node)) {
+    return node.children.map((c) => renderNode(c, report)).join("");
+  }
+
+  if (t.isJSXElement(node)) {
+    return renderElement(node, report);
+  }
+
+  if (t.isJSXText(node)) {
+    return node.value.replace(/\s+/g, (m) => (m.includes("\n") ? "\n" : m));
+  }
+
+  if (t.isJSXExpressionContainer(node)) {
+    return renderExpression(node.expression, report);
+  }
+
+  if (t.isJSXEmptyExpression(node)) return "";
+
+  report.notes.push(`unsupported JSX node: ${node.type}`);
+  report.status = "partial";
+  return `{# /* TODO[jskelet-migrate]: unsupported ${node.type} */ #}`;
+}
+
+/**
+ * @param {import('@babel/types').JSXElement} el
+ * @param {TransformReport} report
+ * @returns {string}
+ */
+function renderElement(el, report) {
+  const name = jsxName(el.openingElement.name);
+  if (!name) {
+    report.notes.push("unsupported JSX name");
+    report.status = "partial";
+    return "";
+  }
+
+  // dangerouslySetInnerHTML={{ __html: x }} → {{{ x }}}
+  const dsi = findAttr(el.openingElement.attributes, "dangerouslySetInnerHTML");
+  if (dsi && t.isJSXAttribute(dsi) && t.isJSXExpressionContainer(dsi.value)) {
+    const expr = dsi.value.expression;
+    if (t.isObjectExpression(expr)) {
+      const htmlProp = expr.properties.find(
+        (p) =>
+          t.isObjectProperty(p) &&
+          ((t.isIdentifier(p.key) && p.key.name === "__html") ||
+            (t.isStringLiteral(p.key) && p.key.value === "__html")),
+      );
+      if (htmlProp && t.isObjectProperty(htmlProp) && t.isExpression(htmlProp.value)) {
+        const tried = tryJskExpr(htmlProp.value);
+        if (tried.ok) {
+          collectRootIdents(htmlProp.value, report.bindings);
+          return `{{{ ${tried.source} }}}`;
+        }
+        report.notes.push(tried.reason);
+        report.status = "partial";
+        return `{# /* TODO[jskelet-migrate]: ${tried.reason} */ #}`;
+      }
+    }
+  }
+
+  // next/image → Image, next/link → Link (name already resolved by caller imports)
+  const tag = rewriteBuiltinTag(name);
+  const attrs = renderAttrs(el.openingElement.attributes, report, tag);
+  const children = el.children.map((c) => renderNode(c, report)).join("");
+
+  // <Link href="..." >text</Link> → text= when single text child
+  if (tag === "Link" && !hasAttr(el.openingElement.attributes, "text")) {
+    const textChild = singleTextChild(el.children);
+    if (textChild !== null) {
+      const quoted = JSON.stringify(textChild);
+      const hrefPart = attrs ? " " + attrs : "";
+      return `<Link${hrefPart} text=${quoted} />`;
+    }
+  }
+
+  if (el.openingElement.selfClosing || children.trim() === "") {
+    return `<${tag}${attrs ? " " + attrs : ""} />`;
+  }
+  return `<${tag}${attrs ? " " + attrs : ""}>${children}</${tag}>`;
+}
+
+/**
+ * @param {import('@babel/types').JSXAttribute[] | import('@babel/types').JSXSpreadAttribute[]} attributes
+ * @param {TransformReport} report
+ * @param {string} tag
+ * @returns {string}
+ */
+function renderAttrs(attributes, report, tag) {
+  /** @type {string[]} */
+  const parts = [];
+  for (const attr of attributes) {
+    if (t.isJSXSpreadAttribute(attr)) {
+      report.notes.push("spread attributes are not supported in .jsk");
+      report.status = "partial";
+      continue;
+    }
+    if (!t.isJSXAttribute(attr)) continue;
+    const rawName = jsxName(attr.name);
+    if (!rawName) continue;
+    if (rawName === "dangerouslySetInnerHTML") continue;
+
+    let name = rawName === "className" ? "class" : rawName;
+    // React reserved → HTML
+    if (name === "htmlFor") name = "for";
+    if (name === "key") continue;
+
+    if (attr.value === null) {
+      parts.push(name);
+      continue;
+    }
+
+    if (t.isStringLiteral(attr.value)) {
+      parts.push(`${name}=${JSON.stringify(attr.value.value)}`);
+      continue;
+    }
+
+    if (t.isJSXExpressionContainer(attr.value)) {
+      const expr = attr.value.expression;
+      if (t.isJSXEmptyExpression(expr)) continue;
+
+      // boolean true
+      if (t.isBooleanLiteral(expr) && expr.value === true) {
+        parts.push(name);
+        continue;
+      }
+      if (t.isBooleanLiteral(expr) && expr.value === false) {
+        continue;
+      }
+
+      const tried = tryJskExpr(expr);
+      if (!tried.ok) {
+        report.notes.push(`${tag} ${name}: ${tried.reason}`);
+        report.status = "partial";
+        continue;
+      }
+      collectRootIdents(expr, report.bindings);
+      parts.push(`:${name}="${tried.source}"`);
+      continue;
+    }
+  }
+  return parts.join(" ");
+}
+
+/**
+ * @param {import('@babel/types').Node} expression
+ * @param {TransformReport} report
+ * @returns {string}
+ */
+function renderExpression(expression, report) {
+  if (t.isJSXEmptyExpression(expression)) return "";
+
+  // {cond && <El/>} or {cond ? <A/> : <B/>}
+  if (t.isLogicalExpression(expression) && expression.operator === "&&") {
+    const right = expression.right;
+    if (t.isJSXElement(right) || t.isJSXFragment(right)) {
+      const tried = tryJskExpr(expression.left);
+      if (!tried.ok) {
+        report.notes.push(tried.reason);
+        report.status = "partial";
+        return `{# /* TODO[jskelet-migrate]: ${tried.reason} */ #}`;
+      }
+      collectRootIdents(expression.left, report.bindings);
+      const body = renderNode(right, report);
+      return `{#if ${tried.source}}${body}{/if}`;
+    }
+  }
+
+  if (t.isConditionalExpression(expression)) {
+    const { test, consequent, alternate } = expression;
+    if (
+      (t.isJSXElement(consequent) || t.isJSXFragment(consequent)) &&
+      (t.isJSXElement(alternate) || t.isJSXFragment(alternate) || t.isNullLiteral(alternate))
+    ) {
+      const tried = tryJskExpr(test);
+      if (!tried.ok) {
+        report.notes.push(tried.reason);
+        report.status = "partial";
+        return `{# /* TODO[jskelet-migrate]: ${tried.reason} */ #}`;
+      }
+      collectRootIdents(test, report.bindings);
+      const a = renderNode(consequent, report);
+      const b = t.isNullLiteral(alternate) ? "" : renderNode(alternate, report);
+      if (b) return `{#if ${tried.source}}${a}{#else}${b}{/if}`;
+      return `{#if ${tried.source}}${a}{/if}`;
+    }
+  }
+
+  // {items.map((item, i) => <li>...</li>)}
+  if (t.isCallExpression(expression) && t.isMemberExpression(expression.callee)) {
+    const prop = expression.callee.property;
+    if (t.isIdentifier(prop) && prop.name === "map" && expression.arguments.length >= 1) {
+      const fn = expression.arguments[0];
+      if (t.isArrowFunctionExpression(fn) || t.isFunctionExpression(fn)) {
+        const params = fn.params;
+        const itemName = t.isIdentifier(params[0]) ? params[0].name : "item";
+        const indexName = t.isIdentifier(params[1]) ? params[1].name : null;
+        const collection = tryJskExpr(
+          /** @type {import('@babel/types').Expression} */ (expression.callee.object),
+        );
+        if (!collection.ok) {
+          report.notes.push(collection.reason);
+          report.status = "partial";
+          return `{# /* TODO[jskelet-migrate]: ${collection.reason} */ #}`;
+        }
+        collectRootIdents(
+          /** @type {import('@babel/types').Expression} */ (expression.callee.object),
+          report.bindings,
+        );
+        let bodyNode = fn.body;
+        if (t.isBlockStatement(bodyNode)) {
+          const ret = bodyNode.body.find((s) => t.isReturnStatement(s));
+          bodyNode = ret && ret.argument ? ret.argument : null;
+        }
+        if (!bodyNode || !(t.isJSXElement(bodyNode) || t.isJSXFragment(bodyNode))) {
+          report.notes.push("map callback must return JSX");
+          report.status = "partial";
+          return `{# /* TODO[jskelet-migrate]: map callback must return JSX */ #}`;
+        }
+        const body = renderNode(bodyNode, report);
+        const as = indexName ? `${itemName}, ${indexName}` : itemName;
+        return `{#each ${collection.source} as ${as}}${body}{/each}`;
+      }
+    }
+  }
+
+  // Plain expression → {{ }}
+  if (t.isExpression(expression)) {
+    const tried = tryJskExpr(expression);
+    if (tried.ok) {
+      collectRootIdents(expression, report.bindings);
+      return `{{ ${tried.source} }}`;
+    }
+    report.notes.push(tried.reason);
+    report.status = "partial";
+    return `{# /* TODO[jskelet-migrate]: ${tried.reason} */ #}`;
+  }
+
+  report.notes.push(`unsupported expression: ${expression.type}`);
+  report.status = "partial";
+  return `{# /* TODO[jskelet-migrate]: ${expression.type} */ #}`;
+}
+
+/**
+ * @param {import('@babel/types').JSXIdentifier | import('@babel/types').JSXMemberExpression | import('@babel/types').JSXNamespacedName} name
+ * @returns {string | null}
+ */
+function jsxName(name) {
+  if (t.isJSXIdentifier(name)) return name.name;
+  if (t.isJSXMemberExpression(name)) {
+    const obj = jsxName(name.object);
+    const prop = jsxName(name.property);
+    if (obj && prop) return `${obj}.${prop}`;
+  }
+  return null;
+}
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function rewriteBuiltinTag(name) {
+  if (name === "Image") return "Image";
+  if (name === "Link") return "Link";
+  return name;
+}
+
+/**
+ * @param {import('@babel/types').JSXAttribute[] | import('@babel/types').JSXSpreadAttribute[]} attrs
+ * @param {string} name
+ */
+function findAttr(attrs, name) {
+  return attrs.find(
+    (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name) && a.name.name === name,
+  );
+}
+
+/**
+ * @param {import('@babel/types').JSXAttribute[] | import('@babel/types').JSXSpreadAttribute[]} attrs
+ * @param {string} name
+ */
+function hasAttr(attrs, name) {
+  return Boolean(findAttr(attrs, name));
+}
+
+/**
+ * @param {import('@babel/types').JSXElement['children']} children
+ * @returns {string | null}
+ */
+function singleTextChild(children) {
+  const meaningful = children.filter((c) => {
+    if (t.isJSXText(c)) return c.value.trim().length > 0;
+    return true;
+  });
+  if (meaningful.length === 1 && t.isJSXText(meaningful[0])) {
+    return meaningful[0].value.trim();
+  }
+  return null;
+}
+
+export { exprToSource };