xpine 0.0.34 → 0.0.36

package/README.md

@@ -61,6 +61,18 @@ setupEnv also supports AWS secrets manager. Simply add SECRETS_NAME=your_aws_sec
   - spa-link-click
     - sent when link initially gets clicked and when link is done updating content
     - the "state" value in the event detail will be "start" or "end"
+  - breakpoint-change
+    - sent when a breakpoint is changed via your Tailwind css file's breakpoints in the @theme directive, e.g.
+      ```
+      @theme {
+        --breakpoint-xl: 1184px;
+        --breakpoint-sm: 640px;
+        --breakpoint-md: 768px;
+        --breakpoint-lg: 1024px;
+      }
+      ```
+    - this will send a custom event with the detail being the breakpoint, such as `{ breakpoint: 'xl' }`
+    - note this will only send an event based on the values of the breakpoints in your @theme configuration
 
 #### Custom scripts for certain pages
 

package/TODO

@@ -1 +0,0 @@
-- spa:updatePageURL should return all available information about the URL instead of just the href it's going to

package/dist/index.js

@@ -7,7 +7,7 @@ import chokidar from "chokidar";
 
 // src/scripts/build.ts
 import path6 from "path";
-import fs6 from "fs-extra";
+import fs7 from "fs-extra";
 import { build } from "esbuild";
 
 // src/build/typescript-builder.ts
@@ -285,9 +285,7 @@ async function triggerXPineOnLoad(noCache = false) {
 }
 
 // src/scripts/build.ts
-import { globSync as globSync2 } from "glob";
-import postcss from "postcss";
-import tailwindPostcss from "@tailwindcss/postcss";
+import { globSync as globSync3 } from "glob";
 
 // src/util/paths.ts
 function getXPineDistDir() {
@@ -300,20 +298,6 @@ function getXPineDistDir() {
   return splitDir[0] + "/xpine/dist";
 }
 
-// src/util/postcss/remove-layers.ts
-var plugin = (opts = {}) => {
-  return {
-    postcssPlugin: "postcssRemoveLayers",
-    AtRule: {
-      layer: (atRule) => {
-        atRule.replaceWith(atRule.nodes);
-      }
-    }
-  };
-};
-plugin.postcss = true;
-var remove_layers_default = plugin;
-
 // src/build/esbuild/transformTSXFiles.ts
 import fs2 from "fs-extra";
 import ts2 from "typescript";
@@ -669,9 +653,92 @@ function filePathToURLPath(pathName, isDist = true) {
   return result;
 }
 
+// src/build/css.ts
+import { globSync as globSync2 } from "glob";
+import fs6 from "fs-extra";
+import postcss from "postcss";
+
+// src/build/postcss/remove-layers.ts
+var plugin = (opts = {}) => {
+  return {
+    postcssPlugin: "postcssRemoveLayers",
+    AtRule: {
+      layer: (atRule) => {
+        atRule.replaceWith(atRule.nodes);
+      }
+    }
+  };
+};
+plugin.postcss = true;
+var remove_layers_default = plugin;
+
+// src/build/postcss/add-breakpoint-data.ts
+var plugin2 = (opts = {}) => {
+  const nodeValues = [];
+  return {
+    postcssPlugin: "addBreakpointData",
+    AtRule: {
+      theme(atRule) {
+        const nodes = atRule.nodes.filter((node) => {
+          return node.prop.startsWith("--breakpoint-");
+        });
+        nodeValues.push(...nodes.map((node) => {
+          return {
+            // @ts-ignore
+            breakpoint: node.prop.replace("--breakpoint-", ""),
+            // @ts-ignore
+            value: node.value
+          };
+        }));
+      }
+    },
+    OnceExit(root) {
+      root.append([
+        `body:before {`,
+        `content: "default"; display: none; visibility: hidden;`,
+        `}`
+      ].join(""));
+      const nodeValuesMapped = nodeValues.sort((a, b) => {
+        return Number(a.value.replace(/[^0-9]/g, "")) - Number(b.value.replace(/[^0-9]/g, ""));
+      }).map(({ breakpoint, value }) => {
+        return [
+          `@media (min-width: ${value}) {`,
+          `body:before {`,
+          `content: "${breakpoint}";`,
+          `}`,
+          `}`
+        ].join("");
+      });
+      for (const value of nodeValuesMapped) {
+        root.append(value);
+      }
+    }
+  };
+};
+plugin2.postcss = true;
+var add_breakpoint_data_default = plugin2;
+
+// src/build/css.ts
+import tailwindPostcss from "@tailwindcss/postcss";
+async function buildCSS(disableTailwind) {
+  const cssFiles = globSync2(config.srcDir + "/**/*.css");
+  for (const file of cssFiles) {
+    const fileContents = fs6.readFileSync(file, "utf-8");
+    let result = fileContents;
+    if (!disableTailwind) {
+      result = await postcss([add_breakpoint_data_default()]).process(fileContents, { from: file });
+      result = await postcss([tailwindPostcss(), remove_layers_default()]).process(result.css, { from: file });
+    }
+    const newPath = file.replace(config.srcDir, config.distDir);
+    fs6.ensureFileSync(newPath);
+    fs6.writeFileSync(newPath, result.css);
+  }
+  logSize(config.distPublicDir, "css");
+}
+
 // src/scripts/build.ts
 var extensions = [".ts", ".tsx"];
-var packageJson = JSON.parse(fs6.readFileSync(config.packageJsonPath, "utf-8"));
+var packageJson = JSON.parse(fs7.readFileSync(config.packageJsonPath, "utf-8"));
 var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
 var xpineDistDir = getXPineDistDir();
 async function buildApp(args) {
@@ -679,12 +746,12 @@ async function buildApp(args) {
   const removePreviousBuild = args?.removePreviousBuild || false;
   const disableTailwind = args?.disableTailwind || false;
   try {
-    if (removePreviousBuild) fs6.removeSync(config.distDir);
-    const srcDirFiles = globSync2(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
+    if (removePreviousBuild) fs7.removeSync(config.distDir);
+    const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
     const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev);
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
     await buildClientSideFiles([alpineDataFile], isDev);
-    fs6.removeSync(config.distTempFolder);
+    fs7.removeSync(config.distTempFolder);
     await buildCSS(disableTailwind);
     await buildPublicFolderSymlinks();
     await buildOnLoadFile(componentData, isDev);
@@ -704,7 +771,7 @@ async function buildAppFiles(files, isDev) {
     return fileName === "+config";
   });
   const backendFiles = files.filter((file) => extensions.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
-  fs6.ensureDirSync(config.distDir);
+  fs7.ensureDirSync(config.distDir);
   await build({
     entryPoints: backendFiles,
     format: "esm",
@@ -729,9 +796,9 @@ async function buildAppFiles(files, isDev) {
 }
 async function buildClientSideFiles(alpineDataFiles = [], isDev) {
   const tempFilePath = path6.join(config.distTempFolder, "./app.ts");
-  fs6.ensureFileSync(tempFilePath);
+  fs7.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
-  const clientFiles = globSync2(
+  const clientFiles = globSync3(
     config.publicDir + "/**/*.{js,ts}",
     {
       ignore: pagesScriptsGlob
@@ -747,7 +814,7 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
     minify: !isDev,
     sourcemap: isDev ? "inline" : false
   });
-  const pagesFiles = globSync2(pagesScriptsGlob);
+  const pagesFiles = globSync3(pagesScriptsGlob);
   await build({
     entryPoints: pagesFiles || [],
     bundle: true,
@@ -759,13 +826,13 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
 }
 function writeDevServerClientSideCode(tempFilePath) {
   const devServerPath = path6.join(xpineDistDir, "./src/static/dev-server.js");
-  const content = fs6.readFileSync(devServerPath, "utf-8");
-  fs6.appendFileSync(tempFilePath, "\n" + content);
+  const content = fs7.readFileSync(devServerPath, "utf-8");
+  fs7.appendFileSync(tempFilePath, "\n" + content);
 }
 function writeSpaClientSideCode(tempFilePath) {
   const spaPath = path6.join(xpineDistDir, "./src/static/spa.js");
-  const content = fs6.readFileSync(spaPath, "utf-8");
-  fs6.appendFileSync(tempFilePath, "\n" + content);
+  const content = fs7.readFileSync(spaPath, "utf-8");
+  fs7.appendFileSync(tempFilePath, "\n" + content);
 }
 async function buildAlpineDataFile(componentData, dataFiles) {
   const output = {
@@ -811,23 +878,12 @@ 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");
-  fs6.ensureFileSync(config.alpineDataPath);
-  fs6.writeFileSync(config.alpineDataPath, result);
+  fs7.ensureFileSync(config.alpineDataPath);
+  fs7.writeFileSync(config.alpineDataPath, result);
   return config.alpineDataPath;
 }
-async function buildCSS(disableTailwind) {
-  const cssFiles = globSync2(config.srcDir + "/**/*.css");
-  for (const file of cssFiles) {
-    const fileContents = fs6.readFileSync(file, "utf-8");
-    const result = disableTailwind ? fileContents : await postcss([tailwindPostcss(), remove_layers_default()]).process(fileContents, { from: file });
-    const newPath = file.replace(config.srcDir, config.distDir);
-    fs6.ensureFileSync(newPath);
-    fs6.writeFileSync(newPath, result.css);
-  }
-  logSize(config.distPublicDir, "css");
-}
 async function buildPublicFolderSymlinks() {
-  const files = globSync2(config.publicDir + "/**/*.*", {
+  const files = globSync3(config.publicDir + "/**/*.*", {
     ignore: "/**/*.{css,js,ts,tsx,jsx}"
   });
   for (const file of files) {
@@ -836,19 +892,19 @@ async function buildPublicFolderSymlinks() {
       const splitNewPath = newPath.split("/");
       splitNewPath.pop();
       const newDir = splitNewPath.join("/");
-      fs6.ensureDirSync(newDir);
-      fs6.symlinkSync(file, newPath);
+      fs7.ensureDirSync(newDir);
+      fs7.symlinkSync(file, newPath);
     } catch {
     }
   }
 }
 async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
-  const files = globSync2(pathName + "/**/*" + (type === "css" ? ".css" : ""));
+  const files = globSync3(pathName + "/**/*" + (type === "css" ? ".css" : ""));
   const fileSizes = files.map((file) => {
     if (!validExtensions.find((ext) => file.endsWith(ext))) return false;
     return {
       file,
-      size: fs6.statSync(file).size / (1024 * 1e3)
+      size: fs7.statSync(file).size / (1024 * 1e3)
     };
   }).filter(Boolean);
   const totalSize = fileSizes.reduce((total, current) => {
@@ -891,7 +947,7 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
       const req = { params: {} };
       const data = config2?.data ? await config2.data(req) : null;
       const staticComponentOutput = await componentFn({ data, routePath: urlPath });
-      fs6.writeFileSync(
+      fs7.writeFileSync(
         path6.join(outputPath, "./index.html"),
         doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
       );
@@ -912,8 +968,8 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
         const urlPath = filePathToURLPath(updatedOutDir);
         const data = config2?.data ? await config2.data(req) : null;
         const staticComponentOutput = await componentFn({ req, data, routePath: urlPath });
-        fs6.ensureDirSync(updatedOutDir);
-        fs6.writeFileSync(
+        fs7.ensureDirSync(updatedOutDir);
+        fs7.writeFileSync(
           path6.join(updatedOutDir, "./index.html"),
           doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
         );
@@ -964,7 +1020,7 @@ async function buildOnLoadFile(componentData, isDev) {
     }
   `;
   const onLoadFilePath = path6.join(config.distDir, "./__xpineOnLoad.ts");
-  fs6.writeFileSync(onLoadFilePath, output);
+  fs7.writeFileSync(onLoadFilePath, output);
   await build({
     entryPoints: [onLoadFilePath],
     format: "esm",
@@ -1126,7 +1182,6 @@ export {
   JSXRuntime,
   addToContextArray,
   buildApp,
-  buildCSS,
   buildFilesWithConfigs,
   buildOnLoadFile,
   buildPublicFolderSymlinks,

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

@@ -0,0 +1,2 @@
+export declare function buildCSS(disableTailwind?: boolean): Promise<void>;
+//# sourceMappingURL=css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../src/build/css.ts"],"names":[],"mappings":"AAUA,wBAAsB,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,iBAgBvD"}

package/dist/src/build/postcss/add-breakpoint-data.d.ts

@@ -0,0 +1,8 @@
+import { PluginCreator } from 'postcss';
+declare namespace plugin {
+    interface Options {
+    }
+}
+declare const plugin: PluginCreator<plugin.Options>;
+export default plugin;
+//# sourceMappingURL=add-breakpoint-data.d.ts.map

package/dist/src/build/postcss/add-breakpoint-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-breakpoint-data.d.ts","sourceRoot":"","sources":["../../../../src/build/postcss/add-breakpoint-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,aAAa,EAAE,MAAM,SAAS,CAAC;AAErD,kBAAU,MAAM,CAAC;IACf,UAAiB,OAAO;KAAI;CAC7B;AAID,QAAA,MAAM,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,OAAO,CA4CzC,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/dist/src/build/postcss/remove-layers.d.ts

@@ -0,0 +1,8 @@
+import { PluginCreator } from 'postcss';
+declare namespace plugin {
+    interface Options {
+    }
+}
+declare const plugin: PluginCreator<plugin.Options>;
+export default plugin;
+//# sourceMappingURL=remove-layers.d.ts.map

package/dist/src/build/postcss/remove-layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-layers.d.ts","sourceRoot":"","sources":["../../../../src/build/postcss/remove-layers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,kBAAU,MAAM,CAAC;IACf,UAAiB,OAAO;KAAG;CAC5B;AAID,QAAA,MAAM,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,OAAO,CASxC,CAAC;AAGH,eAAe,MAAM,CAAC"}

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

@@ -5,7 +5,6 @@ type BuildAppArgs = {
     disableTailwind?: boolean;
 };
 export declare function buildApp(args: BuildAppArgs): Promise<void>;
-export declare function buildCSS(disableTailwind?: boolean): 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 buildFilesWithConfigs(componentData: ComponentData[]): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/scripts/build.ts"],"names":[],"mappings":"AAsBA,OAAO,EAAE,UAAU,EAA2B,aAAa,EAAE,MAAM,aAAa,CAAC;AAYjF,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;AA8ID,wBAAsB,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,iBAavD;AAGD,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,iBAmEpI;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":"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,iBAmEpI;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

@@ -2,7 +2,7 @@
 
 // src/scripts/build.ts
 import path5 from "path";
-import fs6 from "fs-extra";
+import fs7 from "fs-extra";
 import { build } from "esbuild";
 
 // src/build/typescript-builder.ts
@@ -280,9 +280,7 @@ async function triggerXPineOnLoad(noCache = false) {
 }
 
 // src/scripts/build.ts
-import { globSync as globSync2 } from "glob";
-import postcss from "postcss";
-import tailwindPostcss from "@tailwindcss/postcss";
+import { globSync as globSync3 } from "glob";
 
 // src/util/paths.ts
 function getXPineDistDir() {
@@ -295,20 +293,6 @@ function getXPineDistDir() {
   return splitDir[0] + "/xpine/dist";
 }
 
-// src/util/postcss/remove-layers.ts
-var plugin = (opts = {}) => {
-  return {
-    postcssPlugin: "postcssRemoveLayers",
-    AtRule: {
-      layer: (atRule) => {
-        atRule.replaceWith(atRule.nodes);
-      }
-    }
-  };
-};
-plugin.postcss = true;
-var remove_layers_default = plugin;
-
 // src/build/esbuild/transformTSXFiles.ts
 import fs2 from "fs-extra";
 import ts2 from "typescript";
@@ -478,9 +462,92 @@ function filePathToURLPath(pathName, isDist = true) {
   return result;
 }
 
+// src/build/css.ts
+import { globSync as globSync2 } from "glob";
+import fs6 from "fs-extra";
+import postcss from "postcss";
+
+// src/build/postcss/remove-layers.ts
+var plugin = (opts = {}) => {
+  return {
+    postcssPlugin: "postcssRemoveLayers",
+    AtRule: {
+      layer: (atRule) => {
+        atRule.replaceWith(atRule.nodes);
+      }
+    }
+  };
+};
+plugin.postcss = true;
+var remove_layers_default = plugin;
+
+// src/build/postcss/add-breakpoint-data.ts
+var plugin2 = (opts = {}) => {
+  const nodeValues = [];
+  return {
+    postcssPlugin: "addBreakpointData",
+    AtRule: {
+      theme(atRule) {
+        const nodes = atRule.nodes.filter((node) => {
+          return node.prop.startsWith("--breakpoint-");
+        });
+        nodeValues.push(...nodes.map((node) => {
+          return {
+            // @ts-ignore
+            breakpoint: node.prop.replace("--breakpoint-", ""),
+            // @ts-ignore
+            value: node.value
+          };
+        }));
+      }
+    },
+    OnceExit(root) {
+      root.append([
+        `body:before {`,
+        `content: "default"; display: none; visibility: hidden;`,
+        `}`
+      ].join(""));
+      const nodeValuesMapped = nodeValues.sort((a, b) => {
+        return Number(a.value.replace(/[^0-9]/g, "")) - Number(b.value.replace(/[^0-9]/g, ""));
+      }).map(({ breakpoint, value }) => {
+        return [
+          `@media (min-width: ${value}) {`,
+          `body:before {`,
+          `content: "${breakpoint}";`,
+          `}`,
+          `}`
+        ].join("");
+      });
+      for (const value of nodeValuesMapped) {
+        root.append(value);
+      }
+    }
+  };
+};
+plugin2.postcss = true;
+var add_breakpoint_data_default = plugin2;
+
+// src/build/css.ts
+import tailwindPostcss from "@tailwindcss/postcss";
+async function buildCSS(disableTailwind2) {
+  const cssFiles = globSync2(config.srcDir + "/**/*.css");
+  for (const file of cssFiles) {
+    const fileContents = fs6.readFileSync(file, "utf-8");
+    let result = fileContents;
+    if (!disableTailwind2) {
+      result = await postcss([add_breakpoint_data_default()]).process(fileContents, { from: file });
+      result = await postcss([tailwindPostcss(), remove_layers_default()]).process(result.css, { from: file });
+    }
+    const newPath = file.replace(config.srcDir, config.distDir);
+    fs6.ensureFileSync(newPath);
+    fs6.writeFileSync(newPath, result.css);
+  }
+  logSize(config.distPublicDir, "css");
+}
+
 // src/scripts/build.ts
 var extensions = [".ts", ".tsx"];
-var packageJson = JSON.parse(fs6.readFileSync(config.packageJsonPath, "utf-8"));
+var packageJson = JSON.parse(fs7.readFileSync(config.packageJsonPath, "utf-8"));
 var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
 var xpineDistDir = getXPineDistDir();
 async function buildApp(args) {
@@ -488,12 +555,12 @@ async function buildApp(args) {
   const removePreviousBuild2 = args?.removePreviousBuild || false;
   const disableTailwind2 = args?.disableTailwind || false;
   try {
-    if (removePreviousBuild2) fs6.removeSync(config.distDir);
-    const srcDirFiles = globSync2(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
+    if (removePreviousBuild2) fs7.removeSync(config.distDir);
+    const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
     const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev2);
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
     await buildClientSideFiles([alpineDataFile], isDev2);
-    fs6.removeSync(config.distTempFolder);
+    fs7.removeSync(config.distTempFolder);
     await buildCSS(disableTailwind2);
     await buildPublicFolderSymlinks();
     await buildOnLoadFile(componentData, isDev2);
@@ -513,7 +580,7 @@ async function buildAppFiles(files, isDev2) {
     return fileName === "+config";
   });
   const backendFiles = files.filter((file) => extensions.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
-  fs6.ensureDirSync(config.distDir);
+  fs7.ensureDirSync(config.distDir);
   await build({
     entryPoints: backendFiles,
     format: "esm",
@@ -538,9 +605,9 @@ async function buildAppFiles(files, isDev2) {
 }
 async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
   const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
-  fs6.ensureFileSync(tempFilePath);
+  fs7.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
-  const clientFiles = globSync2(
+  const clientFiles = globSync3(
     config.publicDir + "/**/*.{js,ts}",
     {
       ignore: pagesScriptsGlob
@@ -556,7 +623,7 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
     minify: !isDev2,
     sourcemap: isDev2 ? "inline" : false
   });
-  const pagesFiles = globSync2(pagesScriptsGlob);
+  const pagesFiles = globSync3(pagesScriptsGlob);
   await build({
     entryPoints: pagesFiles || [],
     bundle: true,
@@ -568,13 +635,13 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev2) {
 }
 function writeDevServerClientSideCode(tempFilePath) {
   const devServerPath = path5.join(xpineDistDir, "./src/static/dev-server.js");
-  const content = fs6.readFileSync(devServerPath, "utf-8");
-  fs6.appendFileSync(tempFilePath, "\n" + content);
+  const content = fs7.readFileSync(devServerPath, "utf-8");
+  fs7.appendFileSync(tempFilePath, "\n" + content);
 }
 function writeSpaClientSideCode(tempFilePath) {
   const spaPath = path5.join(xpineDistDir, "./src/static/spa.js");
-  const content = fs6.readFileSync(spaPath, "utf-8");
-  fs6.appendFileSync(tempFilePath, "\n" + content);
+  const content = fs7.readFileSync(spaPath, "utf-8");
+  fs7.appendFileSync(tempFilePath, "\n" + content);
 }
 async function buildAlpineDataFile(componentData, dataFiles) {
   const output = {
@@ -620,23 +687,12 @@ 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");
-  fs6.ensureFileSync(config.alpineDataPath);
-  fs6.writeFileSync(config.alpineDataPath, result);
+  fs7.ensureFileSync(config.alpineDataPath);
+  fs7.writeFileSync(config.alpineDataPath, result);
   return config.alpineDataPath;
 }
-async function buildCSS(disableTailwind2) {
-  const cssFiles = globSync2(config.srcDir + "/**/*.css");
-  for (const file of cssFiles) {
-    const fileContents = fs6.readFileSync(file, "utf-8");
-    const result = disableTailwind2 ? fileContents : await postcss([tailwindPostcss(), remove_layers_default()]).process(fileContents, { from: file });
-    const newPath = file.replace(config.srcDir, config.distDir);
-    fs6.ensureFileSync(newPath);
-    fs6.writeFileSync(newPath, result.css);
-  }
-  logSize(config.distPublicDir, "css");
-}
 async function buildPublicFolderSymlinks() {
-  const files = globSync2(config.publicDir + "/**/*.*", {
+  const files = globSync3(config.publicDir + "/**/*.*", {
     ignore: "/**/*.{css,js,ts,tsx,jsx}"
   });
   for (const file of files) {
@@ -645,19 +701,19 @@ async function buildPublicFolderSymlinks() {
       const splitNewPath = newPath.split("/");
       splitNewPath.pop();
       const newDir = splitNewPath.join("/");
-      fs6.ensureDirSync(newDir);
-      fs6.symlinkSync(file, newPath);
+      fs7.ensureDirSync(newDir);
+      fs7.symlinkSync(file, newPath);
     } catch {
     }
   }
 }
 async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
-  const files = globSync2(pathName + "/**/*" + (type === "css" ? ".css" : ""));
+  const files = globSync3(pathName + "/**/*" + (type === "css" ? ".css" : ""));
   const fileSizes = files.map((file) => {
     if (!validExtensions.find((ext) => file.endsWith(ext))) return false;
     return {
       file,
-      size: fs6.statSync(file).size / (1024 * 1e3)
+      size: fs7.statSync(file).size / (1024 * 1e3)
     };
   }).filter(Boolean);
   const totalSize = fileSizes.reduce((total, current) => {
@@ -700,7 +756,7 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
       const req = { params: {} };
       const data = config2?.data ? await config2.data(req) : null;
       const staticComponentOutput = await componentFn({ data, routePath: urlPath });
-      fs6.writeFileSync(
+      fs7.writeFileSync(
         path5.join(outputPath, "./index.html"),
         doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
       );
@@ -721,8 +777,8 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
         const urlPath = filePathToURLPath(updatedOutDir);
         const data = config2?.data ? await config2.data(req) : null;
         const staticComponentOutput = await componentFn({ req, data, routePath: urlPath });
-        fs6.ensureDirSync(updatedOutDir);
-        fs6.writeFileSync(
+        fs7.ensureDirSync(updatedOutDir);
+        fs7.writeFileSync(
           path5.join(updatedOutDir, "./index.html"),
           doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
         );
@@ -773,7 +829,7 @@ async function buildOnLoadFile(componentData, isDev2) {
     }
   `;
   const onLoadFilePath = path5.join(config.distDir, "./__xpineOnLoad.ts");
-  fs6.writeFileSync(onLoadFilePath, output);
+  fs7.writeFileSync(onLoadFilePath, output);
   await build({
     entryPoints: [onLoadFilePath],
     format: "esm",

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

@@ -9,7 +9,7 @@ import chokidar from "chokidar";
 
 // src/scripts/build.ts
 import path5 from "path";
-import fs6 from "fs-extra";
+import fs7 from "fs-extra";
 import { build } from "esbuild";
 
 // src/build/typescript-builder.ts
@@ -287,9 +287,7 @@ async function triggerXPineOnLoad(noCache = false) {
 }
 
 // src/scripts/build.ts
-import { globSync as globSync2 } from "glob";
-import postcss from "postcss";
-import tailwindPostcss from "@tailwindcss/postcss";
+import { globSync as globSync3 } from "glob";
 
 // src/util/paths.ts
 function getXPineDistDir() {
@@ -302,20 +300,6 @@ function getXPineDistDir() {
   return splitDir[0] + "/xpine/dist";
 }
 
-// src/util/postcss/remove-layers.ts
-var plugin = (opts = {}) => {
-  return {
-    postcssPlugin: "postcssRemoveLayers",
-    AtRule: {
-      layer: (atRule) => {
-        atRule.replaceWith(atRule.nodes);
-      }
-    }
-  };
-};
-plugin.postcss = true;
-var remove_layers_default = plugin;
-
 // src/build/esbuild/transformTSXFiles.ts
 import fs2 from "fs-extra";
 import ts2 from "typescript";
@@ -485,9 +469,92 @@ function filePathToURLPath(pathName, isDist = true) {
   return result;
 }
 
+// src/build/css.ts
+import { globSync as globSync2 } from "glob";
+import fs6 from "fs-extra";
+import postcss from "postcss";
+
+// src/build/postcss/remove-layers.ts
+var plugin = (opts = {}) => {
+  return {
+    postcssPlugin: "postcssRemoveLayers",
+    AtRule: {
+      layer: (atRule) => {
+        atRule.replaceWith(atRule.nodes);
+      }
+    }
+  };
+};
+plugin.postcss = true;
+var remove_layers_default = plugin;
+
+// src/build/postcss/add-breakpoint-data.ts
+var plugin2 = (opts = {}) => {
+  const nodeValues = [];
+  return {
+    postcssPlugin: "addBreakpointData",
+    AtRule: {
+      theme(atRule) {
+        const nodes = atRule.nodes.filter((node) => {
+          return node.prop.startsWith("--breakpoint-");
+        });
+        nodeValues.push(...nodes.map((node) => {
+          return {
+            // @ts-ignore
+            breakpoint: node.prop.replace("--breakpoint-", ""),
+            // @ts-ignore
+            value: node.value
+          };
+        }));
+      }
+    },
+    OnceExit(root) {
+      root.append([
+        `body:before {`,
+        `content: "default"; display: none; visibility: hidden;`,
+        `}`
+      ].join(""));
+      const nodeValuesMapped = nodeValues.sort((a, b) => {
+        return Number(a.value.replace(/[^0-9]/g, "")) - Number(b.value.replace(/[^0-9]/g, ""));
+      }).map(({ breakpoint, value }) => {
+        return [
+          `@media (min-width: ${value}) {`,
+          `body:before {`,
+          `content: "${breakpoint}";`,
+          `}`,
+          `}`
+        ].join("");
+      });
+      for (const value of nodeValuesMapped) {
+        root.append(value);
+      }
+    }
+  };
+};
+plugin2.postcss = true;
+var add_breakpoint_data_default = plugin2;
+
+// src/build/css.ts
+import tailwindPostcss from "@tailwindcss/postcss";
+async function buildCSS(disableTailwind) {
+  const cssFiles = globSync2(config.srcDir + "/**/*.css");
+  for (const file of cssFiles) {
+    const fileContents = fs6.readFileSync(file, "utf-8");
+    let result = fileContents;
+    if (!disableTailwind) {
+      result = await postcss([add_breakpoint_data_default()]).process(fileContents, { from: file });
+      result = await postcss([tailwindPostcss(), remove_layers_default()]).process(result.css, { from: file });
+    }
+    const newPath = file.replace(config.srcDir, config.distDir);
+    fs6.ensureFileSync(newPath);
+    fs6.writeFileSync(newPath, result.css);
+  }
+  logSize(config.distPublicDir, "css");
+}
+
 // src/scripts/build.ts
 var extensions = [".ts", ".tsx"];
-var packageJson = JSON.parse(fs6.readFileSync(config.packageJsonPath, "utf-8"));
+var packageJson = JSON.parse(fs7.readFileSync(config.packageJsonPath, "utf-8"));
 var allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
 var xpineDistDir = getXPineDistDir();
 async function buildApp(args) {
@@ -495,12 +562,12 @@ async function buildApp(args) {
   const removePreviousBuild = args?.removePreviousBuild || false;
   const disableTailwind = args?.disableTailwind || false;
   try {
-    if (removePreviousBuild) fs6.removeSync(config.distDir);
-    const srcDirFiles = globSync2(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
+    if (removePreviousBuild) fs7.removeSync(config.distDir);
+    const srcDirFiles = globSync3(config.srcDir + "/**/*.{js,ts,tsx,jsx}");
     const { componentData, dataFiles } = await buildAppFiles(srcDirFiles, isDev);
     const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
     await buildClientSideFiles([alpineDataFile], isDev);
-    fs6.removeSync(config.distTempFolder);
+    fs7.removeSync(config.distTempFolder);
     await buildCSS(disableTailwind);
     await buildPublicFolderSymlinks();
     await buildOnLoadFile(componentData, isDev);
@@ -520,7 +587,7 @@ async function buildAppFiles(files, isDev) {
     return fileName === "+config";
   });
   const backendFiles = files.filter((file) => extensions.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
-  fs6.ensureDirSync(config.distDir);
+  fs7.ensureDirSync(config.distDir);
   await build({
     entryPoints: backendFiles,
     format: "esm",
@@ -545,9 +612,9 @@ async function buildAppFiles(files, isDev) {
 }
 async function buildClientSideFiles(alpineDataFiles = [], isDev) {
   const tempFilePath = path5.join(config.distTempFolder, "./app.ts");
-  fs6.ensureFileSync(tempFilePath);
+  fs7.ensureFileSync(tempFilePath);
   const pagesScriptsGlob = config.publicDir + "/scripts/pages/**/*.{js,ts}";
-  const clientFiles = globSync2(
+  const clientFiles = globSync3(
     config.publicDir + "/**/*.{js,ts}",
     {
       ignore: pagesScriptsGlob
@@ -563,7 +630,7 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
     minify: !isDev,
     sourcemap: isDev ? "inline" : false
   });
-  const pagesFiles = globSync2(pagesScriptsGlob);
+  const pagesFiles = globSync3(pagesScriptsGlob);
   await build({
     entryPoints: pagesFiles || [],
     bundle: true,
@@ -575,13 +642,13 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
 }
 function writeDevServerClientSideCode(tempFilePath) {
   const devServerPath = path5.join(xpineDistDir, "./src/static/dev-server.js");
-  const content = fs6.readFileSync(devServerPath, "utf-8");
-  fs6.appendFileSync(tempFilePath, "\n" + content);
+  const content = fs7.readFileSync(devServerPath, "utf-8");
+  fs7.appendFileSync(tempFilePath, "\n" + content);
 }
 function writeSpaClientSideCode(tempFilePath) {
   const spaPath = path5.join(xpineDistDir, "./src/static/spa.js");
-  const content = fs6.readFileSync(spaPath, "utf-8");
-  fs6.appendFileSync(tempFilePath, "\n" + content);
+  const content = fs7.readFileSync(spaPath, "utf-8");
+  fs7.appendFileSync(tempFilePath, "\n" + content);
 }
 async function buildAlpineDataFile(componentData, dataFiles) {
   const output = {
@@ -627,23 +694,12 @@ 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");
-  fs6.ensureFileSync(config.alpineDataPath);
-  fs6.writeFileSync(config.alpineDataPath, result);
+  fs7.ensureFileSync(config.alpineDataPath);
+  fs7.writeFileSync(config.alpineDataPath, result);
   return config.alpineDataPath;
 }
-async function buildCSS(disableTailwind) {
-  const cssFiles = globSync2(config.srcDir + "/**/*.css");
-  for (const file of cssFiles) {
-    const fileContents = fs6.readFileSync(file, "utf-8");
-    const result = disableTailwind ? fileContents : await postcss([tailwindPostcss(), remove_layers_default()]).process(fileContents, { from: file });
-    const newPath = file.replace(config.srcDir, config.distDir);
-    fs6.ensureFileSync(newPath);
-    fs6.writeFileSync(newPath, result.css);
-  }
-  logSize(config.distPublicDir, "css");
-}
 async function buildPublicFolderSymlinks() {
-  const files = globSync2(config.publicDir + "/**/*.*", {
+  const files = globSync3(config.publicDir + "/**/*.*", {
     ignore: "/**/*.{css,js,ts,tsx,jsx}"
   });
   for (const file of files) {
@@ -652,19 +708,19 @@ async function buildPublicFolderSymlinks() {
       const splitNewPath = newPath.split("/");
       splitNewPath.pop();
       const newDir = splitNewPath.join("/");
-      fs6.ensureDirSync(newDir);
-      fs6.symlinkSync(file, newPath);
+      fs7.ensureDirSync(newDir);
+      fs7.symlinkSync(file, newPath);
     } catch {
     }
   }
 }
 async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
-  const files = globSync2(pathName + "/**/*" + (type === "css" ? ".css" : ""));
+  const files = globSync3(pathName + "/**/*" + (type === "css" ? ".css" : ""));
   const fileSizes = files.map((file) => {
     if (!validExtensions.find((ext) => file.endsWith(ext))) return false;
     return {
       file,
-      size: fs6.statSync(file).size / (1024 * 1e3)
+      size: fs7.statSync(file).size / (1024 * 1e3)
     };
   }).filter(Boolean);
   const totalSize = fileSizes.reduce((total, current) => {
@@ -707,7 +763,7 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
       const req = { params: {} };
       const data = config2?.data ? await config2.data(req) : null;
       const staticComponentOutput = await componentFn({ data, routePath: urlPath });
-      fs6.writeFileSync(
+      fs7.writeFileSync(
         path5.join(outputPath, "./index.html"),
         doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
       );
@@ -728,8 +784,8 @@ async function buildStaticFiles(config2, component, componentImport, builtCompon
         const urlPath = filePathToURLPath(updatedOutDir);
         const data = config2?.data ? await config2.data(req) : null;
         const staticComponentOutput = await componentFn({ req, data, routePath: urlPath });
-        fs6.ensureDirSync(updatedOutDir);
-        fs6.writeFileSync(
+        fs7.ensureDirSync(updatedOutDir);
+        fs7.writeFileSync(
           path5.join(updatedOutDir, "./index.html"),
           doctypeHTML + (config2?.wrapper ? await config2.wrapper({ req, children: staticComponentOutput, config: config2, data, routePath: urlPath }) : staticComponentOutput) + staticComment
         );
@@ -780,7 +836,7 @@ async function buildOnLoadFile(componentData, isDev) {
     }
   `;
   const onLoadFilePath = path5.join(config.distDir, "./__xpineOnLoad.ts");
-  fs6.writeFileSync(onLoadFilePath, output);
+  fs7.writeFileSync(onLoadFilePath, output);
   await build({
     entryPoints: [onLoadFilePath],
     format: "esm",

package/dist/src/static/spa.js

@@ -197,5 +197,27 @@ function safeParseURL(url) {
     return {};
   }
 }
+function handleBreakpointEvents() {
+  let lastSentBreakpoint = "";
+  let initial = true;
+  return function() {
+    const breakpoint = window.getComputedStyle(document.body, ":before")?.content?.replace(/[\'\"]/g, "") || "";
+    if (breakpoint !== lastSentBreakpoint) {
+      const event = new CustomEvent("breakpoint-change", {
+        detail: {
+          breakpoint,
+          initial,
+          previous: lastSentBreakpoint
+        }
+      });
+      window.dispatchEvent(event);
+      lastSentBreakpoint = breakpoint;
+      initial = false;
+    }
+  };
+}
+var breakpointEventsFunction = handleBreakpointEvents();
 window.addEventListener("DOMContentLoaded", replaceDocumentContentsWithLinkResponse);
 window.addEventListener("popstate", handleBackButton);
+window.addEventListener("resize", breakpointEventsFunction);
+breakpointEventsFunction();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpine",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "main": "dist/index.js",
   "dependencies": {
     "@aws-sdk/client-secrets-manager": "^3.758.0",