xpine 0.0.48 → 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";
@@ -780,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();
@@ -825,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(
@@ -853,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");
@@ -865,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';"
@@ -909,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 + "/**/*.*", {

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";
@@ -573,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();
@@ -618,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(
@@ -646,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");
@@ -658,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';"
@@ -702,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 + "/**/*.*", {

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";
@@ -580,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();
@@ -625,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(
@@ -653,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");
@@ -665,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';"
@@ -709,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 + "/**/*.*", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpine",
-  "version": "0.0.48",
+  "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",