fix: util recusion and prefixing (#437)

.bin/build-dirs.mjs

@@ -0,0 +1,11 @@
+/** Root directory. */
+export const rootUrl = new URL('../', import.meta.url)
+
+/** Packages directory. */
+export const packagesUrl = new URL('packages/', rootUrl)
+
+/** Core package directory. */
+export const corePackageUrl = new URL('core/', packagesUrl)
+
+/** React package directory. */
+export const reactPackageUrl = new URL('react/', packagesUrl)

.bin/build.js → .bin/build-package.mjs

@@ -1,19 +1,49 @@
 import esbuild from 'esbuild'
-import fs from 'fs/promises'
+import fs from './fs.mjs'
 import zlib from 'zlib'
 import { minify } from 'terser'
+import { bold, underline } from './color.mjs'
 
-async function buildPackage(release, variants) {
-	const rootPackageURL = new URL(release + '/', pkgsURL)
-	const initPackageURL = new URL('src/', rootPackageURL)
-	const distPackageURL = new URL('dist/', rootPackageURL)
+const variants = {
+	esm: {
+		extension: 'mjs',
+		transform(code, exports) {
+			const esmExports = []
+			for (const name in exports) esmExports.push(`${exports[name]} as ${name}`)
+			return `${code}export{${esmExports.join(',')}}`
+		},
+	},
+	cjs: {
+		extension: 'cjs',
+		transform(code, exports) {
+			const cjsExports = ['__esModule:!0']
+			for (const name in exports) cjsExports.push(`${name}:${exports[name]}`)
+			return `${code}module.exports={${cjsExports.join(',')}}`
+		},
+	},
+	iife: {
+		extension: 'iife.js',
+		transform(code, exports) {
+			let iifeExports = ['globalThis.stitches=' + exports.default]
+			for (let name in exports) if (name !== 'default') iifeExports.push(`stitches.${name}=${exports[name]}`)
+			return `(()=>{${code}${iifeExports.join(';')}})()`
+		},
+	},
+}
 
-	console.log()
-	console.log(`\x1b[4m\x1b[1m${JSON.parse(await fs.readFile(new URL(`package.json`, rootPackageURL))).name}\x1b[0m`)
+async function buildPackage(src) {
+	const packageUrl = src
+	const initPackageUrl = new URL('src/', packageUrl)
+	const distPackageUrl = new URL('dist/', packageUrl)
+
+	const packageJsonUrl = new URL(`package.json`, packageUrl)
+	const packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name
+
+	console.log(underline(bold(packageName)))
 	console.log()
 
-	const targetPathname = new URL('index.js', initPackageURL).pathname
-	const outputPathname = new URL('stitches.js', distPackageURL).pathname
+	const targetPathname = new URL('index.js', initPackageUrl).pathname
+	const outputPathname = new URL('stitches.js', distPackageUrl).pathname
 
 	// Build ESM version
 	const {
@@ -37,14 +67,10 @@ async function buildPackage(release, variants) {
 	})
 
 	// ensure empty dist directory
-	await fs.mkdir(distPackageURL, { recursive: true })
-
-	for (const distFile of await fs.readdir(distPackageURL)) {
-		await fs.unlink(new URL(distFile, distPackageURL))
-	}
+	await fs.mkdir(distPackageUrl, { recursive: true })
 
 	// write map
-	fs.writeFile(new URL(`stitches.${release}.map`, distPackageURL), map)
+	fs.writeFile(new URL(`index.map`, distPackageUrl), map)
 
 	// prepare variations
 	const splitByExport = (code, index = code.indexOf('export')) => [code.slice(0, index), code.slice(index)]
@@ -55,63 +81,39 @@ async function buildPackage(release, variants) {
 	// write variation builds
 	for (const variant in variants) {
 		const variantInfo = variants[variant]
-		const variantPath = new URL(`dist/stitches.${release}.${variant}.${variantInfo.extension}`, rootPackageURL).pathname
+		const variantPath = new URL(`dist/index.${variantInfo.extension}`, packageUrl).pathname
 		const variantCode = variantInfo.transform(lead, exports)
 		const variantSize = Number((zlib.gzipSync(variantCode, { level: 9 }).length / 1000).toFixed(2))
 
 		console.log(' ', `\x1b[33m${variantSize} kB\x1b[0m`, `\x1b[2m(${variant})\x1b[0m`)
 
-		await fs.writeFile(variantPath, variantCode + `\n//# sourceMappingURL=stitches.${release}.map`)
+		await fs.writeFile(variantPath, variantCode + `\n//# sourceMappingUrl=index.map`)
 	}
 }
 
-/** Packages directory. */
-const pkgsURL = new URL('../packages/', import.meta.url)
+export default buildPackage
 
-const variants = {
-	esm: {
-		extension: 'mjs',
-		transform(code, exports) {
-			const esmExports = []
-			for (const name in exports) esmExports.push(`${exports[name]} as ${name}`)
-			return `${code}export{${esmExports.join(',')}}`
-		},
-	},
-	cjs: {
-		extension: 'cjs',
-		transform(code, exports) {
-			const cjsExports = ['__esModule:!0']
-			for (const name in exports) cjsExports.push(`${name}:${exports[name]}`)
-			return `${code}module.exports={${cjsExports.join(',')}}`
-		},
-	},
-	iife: {
-		extension: 'js',
-		transform(code, exports) {
-			let iifeExports = ['globalThis.stitches=' + exports.default]
-			for (let name in exports) if (name !== 'default') iifeExports.push(`stitches.${name}=${exports[name]}`)
-			return `(()=>{${code}${iifeExports.join(';')}})()`
-		},
-	},
-}
+const metaUrl = new URL(import.meta.url)
+const argvUrl = new URL(process.argv[1], 'file:')
 
-const buildCore = async () => {
-	await buildPackage('core', variants)
-	await buildPackage('react', variants)
-}
+if (metaUrl.href === argvUrl.href) {
+	/** Root directory. */
+	const rootUrl = new URL('../', metaUrl)
 
-const buildReact = async () => {
-	await buildPackage('react', variants)
-}
+	/** Packages directory. */
+	const packagesUrl = new URL('packages/', rootUrl)
+
+	/** Core package directory. */
+	const corePackageUrl = new URL('core/', packagesUrl)
+
+	/** React package directory. */
+	const reactPackageUrl = new URL('react/', packagesUrl)
+
+	console.log()
+
+	await buildPackage(corePackageUrl)
+
+	console.log()
 
-if (process.argv.includes('--watch')) {
-	Array.from(
-		[
-			[new URL('core/src/', pkgsURL).pathname, buildCore],
-			[new URL('react/src/', pkgsURL).pathname, buildReact],
-		],
-		([watchdir, build]) => new FSWatcher(watchdir, build),
-	)
-} else {
-	buildCore().then(() => console.log())
+	await buildPackage(reactPackageUrl)
 }

.bin/build-shared.mjs

@@ -0,0 +1,36 @@
+import fs from './fs.mjs'
+import { corePackageUrl, reactPackageUrl, rootUrl } from './build-dirs.mjs'
+import { bold, dim, underline } from './color.mjs'
+
+async function buildShared(packageUrl) {
+	const sharedUrl = new URL('shared/', rootUrl)
+	const packageJsonUrl = new URL(`package.json`, packageUrl)
+	const packageName = JSON.parse(await fs.readFile(packageJsonUrl, 'utf8')).name
+
+	for (const dirent of await fs.readdir(sharedUrl, { withFileTypes: true })) {
+		const sourceUrl = new URL(dirent.name + '/', sharedUrl)
+		const sourceLog = sourceUrl.pathname.slice(rootUrl.pathname.length, -1)
+
+		if (dirent.isDirectory()) {
+			const targetUrl = new URL(dirent.name + '/', packageUrl)
+
+			await fs.rmdir(targetUrl, { recursive: true })
+
+			await fs.copydir(sourceUrl, targetUrl)
+
+			console.log([bold(sourceLog), dim('copied to'), bold(underline(packageName))].join(' '))
+		}
+	}
+}
+
+export default buildShared
+
+const metaUrl = new URL(import.meta.url)
+const argvUrl = new URL(process.argv[1], 'file:')
+
+if (metaUrl.href === argvUrl.href) {
+	console.log('')
+
+	buildShared(corePackageUrl)
+	buildShared(reactPackageUrl)
+}

.bin/build-watch.mjs

@@ -0,0 +1,21 @@
+import nodemon from 'nodemon'
+
+nodemon(
+	[
+		// prettier-ignore
+		`--watch packages/core/src`,
+		`--watch packages/core/tests`,
+		`--watch packages/core/types`,
+		`--watch packages/react/src`,
+		`--watch packages/react/tests`,
+		`--watch packages/react/types`,
+
+		// exec
+		`--exec "${['npm', 'run', 'build'].concat(process.argv.slice(2)).join(' ')}"`,
+	].join(' '),
+)
+	.on('start', () => {
+		process.stdout.write('\u001b[3J\u001b[2J\u001b[1J')
+		console.clear()
+	})
+	.on('quit', () => process.exit())

.bin/build.mjs

@@ -0,0 +1,30 @@
+import buildPackage from './build-package.mjs'
+import buildShared from './build-shared.mjs'
+import fs from './fs.mjs'
+import { corePackageUrl, reactPackageUrl } from './build-dirs.mjs'
+
+async function build() {
+	console.log()
+
+	await fs.rmdir(new URL('dist/', corePackageUrl), { recursive: true })
+	await fs.rmdir(new URL('dist/', reactPackageUrl), { recursive: true })
+
+	await buildPackage(corePackageUrl)
+
+	console.log()
+
+	await buildPackage(reactPackageUrl)
+
+	console.log()
+
+	await buildShared(corePackageUrl)
+
+	await buildShared(reactPackageUrl)
+
+	console.log()
+}
+
+const metaUrl = new URL(import.meta.url)
+const argvUrl = new URL(process.argv[1], 'file:')
+
+if (metaUrl.href === argvUrl.href) build()

.bin/fs.mjs

@@ -0,0 +1,27 @@
+import fs from 'fs/promises'
+import { copyFile, mkdir, readdir } from 'fs/promises'
+
+export * from 'fs/promises'
+
+/** Asynchronously copies dir to dest. By default, dest is overwritten if it already exists. */
+export const copydir = async function copydir(src, dest) {
+	await mkdir(dest, { recursive: true })
+
+	const dirents = await readdir(src, { withFileTypes: true })
+
+	for (const dirent of dirents) {
+		const sourceURL = new URL(dirent.name + '/', src)
+		const targetURL = new URL(dirent.name + '/', dest)
+		if (dirent.isDirectory()) await copydir(sourceURL, targetURL)
+	}
+
+	for (const dirent of dirents) {
+		const sourceURL = new URL(dirent.name, src)
+		const targetURL = new URL(dirent.name, dest)
+		if (!dirent.isDirectory()) await copyFile(sourceURL, targetURL)
+	}
+}
+
+fs.copydir = copydir
+
+export default fs

.bin/coverage.js → .bin/test-coverage.mjs

@@ -1,8 +1,8 @@
 import cp from 'child_process'
 import fp from 'path'
-import fs from 'fs/promises'
+import fs from './fs.mjs'
 import os from 'os'
-import { bold, dim, green, red } from './color.js'
+import { bold, dim, green, red } from './color.mjs'
 
 // Creates a unique temporary directory
 !(async () => {

.bin/test-watch.mjs

@@ -0,0 +1,17 @@
+import nodemon from 'nodemon'
+
+nodemon(
+	[
+		// prettier-ignore
+		`--watch packages/core/src`,
+		`--watch packages/core/tests`,
+		`--watch packages/react/src`,
+		`--watch packages/react/tests`,
+		`--exec "clear; ${['node', '.bin/test.mjs'].concat(process.argv.slice(2)).join(' ')}"`,
+	].join(' '),
+)
+	.on('start', () => {
+		process.stdout.write('\u001b[3J\u001b[2J\u001b[1J')
+		console.clear()
+	})
+	.on('quit', () => process.exit())