azoxjs 0.1.0 → 0.3.0

package/core/commands/create.js

@@ -88,18 +88,46 @@ function starterPage(name) {
   import Counter from '../components/Counter.azox';
   import { signal } from 'azox/reactivity';
 
-  const count = signal(0);
+  const tasks = signal([
+    { id: 1, title: 'Edit this page', done: true },
+    { id: 2, title: 'Add a page of your own', done: false },
+  ]);
+  const draft = signal('');
+  let nextId = 3;
 </script>
 
 <main class="page">
   <h1>${name}</h1>
   <p>Built with Azox.</p>
 
-  <Counter label="Clicks" value={count()} />
-
-  <button on:click={() => count.set(count() + 1)}>
-    Add one
-  </button>
+  <!-- Each Counter holds a count of its own. -->
+  <Counter label="Left" />
+  <Counter label="Right" />
+
+  <!-- key={task.id} gives each row an identity, so adding to the
+       list leaves the rows already there untouched. -->
+  <ul>
+    <each item={tasks()} as="task" index="i" key={task.id}>
+      <li>
+        <if cond={task.done}>
+          <s>{i + 1}. {task.title}</s>
+        <else />
+          <span>{i + 1}. {task.title}</span>
+        </if>
+      </li>
+    </each>
+  </ul>
+
+  <input
+    value={draft()}
+    on:input={(e) => draft.set(e.target.value)}
+    placeholder="Add a task"
+  />
+  <button on:click={() => {
+    if (!draft()) return;
+    tasks.set([...tasks(), { id: nextId++, title: draft(), done: false }]);
+    draft.set('');
+  }}>Add</button>
 
   <p><a href="/about">About</a></p>
 </main>
@@ -117,14 +145,20 @@ function aboutPage(name) {
 `;
 }
 
-// Components take props and render markup. State lives in the page
-// that uses them.
+// A component may hold state of its own, and each use gets its own
+// copy — the two Counters on the starter page count independently.
 function starterComponent() {
   return `<script>
-  const { label, value } = props();
+  import { signal } from 'azox/reactivity';
+
+  const { label } = props();
+  const count = signal(0);
 </script>
 
-<p class="counter">{label}: {value}</p>
+<span class="counter">
+  {label}: {count()}
+  <button on:click={() => count.set(count() + 1)}>+</button>
+</span>
 `;
 }
 

package/core/commands/dev.js

@@ -7,7 +7,7 @@
 import { resolve } from 'node:path';
 import { existsSync } from 'node:fs';
 
-import { buildAll, BuildError, PAGES_DIR, BUILD_DIR } from '../build.js';
+import { buildAll, BuildError, PAGES_DIR, PUBLIC_DIR, COMPONENTS_DIR, BUILD_DIR } from '../build.js';
 import { createDevServer } from '../dev/server.js';
 import { watchDirectory } from '../dev/watcher.js';
 import { injectLiveReload } from '../dev/liveReload.js';
@@ -58,24 +58,48 @@ export async function devCommand({ flags }) {
   console.log('  Watching for changes. Press Ctrl+C to stop.');
   console.log('');
 
-  const stopWatching = watchDirectory(
-    pagesDir,
-    (filename) => {
-      const result = rebuild(projectDir);
-      dev.setBuildError(result.ok ? null : result.error);
-
-      if (result.ok) {
-        console.log(`  rebuilt${filename ? ` (${filename})` : ''}`);
-      } else {
-        reportFailure(result.error);
-      }
-
-      // Reload either way: on failure the browser picks up the error
-      // page the server renders in place of the build output.
-      dev.reload();
+  const onChange = (filename) => {
+    const result = rebuild(projectDir);
+    dev.setBuildError(result.ok ? null : result.error);
+
+    if (result.ok) {
+      console.log(`  rebuilt${filename ? ` (${filename})` : ''}`);
+    } else {
+      reportFailure(result.error);
+    }
+
+    // Reload either way: on failure the browser picks up the error
+    // page the server renders in place of the build output.
+    dev.reload();
+  };
+
+  // Everything a page is built from, not just the pages themselves.
+  // Watching pages/ alone meant editing a component or a stylesheet
+  // did nothing until an unrelated .azox file was touched.
+  const watched = [
+    { dir: pagesDir, filter: (name) => name.endsWith('.azox') },
+    { dir: resolve(projectDir, COMPONENTS_DIR), filter: (name) => name.endsWith('.azox') },
+    // public/ holds stylesheets, fonts and images; any of them
+    // changing is worth a reload.
+    { dir: resolve(projectDir, PUBLIC_DIR), filter: () => true },
+    // A page can import a .json file for its content, and a dynamic
+    // route builds its pages from one. Editing the data has to rebuild
+    // or the new entry never appears. Not recursive: the project root
+    // also holds the build output, and watching that rebuilds forever.
+    {
+      dir: projectDir,
+      filter: (name) => name.endsWith('.json') && !name.includes('package-lock'),
+      recursive: false,
     },
-    { filter: (filename) => filename.endsWith('.azox') }
-  );
+  ];
+
+  const stoppers = watched
+    .filter(({ dir }) => existsSync(dir))
+    .map(({ dir, filter, recursive }) => watchDirectory(dir, onChange, { filter, recursive }));
+
+  const stopWatching = () => {
+    for (const stop of stoppers) stop();
+  };
 
   const shutdown = async () => {
     stopWatching();

package/core/commands/doctor.js

@@ -5,6 +5,7 @@ import { readFileSync } from 'node:fs';
 
 import { parseAzox } from '../compiler/parser.js';
 import { resolveComponents } from '../compiler/resolveComponents.js';
+import { createNodeResolver } from '../nodeResolver.js';
 import { listRoutes, PAGES_DIR } from '../build.js';
 import { BANNER, VERSION } from '../meta.js';
 
@@ -38,7 +39,11 @@ export function doctorCommand() {
   // build.
   for (const route of routes) {
     try {
-      resolveComponents(parseAzox(readFileSync(route.sourcePath, 'utf8')), route.sourcePath);
+      resolveComponents(
+        parseAzox(readFileSync(route.sourcePath, 'utf8')),
+        route.sourcePath,
+        createNodeResolver()
+      );
       checks.push({ ok: true, label: `${route.url}`, note: `${PAGES_DIR}/${route.name}.azox` });
     } catch (error) {
       checks.push({