orga-build 0.6.1 → 0.6.3

package/cli.js

@@ -2,8 +2,8 @@
 
 import { argv } from 'node:process'
 import { parseArgs } from 'node:util'
-import { loadConfig } from './lib/config.js'
 import { build } from './lib/build.js'
+import { loadConfig } from './lib/config.js'
 import { serve } from './lib/serve.js'
 
 const { positionals } = parseArgs({

package/index.d.ts

@@ -1,3 +1,3 @@
 export { build } from "./lib/build.js";
-export { orgaBuildPlugin, createOrgaBuildConfig, alias } from "./lib/plugin.js";
+export { alias, createOrgaBuildConfig, orgaBuildPlugin } from "./lib/plugin.js";
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,2 +1,2 @@
 export { build } from './lib/build.js'
-export { orgaBuildPlugin, createOrgaBuildConfig, alias } from './lib/plugin.js'
+export { alias, createOrgaBuildConfig, orgaBuildPlugin } from './lib/plugin.js'

package/lib/__tests__/build.test.js

@@ -1,7 +1,7 @@
-import { test, describe, before, after } from 'node:test'
 import assert from 'node:assert'
 import fs from 'node:fs/promises'
 import path from 'node:path'
+import { after, before, describe, test } from 'node:test'
 import { fileURLToPath } from 'node:url'
 import { build } from '../build.js'
 
@@ -27,8 +27,15 @@ Here's [[file:./docs/index.org][index page]].
 Here's [[file:more.org][another page]].
 `
 		)
-		await fs.writeFile(path.join(fixtureDir, 'docs', 'index.org'), 'Docs index page.')
+		await fs.writeFile(
+			path.join(fixtureDir, 'docs', 'index.org'),
+			'Docs index page.'
+		)
 		await fs.writeFile(path.join(fixtureDir, 'more.org'), 'Another page.')
+		await fs.writeFile(
+			path.join(fixtureDir, 'style.css'),
+			'.global-style-marker { color: rgb(1, 2, 3); }'
+		)
 	})
 
 	after(async () => {
@@ -58,7 +65,10 @@ Here's [[file:more.org][another page]].
 		const html = await fs.readFile(indexPath, 'utf-8')
 		assert.ok(html.includes('<title>Test Page</title>'), 'should have title')
 		assert.ok(html.includes('Hello World'), 'should have heading content')
-		assert.ok(html.includes('href="/docs"'), 'should rewrite docs/index.org to /docs')
+		assert.ok(
+			html.includes('href="/docs"'),
+			'should rewrite docs/index.org to /docs'
+		)
 		assert.ok(html.includes('href="/more"'), 'should rewrite more.org to /more')
 	})
 
@@ -70,4 +80,35 @@ Here's [[file:more.org][another page]].
 			.catch(() => false)
 		assert.ok(assetsExists, 'assets directory should exist')
 	})
+
+	test('processes configured global styles through vite and injects built css', async () => {
+		await build({
+			root: fixtureDir,
+			outDir: outDir,
+			containerClass: [],
+			styles: ['/style.css'],
+			vitePlugins: [],
+			preBuild: [],
+			postBuild: []
+		})
+
+		const html = await fs.readFile(path.join(outDir, 'index.html'), 'utf-8')
+		assert.ok(
+			!html.includes('href="/style.css"'),
+			'should not link raw source css path'
+		)
+
+		const cssHrefMatch = html.match(/href="\/(assets\/[^"]+\.css)"/)
+		assert.ok(
+			cssHrefMatch,
+			'should link built css asset from assets with hashed name'
+		)
+
+		const builtCssPath = cssHrefMatch[1]
+		const builtCss = await fs.readFile(path.join(outDir, builtCssPath), 'utf-8')
+		assert.ok(
+			builtCss.includes('.global-style-marker'),
+			'built css should include configured global style content'
+		)
+	})
 })

package/lib/app.jsx

@@ -1,7 +1,7 @@
-import pages from '/@orga-build/pages'
-import layouts from '/@orga-build/layouts'
+import { Link, Route, Switch } from 'wouter'
 import * as components from '/@orga-build/components'
-import { Route, Switch, Link } from 'wouter'
+import layouts from '/@orga-build/layouts'
+import pages from '/@orga-build/pages'
 
 export function App() {
 	const _pages = Object.entries(pages).map(([path, page]) => {
@@ -15,7 +15,9 @@ export function App() {
 		const layoutIds = Object.keys(layouts)
 			.filter((key) => path.startsWith(key))
 			.sort((a, b) => -a.localeCompare(b))
-		let element = <page.default components={{ ...components, Link, a: Link }} />
+		let element = (
+			<page.default key={path} components={{ ...components, Link, a: Link }} />
+		)
 		for (const layoutId of layoutIds) {
 			const Layout = layouts[layoutId]
 			element = (

package/lib/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["build.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,6EAHW,OAAO,aAAa,EAAE,MAAM,gBAC5B,MAAM,iBAoJhB;;sBAhK4C,aAAa"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["build.js"],"names":[],"mappings":"AAeA;;;GAGG;AACH,6EAHW,OAAO,aAAa,EAAE,MAAM,gBAC5B,MAAM,iBAsJhB;;sBAlK4C,aAAa"}

package/lib/build.js

@@ -1,29 +1,26 @@
+import fs from 'node:fs/promises'
 import path from 'node:path'
-import { createBuilder } from 'vite'
 import { fileURLToPath, pathToFileURL } from 'node:url'
+import { createBuilder } from 'vite'
 import { emptyDir, ensureDir, exists } from './fs.js'
-import fs from 'fs/promises'
-import { createOrgaBuildConfig, alias } from './plugin.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 clientEntry = fileURLToPath(new URL('./client.jsx', import.meta.url))
 const defaultIndexHtml = fileURLToPath(new URL('./index.html', import.meta.url))
 
 /**
  * @param {import('./config.js').Config} config
  * @param {string} [projectRoot]
  */
-export async function build({
-	outDir,
-	root,
-	containerClass,
-	styles = [],
-	vitePlugins = []
-}, projectRoot = process.cwd()) {
+export async function build(
+	{ outDir, root, containerClass, styles = [], vitePlugins = [] },
+	projectRoot = process.cwd()
+) {
 	await emptyDir(outDir)
 	const ssrOutDir = path.join(outDir, '.ssr')
 	const clientOutDir = outDir
@@ -66,7 +63,7 @@ export async function build({
 					emptyOutDir: false,
 					assetsDir: 'assets',
 					rollupOptions: {
-						input: clientEntry,
+						input: appEntryId,
 						preserveEntrySignatures: 'allow-extension'
 					}
 				}
@@ -105,7 +102,9 @@ export async function build({
 	/* --- 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 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)
@@ -144,7 +143,10 @@ export async function build({
 		`
 		)
 		const css = cssChunks
-			.map((/** @type {any} */ c) => `<link rel="stylesheet" href="/${c.fileName}">`)
+			.map(
+				(/** @type {any} */ c) =>
+					`<link rel="stylesheet" href="/${c.fileName}">`
+			)
 			.join('\n')
 		html = html.replace(
 			'<script type="module" src="/@orga-build/main.js"></script>',
@@ -153,7 +155,7 @@ export async function build({
 
 		html = html.replace('</head>', `${css}</head>`)
 
-			const page = pages[pagePath]
+		const page = pages[pagePath]
 		if (page) {
 			html = html.replace(/%orga\.(\w+)%/g, (_, key) => {
 				const value = page[key] ?? ''

package/lib/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["config.js"],"names":[],"mappings":"AAyBA;;;GAGG;AACH,qCAHW,MAAM,EAAE,GACN,OAAO,CAAC;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CA6C5D;;YAnEa,MAAM;UACN,MAAM;cACN,MAAM,EAAE;eACR,MAAM,EAAE;;;;iBACR,OAAO,MAAM,EAAE,YAAY,EAAE;oBAC7B,MAAM,EAAE,GAAC,MAAM;;;;aACf,MAAM,EAAE"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["config.js"],"names":[],"mappings":"AAyBA;;;GAGG;AACH,qCAHW,MAAM,EAAE,GACN,OAAO,CAAC;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,CA+C5D;;YArEa,MAAM;UACN,MAAM;cACN,MAAM,EAAE;eACR,MAAM,EAAE;;;;iBACR,OAAO,MAAM,EAAE,YAAY,EAAE;oBAC7B,MAAM,EAAE,GAAC,MAAM;;;;aACf,MAAM,EAAE"}

package/lib/config.js

@@ -65,7 +65,9 @@ export async function loadConfig(...files) {
 	result.root = resolveConfigPath(result.root)
 	result.outDir = resolveConfigPath(result.outDir)
 	const styles = result.styles
-	result.styles = Array.isArray(styles) ? styles.filter((v) => typeof v === 'string') : []
+	result.styles = Array.isArray(styles)
+		? styles.filter((v) => typeof v === 'string')
+		: []
 	return {
 		config: result,
 		projectRoot: configPath ? path.dirname(configPath) : cwd

package/lib/csr.jsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { App } from './app.jsx'
 import { Router } from 'wouter'
+import { App } from './app.jsx'
 
 const container = document.getElementById('root')
 const root = createRoot(container)

package/lib/files.js

@@ -1,6 +1,6 @@
-import { globby } from 'globby'
-import path from 'node:path'
 import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import { globby } from 'globby'
 import { getSettings } from 'orga'
 
 /**
@@ -64,7 +64,7 @@ function getContentPath(slug) {
  */
 function getContentId(slug) {
 	// Remove leading and trailing slashes
-	let normalized = slug.replace(/^\/+/, '').replace(/\/+$/, '')
+	const normalized = slug.replace(/^\/+/, '').replace(/\/+$/, '')
 
 	// If root page, return 'index'
 	if (!normalized) {

package/lib/fs.js

@@ -1,4 +1,4 @@
-import fs from 'fs/promises'
+import fs from 'node:fs/promises'
 import path from 'node:path'
 
 /**

package/lib/orga.js

@@ -39,7 +39,8 @@ function mediaAssets() {
 			if (typeof src !== 'string') return
 			if (src.startsWith('http')) return
 			const tagName = node.tagName
-			const name = (imports[src] ??= `asset_${genId()}`)
+			if (!imports[src]) imports[src] = `asset_${genId()}`
+			const name = imports[src]
 			const attrs = Object.entries(rest)
 				.filter(([, v]) => v !== undefined && v !== false)
 				.map(([k, v]) => (v === true ? k : `${k}='${v}'`))
@@ -80,7 +81,7 @@ function rehypeWrap({ className = [] }) {
 					properties: {
 						className
 					},
-					// @ts-ignore
+					// @ts-expect-error
 					children: tree.children
 				}
 			]
@@ -131,7 +132,10 @@ function resolveOrgHrefToContentSlug({ root, filePath, href }) {
 		: path.resolve(path.dirname(filePath), decodedHrefPath)
 
 	const relativeTargetPath = path.relative(root, absoluteTargetPath)
-	if (relativeTargetPath.startsWith('..') || path.isAbsolute(relativeTargetPath)) {
+	if (
+		relativeTargetPath.startsWith('..') ||
+		path.isAbsolute(relativeTargetPath)
+	) {
 		return null
 	}
 

package/lib/plugin.js

@@ -1,12 +1,12 @@
-import path from 'node:path'
 import fs from 'node:fs/promises'
 import { createRequire } from 'node:module'
+import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { createServerModuleRunner } from 'vite'
 import react from '@vitejs/plugin-react'
+import { createServerModuleRunner } from 'vite'
 import { setupOrga } from './orga.js'
-import { pluginFactory } from './vite.js'
 import { escapeHtml } from './util.js'
+import { pluginFactory } from './vite.js'
 
 const ssrEntry = fileURLToPath(new URL('./ssr.jsx', import.meta.url))
 

package/lib/serve.js

@@ -1,6 +1,6 @@
 import path from 'node:path'
 import { createServer } from 'vite'
-import { createOrgaBuildConfig, alias } from './plugin.js'
+import { alias, createOrgaBuildConfig } from './plugin.js'
 
 /**
  * Start the development server using native Vite.
@@ -38,7 +38,7 @@ export async function serve(config, port = 3000, projectRoot = process.cwd()) {
 			port,
 			strictPort: false,
 			watch: {
-				ignored: [path.resolve(config.outDir) + '/**']
+				ignored: [`${path.resolve(config.outDir)}/**`]
 			}
 		}
 	})

package/lib/ssr.jsx

@@ -1,7 +1,7 @@
-import pages from '/@orga-build/pages'
 import { renderToString } from 'react-dom/server'
-import { App } from './app.jsx'
 import { Router } from 'wouter'
+import pages from '/@orga-build/pages'
+import { App } from './app.jsx'
 
 export { pages }
 

package/lib/vite.d.ts

@@ -10,4 +10,5 @@ export function pluginFactory({ dir, outDir, styles }: {
     outDir?: string | undefined;
     styles?: string[] | undefined;
 }): import("vite").Plugin;
+export const appEntryId: "/@orga-build/main.js";
 //# sourceMappingURL=vite.d.ts.map

package/lib/vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["vite.js"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,uDALG;IAAwB,GAAG,EAAnB,MAAM;IACW,MAAM;IACJ,MAAM;CACjC,GAAU,OAAO,MAAM,EAAE,MAAM,CA8JjC"}
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["vite.js"],"names":[],"mappings":"AASA;;;;;;GAMG;AACH,uDALG;IAAwB,GAAG,EAAnB,MAAM;IACW,MAAM;IACJ,MAAM;CACjC,GAAU,OAAO,MAAM,EAAE,MAAM,CA8JjC;AAvKD,gDAAuD"}

package/lib/vite.js

@@ -1,11 +1,11 @@
-import { setup } from './files.js'
 import path from 'node:path'
+import { setup } from './files.js'
 
 const magicModulePrefix = '/@orga-build/'
-const pagesModuleId = magicModulePrefix + 'pages'
-const appEntryId = `${magicModulePrefix}main.js`
+const pagesModuleId = `${magicModulePrefix}pages`
+export const appEntryId = `${magicModulePrefix}main.js`
 const contentModuleId = 'orga-build:content'
-const contentModuleIdResolved = '\0' + contentModuleId
+const contentModuleIdResolved = `\0${contentModuleId}`
 
 /**
  * @param {Object} options
@@ -20,7 +20,7 @@ export function pluginFactory({ dir, outDir, styles = [] }) {
 	return {
 		name: 'vite-plugin-orga-pages',
 		enforce: 'pre',
-		config: (config, env) => ({
+		config: (_config, _env) => ({
 			future: {
 				removePluginHookSsrArgument: 'warn',
 				removePluginHookHandleHotUpdate: 'warn',
@@ -50,7 +50,7 @@ export function pluginFactory({ dir, outDir, styles = [] }) {
 			}
 		},
 
-		async resolveId(id, importer) {
+		async resolveId(id, _importer) {
 			if (id === appEntryId) {
 				return appEntryId
 			}
@@ -75,7 +75,7 @@ export function pluginFactory({ dir, outDir, styles = [] }) {
 				return await renderPageList()
 			}
 			if (id.startsWith(pagesModuleId)) {
-				let pageId = id.replace(pagesModuleId, '')
+				const pageId = id.replace(pagesModuleId, '')
 				const page = await files.page(pageId)
 				if (page) {
 					return `
@@ -111,7 +111,7 @@ export default layouts;
 		const pages = await files.pages()
 		/** @type {string[]} */ const _imports = []
 		/** @type {string[]} */ const _pages = []
-		Object.entries(pages).forEach(([pageId, value], i) => {
+		Object.entries(pages).forEach(([pageId, _value], i) => {
 			const dataModulePath = path.join(magicModulePrefix, 'pages', pageId)
 			_imports.push(`import * as page${i} from '${dataModulePath}'`)
 			_pages.push(`pages['${pageId}'] = page${i}`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orga-build",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "A simple tool that builds org-mode files into a website",
   "type": "module",
   "engines": {
@@ -51,14 +51,14 @@
     "unist-util-visit-parents": "^6.0.1",
     "vite": "^7.3.1",
     "wouter": "^3.7.0",
-    "@orgajs/rollup": "1.3.3"
+    "@orgajs/rollup": "1.3.4"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",
     "@types/node": "^22.13.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
-    "orga": "4.6.0"
+    "orga": "4.7.1"
   },
   "scripts": {
     "clean": "fd . -e d.ts -e d.ts.map -I -x rm {}",

package/lib/client.jsx

@@ -1,12 +0,0 @@
-import { hydrateRoot } from 'react-dom/client'
-import { Router } from 'wouter'
-import { App } from './app.jsx'
-
-const ssr = window._ssr
-
-hydrateRoot(
-	document.getElementById('root'),
-	<Router>
-		<App />
-	</Router>
-)