@jk2908/cxx 0.1.10 → 0.2.0

package/src/utils.ts

@@ -0,0 +1,24 @@
+export function capitalise(str: string) {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export function pascalise(str: string) {
+	return str
+		.split(/[ _-]+/)
+		.map(capitalise)
+		.join('')
+}
+
+export function debounce<T extends unknown[]>(fn: (...args: T) => void, wait: number) {
+	let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+	return (...args: T) => {
+		if (timeoutId) {
+			clearTimeout(timeoutId)
+		}
+
+		timeoutId = setTimeout(() => {
+			fn.apply(null, args)
+		}, wait)
+	}
+}

package/src/vite/index.ts

@@ -0,0 +1,156 @@
+import { realpathSync } from 'node:fs'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+import { type Plugin, type ViteDevServer } from 'vite'
+
+import type { BuildContext, PluginConfig } from '../types.js'
+import { GENERATED_DIR } from '../config.js'
+import { collect, flattenTags, isENOENT, writeTypes } from '../index.js'
+import { Logger } from '../logger.js'
+import { debounce } from '../utils.js'
+
+const ACCEPTED_EXTENSIONS = new Set(['.js', '.jsx', '.ts', '.tsx'])
+
+function normaliseWatchPath(p: string) {
+	return p.replace(/\\/g, '/')
+}
+
+export default function cxx(pluginConfig: PluginConfig = {}) {
+	const buildContext = {
+		tagsByFile: new Map(),
+	} satisfies BuildContext
+
+	const logger = new Logger(
+		(pluginConfig?.logger?.level ?? process.env.NODE_ENV === 'production')
+			? 'error'
+			: 'debug',
+	)
+
+	// write generated files into a hidden folder at the project root
+	// keep the generated surface out of src
+	const watchRoot = normaliseWatchPath(realpathSync.native(process.cwd()))
+	const watchedRoots = [`${watchRoot}/`]
+
+	let rebuildRunning = false
+	let rebuildQueued = false
+
+	// watcher events can arrive through symlinked paths like /var while cwd has
+	// already resolved to /private/var, so canonicalise the parent dir once and
+	// reattach the file name for stable prefix checks
+	function resolveWatchFile(filePath: string) {
+		const absolutePath = path.resolve(watchRoot, filePath)
+		const parentPath = path.dirname(absolutePath)
+
+		try {
+			const resolvedParentPath = normaliseWatchPath(realpathSync.native(parentPath))
+
+			return normaliseWatchPath(
+				path.join(resolvedParentPath, path.basename(absolutePath)),
+			)
+		} catch {
+			return normaliseWatchPath(absolutePath)
+		}
+	}
+
+	function watchedFile(filePath: string) {
+		const resolvedPath = resolveWatchFile(filePath)
+
+		return (
+			watchedRoots.some(root => resolvedPath.startsWith(root)) &&
+			!resolvedPath.includes(`/${GENERATED_DIR}/`) &&
+			ACCEPTED_EXTENSIONS.has(path.extname(resolvedPath))
+		)
+	}
+
+	const rebuild = debounce((event: 'add' | 'change' | 'unlink', filePath: string) => {
+		function queue() {
+			void (async () => {
+				// collapse bursts of file events into one active rebuild plus a single
+				// queued rerun when changes land mid-build
+				if (rebuildRunning) {
+					rebuildQueued = true
+					return
+				}
+
+				rebuildRunning = true
+
+				do {
+					rebuildQueued = false
+
+					try {
+						const hadTags = buildContext.tagsByFile.has(file)
+						let hasTags = false
+
+						if (event === 'unlink') {
+							buildContext.tagsByFile.delete(file)
+						} else {
+							const source = await fs.readFile(file, 'utf-8')
+							const { tags } = collect(source, file, pluginConfig)
+
+							hasTags = tags.size > 0
+
+							if (hasTags) {
+								buildContext.tagsByFile.set(file, tags)
+							} else {
+								buildContext.tagsByFile.delete(file)
+							}
+						}
+
+						if (!hadTags && !hasTags) continue
+
+						await writeTypes(flattenTags(buildContext.tagsByFile))
+						logger.info(`updated types from ${file}`)
+					} catch (err) {
+						if (isENOENT(err)) {
+							if (!buildContext.tagsByFile.has(file)) continue
+
+							buildContext.tagsByFile.delete(file)
+							await writeTypes(flattenTags(buildContext.tagsByFile))
+
+							logger.info(`updated types from ${file}`)
+
+							continue
+						}
+
+						logger.error(`failed to update types from ${file}`, err)
+					}
+				} while (rebuildQueued)
+
+				rebuildRunning = false
+			})()
+		}
+
+		// ignore anything outside the watched content dirs
+		if (!watchedFile(filePath)) return
+
+		const file = resolveWatchFile(filePath)
+		queue()
+	}, 75)
+
+	return {
+		name: 'cxx',
+		enforce: 'pre',
+		transform(code, id) {
+			const { template, tags } = collect(code, id, pluginConfig)
+
+			if (tags.size) buildContext.tagsByFile.set(id, tags)
+
+			return {
+				code: template,
+				map: null,
+			}
+		},
+		configureServer(server: ViteDevServer) {
+			logger.info('Watching for changes...')
+
+			server.watcher
+				.on('add', (p: string) => rebuild('add', p))
+				.on('change', (p: string) => rebuild('change', p))
+				.on('unlink', (p: string) => rebuild('unlink', p))
+		},
+		async writeBundle() {
+			await writeTypes(flattenTags(buildContext.tagsByFile))
+		},
+	} satisfies Plugin
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Jerome Kenway
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,71 +0,0 @@
-# @jk2908/cxx
-
-Build-time CSS template tag utilities for React 19.
-
-## Install
-
-```sh
-npm install @jk2908/cxx lightningcss react react-dom
-```
-
-## Usage
-
-```tsx
-import { cxx } from '@jk2908/cxx'
-
-const [css, styles, href] = cxx`
-	.header {
-		display: flex;
-		gap: 0.75rem;
-	}
-`
-
-export function Header() {
-	return (
-		<header className={styles.header}>
-			<style href={href} precedence="medium">
-				{css}
-			</style>
-		</header>
-	)
-}
-```
-
-The `cxx` tag is a build-time marker. Use the Vite plugin or Next helper so the placeholders are replaced before runtime. String interpolation inside the template is not supported.
-
-## Vite
-
-```ts
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import cxx from '@jk2908/cxx/vite-plugin-cxx'
-
-export default defineConfig({
-	plugins: [react(), cxx()],
-})
-```
-
-## Next
-
-```ts
-import { withCxx } from '@jk2908/cxx/next'
-
-const nextConfig = {}
-
-export default withCxx(nextConfig)
-```
-
-Both integrations accept an optional config object with `lightningcss` options. The default transform enables minification and CSS Modules output.
-
-```ts
-cxx({
-	lightningcss: {
-		minify: false,
-		cssModules: false,
-	},
-})
-```
-
-## License
-
-MIT

package/dist/inject/index.cjs

@@ -1,60 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var lightningcss = require('lightningcss');
-
-// cyrb53 (c) 2018 bryc (github.com/bryc)
-// https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js
-function cyrb53(str, seed = 0) {
-    let h1 = 0xdeadbeef ^ seed;
-    let h2 = 0x41c6ce57 ^ seed;
-    for(let i = 0, ch; i < str.length; i++){
-        ch = str.charCodeAt(i);
-        h1 = Math.imul(h1 ^ ch, 2654435761);
-        h2 = Math.imul(h2 ^ ch, 1597334677);
-    }
-    h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507);
-    h1 ^= Math.imul(h2 ^ h2 >>> 13, 3266489909);
-    h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
-    h2 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
-    return 4294967296 * (2097151 & h2) + (h1 >>> 0);
-}
-
-const varMatch = /(?:const|var|let)\s*\[(\w+|)\s*,?\s*(\w+|)\s*,?\s*(\w+|)\s*\]\s*=\s*cxx\s*`([\s\S]*?)`/gm;
-const DEFAULT_CONFIG = {
-    lightningcss: {
-        minify: true,
-        cssModules: true
-    }
-};
-function inject(source, id, config = {}) {
-    try {
-        const tmpl = source.replace(varMatch, (_, ...args)=>{
-            const [varOne, varTwo, varThree, css] = args;
-            const { code, exports } = lightningcss.transform({
-                ...DEFAULT_CONFIG.lightningcss,
-                ...config.lightningcss,
-                filename: id,
-                code: new TextEncoder().encode(css)
-            });
-            const href = cyrb53([
-                ...Object.keys(exports ?? {}),
-                id
-            ].join(''));
-            const classes = exports ? Object.fromEntries(Object.entries(exports).map(([key, value])=>[
-                    key,
-                    value.name
-                ])) : {};
-            return [
-                varOne && `const ${varOne} = \`${code}\``,
-                varTwo && `const ${varTwo} = ${JSON.stringify(classes)}`,
-                varThree && `const ${varThree} = \`${href}\``
-            ].filter(Boolean).join('\n');
-        });
-        return tmpl;
-    } catch (err) {
-        console.error('cxx error :(', err);
-        return source;
-    }
-}
-
-exports.inject = inject;

package/dist/inject/index.d.ts

@@ -1,8 +0,0 @@
-import { CustomAtRules, TransformOptions } from 'lightningcss';
-
-type Config<C extends CustomAtRules = CustomAtRules> = {
-    lightningcss?: Partial<TransformOptions<C>>;
-};
-declare function inject<C extends CustomAtRules = CustomAtRules>(source: string, id: string, config?: Config<C>): string;
-
-export { type Config, inject };

package/dist/inject/index.js

@@ -1,58 +0,0 @@
-import { transform } from 'lightningcss';
-
-// cyrb53 (c) 2018 bryc (github.com/bryc)
-// https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js
-function cyrb53(str, seed = 0) {
-    let h1 = 0xdeadbeef ^ seed;
-    let h2 = 0x41c6ce57 ^ seed;
-    for(let i = 0, ch; i < str.length; i++){
-        ch = str.charCodeAt(i);
-        h1 = Math.imul(h1 ^ ch, 2654435761);
-        h2 = Math.imul(h2 ^ ch, 1597334677);
-    }
-    h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507);
-    h1 ^= Math.imul(h2 ^ h2 >>> 13, 3266489909);
-    h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
-    h2 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
-    return 4294967296 * (2097151 & h2) + (h1 >>> 0);
-}
-
-const varMatch = /(?:const|var|let)\s*\[(\w+|)\s*,?\s*(\w+|)\s*,?\s*(\w+|)\s*\]\s*=\s*cxx\s*`([\s\S]*?)`/gm;
-const DEFAULT_CONFIG = {
-    lightningcss: {
-        minify: true,
-        cssModules: true
-    }
-};
-function inject(source, id, config = {}) {
-    try {
-        const tmpl = source.replace(varMatch, (_, ...args)=>{
-            const [varOne, varTwo, varThree, css] = args;
-            const { code, exports } = transform({
-                ...DEFAULT_CONFIG.lightningcss,
-                ...config.lightningcss,
-                filename: id,
-                code: new TextEncoder().encode(css)
-            });
-            const href = cyrb53([
-                ...Object.keys(exports ?? {}),
-                id
-            ].join(''));
-            const classes = exports ? Object.fromEntries(Object.entries(exports).map(([key, value])=>[
-                    key,
-                    value.name
-                ])) : {};
-            return [
-                varOne && `const ${varOne} = \`${code}\``,
-                varTwo && `const ${varTwo} = ${JSON.stringify(classes)}`,
-                varThree && `const ${varThree} = \`${href}\``
-            ].filter(Boolean).join('\n');
-        });
-        return tmpl;
-    } catch (err) {
-        console.error('cxx error :(', err);
-        return source;
-    }
-}
-
-export { inject };

package/dist/next/cxx-loader.d.ts

@@ -1,7 +0,0 @@
-import { inject } from '../inject/index.js';
-
-function loader(source) {
-	return inject(source, this.resourcePath, this.getOptions())
-}
-
-export { loader as default };

package/dist/next/cxx-loader.js

@@ -1,7 +0,0 @@
-import { inject } from '../inject/index.js';
-
-function loader(source) {
-    return inject(source, this.resourcePath, this.getOptions());
-}
-
-export { loader as default };

package/dist/vite-plugin-cxx/index.d.ts

@@ -1,6 +0,0 @@
-import { Plugin } from 'vite';
-import { Config } from '../inject/index.js';
-
-declare function vitePluginCxx(config?: Config): Plugin;
-
-export { vitePluginCxx as default };

package/dist/vite-plugin-cxx/index.js

@@ -1,16 +0,0 @@
-import { inject } from '../inject/index.js';
-
-function vitePluginCxx(config) {
-    return {
-        name: 'cxx',
-        enforce: 'pre',
-        transform (code, id) {
-            return {
-                code: inject(code, id, config),
-                map: null
-            };
-        }
-    };
-}
-
-export { vitePluginCxx as default };

package/src/cyrb53.ts

@@ -1,20 +0,0 @@
-// cyrb53 (c) 2018 bryc (github.com/bryc)
-// https://github.com/bryc/code/blob/master/jshash/experimental/cyrb53.js
-
-export function cyrb53(str: string, seed = 0) {
-	let h1 = 0xdeadbeef ^ seed
-	let h2 = 0x41c6ce57 ^ seed
-
-	for (let i = 0, ch: number; i < str.length; i++) {
-		ch = str.charCodeAt(i)
-		h1 = Math.imul(h1 ^ ch, 2654435761)
-		h2 = Math.imul(h2 ^ ch, 1597334677)
-	}
-
-	h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507)
-	h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909)
-	h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507)
-	h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909)
-
-	return 4294967296 * (2097151 & h2) + (h1 >>> 0)
-}

package/src/inject.ts

@@ -1,54 +0,0 @@
-import { cyrb53 } from './cyrb53'
-
-import { type TransformOptions, type CustomAtRules, transform } from 'lightningcss'
-
-const varMatch =
-	/(?:const|var|let)\s*\[(\w+|)\s*,?\s*(\w+|)\s*,?\s*(\w+|)\s*\]\s*=\s*cxx\s*`([\s\S]*?)`/gm
-
-export type Config<C extends CustomAtRules = CustomAtRules> = {
-	lightningcss?: Partial<TransformOptions<C>>
-}
-
-const DEFAULT_CONFIG: Config = {
-	lightningcss: {
-		minify: true,
-		cssModules: true,
-	},
-} as const
-
-export function inject<C extends CustomAtRules = CustomAtRules>(
-	source: string,
-	id: string,
-	config: Config<C> = {},
-) {
-	try {
-		const tmpl = source.replace(varMatch, (_: string, ...args: string[]) => {
-			const [varOne, varTwo, varThree, css] = args
-
-			const { code, exports } = transform({
-				...DEFAULT_CONFIG.lightningcss,
-				...config.lightningcss,
-				filename: id,
-				code: new TextEncoder().encode(css),
-			})
-
-			const href = cyrb53([...Object.keys(exports ?? {}), id].join(''))
-			const classes = exports
-				? Object.fromEntries(Object.entries(exports).map(([key, value]) => [key, value.name]))
-				: {}
-
-			return [
-				varOne && `const ${varOne} = \`${code}\``,
-				varTwo && `const ${varTwo} = ${JSON.stringify(classes)}`,
-				varThree && `const ${varThree} = \`${href}\``,
-			]
-				.filter(Boolean)
-				.join('\n')
-		})
-
-		return tmpl
-	} catch (err) {
-		console.error('cxx error :(', err)
-		return source
-	}
-}

package/src/vite-plugin-cxx/index.ts

@@ -1,16 +0,0 @@
-import type { Plugin } from 'vite'
-
-import { inject, type Config } from '../inject'
-
-export default function vitePluginCxx(config?: Config): Plugin {
-  return {
-    name: 'cxx',
-    enforce: 'pre',
-    transform(code, id) {
-      return {
-        code: inject(code, id, config),
-        map: null
-      }
-    }
-  }
-}