@pandacss/parser 0.0.0-dev-20230413135202 → 0.0.0-dev-20230413141731

package/dist/index.d.ts

@@ -1,13 +1,22 @@
 import * as _pandacss_types from '@pandacss/types';
+import { RecipeConfig } from '@pandacss/types';
 import * as ts_morph from 'ts-morph';
 import { ProjectOptions as ProjectOptions$1 } from 'ts-morph';
 
-type ParserNodeOptions = {
+type ParserPatternNode = {
     name: string;
-    type: 'pattern' | 'recipe';
+    type: 'pattern';
     props?: string[];
     baseName: string;
 };
+type ParserRecipeNode = {
+    name: string;
+    type: 'recipe';
+    props: string[];
+    baseName: string;
+    jsx: RecipeConfig['jsx'];
+};
+type ParserNodeOptions = ParserPatternNode | ParserRecipeNode;
 type ParserOptions = {
     importMap: Record<'css' | 'recipe' | 'pattern' | 'jsx', string>;
     jsx?: {
@@ -15,6 +24,8 @@ type ParserOptions = {
         nodes: ParserNodeOptions[];
         isStyleProp: (prop: string) => boolean;
     };
+    getRecipeName: (tagName: string) => string;
+    getRecipeByName: (name: string) => RecipeConfig | undefined;
 };
 
 type ProjectOptions = Partial<ProjectOptions$1> & {

package/dist/index.js

@@ -104,6 +104,7 @@ var createParserResult = () => ({
 });
 
 // src/parser.ts
+var isNodeRecipe = (node) => node.type === "recipe";
 function createImportMatcher(mod, values) {
   const regex = values ? new RegExp(`^(${values.join("|")})$`) : /.*/;
   return {
@@ -122,7 +123,7 @@ function createParser(options) {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
-    const { jsx, importMap } = options;
+    const { jsx, importMap, getRecipeByName } = options;
     const importRegex = [
       createImportMatcher(importMap.css, ["css", "cva"]),
       createImportMatcher(importMap.recipe),
@@ -148,7 +149,6 @@ function createParser(options) {
     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("|")})$`);
     const recipes = /* @__PURE__ */ new Map();
     imports.value.forEach((importDeclaration) => {
       const { name, alias } = importDeclaration;
@@ -160,6 +160,21 @@ function createParser(options) {
     const functions = /* @__PURE__ */ new Map();
     const components = /* @__PURE__ */ new Map();
     const propertiesMap = new Map(confProperties.map((prop) => [prop, true]));
+    const recipePropertiesByName = /* @__PURE__ */ new Map();
+    const recipeJsxLists = (jsx?.nodes ?? []).filter(isNodeRecipe).reduce(
+      (acc, recipe) => {
+        recipePropertiesByName.set(recipe.baseName, new Set(recipe.props ?? []));
+        recipe.jsx?.forEach((jsx2) => {
+          if (typeof jsx2 === "string") {
+            acc.string.add(jsx2);
+          } else {
+            acc.regex.push(jsx2);
+          }
+        });
+        return acc;
+      },
+      { string: /* @__PURE__ */ new Set(), regex: [] }
+    );
     const cvaAlias = imports.getAlias("cva");
     const cssAlias = imports.getAlias("css");
     if (options.jsx) {
@@ -167,18 +182,29 @@ function createParser(options) {
         const properties = node.props ? new Map(propertiesMap) : propertiesMap;
         const alias = imports.getAlias(node.name);
         node.props?.forEach((prop) => properties.set(prop, true));
-        functions.set(node.baseName, properties);
         functions.set(alias, properties);
         components.set(alias, properties);
       });
     }
+    const getRecipeName = (0, import_shared2.memo)(options.getRecipeName);
+    const isJsxTagRecipe = (0, import_shared2.memo)(
+      (tagName) => recipeJsxLists.string.has(tagName) || recipeJsxLists.regex.some((regex) => regex.test(tagName))
+    );
     const matchTag = (0, import_shared2.memo)((tagName) => {
-      return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias);
+      return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias) || isJsxTagRecipe(tagName);
     });
     const matchTagProp = (0, import_shared2.memo)((tagName, propName) => {
       if (propertiesMap.size === 0)
         return true;
-      return Boolean(components.get(tagName)?.get(propName)) || propertiesMap.has(propName);
+      if (Boolean(components.get(tagName)?.get(propName)) || propertiesMap.has(propName))
+        return true;
+      if (isJsxTagRecipe(tagName)) {
+        const recipe = getRecipeByName(getRecipeName(tagName));
+        if (recipe) {
+          return recipePropertiesByName.get(recipe.name)?.has(propName) ?? false;
+        }
+      }
+      return false;
     });
     const matchFn = (0, import_shared2.memo)((fnName) => {
       if (recipes.has(fnName))
@@ -251,33 +277,25 @@ function createParser(options) {
           result.queryList.forEach((query) => {
             collector.setCva({
               name,
-              box: query.box,
-              data: combineResult((0, import_extractor.unbox)(query.box))
+              box: query.box.value[1],
+              data: combineResult((0, import_extractor.unbox)(query.box.value[1]))
             });
           });
         }).otherwise(() => {
         });
       } else if (result.kind === "component") {
         result.queryList.forEach((query) => {
-          let type;
           const data = combineResult((0, import_extractor.unbox)(query.box));
           import_logger.logger.debug(`ast:jsx:${name}`, { filePath, result: data });
           if (jsx && name.startsWith(jsxFactoryAlias)) {
-            type = "jsx-factory";
+            collector.jsx.add({ name, box: query.box, type: "jsx-factory", data });
           } else if (jsxPatternNodes.test(name)) {
-            type = "pattern";
-          } else if (jsxRecipeNodes.test(name)) {
-            type = "recipe";
+            collector.setPattern(name, { type: "jsx-pattern", name, box: query.box, data });
+          } else if (recipeJsxLists.string.has(name) || recipeJsxLists.regex.some((regex) => regex.test(name))) {
+            collector.setRecipe(getRecipeName(name), { type: "jsx-recipe", name, box: query.box, data });
           } else {
-            type = "jsx";
+            collector.jsx.add({ name, box: query.box, type: "jsx", data });
           }
-          collector.jsx.add({
-            // from "panda.*" -> "panda.button"
-            name,
-            box: query.box,
-            type,
-            data
-          });
         });
       }
     });

package/dist/index.mjs

@@ -78,6 +78,7 @@ var createParserResult = () => ({
 });
 
 // src/parser.ts
+var isNodeRecipe = (node) => node.type === "recipe";
 function createImportMatcher(mod, values) {
   const regex = values ? new RegExp(`^(${values.join("|")})$`) : /.*/;
   return {
@@ -96,7 +97,7 @@ function createParser(options) {
     if (!sourceFile)
       return;
     const filePath = sourceFile.getFilePath();
-    const { jsx, importMap } = options;
+    const { jsx, importMap, getRecipeByName } = options;
     const importRegex = [
       createImportMatcher(importMap.css, ["css", "cva"]),
       createImportMatcher(importMap.recipe),
@@ -122,7 +123,6 @@ function createParser(options) {
     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("|")})$`);
     const recipes = /* @__PURE__ */ new Map();
     imports.value.forEach((importDeclaration) => {
       const { name, alias } = importDeclaration;
@@ -134,6 +134,21 @@ function createParser(options) {
     const functions = /* @__PURE__ */ new Map();
     const components = /* @__PURE__ */ new Map();
     const propertiesMap = new Map(confProperties.map((prop) => [prop, true]));
+    const recipePropertiesByName = /* @__PURE__ */ new Map();
+    const recipeJsxLists = (jsx?.nodes ?? []).filter(isNodeRecipe).reduce(
+      (acc, recipe) => {
+        recipePropertiesByName.set(recipe.baseName, new Set(recipe.props ?? []));
+        recipe.jsx?.forEach((jsx2) => {
+          if (typeof jsx2 === "string") {
+            acc.string.add(jsx2);
+          } else {
+            acc.regex.push(jsx2);
+          }
+        });
+        return acc;
+      },
+      { string: /* @__PURE__ */ new Set(), regex: [] }
+    );
     const cvaAlias = imports.getAlias("cva");
     const cssAlias = imports.getAlias("css");
     if (options.jsx) {
@@ -141,18 +156,29 @@ function createParser(options) {
         const properties = node.props ? new Map(propertiesMap) : propertiesMap;
         const alias = imports.getAlias(node.name);
         node.props?.forEach((prop) => properties.set(prop, true));
-        functions.set(node.baseName, properties);
         functions.set(alias, properties);
         components.set(alias, properties);
       });
     }
+    const getRecipeName = memo2(options.getRecipeName);
+    const isJsxTagRecipe = memo2(
+      (tagName) => recipeJsxLists.string.has(tagName) || recipeJsxLists.regex.some((regex) => regex.test(tagName))
+    );
     const matchTag = memo2((tagName) => {
-      return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias);
+      return components.has(tagName) || isUpperCase(tagName) || tagName.startsWith(jsxFactoryAlias) || isJsxTagRecipe(tagName);
     });
     const matchTagProp = memo2((tagName, propName) => {
       if (propertiesMap.size === 0)
         return true;
-      return Boolean(components.get(tagName)?.get(propName)) || propertiesMap.has(propName);
+      if (Boolean(components.get(tagName)?.get(propName)) || propertiesMap.has(propName))
+        return true;
+      if (isJsxTagRecipe(tagName)) {
+        const recipe = getRecipeByName(getRecipeName(tagName));
+        if (recipe) {
+          return recipePropertiesByName.get(recipe.name)?.has(propName) ?? false;
+        }
+      }
+      return false;
     });
     const matchFn = memo2((fnName) => {
       if (recipes.has(fnName))
@@ -225,33 +251,25 @@ function createParser(options) {
           result.queryList.forEach((query) => {
             collector.setCva({
               name,
-              box: query.box,
-              data: combineResult(unbox(query.box))
+              box: query.box.value[1],
+              data: combineResult(unbox(query.box.value[1]))
             });
           });
         }).otherwise(() => {
         });
       } else if (result.kind === "component") {
         result.queryList.forEach((query) => {
-          let type;
           const data = combineResult(unbox(query.box));
           logger.debug(`ast:jsx:${name}`, { filePath, result: data });
           if (jsx && name.startsWith(jsxFactoryAlias)) {
-            type = "jsx-factory";
+            collector.jsx.add({ name, box: query.box, type: "jsx-factory", data });
           } else if (jsxPatternNodes.test(name)) {
-            type = "pattern";
-          } else if (jsxRecipeNodes.test(name)) {
-            type = "recipe";
+            collector.setPattern(name, { type: "jsx-pattern", name, box: query.box, data });
+          } else if (recipeJsxLists.string.has(name) || recipeJsxLists.regex.some((regex) => regex.test(name))) {
+            collector.setRecipe(getRecipeName(name), { type: "jsx-recipe", name, box: query.box, data });
           } else {
-            type = "jsx";
+            collector.jsx.add({ name, box: query.box, type: "jsx", data });
           }
-          collector.jsx.add({
-            // from "panda.*" -> "panda.button"
-            name,
-            box: query.box,
-            type,
-            data
-          });
         });
       }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/parser",
-  "version": "0.0.0-dev-20230413135202",
+  "version": "0.0.0-dev-20230413141731",
   "description": "The static parser for panda css",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,14 +14,15 @@
     "lil-fp": "1.4.5",
     "ts-morph": "18.0.0",
     "ts-pattern": "4.2.2",
-    "@pandacss/extractor": "0.0.0-dev-20230413135202",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20230413135202",
-    "@pandacss/logger": "0.0.0-dev-20230413135202",
-    "@pandacss/shared": "0.0.0-dev-20230413135202",
-    "@pandacss/types": "0.0.0-dev-20230413135202"
+    "@pandacss/extractor": "0.0.0-dev-20230413141731",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20230413141731",
+    "@pandacss/logger": "0.0.0-dev-20230413141731",
+    "@pandacss/shared": "0.0.0-dev-20230413141731",
+    "@pandacss/types": "0.0.0-dev-20230413141731"
   },
   "devDependencies": {
-    "@pandacss/fixture": "0.0.0-dev-20230413135202"
+    "@pandacss/fixture": "0.0.0-dev-20230413141731",
+    "@pandacss/generator": "0.0.0-dev-20230413141731"
   },
   "files": [
     "dist"