release orga-build (#251)

* add source map for esbuild

* migrate orga-build to esbuild

* upgrade changeset

* change version to 0.0.1

* add changeset

* fix build

Author: xiaoxinghu

.changeset/moody-sheep-carry.md

@@ -0,0 +1,6 @@
+---
+'orga-build': patch
+'@orgajs/esbuild': patch
+---
+
+release orga-build, add source map to @orgajs/esbuild

docs/package.json

@@ -19,7 +19,7 @@
 		"@codemirror/language": "^6.10.8",
 		"@codemirror/state": "^6.5.2",
 		"@codemirror/view": "^6.36.2",
-		"@orgajs/build": "workspace:^",
+		"orga-build": "workspace:^",
 		"@orgajs/editor": "workspace:^",
 		"@orgajs/orgx": "workspace:^",
 		"codemirror": "^6.0.1",

package.json

@@ -2,7 +2,7 @@
 	"name": "orgajs",
 	"private": true,
 	"devDependencies": {
-		"@changesets/cli": "^2.26.2",
+		"@changesets/cli": "^2.28.1",
 		"@types/node": "^22.13.4",
 		"prettier": "^2.8.8",
 		"turbo": "^1.10.13",

packages/esbuild/index.js

@@ -8,6 +8,7 @@
 import fs from 'node:fs/promises'
 import { VFile } from 'vfile'
 import { compile } from '@orgajs/orgx'
+import { SourceMapGenerator } from 'source-map'
 
 const name = '@orgajs/esbuild'
 
@@ -51,7 +52,7 @@ function esbuild(options) {
 		)
 
 		const file = new VFile({ path: data.path, value: document })
-		const code = await compile(file, options)
+		const code = await compile(file, { ...options, SourceMapGenerator })
 		const contents =
 			String(code) +
 			'\n' +

packages/esbuild/package.json

@@ -21,6 +21,7 @@
 	"author": "Xiaoxing Hu <[email protected]>",
 	"dependencies": {
 		"@orgajs/orgx": "workspace:^",
+		"source-map": "^0.7.4",
 		"vfile": "^6.0.3"
 	},
 	"devDependencies": {

packages/orga-build/cli.js

@@ -3,7 +3,8 @@
 import { argv } from 'node:process'
 import { parseArgs } from 'node:util'
 import { watch } from './lib/watch.js'
-import { build, loadConfig, clean } from './lib/build.js'
+import { loadConfig, clean } from './lib/build.js'
+import { build } from './lib/esbuild/index.js'
 import { serve } from './lib/serve.js'
 
 const { values, positionals } = parseArgs({

packages/orga-build/lib/build.js

@@ -1,4 +1,3 @@
-import { exec } from 'child_process'
 import { globby } from 'globby'
 import fs from 'node:fs/promises'
 import { register } from 'node:module'
@@ -7,10 +6,16 @@ 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'
 
-register('./jsx-loader.js', import.meta.url)
-register('./orga-loader.js', import.meta.url)
-register('./raw-loader.js', import.meta.url)
+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)
+}
 
 const defaultConfig = {
 	outDir: 'out',
@@ -58,12 +63,15 @@ async function iter(dirPath, context) {
 
 	let components = { ...context.components }
 	let Layout = context.Layout
-	const ignore = context.ignore || /node_modules/
+	let ignore = context.ignore || /node_modules/
+	if (!Array.isArray(ignore)) {
+		ignore = [ignore]
+	}
 
 	const files = await fs.readdir(dirPath)
 
 	for (const file of files) {
-		if (match(file, ignore)) {
+		if (match(file, ...ignore)) {
 			continue
 		}
 		const filePath = path.join(dirPath, file)
@@ -103,7 +111,7 @@ async function iter(dirPath, context) {
 
 		// write regex to match .org and .tsx, .jsx files, javascript code only
 
-		if (match(file, [/\.(org)$/, /\.(j|t)sx$/])) {
+		if (match(file, /\.(org)$/, /\.(j|t)sx$/)) {
 			const module = await _import(filePath)
 			const {
 				default: /** @type import('@orgajs/orgx').OrgContent */ Content,
@@ -200,7 +208,11 @@ 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)
-	return await import(`${fullPath}?version=${mtime.getTime()}`)
+	if (USE_NODE) {
+		return await import(`${fullPath}?version=${mtime.getTime()}`)
+	} else {
+		return await evaluate(fullPath)
+	}
 }
 
 /**
@@ -217,46 +229,3 @@ export async function loadConfig() {
 	const config = await _import('orga.config.(j|t)s')
 	return { ...defaultConfig, ...config }
 }
-
-/**
- * @param {string} cmd
- */
-async function $(cmd) {
-	return new Promise((resolve, reject) => {
-		exec(cmd, (err, stdout, stderr) => {
-			if (err) {
-				reject(err)
-			}
-			if (stderr) {
-				console.error(stderr)
-			}
-			console.log(stdout)
-			resolve(stdout)
-		})
-	})
-}
-
-/**
- * Default layout
- * @param {Object} props
- * @param {string|undefined} props.title
- * @param {import('react').ReactNode} props.children
- * @returns {React.JSX.Element}
- */
-function DefaultLayout({ title, children }) {
-	return createElement(
-		'html',
-		{ lang: 'en' },
-		createElement(
-			'head',
-			{},
-			createElement('meta', { charSet: 'utf-8' }),
-			createElement('meta', {
-				name: 'viewport',
-				content: 'width=device-width, initial-scale=1'
-			}),
-			title && createElement('title', {}, title)
-		),
-		createElement('body', {}, children)
-	)
-}

packages/orga-build/lib/esbuild.js

@@ -0,0 +1,57 @@
+import assert from 'assert'
+import * as esbuild from 'esbuild'
+import esbuildOrga from '@orgajs/esbuild'
+
+/**
+ * Evaluate an org/jsx/tsx/ts file. Returns as a module.
+ * It's like a dynamic import, but without relying on nodejs.
+ * @param {string} filePath
+ * @returns {Promise<any>}
+ */
+export async function evaluate(filePath) {
+	const result = await esbuild.build({
+		entryPoints: [filePath],
+		bundle: true,
+		format: 'esm',
+		platform: 'node',
+		target: 'esnext',
+		jsx: 'automatic',
+		write: false,
+		plugins: [esbuildOrga()],
+		loader: {
+			'.jsx': 'jsx',
+			'.tsx': 'tsx'
+		}
+	})
+
+	const files = result.outputFiles
+	assert(files.length === 1, 'Expected only one output file')
+	const code = files[0].text
+	return await new Function(
+		`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() {}