svelte-bundle 0.0.12 → 0.0.21

package/ReadMe.md

@@ -1,3 +1,9 @@
+## Usage
+This tool can be used with `npx`:
+```bash
+npx svelte-bundle -i <input-dir> -o <output-dir>
+```
+
 # Svelte Bundle CLI
 
 **Svelte Bundle CLI** is a simple command-line tool that allows you to bundle a Svelte application into a single `.html` file using Vite and SSR (Server-Side Rendering). The goal of this tool is to make it easy to bundle Svelte apps for deployment, particularly for cases where everything needs to be contained in a single file.
@@ -19,20 +25,11 @@ So, I searched for tools around that could be of assistance. I found [figsvelte]
 
 I noticed through a lot of google searches I wasn't the only one looking for a solution like this, yet, I was unable to find one that addressed everything I was looking for. So, for this reason I have decided to build svelte-bundle to take care of this in a much more simplistic and CLI way.
 
-## Features (In Progress)
-- [ ] Bundles Svelte applications using Vite and SSR.
-- [ ] Outputs a single `.html` file ready for deployment.
-- [ ] CLI arguments for specifying input and output directories.
-
-## Roadmap
-- [ ] Add options for SSR hydration
-- [ ] Handle CSS and assets within the bundled file.
-- [ ] Implement error handling and more robust validation.
-- [ ] Add support for environment-specific builds (development/production).
-- [ ] Documentation and guides on using the tool with different Svelte apps.
-- [ ] Tests and CI integration.
-
-## Installation (Planned)
-Once the tool is published on npm, it will be available via `npx`:
-```bash
-npx svelte-bundle -i <input-dir> -o <output-dir>
+## Features
+- [x] Bundles Svelte applications
+- [x] Outputs a single `.html` file ready for deployment.
+- [x] CLI arguments for specifying input and output directories.
+- [x] Tests and CI integration.
+- [x] Handle CSS and assets within the bundled file.
+- [x] Add tailwindcss support, **this is in beta**.
+- [x] Implement error handling and more robust validation.

package/bundle.js

@@ -7,11 +7,62 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import css from 'rollup-plugin-css-only';
 import terser from '@rollup/plugin-terser';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+
+export async function buildStaticFile(svelteFilePath, outputDir, options = {}) {
+  const { useTailwind = false, tailwindConfig = null } = options;
 
-export async function buildStaticFile(svelteFilePath, outputDir) {
   try {
+    // Ensure output directory exists
+    await fs.mkdir(outputDir, { recursive: true });
+
     let cssText = '';
     
+    // Setup PostCSS plugins based on whether Tailwind is enabled
+    const postcssPlugins = useTailwind 
+      ? [
+          tailwindcss(tailwindConfig || {
+            content: [svelteFilePath],
+            theme: { extend: {} },
+            plugins: [],
+          }),
+          autoprefixer(),
+          cssnano({
+            preset: ['default', {
+              discardComments: {
+                removeAll: true,
+              },
+            }],
+          })
+        ]
+      : [
+          autoprefixer(),
+          cssnano({
+            preset: ['default', {
+              discardComments: {
+                removeAll: true,
+              },
+            }],
+          })
+        ];
+
+    // Process global styles
+    let globalCssText = '';
+    if (useTailwind) {
+      const tailwindCss = `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `;
+
+      const processedCss = await postcss(postcssPlugins)
+        .process(tailwindCss, { from: undefined });
+      globalCssText = processedCss.css;
+    }
+    
     // Create temporary SSR bundle
     const ssrBundle = await rollup({
       input: svelteFilePath,
@@ -22,7 +73,15 @@ export async function buildStaticFile(svelteFilePath, outputDir) {
             hydratable: true,
             css: false
           },
-          emitCss: true
+          emitCss: true,
+          preprocess: useTailwind ? {
+            style: async ({ content }) => {
+              if (!content) return { code: '' };
+              const result = await postcss(postcssPlugins)
+                .process(content, { from: undefined });
+              return { code: result.css };
+            }
+          } : undefined
         }),
         css({
           output: function(styles) {
@@ -66,7 +125,15 @@ export async function buildStaticFile(svelteFilePath, outputDir) {
             hydratable: true,
             css: false
           },
-          emitCss: true
+          emitCss: true,
+          preprocess: useTailwind ? {
+            style: async ({ content }) => {
+              if (!content) return { code: '' };
+              const result = await postcss(postcssPlugins)
+                .process(content, { from: undefined });
+              return { code: result.css };
+            }
+          } : undefined
         }),
         css({
           output: function(styles) {
@@ -91,32 +158,10 @@ export async function buildStaticFile(svelteFilePath, outputDir) {
     });
 
     // Create the final HTML
-    const finalHtml = `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Static Svelte App</title>
-    <style>
-      ${cssText}
-    </style>
-</head>
-<body>
-    <div id="app">${initialHtml}</div>
-    <script src="https://unpkg.com/svelte@3.58.0/internal/index.js"></script>
-    <script>
-      ${clientCode}
-      const app = new App({
-        target: document.getElementById('app'),
-        hydrate: true
-      });
-    </script>
-</body>
-</html>`;
+    const finalHtml = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Static Svelte App</title><style>${globalCssText}${cssText}</style></head><body><div id="app">${initialHtml}</div><script src="https://unpkg.com/svelte@3.58.0/internal/index.js"></script><script>${clientCode}const app=new App({target:document.getElementById("app"),hydrate:!0});</script></body></html>`;
 
     // Write the output file
     const outputPath = path.join(outputDir, 'output.html');
-    await fs.mkdir(outputDir, { recursive: true });
     await fs.writeFile(outputPath, finalHtml, 'utf-8');
   } catch (error) {
     console.error('Build error:', error);

package/cli.js

@@ -19,13 +19,11 @@ const packageJson = JSON.parse(
   )
 );
 
-// Create readline interface for prompts
 const rl = createInterface({
   input: process.stdin,
   output: process.stdout
 });
 
-// Promisify readline question
 const question = (query) => new Promise((resolve) => rl.question(query, resolve));
 
 program
@@ -34,28 +32,25 @@ program
   .version(packageJson.version)
   .requiredOption('-i, --input <path>', 'Input Svelte file')
   .option('-o, --output <path>', 'Output directory (defaults to current directory)')
+  .option('--tw', 'Enable Tailwind CSS processing')
+  .option('--tw-config <path>', 'Path to custom Tailwind config file')
   .option('-f, --force', 'Force overwrite without asking');
 
 program.parse();
 
 const options = program.opts();
 
-async function checkFileExists(filepath) {
+async function loadTailwindConfig(configPath) {
+  const fullPath = path.resolve(configPath);
   try {
-    await fs.access(filepath);
-    return true;
-  } catch {
-    return false;
+    const { default: config } = await import(fullPath);
+    return config;
+  } catch (error) {
+    console.error(chalk.red(`Error loading Tailwind config: ${error.message}`));
+    process.exit(1);
   }
 }
 
-async function shouldOverwrite(filepath) {
-  const answer = await question(
-    chalk.yellow(`File ${filepath} already exists. Overwrite? (y/N): `)
-  );
-  return answer.toLowerCase() === 'y';
-}
-
 async function validateAndProcess() {
   try {
     // Validate input file
@@ -75,33 +70,62 @@ async function validateAndProcess() {
       process.exit(1);
     }
 
-    // Determine output directory and file path
+    // Handle Tailwind configuration
+    let tailwindConfig = null;
+    if (options.tw) {
+      if (options.twConfig) {
+        try {
+          tailwindConfig = await loadTailwindConfig(options.twConfig);
+          console.log(chalk.blue('Using custom Tailwind configuration'));
+        } catch (error) {
+          console.error(chalk.red(`Error loading Tailwind config: ${error.message}`));
+          process.exit(1);
+        }
+      } else {
+        console.log(chalk.blue('Using default Tailwind configuration'));
+      }
+    }
+
+    // Validate Tailwind config usage
+    if (options.twConfig && !options.tw) {
+      console.error(chalk.yellow('Warning: Tailwind config provided but Tailwind is not enabled. Use --tw to enable Tailwind.'));
+      process.exit(1);
+    }
+
+    // Determine output directory
     let outputDir = process.cwd();
     if (options.output) {
       outputDir = path.resolve(options.output);
-      // Create output directory if it doesn't exist
-      await fs.mkdir(outputDir, { recursive: true });
     }
 
     const outputPath = path.join(outputDir, 'output.html');
 
-    // Check if output file exists and handle overwriting
-    if (await checkFileExists(outputPath)) {
+    // Check if output file exists
+    if (await fs.access(outputPath).then(() => true).catch(() => false)) {
       if (!options.force) {
-        const shouldProceed = await shouldOverwrite(outputPath);
-        if (!shouldProceed) {
+        const shouldProceed = await question(
+          chalk.yellow(`File ${outputPath} already exists. Overwrite? (y/N): `)
+        );
+        if (shouldProceed.toLowerCase() !== 'y') {
           console.log(chalk.yellow('Operation cancelled.'));
           process.exit(0);
         }
       }
     }
 
-    console.log(chalk.blue(`Starting ${packageJson.name} v${packageJson.version} build process...`));
+    console.log(chalk.blue('Starting build process...'));
     console.log(chalk.gray(`Input: ${inputPath}`));
-    console.log(chalk.gray(`Output: ${outputPath}`));
+    console.log(chalk.gray(`Output directory: ${outputDir}`));
+    if (options.tw) {
+      console.log(chalk.gray('Tailwind CSS enabled'));
+    }
+
+    const buildOptions = {
+      useTailwind: options.tw || false,
+      tailwindConfig: tailwindConfig
+    };
 
-    // Process the file
-    await buildStaticFile(inputPath, outputDir);
+    await buildStaticFile(inputPath, outputDir, buildOptions);
 
     console.log(chalk.green('\n✨ Build completed successfully!'));
     console.log(chalk.gray(`Output file: ${outputPath}`));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-bundle",
-  "version": "0.0.12",
+  "version": "0.0.21",
   "description": "Bundle Svelte files into static HTML files",
   "type": "module",
   "bin": {
@@ -37,12 +37,16 @@
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-terser": "^0.4.0",
+    "autoprefixer": "^10.4.20",
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
+    "cssnano": "^7.0.6",
     "rollup": "^3.20.0",
     "rollup-plugin-css-only": "^4.3.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.4",
-    "svelte": "^3.58.0"
+    "svelte": "^3.58.0",
+    "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^2.1.3",
@@ -55,4 +59,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}