svelte-bundle 0.0.23 → 0.1.0

package/ReadMe.md

@@ -1,5 +1,7 @@
 > ⚠️ **NOTICE:** While this tool is currently functional, it has not nearly been battle-tested enough to ensure it works in most use-cases.
 
+![svelte-bundle](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcwfyh1w8r8g4f2ap1hff.png)
+
 ## Usage
 This tool can be used with `npx`:
 ```bash
@@ -33,4 +35,4 @@ I noticed through a lot of google searches I wasn't the only one looking for a s
 - [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.
+- [x] Implement error handling and more robust validation.

package/bundle.js

@@ -1,186 +1,330 @@
 // bundle.js
-import fs from 'fs/promises';
-import path from 'path';
-import { rollup } from 'rollup';
-import svelte from 'rollup-plugin-svelte';
-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 { fileURLToPath } from 'url';
-import { createRequire } from 'module';
+import fs from "fs/promises";
+import path from "path";
+import { rollup } from "rollup";
+import svelte from "rollup-plugin-svelte";
+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 { fileURLToPath } from "url";
+import { createRequire } from "module";
 
 const require = createRequire(import.meta.url);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export async function buildStaticFile(svelteFilePath, outputDir, options = {}) {
-  const { useTailwind = false, tailwindConfig = null } = options;
+/**
+ * Creates PostCSS plugins array based on Tailwind configuration
+ */
+function createPostCSSPlugins(useTailwind, tailwindConfig, svelteFilePath) {
+  const plugins = [];
 
-  try {
-    // Ensure output directory exists
-    await fs.mkdir(outputDir, { recursive: true });
+  if (useTailwind) {
+    plugins.push(
+      tailwindcss(
+        tailwindConfig || {
+          content: [svelteFilePath],
+          theme: { extend: {} },
+          plugins: [],
+        },
+      ),
+    );
+  }
 
-    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;
-    }
+  plugins.push(
+    autoprefixer(),
+    cssnano({
+      preset: [
+        "default",
+        {
+          discardComments: { removeAll: true },
+        },
+      ],
+    }),
+  );
+
+  return plugins;
+}
+
+/**
+ * Generates global Tailwind CSS if enabled
+ */
+async function generateGlobalCSS(useTailwind, postcssPlugins) {
+  if (!useTailwind) return "";
+
+  const tailwindCss = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `;
+
+  const processedCss = await postcss(postcssPlugins).process(tailwindCss, {
+    from: undefined,
+  });
+  return processedCss.css;
+}
+
+/**
+ * Creates style preprocessor for Svelte components
+ */
+function createStylePreprocessor(useTailwind, postcssPlugins) {
+  if (!useTailwind) return undefined;
+
+  return {
+    style: async ({ content }) => {
+      if (!content) return { code: "" };
+      const result = await postcss(postcssPlugins).process(content, {
+        from: undefined,
+      });
+      return { code: result.css };
+    },
+  };
+}
+
+/**
+ * Creates Rollup configuration for Svelte compilation
+ */
+function createSvelteConfig(options) {
+  const { generate, preprocess, emitCss = true } = options;
 
-    // Get the absolute path to svelte/internal
-    const svelteInternalPath = require.resolve('svelte/internal');
-    
-    // Create temporary SSR bundle
-    const ssrBundle = await rollup({
-      input: svelteFilePath,
-      plugins: [
-        svelte({
-          compilerOptions: {
-            generate: 'ssr',
-            hydratable: true,
-            css: false
-          },
+  return {
+    compilerOptions: {
+      generate,
+      css: "injected", // Svelte 5: use 'injected' for CSS handling
+    },
+    emitCss,
+    preprocess,
+  };
+}
+
+/**
+ * Builds SSR bundle and renders component to HTML
+ */
+async function buildSSRBundle(
+  svelteFilePath,
+  preprocessor,
+  __dirname,
+  verbose = false,
+) {
+  let cssText = "";
+
+  const ssrBundle = await rollup({
+    input: svelteFilePath,
+    onwarn: (warning, warn) => {
+      // Suppress warnings unless verbose mode is enabled
+      if (verbose) warn(warning);
+    },
+    plugins: [
+      svelte({
+        ...createSvelteConfig({
+          generate: "server",
+          preprocess: preprocessor,
           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) {
-            cssText = styles;
-          }
         }),
-        resolve({
-          browser: true,
-          dedupe: ['svelte'],
-          modulePaths: [path.join(__dirname, 'node_modules')],
-          rootDir: __dirname
-        }),
-        commonjs()
-      ],
-      external: ['svelte/internal']
-    });
+        onwarn: (warning, handler) => {
+          // Suppress svelte plugin warnings unless verbose mode is enabled
+          if (verbose) handler(warning);
+        },
+      }),
+      css({
+        output: (styles) => {
+          cssText = styles;
+        },
+      }),
+      resolve({
+        browser: false, // SSR bundle should use Node resolution
+        dedupe: ["svelte"],
+      }),
+      commonjs(),
+    ],
+  });
+
+  const tempDir = path.join(__dirname, ".temp");
+  await fs.mkdir(tempDir, { recursive: true });
+  const tempSSRFile = path.join(tempDir, "ssr-bundle.js");
+
+  await ssrBundle.write({
+    file: tempSSRFile,
+    format: "es",
+  });
+
+  // Svelte 5: Import both the component and render function
+  const { default: App } = await import(`file://${tempSSRFile}`);
+  const { render } = await import("svelte/server");
+
+  // Svelte 5: Use render function instead of App.render()
+  const { body, head } = render(App, { props: {} });
+
+  await fs.rm(tempDir, { recursive: true, force: true });
+
+  return { html: body, head: head || "", cssText };
+}
 
-    // Create a temporary directory in the CLI package directory
-    const tempDir = path.join(__dirname, '.temp');
-    await fs.mkdir(tempDir, { recursive: true });
-    const tempSSRFile = path.join(tempDir, 'ssr-bundle.js');
-
-    // Generate SSR bundle as ESM
-    await ssrBundle.write({
-      file: tempSSRFile,
-      format: 'es',
-      exports: 'default',
-      paths: {
-        'svelte/internal': svelteInternalPath
-      }
+/**
+ * Builds client-side bundle for hydration
+ */
+async function buildClientBundle(
+  svelteFilePath,
+  preprocessor,
+  verbose = false,
+) {
+  let cssText = "";
+
+  // Create a wrapper entry that imports and hydrates the component
+  const tempDir = path.join(__dirname, ".temp");
+  await fs.mkdir(tempDir, { recursive: true });
+  const wrapperPath = path.join(tempDir, "wrapper.js");
+
+  // Create wrapper that imports component and hydrate function
+  await fs.writeFile(
+    wrapperPath,
+    `
+    import { hydrate } from 'svelte';
+    import Component from '${svelteFilePath.replace(/\\/g, "/")}';
+
+    hydrate(Component, {
+      target: document.getElementById('app')
     });
+  `,
+  );
 
-    // Import the SSR bundle using dynamic import
-    const { default: App } = await import(/* @vite-ignore */`file://${tempSSRFile}`);
-    const { html: initialHtml } = App.render();
-
-    // Clean up temp files
-    await fs.rm(tempDir, { recursive: true, force: true });
-
-    // Build client-side bundle
-    const clientBundle = await rollup({
-      input: svelteFilePath,
-      plugins: [
-        svelte({
-          compilerOptions: {
-            hydratable: true,
-            css: false
-          },
+  const clientBundle = await rollup({
+    input: wrapperPath,
+    onwarn: (warning, warn) => {
+      // Suppress warnings unless verbose mode is enabled
+      if (verbose) warn(warning);
+    },
+    plugins: [
+      svelte({
+        ...createSvelteConfig({
+          generate: "client",
+          preprocess: preprocessor,
           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) {
-            cssText = styles;
-          }
-        }),
-        resolve({
-          browser: true,
-          dedupe: ['svelte'],
-          modulePaths: [path.join(__dirname, 'node_modules')],
-          rootDir: __dirname
-        }),
-        commonjs(),
-        terser()
-      ]
-    });
+        onwarn: (warning, handler) => {
+          // Suppress svelte plugin warnings unless verbose mode is enabled
+          if (verbose) handler(warning);
+        },
+      }),
+      css({
+        output: (styles) => {
+          cssText = styles;
+        },
+      }),
+      resolve({
+        browser: true,
+        dedupe: ["svelte"],
+      }),
+      commonjs(),
+      terser(),
+    ],
+  });
 
-    const { output: [{ code: clientCode }] } = await clientBundle.generate({
-      format: 'iife',
-      name: 'App',
-      globals: {
-        svelte: 'Svelte'
-      }
-    });
+  const {
+    output: [{ code }],
+  } = await clientBundle.generate({
+    format: "iife",
+  });
+
+  // Clean up temp files
+  await fs.rm(tempDir, { recursive: true, force: true });
+
+  return { code, cssText };
+}
+
+/**
+ * Generates final HTML document
+ */
+function generateHTML(ssrHtml, clientCode, globalCss, componentCss) {
+  return `<!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>${globalCss}${componentCss}</style>
+</head>
+<body>
+  <div id="app">${ssrHtml}</div>
+  <script>
+    ${clientCode}
+  </script>
+</body>
+</html>`;
+}
+
+/**
+ * Main build function - bundles a Svelte file into a static HTML file
+ * @param {string} svelteFilePath - Path to the input Svelte file
+ * @param {string} outputDir - Directory for the output HTML file
+ * @param {Object} options - Build options
+ * @param {boolean} options.useTailwind - Enable Tailwind CSS processing
+ * @param {Object} options.tailwindConfig - Custom Tailwind configuration
+ * @param {boolean} options.verbose - Show detailed build output and warnings
+ */
+export async function buildStaticFile(svelteFilePath, outputDir, options = {}) {
+  const {
+    useTailwind = false,
+    tailwindConfig = null,
+    verbose = false,
+  } = options;
 
-    // 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"><title>Static Svelte App</title><style>${globalCssText}${cssText}</style></head><body><div id="app">${initialHtml}</div><script>${clientCode}const app=new App({target:document.getElementById("app"),hydrate:!0});</script></body></html>`;
+  // Suppress console warnings unless verbose mode is enabled
+  const originalConsoleWarn = console.warn;
 
-    // Write the output file
-    const outputPath = path.join(outputDir, 'output.html');
-    await fs.writeFile(outputPath, finalHtml, 'utf-8');
+  if (!verbose) {
+    console.warn = () => {};
+  }
+
+  try {
+    await fs.mkdir(outputDir, { recursive: true });
+
+    const postcssPlugins = createPostCSSPlugins(
+      useTailwind,
+      tailwindConfig,
+      svelteFilePath,
+    );
+    const preprocessor = createStylePreprocessor(useTailwind, postcssPlugins);
+
+    // Generate global Tailwind CSS
+    const globalCss = await generateGlobalCSS(useTailwind, postcssPlugins);
+
+    // Build SSR bundle and render to HTML
+    const { html: ssrHtml, cssText: ssrCss } = await buildSSRBundle(
+      svelteFilePath,
+      preprocessor,
+      __dirname,
+      verbose,
+    );
+
+    // Build client bundle for hydration
+    const { code: clientCode, cssText: clientCss } = await buildClientBundle(
+      svelteFilePath,
+      preprocessor,
+      verbose,
+    );
+
+    // Combine CSS from both bundles
+    const combinedCss = ssrCss || clientCss;
+
+    // Generate final HTML
+    const finalHtml = generateHTML(ssrHtml, clientCode, globalCss, combinedCss);
+
+    // Write output file
+    const outputPath = path.join(outputDir, "output.html");
+    await fs.writeFile(outputPath, finalHtml, "utf-8");
   } catch (error) {
-    console.error('Build error:', error);
+    console.error("Build error:", error);
     throw error;
+  } finally {
+    // Restore original console methods
+    if (!verbose) {
+      console.warn = originalConsoleWarn;
+    }
   }
-}
+}

package/cli.js

@@ -1,152 +1,226 @@
 #!/usr/bin/env node
-import { program } from 'commander';
-import chalk from 'chalk';
-import path from 'path';
-import fs from 'fs/promises';
-import { createInterface } from 'readline';
-import { buildStaticFile } from './bundle.js';
-import { fileURLToPath } from 'url';
-
-// Get package.json data
-import { readFile } from 'fs/promises';
+import { program } from "commander";
+import chalk from "chalk";
+import path from "path";
+import fs from "fs/promises";
+import { createInterface } from "readline";
+import { buildStaticFile } from "./bundle.js";
+import { fileURLToPath } from "url";
+import { readFile } from "fs/promises";
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 // Read package.json
 const packageJson = JSON.parse(
-  await readFile(
-    new URL('./package.json', import.meta.url)
-  )
+  await readFile(new URL("./package.json", import.meta.url)),
 );
 
 const rl = createInterface({
   input: process.stdin,
-  output: process.stdout
+  output: process.stdout,
 });
 
-const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+const question = (query) =>
+  new Promise((resolve) => rl.question(query, resolve));
 
-// Add check for node version
+// Validate Node.js version
 const nodeVersion = process.versions.node;
-const [major] = nodeVersion.split('.').map(Number);
+const [major] = nodeVersion.split(".").map(Number);
 if (major < 18) {
-  console.error(chalk.red(`Error: Node.js version 18 or higher is required. Current version: ${nodeVersion}`));
+  console.error(
+    chalk.red(`✗ Error: Node.js 18+ required (current: ${nodeVersion})`),
+  );
   process.exit(1);
 }
 
+// Display banner
+function displayBanner() {
+  console.log(chalk.cyan.bold("\n╔════════════════════════════════════════╗"));
+  console.log(
+    chalk.cyan.bold("║        ") +
+      chalk.white.bold("SVELTE BUNDLE") +
+      chalk.cyan.bold("             ║"),
+  );
+  console.log(chalk.cyan.bold("╚════════════════════════════════════════╝\n"));
+}
+
+// Configure CLI
 program
-  .name('svelte-bundle')
-  .description(packageJson.description)
+  .name("svelte-bundle")
+  .description(chalk.gray(packageJson.description))
   .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');
+  .requiredOption("-i, --input <path>", "Input Svelte file")
+  .option(
+    "-o, --output <path>",
+    "Output directory (default: current directory)",
+  )
+  .option("--tw", "Enable Tailwind CSS processing")
+  .option("--tw-config <path>", "Path to custom Tailwind config")
+  .option("-f, --force", "Force overwrite without confirmation")
+  .option("-v, --verbose", "Show detailed build output and warnings")
+  .addHelpText(
+    "after",
+    `
+${chalk.cyan("Examples:")}
+  ${chalk.gray("# Basic usage")}
+  $ svelte-bundle -i App.svelte
+
+  ${chalk.gray("# With output directory")}
+  $ svelte-bundle -i App.svelte -o dist
+
+  ${chalk.gray("# With Tailwind CSS")}
+  $ svelte-bundle -i App.svelte --tw
+
+  ${chalk.gray("# With custom Tailwind config")}
+  $ svelte-bundle -i App.svelte --tw --tw-config tailwind.config.js
+
+  ${chalk.gray("# With verbose output")}
+  $ svelte-bundle -i App.svelte -v
+`,
+  );
 
 program.parse();
-
 const options = program.opts();
 
+/**
+ * Loads a Tailwind configuration file
+ */
 async function loadTailwindConfig(configPath) {
   const fullPath = path.resolve(configPath);
   try {
     const { default: config } = await import(fullPath);
     return config;
   } catch (error) {
-    console.error(chalk.red(`Error loading Tailwind config: ${error.message}`));
-    process.exit(1);
+    throw new Error(`Failed to load Tailwind config: ${error.message}`);
+  }
+}
+
+/**
+ * Validates the input file exists and is a .svelte file
+ */
+async function validateInput(inputPath) {
+  if (path.extname(inputPath) !== ".svelte") {
+    throw new Error("Input file must have a .svelte extension");
+  }
+
+  try {
+    await fs.access(inputPath);
+  } catch {
+    throw new Error(`Input file not found: ${inputPath}`);
   }
 }
 
+/**
+ * Checks if output file exists and prompts for overwrite if needed
+ */
+async function checkOutputExists(outputPath, force) {
+  const exists = await fs
+    .access(outputPath)
+    .then(() => true)
+    .catch(() => false);
+
+  if (exists && !force) {
+    const response = await question(
+      chalk.yellow(
+        `\n⚠  File ${chalk.white(path.basename(outputPath))} already exists. Overwrite? (y/N): `,
+      ),
+    );
+    if (response.toLowerCase() !== "y") {
+      console.log(chalk.gray("\nOperation cancelled."));
+      process.exit(0);
+    }
+  }
+}
+
+/**
+ * Displays build configuration summary
+ */
+function displayBuildInfo(inputPath, outputDir, useTailwind) {
+  console.log(chalk.cyan("Build Configuration:"));
+  console.log(chalk.gray("┌─────────────────────────────────────────"));
+  console.log(
+    chalk.gray("│ Input:    ") +
+      chalk.white(path.relative(process.cwd(), inputPath)),
+  );
+  console.log(
+    chalk.gray("│ Output:   ") +
+      chalk.white(path.relative(process.cwd(), outputDir)),
+  );
+  console.log(
+    chalk.gray("│ Tailwind: ") +
+      (useTailwind ? chalk.green("✓ Enabled") : chalk.gray("✗ Disabled")),
+  );
+  console.log(chalk.gray("└─────────────────────────────────────────\n"));
+}
+
+/**
+ * Main validation and build process
+ */
 async function validateAndProcess() {
   try {
-    // Validate input file
+    displayBanner();
+
+    // Resolve paths
     const inputPath = path.resolve(options.input);
-    const inputExt = path.extname(inputPath);
-    
-    if (inputExt !== '.svelte') {
-      console.error(chalk.red('Error: Input file must be a .svelte file'));
-      process.exit(1);
-    }
+    const outputDir = options.output
+      ? path.resolve(options.output)
+      : process.cwd();
+    const outputPath = path.join(outputDir, "output.html");
 
-    // Check if input file exists
-    try {
-      await fs.access(inputPath);
-    } catch {
-      console.error(chalk.red(`Error: Input file ${inputPath} does not exist`));
-      process.exit(1);
-    }
+    // Validate input file
+    await validateInput(inputPath);
 
     // 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);
+    if (options.tw && options.twConfig) {
+      tailwindConfig = await loadTailwindConfig(options.twConfig);
+      console.log(chalk.green("✓ Loaded custom Tailwind configuration\n"));
+    } else if (options.twConfig && !options.tw) {
+      throw new Error("Tailwind config provided but --tw flag not set");
     }
 
-    // Determine output directory
-    let outputDir = process.cwd();
-    if (options.output) {
-      outputDir = path.resolve(options.output);
-    }
-
-    const outputPath = path.join(outputDir, 'output.html');
-
     // Check if output file exists
-    if (await fs.access(outputPath).then(() => true).catch(() => false)) {
-      if (!options.force) {
-        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);
-        }
-      }
-    }
+    await checkOutputExists(outputPath, options.force);
 
-    console.log(chalk.blue('Starting build process...'));
-    console.log(chalk.gray(`Input: ${inputPath}`));
-    console.log(chalk.gray(`Output directory: ${outputDir}`));
-    if (options.tw) {
-      console.log(chalk.gray('Tailwind CSS enabled'));
-    }
+    // Display build configuration
+    displayBuildInfo(inputPath, outputDir, options.tw);
+
+    // Start build process
+    console.log(chalk.cyan("⚡ Building..."));
+    const startTime = Date.now();
 
     const buildOptions = {
       useTailwind: options.tw || false,
-      tailwindConfig: tailwindConfig
+      tailwindConfig: tailwindConfig,
+      verbose: options.verbose || false,
     };
 
     await buildStaticFile(inputPath, outputDir, buildOptions);
 
-    console.log(chalk.green('\n✨ Build completed successfully!'));
-    console.log(chalk.gray(`Output file: ${outputPath}`));
+    const duration = ((Date.now() - startTime) / 1000).toFixed(2);
+
+    // Success message
+    console.log(chalk.green("\n✓ Build completed successfully!"));
+    console.log(chalk.gray(`  Time: ${duration}s`));
+    console.log(
+      chalk.gray(
+        `  Output: ${chalk.white(path.relative(process.cwd(), outputPath))}\n`,
+      ),
+    );
   } catch (error) {
-    console.error(chalk.red('\nBuild failed:'));
-    console.error(chalk.red(error.message));
-    if (error.stack) {
+    console.log(chalk.red("\n✗ Build failed\n"));
+    console.error(chalk.red("Error: ") + chalk.white(error.message));
+
+    if (process.env.DEBUG) {
+      console.error(chalk.gray("\nStack trace:"));
       console.error(chalk.gray(error.stack));
     }
+
     process.exit(1);
   } finally {
     rl.close();
   }
 }
 
-validateAndProcess();
+validateAndProcess();

package/package.json

@@ -1,8 +1,18 @@
 {
   "name": "svelte-bundle",
-  "version": "0.0.23",
-  "description": "Bundle Svelte files into static HTML files",
+  "version": "0.1.0",
+  "description": "CLI tool to easily bundle a .svelte file into a single .html file",
   "type": "module",
+  "title": "svelte-bundle",
+  "url": "https://github.com/uhteddy/svelte-bundle",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uhteddy/svelte-bundle.git"
+  },
+  "npm": "svelte-bundle",
+  "categories": [
+    "build-plugins"
+  ],
   "bin": {
     "svelte-bundle": "cli.js"
   },
@@ -21,10 +31,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/uhteddy/svelte-bundle.git"
-  },
   "scripts": {
     "prepublishOnly": "chmod +x cli.js",
     "test": "vitest run",
@@ -45,12 +51,12 @@
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.4",
-    "svelte": "^3.58.0",
+    "svelte": "^5.50.0",
     "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "^2.1.3",
-    "vitest": "^2.1.3"
+    "@vitest/coverage-v8": "^4.0.18",
+    "vitest": "^4.0.18"
   },
   "bugs": {
     "url": "https://github.com/uhteddy/svelte-bundle/issues"