@twobirds/microcomponents 0.8.0 → 0.10.0

package/dist/vite/loadAssets.js

@@ -1,221 +0,0 @@
-// oxlint-disable no-await-in-loop
-/**
-Inlines `static assets = [...]` declarations on DC classes for a bundled build: companion
-`.css` / `.html` files are read at build time and embedded as a `static _assets = { ... }`
-property inserted as the first line inside the class body, so `loadAssets()` never fetches
-them at runtime. The original `static assets` line is preserved for debugging purposes.
-
-The plugin ships as its own entry, `@twobirds/microcomponents/vite`, so a project that
-bundles to `public/` imports it without copying the source.
-
-@example
-```ts
-import { loadAssetsPlugin } from '@twobirds/microcomponents/vite';
-
-export default defineConfig({
-    plugins: [loadAssetsPlugin(sourceRoot)],
-});
-```
-
-@module Vite
-*/
-import { readFile } from 'node:fs/promises';
-import path from 'node:path';
-/**
- * Escape a raw string so it can be safely embedded inside a JS template literal.
- * Backticks and `${` sequences are escaped to prevent breaking the enclosing literal.
- *
- * @example Returns the input with backticks and `${` sequences escaped.
- * ```ts
- * escapeTemplateLiteral('price is ${cost}`done`');
- * ```
- */
-function escapeTemplateLiteral(raw) {
-    return raw.replace(/\\/g, '\\\\').replace(/\$/g, '\\$').replace(/`/g, '\\`');
-}
-/**
- * Resolve the relative file path for a given asset descriptor and component tag.
- * Only the last segment of the tag is used as the basename since the .ts source
- * already lives in the correct directory (e.g. `cart-container-checkout.ts` is
- * inside `cart/container/`, so we just need `checkout.target.html`).
- *
- * @example Returns `./header.shadow.css`, `./card.target.html` and `./summary.css` for the calls below.
- * ```ts
- * resolveAssetPath('shop-header', 'shadowCss');
- * resolveAssetPath('product-card', 'targetHtml');
- * resolveAssetPath('cart-summary', 'css');
- * ```
- */
-function resolveAssetPath(tagName, asset) {
-    const basename = tagName.split('-').pop() ?? tagName;
-    const m = asset.match(/^([a-z]+)([A-Z][a-z]*)$/);
-    if (m) {
-        return `./${basename}.${m[1]}.${m[2].toLowerCase()}`;
-    }
-    return `./${basename}.${asset.toLowerCase()}`;
-}
-/**
- * Extract the tag name from a `defineCE('tag-name', ...)` call in source code.
- * Returns the first found tag or undefined.
- *
- * @example Returns `'shop-header'` for the code below.
- * ```ts
- * extractDefineCETag("defineCE('shop-header', ShopHeader);");
- * ```
- */
-function extractDefineCETag(code) {
-    const m = code.match(/defineCE\s*\(\s*['"]([^'"]+)['"]/);
-    return m ? m[1] : undefined;
-}
-/**
- * Strip all line and block comments from source code, replacing
- * their content with equivalent whitespace so character positions stay valid for
- * later string slicing.
- *
- * @example Blanks out the `// note` segment while keeping every character
- * position and line break, so later string slicing stays aligned.
- * ```ts
- * stripComments('const a = 1; // note\nconst b = 2;');
- * ```
- */
-function stripComments(code) {
-    let result = '';
-    let i = 0;
-    while (i < code.length) {
-        // Line comment
-        if (code[i] === '/' && code[i + 1] === '/') {
-            const end = code.indexOf('\n', i);
-            if (end === -1) {
-                result += ' '.repeat(code.length - i);
-                break;
-            }
-            result += ' '.repeat(end - i) + '\n';
-            i = end + 1;
-        }
-        else if (code[i] === '/' && code[i + 1] === '*') {
-            const end = code.indexOf('*/', i + 2);
-            if (end === -1) {
-                result += ' '.repeat(code.length - i);
-                break;
-            }
-            // Preserve newlines inside block comments to keep line positions valid
-            let j = i;
-            while (j <= end + 1) {
-                result += code[j] === '\n' ? '\n' : ' ';
-                j++;
-            }
-            i = end + 2;
-        }
-        else {
-            result += code[i];
-            i++;
-        }
-    }
-    return result;
-}
-/**
- * Read and inline all assets for a given tag, returning an array of
- * `{ key, literal }` entries suitable for building object literals.
- * Plain `.css` files hold CSS custom-property presets and are inlined with
- * their real content so the component injects the default variables at
- * runtime; the same files are also merged into bundle.css as the override
- * placeholder. They are never left empty — an empty string would make the
- * runtime treat the asset as not-yet-loaded and re-fetch it.
- *
- * @example Returns one escaped template literal per descriptor, ready to be joined into an object.
- * ```ts
- * readAssetsInline('/src/shop/header', 'shop-header', ['shadowCss', 'targetHtml']);
- * ```
- *
- * @throws If a companion file for a descriptor does not exist.
- */
-async function readAssetsInline(dir, tagName, assets) {
-    const entries = [];
-    for (const asset of assets) {
-        const relPath = resolveAssetPath(tagName, asset);
-        const filePath = path.resolve(dir, relPath);
-        try {
-            const content = await readFile(filePath, 'utf8');
-            entries.push({
-                key: asset,
-                literal: '`' +
-                    escapeTemplateLiteral(content)
-                        .replace(/[\n\t\r]/g, ' ')
-                        .replace(/\s\s/g, ' ') +
-                    '`',
-            });
-        }
-        catch (_err) {
-            throw new Error(`[load-assets] Cannot resolve asset "${asset}" for component "${tagName}": file not found at ${filePath}`, { cause: _err });
-        }
-    }
-    return entries;
-}
-/**
- * Vite plugin factory that inlines companion `.css` / `.html` assets into the
- * DC classes declaring them through `static assets = [...]`.
- *
- * @example Register the plugin in a Vite config, pointing at the source root.
- * ```ts
- * import { loadAssetsPlugin } from './vite-plugin-load-assets';
- * export default defineConfig({ plugins: [loadAssetsPlugin(__dirname)] });
- * ```
- *
- * @param rootDir Directory holding the component source files.
- * @returns A Vite plugin option.
- */
-export function loadAssetsPlugin(rootDir) {
-    return {
-        name: 'load-assets-inline',
-        async transform(code, id) {
-            if (!code.includes('static assets'))
-                return null;
-            const dir = path.dirname(id);
-            // Strip comments so JSDoc examples don't trigger false matches.
-            // Whitespace-preserving replacement keeps character indices valid.
-            const stripped = stripComments(code);
-            // Resolve the component tag name from defineCE(...) call
-            const tagName = extractDefineCETag(stripped);
-            if (!tagName)
-                return null;
-            // Match: static assets = [ 'asset1' , 'asset2' ];
-            const saRegex = /static\s+assets\s*=\s*\[(.*?)\]\s*;?/gs;
-            const saMatches = [...stripped.matchAll(saRegex)];
-            if (saMatches.length === 0)
-                return null;
-            let transformed = code;
-            // There should be exactly one per file, but handle all in reverse
-            for (let i = saMatches.length - 1; i >= 0; i--) {
-                const match = saMatches[i];
-                const assetListRaw = match[1];
-                const assets = assetListRaw
-                    .split(',')
-                    .map((a) => a.trim().replace(/^['"]|['"]$/g, ''))
-                    .filter(Boolean);
-                if (assets.length === 0)
-                    continue;
-                // Read and inline all asset contents
-                const entries = await readAssetsInline(dir, tagName, assets);
-                // Build the static _assets property to inject as first line in class body
-                const objEntries = entries.map((e) => `${e.key}: ${e.literal}`);
-                const assetsObj = `{ ${objEntries.join(', ')} }`;
-                // Find the opening brace of the class that owns this `static assets` declaration.
-                // Search backwards from the match position to locate "class ... {" — we need the
-                // index of the opening brace so we can insert right after it.
-                const beforeMatch = stripped.substring(0, match.index);
-                const classOpenMatch = /class\s+\w+[^{]*\{/.exec(beforeMatch);
-                if (!classOpenMatch)
-                    continue;
-                // Absolute position of the opening brace in `transformed` (= same as in `stripped`)
-                const classBraceIndex = classOpenMatch.index + classOpenMatch[0].length - 1;
-                // Build injection code — static _assets as first line inside the class body
-                const injectCode = `\n    static _assets = ${assetsObj};\n`;
-                transformed =
-                    transformed.substring(0, classBraceIndex + 1) +
-                        injectCode +
-                        transformed.substring(classBraceIndex + 1);
-            }
-            return transformed;
-        },
-    };
-}