wirejs-scripts 3.0.9 → 3.0.11

package/README.md

@@ -0,0 +1,3 @@
+Experimental.
+
+If this package interests you, contact the author.

package/bin.js

@@ -4,11 +4,13 @@ import process from 'process';
 import http from 'http';
 import fs from 'fs';
 import path from 'path';
+import { Worker } from 'worker_threads';
 
 import webpack from 'webpack';
 import webpackConfigure from './configs/webpack.config.js';
 import { rimraf } from 'rimraf';
 import esbuild from 'esbuild';
+import { contentType } from 'mime-types';
 
 import { JSDOM } from 'jsdom';
 import { useJSDOM } from 'wirejs-dom/v2';
@@ -115,7 +117,7 @@ async function handleApiResponse(req, res) {
 		const calls = JSON.parse(body);
 		logger.info('handling API request', body);
 
-		const apiPath = path.join(CWD, 'api', 'index.js');
+		const apiPath = path.join(CWD, 'api', 'dist', 'index.js');
 		const api = await import(`${apiPath}?cache-id=${new Date().getTime()}`);
 
 		const responses = [];
@@ -174,13 +176,7 @@ async function tryStaticPath(req, res) {
 	if (!fs.existsSync(fullPath)) return false;
 	logger.info('static found');
 
-	if (fullPath.endsWith(".html")) {
-		res.setHeader('Content-Type', 'text/html; charset=utf-8');
-	} else if (fullPath.endsWith(".js")) {
-		res.setHeader('Content-Type', 'text/javascript; charset=utf-8');
-	} else {
-		res.setHeader('Content-Type', 'text/plain; charset=utf-8');
-	}
+	res.setHeader('Content-Type', contentType(path.extname(fullPath)));
 
 	try {
 		res.end(fs.readFileSync(fullPath));
@@ -214,6 +210,16 @@ function globMatch(pattern, text) {
     return regex.test(text);
 }
 
+function toJSPath(path) {
+	if (path.endsWith('/')) {
+		return path + 'index.js';
+	} else if (!path.endsWith('.js')) {
+		return path + '.js';
+	} else {
+		return path;
+	}
+}
+
 /**
  * 
  * @param {Context} context 
@@ -221,10 +227,11 @@ function globMatch(pattern, text) {
  */
 function routeSSR(context, forceExt) {
 	const SSR_ROOT = path.join(CWD, 'dist', 'ssr');
-	const asJSPath = forceExt ?
-		context.location.pathname.replace(/\.(\w+)$/, `.${forceExt}`)
-		: context.location.pathname
-	;
+
+	const asJSPath = forceExt
+		? toJSPath(context.location.pathname)
+		: context.location.pathname;
+
 	const allHandlers = fs.readdirSync(SSR_ROOT, { recursive: true })
 		.filter(p => p.endsWith('.js'))
 		.map(p => `/${p}`)
@@ -270,7 +277,7 @@ async function trySSRScriptPath(req, res) {
 async function trySSRPath(req, res) {
 	const context = createContext(req);
 
-	const asJSPath = context.location.pathname.replace(/\.(\w+)$/, '.js');
+	const asJSPath = context.location.pathname.replace(/\.(\w+)$/, '') + '.js';
 	const srcPath = routeSSR(context, 'js');
 	if (!srcPath) return false;
 
@@ -284,26 +291,32 @@ async function trySSRPath(req, res) {
 		const module = self.exports;
 		if (typeof module.generate === 'function') {
 			const doc = await module.generate(context);
-			const doctype = doc.parentNode.doctype?.name || '';
-
-			let hydrationsFound = 0;
-			while (globalThis.pendingDehydrations?.length > 0) {
-				globalThis.pendingDehydrations.shift()(doc);
-				hydrationsFound++;
-			}
+			if (typeof doc.outerHTML === 'undefined') {
+				res.setHeader('Content-Type', contentType(
+					context.location.pathname.split('.').pop()
+				));
+				res.end(doc);
+			} else {
+				const doctype = doc.parentNode.doctype?.name || '';
 
-			if (hydrationsFound) {
-				const script = doc.parentNode.createElement('script');
-				script.src = asJSPath;
-				doc.parentNode.body.appendChild(script);
+				let hydrationsFound = 0;
+				while (globalThis.pendingDehydrations?.length > 0) {
+					globalThis.pendingDehydrations.shift()(doc);
+					hydrationsFound++;
+				}
+	
+				if (hydrationsFound) {
+					const script = doc.parentNode.createElement('script');
+					script.src = asJSPath;
+					doc.parentNode.body.appendChild(script);
+				}
+	
+				res.setHeader('Content-type', 'text/html; charset=utf-8');
+				res.end([
+					doctype ? `<!doctype ${doctype}>\n` : '',
+					doc.outerHTML
+				].join(''));
 			}
-
-			res.setHeader('Content-type', 'text/html; charset=utf-8');
-			res.end([
-				doctype ? `<!doctype ${doctype}>\n` : '',
-				doc.outerHTML
-			].join(''));
-
 			return true;
 		} else {
 			logger.info('SSR module missing generate function');
@@ -367,6 +380,25 @@ async function compile(watch = false) {
 	const stats = await new Promise(async (resolve, reject) => {
 		let compiler;
 		if (watch) {
+
+			const apiDir = path.join(CWD, 'api');
+			const prebuildApiWatch = await esbuild.context({
+				entryPoints: [path.join(CWD, 'api', '**', '*.ts')],
+				outdir: path.join(apiDir, 'dist'),
+				platform: 'node',
+				bundle: true,
+				external: ['./node_modules/*'],
+				format: 'esm',
+				plugins: [{
+					name: 'post-build-rebuild-api-client',
+					setup(build) {
+						build.onEnd(() => prebuildApi(apiDir))
+					}
+				}]
+			});
+			await prebuildApiWatch.rebuild();
+			prebuildApiWatch.watch();
+			
 			const prebuild = await esbuild.context({
 				entryPoints: [`${CWD}/src/**/*.ts`],
 				outdir: `${CWD}/pre-dist`,
@@ -376,6 +408,7 @@ async function compile(watch = false) {
 			});
 			await prebuild.rebuild();
 			prebuild.watch();
+
 			webpack({
 				...getWebpackConfig(),
 				mode: 'development',
@@ -390,6 +423,7 @@ async function compile(watch = false) {
 			server.listen(3000).on('listening', () => {
 				console.log('Started listening on http://localhost:3000/')
 			});
+			
 		} else {
 			logger.log('prebundling JS');
 			await esbuild.build({
@@ -470,13 +504,13 @@ const engine = {
 	async ['prebuild-api']() {
 		logger.log("prebuilding api ...");
 		await esbuild.build({
-			entryPoints: [`${CWD}/**/*.ts`],
-			outdir: CWD,
+			entryPoints: [path.join(CWD, '**', '*.ts')],
+			outdir: path.join(CWD, 'dist'),
 			platform: 'node',
 			bundle: false,
 			format: 'esm',
 		});
-		await prebuildApi();
+		await prebuildApi(CWD);
 		logger.log("api prebuild finished");
 	},
 };

package/configs/webpack.config.js

@@ -1,28 +1,14 @@
-import { useJSDOM } from 'wirejs-dom/v2';
-import fs from 'fs';
 import path from 'path';
 import glob from 'glob';
 import process from 'process';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
-import marked from 'marked';
-import { JSDOM } from 'jsdom';
-
+import { execSync } from 'child_process';
 
 const CWD = process.cwd();
 const SRC = 'pre-dist';
 
-// https://marked.js.org/using_advanced
-marked.setOptions({
-	highlight: function (code, lang) {
-		try {
-			const highlighter = require('highlight.js');
-			const language = highlighter.getLanguage(lang) ? lang : 'plaintext';
-			return highlighter.highlight(code, { language }).value;
-		} catch (e) {
-			console.log("highlight.js not installed. Skipping syntax highlighting.");
-		}
-	}
-});
+const __filename = import.meta.url.replace(/^file:/, '');
+const SELF_DIR = path.dirname(__filename);
 
 function distPath({ subpathOut = '', subpathIn = '', extensionOut } = {}) {
 	return function ({ context, absoluteFilename }) {
@@ -37,90 +23,24 @@ function distPath({ subpathOut = '', subpathIn = '', extensionOut } = {}) {
 	};
 };
 
-const layouts = {};
-const CollectLayouts = {
-	transformer: (content, path) => {
-		// add one to dirname prefix to include separating slash
-		const relativePath = path.slice(CWD.length + 1);
-		layouts[relativePath] = content.toString();
-		return layouts[relativePath];
-	}
-};
-
-const SSG = {
-	transformer: async (content, _path) => {
-		let _meta = {};
-
-		let body;
-		try {
-            body = _path.endsWith('.md') ? marked(content.toString()) : content.toString();
-		} catch (err) {
-			console.error(`Could not parse page ${_path}`, err);
-			throw err;
-		}
-
-		// apply no layout if the document has already provided the
-		// overarching html structure.
-		if (!_meta.layout && body && (
-			String(body).startsWith('<!doctype html>')
-			|| String(body).startsWith('<html'))
-		) {
-			return body;
-		}
-
-		const layoutPath = path.join(
-			SRC,
-			'layouts',
-			(_meta.layout || 'default')
-		) + '.html';
-
-		const layout = layouts[layoutPath];
-
-		try {
-			return layout;
-		} catch (err) {
-			console.error(`Could not parse layout ${layoutPath}`, err);
-			throw err;
-		}
-	}
-};
-
 const Generated = {
 	transformer: async (content, contentPath) => {
-		useJSDOM(JSDOM);
-
 		try {
 			if (contentPath.endsWith('.js')) {
-				const module = await import(contentPath + '?' + new Date() + Math.random());
-				if (typeof module.generate === 'function') {
-					const doc = await module.generate(contentPath);
-					const doctype = doc.parentNode.doctype?.name || '';
-
-					let hydrationsFound = 0;
-					while (globalThis.pendingDehydrations?.length > 0) {
-						globalThis.pendingDehydrations.shift()(doc);
-						hydrationsFound++;
-					}
-
-					if (hydrationsFound) {
-						const script = doc.parentNode.createElement('script');
-						script.src = contentPath.substring((`${CWD}/${SRC}/ssg`).length);
-						doc.parentNode.body.appendChild(script);
+				// generated in a subprocess to ensure imports are clean, especially
+				// when in watch mode.
+				const generatedContent = execSync(
+					`node ${SELF_DIR}/../ssg.js ${CWD}/${SRC} ${contentPath}`,
+					{
+						stdio: [ 'pipe', 'pipe', 'pipe' ]
 					}
-
-					return [
-						doctype ? `<!doctype ${doctype}>\n` : '',
-						doc.outerHTML
-					].join('');
-				} else {
-					return;
-				}
+				);
+				return generatedContent;
 			} else {
 				return content.toString();
 			}
 		} catch (err) {
 			console.error(`Could not generate page ${contentPath}`, err);
-			throw err;
 		}
 	}
 };
@@ -177,25 +97,6 @@ export default (env, argv) => {
 		target: 'web',
 		devtool,
 		plugins: [
-
-			// TODO: does it make sense to actually handle static assets
-			// first? then layouts? then everything else?
-
-			// handle layouts first. other things depend on them.
-			new CopyWebpackPlugin({
-				patterns: [
-					{
-						from: `./${SRC}/layouts/**/*.html`,
-						to: distPath({
-							subpathIn: `${SRC}/layouts`,
-							subpathOut: 'layouts'
-						}),
-						transform: CollectLayouts,
-						noErrorOnMissing: true,
-					},
-				]
-			}),
-
 			// now pages, etc.
 			new CopyWebpackPlugin({
 				patterns: [
@@ -211,111 +112,8 @@ export default (env, argv) => {
 						noErrorOnMissing: true,
 						priority: 5
 					},
-					// {
-					// 	from: './src/routes/**/*.md',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	transform: SSG,
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.html',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	transform: SSG,
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.xml',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	transform: SSG,
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.rss',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	transform: SSG,
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.css',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	noErrorOnMissing: true,
-					// 	// trasform: ???
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.png',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.jpg',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.json',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.svg',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
-					// {
-					// 	from: './src/routes/**/*.mp3',
-					// 	to: distPath({ subpathIn: 'src/routes' }),
-					// 	noErrorOnMissing: true,
-					// 	priority: 3,
-					// },
 				],
 			}),
 		],
-		module: {
-			rules: [
-				{
-					test: /\.css$/,
-					use: [
-						"style-loader",
-						// path.resolve(__dirname, '../node_modules/style-loader'),
-						{
-							loader: "css-loader",
-							// loader: path.resolve(__dirname, '../node_modules/css-loader'),
-							options: {
-								// don't try to require() url assets
-								url: false
-							}
-						}
-					]
-				},
-				{
-					test: /\.html$/,
-					loader: "file-loader",
-					// loader: path.resolve(__dirname, '../node_modules/file-loader'),
-					options: {
-						name: "[name].[ext]",
-					}
-				},
-				{
-					test: /\.mjs$/,
-					resolve: {
-						fullySpecified: false
-					}
-				},
-				{
-					test: /\.(md|tpl)$/,
-					use: "raw-loader",
-					// use: path.resolve(__dirname, '../node_modules/raw-loader')
-				},
-			]
-		}
 	};
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wirejs-scripts",
-	"version": "3.0.9",
+	"version": "3.0.11",
 	"description": "Basic build and start commands for wirejs apps",
 	"type": "module",
 	"bin": {
@@ -28,11 +28,12 @@
 		"glob": "^7.2.0",
 		"jsdom": "^25.0.1",
 		"marked": "^2.0.1",
+		"mime-types": "^2.1.35",
 		"raw-loader": "^4.0.2",
 		"rimraf": "^6.0.1",
 		"style-loader": "^2.0.0",
 		"webpack": "^5.97.1",
 		"wirejs-dom": "^1.0.38",
-		"wirejs-resources": "^0.1.11"
+		"wirejs-resources": "^0.1.13"
 	}
-}
+}

package/ssg.js

@@ -0,0 +1,42 @@
+import process from 'process';
+import { JSDOM } from 'jsdom';
+import { useJSDOM } from 'wirejs-dom/v2';
+
+const SRC_DIR = process.argv[2];
+
+async function build(filename) {
+	useJSDOM(JSDOM);
+
+	try {
+		const module = await import(filename);
+
+		if (typeof module.generate === 'function') {
+			const doc = await module.generate(filename);
+			const doctype = doc.parentNode.doctype?.name || '';
+
+			let hydrationsFound = 0;
+			while (globalThis.pendingDehydrations?.length > 0) {
+				globalThis.pendingDehydrations.shift()(doc);
+				hydrationsFound++;
+			}
+
+			if (hydrationsFound) {
+				const script = doc.parentNode.createElement('script');
+				script.src = filename.substring((`${SRC_DIR}/ssg`).length);
+				doc.parentNode.body.appendChild(script);
+			}
+
+			return [
+				doctype ? `<!doctype ${doctype}>\n` : '',
+				doc.outerHTML
+			].join('');
+		} else {
+			return;
+		}
+	} catch (err) {
+		console.error(`Could not generate page ${filename}`, err);
+		process.exit(1);
+	}
+}
+
+console.log(await build(process.argv[3]));