svelte-bundle 0.0.21 → 0.0.23

package/ReadMe.md

@@ -1,8 +1,11 @@
+> ⚠️ **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
 
@@ -12,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.

package/bundle.js

@@ -11,6 +11,12 @@ 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;
@@ -62,6 +68,9 @@ export async function buildStaticFile(svelteFilePath, outputDir, options = {}) {
         .process(tailwindCss, { from: undefined });
       globalCssText = processedCss.css;
     }
+
+    // Get the absolute path to svelte/internal
+    const svelteInternalPath = require.resolve('svelte/internal');
     
     // Create temporary SSR bundle
     const ssrBundle = await rollup({
@@ -90,27 +99,32 @@ export async function buildStaticFile(svelteFilePath, outputDir, options = {}) {
         }),
         resolve({
           browser: true,
-          dedupe: ['svelte']
+          dedupe: ['svelte'],
+          modulePaths: [path.join(__dirname, 'node_modules')],
+          rootDir: __dirname
         }),
         commonjs()
       ],
       external: ['svelte/internal']
     });
 
-    // Create a temporary directory for SSR
-    const tempDir = path.join(path.dirname(svelteFilePath), '.temp');
+    // 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
+    // Generate SSR bundle as ESM
     await ssrBundle.write({
       file: tempSSRFile,
       format: 'es',
-      exports: 'default'
+      exports: 'default',
+      paths: {
+        'svelte/internal': svelteInternalPath
+      }
     });
 
-    // Import the SSR bundle
-    const { default: App } = await import(tempSSRFile);
+    // 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
@@ -142,7 +156,9 @@ export async function buildStaticFile(svelteFilePath, outputDir, options = {}) {
         }),
         resolve({
           browser: true,
-          dedupe: ['svelte']
+          dedupe: ['svelte'],
+          modulePaths: [path.join(__dirname, 'node_modules')],
+          rootDir: __dirname
         }),
         commonjs(),
         terser()
@@ -158,7 +174,7 @@ export async function buildStaticFile(svelteFilePath, outputDir, 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 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>`;
+    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>`;
 
     // Write the output file
     const outputPath = path.join(outputDir, 'output.html');

package/cli.js

@@ -26,6 +26,14 @@ const rl = createInterface({
 
 const question = (query) => new Promise((resolve) => rl.question(query, resolve));
 
+// Add check for node version
+const nodeVersion = process.versions.node;
+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}`));
+  process.exit(1);
+}
+
 program
   .name('svelte-bundle')
   .description(packageJson.description)
@@ -132,6 +140,9 @@ async function validateAndProcess() {
   } catch (error) {
     console.error(chalk.red('\nBuild failed:'));
     console.error(chalk.red(error.message));
+    if (error.stack) {
+      console.error(chalk.gray(error.stack));
+    }
     process.exit(1);
   } finally {
     rl.close();

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "svelte-bundle",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "Bundle Svelte files into static HTML files",
   "type": "module",
   "bin": {
-    "svelte-bundle": "./cli.js"
+    "svelte-bundle": "cli.js"
   },
   "files": [
     "cli.js",