xpine 0.0.45 → 0.0.47

package/README.md

@@ -13,7 +13,6 @@ XPine uses page based routing. Render an HTML page using JSX components, for exa
 ```
 import { WrapperProps } from 'xpine/dist/types';
 import Base from '../components/Base';
-import Navbar from '../components/Navbar';
 
 export const config = {
   data() {
@@ -156,6 +155,19 @@ You can create catch all routes by naming the file \_all\_.(jsx|tsx|js|ts). You
 
 You can get the route param in your function with req.params[0], such as how express handles catch all routes.
 
+### Route specific middleware
+
+If you need route specific middleware, e.g. for file uploads, you can specify a `routeMiddleware` function in a config variable in the endpoint file:
+
+```
+export const config = {
+  routeMiddleware(req, res, next) {
+    console.log('route middleware');
+    next();
+  }
+}
+```
+
 ### Static Site Generation
 
 Generate path specific static pages by specifying in the config of either the page's file, such as `/src/pages/about.tsx` with a config export:
@@ -296,14 +308,61 @@ export default async function startServer() {
 }
 ```
 
+Add a directory in `/src/server` called `run`, and create two files: `/src/server/dev.ts` and `/src/server/prod.ts`.
+
+`dev.ts` should look like this:
+
+```
+import { runDevServer } from 'xpine';
+
+runDevServer();
+```
+
+and can be run with an npm command like this in your package.json scripts: `"dev": "PORT=8888 LOCALHOST=1 xpine-dev"`.
+
+The `prod.ts` should look like this:
+
+```
+import startServer from '../app';
+
+await startServer();
+```
+
+and can be run with an npm command in your package.json scripts like this, after the app has been built with `xpine-build`:
+
+`"start": "PORT=8888 node ./dist/server/run/prod.js"`
+
 ### xpine.config.mjs file
 
-Add an xpine.config.mjs file to your root directory. This is used primarily for configuring file paths
+Add an xpine.config.mjs file to your root directory. This is used primarily for configuring/changing file paths. Configs can be imported with `import { config } from "xpine"`.
 
 ```
 export default {}
 ```
 
+These are the following default paths:
+
+```
+rootDir: process.cwd
+srcDir: rootDir + ./src
+distDir: rootDir + ./dist
+packageJsonPath: rootDir + ./package.json
+distPublicDir: distDir + ./public
+distPublicScriptsDir: distPublicDir + ./scripts
+distTempFolder: distDir + ./temp
+clientJSBundlePath: distPublicScriptsDir + ./app.js
+alpineDataPath: distTempFolder + ./alpine-data.ts
+serverDistDir: distDir + ./server
+serverDistAppPath: serverDistDir + ./app.js
+pagesDir: srcDir + ./pages
+distPagesDir: distDir + ./pages
+publicDir: srcDir + ./public
+serverDir: srcDir + ./server
+runDir: serverDir + ./run
+serverAppPath: serverDir + ./app.ts
+globalCSSFile: publicDir + ./styles/global.css
+```
+
 ### SPA interactivity
 
 - data-spa="true"

package/TODO

@@ -0,0 +1,2 @@
+[ ] folder specific client side JS builds
+[ ] TypeError: Cannot read properties of undefined (reading 'find')

package/dist/index.d.ts

@@ -6,4 +6,5 @@ export * from './src/scripts/build';
 export * from './src/auth';
 export * from './src/util/html';
 export * from './src/context';
+export * from './src/util/web';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -531,14 +531,12 @@ async function createRouteFunction(route, configFiles) {
   }
   let config2 = {};
   const configFilePaths = getConfigFiles(route.originalRoute, configFiles);
-  if (!isDev) {
-    config2 = configFilePaths && await getCompleteConfig(configFilePaths, Date.now());
-    if (componentImport?.config) {
-      config2 = {
-        ...config2,
-        ...componentImport.config
-      };
-    }
+  config2 = configFilePaths && await getCompleteConfig(configFilePaths, Date.now());
+  if (componentImport?.config) {
+    config2 = {
+      ...config2,
+      ...componentImport.config
+    };
   }
   async function routeFn(req, res) {
     const urlPath = req?.route?.path || "/";
@@ -588,6 +586,7 @@ async function createRouteFunction(route, configFiles) {
     formattedRouteItem,
     foundMethod,
     route,
+    config: config2,
     routeFn
   };
 }
@@ -599,8 +598,12 @@ async function createRouter() {
   await triggerXPineOnLoad();
   for (const route of routeMap) {
     try {
-      const { formattedRouteItem, foundMethod, routeFn } = await createRouteFunction(route, configFiles);
-      router[foundMethod || "get"](formattedRouteItem, routeFn);
+      const { formattedRouteItem, foundMethod, config: config2, routeFn } = await createRouteFunction(route, configFiles);
+      if (config2?.routeMiddleware) {
+        router[foundMethod || "get"](formattedRouteItem, config2.routeMiddleware, routeFn);
+      } else {
+        router[foundMethod || "get"](formattedRouteItem, routeFn);
+      }
       routeResults.push({
         formattedRouteItem,
         foundMethod,
@@ -787,7 +790,7 @@ async function buildAppFiles(files, isDev2) {
     const fileName = file.split("/").at(-1).split(".").shift();
     return fileName === "+config";
   });
-  const backendFiles = files.filter((file) => extensions.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
+  const backendFiles = files.filter((file) => extensions?.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
   fs7.ensureDirSync(config.distDir);
   await build({
     entryPoints: backendFiles,
@@ -918,7 +921,7 @@ async function buildPublicFolderSymlinks() {
 async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
   const files = globSync3(pathName + "/**/*" + (type === "css" ? ".css" : ""));
   const fileSizes = files.map((file) => {
-    if (!validExtensions.find((ext) => file.endsWith(ext))) return false;
+    if (!validExtensions?.find((ext) => file.endsWith(ext))) return false;
     return {
       file,
       size: fs7.statSync(file).size / (1024 * 1e3)
@@ -1108,7 +1111,9 @@ async function runDevServer() {
     ignored: (pathName) => pathName.endsWith(".map") || pathName.startsWith(path8.join(config.serverDir, "./prisma"))
   });
   watcher.on("all", async (event, path9) => {
-    const shouldReloadServer = path9.startsWith(config.serverDir) && !path9.startsWith(config.runDir) || ["add", "unlink"].includes(event) && path9.startsWith(config.pagesDir);
+    const isRegularExpressRoute = path9.startsWith(config.pagesDir) && (path9.endsWith(".ts") || path9.endsWith(".js"));
+    const isServerDir = path9.startsWith(config.serverDir) && !path9.startsWith(config.runDir);
+    const shouldReloadServer = isServerDir || isRegularExpressRoute || ["add", "unlink"].includes(event) && path9.startsWith(config.pagesDir);
     if (shouldReloadServer) {
       await asyncServerClose(appServer.server);
       rebuildEmitter.emit("rebuild-server");
@@ -1201,6 +1206,11 @@ var html = class {
 function JSXRuntime() {
   return true;
 }
+
+// src/util/web.ts
+function getCurrentBreakpoint() {
+  return window.getComputedStyle(document.documentElement).getPropertyValue("--active-breakpoint")?.replace(/[\'\"]/g, "")?.trim() || "";
+}
 export {
   JSXRuntime,
   addToContextArray,
@@ -1217,6 +1227,7 @@ export {
   filePathToURLPath,
   fromRoot,
   getComponentDynamicPaths,
+  getCurrentBreakpoint,
   getTokenFromRequest,
   html,
   logSize,

package/dist/src/express.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"express.d.ts","sourceRoot":"","sources":["../../src/express.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAgB,OAAO,EAAqB,MAAM,SAAS,CAAC;AAsJ5E,wBAAsB,YAAY;;;GA8BjC;AAiBD,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,GAAG,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,iBAyB1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,MAAM,GAAG,KAAK,CAanG;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,UAQzE"}
+{"version":3,"file":"express.d.ts","sourceRoot":"","sources":["../../src/express.ts"],"names":[],"mappings":"AAAA,OAAgB,EAAgB,OAAO,EAAqB,MAAM,SAAS,CAAC;AAqJ5E,wBAAsB,YAAY;;;GAkCjC;AAiBD,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,GAAG,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,iBAyB1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,MAAM,GAAG,KAAK,CAanG;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,UAQzE"}

package/dist/src/runDevServer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runDevServer.d.ts","sourceRoot":"","sources":["../../src/runDevServer.ts"],"names":[],"mappings":"AAYA,wBAAsB,YAAY,kBA6DjC"}
+{"version":3,"file":"runDevServer.d.ts","sourceRoot":"","sources":["../../src/runDevServer.ts"],"names":[],"mappings":"AAYA,wBAAsB,YAAY,kBA+DjC"}

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

@@ -583,7 +583,7 @@ async function buildAppFiles(files, isDev3) {
     const fileName = file.split("/").at(-1).split(".").shift();
     return fileName === "+config";
   });
-  const backendFiles = files.filter((file) => extensions.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
+  const backendFiles = files.filter((file) => extensions?.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
   fs7.ensureDirSync(config.distDir);
   await build({
     entryPoints: backendFiles,
@@ -714,7 +714,7 @@ async function buildPublicFolderSymlinks() {
 async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
   const files = globSync3(pathName + "/**/*" + (type === "css" ? ".css" : ""));
   const fileSizes = files.map((file) => {
-    if (!validExtensions.find((ext) => file.endsWith(ext))) return false;
+    if (!validExtensions?.find((ext) => file.endsWith(ext))) return false;
     return {
       file,
       size: fs7.statSync(file).size / (1024 * 1e3)

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

@@ -590,7 +590,7 @@ async function buildAppFiles(files, isDev2) {
     const fileName = file.split("/").at(-1).split(".").shift();
     return fileName === "+config";
   });
-  const backendFiles = files.filter((file) => extensions.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
+  const backendFiles = files.filter((file) => extensions?.find((ext) => file.endsWith(ext))).filter((file) => !file.startsWith(config.publicDir));
   fs7.ensureDirSync(config.distDir);
   await build({
     entryPoints: backendFiles,
@@ -721,7 +721,7 @@ async function buildPublicFolderSymlinks() {
 async function logSize(pathName, type, validExtensions = [".js", ".css"]) {
   const files = globSync3(pathName + "/**/*" + (type === "css" ? ".css" : ""));
   const fileSizes = files.map((file) => {
-    if (!validExtensions.find((ext) => file.endsWith(ext))) return false;
+    if (!validExtensions?.find((ext) => file.endsWith(ext))) return false;
     return {
       file,
       size: fs7.statSync(file).size / (1024 * 1e3)
@@ -911,7 +911,9 @@ async function runDevServer() {
     ignored: (pathName) => pathName.endsWith(".map") || pathName.startsWith(path7.join(config.serverDir, "./prisma"))
   });
   watcher.on("all", async (event, path8) => {
-    const shouldReloadServer = path8.startsWith(config.serverDir) && !path8.startsWith(config.runDir) || ["add", "unlink"].includes(event) && path8.startsWith(config.pagesDir);
+    const isRegularExpressRoute = path8.startsWith(config.pagesDir) && (path8.endsWith(".ts") || path8.endsWith(".js"));
+    const isServerDir = path8.startsWith(config.serverDir) && !path8.startsWith(config.runDir);
+    const shouldReloadServer = isServerDir || isRegularExpressRoute || ["add", "unlink"].includes(event) && path8.startsWith(config.pagesDir);
     if (shouldReloadServer) {
       await asyncServerClose(appServer.server);
       rebuildEmitter.emit("rebuild-server");

package/dist/src/util/web.d.ts

@@ -0,0 +1,2 @@
+export declare function getCurrentBreakpoint(): string;
+//# sourceMappingURL=web.d.ts.map

package/dist/src/util/web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.d.ts","sourceRoot":"","sources":["../../../src/util/web.ts"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,WAEnC"}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { Request, Response } from 'express';
+import { NextFunction, Request, Response } from 'express';
 import ts from 'typescript';
 export type XPineConfig = {
     [key: string]: any;
@@ -24,6 +24,7 @@ export type ConfigFile = {
     }[]>);
     wrapper?: (props: WrapperProps) => Promise<any>;
     data?: (req: ServerRequest) => Promise<any>;
+    routeMiddleware?: (req: ServerRequest, res: Response, next: NextFunction) => void;
 };
 export type PageProps = {
     req: ServerRequest;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC,CAAC,CAAC;IACrE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAChD,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7C,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,aAAa,CAAC;IACnB,GAAG,EAAE,QAAQ,CAAC;IACd,IAAI,EAAE,GAAG,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC;CACvB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,WAAW,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC,CAAC,CAAC;IACrE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAChD,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CACnF,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,aAAa,CAAC;IACnB,GAAG,EAAE,QAAQ,CAAC;IACd,IAAI,EAAE,GAAG,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;CACnB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC;CACvB,CAAA"}

package/package.json

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

package/types.ts

@@ -1,4 +1,4 @@
-import { Request, Response } from 'express';
+import { NextFunction, Request, Response } from 'express';
 import ts from 'typescript';
 
 export type XPineConfig = {
@@ -27,6 +27,7 @@ export type ConfigFile = {
   staticPaths?: boolean | (() => Promise<{ [key: string]: string }[]>);
   wrapper?: (props: WrapperProps) => Promise<any>;
   data?: (req: ServerRequest) => Promise<any>;
+  routeMiddleware?: (req: ServerRequest, res: Response, next: NextFunction) => void;
 }
 
 export type PageProps = {