@float.js/core 2.0.7 → 2.1.0

package/dist/server/index.js

@@ -729,7 +729,7 @@ function generateAPIResponse(state) {
 function createDevDashboard(options = {}) {
   const {
     enabled = process.env.NODE_ENV !== "production",
-    path: path6 = "/__float",
+    path: path8 = "/__float",
     auth
   } = options;
   if (!enabled) {
@@ -737,7 +737,7 @@ function createDevDashboard(options = {}) {
   }
   return (req, res, next) => {
     const url = req.url || "";
-    if (!url.startsWith(path6)) {
+    if (!url.startsWith(path8)) {
       return next();
     }
     if (auth) {
@@ -756,7 +756,7 @@ function createDevDashboard(options = {}) {
         return;
       }
     }
-    const subPath = url.slice(path6.length);
+    const subPath = url.slice(path8.length);
     if (subPath === "" || subPath === "/") {
       res.setHeader("Content-Type", "text/html");
       res.end(generateDashboardHTML(dashboardState));
@@ -870,9 +870,9 @@ init_esm_shims();
 // src/server/dev-server.ts
 init_esm_shims();
 import http from "http";
-import fs2 from "fs";
-import path4 from "path";
-import pc from "picocolors";
+import fs4 from "fs";
+import path6 from "path";
+import pc2 from "picocolors";
 import chokidar from "chokidar";
 import { WebSocketServer, WebSocket } from "ws";
 import mime from "mime-types";
@@ -2494,11 +2494,214 @@ function generateExamplesPage() {
 ` + footer;
 }
 
+// src/build/css-processor.ts
+init_esm_shims();
+import fs3 from "fs";
+import path5 from "path";
+
+// src/build/tailwind-setup.ts
+init_esm_shims();
+import fs2 from "fs";
+import path4 from "path";
+import pc from "picocolors";
+function checkTailwindSetup(rootDir) {
+  const possibleConfigs = [
+    "tailwind.config.js",
+    "tailwind.config.ts",
+    "tailwind.config.mjs",
+    "tailwind.config.cjs"
+  ];
+  let configPath = null;
+  for (const config of possibleConfigs) {
+    const fullPath = path4.join(rootDir, config);
+    if (fs2.existsSync(fullPath)) {
+      configPath = fullPath;
+      break;
+    }
+  }
+  const globalsPath = path4.join(rootDir, "app", "globals.css");
+  const hasGlobals = fs2.existsSync(globalsPath);
+  return {
+    hasTailwind: !!configPath,
+    configPath,
+    globalsPath: hasGlobals ? globalsPath : null,
+    needsSetup: !configPath || !hasGlobals
+  };
+}
+async function setupTailwind(rootDir, options = {}) {
+  const { force = false, silent = false } = options;
+  const config = checkTailwindSetup(rootDir);
+  if (!force && !config.needsSetup) {
+    return;
+  }
+  if (!silent) {
+    console.log(pc.cyan("\n\u{1F3A8} Setting up Tailwind CSS..."));
+  }
+  if (!config.configPath || force) {
+    const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+`;
+    const configPath = path4.join(rootDir, "tailwind.config.js");
+    fs2.writeFileSync(configPath, tailwindConfig);
+    if (!silent) {
+      console.log(pc.green("  \u2713 Created tailwind.config.js"));
+    }
+  }
+  const postcssPath = path4.join(rootDir, "postcss.config.js");
+  if (!fs2.existsSync(postcssPath) || force) {
+    const postcssConfig = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`;
+    fs2.writeFileSync(postcssPath, postcssConfig);
+    if (!silent) {
+      console.log(pc.green("  \u2713 Created postcss.config.js"));
+    }
+  }
+  const appDir = path4.join(rootDir, "app");
+  if (!fs2.existsSync(appDir)) {
+    fs2.mkdirSync(appDir, { recursive: true });
+  }
+  const globalsPath = path4.join(appDir, "globals.css");
+  if (!fs2.existsSync(globalsPath) || force) {
+    const globalsCss = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`;
+    fs2.writeFileSync(globalsPath, globalsCss);
+    if (!silent) {
+      console.log(pc.green("  \u2713 Created app/globals.css"));
+    }
+  }
+  const layoutPath = path4.join(appDir, "layout.tsx");
+  if (!fs2.existsSync(layoutPath)) {
+    const layoutContent = `import './globals.css'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+`;
+    fs2.writeFileSync(layoutPath, layoutContent);
+    if (!silent) {
+      console.log(pc.green("  \u2713 Created app/layout.tsx"));
+    }
+  }
+  if (!silent) {
+    console.log(pc.green("\n\u2728 Tailwind CSS ready!\n"));
+  }
+}
+function checkTailwindDeps(rootDir) {
+  const packageJsonPath = path4.join(rootDir, "package.json");
+  if (!fs2.existsSync(packageJsonPath)) {
+    return {
+      hasPackageJson: false,
+      hasTailwind: false,
+      hasPostCSS: false,
+      hasAutoprefixer: false
+    };
+  }
+  const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf-8"));
+  const allDeps = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies
+  };
+  return {
+    hasPackageJson: true,
+    hasTailwind: !!allDeps["tailwindcss"],
+    hasPostCSS: !!allDeps["postcss"],
+    hasAutoprefixer: !!allDeps["autoprefixer"]
+  };
+}
+function getTailwindInstallCommand(rootDir) {
+  const deps = checkTailwindDeps(rootDir);
+  if (!deps.hasPackageJson) {
+    return null;
+  }
+  const missing = [];
+  if (!deps.hasTailwind) missing.push("tailwindcss");
+  if (!deps.hasPostCSS) missing.push("postcss");
+  if (!deps.hasAutoprefixer) missing.push("autoprefixer");
+  if (missing.length === 0) {
+    return null;
+  }
+  const hasYarnLock = fs2.existsSync(path4.join(rootDir, "yarn.lock"));
+  const hasPnpmLock = fs2.existsSync(path4.join(rootDir, "pnpm-lock.yaml"));
+  const hasBunLock = fs2.existsSync(path4.join(rootDir, "bun.lockb"));
+  let pm = "npm install -D";
+  if (hasBunLock) pm = "bun add -d";
+  else if (hasPnpmLock) pm = "pnpm add -D";
+  else if (hasYarnLock) pm = "yarn add -D";
+  return `${pm} ${missing.join(" ")}`;
+}
+
+// src/build/css-processor.ts
+async function processCSS(filePath, rootDir = process.cwd()) {
+  const content = fs3.readFileSync(filePath, "utf-8");
+  const tailwindConfig = checkTailwindSetup(rootDir);
+  if (!tailwindConfig.hasTailwind) {
+    return { code: content };
+  }
+  try {
+    const postcss = await import("postcss").then((m) => m.default);
+    const tailwindcss = await import("tailwindcss").then((m) => m.default);
+    const autoprefixer = await import("autoprefixer").then((m) => m.default);
+    const configPath = tailwindConfig.configPath || path5.join(rootDir, "tailwind.config.js");
+    let tailwindConfigModule = {};
+    if (fs3.existsSync(configPath)) {
+      const configUrl = new URL(`file://${configPath}`);
+      tailwindConfigModule = await import(configUrl.href).then((m) => m.default || m);
+    }
+    const result = await postcss([
+      tailwindcss(tailwindConfigModule),
+      autoprefixer()
+    ]).process(content, {
+      from: filePath,
+      to: filePath,
+      map: { inline: false }
+    });
+    return {
+      code: result.css,
+      map: result.map?.toString()
+    };
+  } catch (error) {
+    console.warn("CSS processing failed, serving raw CSS:", error);
+    return { code: content };
+  }
+}
+function needsCSSProcessing(filePath, rootDir) {
+  const config = checkTailwindSetup(rootDir);
+  if (!config.hasTailwind) {
+    return false;
+  }
+  const content = fs3.readFileSync(filePath, "utf-8");
+  return content.includes("@tailwind") || content.includes("@apply");
+}
+
 // src/server/dev-server.ts
 async function createDevServer(options) {
   const { port, host, open } = options;
   const rootDir = process.cwd();
-  const publicDir = path4.join(rootDir, "public");
+  const publicDir = path6.join(rootDir, "public");
   let routes = [];
   let server = null;
   let wss = null;
@@ -2506,9 +2709,20 @@ async function createDevServer(options) {
   async function refreshRoutes() {
     try {
       routes = await scanRoutes(rootDir);
-      console.log(pc.dim(`  \u{1F4C1} Found ${routes.length} routes`));
+      console.log(pc2.dim(`  \u{1F4C1} Found ${routes.length} routes`));
+      const tailwindConfig = checkTailwindSetup(rootDir);
+      if (tailwindConfig.needsSetup) {
+        console.log(pc2.yellow("  \u26A0\uFE0F  Tailwind not configured"));
+        const installCmd = getTailwindInstallCommand(rootDir);
+        if (installCmd) {
+          console.log(pc2.dim(`  \u{1F4A1} Run: ${installCmd}`));
+          console.log(pc2.dim(`  \u{1F4A1} Then: npx float dev`));
+        } else {
+          await setupTailwind(rootDir);
+        }
+      }
     } catch (error) {
-      console.error(pc.red("Failed to scan routes:"), error);
+      console.error(pc2.red("Failed to scan routes:"), error);
     }
   }
   function notifyClients(type, data) {
@@ -2569,16 +2783,46 @@ ${FLOAT_ERROR_OVERLAY}
   async function handleRequest(req, res) {
     const url = new URL(req.url || "/", `http://${host}:${port}`);
     const pathname = url.pathname;
-    console.log(pc.dim(`  ${req.method} ${pathname}`));
+    console.log(pc2.dim(`  ${req.method} ${pathname}`));
     try {
-      const publicFilePath = path4.join(publicDir, pathname);
-      if (fs2.existsSync(publicFilePath) && fs2.statSync(publicFilePath).isFile()) {
-        const content = fs2.readFileSync(publicFilePath);
+      const publicFilePath = path6.join(publicDir, pathname);
+      if (fs4.existsSync(publicFilePath) && fs4.statSync(publicFilePath).isFile()) {
+        const content = fs4.readFileSync(publicFilePath);
         const contentType = mime.lookup(publicFilePath) || "application/octet-stream";
         res.writeHead(200, { "Content-Type": contentType });
         res.end(content);
         return;
       }
+      if (pathname.endsWith(".css")) {
+        const cssPath = path6.join(rootDir, "app", pathname.replace(/^\//, ""));
+        if (fs4.existsSync(cssPath)) {
+          try {
+            const needsProcessing = needsCSSProcessing(cssPath, rootDir);
+            if (needsProcessing) {
+              const result = await processCSS(cssPath, rootDir);
+              res.writeHead(200, {
+                "Content-Type": "text/css",
+                "Cache-Control": "no-cache"
+              });
+              res.end(result.code);
+            } else {
+              const content = fs4.readFileSync(cssPath, "utf-8");
+              res.writeHead(200, {
+                "Content-Type": "text/css",
+                "Cache-Control": "no-cache"
+              });
+              res.end(content);
+            }
+            return;
+          } catch (error) {
+            console.error(pc2.red("CSS processing error:"), error);
+            const content = fs4.readFileSync(cssPath, "utf-8");
+            res.writeHead(200, { "Content-Type": "text/css" });
+            res.end(content);
+            return;
+          }
+        }
+      }
       if (pathname.startsWith("/_float/")) {
         res.writeHead(200, { "Content-Type": "application/javascript" });
         res.end("// Float.js internal asset");
@@ -2643,7 +2887,7 @@ ${FLOAT_ERROR_OVERLAY}
       });
       res.end(html);
     } catch (error) {
-      console.error(pc.red("Request error:"), error);
+      console.error(pc2.red("Request error:"), error);
       res.writeHead(500, { "Content-Type": "text/html" });
       res.end(createErrorPage(error));
     }
@@ -2672,7 +2916,7 @@ ${FLOAT_ERROR_OVERLAY}
       const responseBody = await response.text();
       res.end(responseBody);
     } catch (error) {
-      console.error(pc.red("API route error:"), error);
+      console.error(pc2.red("API route error:"), error);
       res.writeHead(500, { "Content-Type": "application/json" });
       res.end(JSON.stringify({ error: "Internal server error" }));
     }
@@ -2687,9 +2931,9 @@ ${FLOAT_ERROR_OVERLAY}
     });
     const watcher = chokidar.watch(
       [
-        path4.join(rootDir, "app/**/*.{ts,tsx,js,jsx}"),
-        path4.join(rootDir, "components/**/*.{ts,tsx,js,jsx}"),
-        path4.join(rootDir, "lib/**/*.{ts,tsx,js,jsx}")
+        path6.join(rootDir, "app/**/*.{ts,tsx,js,jsx}"),
+        path6.join(rootDir, "components/**/*.{ts,tsx,js,jsx}"),
+        path6.join(rootDir, "lib/**/*.{ts,tsx,js,jsx}")
       ],
       {
         ignored: /node_modules/,
@@ -2697,8 +2941,8 @@ ${FLOAT_ERROR_OVERLAY}
       }
     );
     watcher.on("change", async (filePath) => {
-      console.log(pc.yellow(`
-  \u26A1 File changed: ${path4.relative(rootDir, filePath)}`));
+      console.log(pc2.yellow(`
+  \u26A1 File changed: ${path6.relative(rootDir, filePath)}`));
       if (filePath.includes("/app/")) {
         await refreshRoutes();
       }
@@ -2706,31 +2950,31 @@ ${FLOAT_ERROR_OVERLAY}
     });
     watcher.on("add", async (filePath) => {
       if (filePath.includes("/app/")) {
-        console.log(pc.green(`
-  \u2795 File added: ${path4.relative(rootDir, filePath)}`));
+        console.log(pc2.green(`
+  \u2795 File added: ${path6.relative(rootDir, filePath)}`));
         await refreshRoutes();
         notifyClients("reload");
       }
     });
     watcher.on("unlink", async (filePath) => {
       if (filePath.includes("/app/")) {
-        console.log(pc.red(`
-  \u2796 File removed: ${path4.relative(rootDir, filePath)}`));
+        console.log(pc2.red(`
+  \u2796 File removed: ${path6.relative(rootDir, filePath)}`));
         await refreshRoutes();
         notifyClients("reload");
       }
     });
     return new Promise((resolve, reject) => {
       server.listen(port, host, () => {
-        console.log(pc.green(`  \u2705 Server running at ${pc.cyan(`http://${host}:${port}`)}`));
-        console.log(pc.dim(`  \u26A1 HMR enabled on ws://${host}:${port + 1}
+        console.log(pc2.green(`  \u2705 Server running at ${pc2.cyan(`http://${host}:${port}`)}`));
+        console.log(pc2.dim(`  \u26A1 HMR enabled on ws://${host}:${port + 1}
 `));
-        console.log(pc.bold("  Routes:"));
+        console.log(pc2.bold("  Routes:"));
         routes.forEach((route) => {
           if (route.type === "page") {
-            console.log(pc.dim(`    ${pc.green("\u25CF")} ${route.path}`));
+            console.log(pc2.dim(`    ${pc2.green("\u25CF")} ${route.path}`));
           } else if (route.type === "api") {
-            console.log(pc.dim(`    ${pc.blue("\u25C6")} ${route.path} (API)`));
+            console.log(pc2.dim(`    ${pc2.blue("\u25C6")} ${route.path} (API)`));
           }
         });
         console.log("");
@@ -2850,45 +3094,45 @@ function escapeHtml2(text) {
 // src/server/prod-server.ts
 init_esm_shims();
 import http2 from "http";
-import fs3 from "fs";
-import path5 from "path";
-import pc2 from "picocolors";
+import fs5 from "fs";
+import path7 from "path";
+import pc3 from "picocolors";
 import mime2 from "mime-types";
 var cachedRoutes = [];
 var pageCache = /* @__PURE__ */ new Map();
 async function startProductionServer(options) {
   const { port, host } = options;
   const rootDir = process.cwd();
-  const distDir = path5.join(rootDir, ".float");
-  const publicDir = path5.join(rootDir, "public");
-  const manifestPath = path5.join(distDir, "routes-manifest.json");
-  if (fs3.existsSync(manifestPath)) {
-    const manifest = JSON.parse(fs3.readFileSync(manifestPath, "utf-8"));
+  const distDir = path7.join(rootDir, ".float");
+  const publicDir = path7.join(rootDir, "public");
+  const manifestPath = path7.join(distDir, "routes-manifest.json");
+  if (fs5.existsSync(manifestPath)) {
+    const manifest = JSON.parse(fs5.readFileSync(manifestPath, "utf-8"));
     cachedRoutes = manifest.routes;
-    console.log(pc2.dim(`  \u{1F4E6} Loaded ${cachedRoutes.length} routes from manifest`));
+    console.log(pc3.dim(`  \u{1F4E6} Loaded ${cachedRoutes.length} routes from manifest`));
   } else {
-    console.error(pc2.red("  \u274C No build manifest found. Run `float build` first."));
+    console.error(pc3.red("  \u274C No build manifest found. Run `float build` first."));
     process.exit(1);
   }
-  const pagesDir = path5.join(distDir, "pages");
-  if (fs3.existsSync(pagesDir)) {
-    const prerenderedFiles = fs3.readdirSync(pagesDir, { recursive: true });
+  const pagesDir = path7.join(distDir, "pages");
+  if (fs5.existsSync(pagesDir)) {
+    const prerenderedFiles = fs5.readdirSync(pagesDir, { recursive: true });
     for (const file of prerenderedFiles) {
       if (file.endsWith(".html")) {
         const routePath = "/" + file.replace(/\.html$/, "").replace(/index$/, "");
-        const content = fs3.readFileSync(path5.join(pagesDir, file), "utf-8");
+        const content = fs5.readFileSync(path7.join(pagesDir, file), "utf-8");
         pageCache.set(routePath, content);
       }
     }
-    console.log(pc2.dim(`  \u{1F4C4} Loaded ${pageCache.size} pre-rendered pages`));
+    console.log(pc3.dim(`  \u{1F4C4} Loaded ${pageCache.size} pre-rendered pages`));
   }
   const server = http2.createServer(async (req, res) => {
     const url = new URL(req.url || "/", `http://${host}:${port}`);
     const pathname = url.pathname;
     try {
-      const staticPath = path5.join(distDir, "static", pathname);
-      if (fs3.existsSync(staticPath) && fs3.statSync(staticPath).isFile()) {
-        const content = fs3.readFileSync(staticPath);
+      const staticPath = path7.join(distDir, "static", pathname);
+      if (fs5.existsSync(staticPath) && fs5.statSync(staticPath).isFile()) {
+        const content = fs5.readFileSync(staticPath);
         const contentType = mime2.lookup(staticPath) || "application/octet-stream";
         res.writeHead(200, {
           "Content-Type": contentType,
@@ -2897,9 +3141,9 @@ async function startProductionServer(options) {
         res.end(content);
         return;
       }
-      const publicFilePath = path5.join(publicDir, pathname);
-      if (fs3.existsSync(publicFilePath) && fs3.statSync(publicFilePath).isFile()) {
-        const content = fs3.readFileSync(publicFilePath);
+      const publicFilePath = path7.join(publicDir, pathname);
+      if (fs5.existsSync(publicFilePath) && fs5.statSync(publicFilePath).isFile()) {
+        const content = fs5.readFileSync(publicFilePath);
         const contentType = mime2.lookup(publicFilePath) || "application/octet-stream";
         res.writeHead(200, { "Content-Type": contentType });
         res.end(content);
@@ -2932,13 +3176,13 @@ async function startProductionServer(options) {
       });
       res.end(html);
     } catch (error) {
-      console.error(pc2.red("Request error:"), error);
+      console.error(pc3.red("Request error:"), error);
       res.writeHead(500, { "Content-Type": "text/html" });
       res.end("<h1>500 - Internal Server Error</h1>");
     }
   });
   server.listen(port, host, () => {
-    console.log(pc2.green(`  \u2705 Production server running at ${pc2.cyan(`http://${host}:${port}`)}
+    console.log(pc3.green(`  \u2705 Production server running at ${pc3.cyan(`http://${host}:${port}`)}
 `));
   });
 }