orga-build 0.9.0 → 0.10.0

package/lib/__tests__/dev.test.js

@@ -0,0 +1,295 @@
+import assert from 'node:assert'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { describe, test } from 'node:test'
+import { fileURLToPath } from 'node:url'
+import { createServer } from 'vite'
+import { orgaBuildPlugin } from '../plugin.js'
+import { writeIslandFixture } from './fixtures.js'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// Separate from the build tests: a Vite build sets NODE_ENV=production for the
+// process, which makes React's dev JSX runtime unusable in a dev server after it.
+describe('orga-build dev', () => {
+	test('serves islands in dev under the configured base', async () => {
+		const dir = path.join(__dirname, 'fixtures-dev')
+		await writeIslandFixture(dir)
+		const server = await createServer({
+			root: dir,
+			configFile: false,
+			logLevel: 'silent',
+			base: '/site/',
+			server: { port: 5179 },
+			plugins: orgaBuildPlugin({ root: dir })
+		})
+		try {
+			await server.listen()
+			const pageUrl = new URL(server.resolvedUrls?.local[0] ?? '')
+			const html = await (
+				await fetch(pageUrl, { headers: { accept: 'text/html' } })
+			).text()
+			const islandSrc = html.match(/<orga-island [^>]*src="([^"]+)"/)?.[1] ?? ''
+			const script =
+				html.match(/<script type="module" src="([^"]*island[^"]*\.js)"/)?.[1] ??
+				''
+			assert.equal(islandSrc, '/site/_components.tsx', html)
+			assert.equal(script, '/site/@orga-build/islands.js')
+			const nested = await (
+				await fetch(new URL('docs/', pageUrl), {
+					headers: { accept: 'text/html' }
+				})
+			).text()
+			assert.match(nested, /client="visible"/, 'trailing slash finds the page')
+			const missing = await fetch(new URL('nope', pageUrl), {
+				headers: { accept: 'text/html' }
+			})
+			assert.equal(missing.status, 404, 'unknown routes are not rendered')
+			for (const [url, marker] of [
+				[islandSrc, 'Counter'],
+				[script, 'hydrateRoot']
+			]) {
+				const response = await fetch(new URL(url, pageUrl))
+				assert.equal(response.status, 200, url)
+				assert.ok((await response.text()).includes(marker), url)
+			}
+		} finally {
+			await server.close()
+			await fs.rm(dir, { recursive: true, force: true })
+		}
+	})
+
+	test('serves draft pages for preview', async () => {
+		const dir = path.join(__dirname, 'fixtures-dev-drafts')
+		await fs.mkdir(dir, { recursive: true })
+		await fs.writeFile(path.join(dir, 'draft.org'), '#+draft: t\n\nWIP')
+		const server = await createServer({
+			root: dir,
+			configFile: false,
+			logLevel: 'silent',
+			server: { port: 5181 },
+			plugins: orgaBuildPlugin({ root: dir })
+		})
+		try {
+			await server.listen()
+			const url = new URL('draft', server.resolvedUrls?.local[0])
+			const html = await (
+				await fetch(url, { headers: { accept: 'text/html' } })
+			).text()
+			assert.ok(html.includes('WIP'), html)
+		} finally {
+			await server.close()
+			await fs.rm(dir, { recursive: true, force: true })
+		}
+	})
+
+	test('links page CSS and reloads the browser on server-rendered edits', async () => {
+		const dir = path.join(__dirname, 'fixtures-dev-reload')
+		await fs.mkdir(dir, { recursive: true })
+		await fs.writeFile(path.join(dir, 'index.org'), '#+title: Home\n\nfirst\n')
+		await fs.writeFile(path.join(dir, 'page.css'), '.page { color: red }\n')
+		await fs.writeFile(
+			path.join(dir, 'page.tsx'),
+			`import './page.css'
+export default function Page() {
+	return <p className="page">hi</p>
+}
+`
+		)
+		const server = await createServer({
+			root: dir,
+			configFile: false,
+			logLevel: 'silent',
+			server: { port: 5180 },
+			plugins: orgaBuildPlugin({ root: dir })
+		})
+		try {
+			await server.listen()
+			const pageUrl = new URL(server.resolvedUrls?.local[0] ?? '')
+			const get = async (url = '') =>
+				(
+					await fetch(new URL(url, pageUrl), {
+						headers: { accept: 'text/html' }
+					})
+				).text()
+
+			const page = await get('page')
+			assert.match(page, /<link rel="stylesheet" href="\/page\.css">/)
+			const css = await fetch(new URL('page.css', pageUrl), {
+				headers: { accept: 'text/css' }
+			})
+			assert.ok((await css.text()).includes('.page'))
+
+			/** @type {unknown[]} */
+			const sent = []
+			server.environments.client.hot.send = (/** @type {any} */ payload) => {
+				sent.push(payload)
+			}
+			await fs.writeFile(
+				path.join(dir, 'index.org'),
+				'#+title: Home\n\nsecond\n'
+			)
+			for (let i = 0; i < 50 && !sent.length; i++) {
+				await new Promise((resolve) => setTimeout(resolve, 100))
+			}
+			assert.ok(
+				sent.some(
+					(payload) => /** @type {any} */ (payload).type === 'full-reload'
+				),
+				'browser is told to reload'
+			)
+			assert.ok(
+				(await get()).includes('second'),
+				'next request renders the edit'
+			)
+		} finally {
+			await server.close()
+			await fs.rm(dir, { recursive: true, force: true })
+		}
+	})
+
+	test('picks up added, renamed and deleted pages', async () => {
+		const site = await startSite('fixtures-dev-pages', 5181, {
+			'index.org': '#+title: Home\n\nhome\n'
+		})
+		try {
+			await site.write('new.org', '#+title: New\n\nfresh page\n')
+			await site.until('new', (html) => html.includes('fresh page'))
+
+			await site.rename('new.org', 'renamed.org')
+			await site.until('renamed', (html) => html.includes('fresh page'))
+			await site.until('new', (html) => !html.includes('fresh page'))
+
+			// A conflicting route is an error response; the server keeps running.
+			await site.write('renamed.tsx', 'export default () => <p>tsx</p>\n')
+			await site.until(
+				'renamed',
+				(html, status) => status === 500 && html.includes('Route conflict')
+			)
+			await site.remove('renamed.tsx')
+			await site.until('renamed', (html) => html.includes('fresh page'))
+
+			await site.remove('renamed.org')
+			await site.until('renamed', (html) => !html.includes('fresh page'))
+			assert.ok((await site.get()).html.includes('home'))
+		} finally {
+			await site.close()
+		}
+	})
+
+	test('picks up added, edited and deleted layouts and components', async () => {
+		const site = await startSite('fixtures-dev-layout', 5182, {
+			'index.org': '#+title: Home\n\nhome\n',
+			'greet.org': '#+title: Greet\n\n#+jsx: <Greeting />\n'
+		})
+		const layout = (/** @type {string} */ name) =>
+			`export default function Layout({ children }) {
+	return <main className="${name}">{children}</main>
+}
+`
+		const greeting = (/** @type {string} */ text) =>
+			`export function Greeting() {
+	return <b>${text}</b>
+}
+`
+		try {
+			await site.write('_layout.tsx', layout('first'))
+			await site.until('', (html) => html.includes('<main class="first">'))
+			await site.write('_layout.tsx', layout('second'))
+			await site.until('', (html) => html.includes('<main class="second">'))
+			await site.remove('_layout.tsx')
+			await site.until('', (html) => !html.includes('<main'))
+
+			await site.write('_components.tsx', greeting('hello'))
+			await site.until('greet', (html) => html.includes('<b>hello</b>'))
+			await site.write('_components.tsx', greeting('bye'))
+			await site.until('greet', (html) => html.includes('<b>bye</b>'))
+			await site.remove('_components.tsx')
+			await site.until(
+				'',
+				(html, status) => status === 200 && html.includes('home')
+			)
+		} finally {
+			await site.close()
+		}
+	})
+
+	test('getPages reflects metadata edits', async () => {
+		const site = await startSite('fixtures-dev-content', 5183, {
+			'post.org': '#+title: First\n\npost\n',
+			'list.tsx': `import { getPages } from 'orga-build:content'
+export default function List() {
+	return <ul>{getPages().map((p) => <li key={p.slug}>{String(p.data.title)}</li>)}</ul>
+}
+`
+		})
+		try {
+			await site.until('list', (html) => html.includes('<li>First</li>'))
+			await site.write('post.org', '#+title: Second\n\npost\n')
+			await site.until('list', (html) => html.includes('<li>Second</li>'))
+			await site.write('other.org', '#+title: Other\n')
+			await site.until('list', (html) => html.includes('<li>Other</li>'))
+		} finally {
+			await site.close()
+		}
+	})
+})
+
+/**
+ * Starts a dev server on a fresh fixture directory.
+ * @param {string} name
+ * @param {number} port
+ * @param {Record<string, string>} initial - file contents by relative path
+ */
+async function startSite(name, port, initial) {
+	const dir = path.join(__dirname, name)
+	await fs.rm(dir, { recursive: true, force: true })
+	await fs.mkdir(dir, { recursive: true })
+	for (const [file, content] of Object.entries(initial)) {
+		await fs.writeFile(path.join(dir, file), content)
+	}
+	const server = await createServer({
+		root: dir,
+		configFile: false,
+		logLevel: 'silent',
+		server: { port },
+		plugins: orgaBuildPlugin({ root: dir })
+	})
+	await server.listen()
+	const pageUrl = new URL(server.resolvedUrls?.local[0] ?? '')
+
+	async function get(url = '') {
+		const response = await fetch(new URL(url, pageUrl), {
+			headers: { accept: 'text/html' }
+		})
+		return { status: response.status, html: await response.text() }
+	}
+
+	return {
+		get,
+		/** @param {string} file @param {string} content */
+		write: (file, content) => fs.writeFile(path.join(dir, file), content),
+		/** @param {string} file */
+		remove: (file) => fs.rm(path.join(dir, file)),
+		/** @param {string} from @param {string} to */
+		rename: (from, to) => fs.rename(path.join(dir, from), path.join(dir, to)),
+		/**
+		 * Polls `url` until `check` passes, as a browser would after reloading.
+		 * @param {string} url
+		 * @param {(html: string, status: number) => boolean} check
+		 */
+		async until(url, check) {
+			let last = { status: 0, html: '' }
+			for (let i = 0; i < 50; i++) {
+				last = await get(url)
+				if (check(last.html, last.status)) return
+				await new Promise((resolve) => setTimeout(resolve, 100))
+			}
+			assert.fail(`/${url} never matched; last ${last.status}:\n${last.html}`)
+		},
+		async close() {
+			await server.close()
+			await fs.rm(dir, { recursive: true, force: true })
+		}
+	}
+}

package/lib/__tests__/fixtures.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A site with a `'use client'` component used from org pages: `/` hydrates it
+ * on load, `/docs` when visible (plus a `memo()` export), and `/plain` has no
+ * island. `/page` is a whole-page island.
+ * @param {string} dir
+ */
+export function writeIslandFixture(dir: string): Promise<void>;
+//# sourceMappingURL=fixtures.d.ts.map

package/lib/__tests__/fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["fixtures.js"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,wCAFW,MAAM,iBAqDhB"}

package/lib/__tests__/fixtures.js

@@ -0,0 +1,61 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+/**
+ * A site with a `'use client'` component used from org pages: `/` hydrates it
+ * on load, `/docs` when visible (plus a `memo()` export), and `/plain` has no
+ * island. `/page` is a whole-page island.
+ * @param {string} dir
+ */
+export async function writeIslandFixture(dir) {
+	await fs.mkdir(path.join(dir, 'docs'), { recursive: true })
+	await fs.writeFile(
+		path.join(dir, '_components.tsx'),
+		`'use client'
+import { memo, useId } from 'react'
+import { useCounter } from './_hooks'
+
+export function Counter({ start }: { start: number }) {
+	const [count, setCount] = useCounter(start)
+	return (
+		<button id={useId()} onClick={() => setCount(count + 1)}>
+			{count}
+		</button>
+	)
+}
+
+export const MemoCounter = memo(Counter)
+`
+	)
+	await fs.writeFile(
+		path.join(dir, 'index.org'),
+		'#+title: Home\n\n#+jsx: <Counter start={1} />\n'
+	)
+	await fs.writeFile(
+		path.join(dir, 'docs', 'index.org'),
+		'#+title: Docs\n\n#+jsx: <Counter start={2} client="visible" />\n\n#+jsx: <MemoCounter start={3} meta={{ children: ["a"], skipped: undefined }} />\n\n[[../pic.png]]\n'
+	)
+	// Larger than Vite's inline limit, so it is emitted as a file.
+	await fs.writeFile(path.join(dir, 'pic.png'), Buffer.alloc(8192, 1))
+	// A hook imported from one 'use client' module into another must stay a hook.
+	await fs.writeFile(
+		path.join(dir, '_hooks.tsx'),
+		`'use client'
+import { useState } from 'react'
+
+export function useCounter(start: number) {
+	return useState(start)
+}
+`
+	)
+	await fs.writeFile(path.join(dir, 'plain.org'), '#+title: Plain\n\nText.\n')
+	await fs.writeFile(
+		path.join(dir, 'page.tsx'),
+		`'use client'
+export const title = 'Page'
+export default function Page() {
+	return <button onClick={() => alert('hi')}>page</button>
+}
+`
+	)
+}

package/lib/app.jsx

@@ -1,56 +1,29 @@
-import { Link, Route, Switch } from 'wouter'
-import * as components from '/@orga-build/components'
 import layouts from '/@orga-build/layouts'
 import pages from '/@orga-build/pages'
 
-function SmartLink({ href, ...props }) {
-	if (!href || /^([a-z][a-z\d+\-.]*:|\/\/)/i.test(href)) {
-		return <a href={href} {...props} />
-	}
-	return <Link href={href} {...props} />
-}
-
-export function App() {
-	const _pages = Object.entries(pages).map(([path, page]) => {
-		return {
-			slug: path,
-			...page
-		}
-	})
+/**
+ * The page at `path`, wrapped in every `_layout` above it.
+ *
+ * @param {{ path: string }} props
+ */
+export function App({ path }) {
+	const page = pages[path]
+	const _pages = Object.entries(pages).map(([slug, page]) => ({
+		slug,
+		...page
+	}))
 
-	const pageRoutes = Object.entries(pages).map(([path, page]) => {
-		const layoutIds = Object.keys(layouts)
-			.filter((key) => path.startsWith(key))
-			.sort((a, b) => -a.localeCompare(b))
-		let element = (
-			<page.default
-				key={path}
-				components={{ ...components, Link, a: SmartLink }}
-			/>
+	let element = <page.default />
+	const layoutIds = Object.keys(layouts)
+		.filter((key) => path.startsWith(key))
+		.sort((a, b) => -a.localeCompare(b))
+	for (const layoutId of layoutIds) {
+		const Layout = layouts[layoutId]
+		element = (
+			<Layout title={page.title} slug={path} pages={_pages} {...page}>
+				{element}
+			</Layout>
 		)
-		for (const layoutId of layoutIds) {
-			const Layout = layouts[layoutId]
-			element = (
-				<Layout title={page.title} slug={path} pages={_pages} {...page}>
-					{element}
-				</Layout>
-			)
-		}
-		return {
-			path,
-			element
-		}
-	})
-
-	return (
-		<Switch>
-			{pageRoutes.map((route) => {
-				return (
-					<Route key={`r-${route.path}`} path={route.path}>
-						{route.element}
-					</Route>
-				)
-			})}
-		</Switch>
-	)
+	}
+	return element
 }

package/lib/build.d.ts

@@ -1,8 +1,11 @@
 /**
+ * Build the site into `outDir`. The work happens in Vite's `buildApp`, see
+ * `prerenderPlugin`.
+ *
  * @param {import('./config.js').Config} config
  * @param {string} [projectRoot]
  */
-export function build({ outDir, root, containerClass, styles, rehypePlugins, vitePlugins, exclude }: import("./config.js").Config, projectRoot?: string): Promise<void>;
+export function build({ outDir, root, containerClass, styles, rehypePlugins, vitePlugins, exclude, site }: import("./config.js").Config, projectRoot?: string): Promise<void>;
 export { alias };
 import { alias } from './plugin.js';
 //# sourceMappingURL=build.d.ts.map

package/lib/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["build.js"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,qGAHW,OAAO,aAAa,EAAE,MAAM,gBAC5B,MAAM,iBA0LhB;;sBAtM4C,aAAa"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["build.js"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,2GAHW,OAAO,aAAa,EAAE,MAAM,gBAC5B,MAAM,iBA4BhB;;sBAtC4C,aAAa"}

package/lib/build.js

@@ -1,20 +1,13 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { fileURLToPath, pathToFileURL } from 'node:url'
 import { createBuilder } from 'vite'
-import { resolveEndpointResponse } from './endpoint.js'
-import { emptyDir, ensureDir, exists } from './fs.js'
 import { alias, createOrgaBuildConfig } from './plugin.js'
-import { escapeHtml } from './util.js'
-import { appEntryId } from './vite.js'
 
 // Re-export alias for backwards compatibility
 export { alias }
 
-const ssrEntry = fileURLToPath(new URL('./ssr.jsx', import.meta.url))
-const defaultIndexHtml = fileURLToPath(new URL('./index.html', import.meta.url))
-
 /**
+ * Build the site into `outDir`. The work happens in Vite's `buildApp`, see
+ * `prerenderPlugin`.
+ *
  * @param {import('./config.js').Config} config
  * @param {string} [projectRoot]
  */
@@ -26,180 +19,22 @@ export async function build(
 		styles = [],
 		rehypePlugins = [],
 		vitePlugins = [],
-		exclude = []
+		exclude = [],
+		site
 	},
 	projectRoot = process.cwd()
 ) {
-	await emptyDir(outDir)
-	const ssrOutDir = path.join(outDir, '.ssr')
-	const clientOutDir = outDir
-
-	const { plugins, resolve } = createOrgaBuildConfig({
+	const { plugins } = createOrgaBuildConfig({
 		root,
 		outDir,
 		containerClass,
 		styles,
 		rehypePlugins,
 		vitePlugins,
-		exclude
+		exclude,
+		site
 	})
 
-	// Shared config with environment-specific build settings
-	const builder = await createBuilder({
-		plugins,
-		resolve,
-		ssr: { noExternal: true },
-		environments: {
-			ssr: {
-				build: {
-					ssr: true,
-					outDir: ssrOutDir,
-					cssCodeSplit: false,
-					emptyOutDir: true,
-					minify: false,
-					rollupOptions: {
-						input: ssrEntry,
-						output: {
-							entryFileNames: '[name].mjs',
-							chunkFileNames: '[name]-[hash].mjs'
-						}
-					}
-				}
-			},
-			client: {
-				build: {
-					outDir: clientOutDir,
-					cssCodeSplit: false,
-					emptyOutDir: false,
-					assetsDir: 'assets',
-					rollupOptions: {
-						input: appEntryId,
-						preserveEntrySignatures: 'allow-extension'
-					}
-				}
-			}
-		}
-	})
-
-	// Build SSR first to get render function and pages
-	console.log('preparing ssr bundle...')
-	await builder.build(builder.environments.ssr)
-
-	const {
-		render,
-		pages,
-		endpoints = {}
-	} = await import(pathToFileURL(path.join(ssrOutDir, 'ssr.mjs')).toString())
-
-	// Build client bundle
-	const _clientResult = await builder.build(builder.environments.client)
-
-	// Normalize build result to single RollupOutput
-	const clientOutput = Array.isArray(_clientResult)
-		? _clientResult[0].output
-		: 'output' in _clientResult
-			? _clientResult.output
-			: null
-	if (!clientOutput) throw new Error('Unexpected client build result')
-
-	/* --- get from client bundle result: entry chunk, css chunks --- */
-	const entryChunk = clientOutput.find(
-		(/** @type {any} */ c) => c.type === 'chunk' && c.isEntry
-	)
-
-	const cssChunks = clientOutput.filter(
-		(/** @type {any} */ c) => c.type === 'asset' && c.fileName.endsWith('.css')
-	)
-
-	/* --- get html template, inject entry js and css --- */
-	// Check for user's index.html in project root, otherwise use default
-	const userIndexPath = path.join(projectRoot, 'index.html')
-	const indexHtmlPath = (await exists(userIndexPath))
-		? userIndexPath
-		: defaultIndexHtml
-	const template = await fs.readFile(indexHtmlPath, { encoding: 'utf-8' })
-	/* --- for each page path, render html using render function from ssr bundle, and inject the right css  --- */
-	const pagePaths = Object.keys(pages)
-	await Promise.all(
-		pagePaths.map(async (pagePath) => {
-			const html = renderHTML(pagePath)
-			const writePath = path.join(
-				clientOutDir,
-				pagePath.replace(/^\//, ''),
-				'index.html'
-			)
-			await ensureDir(path.dirname(writePath))
-			await fs.writeFile(writePath, html)
-		})
-	)
-
-	const endpointPaths = Object.keys(endpoints)
-	await Promise.all(
-		endpointPaths.map(async (route) => {
-			const endpointModule = endpoints[route]
-			const ctx = {
-				url: new URL(`http://localhost${route}`),
-				params: {},
-				mode: /** @type {'build'} */ ('build'),
-				route: { route }
-			}
-
-			const response = await resolveEndpointResponse(endpointModule, ctx, 'GET')
-			if (response.status < 200 || response.status >= 300) {
-				throw new Error(
-					`Endpoint route "${route}" returned non-2xx status during build: ${response.status}`
-				)
-			}
-
-			const bytes = Buffer.from(await response.arrayBuffer())
-			const writePath = path.join(clientOutDir, route.replace(/^\//, ''))
-			await ensureDir(path.dirname(writePath))
-			await fs.writeFile(writePath, bytes)
-		})
-	)
-
-	await fs.rm(ssrOutDir, { recursive: true })
-
-	return
-
-	// ---------- the end ----------
-
-	/**
-	 * @param {string} pagePath
-	 */
-	function renderHTML(pagePath) {
-		const content = render(pagePath)
-		const ssr = {
-			routePath: pagePath
-		}
-		let html = template.replace(
-			'<div id="root"></div>',
-			`
-		<script>window._ssr=${JSON.stringify(ssr)};</script>
-		<div id="root">${content}</div>
-		`
-		)
-		const css = cssChunks
-			.map(
-				(/** @type {any} */ c) =>
-					`<link rel="stylesheet" href="/${c.fileName}">`
-			)
-			.join('\n')
-		html = html.replace(
-			'<script type="module" src="/@orga-build/main.js"></script>',
-			`<script type="module" src="/${entryChunk?.fileName}"></script>`
-		)
-
-		html = html.replace('</head>', `${css}</head>`)
-
-		const page = pages[pagePath]
-		if (page) {
-			html = html.replace(/%orga\.(\w+)%/g, (_, key) => {
-				const value = page[key] ?? ''
-				return escapeHtml(String(value))
-			})
-		}
-
-		return html
-	}
+	const builder = await createBuilder({ root: projectRoot, plugins })
+	await builder.buildApp()
 }