svelte-bundle 0.0.12 → 0.0.22

package/ReadMe.md

@@ -1,3 +1,12 @@
+> ⚠️ **NOTICE:** While this tool is currently functional, it has not nearly been battle-tested enough to ensure it works in most use-cases.
+
+## Usage
+This tool can be used with `npx`:
+```bash
+npx svelte-bundle -i <input-dir> -o <output-dir>
+```
+### Full Documentation: [https://github.com/uhteddy/svelte-bundle/wiki](https://github.com/uhteddy/svelte-bundle/wiki)
+
 # 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.
@@ -6,9 +15,7 @@ Just note, the purpose of this tool is **NOT** to bundle an entire Svelte app, i
 
 Utilizing this you will be able to develop a page with the joy of svelte and be able to directly get a single `.html` file that you can utilize getting full use-case of svelte.
 
-⚠️ **Note**: This tool is **NOT** made to function with SvelteKit, this takes a single `.svelte` file as input and utilizes vite to compile it into a single `.html` file.
-
-⚠️ **Note**: This tool is currently in early development and is not fully complete. The roadmap and additional features will be added over time. There is currently **NO** testing on this, meaning there is no guarentee it will work for most usecases.
+⚠️ **Note**: This tool is **NOT** made to function with SvelteKit natively, this takes a single `.svelte` file as input and will output a single `.html` file.
 
 ## Inspiration
 This tool was inspired by the need I had when it came to updating the CMS for a company I worked for. They were looking for more custom content on their website which used an outdated CMS. Pages were only able to include HTML, CSS, and JS.
@@ -19,20 +26,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

@@ -1,4 +1,3 @@
-// bundle.js
 import fs from 'fs/promises';
 import path from 'path';
 import { rollup } from 'rollup';
@@ -7,11 +6,76 @@ 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';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+
+const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Function to find the CLI's node_modules directory
+const findCliNodeModules = () => {
+  return path.resolve(__dirname, 'node_modules');
+};
+
+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 });
+
+    // Get CLI's node_modules path
+    const cliNodeModules = findCliNodeModules();
+
     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 +86,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) {
@@ -31,17 +103,43 @@ export async function buildStaticFile(svelteFilePath, outputDir) {
         }),
         resolve({
           browser: true,
-          dedupe: ['svelte']
+          dedupe: ['svelte'],
+          preferBuiltins: false,
+          moduleDirectories: ['node_modules'],
+          modulePaths: [cliNodeModules],
+          rootDir: cliNodeModules
         }),
         commonjs()
-      ],
-      external: ['svelte/internal']
+      ]
     });
 
     // Create a temporary directory for SSR
     const tempDir = path.join(path.dirname(svelteFilePath), '.temp');
     await fs.mkdir(tempDir, { recursive: true });
-    const tempSSRFile = path.join(tempDir, 'ssr-bundle.js');
+    
+    // Create package.json for the temp directory
+    await fs.writeFile(
+      path.join(tempDir, 'package.json'),
+      JSON.stringify({ 
+        type: 'module',
+        dependencies: {
+          svelte: require(path.join(cliNodeModules, 'svelte', 'package.json')).version
+        }
+      }),
+      'utf-8'
+    );
+
+    // Create symlink to CLI's node_modules
+    const tempNodeModules = path.join(tempDir, 'node_modules');
+    try {
+      await fs.symlink(cliNodeModules, tempNodeModules, 'junction');
+    } catch (error) {
+      if (error.code !== 'EEXIST') {
+        throw error;
+      }
+    }
+
+    const tempSSRFile = path.join(tempDir, 'ssr-bundle.mjs');
 
     // Generate SSR bundle
     await ssrBundle.write({
@@ -51,7 +149,7 @@ export async function buildStaticFile(svelteFilePath, outputDir) {
     });
 
     // Import the SSR bundle
-    const { default: App } = await import(tempSSRFile);
+    const { default: App } = await import(`file://${tempSSRFile}`);
     const { html: initialHtml } = App.render();
 
     // Clean up temp files
@@ -66,7 +164,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) {
@@ -75,7 +181,10 @@ export async function buildStaticFile(svelteFilePath, outputDir) {
         }),
         resolve({
           browser: true,
-          dedupe: ['svelte']
+          dedupe: ['svelte'],
+          moduleDirectories: ['node_modules'],
+          modulePaths: [cliNodeModules],
+          rootDir: cliNodeModules
         }),
         commonjs(),
         terser()
@@ -91,32 +200,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,8 +1,9 @@
 {
   "name": "svelte-bundle",
-  "version": "0.0.12",
-  "description": "Bundle Svelte files into static HTML files",
+  "version": "0.0.22",
+  "description": "CLI tool to easily bundle a .svelte file into a single .html file",
   "type": "module",
+  "npm": "svelte-bundle",
   "bin": {
     "svelte-bundle": "./cli.js"
   },
@@ -10,6 +11,10 @@
     "cli.js",
     "bundle.js"
   ],
+  "categories": [
+		"build-plugins",
+		"integrations"
+	],
   "keywords": [
     "svelte",
     "bundle",
@@ -37,12 +42,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",