zyzz 0.0.3 → 0.0.5

package/dist/compiler/internal/Themes.js

@@ -1,10 +1,12 @@
 import * as Identity from '../../internal/Identity.js';
 import * as Identifiers from './Identifiers.js';
-import * as Config from '../../Config.js';
+import * as Config from '../../internal/Configuration.js';
 import * as Expression from './Expression.js';
 import * as Configurations from './Configurations.js';
 import * as Token from '../../internal/Token.js';
-import * as Theme from '../../Theme.js';
+import * as Theme from '../../internal/Theme.js';
+import * as VariableSets from '../../internal/VariableSets.js';
+import * as Vars from '../../Vars.js';
 /** Internal context passed between graph extraction and module rewriting. */
 export const context = Symbol('zyzz.source.graph');
 /** Collects immutable module-level themes without evaluating source. */
@@ -14,12 +16,14 @@ export function collect(program, options) {
     const aliasBindings = new Map();
     const aliasReferences = new Set();
     const appearances = new Set();
+    const scopeApplications = new Map();
     const selections = new Set();
     const calls = [];
     const scripts = new Set();
     const definitions = new Map();
     const factories = new Set();
     const imports = new Set();
+    const variableImports = new Set();
     const configImports = new Set();
     const configs = new Map();
     const configBindings = new Map();
@@ -38,8 +42,10 @@ export function collect(program, options) {
                 specifier.importKind !== 'type' &&
                 (specifier.imported.type === 'Identifier'
                     ? specifier.imported.name
-                    : specifier.imported.value) === 'Theme')
+                    : specifier.imported.value) === 'Vars') {
                 imports.add(specifier.start);
+                variableImports.add(specifier.start);
+            }
             else if (specifier.type === 'ImportSpecifier' &&
                 specifier.importKind !== 'type' &&
                 (specifier.imported.type === 'Identifier'
@@ -94,6 +100,12 @@ export function collect(program, options) {
     }
     const namespaces = new Set();
     const configNamespaces = new Set();
+    const variableNamespaces = new Set();
+    for (const node of program.body)
+        if (node.type === 'ImportDeclaration')
+            for (const specifier of node.specifiers)
+                if (variableImports.has(specifier.start))
+                    variableNamespaces.add(specifier.local.name);
     for (const node of program.body)
         if (node.type === 'ImportDeclaration')
             for (const specifier of node.specifiers)
@@ -144,15 +156,17 @@ export function collect(program, options) {
             !config.call.initialization &&
             !config.call.root &&
             path.length === 1 &&
-            ['themes', 'script', 'appearance'].includes(path[0])) {
+            ['themes', 'vars', 'script', 'appearance'].includes(path[0])) {
             const key = path[0];
+            if (config.call.variableConfig && key === 'themes')
+                return undefined;
             if (key === 'script')
                 scripts.add(config.call.name);
             if (key === 'appearance')
                 appearances.add(config.call.name);
             if (key === 'themes' && !config.call.options?.themes)
                 return undefined;
-            if (key === 'themes')
+            if (key === 'themes' || key === 'vars')
                 selections.add(config.call.name);
             if (key === 'script' && !config.call.script)
                 fail('This packed configuration does not provide script(); rebuild its library with initialization support.', node);
@@ -160,7 +174,7 @@ export function collect(program, options) {
                 fail('This packed configuration does not provide appearance; rebuild its library with root control support.', node);
             const members = Object.fromEntries(Object.entries(config.members ?? {}).flatMap(([name, member]) => {
                 const parts = JSON.parse(name);
-                return key === 'themes' && parts[0] === 'themes'
+                return (key === 'themes' || key === 'vars') && parts[0] === 'themes'
                     ? [[JSON.stringify(parts.slice(1)), member]]
                     : [];
             }));
@@ -189,9 +203,48 @@ export function collect(program, options) {
             return { root: true };
         return { selection: true };
     }
-    function data(node) {
+    function readReference(node, derived) {
+        if (node.type !== 'MemberExpression')
+            return undefined;
+        const path = [];
+        let root = node;
+        while (root.type === 'MemberExpression' && !root.optional) {
+            const key = !root.computed && root.property.type === 'Identifier'
+                ? root.property.name
+                : root.property.type === 'Literal'
+                    ? String(root.property.value)
+                    : undefined;
+            if (key === undefined)
+                return undefined;
+            path.unshift(key);
+            root = root.object;
+        }
+        if (root.type !== 'Identifier')
+            return undefined;
+        const local = derived?.name === root.name;
+        const call = names.get(root.name);
+        if (!local && !call)
+            return undefined;
+        let value = local ? derived.vars : themes[call.name]?.tokens;
+        if (!local && !call.variableSet && !call.directVariables) {
+            if (!['vars', 'tokens'].includes(path.shift()))
+                return undefined;
+        }
+        for (const key of path)
+            value =
+                value && typeof value === 'object'
+                    ? Object.getOwnPropertyDescriptor(value, key)?.value
+                    : undefined;
+        return Token.is(value) ? value : undefined;
+    }
+    function data(node, derived) {
+        const reference = readReference(node, derived);
+        if (reference) {
+            factoryReferences.add(node.start);
+            return reference;
+        }
         if (node.type === 'TSAsExpression' || node.type === 'TSSatisfiesExpression')
-            return data(node.expression);
+            return data(node.expression, derived);
         if (node.type === 'Literal' &&
             (typeof node.value === 'string' || typeof node.value === 'number'))
             return node.value;
@@ -204,7 +257,7 @@ export function collect(program, options) {
             return node.elements.map((element) => {
                 if (!element || element.type === 'SpreadElement')
                     return fail('Theme arrays require dense literal elements.', node);
-                return data(element);
+                return data(element, derived);
             });
         if (node.type !== 'ObjectExpression')
             return fail('Theme values must be literal data; expressions are not evaluated.', node);
@@ -229,7 +282,7 @@ export function collect(program, options) {
             })();
             if (key === undefined || Object.hasOwn(result, key))
                 return fail('Theme data requires unique literal keys.', property);
-            result[key] = data(property.value);
+            result[key] = data(property.value, derived);
         }
         return result;
     }
@@ -240,7 +293,7 @@ export function collect(program, options) {
         if (node.type === 'TSAsExpression' || node.type === 'TSSatisfiesExpression')
             return type(node.expression);
         if (node.type !== 'ObjectExpression')
-            return JSON.stringify(data(node));
+            return Configurations.type(data(node));
         return `{${node.properties
             .map((property) => {
             if (property.type !== 'Property')
@@ -308,9 +361,14 @@ export function collect(program, options) {
             let name = `${options.namespace}-${binding}`;
             if (!configNamespaces.has(expression.callee.object.name) &&
                 member.property.name === 'define') {
-                const id = Identifiers.explicit(expression);
+                const argument = expression.arguments[1];
+                const callback = argument && Expression.unwrap(argument);
+                const id = Identifiers.explicit(expression, callback?.type === 'ArrowFunctionExpression' ||
+                    callback?.type === 'FunctionExpression'
+                    ? 2
+                    : 1);
                 if (id !== undefined)
-                    name = Identity.requireId(id, 'Theme.define');
+                    name = Identity.requireId(id, 'Vars.define');
             }
             if (configNamespaces.has(expression.callee.object.name)) {
                 try {
@@ -361,7 +419,8 @@ export function collect(program, options) {
                             !link.call.root &&
                             (key === 'script' ||
                                 key === 'appearance' ||
-                                (key === 'themes' && link.call.options?.themes))) {
+                                (key === 'themes' && link.call.options?.themes) ||
+                                (key === 'vars' && link.call.variableConfig))) {
                             if ((key === 'script' && !link.call.script) ||
                                 (key === 'appearance' && !link.call.appearance) ||
                                 link.call.selection ||
@@ -371,11 +430,12 @@ export function collect(program, options) {
                                 scripts.add(link.call.name);
                             if (key === 'appearance')
                                 appearances.add(link.call.name);
-                            if (key === 'themes')
+                            if (key === 'themes' || key === 'vars')
                                 selections.add(link.call.name);
                             const members = Object.fromEntries(Object.entries(link.members ?? {}).flatMap(([pathKey, member]) => {
                                 const path = JSON.parse(pathKey);
-                                return key === 'themes' && path[0] === 'themes'
+                                return (key === 'themes' || key === 'vars') &&
+                                    (path[0] === 'themes' || path[0] === 'vars')
                                     ? [[JSON.stringify(path.slice(1)), member]]
                                     : [];
                             }));
@@ -398,6 +458,8 @@ export function collect(program, options) {
                                 exports[id.name] = selection;
                             continue;
                         }
+                        if (link.call.variableConfig && ['theme', 'themes'].includes(key))
+                            fail('Use vars for references and scope selection.', id);
                         const member = link.members?.[JSON.stringify([key])];
                         if (!member)
                             fail('Destructure only style and the configured single theme; other helpers remain unsupported.', id);
@@ -408,7 +470,8 @@ export function collect(program, options) {
                     }
                 }
                 catch (error) {
-                    if (!(error instanceof Config.InvalidError))
+                    if (!(error instanceof Config.InvalidError) &&
+                        !(error instanceof Vars.InvalidError))
                         throw error;
                     fail(error.message, expression);
                 }
@@ -420,20 +483,54 @@ export function collect(program, options) {
             try {
                 if (member.property.name === 'define') {
                     if (expression.arguments.length < 1 ||
-                        expression.arguments.length > 2)
-                        fail('Theme.define requires one literal token object.', expression);
-                    const input = data(expression.arguments[0]);
+                        expression.arguments.length > 3)
+                        fail('Vars.define requires one literal variable object.', expression);
+                    let input = data(expression.arguments[0]);
                     tokenType = type(expression.arguments[0]);
-                    const original = Theme.define(input);
-                    definition = Token.bind(original, Object.freeze({ [Token.identity]: name }));
+                    const variableSet = variableNamespaces.has(expression.callee.object.name);
+                    const argument = expression.arguments[1];
+                    const callback = argument && Expression.unwrap(argument);
+                    if (variableSet &&
+                        (callback?.type === 'ArrowFunctionExpression' ||
+                            callback?.type === 'FunctionExpression')) {
+                        const parameter = callback.params[0];
+                        const body = (() => {
+                            if (callback.body?.type !== 'BlockStatement')
+                                return callback.body;
+                            if (callback.body.body.length === 1 &&
+                                callback.body.body[0]?.type === 'ReturnStatement')
+                                return callback.body.body[0].argument;
+                            return undefined;
+                        })();
+                        if (callback.async ||
+                            callback.generator ||
+                            callback.params.length !== 1 ||
+                            parameter?.type !== 'Identifier' ||
+                            !body)
+                            fail('Derived variables require one named parameter and a literal return value.', callback);
+                        const base = VariableSets.build(input, Object.freeze({ variableSet: true, [Token.identity]: name }));
+                        input = VariableSets.merge(input, data(body, { name: parameter.name, vars: base }));
+                        tokenType = Configurations.type(input);
+                    }
+                    else if (expression.arguments.length > 2)
+                        fail('Vars.define accepts a third argument only with a derived callback.', expression);
+                    const original = variableSet
+                        ? VariableSets.theme(VariableSets.build(input, Object.freeze({ variableSet: true, [Token.identity]: name })))
+                        : Theme.define(input);
+                    definition = Token.bind(original, Object.freeze({
+                        ...original[Token.definition].contract,
+                        [Token.identity]: name,
+                    }));
                 }
                 else {
                     const base = expression.arguments[0];
                     const parent = base ? resolve(base)?.call : undefined;
                     if (expression.arguments.length !== 2 || !parent)
-                        fail('Theme.extend requires a preceding local theme and literal overrides.', expression);
+                        fail('Vars.extend requires a preceding variable set and literal overrides.', expression);
                     factoryReferences.add(base.start);
-                    definition = Theme.extend(themes[parent.name], data(expression.arguments[1]));
+                    definition = variableNamespaces.has(expression.callee.object.name)
+                        ? VariableSets.theme(Vars.extend(VariableSets.from(themes[parent.name][Token.definition]), data(expression.arguments[1])))
+                        : Theme.extend(themes[parent.name], data(expression.arguments[1]));
                     if (definition[Token.definition].contract[Token.identity]?.startsWith('id-'))
                         name = definition.className.slice('z_theme-'.length);
                     tokenType = parent.tokenType;
@@ -443,11 +540,19 @@ export function collect(program, options) {
             catch (error) {
                 if (error instanceof InvalidError)
                     throw error;
-                if (!(error instanceof Theme.InvalidError))
+                if (!(error instanceof Theme.InvalidError) &&
+                    !(error instanceof Vars.InvalidError))
                     throw error;
                 fail(error.message, expression);
             }
             const call = Object.freeze({
+                ...(variableNamespaces.has(expression.callee.object.name)
+                    ? {
+                        variableSet: true,
+                        directVariables: true,
+                        type: `import('zyzz').Vars.Definition<${tokenType}>`,
+                    }
+                    : {}),
                 ...(output ? { output } : {}),
                 end: expression.end,
                 name,
@@ -527,7 +632,8 @@ export function collect(program, options) {
                     !link.call.root &&
                     (key === 'script' ||
                         key === 'appearance' ||
-                        (key === 'themes' && link.call.options?.themes))) {
+                        (key === 'themes' && link.call.options?.themes) ||
+                        (key === 'vars' && link.call.variableConfig))) {
                     if ((key === 'script' && !link.call.script) ||
                         (key === 'appearance' && !link.call.appearance) ||
                         link.call.selection ||
@@ -537,11 +643,12 @@ export function collect(program, options) {
                         scripts.add(link.call.name);
                     if (key === 'appearance')
                         appearances.add(link.call.name);
-                    if (key === 'themes')
+                    if (key === 'themes' || key === 'vars')
                         selections.add(link.call.name);
                     const members = Object.fromEntries(Object.entries(link.members ?? {}).flatMap(([pathKey, member]) => {
                         const path = JSON.parse(pathKey);
-                        return key === 'themes' && path[0] === 'themes'
+                        return (key === 'themes' || key === 'vars') &&
+                            (path[0] === 'themes' || path[0] === 'vars')
                             ? [[JSON.stringify(path.slice(1)), member]]
                             : [];
                     }));
@@ -564,6 +671,8 @@ export function collect(program, options) {
                         exports[id.name] = selection;
                     continue;
                 }
+                if (link.call.variableConfig && ['theme', 'themes'].includes(key))
+                    fail('Use vars for references and scope selection.', id);
                 const member = link.members?.[JSON.stringify([key])];
                 if (!member)
                     fail('Destructure only style and the configured single theme; other helpers remain unsupported.', id);
@@ -775,8 +884,13 @@ export function collect(program, options) {
                 !parent.optional) {
                 if (config.call.selection && config.call.catalogOnly)
                     fail('This legacy catalog is not callable; rebuild its library.', node);
-                if (config.call.selection)
+                if (config.call.selection) {
                     selections.add(config.call.name);
+                    scopeApplications.set(parent.start, {
+                        end: parent.end,
+                        output: config.call.options?.output === 'html' ? 'html' : undefined,
+                    });
+                }
                 if (config.call.initialization)
                     scripts.add(config.call.name);
                 return true;
@@ -820,21 +934,30 @@ export function collect(program, options) {
                 if (path.length === 1 &&
                     !config.call.selection &&
                     !config.call.initialization &&
-                    ['script', 'themes'].includes(path[0]) &&
+                    ['script', 'themes', 'vars'].includes(path[0]) &&
                     ancestors[index - 1]?.type === 'CallExpression' &&
                     ancestors[index - 1].callee === target &&
                     !ancestors[index - 1].optional) {
+                    if (path[0] === 'vars' && !config.call.variableConfig)
+                        fail('This configuration has no vars.', target);
                     if (path[0] === 'themes' && !config.call.options?.themes)
                         fail('Theme selection requires a named catalog.', target);
-                    if (path[0] === 'themes' && config.call.catalogOnly)
+                    if ((path[0] === 'themes' || path[0] === 'vars') &&
+                        config.call.catalogOnly)
                         fail('This legacy catalog is not callable; rebuild its library.', target);
                     if (path[0] === 'script') {
                         if (!config.call.script)
                             fail('This packed configuration does not provide script(); rebuild its library with initialization support.', target);
                         scripts.add(config.call.name);
                     }
-                    if (path[0] === 'themes')
+                    if (path[0] === 'themes' || path[0] === 'vars') {
                         selections.add(config.call.name);
+                        const application = ancestors[index - 1];
+                        scopeApplications.set(application.start, {
+                            end: application.end,
+                            output: config.call.options?.output === 'html' ? 'html' : undefined,
+                        });
+                    }
                     return true;
                 }
                 if (path.length === 1 &&
@@ -852,10 +975,20 @@ export function collect(program, options) {
                     });
                     return true;
                 }
-                const linked = config.members?.[JSON.stringify(path)];
+                if (config.call.variableConfig &&
+                    ['theme', 'themes'].includes(path[0]))
+                    fail('Use vars for references and scope selection.', target);
+                const linked = config.call.variableConfig && config.call.selection
+                    ? undefined
+                    : config.members?.[JSON.stringify(path)];
                 if (linked)
                     return themeReference(target, ancestors[index - 1], ancestors.slice(0, index + 1), linked.call);
             }
+            if (config.call.selection && config.call.variableConfig && path.length)
+                return themeReference(node, parent, ancestors, {
+                    ...config.call,
+                    directVariables: true,
+                });
             // A compiled selector is an ordinary runtime function, so passing or storing it is safe.
             if (config.call.selection && !config.call.catalogOnly && !path.length) {
                 selections.add(config.call.name);
@@ -874,7 +1007,8 @@ export function collect(program, options) {
     }
     function themeReference(node, parent, ancestors, theme) {
         const grandparent = ancestors.at(-3);
-        if (factoryReferences.has(node.start))
+        if (factoryReferences.has(node.start) ||
+            ancestors.some((ancestor) => factoryReferences.has(ancestor.start)))
             return true;
         if (exportReferences.has(node.start))
             return true;
@@ -888,23 +1022,25 @@ export function collect(program, options) {
             return true;
         if (parent.type === 'MemberExpression' &&
             parent.object === node &&
-            ((parent.property.type === 'Identifier' &&
-                !parent.computed &&
-                ['tokens', 'vars'].includes(parent.property.name)) ||
+            (theme.directVariables ||
+                (parent.property.type === 'Identifier' &&
+                    !parent.computed &&
+                    ['tokens', 'vars'].includes(parent.property.name)) ||
                 (parent.property.type === 'Literal' &&
                     parent.computed &&
                     ['tokens', 'vars'].includes(String(parent.property.value))))) {
             if (parent.optional)
                 fail('Token references cannot use optional access.', parent);
-            const variable = parent.property.type === 'Identifier'
-                ? parent.property.name === 'vars'
-                : parent.property.type === 'Literal' &&
-                    parent.property.value === 'vars';
-            let value = variable
+            const variable = theme.directVariables ||
+                (parent.property.type === 'Identifier'
+                    ? parent.property.name === 'vars'
+                    : parent.property.type === 'Literal' &&
+                        parent.property.value === 'vars');
+            let value = variable && !theme.directVariables
                 ? themes[theme.name].vars
                 : themes[theme.name].tokens;
-            let target = parent;
-            let index = ancestors.length - 3;
+            let target = theme.directVariables ? node : parent;
+            let index = ancestors.length - (theme.directVariables ? 2 : 3);
             for (; index >= 0; index--) {
                 const ancestor = ancestors[index];
                 if (ancestor.type !== 'MemberExpression' || ancestor.object !== target)
@@ -1040,7 +1176,7 @@ export function collect(program, options) {
             parent.computed ||
             parent.optional ||
             parent.property.type !== 'Identifier')
-            fail('Use local theme.style calls, theme.className reads, or Theme.extend; other theme references require source linking.', node);
+            fail('Use Config.create or Vars.extend with variable definitions; other references require source linking.', node);
         if (['style', 'variants'].includes(parent.property.name) &&
             grandparent?.type === 'CallExpression' &&
             grandparent.callee === parent &&
@@ -1114,25 +1250,28 @@ export function collect(program, options) {
                 if (!alias?.options?.themes)
                     return undefined;
                 const context = {
-                    defaultTheme: String(alias.options.defaultTheme),
-                    themes: Object.fromEntries(Object.entries(alias.options.themes).map(([name, values]) => [
+                    defaultVars: String(alias.options.defaultTheme),
+                    vars: Object.fromEntries(Object.entries(alias.options.themes).map(([name, values]) => [
                         name,
-                        Token.bind(Theme.define(values), contract),
+                        Token.bind(contract.variableSet
+                            ? VariableSets.theme(Vars.define(values))
+                            : Theme.define(values), contract),
                     ])),
                 };
-                Object.freeze(context.themes);
+                Object.freeze(context.vars);
                 nativeContexts.set(contract, Object.freeze(context));
                 return context;
             }
             const entries = Object.entries(config.members ?? {}).flatMap(([key, value]) => {
                 const path = JSON.parse(key);
-                return path[0] === 'themes' && path.length === 2
+                return (path[0] === 'themes' || path[0] === 'vars') &&
+                    path.length === 2
                     ? [[path[1], value.definition]]
                     : [];
             });
             const context = Object.freeze({
-                defaultTheme: String(config.call.options.defaultTheme),
-                themes: Object.freeze(Object.fromEntries(entries)),
+                defaultVars: String(config.call.options.defaultTheme),
+                vars: Object.freeze(Object.fromEntries(entries)),
             });
             nativeContexts.set(contract, context);
             return context;
@@ -1143,6 +1282,7 @@ export function collect(program, options) {
         exports: Object.freeze(exports),
         reference,
         references,
+        scopeApplications,
         scripts,
         selections,
         staticTokens,