@apex-stack/core 0.7.0 → 0.7.2

package/dist/{build-NA6JEP3F.js → build-C3FW7BTM.js}

@@ -7,7 +7,7 @@ import {
   renderPage,
   resolveApexConfig,
   scanPages
-} from "./chunk-7CBGVRBB.js";
+} from "./chunk-EVFABT7B.js";
 import "./chunk-PMLGY6Z3.js";
 
 // src/commands/build.ts
@@ -19,10 +19,22 @@ import { createServer as createViteServer } from "vite";
 
 // src/build/buildClient.ts
 import { existsSync, readdirSync, readFileSync } from "fs";
+import { createRequire } from "module";
 import { join } from "path";
+import { pathToFileURL } from "url";
 import { apex } from "@apex-stack/vite";
 import { build } from "vite";
 var VIRT = "virtual:apex-client:";
+async function tailwindPlugin(root) {
+  try {
+    const req = createRequire(join(root, "package.json"));
+    const mod = await import(pathToFileURL(req.resolve("@tailwindcss/vite")).href);
+    const tw = mod.default ?? mod;
+    return tw();
+  } catch {
+    return null;
+  }
+}
 function entryName(pageId) {
   return pageId.replace(/^\/pages\//, "").replace(/\.alpine$/, "").replace(/[^a-zA-Z0-9]+/g, "_");
 }
@@ -31,6 +43,9 @@ async function buildClient(root, routes, outDir, base = "/") {
   for (const r of routes) input[entryName(r.pageId)] = `${VIRT}${r.pageId}`;
   const storesDir = join(root, "stores");
   const storeIds = existsSync(storesDir) ? readdirSync(storesDir).filter((f) => f.endsWith(".ts") || f.endsWith(".js")).map((f) => `/stores/${f}`) : [];
+  const appCssRel = ["app.css", "styles/app.css", "src/app.css"].find(
+    (f) => existsSync(join(root, f))
+  );
   const entryPlugin = {
     name: "apex:client-entries",
     resolveId(id) {
@@ -40,6 +55,7 @@ async function buildClient(root, routes, outDir, base = "/") {
       if (id.startsWith(`\0${VIRT}`)) {
         const pageId = id.slice(`\0${VIRT}`.length);
         return [
+          ...appCssRel ? [`import ${JSON.stringify(`/${appCssRel}`)}`] : [],
           `import Alpine from 'alpinejs'`,
           ...storeIds.map((sid, i) => `import __s${i} from ${JSON.stringify(sid)}`),
           `import ${JSON.stringify(pageId)}`,
@@ -50,11 +66,12 @@ async function buildClient(root, routes, outDir, base = "/") {
       }
     }
   };
+  const tw = await tailwindPlugin(root);
   await build({
     root,
     base,
     logLevel: "warn",
-    plugins: [apex({ clientRuntime: "@apex-stack/core/client" }), entryPlugin],
+    plugins: [...tw ? [tw] : [], apex({ clientRuntime: "@apex-stack/core/client" }), entryPlugin],
     build: {
       outDir,
       emptyOutDir: false,
@@ -65,14 +82,28 @@ async function buildClient(root, routes, outDir, base = "/") {
   const manifest = JSON.parse(
     readFileSync(join(outDir, ".vite", "manifest.json"), "utf8")
   );
+  const collectCss = (key, seen) => {
+    const m = manifest[key];
+    if (!m || seen.has(key)) return [];
+    seen.add(key);
+    const out = [...m.css ?? []];
+    for (const imp of m.imports ?? []) out.push(...collectCss(imp, seen));
+    return out;
+  };
   const prefix = base.endsWith("/") ? base : `${base}/`;
   const hrefs = /* @__PURE__ */ new Map();
   for (const r of routes) {
     const virt = `${VIRT}${r.pageId}`;
-    const entry = Object.values(manifest).find(
-      (m) => m.isEntry && typeof m.src === "string" && (m.src === virt || m.src.endsWith(virt))
-    );
-    if (entry) hrefs.set(r.pageId, `${prefix}${entry.file}`);
+    const key = Object.keys(manifest).find((k) => {
+      const m = manifest[k];
+      return m?.isEntry && typeof m.src === "string" && (m.src === virt || m.src.endsWith(virt));
+    });
+    if (!key) continue;
+    const css = [...new Set(collectCss(key, /* @__PURE__ */ new Set()))];
+    hrefs.set(r.pageId, {
+      js: `${prefix}${manifest[key]?.file}`,
+      css: css.map((c) => `${prefix}${c}`)
+    });
   }
   return hrefs;
 }
@@ -209,7 +240,8 @@ var buildCommand = defineCommand({
           runtimeConfig,
           publicConfig
         };
-        const html = args.islands ? await renderIslandsPage(common) : await renderPage({ ...common, clientHref: hrefs.get(route.pageId) });
+        const assets = hrefs.get(route.pageId);
+        const html = args.islands ? await renderIslandsPage(common) : await renderPage({ ...common, clientHref: assets?.js, clientCss: assets?.css });
         const dest = join3(outDir, outFile(route.pattern));
         mkdirSync(dirname(dest), { recursive: true });
         writeFileSync(dest, html);
@@ -278,7 +310,8 @@ async function buildServerTarget(root, outDir, outLabel, routes) {
     routes: routes.map((r) => ({
       ...r,
       serverFile: server.modules[r.pageId],
-      clientHref: clientHrefs.get(r.pageId)
+      clientHref: clientHrefs.get(r.pageId)?.js,
+      clientCss: clientHrefs.get(r.pageId)?.css
     })),
     components,
     api,

package/dist/{chunk-7CBGVRBB.js → chunk-EVFABT7B.js}

@@ -205,6 +205,7 @@ async function renderPage(opts) {
     clientHref: opts.clientHref,
     storeIds: stores.map((s) => s.id),
     appCss: opts.appCss,
+    clientCss: opts.clientCss,
     headTags: renderHead(head),
     configScript: clientConfigScript(opts.publicConfig ?? {})
   });
@@ -218,27 +219,29 @@ function shell({
   clientHref,
   storeIds = [],
   appCss,
+  clientCss = [],
   headTags = "<title>Apex JS</title>",
   configScript = ""
 }) {
   const storeImports = storeIds.map((id, i) => `  import __s${i} from ${JSON.stringify(id)}`).join("\n");
   const storeRegs = storeIds.map((_, i) => `  Alpine.store(__s${i}.name, __s${i}.factory())`).join("\n");
   const clientScript = clientHref ? `<script type="module" src="${clientHref}"></script>` : `<script type="module">
-${appCss ? `  import ${JSON.stringify(appCss)}
-` : ""}  import Alpine from 'alpinejs'
+  import Alpine from 'alpinejs'
 ${storeImports ? `${storeImports}
 ` : ""}  import ${JSON.stringify(pageId)}
   window.Alpine = Alpine
 ${storeRegs ? `${storeRegs}
 ` : ""}  Alpine.start()
 </script>`;
+  const cssLinks = [...appCss ? [appCss] : [], ...clientCss].map((href) => `<link rel="stylesheet" href="${href}" />`).join("\n  ");
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  ${headTags}
+  ${cssLinks ? `${cssLinks}
+  ` : ""}${headTags}
   <style>${css}</style>
 </head>
 <body>

package/dist/cli.js

@@ -147,9 +147,9 @@ var main = defineCommand2({
   },
   subCommands: {
     new: newCommand,
-    dev: () => import("./dev-6SH5IYNT.js").then((m) => m.devCommand),
-    build: () => import("./build-NA6JEP3F.js").then((m) => m.buildCommand),
-    start: () => import("./start-7HSIYO6C.js").then((m) => m.startCommand),
+    dev: () => import("./dev-SXOWAX4N.js").then((m) => m.devCommand),
+    build: () => import("./build-C3FW7BTM.js").then((m) => m.buildCommand),
+    start: () => import("./start-VBGP3HFC.js").then((m) => m.startCommand),
     make: () => import("./make-VAYO5GWA.js").then((m) => m.makeCommand),
     add: () => import("./add-M3YLIFF5.js").then((m) => m.addCommand),
     theme: () => import("./theme-UUOIV44V.js").then((m) => m.themeCommand),

package/dist/{dev-6SH5IYNT.js → dev-SXOWAX4N.js}

@@ -24,7 +24,7 @@ var devCommand = defineCommand({
     process.stdout.write(banner());
     const sp = spinner(`Starting dev server${args.islands ? " (islands mode)" : ""}\u2026`);
     try {
-      const { startDevServer } = await import("./server-SSHQHMWY.js");
+      const { startDevServer } = await import("./server-AV533LKD.js");
       const { port: actual } = await startDevServer({ root, port, islands: Boolean(args.islands) });
       sp.succeed("Dev server ready");
       ready([

package/dist/{server-SSHQHMWY.js → server-AV533LKD.js}

@@ -19,7 +19,7 @@ import {
   renderPage,
   resolveApexConfig,
   scanPages
-} from "./chunk-7CBGVRBB.js";
+} from "./chunk-EVFABT7B.js";
 import "./chunk-PMLGY6Z3.js";
 
 // src/dev/server.ts
@@ -150,9 +150,8 @@ function fileTree(root, errorFile) {
       if (++count > 600) break;
       const childRel = rel ? `${rel}/${e.name}` : e.name;
       if (e.isDirectory()) {
-        const onPath = errRel === childRel || errRel.startsWith(`${childRel}/`);
         items.push(
-          `<details class="tdir"${onPath ? " open" : ""}><summary>${FOLDER_ICON}<span>${esc(e.name)}</span></summary>${walk(join(dir, e.name), childRel, depth + 1)}</details>`
+          `<details class="tdir" open><summary>${FOLDER_ICON}<span>${esc(e.name)}</span></summary>${walk(join(dir, e.name), childRel, depth + 1)}</details>`
         );
       } else {
         const isErr = childRel === errRel;
@@ -244,7 +243,7 @@ var tabs = document.querySelectorAll('.tabs button');
 tabs.forEach(function (b) {
   b.addEventListener('click', function () {
     tabs.forEach(function (x) { x.classList.toggle('active', x === b); });
-    ['frames','raw','tree'].forEach(function (v) {
+    ['frames','raw'].forEach(function (v) {
       var el = document.getElementById('view-' + v);
       if (el) el.hidden = v !== b.dataset.view;
     });
@@ -260,8 +259,22 @@ function renderErrorPage(error, opts) {
   const message = error.message || String(error);
   const stack = error.stack || "";
   const frames = parseFrames(stack, opts.root);
-  const origin = frames.find((f) => f.app) ?? frames[0];
-  const framesHtml = frames.length ? frames.map((f) => frameCard(f, opts.root)).join("") : '<p class="sub">No stack frames available.</p>';
+  const v = error;
+  const rawFile = v.loc?.file ?? v.id ?? v.file;
+  const locFile = typeof rawFile === "string" ? rawFile.replace(/\?.*$/, "").replace(/[\\/]/g, sep) : "";
+  let synthetic;
+  if (locFile && existsSync(locFile) && locFile.startsWith(opts.root) && !frames.some((f) => f.file === locFile)) {
+    synthetic = {
+      func: "compile error",
+      file: locFile,
+      line: v.loc?.line ?? 1,
+      col: v.loc?.column ?? 1,
+      app: true
+    };
+  }
+  const allFrames = synthetic ? [synthetic, ...frames] : frames;
+  const origin = synthetic ?? frames.find((f) => f.app) ?? frames[0];
+  const framesHtml = allFrames.length ? allFrames.map((f) => frameCard(f, opts.root)).join("") : '<p class="sub">No stack frames available.</p>';
   const body = `
     <div class="brand">${MARK} Apex JS <span class="pill err">Dev error</span></div>
     <p class="kind">${esc(kind)}</p>
@@ -283,6 +296,22 @@ function renderErrorPage(error, opts) {
     <p class="foot">Click a frame's \u2197 to open it in your editor \xB7 fix &amp; save to auto-reload.</p>`;
   return page(`${kind} \u2014 Apex JS`, body, OPEN_JS);
 }
+function renderNoProjectPage(root) {
+  let apps = [];
+  try {
+    apps = readdirSync(root, { withFileTypes: true }).filter((e) => e.isDirectory() && !IGNORE_DIRS.has(e.name) && !e.name.startsWith(".")).filter((e) => existsSync(join(root, e.name, "pages", "index.alpine"))).map((e) => e.name).slice(0, 16);
+  } catch {
+  }
+  const suggest = apps.length ? `<p class="sub">Did you mean to run it inside one of these apps?</p><ul class="routes">${apps.map((a) => `<li>cd ${esc(a)} &amp;&amp; apex dev</li>`).join("")}</ul>` : `<p class="sub">Scaffold a new app:</p><ul class="routes"><li>npm create apexjs@latest my-app</li></ul>`;
+  const body = `
+    <div class="brand">${MARK} Apex JS <span class="pill nf">No app here</span></div>
+    <p class="kind nf">No pages found</p>
+    <h1>This folder isn't an Apex app</h1>
+    <p class="sub"><code>apex dev</code> looks for <code>pages/*.alpine</code> in <code>${esc(root)}</code>, but found none \u2014 run it from inside your app's folder.</p>
+    ${suggest}
+    <p class="foot">Every Apex app has a <code>pages/</code> directory with at least <code>pages/index.alpine</code>.</p>`;
+  return page("No Apex app \u2014 Apex JS", body);
+}
 function renderNotFoundPage(url, routes) {
   const list = routes.length ? routes.map((r) => `<li>${esc(r.pattern)}</li>`).join("") : "<li>no pages yet \u2014 add pages/index.alpine</li>";
   const body = `
@@ -422,6 +451,11 @@ async function startDevServer(options) {
           setResponseHeader(event, "Content-Type", "text/html");
           return await vite.transformIndexHtml(url, renderNotFoundPage(url, routes));
         }
+        if (!existsSync2(join2(options.root, matched.pageId))) {
+          setResponseStatus(event, 404);
+          setResponseHeader(event, "Content-Type", "text/html");
+          return await vite.transformIndexHtml(url, renderNoProjectPage(options.root));
+        }
         const { registry, css: componentCss } = await loadComponents(
           options.root,
           (id) => ssrLoad(id)

package/dist/{start-7HSIYO6C.js → start-VBGP3HFC.js}

@@ -11,7 +11,7 @@ import {
   matchRoute,
   renderIslandsPage,
   renderPage
-} from "./chunk-7CBGVRBB.js";
+} from "./chunk-EVFABT7B.js";
 import "./chunk-PMLGY6Z3.js";
 
 // src/commands/start.ts
@@ -130,6 +130,7 @@ async function startProdServer(options) {
         registry,
         componentCss,
         clientHref: route?.clientHref,
+        clientCss: route?.clientCss,
         runtimeConfig,
         publicConfig,
         locals: event.context.apexLocals ?? {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apex-stack/core",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "The full-stack meta-framework for Alpine.js — CLI and runtime",
   "type": "module",
   "license": "MIT",

package/vscode/version.txt

@@ -1 +1 @@
-0.1.3
+0.1.4