xpine 0.0.47 → 0.0.49

package/README.md

@@ -426,4 +426,30 @@ setupEnv also supports AWS secrets manager. Simply add SECRETS_NAME=your_aws_sec
 
 1. Add script to src/public/scripts/pages/your_script.ts
 2. Import script into page HTML (e.g. `<script src="/scripts/pages/your_script.ts">`)
-3. To unload event listeners, use `window.addEventListener('spa-update-page-url', () => { remove event listeners here})` in the code
+3. To unload event listeners, use `window.addEventListener('spa-update-page-url', () => { remove event listeners here})` in the code
+
+### Separate client side bundles
+
+You can create separate client side bundles in xpine.config.mjs like this:
+
+```
+export default {
+  bundles: [
+    {
+      id: 'site',
+      excludePaths: [
+        // Excludes SecretPageData
+        '/**/pages/secret/**/*.{js,ts,tsx,jsx}',
+        '/**/pages/secret/*.{js,ts,tsx,jsx}',
+      ],
+    },
+    {
+      id: 'secret-page',
+      includePaths: [
+        // Only uses Alpine data coming from paths in this directory
+        '/**/pages/secret/**/*.{js,ts,tsx,jsx}',
+      ]
+    }
+  ]
+}
+```

package/dist/index.js

@@ -9,6 +9,7 @@ import chokidar from "chokidar";
 import path6 from "path";
 import fs7 from "fs-extra";
 import { build } from "esbuild";
+import micromatch from "micromatch";
 
 // src/build/typescript-builder.ts
 import ts from "typescript";
@@ -238,7 +239,10 @@ function removeClientScriptInTSXFile(pathName, source) {
     clientDataStart
   };
 }
-function getImportsToAbsolutePaths(child, source, pathName) {
+function pathExistsAsIndex(pathName) {
+  return fs.existsSync(path2.join(pathName, "./index.js")) || fs.existsSync(path2.join(pathName, "./index.ts")) || fs.existsSync(path2.join(pathName, "./index.jsx")) || fs.existsSync(path2.join(pathName, "./index.tsx"));
+}
+function getImportsToAbsolutePaths(child, source, pathName, convertPathsToJS = false) {
   const output = [];
   child.forEachChild((child2) => {
     if (child2.kind === ts.SyntaxKind.StringLiteral) {
@@ -246,15 +250,23 @@ function getImportsToAbsolutePaths(child, source, pathName) {
       const importPath = text.replace(/[\"\']/g, "");
       const isRelativeImport = importPath.startsWith(".") || importPath.startsWith("/");
       if (!isRelativeImport) return;
+      let result = path2.join(path2.dirname(pathName), importPath);
+      if (convertPathsToJS) {
+        if (pathExistsAsIndex(result)) {
+          result = path2.join(result, "./index.js");
+        } else {
+          result += ".js";
+        }
+      }
       output.push({
         old: importPath,
-        new: path2.join(path2.dirname(pathName), importPath)
+        new: result
       });
     }
   });
   return output;
 }
-function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
+function getXpineOnLoadFunction(pathName, source, options) {
   const value = {
     imports: "",
     fn: ""
@@ -262,7 +274,7 @@ function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
   source.forEachChild((child) => {
     if (child.kind == ts.SyntaxKind.ImportDeclaration) {
       let importText = child.getText(source);
-      const importOutput = getImportsToAbsolutePaths(child, source, pathName);
+      const importOutput = getImportsToAbsolutePaths(child, source, pathName, options?.convertPathsToJS);
       for (const importItem of importOutput) {
         importText = importText.replace(importItem.old, importItem.new);
       }
@@ -769,8 +781,27 @@ async function buildApp(args) {
     if (removePreviousBuild) fs7.removeSync(config.distDir);
     const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
     const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev2);
+    const clientSideBundles = [];
+    if (config?.bundles?.length) {
+      for (const bundle of config.bundles) {
+        const matchingComponentData = componentData?.filter((item) => {
+          return !micromatch([item.path], bundle?.excludePaths || [])?.length;
+        })?.filter((item) => {
+          if (!bundle?.includePaths?.length) return true;
+          return micromatch([item.path], bundle?.includePaths || [])?.length;
+        });
+        const matchingDataFiles = dataFiles?.filter((item) => {
+          return !micromatch([item.path], bundle?.excludePaths || [])?.length;
+        })?.filter((item) => {
+          if (!bundle?.includePaths?.length) return true;
+          return micromatch([item.path], bundle?.includePaths || [])?.length;
+        });
+        const alpineDataFile2 = await buildAlpineDataFile(matchingComponentData, matchingDataFiles, bundle.id);
+        await buildClientSideFiles([alpineDataFile2], isDev2, `./${bundle.id}.ts`, bundle.id);
+      }
+    }
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
-    await buildClientSideFiles([alpineDataFile], isDev2);
+    await buildClientSideFiles([alpineDataFile, ...clientSideBundles], isDev2);
     fs7.removeSync(config.distTempFolder);
     await buildCSS(disableTailwind);
     await buildPublicFolderSymlinks();
@@ -814,8 +845,8 @@ async function buildAppFiles(files, isDev2) {
     dataFiles
   };
 }
-async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
-  const tempFilePath = path6.join(config.distTempFolder, "./app.ts");
+async function buildClientSideFiles(alpineDataFiles = [], isDev2, tempClientSidePath, id) {
+  const tempFilePath = path6.join(config.distTempFolder, tempClientSidePath || "./app.ts");
   fs7.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
   const clientFiles = globSync3(
@@ -842,7 +873,7 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
     minify: !isDev2,
     sourcemap: isDev2 ? "inline" : false
   });
-  await logSize(config.distPublicDir, "client");
+  await logSize(config.distPublicDir, id ? `client bundle: ${id}.js` : "client bundle: app.js");
 }
 function writeDevServerClientSideCode(tempFilePath) {
   const devServerPath = path6.join(xpineDistDir, "./src/static/dev-server.js");
@@ -854,7 +885,7 @@ function writeSpaClientSideCode(tempFilePath) {
   const content = fs7.readFileSync(spaPath, "utf-8");
   fs7.appendFileSync(tempFilePath, "\n" + content);
 }
-async function buildAlpineDataFile(componentData, dataFiles) {
+async function buildAlpineDataFile(componentData, dataFiles, bundleID) {
   const output = {
     imports: [
       "import Alpine from 'alpinejs';"
@@ -898,9 +929,16 @@ async function buildAlpineDataFile(componentData, dataFiles) {
     output.code.push(`Alpine.data('${dataFunction.name}', ${dataFunction.name});`);
   }
   const result = output.imports.join("\n") + "\n" + output.code.join("\n") + "\n" + output.end.join("\n");
-  fs7.ensureFileSync(config.alpineDataPath);
-  fs7.writeFileSync(config.alpineDataPath, result);
-  return config.alpineDataPath;
+  if (bundleID) {
+    const bundlePath = path6.join(config.distTempFolder, `./alpine-data-${bundleID}.ts`);
+    fs7.ensureFileSync(bundlePath);
+    fs7.writeFileSync(bundlePath, result);
+    return bundlePath;
+  } else {
+    fs7.ensureFileSync(config.alpineDataPath);
+    fs7.writeFileSync(config.alpineDataPath, result);
+    return config.alpineDataPath;
+  }
 }
 async function buildPublicFolderSymlinks() {
   const files = globSync3(config.publicDir + "/**/*.*", {
@@ -1033,7 +1071,7 @@ async function buildOnLoadFile(componentData, isDev2) {
     return a.path.localeCompare(b.path);
   });
   for (const file of onLoadFiles) {
-    const result = getXpineOnLoadFunction(file.path, file.source, onLoadFileResult);
+    const result = getXpineOnLoadFunction(file.path, file.source, { convertPathsToJS: true });
     onLoadFileResult.fn += result.fn;
     onLoadFileResult.imports += result.imports;
   }

package/dist/src/build/typescript-builder.d.ts

@@ -1,5 +1,4 @@
 import ts from 'typescript';
-import { OnLoadFileResult } from '../scripts/build';
 type ImportDeclaration = {
     node: ts.Node;
     importPath: string;
@@ -26,9 +25,13 @@ export declare function removeClientScriptInTSXFile(pathName: string, source: ts
     clientDataStart: number;
 };
 export declare function createStaticFile(pathName: string, source: ts.SourceFile): void;
-export declare function getImportsToAbsolutePaths(child: ts.Node, source: ts.SourceFile, pathName: string): any[];
+export declare function pathExistsAsIndex(pathName: string): any;
+export declare function getImportsToAbsolutePaths(child: ts.Node, source: ts.SourceFile, pathName: string, convertPathsToJS?: boolean): any[];
 export declare function printRecursiveFrom(node: ts.Node, indentLevel: number, sourceFile: ts.SourceFile): void;
-export declare function getXpineOnLoadFunction(pathName: string, source: ts.SourceFile, onLoadFileResult: OnLoadFileResult): {
+type GetXpineOnLoadFunctionOptions = {
+    convertPathsToJS?: boolean;
+};
+export declare function getXpineOnLoadFunction(pathName: string, source: ts.SourceFile, options?: GetXpineOnLoadFunctionOptions): {
     imports: string;
     fn: string;
 };

package/dist/src/build/typescript-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typescript-builder.d.ts","sourceRoot":"","sources":["../../../src/build/typescript-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAA;AAGD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAE,iBAAiB,EAAO,uBAiB/H;AAED,wBAAgB,yBAAyB,CAAC,cAAc,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAO3H;AAED,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAA;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,UAAU,EAAE,EAAE,CAAC,UAAU,EACzB,mBAAmB,GAAE,MAAM,EAAO,EAClC,cAAc,GAAE,mBAAmB,EAAO;;;EA0B3C;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,GAAG,MAAM,EAAE,CAMxF;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,GAAG,mBAAmB,CAkBzG;AAGD,wBAAgB,8BAA8B,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,MAAM,QAO1F;AAED,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU;;;;;;EAmClF;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU,QAUvE;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,SAgBhG;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,QAU9D;AAED,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,gBAAgB;;;EA0BjH;AAED,wBAAsB,kBAAkB,CAAC,OAAO,GAAE,OAAe,iBAMhE"}
+{"version":3,"file":"typescript-builder.d.ts","sourceRoot":"","sources":["../../../src/build/typescript-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAO5B,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAA;AAGD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,EAAE,kBAAkB,GAAE,iBAAiB,EAAO,uBAiB/H;AAED,wBAAgB,yBAAyB,CAAC,cAAc,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAO3H;AAED,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAA;AAED,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,EAAE,CAAC,IAAI,EACb,UAAU,EAAE,EAAE,CAAC,UAAU,EACzB,mBAAmB,GAAE,MAAM,EAAO,EAClC,cAAc,GAAE,mBAAmB,EAAO;;;EA0B3C;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,GAAG,MAAM,EAAE,CAMxF;AAED,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,GAAG,mBAAmB,CAkBzG;AAGD,wBAAgB,8BAA8B,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,MAAM,QAO1F;AAED,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU;;;;;;EAmClF;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU,QAUvE;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,OAKjD;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,GAAE,OAAe,SAwBnI;AAED,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,UAAU,QAU9D;AAED,KAAK,6BAA6B,GAAG;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAA;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,EAAE,CAAC,UAAU,EACrB,OAAO,CAAC,EAAE,6BAA6B;;;EA2BxC;AAED,wBAAsB,kBAAkB,CAAC,OAAO,GAAE,OAAe,iBAMhE"}

package/dist/src/scripts/build.d.ts

@@ -6,7 +6,7 @@ type BuildAppArgs = {
 };
 export declare function buildApp(args: BuildAppArgs): Promise<void>;
 export declare function buildPublicFolderSymlinks(): Promise<void>;
-export declare function logSize(pathName: string, type: 'app' | 'client' | 'css', validExtensions?: string[]): Promise<void>;
+export declare function logSize(pathName: string, type: string, validExtensions?: string[]): Promise<void>;
 export declare function buildFilesWithConfigs(componentData: ComponentData[]): Promise<void>;
 export declare function buildStaticFiles(config: ConfigFile, component: ComponentData, componentImport: any, builtComponentPath: string): Promise<void>;
 export declare function getComponentDynamicPaths(componentPath: string): string[];

package/dist/src/scripts/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/scripts/build.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,UAAU,EAA2B,aAAa,EAAE,MAAM,aAAa,CAAC;AAajF,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAA;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,YAAY,iBAsBhD;AAiJD,wBAAsB,yBAAyB,kBAgB9C;AAED,wBAAsB,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,KAAK,EAAE,eAAe,WAAkB,iBAahH;AAED,wBAAsB,qBAAqB,CAAC,aAAa,EAAE,aAAa,EAAE,iBAezE;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,iBAyEpI;AAED,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,EAAE,CAQxE;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAA;AAGD,wBAAsB,eAAe,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,iBAoDpF"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/scripts/build.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,UAAU,EAA2B,aAAa,EAAE,MAAM,aAAa,CAAC;AAajF,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAA;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,YAAY,iBA+ChD;AAwJD,wBAAsB,yBAAyB,kBAgB9C;AAED,wBAAsB,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,WAAkB,iBAa9F;AAED,wBAAsB,qBAAqB,CAAC,aAAa,EAAE,aAAa,EAAE,iBAezE;AAED,wBAAsB,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,EAAE,kBAAkB,EAAE,MAAM,iBAyEpI;AAED,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,EAAE,CAQxE;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAA;AAGD,wBAAsB,eAAe,CAAC,aAAa,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,iBAoDpF"}

package/dist/src/scripts/xpine-build.js

@@ -4,6 +4,7 @@
 import path5 from "path";
 import fs7 from "fs-extra";
 import { build } from "esbuild";
+import micromatch from "micromatch";
 
 // src/build/typescript-builder.ts
 import ts from "typescript";
@@ -233,7 +234,10 @@ function removeClientScriptInTSXFile(pathName, source) {
     clientDataStart
   };
 }
-function getImportsToAbsolutePaths(child, source, pathName) {
+function pathExistsAsIndex(pathName) {
+  return fs.existsSync(path2.join(pathName, "./index.js")) || fs.existsSync(path2.join(pathName, "./index.ts")) || fs.existsSync(path2.join(pathName, "./index.jsx")) || fs.existsSync(path2.join(pathName, "./index.tsx"));
+}
+function getImportsToAbsolutePaths(child, source, pathName, convertPathsToJS = false) {
   const output = [];
   child.forEachChild((child2) => {
     if (child2.kind === ts.SyntaxKind.StringLiteral) {
@@ -241,15 +245,23 @@ function getImportsToAbsolutePaths(child, source, pathName) {
       const importPath = text.replace(/[\"\']/g, "");
       const isRelativeImport = importPath.startsWith(".") || importPath.startsWith("/");
       if (!isRelativeImport) return;
+      let result = path2.join(path2.dirname(pathName), importPath);
+      if (convertPathsToJS) {
+        if (pathExistsAsIndex(result)) {
+          result = path2.join(result, "./index.js");
+        } else {
+          result += ".js";
+        }
+      }
       output.push({
         old: importPath,
-        new: path2.join(path2.dirname(pathName), importPath)
+        new: result
       });
     }
   });
   return output;
 }
-function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
+function getXpineOnLoadFunction(pathName, source, options) {
   const value = {
     imports: "",
     fn: ""
@@ -257,7 +269,7 @@ function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
   source.forEachChild((child) => {
     if (child.kind == ts.SyntaxKind.ImportDeclaration) {
       let importText = child.getText(source);
-      const importOutput = getImportsToAbsolutePaths(child, source, pathName);
+      const importOutput = getImportsToAbsolutePaths(child, source, pathName, options?.convertPathsToJS);
       for (const importItem of importOutput) {
         importText = importText.replace(importItem.old, importItem.new);
       }
@@ -562,8 +574,27 @@ async function buildApp(args) {
     if (removePreviousBuild2) fs7.removeSync(config.distDir);
     const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
     const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev3);
+    const clientSideBundles = [];
+    if (config?.bundles?.length) {
+      for (const bundle of config.bundles) {
+        const matchingComponentData = componentData?.filter((item) => {
+          return !micromatch([item.path], bundle?.excludePaths || [])?.length;
+        })?.filter((item) => {
+          if (!bundle?.includePaths?.length) return true;
+          return micromatch([item.path], bundle?.includePaths || [])?.length;
+        });
+        const matchingDataFiles = dataFiles?.filter((item) => {
+          return !micromatch([item.path], bundle?.excludePaths || [])?.length;
+        })?.filter((item) => {
+          if (!bundle?.includePaths?.length) return true;
+          return micromatch([item.path], bundle?.includePaths || [])?.length;
+        });
+        const alpineDataFile2 = await buildAlpineDataFile(matchingComponentData, matchingDataFiles, bundle.id);
+        await buildClientSideFiles([alpineDataFile2], isDev3, `./${bundle.id}.ts`, bundle.id);
+      }
+    }
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
-    await buildClientSideFiles([alpineDataFile], isDev3);
+    await buildClientSideFiles([alpineDataFile, ...clientSideBundles], isDev3);
     fs7.removeSync(config.distTempFolder);
     await buildCSS(disableTailwind2);
     await buildPublicFolderSymlinks();
@@ -607,8 +638,8 @@ async function buildAppFiles(files, isDev3) {
     dataFiles
   };
 }
-async function buildClientSideFiles(alpineDataFiles = [], isDev3) {
-  const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
+async function buildClientSideFiles(alpineDataFiles = [], isDev3, tempClientSidePath, id) {
+  const tempFilePath = path5.join(config.distTempFolder, tempClientSidePath || "./app.ts");
   fs7.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
   const clientFiles = globSync3(
@@ -635,7 +666,7 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev3) {
     minify: !isDev3,
     sourcemap: isDev3 ? "inline" : false
   });
-  await logSize(config.distPublicDir, "client");
+  await logSize(config.distPublicDir, id ? `client bundle: ${id}.js` : "client bundle: app.js");
 }
 function writeDevServerClientSideCode(tempFilePath) {
   const devServerPath = path5.join(xpineDistDir, "./src/static/dev-server.js");
@@ -647,7 +678,7 @@ function writeSpaClientSideCode(tempFilePath) {
   const content = fs7.readFileSync(spaPath, "utf-8");
   fs7.appendFileSync(tempFilePath, "\n" + content);
 }
-async function buildAlpineDataFile(componentData, dataFiles) {
+async function buildAlpineDataFile(componentData, dataFiles, bundleID) {
   const output = {
     imports: [
       "import Alpine from 'alpinejs';"
@@ -691,9 +722,16 @@ async function buildAlpineDataFile(componentData, dataFiles) {
     output.code.push(`Alpine.data('${dataFunction.name}', ${dataFunction.name});`);
   }
   const result = output.imports.join("\n") + "\n" + output.code.join("\n") + "\n" + output.end.join("\n");
-  fs7.ensureFileSync(config.alpineDataPath);
-  fs7.writeFileSync(config.alpineDataPath, result);
-  return config.alpineDataPath;
+  if (bundleID) {
+    const bundlePath = path5.join(config.distTempFolder, `./alpine-data-${bundleID}.ts`);
+    fs7.ensureFileSync(bundlePath);
+    fs7.writeFileSync(bundlePath, result);
+    return bundlePath;
+  } else {
+    fs7.ensureFileSync(config.alpineDataPath);
+    fs7.writeFileSync(config.alpineDataPath, result);
+    return config.alpineDataPath;
+  }
 }
 async function buildPublicFolderSymlinks() {
   const files = globSync3(config.publicDir + "/**/*.*", {
@@ -826,7 +864,7 @@ async function buildOnLoadFile(componentData, isDev3) {
     return a.path.localeCompare(b.path);
   });
   for (const file of onLoadFiles) {
-    const result = getXpineOnLoadFunction(file.path, file.source, onLoadFileResult);
+    const result = getXpineOnLoadFunction(file.path, file.source, { convertPathsToJS: true });
     onLoadFileResult.fn += result.fn;
     onLoadFileResult.imports += result.imports;
   }

package/dist/src/scripts/xpine-dev.js

@@ -11,6 +11,7 @@ import chokidar from "chokidar";
 import path5 from "path";
 import fs7 from "fs-extra";
 import { build } from "esbuild";
+import micromatch from "micromatch";
 
 // src/build/typescript-builder.ts
 import ts from "typescript";
@@ -240,7 +241,10 @@ function removeClientScriptInTSXFile(pathName, source) {
     clientDataStart
   };
 }
-function getImportsToAbsolutePaths(child, source, pathName) {
+function pathExistsAsIndex(pathName) {
+  return fs.existsSync(path2.join(pathName, "./index.js")) || fs.existsSync(path2.join(pathName, "./index.ts")) || fs.existsSync(path2.join(pathName, "./index.jsx")) || fs.existsSync(path2.join(pathName, "./index.tsx"));
+}
+function getImportsToAbsolutePaths(child, source, pathName, convertPathsToJS = false) {
   const output = [];
   child.forEachChild((child2) => {
     if (child2.kind === ts.SyntaxKind.StringLiteral) {
@@ -248,15 +252,23 @@ function getImportsToAbsolutePaths(child, source, pathName) {
       const importPath = text.replace(/[\"\']/g, "");
       const isRelativeImport = importPath.startsWith(".") || importPath.startsWith("/");
       if (!isRelativeImport) return;
+      let result = path2.join(path2.dirname(pathName), importPath);
+      if (convertPathsToJS) {
+        if (pathExistsAsIndex(result)) {
+          result = path2.join(result, "./index.js");
+        } else {
+          result += ".js";
+        }
+      }
       output.push({
         old: importPath,
-        new: path2.join(path2.dirname(pathName), importPath)
+        new: result
       });
     }
   });
   return output;
 }
-function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
+function getXpineOnLoadFunction(pathName, source, options) {
   const value = {
     imports: "",
     fn: ""
@@ -264,7 +276,7 @@ function getXpineOnLoadFunction(pathName, source, onLoadFileResult) {
   source.forEachChild((child) => {
     if (child.kind == ts.SyntaxKind.ImportDeclaration) {
       let importText = child.getText(source);
-      const importOutput = getImportsToAbsolutePaths(child, source, pathName);
+      const importOutput = getImportsToAbsolutePaths(child, source, pathName, options?.convertPathsToJS);
       for (const importItem of importOutput) {
         importText = importText.replace(importItem.old, importItem.new);
       }
@@ -569,8 +581,27 @@ async function buildApp(args) {
     if (removePreviousBuild) fs7.removeSync(config.distDir);
     const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
     const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev2);
+    const clientSideBundles = [];
+    if (config?.bundles?.length) {
+      for (const bundle of config.bundles) {
+        const matchingComponentData = componentData?.filter((item) => {
+          return !micromatch([item.path], bundle?.excludePaths || [])?.length;
+        })?.filter((item) => {
+          if (!bundle?.includePaths?.length) return true;
+          return micromatch([item.path], bundle?.includePaths || [])?.length;
+        });
+        const matchingDataFiles = dataFiles?.filter((item) => {
+          return !micromatch([item.path], bundle?.excludePaths || [])?.length;
+        })?.filter((item) => {
+          if (!bundle?.includePaths?.length) return true;
+          return micromatch([item.path], bundle?.includePaths || [])?.length;
+        });
+        const alpineDataFile2 = await buildAlpineDataFile(matchingComponentData, matchingDataFiles, bundle.id);
+        await buildClientSideFiles([alpineDataFile2], isDev2, `./${bundle.id}.ts`, bundle.id);
+      }
+    }
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
-    await buildClientSideFiles([alpineDataFile], isDev2);
+    await buildClientSideFiles([alpineDataFile, ...clientSideBundles], isDev2);
     fs7.removeSync(config.distTempFolder);
     await buildCSS(disableTailwind);
     await buildPublicFolderSymlinks();
@@ -614,8 +645,8 @@ async function buildAppFiles(files, isDev2) {
     dataFiles
   };
 }
-async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
-  const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
+async function buildClientSideFiles(alpineDataFiles = [], isDev2, tempClientSidePath, id) {
+  const tempFilePath = path5.join(config.distTempFolder, tempClientSidePath || "./app.ts");
   fs7.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
   const clientFiles = globSync3(
@@ -642,7 +673,7 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
     minify: !isDev2,
     sourcemap: isDev2 ? "inline" : false
   });
-  await logSize(config.distPublicDir, "client");
+  await logSize(config.distPublicDir, id ? `client bundle: ${id}.js` : "client bundle: app.js");
 }
 function writeDevServerClientSideCode(tempFilePath) {
   const devServerPath = path5.join(xpineDistDir, "./src/static/dev-server.js");
@@ -654,7 +685,7 @@ function writeSpaClientSideCode(tempFilePath) {
   const content = fs7.readFileSync(spaPath, "utf-8");
   fs7.appendFileSync(tempFilePath, "\n" + content);
 }
-async function buildAlpineDataFile(componentData, dataFiles) {
+async function buildAlpineDataFile(componentData, dataFiles, bundleID) {
   const output = {
     imports: [
       "import Alpine from 'alpinejs';"
@@ -698,9 +729,16 @@ async function buildAlpineDataFile(componentData, dataFiles) {
     output.code.push(`Alpine.data('${dataFunction.name}', ${dataFunction.name});`);
   }
   const result = output.imports.join("\n") + "\n" + output.code.join("\n") + "\n" + output.end.join("\n");
-  fs7.ensureFileSync(config.alpineDataPath);
-  fs7.writeFileSync(config.alpineDataPath, result);
-  return config.alpineDataPath;
+  if (bundleID) {
+    const bundlePath = path5.join(config.distTempFolder, `./alpine-data-${bundleID}.ts`);
+    fs7.ensureFileSync(bundlePath);
+    fs7.writeFileSync(bundlePath, result);
+    return bundlePath;
+  } else {
+    fs7.ensureFileSync(config.alpineDataPath);
+    fs7.writeFileSync(config.alpineDataPath, result);
+    return config.alpineDataPath;
+  }
 }
 async function buildPublicFolderSymlinks() {
   const files = globSync3(config.publicDir + "/**/*.*", {
@@ -833,7 +871,7 @@ async function buildOnLoadFile(componentData, isDev2) {
     return a.path.localeCompare(b.path);
   });
   for (const file of onLoadFiles) {
-    const result = getXpineOnLoadFunction(file.path, file.source, onLoadFileResult);
+    const result = getXpineOnLoadFunction(file.path, file.source, { convertPathsToJS: true });
     onLoadFileResult.fn += result.fn;
     onLoadFileResult.imports += result.imports;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpine",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "main": "dist/index.js",
   "dependencies": {
     "@aws-sdk/client-secrets-manager": "^3.758.0",
@@ -14,6 +14,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jsonwebtoken": "^9.0.2",
+    "micromatch": "^4.0.8",
     "postcss": "^8.5.3",
     "request-ip": "^3.3.0",
     "shelljs": "^0.9.2",
@@ -48,6 +49,7 @@
     "@eslint/js": "^9.24.0",
     "@tailwindcss/oxide-darwin-arm64": "^4.1.3",
     "@types/express": "^5.0.0",
+    "@types/micromatch": "^4.0.9",
     "@types/node": "^22.13.5",
     "@types/request-ip": "^0.0.41",
     "@types/shelljs": "^0.8.15",