jskelet 0.3.5 → 0.4.0

package/src/compile/parse.js

@@ -0,0 +1,485 @@
+/**
+ * `.jsk` şablon ayrıştırıcı. HTML'e yakın sözdizimi + blok direktifleri.
+ * İstek anında çalışmaz; yalnızca build-time.
+ */
+import { CompileError } from "./errors.js";
+import { parseExpr } from "./expr.js";
+
+/** Self-closing HTML void elements. */
+const VOID = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
+
+/**
+ * @typedef {import('./expr.js').ExprNode} ExprNode
+ * @typedef {{ type: 'Text', value: string }} TextNode
+ * @typedef {{ type: 'Interp', expr: ExprNode, raw: boolean, index: number }} InterpNode
+ * @typedef {{ name: string, value: string | null, expr: ExprNode | null, bound: boolean, boolean: boolean, index: number }} AttrNode
+ * @typedef {{ type: 'Element', name: string, attrs: AttrNode[], children: AstNode[], selfClosing: boolean, index: number }} ElementNode
+ * @typedef {{ type: 'Component', name: string, attrs: AttrNode[], children: AstNode[], selfClosing: boolean, index: number }} ComponentNode
+ * @typedef {{ type: 'If', test: ExprNode, consequent: AstNode[], alternate: AstNode[], index: number }} IfNode
+ * @typedef {{ type: 'Each', list: ExprNode, item: string, indexName: string | null, children: AstNode[], index: number }} EachNode
+ * @typedef {{ type: 'Include', path: string, index: number }} IncludeNode
+ * @typedef {TextNode | InterpNode | ElementNode | ComponentNode | IfNode | EachNode | IncludeNode} AstNode
+ */
+
+/**
+ * @param {string} source
+ * @param {{ file?: string }} [options]
+ * @returns {AstNode[]}
+ */
+export function parseTemplate(source, options = {}) {
+  const parser = new TemplateParser(source, options.file);
+  return parser.parseNodes();
+}
+
+/**
+ * PascalCase bileşen mi?
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function isComponentTag(name) {
+  return /^[A-Z]/.test(name);
+}
+
+class TemplateParser {
+  /**
+   * @param {string} source
+   * @param {string} [file]
+   */
+  constructor(source, file) {
+    this.source = source;
+    this.file = file;
+    this.i = 0;
+  }
+
+  /**
+   * @param {string} message
+   * @param {number} [index]
+   * @returns {CompileError}
+   */
+  error(message, index = this.i) {
+    return new CompileError(message, {
+      file: this.file,
+      source: this.source,
+      index,
+    });
+  }
+
+  eof() {
+    return this.i >= this.source.length;
+  }
+
+  peek(n = 0) {
+    return this.source[this.i + n] ?? "";
+  }
+
+  startsWith(value) {
+    return this.source.startsWith(value, this.i);
+  }
+
+  /**
+   * @param {string} [until]
+   * @returns {AstNode[]}
+   */
+  parseNodes(until) {
+    /** @type {AstNode[]} */
+    const nodes = [];
+    while (!this.eof()) {
+      if (until && this.startsWith(until)) break;
+
+      if (this.startsWith("<!--")) {
+        this.skipComment();
+        continue;
+      }
+
+      if (this.startsWith("{#")) {
+        nodes.push(this.parseDirective());
+        continue;
+      }
+
+      if (this.startsWith("{{")) {
+        nodes.push(this.parseInterp());
+        continue;
+      }
+
+      if (this.startsWith("</")) {
+        // Parent closes — leave for caller.
+        break;
+      }
+
+      if (this.peek() === "<" && /[A-Za-z]/.test(this.peek(1))) {
+        nodes.push(this.parseTag());
+        continue;
+      }
+
+      nodes.push(this.parseText(until));
+    }
+    return nodes;
+  }
+
+  skipComment() {
+    const end = this.source.indexOf("-->", this.i + 4);
+    if (end === -1) throw this.error("Unterminated HTML comment");
+    this.i = end + 3;
+  }
+
+  /**
+   * @param {string} [until]
+   * @returns {TextNode}
+   */
+  parseText(until) {
+    const start = this.i;
+    while (!this.eof()) {
+      if (this.startsWith("{{") || this.startsWith("{#") || this.startsWith("<!--")) break;
+      if (this.peek() === "<") break;
+      if (until && this.startsWith(until)) break;
+      this.i += 1;
+    }
+    return { type: "Text", value: this.source.slice(start, this.i) };
+  }
+
+  /** @returns {InterpNode} */
+  parseInterp() {
+    const index = this.i;
+    let raw = false;
+    if (this.startsWith("{{{")) {
+      raw = true;
+      this.i += 3;
+    } else {
+      this.i += 2;
+    }
+    const close = raw ? "}}}" : "}}";
+    const end = this.source.indexOf(close, this.i);
+    if (end === -1) throw this.error("Unterminated interpolation", index);
+    const exprSrc = this.source.slice(this.i, end).trim();
+    if (!exprSrc) throw this.error("Empty interpolation", index);
+    const expr = parseExpr(exprSrc, 0, exprSrc.length, {
+      file: this.file,
+      templateSource: this.source,
+      templateIndex: this.i,
+    });
+    this.i = end + close.length;
+    return { type: "Interp", expr, raw, index };
+  }
+
+  /** @returns {IfNode | EachNode | IncludeNode} */
+  parseDirective() {
+    const index = this.i;
+    if (this.startsWith("{#if")) {
+      return this.parseIf(index);
+    }
+    if (this.startsWith("{#each")) {
+      return this.parseEach(index);
+    }
+    if (this.startsWith("{#include")) {
+      return this.parseInclude(index);
+    }
+    // `{# comment #}` — kapanış `#}` zorunlu; yoksa bilinmeyen direktif.
+    if (this.startsWith("{#")) {
+      const end = this.source.indexOf("#}", this.i + 2);
+      if (end === -1) {
+        throw this.error("Unknown directive", index);
+      }
+      this.i = end + 2;
+      return { type: "Text", value: "" };
+    }
+    throw this.error("Unknown directive", index);
+  }
+
+  /**
+   * @param {number} index
+   * @returns {IfNode}
+   */
+  parseIf(index) {
+    this.i += 4; // {#if
+    const closeBrace = this.source.indexOf("}", this.i);
+    if (closeBrace === -1) throw this.error("Unterminated {#if}", index);
+    const testSrc = this.source.slice(this.i, closeBrace).trim();
+    if (!testSrc) throw this.error("Empty {#if} condition", index);
+    const test = parseExpr(testSrc, 0, testSrc.length, {
+      file: this.file,
+      templateSource: this.source,
+      templateIndex: this.i,
+    });
+    this.i = closeBrace + 1;
+
+    const consequent = this.parseNodesUntil(["{#else}", "{/if}"]);
+    /** @type {AstNode[]} */
+    let alternate = [];
+
+    if (this.startsWith("{#else}")) {
+      this.i += "{#else}".length;
+      alternate = this.parseNodesUntil(["{/if}"]);
+    }
+
+    if (!this.startsWith("{/if}")) {
+      throw this.error("Expected {/if}", this.i);
+    }
+    this.i += "{/if}".length;
+
+    return { type: "If", test, consequent, alternate, index };
+  }
+
+  /**
+   * @param {string[]} markers
+   * @returns {AstNode[]}
+   */
+  parseNodesUntil(markers) {
+    /** @type {AstNode[]} */
+    const nodes = [];
+    while (!this.eof()) {
+      if (markers.some((m) => this.startsWith(m))) break;
+
+      if (this.startsWith("<!--")) {
+        this.skipComment();
+        continue;
+      }
+      if (this.startsWith("{#if") || this.startsWith("{#each") || this.startsWith("{#include")) {
+        nodes.push(this.parseDirective());
+        continue;
+      }
+      if (this.startsWith("{#")) {
+        // comment or unknown — parseDirective handles
+        const node = this.parseDirective();
+        if (node.type !== "Text" || node.value) nodes.push(node);
+        continue;
+      }
+      if (this.startsWith("{{")) {
+        nodes.push(this.parseInterp());
+        continue;
+      }
+      if (this.startsWith("</")) break;
+      if (this.peek() === "<" && /[A-Za-z]/.test(this.peek(1))) {
+        nodes.push(this.parseTag());
+        continue;
+      }
+      // Text until next special or marker
+      const start = this.i;
+      while (!this.eof()) {
+        if (markers.some((m) => this.startsWith(m))) break;
+        if (this.startsWith("{{") || this.startsWith("{#") || this.startsWith("<!--")) break;
+        if (this.peek() === "<") break;
+        this.i += 1;
+      }
+      if (this.i > start) {
+        nodes.push({ type: "Text", value: this.source.slice(start, this.i) });
+      } else if (!this.eof() && !markers.some((m) => this.startsWith(m))) {
+        // Stuck on unexpected char
+        throw this.error(`Unexpected character '${this.peek()}'`);
+      }
+    }
+    return nodes;
+  }
+
+  /**
+   * @param {number} index
+   * @returns {EachNode}
+   */
+  parseEach(index) {
+    this.i += 6; // {#each
+    const closeBrace = this.source.indexOf("}", this.i);
+    if (closeBrace === -1) throw this.error("Unterminated {#each}", index);
+    const head = this.source.slice(this.i, closeBrace).trim();
+    // `items as item` or `items as item, i`
+    const asMatch = head.match(/^(.+?)\s+as\s+([A-Za-z_$][\w$]*)\s*(?:,\s*([A-Za-z_$][\w$]*))?\s*$/);
+    if (!asMatch) {
+      throw this.error(
+        'Invalid {#each}: expected `{#each items as item}` or `{#each items as item, i}`',
+        index,
+      );
+    }
+    const list = parseExpr(asMatch[1].trim(), 0, asMatch[1].trim().length, {
+      file: this.file,
+      templateSource: this.source,
+      templateIndex: this.i,
+    });
+    this.i = closeBrace + 1;
+    const children = this.parseNodesUntil(["{/each}"]);
+    if (!this.startsWith("{/each}")) {
+      throw this.error("Expected {/each}", this.i);
+    }
+    this.i += "{/each}".length;
+    return {
+      type: "Each",
+      list,
+      item: asMatch[2],
+      indexName: asMatch[3] ?? null,
+      children,
+      index,
+    };
+  }
+
+  /**
+   * @param {number} index
+   * @returns {IncludeNode}
+   */
+  parseInclude(index) {
+    this.i += 9; // {#include
+    const closeBrace = this.source.indexOf("}", this.i);
+    if (closeBrace === -1) throw this.error("Unterminated {#include}", index);
+    const raw = this.source.slice(this.i, closeBrace).trim();
+    const strMatch = raw.match(/^["']([^"']+)["']$/);
+    if (!strMatch) {
+      throw this.error('{#include} path must be a string literal', index);
+    }
+    this.i = closeBrace + 1;
+    return { type: "Include", path: strMatch[1], index };
+  }
+
+  /** @returns {ElementNode | ComponentNode} */
+  parseTag() {
+    const index = this.i;
+    this.i += 1; // <
+    const nameStart = this.i;
+    while (!this.eof() && /[A-Za-z0-9_-]/.test(this.peek())) this.i += 1;
+    const name = this.source.slice(nameStart, this.i);
+    if (!name) throw this.error("Expected tag name", index);
+
+    const attrs = this.parseAttrs();
+    this.skipWs();
+
+    let selfClosing = false;
+    if (this.startsWith("/>")) {
+      selfClosing = true;
+      this.i += 2;
+    } else if (this.peek() === ">") {
+      this.i += 1;
+    } else {
+      throw this.error("Expected '>' or '/>'", this.i);
+    }
+
+    const component = isComponentTag(name);
+    const voidEl = !component && VOID.has(name.toLowerCase());
+
+    /** @type {AstNode[]} */
+    let children = [];
+    if (!selfClosing && !voidEl) {
+      children = this.parseNodesUntil([`</${name}>`]);
+      // Also allow parseNodes style — check closing tag
+      if (!this.startsWith(`</${name}>`)) {
+        // try case-sensitive exact
+        throw this.error(`Expected </${name}>`, this.i);
+      }
+      this.i += `</${name}>`.length;
+    }
+
+    if (component) {
+      return { type: "Component", name, attrs, children, selfClosing, index };
+    }
+    return {
+      type: "Element",
+      name,
+      attrs,
+      children,
+      selfClosing: selfClosing || voidEl,
+      index,
+    };
+  }
+
+  skipWs() {
+    while (!this.eof() && /\s/.test(this.peek())) this.i += 1;
+  }
+
+  /** @returns {AttrNode[]} */
+  parseAttrs() {
+    /** @type {AttrNode[]} */
+    const attrs = [];
+    for (;;) {
+      this.skipWs();
+      if (this.peek() === ">" || this.startsWith("/>") || this.eof()) break;
+
+      const index = this.i;
+      let bound = false;
+      if (this.peek() === ":") {
+        bound = true;
+        this.i += 1;
+      }
+
+      if (!/[A-Za-z_]/.test(this.peek())) {
+        throw this.error("Expected attribute name", this.i);
+      }
+      const nameStart = this.i;
+      while (!this.eof() && /[A-Za-z0-9_:-]/.test(this.peek())) this.i += 1;
+      let name = this.source.slice(nameStart, this.i);
+      // Strip leading colon already handled; name may include data-*
+      if (bound && name.startsWith(":")) name = name.slice(1);
+
+      this.skipWs();
+      if (this.peek() !== "=") {
+        attrs.push({
+          name,
+          value: null,
+          expr: null,
+          bound: false,
+          boolean: true,
+          index,
+        });
+        continue;
+      }
+      this.i += 1;
+      this.skipWs();
+
+      if (bound) {
+        // :name="expr" or :name='expr'
+        const quote = this.peek();
+        if (quote !== '"' && quote !== "'") {
+          throw this.error("Bound attribute value must be quoted", this.i);
+        }
+        this.i += 1;
+        const end = this.source.indexOf(quote, this.i);
+        if (end === -1) throw this.error("Unterminated attribute value", index);
+        const exprSrc = this.source.slice(this.i, end).trim();
+        const expr = parseExpr(exprSrc, 0, exprSrc.length, {
+          file: this.file,
+          templateSource: this.source,
+          templateIndex: this.i,
+        });
+        this.i = end + 1;
+        attrs.push({ name, value: null, expr, bound: true, boolean: false, index });
+        continue;
+      }
+
+      // Literal attribute
+      const quote = this.peek();
+      if (quote === '"' || quote === "'") {
+        this.i += 1;
+        const end = this.source.indexOf(quote, this.i);
+        if (end === -1) throw this.error("Unterminated attribute value", index);
+        const value = this.source.slice(this.i, end);
+        this.i = end + 1;
+        // Allow {{ }} inside attribute values? Skip for v1 — use :bind
+        if (value.includes("{{")) {
+          throw this.error(
+            `Interpolation inside attribute "${name}" is not supported; use :${name}="..."`,
+            index,
+          );
+        }
+        attrs.push({ name, value, expr: null, bound: false, boolean: false, index });
+        continue;
+      }
+
+      // Unquoted
+      const vStart = this.i;
+      while (!this.eof() && !/[\s>]/.test(this.peek()) && !this.startsWith("/>")) {
+        this.i += 1;
+      }
+      const value = this.source.slice(vStart, this.i);
+      attrs.push({ name, value, expr: null, bound: false, boolean: false, index });
+    }
+    return attrs;
+  }
+}

package/src/compile/resolve.js

@@ -0,0 +1,159 @@
+/**
+ * View kökleri ve `.jsk` dosya keşfi.
+ *
+ * Sıra: views, sonra shared/views, sonra her feature altındaki views.
+ * Aynı view id birden fazla kökte varsa son bulunan kazanır.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { toPascalCase } from "./codegen.js";
+
+/**
+ * @param {{ root: string, dirs: Record<string, string> }} config
+ * @returns {string[]} Mutlak view kökleri (var olanlar).
+ */
+export function getViewRoots(config) {
+  /** @type {string[]} */
+  const roots = [];
+  const { dirs, root } = config;
+
+  if (dirs.views && fs.existsSync(dirs.views)) {
+    roots.push(dirs.views);
+  }
+
+  const sharedViews = dirs.shared
+    ? path.join(dirs.shared, "views")
+    : path.join(root, "shared", "views");
+  if (fs.existsSync(sharedViews)) roots.push(sharedViews);
+
+  const featuresDir = dirs.features ?? path.join(root, "features");
+  if (fs.existsSync(featuresDir)) {
+    const features = fs
+      .readdirSync(featuresDir, { withFileTypes: true })
+      .filter((e) => e.isDirectory())
+      .map((e) => e.name)
+      .sort((a, b) => a.localeCompare(b));
+
+    for (const name of features) {
+      const views = path.join(featuresDir, name, "views");
+      if (fs.existsSync(views)) roots.push(views);
+    }
+  }
+
+  return roots;
+}
+
+/**
+ * Bileşen dizinleri: her view kökü altındaki `components/`.
+ * @param {{ root: string, dirs: Record<string, string> }} config
+ * @returns {string[]}
+ */
+export function getComponentDirs(config) {
+  return getViewRoots(config)
+    .map((root) => path.join(root, "components"))
+    .filter((dir) => fs.existsSync(dir));
+}
+
+/**
+ * @param {string[]} viewRoots
+ * @returns {Map<string, string>} viewId → mutlak `.jsk` yolu
+ */
+export function discoverJskFiles(viewRoots) {
+  /** @type {Map<string, string>} */
+  const map = new Map();
+
+  for (const root of viewRoots) {
+    collectJsk(root, root, map);
+  }
+
+  return map;
+}
+
+/**
+ * @param {string} dir
+ * @param {string} root
+ * @param {Map<string, string>} out
+ */
+function collectJsk(dir, root, out) {
+  if (!fs.existsSync(dir)) return;
+
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      collectJsk(full, root, out);
+      continue;
+    }
+    if (!entry.name.endsWith(".jsk")) continue;
+    const rel = path.relative(root, full).split(path.sep).join("/");
+    const viewId = rel.replace(/\.jsk$/i, "");
+    out.set(viewId, full);
+  }
+}
+
+/**
+ * `components/foo-bar.jsk` → `FooBar`
+ * @param {string} viewId
+ * @returns {string | null}
+ */
+export function componentNameFromViewId(viewId) {
+  const parts = viewId.split("/");
+  if (parts[0] !== "components" || parts.length < 2) return null;
+  const base = parts[parts.length - 1];
+  return toPascalCase(base);
+}
+
+/**
+ * Bilinen bileşen adları: JS named export'lar + derlenecek `.jsk` bileşenleri
+ * + yerleşik etiketler.
+ *
+ * @param {string[]} componentDirs
+ * @param {Map<string, string>} jskFiles
+ * @returns {Set<string>}
+ */
+export function collectKnownComponents(componentDirs, jskFiles) {
+  const known = new Set([
+    "Link",
+    "Image",
+    "Icon",
+    "CsrfField",
+    "PreloadImage",
+  ]);
+
+  for (const [viewId] of jskFiles) {
+    const name = componentNameFromViewId(viewId);
+    if (name) known.add(name);
+  }
+
+  for (const dir of componentDirs) {
+    collectJsComponentNames(dir, dir, known);
+  }
+
+  return known;
+}
+
+/**
+ * @param {string} dir
+ * @param {string} root
+ * @param {Set<string>} out
+ */
+function collectJsComponentNames(dir, root, out) {
+  if (!fs.existsSync(dir)) return;
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      collectJsComponentNames(full, root, out);
+      continue;
+    }
+    if (!entry.name.endsWith(".js")) continue;
+    if (entry.name === "loader.js") continue;
+    // Dosya adından PascalCase tahmin — export adı dosya içinde olabilir;
+    // bilinmeyen bileşen uyarısını azaltmak için her iki biçimi ekle.
+    const base = entry.name.replace(/\.js$/, "");
+    if (base === "index") continue;
+    out.add(toPascalCase(base));
+    // camelCase export'lar da yaygın: `list` → List ve list
+    out.add(base);
+    const pascal = toPascalCase(base);
+    out.add(pascal.charAt(0).toLowerCase() + pascal.slice(1));
+  }
+}

package/src/config/defaults.js

@@ -14,8 +14,12 @@ export const IMMUTABLE_CACHE = "public, max-age=31536000, immutable";
  * tek tek ezilebilir.
  */
 export const DEFAULT_DIRS = {
-  /** EJS layout + sayfalar + bileşenler. */
+  /** Layout + sayfalar + bileşenler (klasik kök). */
   views: "views",
+  /** Feature-first dikey dilimler (`features/<name>/{server,views,client}`). */
+  features: "features",
+  /** Özellikler arası paylaşılan server/views/client. */
+  shared: "shared",
   /** Statik dosyalar; build çıktısı da buraya yazılır. */
   public: "public",
   /** Island runtime ve entry'ler. */
@@ -24,7 +28,7 @@ export const DEFAULT_DIRS = {
   routes: "routes",
   /** Tailwind/PostCSS giriş dosyası. */
   styles: "styles/globals.css",
-  /** Build ara çıktıları (manifest, metafile, images). */
+  /** Build ara çıktıları (manifest, metafile, images, templates). */
   generated: ".jskelet",
 };
 

package/src/config/index.js

@@ -801,6 +801,10 @@ function resolveDirs(root, overrides) {
  * Uygulamanın layout'u yoksa framework'ün minimal layout'u kullanılır. Bu
  * sayede yeni bir proje tek bir route ile çalışır hâle gelir.
  *
+ * Öncelik: config `layout` → `layout.jsk` (derlenmiş) → `layout.ejs` →
+ * framework varsayılanı. Dönüş değeri kaynak dosya yoludur; `.jsk` için
+ * render katmanı derlenmiş modülü kullanır.
+ *
  * @param {Record<string, string>} dirs
  * @param {string} [override]
  * @returns {string}
@@ -808,6 +812,9 @@ function resolveDirs(root, overrides) {
 function resolveLayout(dirs, override) {
   if (override) return path.resolve(dirs.views, "..", override);
 
+  const jskLayout = path.join(dirs.views, "layout.jsk");
+  if (fs.existsSync(jskLayout)) return jskLayout;
+
   const appLayout = path.join(dirs.views, "layout.ejs");
   if (fs.existsSync(appLayout)) return appLayout;
 

package/src/dev-server.mjs

@@ -236,11 +236,13 @@ function run(args, label, passthrough) {
 const WATCH_DIRS = [
   config.dirs.routes,
   config.dirs.views,
+  config.dirs.features,
+  config.dirs.shared,
   path.join(ROOT, "lib"),
   ...(config.watch ?? []).map((dir) => path.resolve(ROOT, dir)),
-];
+].filter(Boolean);
 
-const WATCH_EXTENSIONS = /\.(?:js|mjs|json|ejs)$/;
+const WATCH_EXTENSIONS = /\.(?:js|mjs|json|ejs|jsk)$/;
 
 /** @type {import('node:child_process').ChildProcess | null} */
 let server = null;