[orga-build] fix react resolve issue (#256)

* [orga-build] fix resolve react/jsx-runtime issue

* remove packageManager

* ignore .orga-build folder

* [orga-build] tidy up

* add option to custom href in oast-to-hast

* add orga-build example

* add changeset

* fix tests

Author: xiaoxinghu

.changeset/many-monkeys-retire.md

@@ -0,0 +1,6 @@
+---
+'oast-to-hast': patch
+'orga-build': patch
+---
+
+fix react resolve issue

.gitignore

@@ -105,3 +105,6 @@ dist
 *.d.ts.map
 !packages/reorg-parse/index.d.ts
 !packages/loader/index.d.ts
+
+.meta.json
+.orga-build

examples/build/index.org

@@ -0,0 +1,11 @@
+#+title: Build with Orga
+
+* Hi
+
+You can build a static website with *just* org files.
+
+Here's [[file:more.org][another page]].
+
+#+begin_src sh
+orga-build
+#+end_src

examples/build/more.org

@@ -0,0 +1,3 @@
+#+title: Another Page
+
+This is another page.

examples/build/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "@orgajs/example-build",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "orga-build dev",
+		"build": "orga-build"
+	},
+	"devDependencies": {
+		"orga-build": "workspace:^"
+	}
+}

package.json

@@ -20,7 +20,6 @@
 		"ci:version": "changeset version",
 		"ci:publish": "pnpm build && changeset publish"
 	},
-	"packageManager": "pnpm@10",
 	"xo": {
 		"prettier": true
 	}

packages/oast-to-hast/index.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {import('./lib/state.js').Options} Options
+ * @typedef {import('./lib/index.js').Options} Options
  */
 
 export { handlers as defaultHandlers } from './lib/handlers/index.js'

packages/oast-to-hast/lib/handlers/link.js

@@ -61,7 +61,7 @@ export function link(state, node) {
 		type: 'element',
 		tagName: 'a',
 		properties: {
-			href: node.path.value,
+			href: state.options.linkHref(node),
 			target: state.options.linkTarget
 		},
 		children: state.all(node)

packages/oast-to-hast/lib/handlers/section.js

@@ -33,7 +33,7 @@ export function section(state, node) {
 }
 
 /**
- * @param {import('../state.js').Options} options
+ * @param {import('../state.js').Config} config
  * @param {string[]} tags
  * @returns {boolean}
  */

packages/oast-to-hast/lib/index.js

@@ -1,14 +1,15 @@
 /**
  * @typedef {import('hast').Nodes} HastNodes
  * @typedef {import('orga').Nodes} OastNodes
+ * @typedef {Partial<import('./state.js').Config> | null | undefined} Options
  */
 
 import { createState } from './state.js'
 
 /**
  * @param {OastNodes} tree
  *   oast tree.
- * @param {import('./state.js').Options | null | undefined} [options]
+ * @param {Options} [options]
  *   Configuration (optional).
  * @returns {HastNodes}
  *   hast tree.

packages/oast-to-hast/lib/state.js

@@ -6,11 +6,12 @@
  */
 
 /**
- * @typedef {Object} Options
- * @property {Handlers} [handlers]
- * @property {string} [linkTarget='_self']
- * @property {string[]} [selectTags=[]]
- * @property {string[]} [excludeTags=['noexport']]
+ * @typedef {Object} Config
+ * @property {Handlers} handlers
+ * @property {string} linkTarget
+ * @property {(link: import('orga').Link) => string} linkHref
+ * @property {string[]} selectTags=[]
+ * @property {string[]} excludeTags=['noexport']
  */
 
 /**
@@ -32,22 +33,28 @@ import { handlers as defaultHandlers } from './handlers/index.js'
 
 /**
  * @param {OastNodes} tree
- * @param {Options | null | undefined} [options = {}]
+ * @param {Partial<Config> | null | undefined} [options = {}]
  */
 export function createState(tree, options = {}) {
 	/** @type {Handlers} */
-	const handlers = { ...defaultHandlers, ...options?.handlers }
+	let handlers = { ...defaultHandlers }
+	if (options?.handlers) {
+		handlers = { ...handlers, ...options.handlers }
+	}
 
 	const state = {
 		one,
 		all,
 		handlers,
 		getAttrHtml,
 		patch,
+		/** @type {Config} */
 		options: {
+			handlers,
 			linkTarget: '_self',
 			selectTags: [],
 			excludeTags: ['noexport'],
+			linkHref: (link) => link.path.value,
 			...options
 		}
 	}

packages/orga-build/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-import { argv } from 'node:process'
+import { argv, cwd } from 'node:process'
 import { parseArgs } from 'node:util'
 import { watch } from './lib/watch.js'
-import { loadConfig, clean } from './lib/build.js'
-import { build } from './lib/esbuild/index.js'
+import { build, clean } from './lib/esbuild/build.js'
+import { loadConfig } from './lib/config.js'
 import { serve } from './lib/serve.js'
 
 const { values, positionals } = parseArgs({
@@ -17,7 +17,7 @@ const { values, positionals } = parseArgs({
 	allowPositionals: true
 })
 
-const config = await loadConfig()
+const config = await loadConfig(cwd(), 'orga.config.js', 'orga.config.ts')
 
 await build(config)
 

packages/orga-build/index.js

@@ -1 +1 @@
-export { build } from './lib/build.js'
+export { build } from './lib/esbuild/build.js'

packages/orga-build/lib/config.js

@@ -0,0 +1,34 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { evaluate } from './esbuild/evaluate.js'
+
+/**
+ * @typedef {Object} Options
+ * @property {string} [outDir]
+ * @property {string[]} [preBuild]
+ * @property {string[]} [postBuild]
+ */
+
+/** @type {Options} */
+const defaultConfig = {
+	outDir: 'out',
+	preBuild: [],
+	postBuild: []
+}
+
+/**
+ * @param {string} cwd
+ * @param {string[]} files
+ * @returns {Promise<Options>}
+ */
+export async function loadConfig(cwd, ...files) {
+	for (const file of files) {
+		const filePath = path.join(cwd, file)
+		try {
+			await fs.access(filePath, fs.constants.F_OK)
+			const config = await evaluate(filePath)
+			return { ...defaultConfig, ...config }
+		} catch (err) {}
+	}
+	return defaultConfig
+}

packages/orga-build/lib/esbuild/index.js packages/orga-build/lib/esbuild/build.js

@@ -7,16 +7,10 @@ import { renderToString } from 'react-dom/server'
 import assert from 'node:assert'
 import { DefaultLayout, $, match } from '../util.js'
 import rawLoader from './raw-loader.js'
+import resolveReact from './resolve-react.js'
 
 /**
- * @typedef {Object} Options
- * @property {string} [outDir]
- * @property {string[]} [preBuild]
- * @property {string[]} [postBuild]
- */
-
-/**
- * @param {Options} options
+ * @param {import('../config.js').Options} options
  */
 export async function build({ outDir = 'dir', preBuild = [], postBuild = [] }) {
 	for (const cmd of preBuild) {
@@ -62,12 +56,28 @@ export async function build({ outDir = 'dir', preBuild = [], postBuild = [] }) {
 		format: 'esm',
 		platform: 'node',
 		target: 'esnext',
+		// jsxFactory: 'React.createElement',
+		// jsxFragment: 'React.Fragment',
 		jsx: 'automatic',
 		// write: false,
 		outdir: '.orga-build/js',
 		// splitting: true,
 		metafile: true,
-		plugins: [esbuildOrga(), rawLoader],
+		plugins: [
+			esbuildOrga({
+				reorgRehypeOptions: {
+					linkHref: (link) => {
+						if (link.path.protocol === 'file') {
+							return link.path.value.replace(/\.org$/, '.html')
+						}
+						return link.path.value
+					}
+				}
+				// reorgPlugins: [reorgLinks]
+			}),
+			rawLoader,
+			resolveReact
+		],
 		// external: ['react/jsx-runtime'],
 		loader: {
 			'.jsx': 'jsx',
@@ -215,3 +225,10 @@ async function walk(dirPath, callback) {
 		}
 	}
 }
+
+/**
+ * @param {import("fs").PathLike} dir
+ */
+export async function clean(dir) {
+	await fs.rm(dir, { recursive: true })
+}

packages/orga-build/lib/esbuild.js packages/orga-build/lib/esbuild/evaluate.js

@@ -31,27 +31,3 @@ export async function evaluate(filePath) {
 		`return import("data:application/javascript,${encodeURIComponent(code)}")`
 	)()
 }
-
-/**
- * @param {string} pattern
- */
-export async function build(pattern) {
-	return await esbuild.build({
-		entryPoints: [pattern],
-		entryNames: '[dir]/_/[name]',
-		bundle: true,
-		format: 'esm',
-		platform: 'node',
-		target: 'esnext',
-		jsx: 'automatic',
-		// write: false,
-		outdir: '.build',
-		plugins: [esbuildOrga()],
-		loader: {
-			'.jsx': 'jsx',
-			'.tsx': 'tsx'
-		}
-	})
-}
-
-export async function b() {}

packages/orga-build/lib/esbuild/resolve-react.js

@@ -0,0 +1,27 @@
+/**
+ * @import {PluginBuild} from 'esbuild'
+ */
+
+import { createRequire } from 'module'
+import path from 'path'
+
+const require = createRequire(import.meta.url)
+const reactPath = require.resolve('react')
+const reactDirPath = path.dirname(reactPath)
+
+const resolveReact = {
+	name: 'resolve-react',
+	/**
+	 * @param {PluginBuild} build
+	 *   Build.
+	 * @returns {undefined}
+	 *   Nothing.
+	 */
+	setup(build) {
+		build.onResolve({ filter: /^react\/jsx-runtime$/ }, () => {
+			return { path: path.join(reactDirPath, 'jsx-runtime.js') }
+		})
+	}
+}
+
+export default resolveReact

packages/orga-build/lib/build.js packages/orga-build/lib/node/build.js

@@ -5,17 +5,11 @@ import path from 'path'
 import { createElement } from 'react'
 import { renderToString } from 'react-dom/server'
 import assert from 'node:assert'
-import { match } from './util.js'
-import { evaluate, build as _build } from './esbuild.js'
-import { $, DefaultLayout } from './util.js'
+import { match, $, DefaultLayout } from '../util.js'
 
-const USE_NODE = false
-
-if (USE_NODE) {
-	register('./jsx-loader.js', import.meta.url)
-	register('./orga-loader.js', import.meta.url)
-	register('./raw-loader.js', import.meta.url)
-}
+register('./jsx-loader.js', import.meta.url)
+register('./orga-loader.js', import.meta.url)
+register('./raw-loader.js', import.meta.url)
 
 const defaultConfig = {
 	outDir: 'out',
@@ -208,11 +202,7 @@ async function _import(...files) {
 	const file = found[0]
 	const fullPath = path.isAbsolute(file) ? file : path.join(process.cwd(), file)
 	const { mtime } = await fs.stat(fullPath)
-	if (USE_NODE) {
-		return await import(`${fullPath}?version=${mtime.getTime()}`)
-	} else {
-		return await evaluate(fullPath)
-	}
+	return await import(`${fullPath}?version=${mtime.getTime()}`)
 }
 
 /**

packages/orga-build/lib/jsx-loader.js packages/orga-build/lib/node/jsx-loader.js

@@ -11,7 +11,7 @@ export async function watch(dir, ignore, onChange) {
 	/** @type {ReturnType<typeof setTimeout> | null} */
 	let timeout = null
 	const delay = 1000
-	const defaultIgnorePattern = /node_modules|\.git|\.DS_Store/
+	const defaultIgnorePattern = /node_modules|\.git|\.DS_Store|\.orga-build/
 
 	const watcher = fs.watch(dir, { recursive: true })
 	for await (const event of watcher) {

packages/orga-build/lib/orga-loader.js packages/orga-build/lib/node/orga-loader.js

@@ -4,7 +4,7 @@
 	"description": "A simple tool that builds org-mode files into a website",
 	"type": "module",
 	"bin": {
-		"orga-build": "cli.js"
+		"orga-build": "./cli.js"
 	},
 	"scripts": {},
 	"files": ["lib/", "cli.js", "index.js", "index.d.ts", "index.d.ts.map"],
@@ -13,7 +13,7 @@
 	"author": "Xiaoxing Hu <[email protected]>",
 	"license": "MIT",
 	"dependencies": {
-		"@orgajs/esbuild": "^1.1.1",
+		"@orgajs/esbuild": "workspace:^",
 		"@orgajs/node-loader": "workspace:^",
 		"esbuild": "^0.24.2",
 		"globby": "^14.0.2",
@@ -27,6 +27,7 @@
 		"@types/node": "^22.13.1",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
-		"@types/serve-handler": "^6.1.4"
+		"@types/serve-handler": "^6.1.4",
+		"orga": "workspace:^"
 	}
 }