salvia 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d47620b2511642dc1d75545d11cfda1f52071059a320bf1b181735af2bca2f41
-  data.tar.gz: 0a7322cbf4477fa2bff9ad6664e658a056a24a9cec83b6943e17f1ffbaf00bac
+  metadata.gz: 7c51e30591df5e8347faf21b95bf57e6d324feb29f10c5c82070ff62d23f09cb
+  data.tar.gz: 696e105566fc056cefa6b947923d3c0e60527c9b38d9740b6b9c79b90cf1fd1a
 SHA512:
-  metadata.gz: 8b677e392d348bb21b8e6bcdb02e90ece13021e3c710fdfa394395174097ff81ee19fb3513ec09e7f752a392a79c1b63593747ec57d697cc4675c9730d755072
-  data.tar.gz: f55abe0fd41e6a76c5d39a728e56193ade7d986e32df1c49b05f9bfc0ba88b495f1b0483b686333dfbfca33c31b473f0953780472a81a09971f36fd3c7990dfd
+  metadata.gz: a90257f44c7730110d0e94138b00b0d9e8607f9a40736d8cb29b64a7bd5f47a895ffeece690f6b9a7426a3a38f942ee5417297819ade4bfacbd20ba290bd856a
+  data.tar.gz: 3bb8812e772f2fa8a27696863c5711c564257d87048468921e9e5f2883121900d4e306e4a080080f54e3bfc6604bb5a1c8d6dc413afcae565e3ea2ea08d27270

data/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "deno.enable": false,
+  "deno.lint": false
+}

data/Gemfile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+# Specify your gem's dependencies in salvia.gemspec
+gemspec
+
+gem "rake", "~> 13.0"

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+end
+
+task default: :test

data/assets/islands/Counter.tsx

@@ -1,8 +1,8 @@
 import { h } from "preact";
 import { useState } from "preact/hooks";
 
-export default function Counter() {
-  const [count, setCount] = useState(0);
+export default function Counter({ count: initialCount = 0 }: { count?: number }) {
+  const [count, setCount] = useState(initialCount);
   return (
     <div class="p-4 border rounded-lg">
       <p class="text-lg mb-2">Count: {count}</p>

data/assets/javascripts/islands.js

@@ -14,7 +14,8 @@ async function hydrateIsland(island) {
   
   try {
     // Use the import map alias which handles dev/prod paths
-    const module = await import(`@/islands/${name}.js`);
+    // We import without extension to let Import Map handle resolution (including hashing in prod)
+    const module = await import(`@/islands/${name}`);
     
     if (typeof module.mount === 'function') {
       module.mount(island, props, { hydrate: hasSSR });

data/assets/scripts/build.ts

@@ -1,4 +1,4 @@
-#!/usr/bin/env -S deno run --allow-all
+#!/usr/bin/env -S deno run --allow-read --allow-write --allow-net --allow-env --allow-run
 // deno-lint-ignore-file
 /**
  * Salvia Build Script
@@ -13,11 +13,16 @@
 import * as esbuild from "https://deno.land/x/esbuild@v0.24.2/mod.js";
 import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@0.11";
 
+const WATCH_MODE = Deno.args.includes("--watch");
+const VERBOSE = Deno.args.includes("--verbose");
+
+import * as path from "https://deno.land/std@0.224.0/path/mod.ts";
+
 // Resolve deno.json relative to this script
 let CONFIG_PATH = new URL("./deno.json", import.meta.url).pathname;
 
 // Check for user config in project root
-const USER_CONFIG_PATH = `${Deno.cwd()}/salvia/deno.json`;
+const USER_CONFIG_PATH = path.join(Deno.cwd(), "salvia", "deno.json");
 try {
   await Deno.stat(USER_CONFIG_PATH);
   CONFIG_PATH = USER_CONFIG_PATH;
@@ -25,16 +30,30 @@ try {
   // User config not found, use internal one
 }
 
+// Load externals from deno.json
+let externals = ["preact", "preact/hooks", "preact/jsx-runtime"];
+try {
+  const configContent = await Deno.readTextFile(CONFIG_PATH);
+  const config = JSON.parse(configContent);
+  if (config.imports) {
+    const importKeys = Object.keys(config.imports);
+    externals = [...new Set([...externals, ...importKeys])];
+  }
+  if (VERBOSE) {
+    console.log("📦 Externals loaded from deno.json:", externals);
+  }
+} catch (e) {
+  console.warn("⚠️ Failed to load externals from deno.json:", e);
+}
+
 // When running via `deno task --config salvia/deno.json`, CWD is usually the project root.
 // But if running from inside salvia/, it's different.
 const ROOT_DIR = Deno.cwd().endsWith("/salvia") ? "." : "salvia";
-const ISLANDS_DIR = `${ROOT_DIR}/app/islands`;
-const PAGES_DIR = `${ROOT_DIR}/app/pages`;
-const COMPONENTS_DIR = `${ROOT_DIR}/app/components`;
-const SSR_OUTPUT_DIR = `${ROOT_DIR}/server`;
-const CLIENT_OUTPUT_DIR = `${ROOT_DIR}/../public/assets/islands`;
-const WATCH_MODE = Deno.args.includes("--watch");
-const VERBOSE = Deno.args.includes("--verbose");
+const ISLANDS_DIR = path.join(ROOT_DIR, "app", "islands");
+const PAGES_DIR = path.join(ROOT_DIR, "app", "pages");
+const COMPONENTS_DIR = path.join(ROOT_DIR, "app", "components");
+const SSR_OUTPUT_DIR = path.join(ROOT_DIR, "server");
+const CLIENT_OUTPUT_DIR = path.join(ROOT_DIR, "..", "public", "assets", "islands");
 
 // ============================================
 // SSR Islands Build
@@ -55,12 +74,12 @@ async function findIslandFiles(): Promise<IslandFile[]> {
       for await (const entry of Deno.readDir(dir)) {
         if (entry.isFile && (entry.name.endsWith(".tsx") || entry.name.endsWith(".jsx") || entry.name.endsWith(".js"))) {
           if (entry.name.startsWith("_")) continue; // Skip internal files
-          const path = `${dir}/${entry.name}`;
-          const content = await Deno.readTextFile(path);
+          const filePath = path.join(dir, entry.name);
+          const content = await Deno.readTextFile(filePath);
           const clientOnly = content.trimStart().startsWith('"client only"') || 
                             content.trimStart().startsWith("'client only'");
           const name = entry.name.replace(/\.(tsx|jsx|js)$/, "");
-          files.push({ path, name, clientOnly, isPage });
+          files.push({ path: filePath, name, clientOnly, isPage });
         }
       }
     } catch {
@@ -104,16 +123,11 @@ async function buildSSR() {
       // Create a virtual entry point that exports all components
       // Get just the filename from the path
       const entryCode = ssrFiles.map(f => {
-        let importPath = f.path;
-        // f.path is like "../app/islands/Counter.tsx" or "../app/pages/Home.tsx"
-        // We are writing _ssr_entry.js to ISLANDS_DIR ("../app/islands")
-        
-        if (f.path.startsWith(ISLANDS_DIR)) {
-          importPath = `./${f.path.split("/").pop()}`;
-        } else if (f.path.startsWith(PAGES_DIR)) {
-          // From ../app/islands to ../app/pages is ../pages
-          importPath = `../pages/${f.path.split("/").pop()}`;
-        }
+        // Calculate relative path from ISLANDS_DIR (where _ssr_entry.js will be) to the component file
+        // This handles nested directories and different source roots correctly
+        const relativePath = path.relative(ISLANDS_DIR, f.path);
+        // Ensure path starts with ./ or ../ for import
+        const importPath = relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
         return `import ${f.name} from "${importPath}";`;
       }).join("\n") + `
 import { h } from "preact";
@@ -130,20 +144,22 @@ globalThis.SalviaSSR = {
     if (!Component) {
       throw new Error("Component not found: " + name);
     }
-    const vnode = h(Component, props);
+    // Handle default export if necessary
+    const Comp = Component.default || Component;
+    const vnode = h(Comp, props);
     return renderToString(vnode);
   }
 };
 export default {}; // Ensure it's a module
 `;
-      const entryPath = `${ISLANDS_DIR}/_ssr_entry.js`;
+      const entryPath = path.join(ISLANDS_DIR, "_ssr_entry.js");
       await Deno.writeTextFile(entryPath, entryCode);
 
       await esbuild.build({
         entryPoints: [entryPath],
         bundle: true,
         format: "iife",
-        outfile: `${SSR_OUTPUT_DIR}/ssr_bundle.js`,
+        outfile: path.join(SSR_OUTPUT_DIR, "ssr_bundle.js"),
         platform: "neutral",
         plugins: [...denoPlugins({ configPath: CONFIG_PATH })],
         external: [],
@@ -157,7 +173,7 @@ export default {}; // Ensure it's a module
       // Clean up temp file
       await Deno.remove(entryPath);
       
-      console.log(`✅ SSR bundle built: ${SSR_OUTPUT_DIR}/ssr_bundle.js (${ssrFiles.map(f => f.name).join(", ")})`);
+      console.log(`✅ SSR bundle built: ${path.join(SSR_OUTPUT_DIR, "ssr_bundle.js")} (${ssrFiles.map(f => f.name).join(", ")})`);
     }
 
     // Client bundle (for hydration) - all files
@@ -165,9 +181,12 @@ export default {}; // Ensure it's a module
     const clientEntryPoints = [];
     
     for (const file of clientFiles) {
-      const filename = file.path.split("/").pop();
+      const filename = path.basename(file.path);
+      const relativePath = path.relative(ISLANDS_DIR, file.path);
+      const importPath = relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
+      
       const wrapperCode = `
-import Component from "./${filename}";
+import Component from "${importPath}";
 import { h, hydrate, render } from "preact";
 
 export function mount(element, props, options) {
@@ -179,27 +198,68 @@ export function mount(element, props, options) {
   }
 }
 `;
-      const wrapperPath = `${ISLANDS_DIR}/_client_${file.name}.js`;
+      const wrapperPath = path.join(ISLANDS_DIR, `_client_${file.name}.js`);
       await Deno.writeTextFile(wrapperPath, wrapperCode);
       clientEntryPoints.push({ in: wrapperPath, out: file.name });
     }
 
     try {
-      await esbuild.build({
+      const result = await esbuild.build({
         entryPoints: clientEntryPoints,
         bundle: true,
         format: "esm",
         outdir: CLIENT_OUTPUT_DIR,
         platform: "browser",
         plugins: [...denoPlugins({ configPath: CONFIG_PATH })],
-        external: ["preact", "preact/hooks", "preact/jsx-runtime"],
+        external: externals,
         jsx: "automatic",
         jsxImportSource: "preact",
         minify: true,
+        entryNames: "[name]-[hash]",
+        metafile: true,
         banner: {
           js: `// Salvia Client Islands - Generated at ${new Date().toISOString()}`,
         },
       });
+
+      // Parse metafile to map original names to hashed filenames
+      const outputs = result.metafile?.outputs || {};
+      const fileMap: Record<string, string> = {};
+      
+      for (const [path, _info] of Object.entries(outputs)) {
+        // path is like "salvia/../public/assets/islands/Counter-HASH.js"
+        // We need to extract "Counter" and the filename "Counter-HASH.js"
+        const filename = path.split("/").pop();
+        if (!filename) continue;
+        
+        // Check if this is one of our entry points
+        for (const entry of clientEntryPoints) {
+          // entry.out is "Counter"
+          // filename starts with "Counter-" and ends with ".js"
+          if (filename.startsWith(`${entry.out}-`) && filename.endsWith(".js")) {
+            fileMap[entry.out] = filename;
+            break;
+          }
+        }
+      }
+
+      // Generate manifest (which Islands are client only + file paths)
+      const manifest = Object.fromEntries(
+        islandFiles.map(f => [
+          f.name, 
+          { 
+            clientOnly: f.clientOnly, 
+            serverOnly: f.isPage,
+            file: fileMap[f.name] // Add hashed filename if available
+          }
+        ])
+      );
+      await Deno.writeTextFile(
+        `${SSR_OUTPUT_DIR}/manifest.json`,
+        JSON.stringify(manifest, null, 2)
+      );
+      console.log(`✅ Manifest generated: ${SSR_OUTPUT_DIR}/manifest.json`);
+
     } finally {
       // Clean up temp files
       for (const entry of clientEntryPoints) {
@@ -213,16 +273,6 @@ export function mount(element, props, options) {
     
     console.log(`✅ Client Islands built: ${CLIENT_OUTPUT_DIR}/ (${clientFiles.map(f => f.name).join(", ")})`);
 
-    // Generate manifest (which Islands are client only)
-    const manifest = Object.fromEntries(
-      islandFiles.map(f => [f.name, { clientOnly: f.clientOnly, serverOnly: f.isPage }])
-    );
-    await Deno.writeTextFile(
-      `${SSR_OUTPUT_DIR}/manifest.json`,
-      JSON.stringify(manifest, null, 2)
-    );
-    console.log(`✅ Manifest generated: ${SSR_OUTPUT_DIR}/manifest.json`);
-
     // Copy islands.js loader
     try {
       const islandsJsPath = new URL("../javascripts/islands.js", import.meta.url).pathname;

data/assets/scripts/deno.json

@@ -1,8 +1,8 @@
 {
   "imports": {
-    "preact": "https://esm.sh/preact@10.19.3",
-    "preact/hooks": "https://esm.sh/preact@10.19.3/hooks",
-    "preact/jsx-runtime": "https://esm.sh/preact@10.19.3/jsx-runtime",
+    "preact": "https://esm.sh/preact@10.19.6",
+    "preact/hooks": "https://esm.sh/preact@10.19.6/hooks",
+    "preact/jsx-runtime": "https://esm.sh/preact@10.19.6/jsx-runtime",
     "preact-render-to-string": "https://esm.sh/preact-render-to-string@6.3.1?external=preact",
     "@preact/signals": "https://esm.sh/@preact/signals@1.2.2?external=preact",
     "@hotwired/turbo": "https://esm.sh/@hotwired/turbo@8.0.0",

data/assets/scripts/sidecar.ts

@@ -18,6 +18,28 @@ const handler = async (request: Request): Promise<Response> => {
     if (command === "bundle") {
       const { entryPoint, externals, format, globalName, configPath } = params;
       
+      // Load globals from deno.json
+      const defaultGlobals: Record<string, string> = {
+        "preact": "globalThis.Preact",
+        "preact/hooks": "globalThis.PreactHooks",
+        "@preact/signals": "globalThis.PreactSignals",
+        "preact/jsx-runtime": "globalThis.PreactJsxRuntime",
+      };
+
+      let userGlobals: Record<string, string> = {};
+      try {
+        const cfgPath = configPath || `${Deno.cwd()}/salvia/deno.json`;
+        const configText = await Deno.readTextFile(cfgPath);
+        const config = JSON.parse(configText);
+        if (config.salvia && config.salvia.globals) {
+          userGlobals = config.salvia.globals;
+        }
+      } catch {
+        // Ignore if config not found or invalid
+      }
+
+      const allGlobals = { ...defaultGlobals, ...userGlobals };
+      
       // If format is IIFE, we need to handle externals by mapping them to globals
       // But esbuild doesn't support this out of the box for IIFE with externals.
       // We can use a plugin to rewrite imports to globals if they are in externals list.
@@ -26,28 +48,24 @@ const handler = async (request: Request): Promise<Response> => {
         const globalExternalsPlugin = {
             name: "global-externals",
             setup(build: any) {
-              // Preact
-              build.onResolve({ filter: /^preact$/ }, (args: any) => {
-                return { path: args.path, namespace: "global-external" };
-              });
-              // Hooks
-              build.onResolve({ filter: /^preact\/hooks$/ }, (args: any) => {
-                return { path: args.path, namespace: "global-external" };
-              });
-              // Signals
-              build.onResolve({ filter: /^@preact\/signals$/ }, (args: any) => {
-                return { path: args.path, namespace: "global-external" };
-              });
-              // JSX Runtime
-              build.onResolve({ filter: /^preact\/jsx-runtime$/ }, (args: any) => {
-                return { path: args.path, namespace: "global-external" };
-              });
+              // Register resolvers for all globals
+              for (const pkg of Object.keys(allGlobals)) {
+                // Escape regex special characters
+                const escapedPkg = pkg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                const filter = new RegExp(`^${escapedPkg}$`);
+                
+                build.onResolve({ filter }, (args: any) => {
+                  return { path: args.path, namespace: "global-external" };
+                });
+              }
 
               build.onLoad({ filter: /.*/, namespace: "global-external" }, (args: any) => {
-                if (args.path === "preact") return { contents: "module.exports = globalThis.Preact;", loader: "js" };
-                if (args.path === "preact/hooks") return { contents: "module.exports = globalThis.PreactHooks;", loader: "js" };
-                if (args.path === "@preact/signals") return { contents: "module.exports = globalThis.PreactSignals;", loader: "js" };
-                if (args.path === "preact/jsx-runtime") return { contents: "module.exports = globalThis.PreactJsxRuntime;", loader: "js" };
+                const globalVar = allGlobals[args.path];
+                if (globalVar) {
+                  // Use module.exports to support both default and named imports via esbuild's CommonJS interop.
+                  // This requires a minimal CommonJS shim (module.exports) in the execution environment (vendor_setup.ts).
+                  return { contents: `module.exports = ${globalVar};`, loader: "js" };
+                }
                 return null;
               });
             },
@@ -152,9 +170,15 @@ const handler = async (request: Request): Promise<Response> => {
   }
 };
 
-const server = Deno.serve({ port: PORT }, handler);
-// Output the assigned port so Ruby can read it
-console.log(`[Deno Init] Listening on http://localhost:${server.addr.port}/`);
+const server = Deno.serve({ 
+  port: PORT,
+  onListen: ({ port, hostname }) => {
+    // Output JSON handshake for reliable parsing
+    const msg = JSON.stringify({ port, status: "ready" });
+    console.log(msg);
+    console.log(`[Deno Init] Listening on http://${hostname}:${port}/`);
+  }
+}, handler);
 
 // Handle cleanup on exit
 const cleanup = () => {

data/assets/scripts/vendor_setup.ts

@@ -14,12 +14,22 @@ import { renderToString } from "preact-render-to-string";
 (globalThis as any).h = h;
 (globalThis as any).Fragment = Fragment;
 
+// Module registry for require shim
+const moduleRegistry: Record<string, any> = {
+  "preact": preact,
+  "preact/hooks": hooks,
+  "@preact/signals": signals,
+  "preact/jsx-runtime": jsxRuntime,
+  "preact-render-to-string": { default: renderToString, renderToString }
+};
+
 // Simple require shim for JIT bundles
 (globalThis as any).require = function(moduleName: string) {
-  if (moduleName === "preact") return preact;
-  if (moduleName === "preact/hooks") return hooks;
-  if (moduleName === "@preact/signals") return signals;
-  if (moduleName === "preact/jsx-runtime") return jsxRuntime;
-  if (moduleName === "preact-render-to-string") return { default: renderToString, renderToString };
-  throw new Error("Module not found: " + moduleName);
+  if (moduleRegistry[moduleName]) return moduleRegistry[moduleName];
+  throw new Error(`[Salvia SSR] Module not found: "${moduleName}". If this is an external dependency, ensure it is registered in vendor_setup.ts.`);
 };
+
+// Shim for module.exports (used by sidecar global-externals)
+if (typeof (globalThis as any).module === 'undefined') {
+  (globalThis as any).module = { exports: {} };
+}

data/bin/console

@@ -0,0 +1,11 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "salvia"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/salvia/cli.rb

@@ -46,7 +46,11 @@ module Salvia
       copy_file "assets/islands/Counter.tsx", "salvia/app/islands/Counter.tsx"
       copy_file "assets/pages/Home.tsx", "salvia/app/pages/Home.tsx"
       
-      create_file "salvia/.gitignore", "/server/\n"
+      if File.exist?("salvia/.gitignore")
+        append_to_file "salvia/.gitignore", "\n/server/\n"
+      else
+        create_file "salvia/.gitignore", "/server/\n"
+      end
 
       # Backend Setup
       case backend
@@ -58,12 +62,6 @@ module Salvia
               config.build_dir = Rails.root.join("public/assets")
               config.ssr_bundle_path = Rails.root.join("salvia/server/ssr_bundle.js")
             end
-            
-            # Initialize SSR Engine
-            Salvia::SSR.configure(
-              bundle_path: Salvia.config.ssr_bundle_path,
-              development: Rails.env.development?
-            )
           RUBY
         end
         say "   - Created config/initializers/salvia.rb"
@@ -98,6 +96,25 @@ module Salvia
         say "   - app/assets/stylesheets/ : Tailwind CSS entry point created (v4)"
       end
 
+      # Cache Deno dependencies
+      say ""
+      say "📦 Caching Deno dependencies...", :green
+      sidecar_script = File.expand_path("../../../assets/scripts/sidecar.ts", __FILE__)
+      
+      # Use user's deno.json if available, otherwise fallback to internal
+      user_config = File.expand_path("salvia/deno.json")
+      config_path = if File.exist?(user_config)
+                      user_config
+                    else
+                      File.expand_path("../../../assets/scripts/deno.json", __FILE__)
+                    end
+
+      if system("deno cache --config #{config_path} #{sidecar_script}")
+        say "   - Dependencies cached successfully"
+      else
+        say "   - Warning: Failed to cache dependencies (non-fatal)", :yellow
+      end
+
       say ""
       say "✅ Salvia SSR installed!", :green
       say "   - salvia/app/islands/    : Put your interactive Island components here"
@@ -133,7 +150,7 @@ module Salvia
                       File.expand_path("../../../assets/scripts/deno.json", __FILE__)
                     end
       
-      cmd = "deno run --allow-all --config #{config_path} #{build_script}"
+      cmd = "deno run --allow-read --allow-write --allow-net --allow-env --allow-run --config #{config_path} #{build_script}"
       cmd += " --verbose" if options[:verbose]
       
       success = system(cmd)
@@ -144,6 +161,20 @@ module Salvia
         say "❌ SSR build failed", :red
         exit 1
       end
+
+      # Build Tailwind CSS if available
+      if File.exist?("bin/rails")
+        say "🎨 Building Tailwind CSS...", :green
+        # Check if tailwindcss:build task exists
+        if system("bin/rails -T | grep tailwindcss:build > /dev/null 2>&1")
+          if system("bin/rails tailwindcss:build")
+            say "✅ Tailwind CSS build completed!", :green
+          else
+            say "❌ Tailwind CSS build failed", :red
+            # Don't exit here, as SSR build succeeded
+          end
+        end
+      end
     end
 
     desc "watch", "Watch and rebuild Island components"
@@ -164,7 +195,7 @@ module Salvia
                       File.expand_path("../../../assets/scripts/deno.json", __FILE__)
                     end
       
-      cmd = "deno run --allow-all --config #{config_path} #{build_script} --watch"
+      cmd = "deno run --allow-read --allow-write --allow-net --allow-env --allow-run --config #{config_path} #{build_script} --watch"
       cmd += " --verbose" if options[:verbose]
       
       exec cmd