create-wirejs-app 1.0.3 → 2.0.0

package/bin.js

@@ -15,11 +15,9 @@ const [
 	fs.mkdirSync(projectName);
 
 	console.log("Writing base package files ...");
-	await copy(`${__dirname}/template`, `./${projectName}`);
-	await copy(
-		`${__dirname}/template/_gitignore`,
-		`./${projectName}/.gitignore`
-	);
+	await copy(`${__dirname}/templates/default`, `./${projectName}`);
+	await copy(`${__dirname}/templates/default/gitignore`, `./${projectName}/.gitignore`);
+	await fs.promises.unlink(`./${projectName}/gitignore`);
 
 	const packageJson = await fs.readFileSync(`./${projectName}/package.json`);
 	fs.writeFileSync(
@@ -31,7 +29,7 @@ const [
 
 	console.log("Fetching dependencies ...");
 	process.chdir(projectName);
-	execSync('npm install', { stdio: [0, 1, 2] });
+	execSync('npm install');
 
 	console.log(`
 Done creating ${projectName}!

package/package.json

@@ -1,21 +1,22 @@
 {
-  "name": "create-wirejs-app",
-  "version": "1.0.3",
-  "description": "Initializes a wirejs package.",
-  "author": "Jon Wire",
-  "license": "MIT",
-  "bin": {
-    "create-wirejs-app": "./bin.js"
-  },
-  "dependencies": {
-    "recursive-copy": "^2.0.14"
-  },
-  "files": [
-    "bin.js",
-    "package.json",
-    "template/src/*",
-    "template/static/*",
-    "template/_gitignore",
-    "template/package.json*"
-  ]
-}
+	"name": "create-wirejs-app",
+	"version": "2.0.0",
+	"description": "Initializes a wirejs package.",
+	"author": "Jon Wire",
+	"license": "MIT",
+	"bin": {
+		"create-wirejs-app": "./bin.js"
+	},
+	"dependencies": {
+		"recursive-copy": "^2.0.14"
+	},
+	"scripts": {
+		"build": "echo \"Nothing to build\"",
+		"clean": "echo \"Nothing to clean\""
+	},
+	"files": [
+		"bin.js",
+		"package.json",
+		"templates/*"
+	]
+}

package/templates/default/api/index.js

@@ -0,0 +1,99 @@
+import { AuthenticationService, FileService, withContext } from 'wirejs-resources';
+import { defaultGreeting } from '../src/lib/sample-lib.js';
+
+const userTodos = new FileService('userTodoApp');
+const wikiPages = new FileService('wikiPages');
+const authService = new AuthenticationService('core-users');
+
+export const auth = authService.buildApi();
+
+async function currentUser(context) {
+	const { user } = await authService.getBaseState(context.cookies);
+	return user;
+}
+
+/**
+* Given a name, this will return a friendly, personalized greeting.
+* @param {string} name
+* @returns {Promise<string>} A friendly greeting.
+*/
+export const hello = withContext(context => async (name) => {
+	const user = await currentUser();
+	return `${defaultGreeting()}, ${user ? `<b>${user}</b>` : '<i>Anonymous</i>'}.`;
+});
+
+export const todos = withContext(context => ({
+	async read() {
+		const user = await currentUser(context);
+
+		console.log('current user', user);
+
+		if (!user) {
+			throw new Error("Unauthorized");
+		}
+
+		try {
+			const todos = await userTodos.read(`${user}/todos.json`);
+			return todos ? JSON.parse(todos) : [];
+		} catch (error) {
+			return [];
+		}
+	},
+	/**
+	 * @param {string[]} todos 
+	 */
+	async write(todos) {
+		const user = await currentUser(context);
+
+		if (!user) {
+			throw new Error("Unauthorized");
+		}
+
+		if (!Array.isArray(todos)) {
+			throw new Error("Invalid todos!");
+		}
+
+		if (!todos.every(todo =>
+			typeof todo.id === 'string'
+			&& typeof todo.text === 'string')
+		) {
+			throw new Error("Invalid todos!");
+		}
+
+		const finalTodos = todos.map(todo => ({ id: todo.id, text: todo.text }));
+		await userTodos.write(`${user}/todos.json`, JSON.stringify(finalTodos));
+
+		return true;
+	}
+}));
+
+function normalizeWikiPageFilename(page) {
+	return page.replace(/[^-_a-zA-Z0-9/]/g, '-') + '.md';
+}
+
+export const wiki = withContext(context => ({
+	async read(page) {		
+		const filename = normalizeWikiPageFilename(page);
+		try {
+			return await wikiPages.read(filename);
+		} catch (error) {
+			console.log("returning empty content");
+			return undefined;
+		}
+	},
+	/**
+	 * @param {string[]} todos 
+	 */
+	async write(page, content) {
+		const user = await currentUser(context);
+
+		if (!user) {
+			throw new Error("Unauthorized");
+		}
+
+		const filename = normalizeWikiPageFilename(page);
+		await wikiPages.write(filename, content);
+
+		return true;
+	}
+}));

package/templates/default/api/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "my-api",
+	"private": "true",
+	"version": "1.0.0",
+	"type": "module",
+	"scripts": {
+		"prestart": "node prebuild.js",
+		"start": "",
+		"prebuild": "node prebuild.js"
+	},
+	"devDependencies": {
+		"rimraf": "^6.0.1"
+	},
+	"exports": {
+		"wirejs:client": "./index.client.js",
+		"default": "./index.js"
+	}
+}

package/templates/default/api/prebuild.js

@@ -0,0 +1,58 @@
+import { writeFileSync } from 'fs';
+
+const indexModule = await import('./index.js');
+
+function dedent(tabs, text) {
+	const tabString = new Array(tabs).fill('\t').join('');
+	return text.trim().replace(new RegExp(`^${tabString}`, 'gm'), '');
+}
+
+const apiCode = Object.keys(indexModule)
+	.map(name => `export const ${name} = apiTree(${JSON.stringify([name])});`)
+	.join('\n')
+;
+
+const baseClient = dedent(1, /* js */ `
+	async function wirejsCallApi(method, ...args) {
+		let cookieHeader = {};
+		if (typeof args[0]?.cookies?.getAll === 'function') {
+			const cookies = args[0]?.cookies?.getAll();
+			cookieHeader = typeof cookies === 'object'
+				? {
+					Cookie: Object.entries(cookies).map(kv => kv.join('=')).join('; ')
+				}
+				: {};
+		}
+
+		const response = await fetch("/api", {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				...cookieHeader
+			},
+			body: JSON.stringify([{method, args:[...args]}]),
+		});
+		const body = await response.json();
+
+		const error = body[0].error;
+		if (error) {
+			throw new Error(error);
+		}
+
+		const value = body[0].data;
+		return value;
+	};
+
+	function apiTree(path = []) {
+		return new Proxy(function() {}, {
+			apply(_target, _thisArg, args) {
+				return wirejsCallApi(path, ...args);
+			},
+			get(_target, prop) {
+				return apiTree([...path, prop]);
+			}
+		});
+	};
+`);
+
+writeFileSync('index.client.js', [baseClient, apiCode].join('\n\n'));

package/templates/default/gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+temp
+src/build_id.json
+api/index.client.js

package/templates/default/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "sample-app",
+	"version": "3.0.0",
+	"private": true,
+	"type": "module",
+	"workspaces": [
+		"src",
+		"api"
+	],
+	"dependencies": {
+		"wirejs-dom": "^1.0.34",
+		"wirejs-resources": "^0.1.1-alpha",
+		"dompurify": "^3.2.3",
+		"marked": "^15.0.6"
+	},
+	"devDependencies": {
+		"wirejs-scripts": "^3.0.0"
+	},
+	"scripts": {
+		"prebuild": "npm run prebuild --workspaces --if-present",
+		"prestart": "npm run prestart --workspaces --if-present",
+		"start": "wirejs-scripts start",
+		"build": "wirejs-scripts build"
+	}
+}

package/templates/default/src/build_id.json

@@ -0,0 +1 @@
+"1731789421822"

package/templates/default/src/components/account-menu.js

@@ -0,0 +1,123 @@
+import { attribute, html, node, text, id } from 'wirejs-dom/v2';
+import { authenticator } from './authenticator.js';
+
+/**
+ * @typedef {import('wirejs-services').AuthenticationService} AuthenticationService
+ * @typedef {ReturnType<AuthenticationService['buildApi']>} AuthStateApi
+ * @typedef {Awaited<ReturnType<AuthStateApi['getState']>>} AuthState
+ * @typedef {AuthState['actions'][string]} AuthStateAction
+ * @typedef {Parameters<AuthStateApi['setState']>[0]} AuthStateActionInput
+ * @typedef {import('wirejs-services').Context} Context
+ */
+
+/**
+ * @param {AuthStateApi} api
+ */
+export const accountMenu = (api) => {
+	const uiState = {
+		expanded: false
+	};
+
+	/**
+	 * @type {Set<(state: AuthState) => any>}
+	 */
+	const listeners = new Set();
+
+	const listenForClose = event => {
+		if (
+			(event.type === 'click' && !self.data.menu.contains(event.target))
+			|| (event.type === 'keyup' && event.key === 'Escape')
+		) {
+			close()
+		}
+	};
+
+	const close = () => {
+		uiState.expanded = false;
+		updateStyleToMatchState();
+		document.removeEventListener('click', listenForClose);
+		document.removeEventListener('keyup', listenForClose);
+	};
+
+	const removeListenForClose = () => {
+		document.removeEventListener('click', listenForClose);
+		document.removeEventListener('keyup', listenForClose);
+	};
+
+	const updateStyleToMatchState = () => {
+		self.data.menu.style.display = uiState.expanded ? '' : 'none';
+		const position = self.getBoundingClientRect();
+		self.data.menu.style.top = `${position.bottom + 1}px`;
+		self.data.menu.style.right = `${document.body.clientWidth - position.right + 16}px`;
+	};
+
+	const authenticatorNode = authenticator(api);
+	authenticatorNode.data.onchange(state => {
+		self.data.user = state.state.user || '';
+		close();
+		for (const listener of listeners) {
+			try {
+				listener(state);
+			} catch (error) {
+				console.error("Error calling auth state listener.");
+			}
+		}
+	});
+
+	const self = html`<accountmenu style='display: inline-block;'>
+		<div
+			style='display: inline-block;'
+		>${node('user', name => name ? html`<b>${name}</b>` : html`<i>Anonymous</i>`)}</div>
+		<div style='
+				display: inline-block;
+				border: 1px solid silver;
+				border-radius: 0.25rem;
+				cursor: pointer;
+				padding: 0 0.25em;
+			'
+			onclick=${() => {
+				uiState.expanded = !uiState.expanded;
+				updateStyleToMatchState();
+				if (uiState.expanded) {
+					authenticatorNode.data.focus();
+					setTimeout(() => {
+						document.addEventListener('click', listenForClose);
+						document.addEventListener('keyup', listenForClose);
+					}, 1);
+				} else {
+					removeListenForClose()
+				}
+			}}
+		>☰</div>
+		<div ${id('menu')} style='
+			display: none;
+			position: absolute;
+			border: 1px solid gray;
+			border-radius: 0.25rem;
+			background-color: white;
+			padding: 0.5rem;
+			box-shadow: -0.125rem 0.125rem 0.25rem lightgray;
+		'>${node('authenticator', authenticatorNode)}</div>
+	</accountmenu>`.onadd(async self => {
+		const state = await api.getState(true);
+		self.data.user = state.state.user || '';
+	}).extend(self => ({
+		data: {
+			/**
+			 * @param {(state: AuthState) => any} callback
+			 */
+			onchange: (callback) => {
+				listeners.add(callback);
+			},
+
+			/**
+			 * @param {(state: AuthState) => any} callback
+			 */
+			removeonchange: (callback) => {
+				listeners.delete(callback);
+			},
+		}
+	}));
+
+	return self;
+};

package/templates/default/src/components/authenticator.js

@@ -0,0 +1,149 @@
+import { attribute, html, node } from 'wirejs-dom/v2';
+
+/**
+ * @typedef {import('wirejs-services').AuthenticationService} AuthenticationService
+ * @typedef {ReturnType<AuthenticationService['buildApi']>} AuthStateApi
+ * @typedef {Awaited<ReturnType<AuthStateApi['getState']>>} AuthState
+ * @typedef {AuthState['actions'][string]} AuthStateAction
+ * @typedef {Parameters<AuthStateApi['setState']>[0]} AuthStateActionInput
+  */
+
+/**
+ * @param {AuthStateAction} action
+ * @param {(act: AuthStateActionInput) => void} act
+ */
+export const authenticatoraction = (action, act) => {
+	const inputs = Object.entries(action.inputs || []).map(([name, { label, type }]) => {
+		const id = `input_${Math.floor(Math.random() * 1_000_000)}`;
+		const input = html`<div>
+			<label for=${id}>${label}</label>
+			<br />
+			<input
+				id=${id}
+				name=${name}
+				type=${type}
+				value=${attribute('value', '')}
+				style='width: calc(100% - 1rem); margin-bottom: 0.5rem;'
+			/>
+		</div>`.extend(self => ({
+			data: { name }
+		}));
+		return input;
+	});
+
+	const buttons = action.buttons?.map(b => html`<p>
+		<button type='submit' value='${b}'>${b}</button>
+	</p>`);
+
+	const link = buttons ? undefined : [
+		html`<p><a
+			style='cursor: pointer; font-weight: bold;'
+			onclick=${() => act({ key: action.key })}
+		>${action.name}</a></p>`
+	];
+
+	const actors = link ?? buttons;
+
+	if (action.inputs && Object.keys(action.inputs).length > 0) {
+		return html`<authenticatoraction>
+			<div>
+				<h4 style='margin-top: 1rem; margin-bottom: 0.5rem;'>${action.name}</h4>
+				<form
+					onsubmit=${evt => {
+						evt.preventDefault();
+						act({
+							key: action.key,
+							verb: evt.submitter?.value,
+							inputs: Object.fromEntries(inputs.map(input => ([
+								input.data.name,
+								input.data.value
+							])))
+						});
+					}}
+				>
+					${inputs}
+					${actors}
+				</form>
+				<hr style='width: 33%; height: 1px; border: none; background: silver;' />
+			</div>
+		</authenticatoraction>`;
+	} else {
+		return html`<authenticatoraction>
+			${actors}
+		</authenticatoraction>`;
+	}
+}
+
+/**
+ * @param {AuthStateApi} stateManager
+ * @returns 
+ */
+export const authenticator = (stateManager) => {
+	/**
+	 * @type {Set<(state: AuthState) => any>}
+	 */
+	const listeners = new Set();
+
+	/**
+	 * @type {AuthState}
+	 */
+	let lastKnownState = undefined;
+
+	const self = html`<authenticator style='display: block; min-width: 15em;'>
+		${node('state', html`<span>Loading ...</span>`)}
+	</authenticator>`.extend(self => ({
+		/**
+		 * @param {AuthState} state 
+		 */
+		renderState(state) {
+			lastKnownState = state;
+			if (state.errors) {
+				alert(state.errors.map(e => e.message).join("\n\n"));
+			} else {
+				self.data.state = html`<div>
+					<div>${state.message || ''}</div>
+					<div>${Object.entries(state.actions).map(([key, action]) => {
+						return authenticatoraction({key, ...action}, async act => {
+							self.renderState(await stateManager.setState(true, act));
+						});
+					})}</div>
+				</div>`;
+			}
+			for (const listener of listeners) {
+				try {
+					listener(state);
+				} catch (error) {
+					console.error("Error calling auth state listener.");
+				}
+			}
+		}
+	})).onadd(async (self) => {
+		self.renderState(await stateManager.getState(true))
+	}).extend(self => ({
+		data: {
+			/**
+			 * @param {(state: AuthState) => any} callback
+			 */
+			onchange: (callback) => {
+				listeners.add(callback);
+			},
+
+			/**
+			 * @param {(state: AuthState) => any} callback
+			 */
+			removeonchange: (callback) => {
+				listeners.delete(callback);
+			},
+
+			focus: () => {
+				[...self.getElementsByTagName('input')].shift()?.focus();
+			},
+
+			get lastKnownState() {
+				return lastKnownState;
+			}
+		}
+	}));
+
+	return self;
+};

package/templates/default/src/components/countdown.js

@@ -0,0 +1,36 @@
+import { hello } from 'my-api';
+import { html, text, node } from 'wirejs-dom/v2';
+
+/**
+ * Counts down from a given time.
+ * 
+ * @param {number} from - The time to count down "from".
+ * @returns 
+ */
+export async function Countdown(T = 10) {
+	return html`<div>
+		${node('remaining', T, timeOrGreeting => {
+			if (typeof timeOrGreeting === 'string') {
+				return html`<div>${timeOrGreeting}</div>`;
+			} else if (timeOrGreeting === 0) {
+				return html`<div><b>ALL DONE!</b></div>`;
+			} else if (timeOrGreeting === 1) {
+				return html`<div><i>ONE second left!!!</i></div>`;
+			} else {
+				return html`<div>${timeOrGreeting} seconds remaining ...</div>`;
+			}
+		})}
+	</div>`.onadd(self => {
+		function tick() {
+			self.data.remaining = self.data.remaining - 1;
+			if (self.data.remaining > 0) {
+				setTimeout(() => tick(), 1000);
+			} else {
+				hello("So and so").then(r => self.data.remaining = r);
+			}
+		};
+		tick();
+	});
+};
+
+export default Countdown;

package/templates/default/src/layouts/default.js

@@ -0,0 +1,3 @@
+// common components
+import Countdown from '../components/countdown.js';
+

package/templates/default/src/lib/sample-lib.js

@@ -0,0 +1,8 @@
+/**
+ * Just a small function to demonstrate that API's can `require()`
+ * things which get included and bundled correctly.
+ * @returns The string "Hello"
+ */
+export function defaultGreeting() {
+	return "Hello"
+}

package/templates/default/src/package.json

@@ -0,0 +1,10 @@
+{
+	"name": "src",
+	"version": "2.0.0",
+	"private": true,
+	"type": "module",
+	"dependencies": {
+		"wirejs-dom": "*",
+        "my-api": "*"
+	}
+}

package/templates/default/src/ssg/index.js

@@ -0,0 +1,27 @@
+import { html, hydrate } from 'wirejs-dom/v2';
+
+async function App() {
+	return html`<div id='app'>
+	</div>`;
+}
+
+export async function generate() {
+	const page = html`
+		<!doctype html>
+		<html>
+			<head>
+				<title>Welcome!</title>
+			</head>
+			<body>
+				<h1>Welcome!</h1>
+				<p>This is your wirejs app!</p>
+				<p>It comes with some sample API methods and pages.</p>
+				<ul>
+					<li><a href='/todo-app.html'>Todo App</a></li>
+					<li><a href='/simple-wiki/index.html'>Simple Wiki</a></li>
+				</ul>
+			</body>
+		</html>
+	`;
+	return page;
+}

package/templates/default/src/ssg/todo-app.js

@@ -0,0 +1,83 @@
+import { html, node, list, attribute, hydrate } from 'wirejs-dom/v2';
+import { accountMenu } from '../components/account-menu.js';
+import { auth, todos } from 'my-api';
+
+function Todos() {
+	const save = async () => {
+		try {
+			await todos.write(true, self.data.todos);
+		} catch (error) {
+			alert(error);
+		}
+	}
+
+	const remove = todo => {
+		self.data.todos = self.data.todos.filter(t => t.id !== todo.id);
+		save();
+	}
+
+	const newid = () => crypto.randomUUID();
+	
+	const self = html`<div>
+		<h4>Your Todos</h4>
+		<ol>${list('todos', todo => html`<li>
+			${todo.text} : <span
+				style='color: darkred; font-weight: bold; cursor: pointer;'
+				onclick=${() => remove(todo)}
+			>X</span>
+		</li>`)}</ol>
+		<div>
+			<form onsubmit=${event => {
+				event.preventDefault();
+				self.data.todos.push({ id: newid(), text: self.data.newTodo });
+				self.data.newTodo = '';
+				save();
+			}}>
+				<input type='text' value=${attribute('newTodo', '')} />
+				<input type='submit' value='Add' />
+			</form>
+		</div>
+	<div>`.onadd(async self => {
+		self.data.todos = await todos.read(true);
+	});
+	return self;
+}
+
+async function App() {
+	const accountMenuNode = accountMenu(auth);
+
+	accountMenuNode.data.onchange(async state => {
+		if (state.state.user) {
+			self.data.content = Todos();
+		} else {
+			self.data.content = html`<div>You need to sign in to add your todo list.</div>`;
+		}
+	});
+
+	const self = html`<div id='app'>
+		<div style='float: right;'>${accountMenuNode}</div>
+		${node('content', html`<div>Loading ...</div>`)}
+	</div>`;
+
+	return self;
+}
+
+export async function generate() {
+	const page = html`
+		<!doctype html>
+		<html>
+			<head>
+				<title>Todo App</title>
+			</head>
+			<body>
+				<p><a href='/'>Home</a></p>
+				<h1>Todo App</h1>
+				${await App()}
+			</body>
+		</html>
+	`;
+
+	return page;
+}
+
+hydrate('app', App);

package/template/_gitignore

@@ -1,4 +0,0 @@
-node_modules
-dist
-api
-src/build_id.json

package/template/package.json

@@ -1,16 +0,0 @@
-{
-	"name": "project-name",
-	"version": "2.0.0",
-	"private": true,
-	"dependencies": {
-		"highlight.js": "^11.5.1",
-		"wirejs-dom": "^1.0.7"
-	},
-	"devDependencies": {
-		"wirejs-scripts": "^2.0.0"
-	},
-	"scripts": {
-		"start": "wirejs-scripts start",
-		"build": "wirejs-scripts build"
-	}
-}

package/template/src/api/sample.js

@@ -1,10 +0,0 @@
-const { defaultGreeting } = require('../lib/sample-lib');
-
-module.exports = {
-	/**
-	 * Given a name, this will return a friendly, personalized greeting.
-	 * @param {string} name
-	 * @returns {string} A friendly greeting.
-	 */
-	hello: async (name) => `${defaultGreeting()}, ${name}.`
-};

package/template/src/api/todo.js

@@ -1,76 +0,0 @@
-// included from local template during development.
-// long term, maybe this goes into the wirejs-scripts repo, or possibly as a
-// dep thereof. but, the collection class provided may eventually depend on
-// which deployment target is specified.
-const { Collection } = require('../api-lib/collection');
-
-/**
- * Simple API example demonstrating interaction with a collection without auth.
- *
- * The `Note` class used shows how you might perform simple validation on data
- * as it enters the API boundary.
- */
-
-
-/**
- * A simple sample class we'll be saving and loading from the API.
- *
- * We could just as easily *not* use a class at all. (Maybe that would actually
- * be better for this example ...)
- */
-class Note {
-	/**
-	 * Construct a new note with an id (optional), title, and body.
-	 *
-	 * If an id is not given, one will be generated.
-	 */
-	constructor({id, title, body}) {
-		this.id = id || this.makeId();
-		this.title = title;
-		this.body = body;
-		this.validate();
-	}
-
-	/**
-	 * Semi-random, semi-increasing string. Date + rand.
-	 */
-	makeId() {
-		return Date.now() + '-' + String(Math.random()).substring(2, 10);
-	}
-
-	/**
-	 * Throw an error if the note doesn't contain all required fields with the
-	 * required constraints. In this case, id, title, and body must all be
-	 * "truthy" values.
-	 */
-	validate() {
-		if (!(this.id && this.title && this.body)) {
-			throw new Error(
-				"A note must contain a truthy id, title, and body!"
-			);
-		}
-	}
-}
-
-/**
- * The actual API.
- */
-module.exports = {
-	/**
-	 * Adds a new note.
-	 */
-	add: async (note) => {
-	},
-
-	/*
-	 *
-	 */
-	remove: async (id) => {
-	},
-
-	/*
-	 *
-	 */
-	list: async () => {
-	}
-};

package/template/src/build_id.json

@@ -1 +0,0 @@
-"1677445565514"

package/template/src/components/countdown.js

@@ -1,33 +0,0 @@
-const { DomClass } = require('wirejs-dom');
-
-const markup = `<sample:countdown>
-	<h3>Limited time offer!</h3>
-	<div data-id='countdown'>
-		<b>
-			<span data-id='remaining'></span>
-			<span data-id='label'>seconds</span>
-		</b> left!
-	</div>
-</sample:countdown>`;
-
-const Countdown = DomClass(markup, function() {
-	this.remaining = this.from || 60;
-	
-	const tick = () => {
-		this.remaining = this.remaining - 1;
-
-		if (this.remaining == 1) {
-			this.label = 'second';
-		} else if (this.remaining == 0) {
-			this.countdown = '<b>ALL DONE! <i>You missed it!!!</i></b>';
-		}
-
-		if (this.remaining > 0) {
-			setTimeout(() => tick(), 1000);
-		}
-	};
-
-	tick();	
-});
-
-module.exports = Countdown;

package/template/src/layouts/default.js

@@ -1,10 +0,0 @@
-// core deps
-const wirejs = require('wirejs-dom');
-require('highlight.js/styles/github.css');
-require('./default.css');
-
-// expose wirejs to inline scripts
-Object.assign(window, wirejs);
-
-// common components
-require('../components/countdown');

package/template/src/lib/sample-lib.js

@@ -1,8 +0,0 @@
-module.exports = {
-	/**
-	 * Just a small function to demonstrate that API's can `require()`
-	 * things which get included and bundled correctly.
-	 * @returns The string "Hello"
-	 */
-	defaultGreeting: () => "Hello"
-}

package/template/src/routes/html.html

@@ -1,8 +0,0 @@
-${meta({
-	title: "an html page"
-})}
-<p><code>html</code> pages use the default template by default too.</p>
-<p>And, it's important to remember that pages are parsed like
-	<a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals' target='_blank'>template literals</a>
-	<b>at build time</b>.
-</p>

package/template/src/routes/index.md

@@ -1,30 +0,0 @@
-${meta({
-	title: "First Page"
-})}
-
-# markdown!
-
-If all you need is markdown, you can do that!
-
-We can even do code blocks with syntax highlighting.
-
-```js
-const result = getResult();
-```
-
-Or mermaid diagrams:
-
-```mermaid
-graph LR;
-	x --> y(probably y)
-	y --> z(definitely z)
-```
-
-Of course, you can also build [normal html pages](html.html).
-
-And of course, you can also embed HTML with custom components directly in your
-markdown:
-
-<div>
-	<sample:countdown from=10></sample:countdown>
-</div>