jskelet 0.3.4 → 0.4.0

package/src/compile/codegen.js

@@ -0,0 +1,332 @@
+/**
+ * AST → ESM kaynak metni. `eval` / `new Function` yok; çıktı diskteki
+ * `.mjs` dosyasına yazılır ve runtime'da normal `import` ile yüklenir.
+ */
+import { codegenExpr } from "./expr.js";
+import { CompileError } from "./errors.js";
+
+/**
+ * @typedef {import('./parse.js').AstNode} AstNode
+ * @typedef {import('./parse.js').AttrNode} AttrNode
+ */
+
+/**
+ * @param {AstNode[]} ast
+ * @param {{ viewId: string, file?: string, knownComponents?: Set<string> }} options
+ * @returns {{ code: string, includes: string[], components: string[] }}
+ */
+export function codegen(ast, options) {
+  const ctx = new CodegenContext(options);
+  ctx.emitNodes(ast);
+  return {
+    code: ctx.finish(),
+    includes: [...ctx.includes],
+    components: [...ctx.components],
+  };
+}
+
+/**
+ * Include yolunu view id'ye çevir (uzantısız, `/` ayırıcılı).
+ * @param {string} includePath
+ * @returns {string}
+ */
+export function normalizeIncludeId(includePath) {
+  return includePath.replace(/\\/g, "/").replace(/\.jsk$/i, "").replace(/^\.\//, "");
+}
+
+/**
+ * `market-hero` / `MarketHero` → `MarketHero`
+ * @param {string} name
+ * @returns {string}
+ */
+export function toPascalCase(name) {
+  if (/^[A-Z]/.test(name) && !name.includes("-")) return name;
+  return name
+    .split(/[-_/]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+class CodegenContext {
+  /**
+   * @param {{ viewId: string, file?: string, knownComponents?: Set<string> }} options
+   */
+  constructor(options) {
+    this.viewId = options.viewId;
+    this.file = options.file;
+    this.knownComponents = options.knownComponents ?? null;
+    /** @type {Set<string>} */
+    this.includes = new Set();
+    /** @type {Set<string>} */
+    this.components = new Set();
+    /** @type {string[]} */
+    this.body = [];
+    this.indent = 1;
+    this.temp = 0;
+    /** @type {Set<string>} */
+    this.locals = new Set();
+    /** Çocuk gövdesinde `s` yerine kullanılacak değişken. */
+    this.outVar = "s";
+  }
+
+  /**
+   * @param {string} line
+   */
+  line(line) {
+    this.body.push(`${"  ".repeat(this.indent)}${line}`);
+  }
+
+  /**
+   * @param {string} exprJs
+   */
+  append(exprJs) {
+    this.line(`${this.outVar} += ${exprJs};`);
+  }
+
+  /** @returns {string} */
+  nextTemp() {
+    this.temp += 1;
+    return `__c${this.temp}`;
+  }
+
+  /**
+   * @param {AstNode[]} nodes
+   */
+  emitNodes(nodes) {
+    for (const node of nodes) this.emit(node);
+  }
+
+  /**
+   * @param {AstNode} node
+   */
+  emit(node) {
+    switch (node.type) {
+      case "Text":
+        if (node.value) this.append(JSON.stringify(node.value));
+        break;
+      case "Interp": {
+        const expr = codegenExpr(node.expr, this.locals);
+        if (node.raw) this.append(`(${expr} ?? "")`);
+        else this.append(`helpers.esc(${expr})`);
+        break;
+      }
+      case "Element":
+        this.emitElement(node);
+        break;
+      case "Component":
+        this.emitComponent(node);
+        break;
+      case "If":
+        this.emitIf(node);
+        break;
+      case "Each":
+        this.emitEach(node);
+        break;
+      case "Include":
+        this.emitInclude(node);
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * @param {import('./parse.js').ElementNode} node
+   */
+  emitElement(node) {
+    const bound = node.attrs.some((a) => a.bound);
+    if (bound) {
+      this.append(
+        `"<${node.name}" + helpers.attrs({${this.attrsObject(node.attrs)}}) + ">"`,
+      );
+    } else {
+      this.append(JSON.stringify(`<${node.name}${staticAttrString(node.attrs)}>`));
+    }
+
+    if (!node.selfClosing) {
+      this.emitNodes(node.children);
+      this.append(JSON.stringify(`</${node.name}>`));
+    }
+  }
+
+  /**
+   * @param {AttrNode[]} attrs
+   * @returns {string}
+   */
+  attrsObject(attrs) {
+    return attrs
+      .map((attr) => {
+        const key = JSON.stringify(attr.name);
+        if (attr.boolean && !attr.bound) return `${key}: true`;
+        if (attr.bound && attr.expr) {
+          return `${key}: ${codegenExpr(attr.expr, this.locals)}`;
+        }
+        return `${key}: ${JSON.stringify(attr.value ?? true)}`;
+      })
+      .join(", ");
+  }
+
+  /**
+   * @param {import('./parse.js').ComponentNode} node
+   */
+  emitComponent(node) {
+    if (this.knownComponents && !this.knownComponents.has(node.name)) {
+      throw new CompileError(`Unknown component "${node.name}"`, {
+        file: this.file,
+        index: node.index,
+      });
+    }
+    this.components.add(node.name);
+
+    const props = this.attrsObject(node.attrs);
+
+    if (node.children.length) {
+      const tmp = this.nextTemp();
+      this.line(`{`);
+      this.indent += 1;
+      this.line(`let ${tmp} = "";`);
+      const prevOut = this.outVar;
+      this.outVar = tmp;
+      this.emitNodes(node.children);
+      this.outVar = prevOut;
+      const propsWithChildren = props
+        ? `${props}, children: ${tmp}`
+        : `children: ${tmp}`;
+      this.append(`(helpers.${node.name}({ ${propsWithChildren} }) ?? "")`);
+      this.indent -= 1;
+      this.line(`}`);
+    } else {
+      this.append(`(helpers.${node.name}({ ${props} }) ?? "")`);
+    }
+  }
+
+  /**
+   * @param {import('./parse.js').IfNode} node
+   */
+  emitIf(node) {
+    const test = codegenExpr(node.test, this.locals);
+    this.line(`if (${test}) {`);
+    this.indent += 1;
+    this.emitNodes(node.consequent);
+    this.indent -= 1;
+    if (node.alternate.length) {
+      this.line(`} else {`);
+      this.indent += 1;
+      this.emitNodes(node.alternate);
+      this.indent -= 1;
+    }
+    this.line(`}`);
+  }
+
+  /**
+   * @param {import('./parse.js').EachNode} node
+   */
+  emitEach(node) {
+    const list = codegenExpr(node.list, this.locals);
+    const idx = node.indexName ?? `__i${++this.temp}`;
+    this.line(`{`);
+    this.indent += 1;
+    this.line(`const __list = ${list} ?? [];`);
+    this.line(`for (let ${idx} = 0; ${idx} < __list.length; ${idx}++) {`);
+    this.indent += 1;
+    this.line(`const ${node.item} = __list[${idx}];`);
+    const prev = new Set(this.locals);
+    this.locals.add(node.item);
+    this.locals.add(idx);
+    if (node.indexName) this.locals.add(node.indexName);
+    this.emitNodes(node.children);
+    this.locals = prev;
+    this.indent -= 1;
+    this.line(`}`);
+    this.indent -= 1;
+    this.line(`}`);
+  }
+
+  /**
+   * @param {import('./parse.js').IncludeNode} node
+   */
+  emitInclude(node) {
+    const id = normalizeIncludeId(node.path);
+    this.includes.add(id);
+    const alias = includeAlias(id);
+    this.append(`(${alias}(data, helpers) ?? "")`);
+  }
+
+  /** @returns {string} */
+  finish() {
+    const imports = [...this.includes]
+      .map((id) => {
+        const alias = includeAlias(id);
+        const rel = relativeImport(this.viewId, id);
+        return `import { render as ${alias} } from ${JSON.stringify(rel)};`;
+      })
+      .join("\n");
+
+    const parts = [
+      "/** @generated by jskelet — do not edit */",
+      imports,
+      "/**",
+      " * @param {Record<string, unknown>} data",
+      " * @param {Record<string, any>} helpers",
+      " * @returns {string}",
+      " */",
+      "export function render(data, helpers) {",
+      '  let s = "";',
+      ...this.body,
+      "  return s;",
+      "}",
+      "",
+    ];
+
+    return parts.filter((l, i) => !(l === "" && i === 1 && !imports)).join("\n");
+  }
+}
+
+/**
+ * @param {AttrNode[]} attrs
+ * @returns {string}
+ */
+function staticAttrString(attrs) {
+  let out = "";
+  for (const attr of attrs) {
+    if (attr.boolean) {
+      out += ` ${attr.name}`;
+      continue;
+    }
+    out += ` ${attr.name}="${escapeAttr(attr.value ?? "")}"`;
+  }
+  return out;
+}
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function escapeAttr(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;");
+}
+
+/**
+ * @param {string} id
+ * @returns {string}
+ */
+function includeAlias(id) {
+  return `__inc_${id.replace(/[^A-Za-z0-9]/g, "_")}`;
+}
+
+/**
+ * @param {string} fromViewId
+ * @param {string} toViewId
+ * @returns {string}
+ */
+function relativeImport(fromViewId, toViewId) {
+  const fromParts = fromViewId.split("/");
+  fromParts.pop();
+  const depth = fromParts.length;
+  const prefix = depth === 0 ? "./" : "../".repeat(depth);
+  return `${prefix}${toViewId}.mjs`;
+}

package/src/compile/compile-all.js

@@ -0,0 +1,158 @@
+/**
+ * Tüm `.jsk` dosyalarını derleyip `.jskelet/templates/` altına yazar.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { parseTemplate } from "./parse.js";
+import { codegen, normalizeIncludeId } from "./codegen.js";
+import { CompileError } from "./errors.js";
+import {
+  collectKnownComponents,
+  componentNameFromViewId,
+  discoverJskFiles,
+  getComponentDirs,
+  getViewRoots,
+} from "./resolve.js";
+
+/**
+ * @param {{ root: string, dirs: Record<string, string> }} config
+ * @param {{ quiet?: boolean }} [options]
+ * @returns {Promise<{ count: number, manifest: Record<string, string>, outDir: string }>}
+ */
+export async function compileAll(config, options = {}) {
+  const outDir = path.join(config.dirs.generated, "templates");
+  const viewRoots = getViewRoots(config);
+  const jskFiles = discoverJskFiles(viewRoots);
+  const componentDirs = getComponentDirs(config);
+  const knownComponents = collectKnownComponents(componentDirs, jskFiles);
+
+  // Önceki çıktıyı temizle — silinmiş şablonlar kalmasın.
+  fs.rmSync(outDir, { recursive: true, force: true });
+  fs.mkdirSync(outDir, { recursive: true });
+
+  /** @type {Record<string, string>} */
+  const manifest = {};
+  /** @type {Map<string, { code: string, includes: string[] }>} */
+  const compiled = new Map();
+
+  for (const [viewId, file] of jskFiles) {
+    const source = fs.readFileSync(file, "utf8");
+    const relative = path.relative(config.root, file).split(path.sep).join("/");
+
+    let ast;
+    try {
+      ast = parseTemplate(source, { file: relative });
+    } catch (error) {
+      if (error instanceof CompileError) throw error;
+      throw error;
+    }
+
+    const { code, includes, components: usedComponents } = codegen(ast, {
+      viewId,
+      file: relative,
+      knownComponents: null,
+    });
+
+    for (const name of usedComponents) {
+      if (knownComponents.has(name)) continue;
+      const camel = name.charAt(0).toLowerCase() + name.slice(1);
+      if (knownComponents.has(camel)) continue;
+      if (!options.quiet) {
+        console.warn(`[jsk] ${relative}: component "${name}" was not found at compile time`);
+      }
+    }
+
+    compiled.set(viewId, { code, includes });
+  }
+
+  // Include hedefleri mevcut mu?
+  for (const [viewId, { includes }] of compiled) {
+    for (const id of includes) {
+      const normalized = normalizeIncludeId(id);
+      if (!compiled.has(normalized) && !jskFiles.has(normalized)) {
+        const file = jskFiles.get(viewId);
+        const relative = file
+          ? path.relative(config.root, file).split(path.sep).join("/")
+          : viewId;
+        throw new CompileError(`Unknown include "${id}"`, { file: relative });
+      }
+    }
+  }
+
+  for (const [viewId, { code }] of compiled) {
+    const outFile = path.join(outDir, `${viewId}.mjs`);
+    fs.mkdirSync(path.dirname(outFile), { recursive: true });
+    fs.writeFileSync(outFile, code, "utf8");
+    manifest[viewId] = `${viewId}.mjs`.split(path.sep).join("/");
+  }
+
+  const manifestPath = path.join(outDir, "manifest.json");
+  fs.writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`, "utf8");
+
+  // Bileşen adı → view id haritası (runtime kayıt için)
+  /** @type {Record<string, string>} */
+  const components = {};
+  for (const viewId of Object.keys(manifest)) {
+    const name = componentNameFromViewId(viewId);
+    if (name) components[name] = viewId;
+  }
+  fs.writeFileSync(
+    path.join(outDir, "components.json"),
+    `${JSON.stringify(components, null, 2)}\n`,
+    "utf8",
+  );
+
+  return { count: compiled.size, manifest, outDir };
+}
+
+/**
+ * Manifest yoksa veya herhangi bir `.jsk` daha yeniyse yeniden derler.
+ * Dev sunucu restart'ında build watch kaçırmış olsa bile şablonlar güncel kalır.
+ *
+ * @param {{ root: string, dirs: Record<string, string> }} config
+ * @returns {Promise<{ count: number, rebuilt: boolean }>}
+ */
+export async function ensureTemplatesCompiled(config) {
+  const viewRoots = getViewRoots(config);
+  const jskFiles = discoverJskFiles(viewRoots);
+  if (jskFiles.size === 0) {
+    return { count: 0, rebuilt: false };
+  }
+
+  const outDir = path.join(config.dirs.generated, "templates");
+  const manifestPath = path.join(outDir, "manifest.json");
+  let needs = !fs.existsSync(manifestPath);
+
+  if (!needs) {
+    const manifestMtime = fs.statSync(manifestPath).mtimeMs;
+    for (const file of jskFiles.values()) {
+      if (fs.statSync(file).mtimeMs > manifestMtime) {
+        needs = true;
+        break;
+      }
+    }
+  }
+
+  if (!needs) {
+    return { count: jskFiles.size, rebuilt: false };
+  }
+
+  const result = await compileAll(config, { quiet: true });
+  return { count: result.count, rebuilt: true };
+}
+
+/**
+ * Tek kaynak dizgisini derler (birim testleri).
+ * @param {string} source
+ * @param {{ viewId?: string, file?: string, knownComponents?: Set<string> }} [options]
+ * @returns {{ code: string, includes: string[], components: string[] }}
+ */
+export function compileSource(source, options = {}) {
+  const viewId = options.viewId ?? "test";
+  const ast = parseTemplate(source, { file: options.file ?? "test.jsk" });
+  return codegen(ast, {
+    viewId,
+    file: options.file ?? "test.jsk",
+    knownComponents: options.knownComponents ?? null,
+  });
+}

package/src/compile/errors.js

@@ -0,0 +1,66 @@
+/**
+ * Şablon derleme hataları. Satır/sütun korunur ki DX overlay ve CLI
+ * çıktısı kaynağa işaret edebilsin.
+ */
+
+/**
+ * @param {string} source
+ * @param {number} index
+ * @returns {{ line: number, column: number }}
+ */
+export function indexToLocation(source, index) {
+  let line = 1;
+  let column = 1;
+  const end = Math.min(index, source.length);
+  for (let i = 0; i < end; i++) {
+    if (source[i] === "\n") {
+      line += 1;
+      column = 1;
+    } else {
+      column += 1;
+    }
+  }
+  return { line, column };
+}
+
+/**
+ * @param {string} source
+ * @param {number} line
+ * @returns {string}
+ */
+function lineSnippet(source, line) {
+  const lines = source.split(/\r?\n/);
+  return lines[line - 1] ?? "";
+}
+
+export class CompileError extends Error {
+  /**
+   * @param {string} message
+   * @param {{ file?: string, source?: string, index?: number,
+   *   line?: number, column?: number }} [opts]
+   */
+  constructor(message, opts = {}) {
+    let line = opts.line;
+    let column = opts.column;
+    if ((line == null || column == null) && opts.source != null && opts.index != null) {
+      const loc = indexToLocation(opts.source, opts.index);
+      line = loc.line;
+      column = loc.column;
+    }
+
+    const where =
+      opts.file && line != null
+        ? `${opts.file}:${line}:${column ?? 1}`
+        : opts.file ?? "";
+    const snippet =
+      opts.source && line != null ? lineSnippet(opts.source, line).trimEnd() : "";
+    const head = where ? `${where}\n` : "";
+    const body = snippet ? `${message}\n\n  ${snippet}\n  ${" ".repeat((column ?? 1) - 1)}^` : message;
+
+    super(`${head}${body}`);
+    this.name = "CompileError";
+    this.file = opts.file;
+    this.line = line;
+    this.column = column;
+  }
+}