xpine 0.0.4 → 0.0.6

package/{src/static/spa.mjs → dist/src/static/spa.js}

@@ -1,114 +1,102 @@
-// Enables SPA like behavior for links
-
+// src/static/spa.mjs
 async function replaceDocumentContentsWithLinkResponse() {
-  const links = [...document.querySelectorAll('[data-spa]')];
+  const links = [...document.querySelectorAll("[data-spa]")];
   for (const link of links) {
-    link.addEventListener('click', updatePageOnLinkClick);
+    link.addEventListener("click", updatePageOnLinkClick);
   }
-
 }
-
 async function updatePageOnLinkClick(e) {
-  const targetHref = e?.target?.getAttribute('href');
+  const targetHref = e?.target?.getAttribute("href");
   if (!targetHref) return;
-  if (isExternalURL(targetHref) && !e?.target?.getAttribute('data-spa-crossorigin')) 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,
+        type: "link-click",
+        targetHref
       },
-      '',
+      "",
       targetHref
     );
-    const event = new CustomEvent('spa:updatePageURL', {
+    const event = new CustomEvent("spa:updatePageURL", {
       detail: {
-        href: targetHref,
-      },
+        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');
+    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')}"]`);
+      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', {
+    const event = new CustomEvent("spa:updatePageContent", {
       detail: {
-        href,
-      },
+        href
+      }
     });
     window.dispatchEvent(event);
   } catch (err) {
     console.error(err);
-    console.error('Error getting link', href);
+    console.error("Error getting link", href);
   }
 }
-
 function diffHead(dom) {
   const domHeadChildren = [...dom.head.children];
   const currentHeadChildren = [...document.head.children];
   const result = {
     childrenToAdd: [],
-    childrenToRemove: [],
+    childrenToRemove: []
   };
   for (const domChild of domHeadChildren) {
-    const foundInCurrentChildren = currentHeadChildren.find(child => child.outerHTML === domChild.outerHTML);
+    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);
+    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');
+    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 scripts = [...dom.body.querySelectorAll("script")];
   const newElements = [];
   for (const script of scripts) {
-    const element = document.createElement('script');
+    const element = document.createElement("script");
     portAttributesToElement(script, element);
     element.innerHTML = script.innerHTML;
     dom.body.removeChild(script);
@@ -116,60 +104,48 @@ function removeBodyScripts(dom) {
   }
   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'));
+  const persistentNodesFromDom = [...dom.querySelectorAll("[data-persistent]")].map((el) => el.getAttribute("data-persistent"));
+  const persistentNodesFromBody = [...document.body.querySelectorAll("[data-persistent]")];
+  const validPersistentNodes = persistentNodesFromBody.filter((el) => {
+    return persistentNodesFromDom.includes(el.getAttribute("data-persistent"));
   });
-  // Clone
-  return validPersistentNodes.map(el => el.cloneNode(true));
+  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;
+  if (typeof url !== "string") return false;
   try {
     new URL(url);
     return false;
   } catch (err) {
-    if (url?.startsWith('//')) return false;
+    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
+    return false;
   }
 }
-
-window.addEventListener('DOMContentLoaded', replaceDocumentContentsWithLinkResponse);
-window.addEventListener('popstate', handleBackButton);
-
+window.addEventListener("DOMContentLoaded", replaceDocumentContentsWithLinkResponse);
+window.addEventListener("popstate", handleBackButton);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xpine",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "dist/index.js",
   "dependencies": {
     "@tailwindcss/postcss": "^4.0.8",

package/src/auth.ts

@@ -1,40 +0,0 @@
-import jsonwebtoken from 'jsonwebtoken';
-import { ServerRequest } from '../types';
-const { verify, sign, } = jsonwebtoken;
-
-export async function signUser(email: string, username: string) {
-  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: string): Promise<any> {
-  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: ServerRequest) {
-  // @ts-ignore
-  const { authorization, } = req.headers;
-  if (!authorization) return null;
-  const token = authorization.split(' ').pop() || '';
-  return token || null;
-}

package/src/build/typescript-builder.ts

@@ -1,180 +0,0 @@
-import ts from 'typescript';
-import fs from 'fs-extra';
-import path from 'path';
-
-type ImportDeclaration = {
-  node: ts.Node;
-  importPath: string;
-}
-
-// node arg should initially be the source node
-export function getImportDeclarationNodes(node: ts.Node, sourceFile: ts.SourceFile, importDeclarations: ImportDeclaration[] = []) {
-  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: string[], content: string, importDeclarations: ImportDeclaration[]) {
-  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;
-}
-
-type FoundAlpineFunction = {
-  name: string;
-  isDefaultExport: boolean;
-  hasExport: boolean;
-}
-
-export function findDataAttributesAndFunctions(
-  node: ts.Node,
-  sourceFile: ts.SourceFile,
-  foundDataAttributes: string[] = [],
-  foundFunctions: FoundAlpineFunction[] = []
-) {
-  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: ts.Node, sourceFile: ts.SourceFile): string[] {
-  const result = [];
-  node.forEachChild(child => {
-    result.push(child.getText(sourceFile));
-  });
-  return result;
-}
-
-export function getFunctionDeclarationValue(node: ts.Node, sourceFile: ts.SourceFile): FoundAlpineFunction {
-  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: string[], tempWritePath: string) {
-  fs.writeFileSync(
-    tempWritePath,
-    entryPoints
-      .map(entry => `import "${entry}"`)
-      .join(';\n')
-  );
-}
-
-export function removeClientScriptInTSXFile(pathName: string) {
-  const content = fs.readFileSync(pathName, 'utf-8');
-  const source = ts.createSourceFile(
-    pathName,
-    content,
-    ts.ScriptTarget.Latest
-  );
-  let toRemoveFrom: number;
-  let clientDataStart: number;
-  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: ts.Node, indentLevel: number, sourceFile: ts.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/express.ts

@@ -1,120 +0,0 @@
-import express, { NextFunction, Express, Request, Response } from 'express';
-import { globSync } from 'glob';
-import { config } from './util/get-config';
-import { verifyUser } from './auth';
-import requestIP from 'request-ip';
-import { ServerRequest } from '../types';
-
-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 : (await import(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: Request, res: Response) => {
-      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 = (await import(route.path + `?cache=${Date.now()}`)).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,
-  };
-}
-
-async function verifyUserMiddleware(req: ServerRequest, _res: Response, next: NextFunction) {
-  // @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: any, beforeErrorRoute?: (app: Express) => void) {
-  app.use(express.static(config.distPublicDir));
-  app.use(verifyUserMiddleware);
-  app.use(requestIP.mw());
-
-  const { router, routeResults, } = await createRouter();
-  app.use(function replaceableRouter(req: Request, res: Response, next: NextFunction) {
-    router(req, res, next);
-  });
-
-  const found404 = routeResults?.find(item => item?.formattedRouteItem === '/404');
-  const import404 = process.env.NODE_ENV === 'development' ? null : (await import(found404.route.path)).default;
-
-  if (beforeErrorRoute) beforeErrorRoute(app);
-
-  // error handler
-  app.use(async function (req: Request, res: Response) {
-    // render the error page
-    res.status(404);
-
-    if (import404) {
-      res.send(doctypeHTML + (await import404(req, res)));
-    } else if (found404 && process.env.NODE_ENV === 'development') {
-      const import404Item = (await import(found404.route.path + `?cache=${Date.now()}`)).default
-      res.send(doctypeHTML + (await import404Item(req, res)));
-    } else {
-      res.send('Error');
-    }
-  });
-}

package/src/runDevServer.ts

@@ -1,64 +0,0 @@
-import expressWs from 'express-ws';
-import http from 'http';
-import express from 'express';
-import EventEmitter from 'events';
-import chokidar from 'chokidar';
-import { buildApp } from './scripts/build';
-import path from 'path';
-import { config } from './util/get-config';
-import { setupEnv } from './util/env';
-
-setupEnv();
-
-export async function runDevServer() {
-  process.env.NODE_ENV = 'development';
-  const startServer = await import(config.serverDistAppPath + `?cache=${Date.now()}`);
-
-  // 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);
-      const startServer = await import(config.serverDistAppPath + `?cache=${Date.now()}`);
-      appServer = await startServer.default();
-      return;
-    }
-    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-module.ts

@@ -1,36 +0,0 @@
-import fs from 'fs-extra';
-import { build } from 'esbuild';
-import { config } from '../util/get-config';
-import path from 'path';
-
-// Extensions to look for in the bundle
-const packageJson = JSON.parse(fs.readFileSync(config.packageJsonPath, 'utf-8'));
-const allPackages = Object.keys(packageJson.devDependencies).concat(Object.keys(packageJson.dependencies));
-const dirname = import.meta.dirname;
-
-export async function buildXPine() {
-  await build({
-    entryPoints: [
-      // The contents of XPine itself
-      path.join(dirname, '../../index.ts'),
-      // The script for xpine-build
-      path.join(dirname, './xpine-build.ts'),
-      // The script for xpine-dev
-      path.join(dirname, './xpine-dev.ts'),
-      // Static files
-      path.join(dirname, '../static/dev-server.mjs'),
-      path.join(dirname, '../static/spa.mjs'),
-    ],
-    format: 'esm',
-    platform: 'node',
-    outdir: path.join(dirname, '../../dist'),
-    bundle: true,
-    sourcemap: 'inline',
-    external: allPackages,
-    jsx: 'transform',
-    minify: false,
-    plugins: [],
-  });
-}
-
-buildXPine();