@idealyst/theme 1.1.7 → 1.1.9

package/src/babel/plugin.ts

@@ -0,0 +1,187 @@
+/**
+ * Babel plugin that transforms applyExtensions calls into Unistyles-compatible code.
+ *
+ * This plugin runs BEFORE Unistyles' Babel plugin to transform:
+ *
+ * ```typescript
+ * // INPUT:
+ * StyleSheet.create((theme) => {
+ *     return applyExtensions('View', theme, {
+ *         view: createViewStyles(theme),
+ *     });
+ * });
+ *
+ * // OUTPUT:
+ * StyleSheet.create((theme) => ({
+ *     view: __withExtension('View', 'view', theme, createViewStyles(theme)),
+ * }));
+ * ```
+ *
+ * This transformation allows Unistyles to:
+ * 1. See an ObjectExpression return (required for analysis)
+ * 2. Track theme dependencies through the __withExtension call
+ * 3. Update styles reactively when theme changes
+ */
+
+import type { PluginObj, NodePath, types as BabelTypes } from '@babel/core';
+
+interface PluginState {
+    file: {
+        path: NodePath;
+    };
+    needsImport: boolean;
+    importAdded: boolean;
+}
+
+export default function idealystExtensionsPlugin(
+    { types: t }: { types: typeof BabelTypes }
+): PluginObj<PluginState> {
+    return {
+        name: 'idealyst-extensions',
+
+        pre() {
+            this.needsImport = false;
+            this.importAdded = false;
+        },
+
+        visitor: {
+            // Transform applyExtensions calls
+            CallExpression(path, state) {
+                const { node } = path;
+
+                // Check if this is applyExtensions(...)
+                if (!t.isIdentifier(node.callee, { name: 'applyExtensions' })) {
+                    return;
+                }
+
+                // Get arguments: applyExtensions(componentName, theme, styleCreators)
+                const [componentNameNode, themeNode, styleCreatorsNode] = node.arguments;
+
+                // Validate argument types
+                if (!t.isStringLiteral(componentNameNode)) {
+                    return;
+                }
+
+                if (!t.isIdentifier(themeNode)) {
+                    return;
+                }
+
+                if (!t.isObjectExpression(styleCreatorsNode)) {
+                    return;
+                }
+
+                const componentName = componentNameNode.value;
+                const themeName = themeNode.name;
+
+                // Transform each property in styleCreators
+                const transformedProperties = styleCreatorsNode.properties.map((prop) => {
+                    // Skip spread elements and methods
+                    if (!t.isObjectProperty(prop)) {
+                        return prop;
+                    }
+
+                    // Get the key name
+                    let elementName: string;
+                    if (t.isIdentifier(prop.key)) {
+                        elementName = prop.key.name;
+                    } else if (t.isStringLiteral(prop.key)) {
+                        elementName = prop.key.value;
+                    } else {
+                        return prop; // Can't handle computed keys
+                    }
+
+                    // Wrap value: __withExtension('Component', 'element', theme, originalValue)
+                    const wrappedValue = t.callExpression(
+                        t.identifier('__withExtension'),
+                        [
+                            t.stringLiteral(componentName),
+                            t.stringLiteral(elementName),
+                            t.identifier(themeName),
+                            prop.value as BabelTypes.Expression,
+                        ]
+                    );
+
+                    return t.objectProperty(prop.key, wrappedValue);
+                });
+
+                // Replace applyExtensions(...) with the transformed object
+                path.replaceWith(t.objectExpression(transformedProperties));
+
+                // Mark that we need to add the import
+                state.needsImport = true;
+            },
+
+            // Add import at the end of the program
+            Program: {
+                exit(path, state) {
+                    if (!state.needsImport || state.importAdded) {
+                        return;
+                    }
+
+                    // Check if import already exists
+                    const hasImport = path.node.body.some((node) => {
+                        if (!t.isImportDeclaration(node)) return false;
+                        return (
+                            node.source.value === '@idealyst/theme/extensions' ||
+                            node.source.value === '@idealyst/theme'
+                        );
+                    });
+
+                    if (hasImport) {
+                        // Check if __withExtension is already imported
+                        const existingImport = path.node.body.find((node) => {
+                            if (!t.isImportDeclaration(node)) return false;
+                            return node.source.value === '@idealyst/theme/extensions';
+                        });
+
+                        if (existingImport && t.isImportDeclaration(existingImport)) {
+                            const hasWithExtension = existingImport.specifiers.some(
+                                (spec) =>
+                                    t.isImportSpecifier(spec) &&
+                                    t.isIdentifier(spec.imported, { name: '__withExtension' })
+                            );
+
+                            if (!hasWithExtension) {
+                                existingImport.specifiers.push(
+                                    t.importSpecifier(
+                                        t.identifier('__withExtension'),
+                                        t.identifier('__withExtension')
+                                    )
+                                );
+                            }
+                        }
+                        state.importAdded = true;
+                        return;
+                    }
+
+                    // Add new import
+                    const importDecl = t.importDeclaration(
+                        [
+                            t.importSpecifier(
+                                t.identifier('__withExtension'),
+                                t.identifier('__withExtension')
+                            ),
+                        ],
+                        t.stringLiteral('@idealyst/theme/extensions')
+                    );
+
+                    // Insert after other imports
+                    let insertIndex = 0;
+                    for (let i = 0; i < path.node.body.length; i++) {
+                        if (t.isImportDeclaration(path.node.body[i])) {
+                            insertIndex = i + 1;
+                        } else {
+                            break;
+                        }
+                    }
+
+                    path.node.body.splice(insertIndex, 0, importDecl);
+                    state.importAdded = true;
+                },
+            },
+        },
+    };
+}
+
+// Also export as module.exports for CommonJS compatibility
+module.exports = idealystExtensionsPlugin;

package/src/babel/runtime.ts

@@ -0,0 +1,94 @@
+/**
+ * Runtime helper for the idealyst-extensions Babel plugin.
+ *
+ * This function wraps style creator functions to merge extensions from the theme.
+ * It's called by code transformed by the Babel plugin - DO NOT call directly.
+ *
+ * @example
+ * // Babel transforms this:
+ * applyExtensions('Button', theme, { button: createButtonStyles(theme) })
+ *
+ * // Into this:
+ * { button: __withExtension('Button', 'button', theme, createButtonStyles(theme)) }
+ */
+
+/**
+ * Deep merge two objects, with source values taking priority.
+ * Handles nested objects recursively.
+ */
+function deepMerge<T extends object>(target: T, source: Partial<T>): T {
+    const result = { ...target } as T;
+
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = (target as any)[key];
+
+            if (
+                sourceValue !== null &&
+                typeof sourceValue === 'object' &&
+                !Array.isArray(sourceValue) &&
+                targetValue !== null &&
+                typeof targetValue === 'object' &&
+                !Array.isArray(targetValue)
+            ) {
+                (result as any)[key] = deepMerge(targetValue, sourceValue);
+            } else if (sourceValue !== undefined) {
+                (result as any)[key] = sourceValue;
+            }
+        }
+    }
+
+    return result;
+}
+
+/**
+ * Theme type with extensions support.
+ */
+interface ThemeWithExtensions {
+    __extensions?: Record<string, Record<string, any>>;
+    [key: string]: any;
+}
+
+/**
+ * Wrap a style function with extension support.
+ *
+ * @param component - Component name (e.g., 'View', 'Button')
+ * @param element - Style element name (e.g., 'view', 'button', 'text')
+ * @param theme - Theme object (may contain __extensions)
+ * @param baseStyleFn - Base style creator function
+ * @returns Wrapped function that merges extensions
+ */
+export function __withExtension<TProps, TResult>(
+    component: string,
+    element: string,
+    theme: ThemeWithExtensions,
+    baseStyleFn: ((props: TProps) => TResult) | TResult
+): ((props: TProps) => TResult) | TResult {
+    const ext = theme.__extensions?.[component]?.[element];
+
+    // If no extension, return base as-is
+    if (!ext) {
+        return baseStyleFn;
+    }
+
+    // If baseStyleFn is not a function (static style object), merge directly
+    if (typeof baseStyleFn !== 'function') {
+        return deepMerge(baseStyleFn as object, ext) as TResult;
+    }
+
+    // Cast to function type after the typeof check
+    const styleFn = baseStyleFn as (props: TProps) => TResult;
+
+    // Return wrapped function that merges extension at call time
+    return ((props: TProps): TResult => {
+        const base = styleFn(props);
+
+        // If base is not an object, can't merge
+        if (typeof base !== 'object' || base === null) {
+            return base;
+        }
+
+        return deepMerge(base as object, ext) as TResult;
+    }) as (props: TProps) => TResult;
+}

package/src/babel/theme-analyzer.js

@@ -0,0 +1,357 @@
+/**
+ * Theme Analyzer - Extracts theme keys by statically analyzing theme files.
+ *
+ * Traces the declarative builder API:
+ * - createTheme() / fromTheme(base)
+ * - .addIntent('name', {...})
+ * - .addRadius('name', value)
+ * - .addShadow('name', {...})
+ * - .setSizes({ button: { xs: {}, sm: {}, ... }, ... })
+ * - .build()
+ */
+
+const nodePath = require('path');
+const fs = require('fs');
+
+let themeKeys = null;
+let themeLoadAttempted = false;
+
+/**
+ * Extract theme keys by statically analyzing the theme file's AST.
+ */
+function extractThemeKeysFromAST(themeFilePath, babelTypes, verboseMode) {
+    const { parseSync } = require('@babel/core');
+    const traverse = require('@babel/traverse').default;
+    const t = babelTypes;
+
+    const log = (...args) => {
+        if (verboseMode) console.log('[idealyst-plugin]', ...args);
+    };
+
+    const keys = {
+        intents: [],
+        sizes: {},
+        radii: [],
+        shadows: [],
+    };
+
+    log('Reading theme file:', themeFilePath);
+
+    // Read and parse the theme file
+    const code = fs.readFileSync(themeFilePath, 'utf-8');
+    const ast = parseSync(code, {
+        filename: themeFilePath,
+        presets: [
+            ['@babel/preset-typescript', { isTSX: true, allExtensions: true }]
+        ],
+        parserOpts: {
+            plugins: ['typescript', 'jsx']
+        }
+    });
+
+    if (!ast) {
+        throw new Error(`[idealyst-plugin] Failed to parse theme file: ${themeFilePath}`);
+    }
+
+    // Track imports to resolve base themes
+    const imports = new Map(); // varName -> { source, imported }
+
+    // First pass: collect imports
+    traverse(ast, {
+        ImportDeclaration(path) {
+            const source = path.node.source.value;
+            for (const spec of path.node.specifiers) {
+                if (t.isImportSpecifier(spec)) {
+                    const localName = spec.local.name;
+                    const importedName = t.isIdentifier(spec.imported) ? spec.imported.name : spec.imported.value;
+                    imports.set(localName, { source, imported: importedName });
+                }
+            }
+        }
+    });
+
+    /**
+     * Recursively trace a builder chain to extract all method calls.
+     * Returns { calls: Array, baseThemeVar: string | null }
+     */
+    function traceBuilderChain(node, calls = []) {
+        if (!node) return { calls, baseThemeVar: null };
+
+        if (t.isCallExpression(node)) {
+            if (t.isIdentifier(node.callee, { name: 'createTheme' })) {
+                return { calls, baseThemeVar: null };
+            }
+            if (t.isIdentifier(node.callee, { name: 'fromTheme' })) {
+                const arg = node.arguments[0];
+                if (t.isIdentifier(arg)) {
+                    return { calls, baseThemeVar: arg.name };
+                }
+                return { calls, baseThemeVar: null };
+            }
+
+            if (t.isMemberExpression(node.callee)) {
+                const methodName = node.callee.property.name;
+                calls.unshift({ method: methodName, args: node.arguments });
+                return traceBuilderChain(node.callee.object, calls);
+            }
+        }
+
+        return { calls, baseThemeVar: null };
+    }
+
+    /**
+     * Resolve and analyze a base theme from an import.
+     */
+    function analyzeBaseTheme(varName) {
+        const importInfo = imports.get(varName);
+        if (!importInfo) {
+            log('Could not find import for base theme:', varName);
+            return;
+        }
+
+        log('Base theme', varName, 'imported from', importInfo.source);
+
+        let baseThemePath;
+        try {
+            if (importInfo.source.startsWith('.')) {
+                baseThemePath = nodePath.resolve(nodePath.dirname(themeFilePath), importInfo.source);
+                if (!baseThemePath.endsWith('.ts') && !baseThemePath.endsWith('.tsx')) {
+                    if (fs.existsSync(baseThemePath + '.ts')) baseThemePath += '.ts';
+                    else if (fs.existsSync(baseThemePath + '.tsx')) baseThemePath += '.tsx';
+                }
+            } else {
+                const packageDir = nodePath.dirname(themeFilePath);
+
+                // Determine which theme file to look for based on variable name
+                const themeFileName = varName.includes('dark') ? 'darkTheme.ts' : 'lightTheme.ts';
+                let possiblePaths = [];
+
+                if (importInfo.source === '@idealyst/theme') {
+                    possiblePaths = [
+                        // Symlinked packages at root level
+                        `/idealyst-packages/theme/src/${themeFileName}`,
+                        // Standard node_modules
+                        nodePath.resolve(packageDir, `node_modules/@idealyst/theme/src/${themeFileName}`),
+                        // Monorepo structure - walk up to find packages dir
+                        nodePath.resolve(packageDir, `../theme/src/${themeFileName}`),
+                        nodePath.resolve(packageDir, `../../theme/src/${themeFileName}`),
+                        nodePath.resolve(packageDir, `../../../theme/src/${themeFileName}`),
+                        nodePath.resolve(packageDir, `../../packages/theme/src/${themeFileName}`),
+                        nodePath.resolve(packageDir, `../../../packages/theme/src/${themeFileName}`),
+                        // This plugin's own package location
+                        nodePath.resolve(__dirname, `../${themeFileName}`),
+                    ];
+
+                    log('Looking for base theme in:', possiblePaths);
+
+                    for (const p of possiblePaths) {
+                        if (fs.existsSync(p)) {
+                            baseThemePath = p;
+                            log('Found base theme at:', p);
+                            break;
+                        }
+                    }
+                }
+
+                if (!baseThemePath) {
+                    log('Could not resolve base theme path for:', importInfo.source);
+                    if (possiblePaths.length > 0) {
+                        log('Searched paths:', possiblePaths);
+                    }
+                    return;
+                }
+            }
+
+            log('Analyzing base theme file:', baseThemePath);
+
+            const baseKeys = extractThemeKeysFromAST(baseThemePath, babelTypes, verboseMode);
+
+            // Merge base keys
+            keys.intents.push(...baseKeys.intents.filter(k => !keys.intents.includes(k)));
+            keys.radii.push(...baseKeys.radii.filter(k => !keys.radii.includes(k)));
+            keys.shadows.push(...baseKeys.shadows.filter(k => !keys.shadows.includes(k)));
+            for (const [comp, sizes] of Object.entries(baseKeys.sizes)) {
+                if (!keys.sizes[comp]) {
+                    keys.sizes[comp] = sizes;
+                }
+            }
+
+            log('Merged base theme keys');
+        } catch (err) {
+            log('Error analyzing base theme:', err.message);
+        }
+    }
+
+    function getStringValue(node) {
+        if (t.isStringLiteral(node)) return node.value;
+        if (t.isIdentifier(node)) return node.name;
+        return null;
+    }
+
+    function getObjectKeys(node) {
+        if (!t.isObjectExpression(node)) return [];
+        return node.properties
+            .filter(prop => t.isObjectProperty(prop))
+            .map(prop => {
+                if (t.isIdentifier(prop.key)) return prop.key.name;
+                if (t.isStringLiteral(prop.key)) return prop.key.value;
+                return null;
+            })
+            .filter(Boolean);
+    }
+
+    function processBuilderCalls(calls) {
+        log('Processing builder chain with', calls.length, 'method calls');
+
+        for (const { method, args } of calls) {
+            switch (method) {
+                case 'addIntent': {
+                    const name = getStringValue(args[0]);
+                    if (name && !keys.intents.includes(name)) {
+                        keys.intents.push(name);
+                        log('  Found intent:', name);
+                    }
+                    break;
+                }
+                case 'addRadius': {
+                    const name = getStringValue(args[0]);
+                    if (name && !keys.radii.includes(name)) {
+                        keys.radii.push(name);
+                        log('  Found radius:', name);
+                    }
+                    break;
+                }
+                case 'addShadow': {
+                    const name = getStringValue(args[0]);
+                    if (name && !keys.shadows.includes(name)) {
+                        keys.shadows.push(name);
+                        log('  Found shadow:', name);
+                    }
+                    break;
+                }
+                case 'setSizes': {
+                    const sizesObj = args[0];
+                    if (t.isObjectExpression(sizesObj)) {
+                        for (const prop of sizesObj.properties) {
+                            if (!t.isObjectProperty(prop)) continue;
+                            const componentName = t.isIdentifier(prop.key) ? prop.key.name :
+                                                  t.isStringLiteral(prop.key) ? prop.key.value : null;
+                            if (componentName && t.isObjectExpression(prop.value)) {
+                                keys.sizes[componentName] = getObjectKeys(prop.value);
+                                log('  Found sizes for', componentName + ':', keys.sizes[componentName]);
+                            }
+                        }
+                    }
+                    break;
+                }
+                case 'build':
+                    break;
+                default:
+                    log('  Skipping unknown method:', method);
+            }
+        }
+    }
+
+    // Second pass: find theme builder chains
+    traverse(ast, {
+        VariableDeclarator(path) {
+            const init = path.node.init;
+            if (!init) return;
+
+            if (t.isCallExpression(init) &&
+                t.isMemberExpression(init.callee) &&
+                t.isIdentifier(init.callee.property, { name: 'build' })) {
+
+                const { calls, baseThemeVar } = traceBuilderChain(init);
+
+                if (baseThemeVar) {
+                    log('Found fromTheme with base:', baseThemeVar);
+                    analyzeBaseTheme(baseThemeVar);
+                }
+
+                processBuilderCalls(calls);
+            }
+        },
+
+        ExportNamedDeclaration(path) {
+            if (!path.node.declaration) return;
+            if (!t.isVariableDeclaration(path.node.declaration)) return;
+
+            for (const decl of path.node.declaration.declarations) {
+                const init = decl.init;
+                if (!init) continue;
+
+                if (t.isCallExpression(init) &&
+                    t.isMemberExpression(init.callee) &&
+                    t.isIdentifier(init.callee.property, { name: 'build' })) {
+
+                    const { calls, baseThemeVar } = traceBuilderChain(init);
+
+                    if (baseThemeVar) {
+                        log('Found fromTheme with base:', baseThemeVar);
+                        analyzeBaseTheme(baseThemeVar);
+                    }
+
+                    processBuilderCalls(calls);
+                }
+            }
+        }
+    });
+
+    return keys;
+}
+
+/**
+ * Load theme keys by statically analyzing the theme file.
+ *
+ * REQUIRED Options:
+ * - themePath: Path to the consumer's theme file (e.g., './src/theme/styles.ts')
+ */
+function loadThemeKeys(opts, rootDir, babelTypes, verboseMode) {
+    if (themeLoadAttempted) return themeKeys;
+    themeLoadAttempted = true;
+
+    const themePath = opts.themePath;
+
+    if (!themePath) {
+        throw new Error(
+            '[idealyst-plugin] themePath is required!\n' +
+            'Add it to your babel config:\n' +
+            '  ["@idealyst/theme/plugin", { themePath: "./src/theme/styles.ts" }]'
+        );
+    }
+
+    const resolvedPath = themePath.startsWith('.')
+        ? nodePath.resolve(rootDir, themePath)
+        : require.resolve(themePath, { paths: [rootDir] });
+
+    console.log('[idealyst-plugin] Analyzing theme file:', resolvedPath);
+
+    themeKeys = extractThemeKeysFromAST(resolvedPath, babelTypes, verboseMode);
+
+    // Always log the extracted keys
+    console.log('[idealyst-plugin] Extracted theme keys:');
+    console.log('  intents:', themeKeys.intents);
+    console.log('  radii:', themeKeys.radii);
+    console.log('  shadows:', themeKeys.shadows);
+    console.log('  sizes:');
+    for (const [component, sizes] of Object.entries(themeKeys.sizes)) {
+        console.log(`    ${component}:`, sizes);
+    }
+
+    return themeKeys;
+}
+
+/**
+ * Reset the theme cache (useful for testing or hot reload).
+ */
+function resetThemeCache() {
+    themeKeys = null;
+    themeLoadAttempted = false;
+}
+
+module.exports = {
+    extractThemeKeysFromAST,
+    loadThemeKeys,
+    resetThemeCache,
+};