@webmate-studio/builder 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/bundler.js

@@ -3,6 +3,9 @@ import esbuildSvelte from 'esbuild-svelte';
 import fs from 'fs/promises';
 import path from 'path';
 import pc from 'picocolors';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
 
 /**
  * Bundle island JavaScript files with esbuild
@@ -18,12 +21,26 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 
 	try {
 		// Resolve paths for dependencies from builder package
+		// In npx environment, we need to find where the actual dependencies are installed
 		const builderNodeModules = path.resolve(import.meta.dirname, '../node_modules');
 
+		// Also try to resolve from the process working directory (where components are)
+		const cwd = process.cwd();
+		const workspaceNodeModules = path.join(cwd, 'node_modules');
+
 		// Determine if this file should use JSX loader
 		// Only use JSX for .jsx files (React/Preact), not for .js files (Lit/Alpine/Vue/Vanilla)
 		const useJsxLoader = islandPath.endsWith('.jsx');
 
+		// Try to resolve Svelte package path
+		let sveltePackagePath;
+		try {
+			sveltePackagePath = path.dirname(require.resolve('svelte/package.json'));
+		} catch (e) {
+			// Svelte not found in builder's node_modules, might be in workspace
+			sveltePackagePath = null;
+		}
+
 		const result = await esbuild.build({
 			entryPoints: [islandPath],
 			bundle: true,
@@ -47,7 +64,12 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			// JSX import source (Preact uses preact, React uses react)
 			jsxImportSource: useJsxLoader ? 'preact' : undefined,
 			// Alias vue to the full build (with template compiler)
-			alias: {
+			// Also alias Svelte internal modules if we found the package
+			alias: sveltePackagePath ? {
+				'vue': 'vue/dist/vue.esm-bundler.js',
+				'svelte': path.join(sveltePackagePath, 'src/runtime/index.js'),
+				'svelte/internal': path.join(sveltePackagePath, 'src/runtime/internal/index.js')
+			} : {
 				'vue': 'vue/dist/vue.esm-bundler.js'
 			},
 			// Define Vue feature flags
@@ -66,8 +88,10 @@ export async function bundleIsland(islandPath, outputPath, options = {}) {
 			],
 			// Don't bundle browser globals
 			external: [],
-			// Add builder's node_modules to resolve path so framework runtimes can be found
-			nodePaths: [builderNodeModules],
+			// Add multiple resolution paths - try both builder's node_modules and workspace node_modules
+			nodePaths: [builderNodeModules, workspaceNodeModules],
+			// Enable package.json conditions for proper Svelte module resolution
+			conditions: ['svelte', 'browser', 'import'],
 			// Log level
 			logLevel: 'warning'
 		});

package/src/tailwind-generator-v4.js

@@ -16,8 +16,26 @@ const execAsync = promisify(exec);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-// Find tailwindcss binary in builder package's node_modules
-const tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+// Find tailwindcss binary - try multiple locations
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+let tailwindBinary;
+try {
+	// Try to resolve tailwindcss package
+	const tailwindPackagePath = require.resolve('tailwindcss/package.json');
+	const tailwindDir = dirname(tailwindPackagePath);
+
+	// Check if we're on Windows
+	const isWindows = process.platform === 'win32';
+	const binName = isWindows ? 'tailwindcss.cmd' : 'tailwindcss';
+
+	// Use npx to run tailwindcss from the resolved package
+	tailwindBinary = `npx tailwindcss`;
+} catch (e) {
+	// Fallback to old method
+	tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+}
 
 /**
  * Extract Tailwind classes from HTML content

package/src/tailwind-generator.js

@@ -16,8 +16,26 @@ const execAsync = promisify(exec);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-// Find tailwindcss binary in builder package's node_modules
-const tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+// Find tailwindcss binary - try multiple locations
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+let tailwindBinary;
+try {
+	// Try to resolve tailwindcss package
+	const tailwindPackagePath = require.resolve('tailwindcss/package.json');
+	const tailwindDir = dirname(tailwindPackagePath);
+
+	// Check if we're on Windows
+	const isWindows = process.platform === 'win32';
+	const binName = isWindows ? 'tailwindcss.cmd' : 'tailwindcss';
+
+	// Use npx to run tailwindcss from the resolved package
+	tailwindBinary = `npx tailwindcss`;
+} catch (e) {
+	// Fallback to old method
+	tailwindBinary = join(__dirname, '..', 'node_modules', '.bin', 'tailwindcss');
+}
 
 /**
  * Extract Tailwind classes from HTML content