@plumeria/utils 20.0.0 → 21.1.0

package/dist/compile.js

@@ -44,6 +44,7 @@ const index_1 = require("./index");
 const index_2 = require("./index");
 const dynamicKey_1 = require("./dynamicKey");
 const varType_1 = require("./varType");
+const references_1 = require("./references");
 const unwrapExport = (node) => {
     if (node?.type === 'ExportDeclaration')
         return node.declaration;
@@ -264,6 +265,8 @@ const applyWrites = (tables, writes) => {
 const sheetCache = new Map();
 let sheetCacheContext = '';
 let sheetGlobals = '';
+const VIEW_TRANSITION_ELEMENTS = ['ViewTransition', 'unstable_ViewTransition'];
+const VIEW_TRANSITION_PROPS = ['default', 'enter', 'exit', 'update', 'share'];
 function compileCSS(options) {
     const { include, exclude, cwd = process.cwd(), styleProp = index_1.DEFAULT_STYLE_PROP, } = options;
     const propertyPolicy = (0, index_1.resolvePropertyPolicy)(options);
@@ -358,9 +361,30 @@ function compileCSS(options) {
         const localImports = {};
         const localStyleAliases = {};
         const registeredStyleCalls = new Set();
+        const viewTransitionElements = new Set();
+        const reactNamespaces = new Set();
         (0, index_1.traverse)(ast, {
             ImportDeclaration({ node }) {
                 const sourcePath = node.source.value;
+                if (sourcePath === 'react') {
+                    if (node.typeOnly)
+                        return;
+                    node.specifiers.forEach((specifier) => {
+                        if (specifier.type === 'ImportSpecifier') {
+                            const importedName = specifier.imported
+                                ? specifier.imported.value
+                                : specifier.local.value;
+                            if (!specifier.isTypeOnly &&
+                                VIEW_TRANSITION_ELEMENTS.includes(importedName)) {
+                                viewTransitionElements.add(specifier.local.value);
+                            }
+                        }
+                        else {
+                            reactNamespaces.add(specifier.local.value);
+                        }
+                    });
+                    return;
+                }
                 if (sourcePath === '@plumeria/core') {
                     node.specifiers.forEach((specifier) => {
                         if (specifier.type === 'ImportNamespaceSpecifier') {
@@ -605,6 +629,54 @@ function compileCSS(options) {
         }
         const ownerComponentOf = (at) => components.find((c) => at.span.start >= c.node.span.start &&
             at.span.start <= c.node.span.end)?.name;
+        const isViewTransition = (name) => name.type === 'Identifier'
+            ? viewTransitionElements.has(name.value)
+            : name.type === 'JSXMemberExpression' &&
+                name.object.type === 'Identifier' &&
+                reactNamespaces.has(name.object.value) &&
+                VIEW_TRANSITION_ELEMENTS.includes(name.property.value);
+        let viewTransitionReferences;
+        const processViewTransitionClass = (expr) => {
+            switch (expr.type) {
+                case 'ParenthesisExpression':
+                case 'TsAsExpression':
+                case 'TsSatisfiesExpression':
+                case 'TsNonNullExpression':
+                    return processViewTransitionClass(expr.expression);
+                case 'ConditionalExpression':
+                    processViewTransitionClass(expr.consequent);
+                    return processViewTransitionClass(expr.alternate);
+                case 'TemplateLiteral':
+                    return expr.expressions.forEach(processViewTransitionClass);
+                case 'BinaryExpression':
+                    if (['&&', '||', '??'].includes(expr.operator)) {
+                        processViewTransitionClass(expr.left);
+                        processViewTransitionClass(expr.right);
+                    }
+                    return;
+                case 'ObjectExpression':
+                    expr.properties.forEach((property) => {
+                        if (property.type === 'KeyValueProperty') {
+                            processViewTransitionClass(property.value);
+                        }
+                        else if (property.type === 'Identifier') {
+                            processViewTransitionClass(property);
+                        }
+                    });
+                    return;
+                case 'Identifier': {
+                    viewTransitionReferences ??=
+                        (0, references_1.collectReferenceIdentifiers)(ast).references;
+                    if (!viewTransitionReferences.has(expr.span.start))
+                        return;
+                    const hash = mergedViewTransitionTable[expr.value];
+                    if (typeof hash === 'string' && hash) {
+                        (0, index_1.extractOndemandStyles)({ viewTransitionClass: `vt-${hash}` }, (0, index_1.appendSheet)(extractedSheets), scannedTables);
+                    }
+                    return;
+                }
+            }
+        };
         const processStyle = (style) => {
             (0, index_1.extractOndemandStyles)(style, (0, index_1.appendSheet)(extractedSheets), scannedTables);
             const records = (0, index_1.getStyleRecords)(style);
@@ -1039,7 +1111,7 @@ function compileCSS(options) {
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     writes.keyframesObjectTable[hash] = obj;
                 }
-                else if (propName === 'viewTransition' &&
+                else if (propName === 'viewTransitionClass' &&
                     args.length > 0 &&
                     index_1.t.isObjectExpression(args[0].expression)) {
                     const obj = (0, index_1.objectExpressionToObject)(args[0].expression, ctx.mergedStaticTable, ctx.mergedKeyframesTable, ctx.mergedViewTransitionTable, ctx.mergedCreateThemeHashTable, ctx.scannedTables.createThemeObjectTable, ctx.mergedCreateTable, ctx.mergedCreateStaticHashTable, ctx.scannedTables.createStaticObjectTable, undefined, ctx.mergedVarTypeTable, ctx.mergedPositionTryTable);
@@ -1206,6 +1278,17 @@ function compileCSS(options) {
                     processCall(path.node);
             },
             JSXOpeningElement({ node }) {
+                if (isViewTransition(node.name)) {
+                    node.attributes.forEach((attr) => {
+                        if (attr.type === 'JSXAttribute' &&
+                            attr.name.type === 'Identifier' &&
+                            VIEW_TRANSITION_PROPS.includes(attr.name.value) &&
+                            attr.value?.type === 'JSXExpressionContainer' &&
+                            attr.value.expression.type !== 'JSXEmptyExpression') {
+                            processViewTransitionClass(attr.value.expression);
+                        }
+                    });
+                }
                 if (node.name.type === 'Identifier') {
                     const tagName = node.name.value;
                     if (tagName[0] !== tagName[0].toUpperCase())

package/dist/parser.d.ts

@@ -58,6 +58,7 @@ export declare function fileTableKeys(filePath: string, tableName: string): Read
 export declare function scanOverlay(scanCwd?: string, styleProp?: string): Tables;
 export declare function scanAll(scanCwd?: string, styleProp?: string): Tables;
 export declare function getFileDependencies(filePath: string): string[];
+export declare function exportNames(filePath: string, withDefault?: boolean, visited?: Set<string>): string[];
 export declare function resolveExport(filePath: string, exportName: string, visited?: Set<string>): {
     filePath: string;
     localName: string;

package/dist/parser.js

@@ -50,6 +50,7 @@ exports.fileTableKeys = fileTableKeys;
 exports.scanOverlay = scanOverlay;
 exports.scanAll = scanAll;
 exports.getFileDependencies = getFileDependencies;
+exports.exportNames = exportNames;
 exports.resolveExport = resolveExport;
 exports.extractOndemandStyles = extractOndemandStyles;
 exports.deepMerge = deepMerge;
@@ -1731,7 +1732,7 @@ function runScan(scanCwd, styleProp) {
                                     'createTheme',
                                     'createStatic',
                                     'keyframes',
-                                    'viewTransition',
+                                    'viewTransitionClass',
                                     'positionTry',
                                     'varType',
                                 ].includes(method)) {
@@ -1763,7 +1764,7 @@ function runScan(scanCwd, styleProp) {
                                 const isPassOneMethod = method === 'createStatic' ||
                                     method === 'createTheme' ||
                                     method === 'keyframes' ||
-                                    method === 'viewTransition' ||
+                                    method === 'viewTransitionClass' ||
                                     method === 'positionTry' ||
                                     method === 'varType';
                                 if (isFirstPass && !isPassOneMethod)
@@ -1812,7 +1813,7 @@ function runScan(scanCwd, styleProp) {
                                     localPositionTryObjectTable[hash] = obj;
                                     registerObjectOwner('positionTryObjectTable', hash, filePath);
                                 }
-                                else if (method === 'viewTransition') {
+                                else if (method === 'viewTransitionClass') {
                                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                                     localViewTransitionHashTable[name] = hash;
                                     localTables.viewTransitionHashTable[uniqueKey] = hash;
@@ -2581,29 +2582,49 @@ function extractAndCacheExports(filePath, ast, mtimeMs) {
     }
     fileCache[filePath].exportsMtimeMs = mtimeMs;
 }
+function refreshExports(filePath) {
+    try {
+        const stats = statFile(filePath);
+        if ((!fileCache[filePath]?.exports ||
+            fileCache[filePath].exportsMtimeMs !== stats.mtimeMs) &&
+            stats.isFile()) {
+            const source = (0, sourceCache_1.readSource)(filePath);
+            const ast = (0, core_1.parseSync)(source, {
+                syntax: 'typescript',
+                tsx: true,
+                target: 'es2022',
+            });
+            extractAndCacheExports(filePath, ast, stats.mtimeMs);
+        }
+    }
+    catch (e) {
+    }
+}
+function exportNames(filePath, withDefault = true, visited = new Set()) {
+    if (visited.has(filePath))
+        return [];
+    visited.add(filePath);
+    refreshExports(filePath);
+    const exports = fileCache[filePath]?.exports;
+    if (!exports)
+        return [];
+    const names = [
+        ...exports.localExports,
+        ...Object.keys(exports.reExports),
+    ].filter((name) => withDefault || name !== 'default');
+    for (const source of exports.starExports) {
+        const actualPath = (0, resolver_1.resolveImportPath)(source, filePath);
+        if (actualPath)
+            names.push(...exportNames(actualPath, false, visited));
+    }
+    return names;
+}
 function resolveExport(filePath, exportName, visited = new Set()) {
     const key = `${filePath}-${exportName}`;
     if (visited.has(key))
         return null;
     visited.add(key);
-    {
-        try {
-            const stats = statFile(filePath);
-            if ((!fileCache[filePath]?.exports ||
-                fileCache[filePath].exportsMtimeMs !== stats.mtimeMs) &&
-                stats.isFile()) {
-                const source = (0, sourceCache_1.readSource)(filePath);
-                const ast = (0, core_1.parseSync)(source, {
-                    syntax: 'typescript',
-                    tsx: true,
-                    target: 'es2022',
-                });
-                extractAndCacheExports(filePath, ast, stats.mtimeMs);
-            }
-        }
-        catch (e) {
-        }
-    }
+    refreshExports(filePath);
     const cached = fileCache[filePath];
     if (!cached || !cached.exports)
         return null;

package/dist/propertyPolicy.js

@@ -37,7 +37,12 @@ exports.assertPropertyPolicy = exports.resolvePropertyPolicy = void 0;
 const path = __importStar(require("path"));
 const zss_engine_1 = require("zss-engine");
 const parser_1 = require("./parser");
-const STYLE_APIS = ['create', 'keyframes', 'viewTransition', 'positionTry'];
+const STYLE_APIS = [
+    'create',
+    'keyframes',
+    'viewTransitionClass',
+    'positionTry',
+];
 const MESSAGES = {
     physical: (name, counterpart) => `'${name}' is the physical name of this property. Write it as '${counterpart}', which follows the writing mode.`,
     logical: (name, counterpart) => `'${name}' is the logical name of this property. This project is written in physical properties; use '${counterpart}'.`,

package/dist/transform.js

@@ -599,6 +599,14 @@ const transformSource = async (env) => {
             : null;
     };
     const registeredStyleCalls = new Set();
+    const dropDefinition = (init, declSpan, isExported) => {
+        const span = isExported ? init.span : declSpan;
+        replacements.push({
+            start: span.start - baseByteOffset,
+            end: span.end - baseByteOffset,
+            content: isExported ? '""' : '',
+        });
+    };
     const registerStyle = (node, declSpan, isExported) => {
         let propName;
         const init = unwrapStyleExpression(node.init);
@@ -777,11 +785,12 @@ const transformSource = async (env) => {
                 }
                 mergedVarTypeTable[node.id.value] = hash;
                 (scannedTables.varTypeObjectTable ??= {})[hash] = obj;
-                replacements.push({
-                    start: init.span.start - baseByteOffset,
-                    end: init.span.end - baseByteOffset,
-                    content: JSON.stringify(`--pr-${hash}`),
-                });
+                dropDefinition(init, declSpan, isExported);
+            }
+            else if (['keyframes', 'viewTransitionClass', 'positionTry'].includes(propName) &&
+                parser_1.t.isObjectExpression(init.arguments[0].expression)) {
+                registeredStyleCalls.add(init.span.start);
+                dropDefinition(init, declSpan, isExported);
             }
             else if (propName === 'createStatic' &&
                 parser_1.t.isObjectExpression(init.arguments[0].expression)) {
@@ -929,14 +938,16 @@ const transformSource = async (env) => {
                         ], localConstNodes, getSource));
                         const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                         scannedTables.keyframesObjectTable[hash] = obj;
-                        replacements.push({
-                            start: node.span.start - baseByteOffset,
-                            end: node.span.end - baseByteOffset,
-                            content: JSON.stringify(`kf-${hash}`),
-                        });
+                        if (!registeredStyleCalls.has(node.span.start)) {
+                            replacements.push({
+                                start: node.span.start - baseByteOffset,
+                                end: node.span.end - baseByteOffset,
+                                content: JSON.stringify(`kf-${hash}`),
+                            });
+                        }
                     }
                 }
-                else if (propName === 'viewTransition' &&
+                else if (propName === 'viewTransitionClass' &&
                     args.length > 0 &&
                     parser_1.t.isObjectExpression(args[0].expression)) {
                     const obj = (0, parser_1.objectExpressionToObject)(args[0].expression, mergedStaticTable, mergedKeyframesTable, mergedViewTransitionTable, mergedCreateThemeHashTable, scannedTables.createThemeObjectTable, mergedCreateTable, mergedCreateStaticHashTable, scannedTables.createStaticObjectTable, undefined, mergedVarTypeTable, mergedPositionTryTable);
@@ -955,11 +966,13 @@ const transformSource = async (env) => {
                     ], localConstNodes, getSource));
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     scannedTables.viewTransitionObjectTable[hash] = obj;
-                    replacements.push({
-                        start: node.span.start - baseByteOffset,
-                        end: node.span.end - baseByteOffset,
-                        content: JSON.stringify(`vt-${hash}`),
-                    });
+                    if (!registeredStyleCalls.has(node.span.start)) {
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: JSON.stringify(`vt-${hash}`),
+                        });
+                    }
                 }
                 else if (propName === 'positionTry' &&
                     args.length > 0 &&
@@ -980,11 +993,13 @@ const transformSource = async (env) => {
                     ], localConstNodes, getSource));
                     const hash = (0, zss_engine_1.genBase36Hash)(obj, 1, 8);
                     (scannedTables.positionTryObjectTable ??= {})[hash] = obj;
-                    replacements.push({
-                        start: node.span.start - baseByteOffset,
-                        end: node.span.end - baseByteOffset,
-                        content: JSON.stringify(`--pt-${hash}`),
-                    });
+                    if (!registeredStyleCalls.has(node.span.start)) {
+                        replacements.push({
+                            start: node.span.start - baseByteOffset,
+                            end: node.span.end - baseByteOffset,
+                            content: JSON.stringify(`--pt-${hash}`),
+                        });
+                    }
                 }
                 else if (propName === 'createTheme' &&
                     args.length >= 2 &&
@@ -2065,6 +2080,70 @@ const transformSource = async (env) => {
             propVarSpreads,
         };
     };
+    const definitionTables = [
+        'keyframesHashTable',
+        'viewTransitionHashTable',
+        'positionTryHashTable',
+        'varTypeHashTable',
+        'createThemeHashTable',
+        'createHashTable',
+        'createStaticHashTable',
+    ];
+    const namespacePath = (name) => {
+        const namespaceImport = localImports[name];
+        return namespaceImport?.importedName === '*'
+            ? namespaceImport.actualPath
+            : undefined;
+    };
+    const definitionKey = (actualPath, propName) => {
+        const resolved = (0, parser_1.resolveExport)(actualPath, propName);
+        return resolved
+            ? `${resolved.filePath}-${resolved.localName}`
+            : `${actualPath}-${propName}`;
+    };
+    const isDefinitionKey = (uniqueKey) => definitionTables.some((table) => Boolean(scannedTables[table]?.[uniqueKey]));
+    const namespaceReads = new Set();
+    const staticKey = (expr) => expr.type === 'StringLiteral'
+        ? expr.value
+        : expr.type === 'TemplateLiteral' && expr.expressions.length === 0
+            ? (expr.quasis[0]?.cooked ?? undefined)
+            : undefined;
+    const patternKey = (key) => key.type === 'Identifier' || key.type === 'StringLiteral'
+        ? key.value
+        : key.type === 'Computed'
+            ? staticKey(key.expression)
+            : undefined;
+    const exportedDefinition = (actualPath) => (0, parser_1.exportNames)(actualPath).find((exportName) => isDefinitionKey(definitionKey(actualPath, exportName)));
+    const namespaceKeys = (namespace, actualPath, keys) => {
+        for (const [key, node] of keys) {
+            if (key !== undefined) {
+                if (isDefinitionKey(definitionKey(actualPath, key)))
+                    throwNamespaceRead(namespace, key, node);
+                continue;
+            }
+            const name = exportedDefinition(actualPath);
+            if (name)
+                throwNamespaceRead(namespace, name, node);
+        }
+    };
+    const namespacePattern = (pattern, init) => {
+        if (!parser_1.t.isIdentifier(init) ||
+            !referenceIdents.references.has(init.span.start))
+            return;
+        const actualPath = namespacePath(init.value);
+        if (!actualPath)
+            return;
+        namespaceKeys(init.value, actualPath, pattern.properties.map((prop) => [
+            prop.type === 'RestElement'
+                ? undefined
+                : prop.type === 'AssignmentPatternProperty'
+                    ? prop.key.value
+                    : patternKey(prop.key),
+            prop.type === 'KeyValuePatternProperty' ? prop.key : prop,
+        ]));
+        namespaceReads.add(init.span.start);
+    };
+    const throwNamespaceRead = (namespace, propName, node) => throwCompilationError(`[plumeria] ${namespace}.${propName} reads a Plumeria definition through a namespace import, which cannot be compiled. Import it by name: import { ${propName} } from '...'.`, node);
     (0, parser_1.traverse)(ast, {
         JSXOpeningElement({ node }) {
             const owner = {
@@ -2075,9 +2154,29 @@ const transformSource = async (env) => {
                 if (attribute.type === 'JSXAttribute')
                     jsxAttributeOwnerMap.set(attribute.span.start, owner);
         },
+        VariableDeclarator({ node }) {
+            if (node.id.type === 'ObjectPattern' && node.init)
+                namespacePattern(node.id, node.init);
+        },
+        AssignmentExpression({ node }) {
+            if (node.left.type === 'ObjectPattern')
+                namespacePattern(node.left, node.right);
+        },
         MemberExpression({ node }) {
             if (!isVisibleReference(node))
                 return;
+            if (parser_1.t.isIdentifier(node.object)) {
+                const actualPath = namespacePath(node.object.value);
+                const propName = parser_1.t.isIdentifier(node.property)
+                    ? node.property.value
+                    : node.property.type === 'Computed'
+                        ? staticKey(node.property.expression)
+                        : undefined;
+                if (actualPath && propName !== undefined) {
+                    namespaceKeys(node.object.value, actualPath, [[propName, node]]);
+                    namespaceReads.add(node.object.span.start);
+                }
+            }
             if (parser_1.t.isIdentifier(node.object) &&
                 (parser_1.t.isIdentifier(node.property) || node.property.type === 'Computed')) {
                 const varName = node.object.value;
@@ -2192,6 +2291,13 @@ const transformSource = async (env) => {
                 return;
             if (!referenceIdents.references.has(node.span.start))
                 return;
+            if (!namespaceReads.has(node.span.start)) {
+                const actualPath = namespacePath(node.value);
+                const name = actualPath && exportedDefinition(actualPath);
+                if (name) {
+                    throwCompilationError(`[plumeria] ${node.value} is used as a whole, but it holds ${node.value}.${name}, a Plumeria definition that cannot be compiled through a namespace import. Import the names it needs instead: import { ${name} } from '...'.`, node);
+                }
+            }
             const prefix = referenceIdents.shorthands.has(node.span.start)
                 ? `${node.value}: `
                 : '';
@@ -2202,6 +2308,16 @@ const transformSource = async (env) => {
                     content: `${prefix}${content}`,
                 });
             };
+            const definition = [
+                ['kf-', mergedKeyframesTable[node.value]],
+                ['vt-', mergedViewTransitionTable[node.value]],
+                ['--pt-', mergedPositionTryTable[node.value]],
+                ['--pr-', mergedVarTypeTable[node.value]],
+            ].find(([, hash]) => typeof hash === 'string' && hash);
+            if (definition) {
+                pushReplacement(JSON.stringify(`${definition[0]}${definition[1]}`));
+                return;
+            }
             const styleInfo = localCreateStyles[node.value];
             if (styleInfo) {
                 pushReplacement(`(${JSON.stringify(styleInfo.hashMap)})`);

package/dist/viewTransition.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createViewTransition = void 0;
 const createViewTransition = (rule, hash) => ({
-    [`::view-transition-group(vt-${hash})`]: rule.group,
-    [`::view-transition-image-pair(vt-${hash})`]: rule.imagePair,
-    [`::view-transition-old(vt-${hash})`]: rule.old,
-    [`::view-transition-new(vt-${hash})`]: rule.new,
+    [`::view-transition-group(*.vt-${hash})`]: rule.group,
+    [`::view-transition-image-pair(*.vt-${hash})`]: rule.imagePair,
+    [`::view-transition-old(*.vt-${hash})`]: rule.old,
+    [`::view-transition-new(*.vt-${hash})`]: rule.new,
 });
 exports.createViewTransition = createViewTransition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plumeria/utils",
-  "version": "20.0.0",
+  "version": "21.1.0",
   "description": "Plumeria Utils",
   "author": "Refirst 11",
   "license": "MIT",