@pandacss/parser 0.0.0-dev-20230321103030 → 0.0.0-dev-20230323194924

package/dist/index.d.ts

@@ -6,6 +6,7 @@ type ParserNodeOptions = {
     name: string;
     type: 'pattern' | 'recipe';
     props?: string[];
+    baseName: string;
 };
 type ParserOptions = {
     importMap: Record<'css' | 'recipe' | 'pattern' | 'jsx', string>;
@@ -15,6 +16,7 @@ type ParserOptions = {
         isStyleProp: (prop: string) => boolean;
     };
 };
+type ParserMode = 'box-extractor' | 'internal';
 
 type ProjectOptions = Partial<ProjectOptions$1> & {
     readFile: (filePath: string) => string;
@@ -25,10 +27,10 @@ declare const createProject: ({ getFiles, readFile, parserOptions, ...projectOpt
     getSourceFile: (filePath: string) => ts_morph.SourceFile | undefined;
     removeSourceFile: (filePath: string) => void;
     createSourceFile: (filePath: string) => ts_morph.SourceFile;
-    parseSourceFile: (filePath: string) => _pandacss_types.ParserResult | undefined;
+    parseSourceFile: (filePath: string, properties: string[], mode?: ParserMode) => _pandacss_types.ParserResult | undefined;
     reloadSourceFile: (filePath: string) => ts_morph.FileSystemRefreshResult | undefined;
     reloadSourceFiles: () => void;
 };
 type Project = ReturnType<typeof createProject>;
 
-export { Project, ProjectOptions, createProject };
+export { ParserMode, Project, ProjectOptions, createProject };

package/dist/index.js

@@ -26,11 +26,13 @@ module.exports = __toCommonJS(src_exports);
 
 // src/project.ts
 var import_lil_fp = require("lil-fp");
-var import_ts_morph4 = require("ts-morph");
+var import_ts_morph5 = require("ts-morph");
 
 // src/parser.ts
+var import_core = require("@box-extractor/core");
 var import_logger = require("@pandacss/logger");
 var import_shared2 = require("@pandacss/shared");
+var import_ts_morph4 = require("ts-morph");
 var import_ts_pattern3 = require("ts-pattern");
 
 // src/call-expression.ts
@@ -261,11 +263,10 @@ function createImportMatcher(mod, values) {
   };
 }
 function createParser(options) {
-  return function parse(sourceFile) {
+  return function parse(sourceFile, confProperties, mode = "internal") {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
-    const collector = createParserResult();
     const { jsx, importMap } = options;
     const importRegex = [
       createImportMatcher(importMap.css, ["css", "cva"]),
@@ -280,20 +281,158 @@ function createParser(options) {
         return importRegex.some(({ regex, mod }) => regex.test(value.id) && value.mod.includes(mod));
       }
     });
-    if (imports.value.length) {
-      import_logger.logger.debug("ast:import", `Found import { ${imports} } in ${filePath}`);
+    const collector = createParserResult();
+    if (!imports.value.length) {
+      import_logger.logger.debug("ast:import", `No import found in ${filePath}`);
+      return collector;
     }
+    import_logger.logger.debug("ast:import", `Found import { ${imports} } in ${filePath}`);
+    const [css] = importRegex;
     const isValidPattern = imports.createMatch(importMap.pattern);
     const isValidRecipe = imports.createMatch(importMap.recipe);
     const isValidStyleFn = (name) => name === jsx?.factory;
+    const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "panda";
+    const jsxPatternNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`);
+    const jsxRecipeNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "recipe" && node.name).join("|")})$`);
+    if (mode === "box-extractor") {
+      const recipes = /* @__PURE__ */ new Map();
+      imports.value.forEach((importDeclaration) => {
+        const { name, alias } = importDeclaration;
+        const isRecipe = isValidRecipe(name);
+        if (isRecipe) {
+          recipes.set(alias, true);
+        }
+      });
+      const functions = /* @__PURE__ */ new Map();
+      const components = /* @__PURE__ */ new Map();
+      const propertiesMap = new Map(confProperties.map((prop) => [prop, true]));
+      const cvaAlias = imports.getAlias("cva");
+      const cssAlias = imports.getAlias("css");
+      if (options.jsx) {
+        options.jsx.nodes.forEach((node) => {
+          const properties = node.props ? new Map(propertiesMap) : propertiesMap;
+          const alias = imports.getAlias(node.name);
+          node.props?.forEach((prop) => properties.set(prop, true));
+          functions.set(alias, properties);
+          components.set(alias, properties);
+        });
+      }
+      const matchTag = (0, import_shared2.memo)((tagName) => {
+        return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias);
+      });
+      const matchTagProp = (0, import_shared2.memo)((tagName, propName) => {
+        if (propertiesMap.size === 0)
+          return true;
+        return Boolean(components.get(tagName)?.get(propName)) || propertiesMap.has(propName);
+      });
+      const matchFn = (0, import_shared2.memo)((fnName) => {
+        if (recipes.has(fnName))
+          return true;
+        if (fnName === cvaAlias || fnName === cssAlias || fnName.startsWith(jsxFactoryAlias))
+          return true;
+        return Boolean(functions.get(fnName));
+      });
+      const matchFnProp = (0, import_shared2.memo)((fnName, propName) => {
+        if (propertiesMap.size === 0)
+          return true;
+        if (recipes.has(fnName))
+          return true;
+        if (fnName === cvaAlias)
+          return true;
+        if (fnName.startsWith(jsxFactoryAlias))
+          return true;
+        if (fnName === cssAlias)
+          return Boolean(propertiesMap.get(propName) || propName === "selectors");
+        return Boolean(functions.get(fnName)?.get(propName));
+      });
+      const measure2 = import_logger.logger.time.debug(`Tokens extracted from ${filePath}`);
+      const extractResultByName = (0, import_core.extract)({
+        ast: sourceFile,
+        components: {
+          matchTag: (prop) => matchTag(prop.tagName),
+          matchProp: (prop) => matchTagProp(prop.tagName, prop.propName)
+        },
+        functions: {
+          matchFn: (prop) => matchFn(prop.fnName),
+          matchProp: (prop) => matchFnProp(prop.fnName, prop.propName),
+          matchArg: (prop) => {
+            if (prop.fnName === jsxFactoryAlias && prop.index === 1 && import_ts_morph4.Node.isIdentifier(prop.argNode))
+              return false;
+            return true;
+          }
+        },
+        flags: { skipTraverseFiles: true }
+      });
+      measure2();
+      extractResultByName.forEach((result, alias) => {
+        const name = imports.getName(alias);
+        import_logger.logger.debug(`ast:${name}`, { filePath, result, alias });
+        if (result.kind === "function") {
+          (0, import_ts_pattern3.match)(name).when(css.match, (name2) => {
+            result.queryList.forEach((query) => {
+              collector.set(name2, {
+                name: name2,
+                box: query.box.value[0],
+                data: (0, import_core.unbox)(query.box.value[0])
+              });
+            });
+          }).when(isValidPattern, (name2) => {
+            result.queryList.forEach((query) => {
+              collector.setPattern(name2, {
+                name: name2,
+                box: query.box.value[0],
+                data: (0, import_core.unbox)(query.box.value[0])
+              });
+            });
+          }).when(isValidRecipe, (name2) => {
+            result.queryList.forEach((query) => {
+              collector.setRecipe(name2, {
+                name: name2,
+                box: query.box.value[0],
+                data: (0, import_core.unbox)(query.box.value[0])
+              });
+            });
+          }).when(isValidStyleFn, () => {
+            result.queryList.forEach((query) => {
+              collector.setCva({ name, box: query.box, data: (0, import_core.unbox)(query.box) });
+            });
+          }).otherwise(() => {
+          });
+        } else if (result.kind === "component") {
+          result.queryList.forEach((query) => {
+            let type;
+            const data = (0, import_core.unbox)(query.box);
+            import_logger.logger.debug(`ast:jsx:${name}`, { filePath, result: data });
+            if (jsx && name.startsWith(jsxFactoryAlias)) {
+              type = "jsx-factory";
+            } else if (jsxPatternNodes.test(name)) {
+              type = "pattern";
+            } else if (jsxRecipeNodes.test(name)) {
+              type = "recipe";
+            } else {
+              type = "jsx";
+            }
+            collector.jsx.add({
+              // from "panda.*" -> "panda.button"
+              name,
+              box: query.box,
+              type,
+              data
+            });
+          });
+        }
+      });
+      return collector;
+    }
+    const measure = import_logger.logger.time.debug(`Tokens extracted & collected from ${filePath}`);
     visitCallExpressions(sourceFile, {
       match: (0, import_shared2.memo)((name) => imports.match(name)),
       fn({ name: _name, data }) {
         const name = imports.getName(_name);
-        const [css] = importRegex;
+        const [css2] = importRegex;
         const result = { name, data };
         import_logger.logger.debug(`ast:${name}`, { filePath, result });
-        (0, import_ts_pattern3.match)(name).when(css.match, (name2) => {
+        (0, import_ts_pattern3.match)(name).when(css2.match, (name2) => {
           collector.set(name2, result);
         }).when(isValidPattern, (name2) => {
           collector.setPattern(name2, result);
@@ -305,9 +444,6 @@ function createParser(options) {
         });
       }
     });
-    const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "panda";
-    const jsxPatternNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`);
-    const jsxRecipeNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "recipe" && node.name).join("|")})$`);
     visitJsxElement(sourceFile, {
       match: {
         tag: (0, import_shared2.memo)((name) => {
@@ -333,13 +469,14 @@ function createParser(options) {
         collector.jsx.add({ type, name, data });
       }
     });
+    measure();
     return collector;
   };
 }
 var isUpperCase = (value) => value[0] === value[0].toUpperCase();
 
 // src/project.ts
-var createTsProject = (options) => new import_ts_morph4.Project({
+var createTsProject = (options) => new import_ts_morph5.Project({
   skipAddingFilesFromTsConfig: true,
   skipFileDependencyResolution: true,
   skipLoadingLibFiles: true,
@@ -365,10 +502,10 @@ var createProject = ({ getFiles, readFile, parserOptions, ...projectOptions }) =
     },
     createSourceFile: (filePath) => project.createSourceFile(filePath, readFile(filePath), {
       overwrite: true,
-      scriptKind: import_ts_morph4.ScriptKind.TSX
+      scriptKind: import_ts_morph5.ScriptKind.TSX
     }),
-    parseSourceFile: (filePath) => {
-      return parser(project.getSourceFile(filePath));
+    parseSourceFile: (filePath, properties, mode = "box-extractor") => {
+      return parser(project.getSourceFile(filePath), properties, mode);
     }
   })),
   (0, import_lil_fp.tap)(({ createSourceFile }) => {

package/dist/index.mjs

@@ -3,8 +3,10 @@ import { Obj, pipe, tap } from "lil-fp";
 import { Project as TsProject, ScriptKind } from "ts-morph";
 
 // src/parser.ts
+import { extract, unbox } from "@box-extractor/core";
 import { logger } from "@pandacss/logger";
 import { memo as memo2 } from "@pandacss/shared";
+import { Node as Node4 } from "ts-morph";
 import { match as match3 } from "ts-pattern";
 
 // src/call-expression.ts
@@ -237,11 +239,10 @@ function createImportMatcher(mod, values) {
   };
 }
 function createParser(options) {
-  return function parse(sourceFile) {
+  return function parse(sourceFile, confProperties, mode = "internal") {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
-    const collector = createParserResult();
     const { jsx, importMap } = options;
     const importRegex = [
       createImportMatcher(importMap.css, ["css", "cva"]),
@@ -256,20 +257,158 @@ function createParser(options) {
         return importRegex.some(({ regex, mod }) => regex.test(value.id) && value.mod.includes(mod));
       }
     });
-    if (imports.value.length) {
-      logger.debug("ast:import", `Found import { ${imports} } in ${filePath}`);
+    const collector = createParserResult();
+    if (!imports.value.length) {
+      logger.debug("ast:import", `No import found in ${filePath}`);
+      return collector;
     }
+    logger.debug("ast:import", `Found import { ${imports} } in ${filePath}`);
+    const [css] = importRegex;
     const isValidPattern = imports.createMatch(importMap.pattern);
     const isValidRecipe = imports.createMatch(importMap.recipe);
     const isValidStyleFn = (name) => name === jsx?.factory;
+    const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "panda";
+    const jsxPatternNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`);
+    const jsxRecipeNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "recipe" && node.name).join("|")})$`);
+    if (mode === "box-extractor") {
+      const recipes = /* @__PURE__ */ new Map();
+      imports.value.forEach((importDeclaration) => {
+        const { name, alias } = importDeclaration;
+        const isRecipe = isValidRecipe(name);
+        if (isRecipe) {
+          recipes.set(alias, true);
+        }
+      });
+      const functions = /* @__PURE__ */ new Map();
+      const components = /* @__PURE__ */ new Map();
+      const propertiesMap = new Map(confProperties.map((prop) => [prop, true]));
+      const cvaAlias = imports.getAlias("cva");
+      const cssAlias = imports.getAlias("css");
+      if (options.jsx) {
+        options.jsx.nodes.forEach((node) => {
+          const properties = node.props ? new Map(propertiesMap) : propertiesMap;
+          const alias = imports.getAlias(node.name);
+          node.props?.forEach((prop) => properties.set(prop, true));
+          functions.set(alias, properties);
+          components.set(alias, properties);
+        });
+      }
+      const matchTag = memo2((tagName) => {
+        return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias);
+      });
+      const matchTagProp = memo2((tagName, propName) => {
+        if (propertiesMap.size === 0)
+          return true;
+        return Boolean(components.get(tagName)?.get(propName)) || propertiesMap.has(propName);
+      });
+      const matchFn = memo2((fnName) => {
+        if (recipes.has(fnName))
+          return true;
+        if (fnName === cvaAlias || fnName === cssAlias || fnName.startsWith(jsxFactoryAlias))
+          return true;
+        return Boolean(functions.get(fnName));
+      });
+      const matchFnProp = memo2((fnName, propName) => {
+        if (propertiesMap.size === 0)
+          return true;
+        if (recipes.has(fnName))
+          return true;
+        if (fnName === cvaAlias)
+          return true;
+        if (fnName.startsWith(jsxFactoryAlias))
+          return true;
+        if (fnName === cssAlias)
+          return Boolean(propertiesMap.get(propName) || propName === "selectors");
+        return Boolean(functions.get(fnName)?.get(propName));
+      });
+      const measure2 = logger.time.debug(`Tokens extracted from ${filePath}`);
+      const extractResultByName = extract({
+        ast: sourceFile,
+        components: {
+          matchTag: (prop) => matchTag(prop.tagName),
+          matchProp: (prop) => matchTagProp(prop.tagName, prop.propName)
+        },
+        functions: {
+          matchFn: (prop) => matchFn(prop.fnName),
+          matchProp: (prop) => matchFnProp(prop.fnName, prop.propName),
+          matchArg: (prop) => {
+            if (prop.fnName === jsxFactoryAlias && prop.index === 1 && Node4.isIdentifier(prop.argNode))
+              return false;
+            return true;
+          }
+        },
+        flags: { skipTraverseFiles: true }
+      });
+      measure2();
+      extractResultByName.forEach((result, alias) => {
+        const name = imports.getName(alias);
+        logger.debug(`ast:${name}`, { filePath, result, alias });
+        if (result.kind === "function") {
+          match3(name).when(css.match, (name2) => {
+            result.queryList.forEach((query) => {
+              collector.set(name2, {
+                name: name2,
+                box: query.box.value[0],
+                data: unbox(query.box.value[0])
+              });
+            });
+          }).when(isValidPattern, (name2) => {
+            result.queryList.forEach((query) => {
+              collector.setPattern(name2, {
+                name: name2,
+                box: query.box.value[0],
+                data: unbox(query.box.value[0])
+              });
+            });
+          }).when(isValidRecipe, (name2) => {
+            result.queryList.forEach((query) => {
+              collector.setRecipe(name2, {
+                name: name2,
+                box: query.box.value[0],
+                data: unbox(query.box.value[0])
+              });
+            });
+          }).when(isValidStyleFn, () => {
+            result.queryList.forEach((query) => {
+              collector.setCva({ name, box: query.box, data: unbox(query.box) });
+            });
+          }).otherwise(() => {
+          });
+        } else if (result.kind === "component") {
+          result.queryList.forEach((query) => {
+            let type;
+            const data = unbox(query.box);
+            logger.debug(`ast:jsx:${name}`, { filePath, result: data });
+            if (jsx && name.startsWith(jsxFactoryAlias)) {
+              type = "jsx-factory";
+            } else if (jsxPatternNodes.test(name)) {
+              type = "pattern";
+            } else if (jsxRecipeNodes.test(name)) {
+              type = "recipe";
+            } else {
+              type = "jsx";
+            }
+            collector.jsx.add({
+              // from "panda.*" -> "panda.button"
+              name,
+              box: query.box,
+              type,
+              data
+            });
+          });
+        }
+      });
+      return collector;
+    }
+    const measure = logger.time.debug(`Tokens extracted & collected from ${filePath}`);
     visitCallExpressions(sourceFile, {
       match: memo2((name) => imports.match(name)),
       fn({ name: _name, data }) {
         const name = imports.getName(_name);
-        const [css] = importRegex;
+        const [css2] = importRegex;
         const result = { name, data };
         logger.debug(`ast:${name}`, { filePath, result });
-        match3(name).when(css.match, (name2) => {
+        match3(name).when(css2.match, (name2) => {
           collector.set(name2, result);
         }).when(isValidPattern, (name2) => {
           collector.setPattern(name2, result);
@@ -281,9 +420,6 @@ function createParser(options) {
         });
       }
     });
-    const jsxFactoryAlias = jsx ? imports.getAlias(jsx.factory) : "panda";
-    const jsxPatternNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "pattern" && node.name).join("|")})$`);
-    const jsxRecipeNodes = new RegExp(`(${jsx?.nodes.map((node) => node.type === "recipe" && node.name).join("|")})$`);
     visitJsxElement(sourceFile, {
       match: {
         tag: memo2((name) => {
@@ -309,6 +445,7 @@ function createParser(options) {
         collector.jsx.add({ type, name, data });
       }
     });
+    measure();
     return collector;
   };
 }
@@ -343,8 +480,8 @@ var createProject = ({ getFiles, readFile, parserOptions, ...projectOptions }) =
       overwrite: true,
       scriptKind: ScriptKind.TSX
     }),
-    parseSourceFile: (filePath) => {
-      return parser(project.getSourceFile(filePath));
+    parseSourceFile: (filePath, properties, mode = "box-extractor") => {
+      return parser(project.getSourceFile(filePath), properties, mode);
     }
   })),
   tap(({ createSourceFile }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/parser",
-  "version": "0.0.0-dev-20230321103030",
+  "version": "0.0.0-dev-20230323194924",
   "description": "The static parser for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -11,16 +11,17 @@
     "access": "public"
   },
   "dependencies": {
+    "@box-extractor/core": "^0.8.4",
     "lil-fp": "1.2.5",
     "ts-morph": "17.0.1",
     "ts-pattern": "4.2.1",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230321103030",
-    "@pandacss/logger": "0.0.0-dev-20230321103030",
-    "@pandacss/shared": "0.0.0-dev-20230321103030",
-    "@pandacss/types": "0.0.0-dev-20230321103030"
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230323194924",
+    "@pandacss/logger": "0.0.0-dev-20230323194924",
+    "@pandacss/shared": "0.0.0-dev-20230323194924",
+    "@pandacss/types": "0.0.0-dev-20230323194924"
   },
   "devDependencies": {
-    "@pandacss/fixture": "0.0.0-dev-20230321103030"
+    "@pandacss/fixture": "0.0.0-dev-20230323194924"
   },
   "files": [
     "dist"