@stacksjs/stx 0.2.113 → 0.2.114

package/dist/menubar.js

@@ -0,0 +1,103 @@
+import { createPreferences, createWindow, setAutoLaunch } from "@stacksjs/desktop";
+import { renderTemplate } from "./render.js";
+const MENU_BAR_WINDOW = {
+  width: 320,
+  height: 640,
+  systemTray: !0,
+  hideDockIcon: !0,
+  titlebarHidden: !0,
+  resizable: !1,
+  alwaysOnTop: !0,
+  darkMode: !0
+}, JSON_HEADERS = { "Content-Type": "application/json; charset=utf-8" };
+export function normalizeRouteKey(key) {
+  const [first, ...rest] = key.trim().split(/\s+/);
+  return rest.length ? `${first.toUpperCase()} ${rest.join(" ")}` : `GET ${first}`;
+}
+export function toResponse(result) {
+  if (result instanceof Response)
+    return result;
+  if (result === void 0)
+    return new Response(null, { status: 204 });
+  return new Response(JSON.stringify(result), { headers: JSON_HEADERS });
+}
+export function applyPreferencePatch(preferences, patch) {
+  const known = preferences.getAll();
+  for (const [key, value] of Object.entries(patch))
+    if (key in known)
+      preferences.set(key, value);
+  return preferences.getAll();
+}
+export function createMenuBarApp(options) {
+  const preferences = createPreferences({
+    name: options.name.toLowerCase(),
+    defaults: options.preferences ?? {}
+  }), routes = new Map(Object.entries(options.routes ?? {}).map(([key, handler]) => [normalizeRouteKey(key), handler])), builtins = {
+    "GET /api/preferences": () => preferences.getAll(),
+    "POST /api/preferences": async (request) => applyPreferencePatch(preferences, await request.json()),
+    "GET /api/menu": () => options.menu?.(preferences) ?? []
+  };
+  for (const [key, handler] of Object.entries(builtins))
+    if (!routes.has(key))
+      routes.set(key, handler);
+  let server = null, window = null, url = null;
+  async function renderPopup() {
+    const context = await options.context?.(preferences) ?? {}, html = await renderTemplate(options.template, {
+      context,
+      wrapInDocument: !0,
+      title: options.name
+    });
+    return new Response(html, { headers: { "Content-Type": "text/html; charset=utf-8" } });
+  }
+  function serve() {
+    server = Bun.serve({
+      port: options.port ?? 0,
+      hostname: "127.0.0.1",
+      async fetch(request) {
+        const { pathname } = new URL(request.url);
+        if (request.method === "GET" && (pathname === "/" || pathname === "/index.html"))
+          return renderPopup();
+        const handler = routes.get(`${request.method} ${pathname}`);
+        if (!handler)
+          return new Response("Not Found", { status: 404 });
+        return toResponse(await handler(request, preferences));
+      }
+    });
+    url = `http://127.0.0.1:${server.port}`;
+  }
+  function bindLaunchAtLogin() {
+    const key = options.launchAtLogin;
+    if (!key)
+      return;
+    const sync = (enabled) => {
+      setAutoLaunch(Boolean(enabled), { appName: options.name, isHidden: !0 }).catch(() => {});
+    };
+    sync(preferences.get(key));
+    preferences.onChange(key, sync);
+  }
+  return {
+    preferences,
+    get url() {
+      return url;
+    },
+    async start() {
+      if (!server)
+        serve();
+      bindLaunchAtLogin();
+      window = await createWindow(url, {
+        ...MENU_BAR_WINDOW,
+        title: options.name,
+        ...options.window
+      });
+      return this;
+    },
+    stop() {
+      window?.close();
+      window = null;
+      server?.stop();
+      server = null;
+      url = null;
+      preferences.close();
+    }
+  };
+}

package/dist/plugin.js

@@ -5,6 +5,7 @@ import { isDevelopment } from "./env.js";
 import { escapeHtml } from "./expressions.js";
 import { performanceMonitor } from "./performance-utils.js";
 import { injectRouterScript } from "./process.js";
+import { findSfcTemplateBlock } from "./sfc-template.js";
 export const plugin = {
   name: "bun-plugin-stx",
   async setup(build) {
@@ -42,9 +43,9 @@ export const plugin = {
           throw new StxFileError(`stx file is empty: ${filePath}`, filePath);
         const { scriptContent, templateContent, allScripts } = performanceMonitor.time("script-extraction", () => {
           let workingContent = content;
-          const templateTagMatch = content.match(/<template\b(?![^>]*(?:\b(?:id|x-for|x-if|@for|@if|:for|:if)\s*=|\s#[\w-]|\bv-slot|\bslot\s*=))[^>]*>([\s\S]*?)<\/template>/i);
-          if (templateTagMatch)
-            workingContent = templateTagMatch[1].trim();
+          const templateBlock = findSfcTemplateBlock(content);
+          if (templateBlock)
+            workingContent = templateBlock.content.trim();
           const allScriptMatches = content.match(/<script\b[^>]*>[\s\S]*?<\/script>/gi) || [];
           let serverScriptContent = "";
           const clientScripts = [];

package/dist/process.js

@@ -1,6 +1,6 @@
 import path from "node:path";
 import { injectCrosswindCSS } from "./dev-server/crosswind.js";
-import { matchHtmlComment, maskAtElementPosition } from "./html-masking.js";
+import { matchHtmlComment, matchStyleElement, maskAtElementPosition, stashScriptElements } from "./html-masking.js";
 import { processA11yDirectives } from "./a11y.js";
 import { generateLifecycleRuntime } from "./composables.js";
 import { processTemplateBindings } from "./reactive-bindings.js";
@@ -186,6 +186,58 @@ function findScriptBodyEnd(src, from) {
   }
   return -1;
 }
+function findScriptBlockByAttribute(html, attribute) {
+  const escapedAttribute = attribute.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), openingTag = new RegExp(`<script\\b(?=[^>]*\\b${escapedAttribute}(?:\\s|=|/?>))[^>]*>`, "i").exec(html);
+  if (!openingTag)
+    return null;
+  const bodyStart = openingTag.index + openingTag[0].length, closeStart = html.indexOf("</script>", bodyStart);
+  if (closeStart === -1)
+    return null;
+  const closeEnd = html.indexOf(">", closeStart);
+  if (closeEnd === -1)
+    return null;
+  return {
+    start: openingTag.index,
+    end: closeEnd + 1
+  };
+}
+function findFirstScriptTag(html) {
+  let searchFrom = 0;
+  while (searchFrom < html.length) {
+    const tagStart = html.indexOf("<", searchFrom);
+    if (tagStart === -1)
+      return -1;
+    if (html.startsWith("<!--", tagStart)) {
+      const commentEnd = html.indexOf("-->", tagStart + 4);
+      searchFrom = commentEnd === -1 ? html.length : commentEnd + 3;
+      continue;
+    }
+    const remainder = html.slice(tagStart), styleTag = /^<style\b[^>]*>/i.exec(remainder);
+    if (styleTag) {
+      const styleEnd = html.toLowerCase().indexOf("</style>", tagStart + styleTag[0].length);
+      searchFrom = styleEnd === -1 ? html.length : styleEnd + 8;
+      continue;
+    }
+    if (/^<script\b[^>]*>/i.test(remainder))
+      return tagStart;
+    searchFrom = tagStart + 1;
+  }
+  return -1;
+}
+function placeSignalsRuntimeBeforeScripts(html) {
+  const runtime = findScriptBlockByAttribute(html, "data-stx-runtime");
+  if (!runtime)
+    return html;
+  const firstScript = findFirstScriptTag(html);
+  if (firstScript === -1 || firstScript === runtime.start)
+    return html;
+  const runtimeTag = html.slice(runtime.start, runtime.end), withoutRuntime = html.slice(0, runtime.start) + html.slice(runtime.end), insertionPoint = findFirstScriptTag(withoutRuntime);
+  if (insertionPoint === -1)
+    return runtimeTag + `
+` + withoutRuntime;
+  return withoutRuntime.slice(0, insertionPoint) + runtimeTag + `
+` + withoutRuntime.slice(insertionPoint);
+}
 export async function processDirectives(template, context, filePath, options, dependencies) {
   if (options.ssr === !1 && !options.autoShell && options.buildMode === "spa")
     return template;
@@ -238,21 +290,28 @@ export async function processDirectives(template, context, filePath, options, de
           result = result.replace(wrongAttrRegex, "$1");
         }
       }
-      if (isTopLevel)
+      if (isTopLevel) {
         result = injectCloakStyle(result);
+        result = placeSignalsRuntimeBeforeScripts(result);
+      }
       if (isTopLevel)
         try {
           const { getStoreScript } = await import("./store-loader.js"), resolvedStoresDir = options.storesDir, storeCode = await getStoreScript(resolvedStoresDir);
           if (storeCode) {
-            const storeTag = `<script data-stx-stores>${storeCode}</script>`, runtimeStart = result.indexOf("<script data-stx-scoped>");
-            if (runtimeStart !== -1) {
-              const runtimeClose = result.indexOf("</script>", runtimeStart + 24);
-              if (runtimeClose !== -1) {
-                const insertPos = runtimeClose + 9;
-                result = result.slice(0, insertPos) + `
-` + storeTag + result.slice(insertPos);
-              }
-            }
+            const storeTag = `<script data-stx-stores>${storeCode}</script>`, runtime = findScriptBlockByAttribute(result, "data-stx-runtime");
+            if (runtime)
+              result = result.slice(0, runtime.end) + `
+` + storeTag + result.slice(runtime.end);
+          }
+        } catch {}
+      if (isTopLevel)
+        try {
+          const { getComposableScript } = await import("./composable-loader.js"), resolvedComposablesDir = options.composablesDir, composableCode = await getComposableScript(resolvedComposablesDir);
+          if (composableCode) {
+            const composableTag = `<script data-stx-composables>${composableCode}</script>`, anchor = findScriptBlockByAttribute(result, "data-stx-stores") || findScriptBlockByAttribute(result, "data-stx-runtime");
+            if (anchor)
+              result = result.slice(0, anchor.end) + `
+` + composableTag + result.slice(anchor.end);
           }
         } catch {}
       if (isTopLevel && context.__stx_inject_css !== !1)
@@ -370,9 +429,11 @@ ${output.trim()}
     });
   output = processStackReplacements(output, stacks);
   if (layoutPath) {
-    const orphans = [];
-    output = output.replace(/<(script|style)\b[\s\S]*?<\/\1>/gi, (m) => {
-      orphans.push(m);
+    const orphans = [], scripts = stashScriptElements(output), styles = maskAtElementPosition(scripts.output, matchStyleElement, (_token, index) => `\x00STX_ORPHAN_STYLE_${index}\x00`);
+    output = styles.output.replace(/\x00STX_(SCRIPT|ORPHAN_STYLE)_(\d+)\x00/g, (_match, kind, index) => {
+      const token = kind === "SCRIPT" ? scripts.scripts[Number(index)] : styles.tokens[Number(index)];
+      if (token)
+        orphans.push(token);
       return "";
     });
     if (orphans.length > 0) {
@@ -670,18 +731,17 @@ ${runtimeScript}`);
 ` + output;
   }
   {
-    const serverScriptRe = /<script\s+server\b[^>]*>/gi;
-    let serverMatch;
-    const serverRemoveRanges = [];
-    while ((serverMatch = serverScriptRe.exec(output)) !== null) {
-      const tagEnd = serverMatch.index + serverMatch[0].length, closeIdx = findScriptBodyEnd(output, tagEnd);
-      if (closeIdx === -1)
+    const { scanScriptTags } = await import("./signal-processing.js"), serverRemoveRanges = [];
+    for (const script of scanScriptTags(output)) {
+      if (!/\bserver\b/i.test(script.attrs))
+        continue;
+      const bodyStart = script.start + script.fullMatch.indexOf(">") + 1, closeStart = findScriptBodyEnd(output, bodyStart);
+      if (closeStart === -1)
         continue;
-      let rangeEnd = closeIdx + 9;
+      let rangeEnd = closeStart + 9;
       while (rangeEnd < output.length && /\s/.test(output[rangeEnd]))
         rangeEnd++;
-      serverRemoveRanges.push({ start: serverMatch.index, end: rangeEnd });
-      serverScriptRe.lastIndex = rangeEnd;
+      serverRemoveRanges.push({ start: script.start, end: rangeEnd });
     }
     for (let ri = serverRemoveRanges.length - 1;ri >= 0; ri--) {
       const { start, end } = serverRemoveRanges[ri];