xpine 0.0.1

package/.d.ts

@@ -0,0 +1 @@
+declare module 'xpine';

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/README.md

@@ -0,0 +1,39 @@
+# XPine - Alpine.js + JSX + Tailwind framework
+
+Combines JSX with Alpine.js for a simpler, easier development experience.
+
+## Get started
+
+Add an xpine.config.mjs file to your root directory
+
+```
+export default {}
+```
+
+## API
+
+### Build
+
+`import { buildApp } from 'xpine';`
+
+- Used for building production app
+
+## Auth
+
+`import { signUser, verifyUser } from 'xpine';`
+
+## Dev server
+
+`import { runDevServer } from 'xpine';`
+
+## Config
+
+`import { config } from 'xpine';`
+
+## Env
+
+`import { setupEnv } from 'xpine';`
+
+## Router
+
+`import { createXPineRouter } from 'xpine';`

package/base-path.mjs

@@ -0,0 +1,5 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+const filename = fileURLToPath(import.meta.url);
+const basePath = path.dirname(filename);
+export default basePath;

package/index.mjs

@@ -0,0 +1,6 @@
+export * from './src/runDevServer.mjs';
+export * from './src/express.mjs';
+export * from './src/util/env.mjs';
+export * from './src/util/get-config.mjs';
+export * from './src/build.mjs';
+export * from './src/auth.mjs';

package/modules/html/.d.ts

@@ -0,0 +1 @@
+declare module 'html';

package/modules/html/index.js

@@ -0,0 +1,28 @@
+export default class HTML {
+
+  static attributeObjectToString(props) {
+    if (!props) return '';
+    return Object.entries(props)
+      .filter(([, value]) => value !== null && value !== undefined)
+      .map(([key, value], index) => {
+        const start = index === 0 ? ' ' : '';
+        return `${start}${key}="${value}"`;
+      })
+      .join(' ');
+  }
+
+  static async fragment(props) {
+    const childrenResult = await Promise.all(props.children.flat());
+    return childrenResult.filter(Boolean).join('');
+  }
+
+  static async createElement(type, props, ...children) {
+    const childrenResult = await Promise.all(children.flat());
+    // Handle passing in another element
+    if (typeof type === 'function') {
+      const result = await type({ ...props, children: childrenResult, });
+      return result;
+    }
+    return `<${type}${this.attributeObjectToString(props)}>${childrenResult.filter(Boolean).join('')}</${type}>`;
+  }
+}

package/modules/html/jsx-runtime.d.ts

@@ -0,0 +1 @@
+declare module 'html/jsx-runtime';

package/modules/html/jsx-runtime.js

@@ -0,0 +1,3 @@
+export default function JSXRuntime() {
+  return true;
+}

package/modules/html/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "html",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module"
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "xpine",
+  "version": "0.0.1",
+  "main": "index.mjs",
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.8",
+    "builtin-modules": "^4.0.0",
+    "chokidar": "^4.0.3",
+    "dotenv": "^16.4.7",
+    "esbuild": "^0.25.0",
+    "express": "^4.21.2",
+    "express-ws": "^5.0.2",
+    "fs-extra": "^11.3.0",
+    "glob": "^11.0.1",
+    "html": "file:./modules/html",
+    "jsonwebtoken": "^9.0.2",
+    "postcss": "^8.5.3",
+    "request-ip": "^3.3.0",
+    "tsx": "^4.19.3",
+    "typescript": "^5.7.3"
+  },
+  "bin": {
+    "xpine-build": "./src/scripts/build.mjs"
+  },
+  "type": "module"
+}

package/src/auth.mjs

@@ -0,0 +1,39 @@
+import jsonwebtoken from 'jsonwebtoken';
+const { verify, sign, } = jsonwebtoken;
+
+export async function signUser(email, username) {
+  return new Promise((resolve, reject) => {
+    sign(
+      {
+        user: {
+          email,
+          username,
+        },
+      },
+      // @ts-ignore
+      process.env.JWT_PRIVATE_KEY,
+      { expiresIn: '30d', },
+      (err, token) => {
+        if (err) reject(err);
+        resolve(token);
+      });
+  });
+}
+
+export async function verifyUser(token) {
+  return new Promise((resolve, reject) => {
+    // @ts-ignore
+    verify(token, process.env.JWT_PRIVATE_KEY, (err, authorizedData) => {
+      if (err) reject(err);
+      resolve(authorizedData);
+    });
+  });
+}
+
+export function getTokenFromRequest(req) {
+  // @ts-ignore
+  const { authorization, } = req.headers;
+  if (!authorization) return null;
+  const token = authorization.split(' ').pop() || '';
+  return token || null;
+}

package/src/build/dev-server.mjs

@@ -0,0 +1,9 @@
+const socketProtocol = 'ws:';
+const echoSocketUrl = socketProtocol + '//' + window.location.hostname + ':3001/dev-server/';
+const socket = new WebSocket(echoSocketUrl);
+
+socket.addEventListener('message', async (msg) => {
+  if (msg.data === 'refresh:client') {
+    window.location.reload();
+  }
+});

package/src/build/spa.mjs

@@ -0,0 +1,175 @@
+// Enables SPA like behavior for links
+
+async function replaceDocumentContentsWithLinkResponse() {
+  const links = [...document.querySelectorAll('[data-spa]')];
+  for (const link of links) {
+    link.addEventListener('click', updatePageOnLinkClick);
+  }
+
+}
+
+async function updatePageOnLinkClick(e) {
+  const targetHref = e?.target?.getAttribute('href');
+  if (!targetHref) return;
+  if (isExternalURL(targetHref) && !e?.target?.getAttribute('data-spa-crossorigin')) return;
+  e.preventDefault();
+  try {
+    await getNewPageContent(targetHref);
+    if (targetHref === window.location.pathname) return;
+    window.history.pushState(
+      {
+        type: 'link-click',
+        targetHref,
+      },
+      '',
+      targetHref
+    );
+    const event = new CustomEvent('spa:updatePageURL', {
+      detail: {
+        href: targetHref,
+      },
+    });
+    window.dispatchEvent(event);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+async function getNewPageContent(href) {
+  try {
+    const res = await fetch(href);
+    const text = await res.text();
+    const parser = new DOMParser();
+    const dom = parser.parseFromString(text, 'text/html');
+    diffHead(dom);
+    const newScripts = removeBodyScripts(dom);
+    const clonedPersistentNodes = getPersistentNodesFromDocument(dom);
+    const body = dom.body.innerHTML;
+    document.body.innerHTML = body;
+    for (const clonedNode of clonedPersistentNodes) {
+      // @ts-ignore
+      const newNode = document.body.querySelector(`[data-persistent="${clonedNode?.getAttribute('data-persistent')}"]`);
+      newNode.replaceWith(clonedNode);
+    }
+    replaceAttributesOnDocumentBody(dom);
+    replaceDocumentContentsWithLinkResponse();
+    for (const script of newScripts) document.body.appendChild(script);
+    // Send an event
+    const event = new CustomEvent('spa:updatePageContent', {
+      detail: {
+        href,
+      },
+    });
+    window.dispatchEvent(event);
+  } catch (err) {
+    console.error(err);
+    console.error('Error getting link', href);
+  }
+}
+
+function diffHead(dom) {
+  const domHeadChildren = [...dom.head.children];
+  const currentHeadChildren = [...document.head.children];
+  const result = {
+    childrenToAdd: [],
+    childrenToRemove: [],
+  };
+  for (const domChild of domHeadChildren) {
+    const foundInCurrentChildren = currentHeadChildren.find(child => child.outerHTML === domChild.outerHTML);
+    if (!foundInCurrentChildren) result.childrenToAdd.push(domChild);
+  }
+  for (const currentChild of currentHeadChildren) {
+    const foundInDomChildren = domHeadChildren.find(child => child.outerHTML === currentChild.outerHTML);
+    if (!foundInDomChildren) result.childrenToRemove.push(currentChild);
+  }
+  applyHeadDiffsToDocument(result);
+}
+
+function applyHeadDiffsToDocument(diff) {
+  for (const child of diff.childrenToRemove) {
+    // Remove from head
+    document.head.removeChild(child);
+  }
+  for (const child of diff.childrenToAdd) {
+    // Handle script tags
+    if (child?.nodeName?.toLowerCase() == 'script') {
+      const scriptElement = document.createElement('script');
+      portAttributesToElement(child, scriptElement);
+      scriptElement.innerHTML = child.innerHTML;
+      document.head.appendChild(scriptElement);
+      continue;
+    }
+    // Add to the head
+    document.head.appendChild(child);
+  }
+}
+
+function removeBodyScripts(dom) {
+  const scripts = [...dom.body.querySelectorAll('script')];
+  const newElements = [];
+  for (const script of scripts) {
+    const element = document.createElement('script');
+    portAttributesToElement(script, element);
+    element.innerHTML = script.innerHTML;
+    dom.body.removeChild(script);
+    newElements.push(element);
+  }
+  return newElements;
+}
+
+function portAttributesToElement(oldEl, newEl) {
+  for (const attribute of oldEl.attributes) {
+    newEl.setAttribute(attribute.name, attribute.nodeValue);
+  }
+}
+
+function getPersistentNodesFromDocument(dom) {
+  // Find persistent nodes
+  const persistentNodesFromDom = [...dom.querySelectorAll('[data-persistent]')].map(el => el.getAttribute('data-persistent'));
+  const persistentNodesFromBody = [...document.body.querySelectorAll('[data-persistent]')];
+  // Cross match the persistent nodes between current page and new page to find valid ones
+  const validPersistentNodes = persistentNodesFromBody.filter(el => {
+    return persistentNodesFromDom.includes(el.getAttribute('data-persistent'));
+  });
+  // Clone
+  return validPersistentNodes.map(el => el.cloneNode(true));
+}
+
+function replaceAttributesOnDocumentBody(dom) {
+  while (document.body.attributes.length > 0) {
+    document.body.removeAttribute(document.body.attributes[0].name);
+  }
+  // Set attributes on the body
+  for (const attribute of dom.body.attributes) {
+    document.body.setAttribute(attribute.name, attribute.nodeValue);
+  }
+}
+
+async function handleBackButton() {
+  await getNewPageContent(window.history.state?.targetHref || window.location.href);
+}
+
+function isRelativeURL(url) {
+  if (typeof url !== 'string') return false;
+  try {
+    new URL(url);
+    return false;
+  } catch (err) {
+    if (url?.startsWith('//')) return false;
+    return true;
+  }
+}
+
+function isExternalURL(url) {
+  if (isRelativeURL(url)) return false;
+  try {
+    const computedURL = new URL(url);
+    return computedURL?.origin !== window.location?.origin;
+  } catch {
+    return false; // Not a URL
+  }
+}
+
+window.addEventListener('DOMContentLoaded', replaceDocumentContentsWithLinkResponse);
+window.addEventListener('popstate', handleBackButton);
+

package/src/build/typescript-builder.mjs

@@ -0,0 +1,170 @@
+import ts from 'typescript';
+import fs from 'fs-extra';
+import path from 'path';
+
+
+// node arg should initially be the source node
+export function getImportDeclarationNodes(node, sourceFile, importDeclarations = []) {
+  if (node.kind === ts.SyntaxKind.ImportDeclaration) {
+    let importPath = null;
+    node.forEachChild(child => {
+      if (child.kind === ts.SyntaxKind.StringLiteral) {
+        importPath = child.getText(sourceFile).replace(/[\"\']/g, '');
+      }
+    });
+    importDeclarations.push({
+      node,
+      importPath,
+    });
+  }
+  node.forEachChild(child => {
+    getImportDeclarationNodes(child, sourceFile, importDeclarations);
+  });
+  return importDeclarations;
+}
+
+export function stripImportsNodesFromFile(importsToStrip, content, importDeclarations) {
+  let outputContent = content;
+  const filteredImports = importDeclarations.filter(item => importsToStrip.includes(item.importPath));
+  for (const importItem of filteredImports) {
+    outputContent = outputContent.slice(0, importItem.node.pos) + outputContent.slice(importItem.node.end);
+  }
+  return outputContent;
+}
+
+export function findDataAttributesAndFunctions(
+  node,
+  sourceFile,
+  foundDataAttributes = [],
+  foundFunctions = []
+) {
+  if (node.kind === ts.SyntaxKind.JsxAttribute) {
+    const attribute = getAttributeValuePair(node, sourceFile);
+    if (attribute?.[0] === 'x-data' && attribute?.[1]) {
+      // We found a data attribute, 
+      // so now we have to search throughout the file for a function declaration of the same name
+      foundDataAttributes.push(attribute[1].replace(/[^a-zA-Z0-9]/g, ''));
+    }
+  }
+  if (node.kind === ts.SyntaxKind.SourceFile) {
+    node.forEachChild(child => {
+      if ([ts.SyntaxKind.FunctionDeclaration, ts.SyntaxKind.VariableDeclaration].includes(child.kind)) {
+        const functions = getFunctionDeclarationValue(child, sourceFile);
+        foundFunctions.push(functions);
+      }
+    });
+  }
+
+  node.forEachChild(child => {
+    findDataAttributesAndFunctions(child, sourceFile, foundDataAttributes, foundFunctions);
+  });
+  return {
+    foundDataAttributes,
+    foundFunctions,
+  };
+}
+
+export function getAttributeValuePair(node, sourceFile) {
+  const result = [];
+  node.forEachChild(child => {
+    result.push(child.getText(sourceFile));
+  });
+  return result;
+}
+
+export function getFunctionDeclarationValue(node, sourceFile) {
+  const result = {
+    name: null,
+    isDefaultExport: false,
+    hasExport: false,
+  };
+  node.forEachChild(child => {
+    if (child.kind === ts.SyntaxKind.ExportKeyword) {
+      result.hasExport = true;
+    }
+    if (child.kind === ts.SyntaxKind.DefaultKeyword) {
+      result.isDefaultExport = true;
+    }
+    if (child.kind === ts.SyntaxKind.Identifier) {
+      result.name = child.getText(sourceFile);
+    }
+  });
+  return result;
+}
+
+// Convert entry point files into one big bundle file
+export function convertEntryPointsToSingleFile(entryPoints, tempWritePath) {
+  fs.writeFileSync(
+    tempWritePath,
+    entryPoints
+      .map(entry => `import "${entry}"`)
+      .join(';\n')
+  );
+}
+
+export function removeClientScriptInTSXFile(pathName) {
+  const content = fs.readFileSync(pathName, 'utf-8');
+  const source = ts.createSourceFile(
+    pathName,
+    content,
+    ts.ScriptTarget.Latest
+  );
+  let toRemoveFrom;
+  let clientDataStart;
+  const clientImportsToHoist = [];
+  const clientImportsToReplace = [];
+  source.forEachChild((child) => {
+    if (child.kind === ts.SyntaxKind.ExpressionStatement) {
+      const text = child.getText(source);
+      // Remove from here
+      if (text.startsWith('<script')) {
+        toRemoveFrom = child.pos;
+        clientDataStart = child.end;
+      }
+    }
+    // Hoist the client imports to above the <script /> tag
+    if (child.kind === ts.SyntaxKind.ImportDeclaration && child.pos >= clientDataStart) {
+      const text = child.getText(source);
+      child.forEachChild(child => {
+        if (child.kind === ts.SyntaxKind.StringLiteral) {
+          // Keep track of client imports needed for path replacement to be absolute
+          const text = child.getText(source);
+          const importPath = text.replace(/[\"\']/g, '');
+          const isRelativeImport = importPath.startsWith('.') || importPath.startsWith('/');
+          if (!isRelativeImport) return;
+          clientImportsToReplace.push({
+            old: importPath,
+            new: path.join(path.dirname(pathName), importPath),
+          });
+        }
+      });
+      clientImportsToHoist.push(text);
+    }
+  });
+  let clientContent = !isNaN(clientDataStart) ? content.slice(clientDataStart) : '';
+  for (const clientImport of clientImportsToReplace) {
+    clientContent = clientContent.replace(clientImport.old, clientImport.new);
+  }
+  return {
+    content: !isNaN(toRemoveFrom) ?
+      clientImportsToHoist.join('\n') + content.slice(0, toRemoveFrom) :
+      content,
+    clientContent,
+    fullContent: content,
+    toRemoveFrom,
+    clientDataStart,
+  };
+}
+
+export function printRecursiveFrom(
+  node, indentLevel, sourceFile
+) {
+  const indentation = '-'.repeat(indentLevel);
+  const syntaxKind = ts.SyntaxKind[node.kind];
+  const nodeText = node.getText(sourceFile);
+  console.log(`${indentation}${syntaxKind}: ${nodeText}`);
+
+  node.forEachChild(child =>
+    printRecursiveFrom(child, indentLevel + 1, sourceFile)
+  );
+}

package/src/build.mjs

@@ -0,0 +1,270 @@
+import path from 'path';
+import fs from 'fs-extra';
+import { build } from 'esbuild';
+import builtinModules from 'builtin-modules';
+import ts from 'typescript';
+import {
+  convertEntryPointsToSingleFile,
+  findDataAttributesAndFunctions,
+  removeClientScriptInTSXFile
+} from './build/typescript-builder.mjs';
+import { globSync } from 'glob';
+import postcss from 'postcss';
+// @ts-ignore
+import tailwindPostcss from '@tailwindcss/postcss';
+import { config } from './util/get-config.mjs';
+import basePath from '../base-path.mjs';
+
+// Extensions to look for in the bundle
+const extensions = ['.ts', '.tsx'];
+const packageJson = JSON.parse(fs.readFileSync(config.packageJsonPath, 'utf-8'));
+const allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
+const allPackagesIncludingNode = allPackages.concat(builtinModules);
+
+export async function buildApp(isDev = false) {
+  try {
+    const srcDirFiles = globSync(config.srcDir + '/**/*.{js,ts,tsx,jsx}');
+    const { componentData, dataFiles, } = await buildAppFiles(srcDirFiles, isDev);
+    const alpineDataFile = await buildAlpineDataFile(componentData, dataFiles);
+    await buildClientSideFiles([alpineDataFile], isDev);
+    fs.removeSync(config.distTempFolder);
+    await buildCSS();
+    await buildPublicFolderSymlinks();
+  } catch (err) {
+    console.error('Build failed');
+    console.error(err);
+  }
+}
+
+async function buildAppFiles(files, isDev) {
+  const componentData = [];
+  const dataFiles = [];
+  // Filter out client side files and files that aren't of the allowed extensions
+  const backendFiles = files
+    .filter((file) => extensions.find(ext => file.endsWith(ext)))
+    .filter((file) => !file.startsWith(config.publicDir));
+  fs.ensureDirSync(config.distDir);
+  // Build backend/SSR TSX modules
+  await build({
+    entryPoints: backendFiles,
+    format: 'esm',
+    platform: 'node',
+    outdir: config.distDir,
+    bundle: true,
+    sourcemap: isDev ? 'inline' : false,
+    external: allPackages,
+    jsx: 'transform',
+    minify: !isDev,
+    plugins: [
+      {
+        name: 'add-dot-js',
+        setup(build) {
+          build.onResolve({ filter: /.*/, }, args => {
+            const hasAtSign = args.path.startsWith('@');
+            const isPackage = hasAtSign ?
+              allPackagesIncludingNode.includes(args.path) :
+              allPackagesIncludingNode.includes(args.path.split('/').shift());
+            if (args.importer && !isPackage) {
+              // If we're doing an index import we need /index.js
+              const calculatedDir = path.join(args.resolveDir, args.path);
+              let existsAsFile = false;
+              for (const extension of extensions) {
+                const asFile = calculatedDir + extension;
+                const exists = fs.existsSync(asFile);
+                if (exists) existsAsFile = true;
+              }
+              let outputPath = args.path + (existsAsFile ? '' : '/index') + '.js';
+              outputPath = args.path.endsWith('.js') || args.path.endsWith('.mjs') ? args.path : outputPath;
+              return { path: outputPath, external: true, };
+            }
+          });
+        },
+      },
+      {
+        name: 'insert-html-banner-and-remove-client-scripts',
+        setup(build) {
+          build.onLoad({ filter: /.tsx/, }, args => {
+            const cleanedContent = removeClientScriptInTSXFile(args.path);
+            const htmlImportStart = 'import html from \'html\';\n';
+            const newContent = `${htmlImportStart}${cleanedContent.content}`;
+            componentData.push({
+              ...args,
+              contents: `${htmlImportStart}${cleanedContent.fullContent}`,
+              clientContent: cleanedContent.clientContent,
+            });
+            return {
+              contents: newContent,
+              loader: 'tsx',
+            };
+          });
+        },
+      },
+      {
+        name: 'get-data-files',
+        setup(build) {
+          build.onLoad({ filter: /\.data\.(js|mjs|ts)$/, }, args => {
+            const contents = fs.readFileSync(args.path, 'utf-8');
+            dataFiles.push({
+              ...args,
+              contents,
+            });
+            return {
+              contents,
+              loader: 'ts',
+            };
+          });
+        },
+      }
+    ],
+  });
+  await logSize(config.distDir, 'app');
+  return {
+    componentData,
+    dataFiles,
+  };
+}
+
+// Build client side files
+async function buildClientSideFiles(alpineDataFiles = [], isDev) {
+  // Write the temp file to use
+  const tempFilePath = path.join(config.distTempFolder, './app.ts');
+  fs.ensureFileSync(tempFilePath);
+  // Get all ts/js files in public folder but ignore the pages scripts
+  const pagesScriptsGlob = config.publicDir + '/scripts/pages/**/*.{js,ts}';
+  const clientFiles = globSync(
+    config.publicDir + '/**/*.{js,ts}',
+    {
+      ignore: pagesScriptsGlob,
+    }
+  );
+  // Filter out all public/pages files
+  convertEntryPointsToSingleFile(alpineDataFiles.concat(clientFiles), tempFilePath);
+  // Write dev server code to the temp file path
+  if (isDev) writeDevServerClientSideCode(tempFilePath);
+  // Write spa functionality to the temp file path
+  writeSpaClientSideCode(tempFilePath);
+  await build({
+    entryPoints: [tempFilePath],
+    bundle: true,
+    outdir: config.distPublicScriptsDir,
+    minify: !isDev,
+    sourcemap: isDev ? 'inline' : false,
+  });
+  // Build pages files scripts
+  const pagesFiles = globSync(pagesScriptsGlob);
+  await build({
+    entryPoints: pagesFiles || [],
+    bundle: true,
+    outdir: config.distPublicScriptsDir + '/pages',
+    minify: !isDev,
+    sourcemap: isDev ? 'inline' : false,
+  });
+  await logSize(config.distPublicDir, 'client');
+}
+
+function writeDevServerClientSideCode(tempFilePath) {
+  const devServerPath = path.join(basePath, './src/build/dev-server.mjs');
+  const content = fs.readFileSync(devServerPath, 'utf-8');
+  fs.appendFileSync(tempFilePath, `\n` + content);
+}
+
+function writeSpaClientSideCode(tempFilePath) {
+  const spaPath = path.join(basePath, './src/build/spa.mjs');
+  const content = fs.readFileSync(spaPath, 'utf-8');
+  fs.appendFileSync(tempFilePath, `\n` + content);
+}
+
+async function buildAlpineDataFile(componentData, dataFiles) {
+  const output = {
+    imports: [
+      'import Alpine from \'alpinejs\';'
+    ],
+    code: [],
+    end: [
+      'window.Alpine = Alpine;'
+    ],
+  };
+  const dataFunctionResults = {
+    foundDataAttributes: [],
+    foundFunctions: [],
+    foundImports: [],
+  };
+  const componentsAndDataFiles = componentData.concat(dataFiles);
+  for (const component of componentsAndDataFiles) {
+    // Single source file
+    const sourceFile = ts.createSourceFile(
+      component.path,
+      component.contents,
+      ts.ScriptTarget.Latest
+    );
+    const dataFunctionResult = findDataAttributesAndFunctions(sourceFile, sourceFile);
+    dataFunctionResults.foundDataAttributes.push(...dataFunctionResult.foundDataAttributes);
+    const foundFunctionsWithPath = dataFunctionResult.foundFunctions.map(item => {
+      return {
+        ...item,
+        path: component.path,
+        content: component.clientContent,
+      };
+    });
+    dataFunctionResults.foundFunctions.push(...foundFunctionsWithPath);
+  }
+  const validDataFunctions = dataFunctionResults.foundFunctions.filter(item => {
+    return dataFunctionResults.foundDataAttributes.includes(item.name) && item.content;
+  });
+  for (const dataFunction of validDataFunctions) {
+    if (!dataFunction.hasExport) continue;
+    output.code.push(dataFunction.content);
+    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');
+  fs.ensureFileSync(config.alpineDataPath);
+  fs.writeFileSync(config.alpineDataPath, result);
+  return config.alpineDataPath;
+}
+
+export async function buildCSS() {
+  const cssFiles = globSync(config.srcDir + '/**/*.css');
+  for (const file of cssFiles) {
+    const fileContents = fs.readFileSync(file, 'utf-8');
+    const result = await postcss([tailwindPostcss()]).process(fileContents, { from: file, });
+    // Write to dist folder
+    const newPath = file.replace(config.srcDir, config.distDir);
+    fs.ensureFileSync(newPath);
+    fs.writeFileSync(newPath, result.css);
+  }
+  logSize(config.distPublicDir, 'css');
+}
+
+// We need to symlink the non CSS or JS files from the src/public folder into the dist folder
+export async function buildPublicFolderSymlinks() {
+  const files = globSync(config.publicDir + '/**/*.*', {
+    ignore: '/**/*.{css,js,ts,tsx,jsx}',
+  });
+
+  // Create symlinks in dist directory
+  for (const file of files) {
+    try {
+      const newPath = file.replace(config.srcDir, config.distDir);
+      const splitNewPath = newPath.split('/');
+      splitNewPath.pop();
+      const newDir = splitNewPath.join('/');
+      fs.ensureDirSync(newDir);
+      fs.symlinkSync(file, newPath);
+    } catch { }
+  }
+}
+
+export async function logSize(pathName, type, validExtensions = ['.js', '.css']) {
+  const files = globSync(pathName + '/**/*' + (type === 'css' ? '.css' : ''));
+  const fileSizes = files.map((file) => {
+    if (!validExtensions.find(ext => file.endsWith(ext))) return false;
+    return {
+      file,
+      size: (fs.statSync(file).size) / (1024 * 1000),
+    };
+  }).filter(Boolean);
+  const totalSize = fileSizes.reduce((total, current) => {
+    return current.size + total;
+  }, 0);
+  console.info(`[${totalSize.toFixed(3)} MB] Built ${type}`);
+}

package/src/express.mjs

@@ -0,0 +1,117 @@
+import express from 'express';
+import { globSync } from 'glob';
+import { config } from './util/get-config.mjs';
+import { verifyUser } from './auth.mjs';
+import require from './util/require.mjs';
+import requestIP from 'request-ip';
+
+const doctypeHTML = '<!DOCTYPE html>';
+
+export async function createRouter() {
+  const methods = ['get', 'post', 'put', 'patch', 'delete'];
+  const router = express.Router();
+  const routes = globSync(config.pagesDir + '/**/*.{tsx,ts}');
+  const routeMap = routes.map(route => {
+    return {
+      route: route.split(config.pagesDir).pop().replace('.tsx', '').replace('.js', '').replace('.ts', '').replace('/index', '/'),
+      path: route.replace(config.srcDir, config.distDir).replace('.tsx', '.js').replace('.ts', '.js'),
+      originalRoute: route,
+    };
+  });
+  const routeResults = [];
+
+  for (const route of routeMap) {
+    const isJSX = route.originalRoute.endsWith('.tsx') || route.originalRoute.endsWith('.jsx');
+    // Import route
+    const routeItem = process.env.NODE_ENV === 'development' ? null : require(route.path).default;
+    // Configure result,methods for the route
+    const slugRoute = route.route.toLowerCase().replace(/[ ]/g, '');
+    const foundMethod = methods.find(method => slugRoute.endsWith(`.${method}`));
+    const isDynamicRoute = slugRoute.match(/\[(.*)\]/g);
+    let formattedRouteItem = slugRoute;
+    if (foundMethod) formattedRouteItem = formattedRouteItem.split('.').shift();
+    // Handle dynamic routing
+    if (isDynamicRoute) {
+      const result = [...formattedRouteItem.matchAll(/(\[)(.*?)(\])/g)];
+      for (const match of result) {
+        formattedRouteItem = formattedRouteItem.replace(match[0], ':' + match[2]);
+      }
+    }
+    // Push to the route results array
+    routeResults.push({
+      formattedRouteItem,
+      foundMethod,
+      route,
+    });
+    router[foundMethod || 'get'](formattedRouteItem, async (req, res) => {
+      try {
+        // Check if it's a string response from the routeItem or is a different response
+        if (routeItem) {
+          if (isJSX) {
+            res.send(doctypeHTML + (await routeItem(req, res)));
+          } else {
+            await routeItem(req, res);
+          }
+          return;
+        }
+        const defaultRouteImport = require(route.path).default;
+        // Require every time only if in development mode
+        if (isJSX) {
+          res.send(doctypeHTML + (await defaultRouteImport(req, res)));
+        } else {
+          await defaultRouteImport(req, res);
+        }
+      } catch (err) {
+        console.error(err);
+        res.status(err?.status || 500).send(err?.message || 'Error');
+      }
+    });
+  }
+  return {
+    router,
+    routeResults,
+  };
+}
+
+export async function verifyUserMiddleware(req, _res, next) {
+  // @ts-ignore
+  const { usertoken, } = req.cookies;
+  if (!usertoken) {
+    req.user = null;
+  }
+  try {
+    const { user, } = await verifyUser(usertoken);
+    req.user = user;
+  } catch (err) {
+    req.user = null;
+  }
+  next();
+}
+
+export async function createXPineRouter(app, beforeErrorRoute) {
+  app.use(express.static(config.distPublicDir));
+  app.use(verifyUserMiddleware);
+  app.use(requestIP.mw());
+
+  const { router, routeResults, } = await createRouter();
+  app.use(function replaceableRouter(req, res, next) {
+    router(req, res, next);
+  });
+
+  const found404 = routeResults?.find(item => item?.formattedRouteItem === '/404');
+  const import404 = found404 ? require(found404.route.path).default : null;
+
+  if (beforeErrorRoute) beforeErrorRoute(app);
+
+  // error handler
+  app.use(async function (req, res) {
+    // render the error page
+    res.status(404);
+
+    if (import404) {
+      res.send(doctypeHTML + (await import404(req, res)));
+    } else {
+      res.send('Error');
+    }
+  });
+}

package/src/runDevServer.mjs

@@ -0,0 +1,71 @@
+import expressWs from 'express-ws';
+import http from 'http';
+import express from 'express';
+import EventEmitter from 'events';
+import chokidar from 'chokidar';
+import { buildApp } from './build.mjs';
+import { globSync } from 'glob';
+import path from 'path';
+import { config } from './util/get-config.mjs';
+import require from './util/require.mjs';
+
+export async function runDevServer() {
+  const startServer = require(config.serverAppPath);
+
+  // Initial server set up
+  await buildApp(true);
+  let appServer = await startServer.default();
+
+  // Watch files
+  const watcher = chokidar.watch(config.srcDir, {
+    ignoreInitial: true,
+    // Ignore map and prisma files
+    ignored: (pathName) => pathName.endsWith('.map') || pathName.startsWith(path.join(config.serverDir, './prisma')),
+  });
+  watcher.on('all', async (event, path) => {
+    const shouldReloadServer = (path.startsWith(config.serverDir) && !path.startsWith(config.runDir)) ||
+      ['add', 'unlink'].includes(event) && path.startsWith(config.pagesDir);
+    if (shouldReloadServer) {
+      // We modified files in the server, restart the server
+      appServer.server.close();
+      await buildApp(true);
+      // Clear requires for startServer, then restart the server
+      delete require.cache[config.serverAppPath];
+      const startServer = require(config.serverAppPath);
+      appServer = await startServer.default();
+      return;
+    }
+    // Clear all import cache for components
+    const files = globSync(config.distDir + '/**/*.{tsx,ts,js,jsx}', {
+      ignore: [config.serverDistDir + '/**/*.*'],
+    });
+    for (const file of files) {
+      delete require.cache[file];
+    }
+    await buildApp(true);
+    refreshEmitter.emit('refresh');
+  });
+
+  // Create web socket sever
+  const wsApp = express();
+  const wsServer = http.createServer(wsApp);
+  expressWs(wsApp, wsServer);
+  class RefreshEmitter extends EventEmitter { };
+  const refreshEmitter = new RefreshEmitter();
+
+  // @ts-ignore
+  wsApp.ws('/dev-server', function (ws) {
+    refreshEmitter.removeAllListeners();
+    refreshEmitter.on('refresh', () => {
+      ws.send('refresh:client');
+    });
+  });
+
+  const wsPort = 3001;
+  wsServer.listen(wsPort);
+  wsServer.on('listening', () => {
+    console.info(`Dev server listening on port ${wsPort}`);
+  });
+}
+
+

package/src/scripts/build.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { buildApp } from "../build.mjs";
+
+buildApp();

package/src/scripts/run-dev.mjs

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { runDevServer } from "../runDevServer.mjs";
+
+runDevServer();

package/src/util/env.mjs

@@ -0,0 +1,7 @@
+import dotenv from 'dotenv';
+import path from 'path';
+import { config } from './get-config.mjs';
+
+export function setupEnv() {
+  dotenv.config({ path: path.join(config.rootDir, `./.env.${process.env.STAGE || 'dev'}`),});
+}

package/src/util/get-config.mjs

@@ -0,0 +1,61 @@
+import path from 'path';
+import require from './require.mjs';
+
+const rootDir = process.cwd();
+
+export function fromRoot(pathName) {
+  if (!pathName) return rootDir;
+  return path.join(rootDir, pathName);
+}
+
+const userConfig = require(path.join(process.cwd(), './xpine.config.mjs')).default;
+
+const configDefaults = {
+  rootDir: fromRoot(),
+  srcDir: fromRoot('./src'),
+  distDir: fromRoot('./dist'),
+  packageJsonPath: fromRoot('package.json'),
+  // We need to use getters here in the event someone wants to change folders, such as the dist folder
+  get distPublicDir() {
+    return path.join(this.distDir, './public');
+  },
+  get distPublicScriptsDir() {
+    return path.join(this.distPublicDir, './scripts');
+  },
+  get distTempFolder() {
+    return path.join(this.distDir, './temp');
+  },
+  get clientJSBundlePath() {
+    return path.join(this.distPublicScriptsDir, './app.js');
+  },
+  get alpineDataPath() {
+    return path.join(this.distTempFolder, './alpine-data.ts');
+  },
+  get serverDistDir() {
+    return path.join(this.distDir, './server');
+  },
+  // Important dirs/paths
+  get pagesDir() {
+    return path.join(this.srcDir, './pages');
+  },
+  get publicDir() {
+    return path.join(this.srcDir, './public');
+  },
+  get serverDir() {
+    return path.join(this.srcDir, './server');
+  },
+  get runDir() {
+    return path.join(this.serverDir, './run');
+  },
+  get serverAppPath() {
+    return path.join(this.serverDir, './app.ts');
+  },
+  get globalCSSFile() {
+    return path.join(this.publicDir, './styles/global.css');
+  },
+};
+
+export const config = {
+  ...configDefaults,
+  ...userConfig,
+}

package/src/util/require.mjs

@@ -0,0 +1,5 @@
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+
+export default require;

package/tsconfig.json

@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxFragmentFactory": "html.fragment",
+    "jsxFactory": "html.createElement",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": false,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "target": "esnext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsxImportSource": "html",
+    "incremental": true,
+    "allowImportingTsExtensions": true,
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "postcss.config.mjs",
+    "tailwind.config.js",
+    "eslint.config.mjs",
+    "index.mjs",
+    "src/runDevServer.mjs",
+    "src/express.mjs",
+    "src/build.mjs",
+    "src/auth.mjs",
+    "src/util/require.mjs",
+    "src/util/get-config.mjs",
+    "src/util/env.mjs",
+    "src/scripts/run-dev.mjs",
+    "src/scripts/build.mjs",
+    "src/build/typescript-builder.mjs"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist-frontend",
+    "**/*.js"
+  ],
+}