xpine 0.0.2 → 0.0.3

package/.d.ts

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

package/TODO

@@ -0,0 +1,2 @@
+- npx create-xpine-app
+- xpine-dev

package/index.ts

@@ -0,0 +1,7 @@
+export * from './src/runDevServer.js';
+export * from './src/express.js';
+export * from './src/util/env.js';
+export * from './src/util/get-config';
+export * from './src/scripts/build.js';
+export * from './src/auth.ts';
+export * from './src/util/html.js';

package/jsx-runtime.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "xpine",
-  "version": "0.0.2",
-  "main": "index.mjs",
+  "version": "0.0.3",
+  "main": "dist/index.js",
   "dependencies": {
     "@tailwindcss/postcss": "^4.0.8",
     "builtin-modules": "^4.0.0",
@@ -19,8 +19,16 @@
     "tsx": "^4.19.3",
     "typescript": "^5.7.3"
   },
+  "scripts": {
+    "build": "tsx ./src/scripts/build-module.ts"
+  },
   "bin": {
-    "xpine-build": "src/scripts/build.mjs"
+    "xpine-build": "dist/src/scripts/xpine-build.js",
+    "xpine-dev": "dist/src/scripts/xpine-dev.js"
   },
-  "type": "module"
+  "type": "module",
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "@types/node": "^22.13.5"
+  }
 }

package/src/{auth.mjs → auth.ts}

@@ -1,7 +1,8 @@
 import jsonwebtoken from 'jsonwebtoken';
+import { ServerRequest } from '../types';
 const { verify, sign, } = jsonwebtoken;
 
-export async function signUser(email, username) {
+export async function signUser(email: string, username: string) {
   return new Promise((resolve, reject) => {
     sign(
       {
@@ -20,7 +21,7 @@ export async function signUser(email, username) {
   });
 }
 
-export async function verifyUser(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) => {
@@ -30,10 +31,10 @@ export async function verifyUser(token) {
   });
 }
 
-export function getTokenFromRequest(req) {
+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.mjs → typescript-builder.ts}

@@ -2,9 +2,13 @@ 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, sourceFile, importDeclarations = []) {
+export function getImportDeclarationNodes(node: ts.Node, sourceFile: ts.SourceFile, importDeclarations: ImportDeclaration[] = []) {
   if (node.kind === ts.SyntaxKind.ImportDeclaration) {
     let importPath = null;
     node.forEachChild(child => {
@@ -23,7 +27,7 @@ export function getImportDeclarationNodes(node, sourceFile, importDeclarations =
   return importDeclarations;
 }
 
-export function stripImportsNodesFromFile(importsToStrip, content, 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) {
@@ -32,11 +36,17 @@ export function stripImportsNodesFromFile(importsToStrip, content, importDeclara
   return outputContent;
 }
 
+type FoundAlpineFunction = {
+  name: string;
+  isDefaultExport: boolean;
+  hasExport: boolean;
+}
+
 export function findDataAttributesAndFunctions(
-  node,
-  sourceFile,
-  foundDataAttributes = [],
-  foundFunctions = []
+  node: ts.Node,
+  sourceFile: ts.SourceFile,
+  foundDataAttributes: string[] = [],
+  foundFunctions: FoundAlpineFunction[] = []
 ) {
   if (node.kind === ts.SyntaxKind.JsxAttribute) {
     const attribute = getAttributeValuePair(node, sourceFile);
@@ -64,7 +74,7 @@ export function findDataAttributesAndFunctions(
   };
 }
 
-export function getAttributeValuePair(node, sourceFile) {
+export function getAttributeValuePair(node: ts.Node, sourceFile: ts.SourceFile): string[] {
   const result = [];
   node.forEachChild(child => {
     result.push(child.getText(sourceFile));
@@ -72,7 +82,7 @@ export function getAttributeValuePair(node, sourceFile) {
   return result;
 }
 
-export function getFunctionDeclarationValue(node, sourceFile) {
+export function getFunctionDeclarationValue(node: ts.Node, sourceFile: ts.SourceFile): FoundAlpineFunction {
   const result = {
     name: null,
     isDefaultExport: false,
@@ -93,7 +103,7 @@ export function getFunctionDeclarationValue(node, sourceFile) {
 }
 
 // Convert entry point files into one big bundle file
-export function convertEntryPointsToSingleFile(entryPoints, tempWritePath) {
+export function convertEntryPointsToSingleFile(entryPoints: string[], tempWritePath: string) {
   fs.writeFileSync(
     tempWritePath,
     entryPoints
@@ -102,15 +112,15 @@ export function convertEntryPointsToSingleFile(entryPoints, tempWritePath) {
   );
 }
 
-export function removeClientScriptInTSXFile(pathName) {
+export function removeClientScriptInTSXFile(pathName: string) {
   const content = fs.readFileSync(pathName, 'utf-8');
   const source = ts.createSourceFile(
     pathName,
     content,
     ts.ScriptTarget.Latest
   );
-  let toRemoveFrom;
-  let clientDataStart;
+  let toRemoveFrom: number;
+  let clientDataStart: number;
   const clientImportsToHoist = [];
   const clientImportsToReplace = [];
   source.forEachChild((child) => {
@@ -157,7 +167,7 @@ export function removeClientScriptInTSXFile(pathName) {
 }
 
 export function printRecursiveFrom(
-  node, indentLevel, sourceFile
+  node: ts.Node, indentLevel: number, sourceFile: ts.SourceFile
 ) {
   const indentation = '-'.repeat(indentLevel);
   const syntaxKind = ts.SyntaxKind[node.kind];

package/src/{express.mjs → express.ts}

@@ -1,9 +1,9 @@
-import express from 'express';
+import express, { NextFunction, Express, Request, Response } 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 { config } from './util/get-config';
+import { verifyUser } from './auth';
 import requestIP from 'request-ip';
+import { ServerRequest } from '../types';
 
 const doctypeHTML = '<!DOCTYPE html>';
 
@@ -23,7 +23,7 @@ export async function createRouter() {
   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;
+    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}`));
@@ -43,7 +43,7 @@ export async function createRouter() {
       foundMethod,
       route,
     });
-    router[foundMethod || 'get'](formattedRouteItem, async (req, res) => {
+    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) {
@@ -54,7 +54,7 @@ export async function createRouter() {
           }
           return;
         }
-        const defaultRouteImport = require(route.path).default;
+        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)));
@@ -73,7 +73,7 @@ export async function createRouter() {
   };
 }
 
-export async function verifyUserMiddleware(req, _res, next) {
+async function verifyUserMiddleware(req: ServerRequest, _res: Response, next: NextFunction) {
   // @ts-ignore
   const { usertoken, } = req.cookies;
   if (!usertoken) {
@@ -88,28 +88,31 @@ export async function verifyUserMiddleware(req, _res, next) {
   next();
 }
 
-export async function createXPineRouter(app, beforeErrorRoute) {
+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, res, next) {
+  app.use(function replaceableRouter(req: Request, res: Response, next: NextFunction) {
     router(req, res, next);
   });
 
   const found404 = routeResults?.find(item => item?.formattedRouteItem === '/404');
-  const import404 = found404 ? require(found404.route.path).default : null;
+  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, res) {
+  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.mjs → runDevServer.ts}

@@ -3,14 +3,16 @@ 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 { buildApp } from './scripts/build.js';
 import path from 'path';
-import { config } from './util/get-config.mjs';
-import require from './util/require.mjs';
+import { config } from './util/get-config';
+import { setupEnv } from './util/env.js';
+
+setupEnv();
 
 export async function runDevServer() {
-  const startServer = require(config.serverAppPath);
+  process.env.NODE_ENV = 'development';
+  const startServer = await import(config.serverDistAppPath + `?cache=${Date.now()}`);
 
   // Initial server set up
   await buildApp(true);
@@ -29,19 +31,10 @@ export async function runDevServer() {
       // 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);
+      const startServer = await import(config.serverDistAppPath + `?cache=${Date.now()}`);
       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');
   });

package/src/scripts/build-module.ts

@@ -0,0 +1,36 @@
+import fs from 'fs-extra';
+import { build } from 'esbuild';
+import { config } from '../util/get-config.js';
+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();

package/src/{build.mjs → scripts/build.ts}

@@ -7,13 +7,12 @@ import {
   convertEntryPointsToSingleFile,
   findDataAttributesAndFunctions,
   removeClientScriptInTSXFile
-} from './build/typescript-builder.mjs';
+} from '../build/typescript-builder.js';
 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';
+import { config } from '../util/get-config';
 
 // Extensions to look for in the bundle
 const extensions = ['.ts', '.tsx'];
@@ -36,7 +35,7 @@ export async function buildApp(isDev = false) {
   }
 }
 
-async function buildAppFiles(files, isDev) {
+async function buildAppFiles(files: string[], isDev?: boolean) {
   const componentData = [];
   const dataFiles = [];
   // Filter out client side files and files that aren't of the allowed extensions
@@ -125,7 +124,7 @@ async function buildAppFiles(files, isDev) {
 }
 
 // Build client side files
-async function buildClientSideFiles(alpineDataFiles = [], isDev) {
+async function buildClientSideFiles(alpineDataFiles: string[] = [], isDev?: boolean) {
   // Write the temp file to use
   const tempFilePath = path.join(config.distTempFolder, './app.ts');
   fs.ensureFileSync(tempFilePath);
@@ -162,19 +161,19 @@ async function buildClientSideFiles(alpineDataFiles = [], isDev) {
   await logSize(config.distPublicDir, 'client');
 }
 
-function writeDevServerClientSideCode(tempFilePath) {
-  const devServerPath = path.join(basePath, './src/build/dev-server.mjs');
+function writeDevServerClientSideCode(tempFilePath: string) {
+  const devServerPath = path.join(import.meta.dirname, '../static/dev-server.js');
   const content = fs.readFileSync(devServerPath, 'utf-8');
   fs.appendFileSync(tempFilePath, `\n` + content);
 }
 
-function writeSpaClientSideCode(tempFilePath) {
-  const spaPath = path.join(basePath, './src/build/spa.mjs');
+function writeSpaClientSideCode(tempFilePath: string) {
+  const spaPath = path.join(import.meta.dirname, '../static/spa.js');
   const content = fs.readFileSync(spaPath, 'utf-8');
   fs.appendFileSync(tempFilePath, `\n` + content);
 }
 
-async function buildAlpineDataFile(componentData, dataFiles) {
+async function buildAlpineDataFile(componentData: any[], dataFiles: any[]) {
   const output = {
     imports: [
       'import Alpine from \'alpinejs\';'
@@ -254,7 +253,12 @@ export async function buildPublicFolderSymlinks() {
   }
 }
 
-export async function logSize(pathName, type, validExtensions = ['.js', '.css']) {
+type FileItem = {
+  file: string;
+  size: number;
+}
+
+export async function logSize(pathName: string, type: 'app' | 'client' | 'css', validExtensions = ['.js', '.css']) {
   const files = globSync(pathName + '/**/*' + (type === 'css' ? '.css' : ''));
   const fileSizes = files.map((file) => {
     if (!validExtensions.find(ext => file.endsWith(ext))) return false;
@@ -263,7 +267,7 @@ export async function logSize(pathName, type, validExtensions = ['.js', '.css'])
       size: (fs.statSync(file).size) / (1024 * 1000),
     };
   }).filter(Boolean);
-  const totalSize = fileSizes.reduce((total, current) => {
+  const totalSize = fileSizes.reduce((total, current: FileItem) => {
     return current.size + total;
   }, 0);
   console.info(`[${totalSize.toFixed(3)} MB] Built ${type}`);

package/src/scripts/xpine-build.ts

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

package/src/scripts/xpine-dev.ts

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

package/src/util/{env.mjs → env.ts}

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

package/src/util/{get-config.mjs → get-config.ts}

@@ -1,9 +1,10 @@
 import path from 'path';
-import require from './require.mjs';
+import require from './require.js';
+import { XPineConfig } from '../../types';
 
 const rootDir = process.cwd();
 
-export function fromRoot(pathName) {
+export function fromRoot(pathName?: string) {
   if (!pathName) return rootDir;
   return path.join(rootDir, pathName);
 }
@@ -34,6 +35,9 @@ const configDefaults = {
   get serverDistDir() {
     return path.join(this.distDir, './server');
   },
+  get serverDistAppPath() {
+    return path.join(this.serverDistDir, './app.js');
+  },
   // Important dirs/paths
   get pagesDir() {
     return path.join(this.srcDir, './pages');
@@ -55,7 +59,7 @@ const configDefaults = {
   },
 };
 
-export const config = {
+export const config: XPineConfig = {
   ...configDefaults,
   ...userConfig,
-}
+};

package/tsconfig.json

@@ -19,9 +19,9 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsxImportSource": "html",
+    "jsxImportSource": "xpine",
     "incremental": true,
-    "allowImportingTsExtensions": true,
+    "allowImportingTsExtensions": true
   },
   "include": [
     "**/*.ts",
@@ -29,17 +29,17 @@
     "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"
+    "index.ts",
+    "src/runDevServer.ts",
+    "src/express.ts",
+    "src/scripts/build.ts",
+    "src/auth.ts",
+    "src/util/require.ts",
+    "src/util/get-config.ts",
+    "src/util/env.ts",
+    "src/scripts/xpine-dev.ts",
+    "src/scripts/xpine-build.ts",
+    "src/build/typescript-builder.ts"
   ],
   "exclude": [
     "node_modules",

package/types.ts

@@ -0,0 +1,14 @@
+import { Request } from 'express';
+
+export type XPineConfig = {
+  [key: string]: string;
+}
+
+export type TokenUser = {
+  email?: string;
+  username?: string;
+}
+
+export type ServerRequest = Request & {
+  user?: TokenUser;
+}

package/xpine.config.mjs

@@ -0,0 +1 @@
+export default {};

package/base-path.mjs

@@ -1,5 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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';
-export * from './src/util/html.mjs';

package/src/scripts/build.mjs

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

package/src/scripts/run-dev.mjs

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