jskelet 0.5.4 → 0.6.0

package/src/migrate/transform/expr-source.mjs

@@ -0,0 +1,168 @@
+/**
+ * Babel ifade → kaynak metin + JSK parseExpr doğrulaması.
+ * `@babel/generator` yok; JSX attr / {{ }} için yeterli alt küme basılır.
+ */
+import { t } from "../babel.mjs";
+import { parseExpr } from "../../compile/expr.js";
+
+/**
+ * @param {import('@babel/types').Node} node
+ * @returns {string}
+ */
+export function exprToSource(node) {
+  if (t.isTSAsExpression(node) || t.isTSTypeAssertion(node) || t.isTSNonNullExpression(node)) {
+    return exprToSource(/** @type {{ expression: import('@babel/types').Expression }} */ (node).expression);
+  }
+  if (t.isParenthesizedExpression(node)) {
+    return `(${exprToSource(node.expression)})`;
+  }
+  if (t.isIdentifier(node)) return node.name;
+  if (t.isStringLiteral(node)) return JSON.stringify(node.value);
+  if (t.isNumericLiteral(node)) return String(node.value);
+  if (t.isBooleanLiteral(node)) return node.value ? "true" : "false";
+  if (t.isNullLiteral(node)) return "null";
+  if (t.isBigIntLiteral(node)) return node.value + "n";
+
+  if (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) {
+    const obj = exprToSource(node.object);
+    const opt = "optional" in node && node.optional ? "?." : ".";
+    if (node.computed) {
+      return `${obj}${opt === "?." ? "?." : ""}[${exprToSource(/** @type {import('@babel/types').Expression} */ (node.property))}]`;
+    }
+    if (t.isIdentifier(node.property)) {
+      return `${obj}${opt}${node.property.name}`;
+    }
+    return `${obj}.${exprToSource(node.property)}`;
+  }
+
+  if (t.isUnaryExpression(node)) {
+    return `${node.operator}${exprToSource(node.argument)}`;
+  }
+
+  if (t.isBinaryExpression(node) || t.isLogicalExpression(node)) {
+    return `${exprToSource(/** @type {import('@babel/types').Expression} */ (node.left))} ${node.operator} ${exprToSource(node.right)}`;
+  }
+
+  if (t.isConditionalExpression(node)) {
+    return `${exprToSource(node.test)} ? ${exprToSource(node.consequent)} : ${exprToSource(node.alternate)}`;
+  }
+
+  if (t.isTemplateLiteral(node)) {
+    let out = "`";
+    for (let i = 0; i < node.quasis.length; i++) {
+      out += node.quasis[i].value.cooked ?? node.quasis[i].value.raw;
+      if (i < node.expressions.length) {
+        out += "${" + exprToSource(node.expressions[i]) + "}";
+      }
+    }
+    return out + "`";
+  }
+
+  if (t.isArrayExpression(node)) {
+    return `[${node.elements.map((el) => (el ? exprToSource(el) : "")).join(", ")}]`;
+  }
+
+  if (t.isObjectExpression(node)) {
+    const props = node.properties.map((p) => {
+      if (t.isSpreadElement(p)) return `...${exprToSource(p.argument)}`;
+      if (t.isObjectMethod(p)) return `/* method */`;
+      if (t.isObjectProperty(p)) {
+        const key = t.isIdentifier(p.key) && !p.computed ? p.key.name : exprToSource(p.key);
+        return `${key}: ${exprToSource(/** @type {import('@babel/types').Expression} */ (p.value))}`;
+      }
+      return "";
+    });
+    return `{ ${props.join(", ")} }`;
+  }
+
+  if (t.isCallExpression(node)) {
+    const callee = exprToSource(node.callee);
+    const args = node.arguments.map((a) => exprToSource(/** @type {import('@babel/types').Node} */ (a))).join(", ");
+    return `${callee}(${args})`;
+  }
+
+  if (t.isAwaitExpression(node)) {
+    return `await ${exprToSource(node.argument)}`;
+  }
+
+  if (t.isArrowFunctionExpression(node) || t.isFunctionExpression(node)) {
+    return `/* function */`;
+  }
+
+  if (t.isThisExpression(node)) return "this";
+
+  return `/* unsupported:${node.type} */`;
+}
+
+/**
+ * @param {string} source
+ * @returns {boolean}
+ */
+export function isJskExpr(source) {
+  if (!source || source.includes("/* unsupported")) return false;
+  try {
+    parseExpr(source);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * @param {import('@babel/types').Expression} expr
+ * @returns {{ ok: true, source: string } | { ok: false, reason: string }}
+ */
+export function tryJskExpr(expr) {
+  if (t.isStringLiteral(expr)) {
+    return { ok: true, source: JSON.stringify(expr.value) };
+  }
+  if (t.isNumericLiteral(expr)) {
+    return { ok: true, source: String(expr.value) };
+  }
+  if (t.isBooleanLiteral(expr)) {
+    return { ok: true, source: expr.value ? "true" : "false" };
+  }
+  if (t.isNullLiteral(expr)) {
+    return { ok: true, source: "null" };
+  }
+
+  const source = exprToSource(expr);
+  if (isJskExpr(source)) return { ok: true, source };
+  return { ok: false, reason: `expression not valid in .jsk: ${source}` };
+}
+
+/**
+ * @param {import('@babel/types').Expression} expr
+ * @param {Set<string>} out
+ */
+export function collectRootIdents(expr, out) {
+  if (t.isIdentifier(expr)) {
+    out.add(expr.name);
+    return;
+  }
+  if (t.isMemberExpression(expr) || t.isOptionalMemberExpression(expr)) {
+    collectRootIdents(/** @type {import('@babel/types').Expression} */ (expr.object), out);
+    return;
+  }
+  if (t.isConditionalExpression(expr)) {
+    collectRootIdents(expr.test, out);
+    collectRootIdents(expr.consequent, out);
+    collectRootIdents(expr.alternate, out);
+    return;
+  }
+  if (t.isLogicalExpression(expr) || t.isBinaryExpression(expr)) {
+    collectRootIdents(/** @type {import('@babel/types').Expression} */ (expr.left), out);
+    collectRootIdents(expr.right, out);
+    return;
+  }
+  if (t.isUnaryExpression(expr)) {
+    collectRootIdents(expr.argument, out);
+    return;
+  }
+  if (t.isCallExpression(expr)) {
+    collectRootIdents(/** @type {import('@babel/types').Expression} */ (expr.callee), out);
+    for (const arg of expr.arguments) {
+      if (t.isExpression(arg)) collectRootIdents(arg, out);
+    }
+  }
+}

package/src/migrate/transform/island.mjs

@@ -0,0 +1,67 @@
+/**
+ * `"use client"` → island `mount()` iskeleti.
+ */
+import path from "node:path";
+
+/**
+ * @typedef {{ status: 'ok' | 'partial' | 'skipped', notes: string[], code: string | null, islandName: string }} IslandResult
+ */
+
+/**
+ * @param {string} code
+ * @param {string} filename
+ * @param {{ name?: string }} [options]
+ * @returns {IslandResult}
+ */
+export function transformIsland(code, filename, options = {}) {
+  const base = path.basename(filename).replace(/\.(jsx?|tsx?|mjs|cjs)$/, "");
+  const islandName = options.name ?? camel(base);
+  /** @type {IslandResult} */
+  const result = {
+    status: "partial",
+    notes: [],
+    code: null,
+    islandName,
+  };
+
+  const hasHooks = /\buse(State|Effect|Memo|Callback|Ref|Context|Reducer)\s*\(/.test(code);
+  if (hasHooks) {
+    result.notes.push("hooks require a manual port into mount()");
+  }
+  if (!/["']use client["']/.test(code) && !hasHooks) {
+    result.notes.push("no \"use client\" directive — treating as island candidate anyway");
+  }
+
+  result.code =
+    `/**\n` +
+    ` * Island migrated from ${filename.replace(/\\/g, "/")}\n` +
+    ` * Register: registerAll({ ${islandName}: () => import("./${islandName}.js") })\n` +
+    ` * Markup: <div data-island="${islandName}" data-island-props='{}'></div>\n` +
+    ` */\n` +
+    `/**\n` +
+    ` * @param {HTMLElement} el\n` +
+    ` * @param {Record<string, unknown>} [props]\n` +
+    ` */\n` +
+    `export function mount(el, props = {}) {\n` +
+    `  // TODO[jskelet-migrate]: port client logic from ${path.basename(filename)}\n` +
+    (hasHooks
+      ? `  // Original file used React hooks — rewrite with plain DOM + events.\n`
+      : "") +
+    `  el.textContent = "";\n` +
+    `  void props;\n` +
+    `}\n`;
+
+  return result;
+}
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function camel(name) {
+  return name
+    .split(/[-_/]+/)
+    .filter(Boolean)
+    .map((p, i) => (i === 0 ? p.toLowerCase() : p.charAt(0).toUpperCase() + p.slice(1)))
+    .join("");
+}

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);
+}