Feat/rebase complete

README.md

@@ -21,3 +21,6 @@ https://rebase.js.org
 ## License
 
 MIT
+
+
+Rebase 0.3 includes reactive blocks, reusable components, and built-in routing.

Roadmap.md

@@ -1,13 +1,13 @@
-# Roadmap
+# Rebase roadmap
 
-- [ ] Add `{#each}`
-- [ ] Add `{#if}` and `{:else}` and `{:elif}`
-- [ ] Rebase should update its content automatically, a bit like Svelte
-- [ ] Routing (such as SvelteKit or Vite) is built-in, without any more installations
-- [ ] we can save components via `.rebase` files to reuse them like `<CoolCard title="CardTitle" author="CardAuthor">`
-- [ ] Also, routing and paging should be built-in so we can go to different (clean format) URLs
-- [ ] `rebase.config.js`
-- [ ] `on:` activator, like `on:click`, `on:change`, `on:...`
-- [ ] Variables inside the code, using `{VARIABLENAME}`
-- [ ] the good old structure form Vue, so first theres `<script>...</script>`, then `<template>...</template>` and lastly `<style>...</style>` (you can also switch style and template if you want)
-- [ ] Dynamic Content Loading using `[slug]` or so like in svelte, for blogs
+- [x] Add `{#each}`
+- [x] Add `{#if}`, `{:else}`, `{:elif}`
+- [x] Automatic reactive updates
+- [x] Built-in routing
+- [x] Reusable `.rebase` components
+- [x] Clean URL routing and dynamic `[slug]` parameters
+- [x] `rebase.config.js`
+- [x] `on:` event activators
+- [x] `{VARIABLE}` interpolation
+- [x] Vue-style `script/template/style` sections in any order
+- [x] Dynamic route parameters

package.json

@@ -1,12 +1,9 @@
 {
   "name": "rebase",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A compiler-first JavaScript framework for building web interfaces.",
   "type": "module",
   "private": true,
-  "scripts": {
-    "build": "node packages/compiler/src/cli.js",
-    "test": "node --test"
-  },
+  "scripts": {"build": "node packages/compiler/src/cli.js", "test": "node --test"},
   "license": "MIT"
-}
+}

packages/compiler/index.js

@@ -0,0 +1 @@
+export { compile, compileFile } from "./src/compiler.js";

packages/compiler/src/compiler.js

@@ -1,30 +1,42 @@
 import fs from "node:fs";
 import path from "node:path";
 
+const RESERVED = new Set(["const","let","var","function","return","if","else","for","while","class","import","export","from"]);
+
 export function compile(source) {
-  const script = source.match(/<script[^>]*>([\\s\\S]*?)<\\/script>/i)?.[1]?.trim() ?? "";
-  const style = source.match(/<style[^>]*>([\\s\\S]*?)<\\/style>/i)?.[1]?.trim() ?? "";
-  const template = source
-    .replace(/<script[^>]*>[\\s\\S]*?<\\/script>/gi, "")
-    .replace(/<style[^>]*>[\\s\\S]*?<\\/style>/gi, "")
-    .trim();
-
-  const names = [
-    ...[...script.matchAll(/(?:const|let|var)\\s+([A-Za-z_$][\\w$]*)/g)].map(m => m[1]),
-    ...[...script.matchAll(/function\\s+([A-Za-z_$][\\w$]*)/g)].map(m => m[1])
-  ];
-  const returned = [...new Set(names)];
+  const sections = extractSections(source);
+  const imports = [...sections.script.matchAll(/^\s*import\s+([\s\S]*?)\s+from\s+["']([^"']+)["']\s*;?\s*$/gm)]
+    .map(m => ({ statement: m[0].trim(), specifier: m[1].trim(), source: m[2] }));
+
+  let setup = sections.script;
+  for (const item of imports) setup = setup.replace(item.statement, "");
+  setup = setup.trim();
+
+  const bindings = collectBindings(setup);
+  const importCode = imports.map(item => {
+    const source = item.source.endsWith(".rebase") ? item.source.slice(0, -7) + ".js" : item.source;
+    return `import ${item.specifier} from ${JSON.stringify(source)};`;
+  });
+
+  const componentNames = imports
+    .map(item => item.specifier.match(/^(?:\{\s*)?([A-Za-z_$][\w$]*)/)?.[1])
+    .filter(Boolean);
 
   const code = [
+    ...importCode,
     'import { component } from "rebase";',
-    'export default component({',
-    `  setup() {\\n    ${script.replace(/\\n/g, "\\n    ")}\\n    return { ${returned.join(", ")} };\\n  },`,
-    `  template: ${JSON.stringify(template)},`,
-    `  style: ${JSON.stringify(style)}`,
-    '});'
-  ].join("\\n");
-
-  return { script, template, style, code };
+    "export default component({",
+    "  setup() {",
+    indent(setup),
+    `    return { ${bindings.join(", ")} };`,
+    "  },",
+    `  template: ${JSON.stringify(transformComponents(sections.template))},`,
+    `  style: ${JSON.stringify(sections.style)},`,
+    `  components: { ${componentNames.map(name => `${name}: ${name}`).join(", ")} }`,
+    "});"
+  ].join("\n");
+
+  return { ...sections, imports, bindings, code };
 }
 
 export function compileFile(input, output) {
@@ -33,3 +45,34 @@ export function compileFile(input, output) {
   fs.writeFileSync(output, result.code + "\n");
   return result;
 }
+
+function extractSections(source) {
+  const blocks = [...source.matchAll(/<(script|template|style)(?:\s[^>]*)?>([\s\S]*?)<\/\1>/gi)];
+  const sections = { script: "", template: "", style: "" };
+  for (const match of blocks) sections[match[1].toLowerCase()] = match[2].trim();
+  if (!blocks.some(m => m[1].toLowerCase() === "template")) {
+    sections.template = source
+      .replace(/<(script|style)(?:\s[^>]*)?>[\s\S]*?<\/\1>/gi, "")
+      .trim();
+  }
+  return sections;
+}
+
+function collectBindings(script) {
+  const names = new Set();
+  for (const match of script.matchAll(/(?:const|let|var)\s+([A-Za-z_$][\w$]*)/g)) names.add(match[1]);
+  for (const match of script.matchAll(/function\s+([A-Za-z_$][\w$]*)\s*\(/g)) names.add(match[1]);
+  return [...names].filter(name => !RESERVED.has(name));
+}
+
+function transformComponents(template) {
+  return template
+    .replace(/<([A-Z][A-Za-z0-9_$-]*)(\s[^>]*)?\s*\/\s*>/g,
+      '<rebase-component data-component="$1"$2></rebase-component>')
+    .replace(/<([A-Z][A-Za-z0-9_$-]*)(\s[^>]*)>([\s\S]*?)<\/\1>/g,
+      '<rebase-component data-component="$1"$2>$3</rebase-component>');
+}
+
+function indent(value) {
+  return value ? value.split("\n").map(line => "    " + line).join("\n") : "    // no script";
+}

packages/compiler/test/compiler.test.js

@@ -2,22 +2,21 @@ import test from "node:test";
 import assert from "node:assert/strict";
 import { compile } from "../src/compiler.js";
 
-test("compiles Vue-style sections in any order", () => {
-  const result = compile(`
-    <style>.app { color: red; }</style>
-    <template><p>{message}</p></template>
-    <script>const message = "hello";</script>
-  `);
+test("compiles sections in any order", () => {
+  const result = compile("<style>.app { color: red; }</style><template><p>{message}</p></template><script>const message = \"hello\";</script>");
   assert.equal(result.template, "<p>{message}</p>");
   assert.equal(result.style, ".app { color: red; }");
-  assert.match(result.code, /return \\{ message \\};/);
+  assert.match(result.code, /return \{ message \};/);
 });
 
 test("rewrites .rebase imports and custom components", () => {
-  const result = compile(`
-    <script>import Card from "./Card.rebase";</script>
-    <template><Card title="Hello" /></template>
-  `);
-  assert.match(result.code, /from "\\.\\/Card\\.js"/);
-  assert.match(result.code, /data-component=\\\"Card\\\"/);
+  const result = compile("<script>import Card from \"./Card.rebase\";</script><template><Card title=\"Hello\" /></template>");
+  assert.match(result.code, /from \"\.\/Card\.js\"/);
+  assert.match(result.code, /data-component=\"Card\"/);
+});
+
+test("keeps each/if syntax for the runtime", () => {
+  const result = compile("<template>{#if ok}<p>{#each items as item}{item}{/each}</p>{:else}<p>no</p>{/if}</template><script>const ok=true; const items=[1,2];</script>");
+  assert.match(result.template, /#each/);
+  assert.match(result.template, /#if/);
 });