@hyperspan/framework 0.0.1 → 0.0.2

package/build.ts

@@ -0,0 +1,29 @@
+import dts from 'bun-plugin-dts';
+
+await Promise.all([
+  // Build JS
+  Bun.build({
+    entrypoints: ['./src/index.ts'],
+    outdir: './dist',
+    target: 'browser',
+  }),
+  Bun.build({
+    entrypoints: ['./src/server.ts'],
+    outdir: './dist',
+    target: 'node',
+  }),
+
+  // Build type files for TypeScript
+  Bun.build({
+    entrypoints: ['./src/index.ts'],
+    outdir: './dist',
+    target: 'browser',
+    plugins: [dts()],
+  }),
+  Bun.build({
+    entrypoints: ['./src/server.ts'],
+    outdir: './dist',
+    target: 'node',
+    plugins: [dts()],
+  }),
+]);

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+// Generated by dts-bundle-generator v9.5.1
+
+/**
+ * Template object - used so it will be possible to (eventually) pass down context
+ */
+export declare class HSTemplate {
+	__hsTemplate: boolean;
+	content: any[];
+	constructor(content: any[]);
+}
+/**
+ * HTML template
+ */
+export declare function html(strings: TemplateStringsArray, ...values: any[]): HSTemplate;
+export declare namespace html {
+	var raw: (value: string) => HSTemplate;
+}
+/**
+ * Render HSTemplate to async generator that streams output to a string
+ */
+export declare function renderToStream(template: HSTemplate | string): AsyncGenerator<string>;
+/**
+ * Render HSTemplate to string (awaits/buffers entire response)
+ */
+export declare function renderToString(template: HSTemplate | string): Promise<string>;
+/**
+ * Strip extra spacing between HTML tags (used for tests)
+ */
+export declare function compressHTMLString(str: string): string;
+/**
+ * LOL JavaScript...
+ */
+export declare function _typeOf(obj: any): string;
+/**
+ * Client component
+ */
+export type THSWCState = Record<string, any>;
+export type THSWCSetStateArg = THSWCState | ((state: THSWCState) => THSWCState);
+export type THSWC = {
+	this: THSWC;
+	state: THSWCState | undefined;
+	id: string;
+	setState: (fn: THSWCSetStateArg) => THSWCState;
+	mergeState: (newState: THSWCState) => THSWCState;
+	render: () => any;
+};
+export type THSWCUser = Pick<THSWC, "render"> & Record<string, any>;
+export declare function clientComponent(id: string, wc: THSWCUser): (attrs?: Record<string, string>, state?: Record<string, any>) => HSTemplate;
+
+export {};

package/dist/server.d.ts

@@ -0,0 +1,109 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import Headers$1 from '@mjackson/headers';
+
+declare class HSTemplate {
+	__hsTemplate: boolean;
+	content: any[];
+	constructor(content: any[]);
+}
+export type THTTPMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+declare class HSRequestContext {
+	req: Request;
+	locals: Record<string, any>;
+	headers: Headers$1;
+	route: {
+		params: Record<string, string>;
+		query: URLSearchParams;
+	};
+	constructor(req: Request, params?: Record<string, string>);
+	/**
+	 * Response helper
+	 * Merges a Response object while preserving all headers added in context/middleware
+	 */
+	resMerge(res: Response): Response;
+	/**
+	 * HTML response helper
+	 * Preserves all headers added in context/middleware
+	 */
+	html(content: string, options?: ResponseInit): Response;
+	/**
+	 * JSON response helper
+	 * Preserves all headers added in context/middleware
+	 */
+	json(content: any, options?: ResponseInit): Response;
+	notFound(msg?: string): Response;
+}
+export type THSRouteHandler = (context: HSRequestContext) => (Response | null | void) | Promise<Response | null | void>;
+declare class HSApp {
+	private _router;
+	private _mw;
+	_defaultRoute: THSRouteHandler;
+	constructor();
+	get(path: string, handler: THSRouteHandler): this;
+	post(path: string, handler: THSRouteHandler): this;
+	put(path: string, handler: THSRouteHandler): this;
+	delete(path: string, handler: THSRouteHandler): this;
+	all(path: string, handler: THSRouteHandler): this;
+	addRoute(methods: THTTPMethod[], path: string, handler: THSRouteHandler): this;
+	defaultRoute(handler: THSRouteHandler): void;
+	private _route;
+	run(req: Request): Promise<Response>;
+}
+export declare const IS_PROD: boolean;
+/**
+ * Run route from file
+ */
+export declare function runFileRoute(routeFile: string, context: HSRequestContext): Promise<any>;
+export type THSServerConfig = {
+	appDir: string;
+	staticFileRoot: string;
+	beforeRoutesAdded?: (app: HSApp) => void;
+	afterRoutesAdded?: (app: HSApp) => void;
+};
+export type THSRouteMap = {
+	file: string;
+	route: string;
+	params: string[];
+};
+export declare function buildRoutes(config: THSServerConfig): Promise<THSRouteMap[]>;
+/**
+ * Create and start Bun HTTP server
+ */
+export declare function createServer(config: THSServerConfig): Promise<HSApp>;
+/**
+ * Build client JS for end users (minimal JS for Hyperspan to work)
+ */
+export declare let clientJSFile: string;
+export declare function buildClientJS(): Promise<string>;
+/**
+ * Find client CSS file built for end users
+ * @TODO: Build this in code here vs. relying on tailwindcss CLI tool from package scripts
+ */
+export declare let clientCSSFile: string;
+export declare function buildClientCSS(): Promise<string | undefined>;
+/**
+ * Streaming HTML Response
+ */
+export declare class StreamResponse {
+	constructor(iterator: AsyncIterator<unknown>, options?: {});
+}
+/**
+ * Does what it says on the tin...
+ */
+export declare function createReadableStreamFromAsyncGenerator(output: AsyncGenerator): ReadableStream<any>;
+/**
+ * Form route
+ * Automatically handles and parses form data
+ *
+ * 1. Renders component as initial form markup
+ * 2. Bind form onSubmit function to custom client JS handling
+ * 3. Submits form with JavaScript fetch()
+ * 4. Replaces form content with content from server
+ * 5. All validation and save logic is on the server
+ * 6. Handles any Exception thrown on server as error displayed in client
+ */
+export type TFormRouteFn = (context: HSRequestContext) => HSTemplate | Response;
+export declare function formRoute(handlerFn: TFormRouteFn): (context: HSRequestContext) => void;
+
+export {};

package/dist/server.js

@@ -1,4 +1,3 @@
-// @bun
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getProtoOf = Object.getPrototypeOf;
@@ -412,8 +411,8 @@ var require_deepmerge = __commonJS((exports, module) => {
 });
 
 // src/server.ts
-import {readdir} from "fs/promises";
-import {basename, extname, join} from "path";
+import {readdir} from "node:fs/promises";
+import {basename, extname, join, resolve} from "node:path";
 
 // src/html.ts
 var import_escape_html = __toESM(require_escape_html(), 1);
@@ -1823,11 +1822,12 @@ async function createServer(config) {
   });
   config.beforeRoutesAdded && config.beforeRoutesAdded(app2);
   const fileRoutes = await buildRoutes(config);
+  const routeMap = [];
   for (let i = 0;i < fileRoutes.length; i++) {
     let route = fileRoutes[i];
     const fullRouteFile = join("../../", config.appDir, "routes", route.file);
     const routePattern = normalizePath(route.route);
-    console.log("[Hyperspan] Added route: ", routePattern);
+    routeMap.push({ route: routePattern, file: config.appDir + "/routes/" + route.file });
     app2.all(routePattern, async (context) => {
       const matchedRoute = await runFileRoute(fullRouteFile, context);
       if (matchedRoute) {
@@ -1836,6 +1836,10 @@ async function createServer(config) {
       return app2._defaultRoute(context);
     });
   }
+  if (!IS_PROD) {
+    console.log("[Hyperspan] File system routes (in app/routes):");
+    console.table(routeMap);
+  }
   config.afterRoutesAdded && config.afterRoutesAdded(app2);
   app2.all("*", (context) => {
     const req = context.req;
@@ -1855,8 +1859,9 @@ async function createServer(config) {
   return app2;
 }
 async function buildClientJS() {
+  const sourceFile = resolve(CWD, "../", "./src/clientjs/hyperspan-client.ts");
   const output = await Bun.build({
-    entrypoints: ["./src/hyperspan/clientjs/hyperspan-client.ts"],
+    entrypoints: [sourceFile],
     outdir: `./public/_hs/js`,
     naming: IS_PROD ? "[dir]/[name]-[hash].[ext]" : undefined,
     minify: IS_PROD
@@ -1900,6 +1905,7 @@ function formRoute(handlerFn) {
   };
 }
 var IS_PROD = false;
+var CWD = import.meta.dir;
 var STATIC_FILE_MATCHER = /[^/\\&\?]+\.([a-zA-Z]+)$/;
 var _routeCache = {};
 var ROUTE_SEGMENT = /(\[[a-zA-Z_\.]+\])/g;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperspan/framework",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Hyperspan Web Framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,9 +9,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "bun run clean && bun run build:client && bun run build:server",
-    "build:client": "bun build ./src/index.ts --outdir ./dist --target browser",
-    "build:server": "bun build ./src/server.ts --outdir ./dist --target bun",
+    "build": "bun ./build.ts",
     "clean": "rm -rf dist",
     "test": "bun test",
     "prepack": "npm run clean && npm run build"
@@ -20,7 +18,15 @@
     "type": "git",
     "url": "https://github.com/vlucas/hyperspan-framework"
   },
-  "keywords": ["framework", "node", "bun", "web", "framework", "javascript", "typescript"],
+  "keywords": [
+    "framework",
+    "node",
+    "bun",
+    "web",
+    "framework",
+    "javascript",
+    "typescript"
+  ],
   "author": "Vance Lucas <vance@vancelucas.com>",
   "license": "BSD-3-Clause",
   "bugs": {
@@ -34,5 +40,12 @@
     "isbot": "^5.1.17",
     "trek-middleware": "^1.2.0",
     "trek-router": "^1.2.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.1.9",
+    "@types/escape-html": "^1.0.4",
+    "@types/node": "^22.5.5",
+    "bun-plugin-dts": "^0.2.3",
+    "typescript": "^5.6.2"
   }
 }

package/src/server.ts

@@ -1,11 +1,12 @@
 import { readdir } from 'node:fs/promises';
-import { basename, extname, join } from 'node:path';
+import { basename, extname, join, resolve } from 'node:path';
 import { html, renderToStream, renderToString } from './html';
 import { isbot } from 'isbot';
 import { HSTemplate } from './html';
 import { HSApp, HSRequestContext, normalizePath } from './app';
 
 export const IS_PROD = process.env.NODE_ENV === 'production';
+const CWD = import.meta.dir;
 const STATIC_FILE_MATCHER = /[^/\\&\?]+\.([a-zA-Z]+)$/;
 
 // Cached route components
@@ -215,14 +216,14 @@ export async function createServer(config: THSServerConfig): Promise<HSApp> {
 
   // Scan routes folder and add all file routes to the router
   const fileRoutes = await buildRoutes(config);
+  const routeMap = [];
 
   for (let i = 0; i < fileRoutes.length; i++) {
     let route = fileRoutes[i];
     const fullRouteFile = join('../../', config.appDir, 'routes', route.file);
     const routePattern = normalizePath(route.route);
 
-    // @ts-ignore
-    console.log('[Hyperspan] Added route: ', routePattern);
+    routeMap.push({ route: routePattern, file: config.appDir + '/routes/' + route.file });
 
     app.all(routePattern, async (context) => {
       const matchedRoute = await runFileRoute(fullRouteFile, context);
@@ -234,6 +235,12 @@ export async function createServer(config: THSServerConfig): Promise<HSApp> {
     });
   }
 
+  // Display routing table for dev env
+  if (!IS_PROD) {
+    console.log('[Hyperspan] File system routes (in app/routes):');
+    console.table(routeMap);
+  }
+
   // [Customization] After routes added...
   config.afterRoutesAdded && config.afterRoutesAdded(app);
 
@@ -267,8 +274,9 @@ export async function createServer(config: THSServerConfig): Promise<HSApp> {
  */
 export let clientJSFile: string;
 export async function buildClientJS() {
+  const sourceFile = resolve(CWD, '../', './src/clientjs/hyperspan-client.ts');
   const output = await Bun.build({
-    entrypoints: ['./src/hyperspan/clientjs/hyperspan-client.ts'],
+    entrypoints: [sourceFile],
     outdir: `./public/_hs/js`,
     naming: IS_PROD ? '[dir]/[name]-[hash].[ext]' : undefined,
     minify: IS_PROD,

package/tsconfig.json

@@ -19,8 +19,7 @@
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
-    "allowJs": true,
-    "types": ["bun-types"]
+    "allowJs": true
   },
   "exclude": ["node_modules", "__tests__", "*.test.ts"]
 }