@yamada-ui/cli 1.1.2-dev-20240920162115 → 1.2.0-dev-20240920165318

package/dist/command/tokens/index.js

@@ -48,7 +48,6 @@ init_cjs_shims();
 var import_promises = require("fs/promises");
 var import_path3 = __toESM(require("path"));
 var p = __toESM(require("@clack/prompts"));
-var import_bundle_n_require = require("bundle-n-require");
 
 // ../../node_modules/.pnpm/chalk@5.3.0/node_modules/chalk/source/index.js
 init_cjs_shims();
@@ -548,12 +547,8 @@ var source_default = chalk;
 // src/command/tokens/index.ts
 var import_chokidar = __toESM(require("chokidar"));
 
-// src/command/tokens/create-theme-typings.ts
-init_cjs_shims();
-
 // src/utils/assertion.ts
 init_cjs_shims();
-var isString = (value) => Object.prototype.toString.call(value) === "[object String]";
 var isObject = (obj) => obj !== null && (typeof obj === "object" || typeof obj === "function") && !isArray(obj);
 var isArray = (value) => Array.isArray(value);
 
@@ -578,21 +573,54 @@ var prettier = async (content, options) => {
 
 // src/utils/object.ts
 init_cjs_shims();
-var omitObject = (obj, keys) => {
-  const result = {};
-  Object.keys(obj).forEach((key) => {
-    if (keys.includes(key)) return;
-    result[key] = obj[key];
+var getObject = (obj, path4) => {
+  const keys = path4.split(".");
+  return keys.reduce((obj2, key) => obj2[key] ?? {}, obj);
+};
+
+// src/utils/module.ts
+init_cjs_shims();
+var import_fs = require("fs");
+var import_vm = require("vm");
+var import_esbuild = require("esbuild");
+var import_node_eval = __toESM(require("node-eval"));
+var getModule = async (file, cwd) => {
+  const result = await (0, import_esbuild.build)({
+    platform: "node",
+    format: "cjs",
+    mainFields: ["module", "main"],
+    absWorkingDir: cwd,
+    entryPoints: [file],
+    outfile: "out.js",
+    write: false,
+    bundle: true,
+    sourcemap: false,
+    metafile: true
   });
-  return result;
+  const { text: code } = result.outputFiles[0];
+  const dependencies = result.metafile ? Object.keys(result.metafile.inputs) : [];
+  try {
+    const realFileName = import_fs.realpathSync.native(file);
+    const script = new import_vm.Script(code, { filename: realFileName });
+    const mod = { exports: {} };
+    const require2 = (id) => id === realFileName ? mod.exports : require2(id);
+    script.runInThisContext()(mod.exports, require2, mod);
+    return { mod, code, dependencies };
+  } catch {
+    const mod = (0, import_node_eval.default)(code);
+    return { mod, code, dependencies };
+  }
 };
 
+// src/command/tokens/create-theme-typings.ts
+init_cjs_shims();
+
 // src/command/tokens/config.ts
 init_cjs_shims();
 var config = [
   { key: "borders" },
-  { key: "breakpoints", filter: (value) => Number.isNaN(Number(value)) },
-  { key: "colors", maxScanDepth: 3 },
+  { key: "breakpoints" },
+  { key: "colors" },
   { key: "fonts" },
   { key: "fontSizes" },
   { key: "fontWeights" },
@@ -601,11 +629,14 @@ var config = [
   { key: "radii" },
   { key: "shadows" },
   { key: "blurs" },
-  { key: "sizes", maxScanDepth: 2 },
+  { key: "sizes" },
   { key: "spaces", flatMap: (value) => [value, `-${value}`] },
   { key: "zIndices" },
   { key: "animations", omitScanKeys: ["keyframes"] },
-  { key: "gradients" }
+  { key: "gradients" },
+  { key: "transitions.property", replaceKey: "transitionProperty" },
+  { key: "transitions.duration", replaceKey: "transitionDuration" },
+  { key: "transitions.easing", replaceKey: "transitionEasing" }
 ];
 
 // src/command/tokens/create-theme-typings.ts
@@ -631,31 +662,6 @@ var extractComponents = ({ components = {} }) => Object.entries(components).redu
   },
   {}
 );
-var extractTransitions = (theme) => {
-  let transitionProperty = [];
-  let transitionDuration = [];
-  let transitionEasing = [];
-  const { transitions, semantics } = theme;
-  if (!isObject(transitions))
-    return { transitionProperty, transitionDuration, transitionEasing };
-  const { property, duration, easing } = semantics.transitions ?? {};
-  Object.entries(transitions).forEach(([key, value]) => {
-    switch (key) {
-      case "property":
-        transitionProperty = [...extractPaths(value), ...extractPaths(property)];
-        break;
-      case "duration":
-        transitionDuration = [...extractPaths(value), ...extractPaths(duration)];
-        break;
-      case "easing":
-        transitionEasing = [...extractPaths(value), ...extractPaths(easing)];
-        break;
-      default:
-        return;
-    }
-  });
-  return { transitionProperty, transitionDuration, transitionEasing };
-};
 var isTone = (value) => {
   if (!isObject(value)) return false;
   const keys = Object.keys(value);
@@ -663,75 +669,90 @@ var isTone = (value) => {
 };
 var extractColorSchemes = (theme) => {
   const { colors, semantics } = theme;
-  const results = {
-    colorSchemes: [],
-    colorSchemeColors: []
-  };
-  if (!isObject(colors)) return results;
+  let colorSchemes = [];
+  let colorSchemeColors = [];
+  if (!isObject(colors)) return { colorSchemes, colorSchemeColors };
   Object.entries(colors).forEach(([key, value]) => {
     if (!isTone(value)) return;
-    results.colorSchemes.push(key);
+    colorSchemes.push(key);
   });
-  if (!isObject(semantics?.colorSchemes)) return results;
+  if (!isObject(semantics?.colorSchemes))
+    return { colorSchemes, colorSchemeColors };
   Object.entries(semantics.colorSchemes).forEach(([key, value]) => {
     if (isTone(value)) {
-      results.colorSchemes.push(key);
-      results.colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
+      colorSchemes.push(key);
+      colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
     } else {
-      const hasColorScheme = isArray(value) ? value.every(
-        (key2) => isString(key2) && Object.keys(colors).includes(key2)
-      ) : Object.keys(colors).some((key2) => key2 === value);
+      const hasColorScheme = isArray(value) ? value.every((key2) => Object.keys(colors).includes(String(key2))) : Object.keys(colors).includes(String(value));
       if (!hasColorScheme) return;
-      results.colorSchemes.push(key);
-      results.colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
+      colorSchemes.push(key);
+      colorSchemeColors.push(...TONES.map((tone) => `${key}.${tone}`));
     }
   });
-  return results;
+  return { colorSchemes, colorSchemeColors };
 };
 var extractThemeSchemes = (theme) => {
   const { themeSchemes } = theme;
   if (!isObject(themeSchemes)) return ["base"];
   return ["base", ...Object.keys(themeSchemes)];
 };
-var extractPaths = (target, maxDepth = 3, omitKeys = []) => {
+var extractPaths = (target, maxDepth = 3, omitKeys = [], shouldProcess) => {
   if (!isObject(target) && !isArray(target) || !maxDepth) return [];
-  return Object.entries(target).reduce((array, [key, value]) => {
-    if (isObject(value) && !Object.keys(value).some((key2) => omitKeys.includes(key2))) {
-      extractPaths(value, maxDepth - 1, omitKeys).forEach(
-        (nestedKey) => array.push(`${key}.${nestedKey}`)
+  return Object.entries(target).reduce((prev, [key, value]) => {
+    if (isObject(value) && !Object.keys(value).some((key2) => omitKeys.includes(key2)) && (!shouldProcess || shouldProcess(value))) {
+      extractPaths(value, maxDepth - 1, omitKeys, shouldProcess).forEach(
+        (nestedKey) => prev.push(`${key}.${nestedKey}`)
       );
     } else {
-      array.push(key);
+      prev.push(key);
     }
-    return array;
+    return prev;
   }, []);
 };
-var extractKeys = (theme, key) => {
-  const keys = key.split(".");
-  const property = keys.reduce((obj, key2) => obj[key2] ?? {}, theme);
+var extractKeys = (obj, key) => {
+  const property = getObject(obj, key);
   if (!isObject(property)) return [];
   return Object.keys(property);
 };
-var createThemeTypings = async (theme) => {
+var createThemeTypings = async (theme, { responsive = false }) => {
+  let shouldProcess = void 0;
+  if (responsive && isObject(theme.breakpoints)) {
+    const keys = ["base", ...Object.keys(theme.breakpoints)];
+    const isResponsive = (obj) => {
+      const providedKeys = Object.keys(obj);
+      if (!providedKeys.length) return false;
+      if (!providedKeys.includes("base")) return false;
+      return providedKeys.every((key) => keys.includes(key));
+    };
+    shouldProcess = (obj) => !isResponsive(obj);
+  }
   const tokens = config.reduce(
     (prev, {
       key,
+      replaceKey,
       maxScanDepth,
       omitScanKeys,
-      filter = () => true,
       flatMap = (value) => value
     }) => {
-      const target = theme[key];
-      prev[key] = [];
+      const target = getObject(theme, key);
+      prev[replaceKey ?? key] = [];
       if (isObject(target) || isArray(target)) {
-        prev[key] = extractPaths(target, maxScanDepth, omitScanKeys).filter(filter).flatMap(flatMap);
+        prev[replaceKey ?? key] = extractPaths(
+          target,
+          maxScanDepth,
+          omitScanKeys,
+          shouldProcess
+        ).flatMap(flatMap);
       }
       if (isObject(theme.semantics)) {
-        const semanticKeys = extractKeys(
-          omitObject(theme.semantics, ["colorSchemes"]),
-          key
-        ).filter(filter).flatMap(flatMap);
-        prev[key].push(...semanticKeys);
+        const target2 = getObject(theme.semantics, key);
+        const semanticKeys = extractPaths(
+          target2,
+          maxScanDepth,
+          omitScanKeys,
+          shouldProcess
+        ).flatMap(flatMap);
+        prev[replaceKey ?? key].push(...semanticKeys);
       }
       return prev;
     },
@@ -741,24 +762,23 @@ var createThemeTypings = async (theme) => {
   const layerStyles = extractKeys(theme, "styles.layerStyles");
   const { colorSchemes, colorSchemeColors } = extractColorSchemes(theme);
   const themeSchemes = extractThemeSchemes(theme);
-  const { transitionProperty, transitionDuration, transitionEasing } = extractTransitions(theme);
-  const componentTypes = extractComponents(theme);
+  const components = extractComponents(theme);
   tokens.colors = [...tokens.colors, ...colorSchemeColors];
   return prettier(
-    `import type { UITheme } from './ui-theme.types'
-
-export interface GeneratedTheme extends UITheme { ${print(
-      {
+    [
+      `import type { UITheme } from './ui-theme.types'`,
+      ``,
+      `export interface GeneratedTheme extends UITheme {`,
+      print({
         ...tokens,
         textStyles,
         layerStyles,
         colorSchemes,
-        themeSchemes,
-        transitionProperty,
-        transitionDuration,
-        transitionEasing
-      }
-    )} ${printComponent(componentTypes)} }`
+        themeSchemes
+      }),
+      printComponent(components),
+      `}`
+    ].join("\n")
   );
 };
 
@@ -804,6 +824,7 @@ var resolveOutputPath = async (outPath) => {
 // src/command/tokens/index.ts
 var generateThemeTypings = async ({
   theme,
+  config: config2,
   outFile
 }) => {
   p.intro(source_default.magenta(`Generating Yamada UI theme typings`));
@@ -811,7 +832,7 @@ var generateThemeTypings = async ({
   try {
     const start = process.hrtime.bigint();
     s.start(`Parsing the theme`);
-    const generatedTheme = await createThemeTypings(theme);
+    const generatedTheme = await createThemeTypings(theme, config2.theme ?? {});
     s.stop(`Parsed the theme`);
     s.start(`Resolving the output path`);
     const outPath = await resolveOutputPath(outFile);
@@ -829,19 +850,22 @@ var generateThemeTypings = async ({
     p.cancel(source_default.red(e instanceof Error ? e.message : "Message is missing"));
   }
 };
-var actionTokens = async (themePath2, { out: outFile, watch: watchFile }) => {
+var actionTokens = async (themePath2, { cwd = import_path3.default.resolve(), out: outFile, watch: watchFile }) => {
   const readFile = async () => {
     const filePath = import_path3.default.resolve(themePath2);
-    const { mod: theme, dependencies } = await (0, import_bundle_n_require.bundleNRequire)(filePath);
-    return { theme, dependencies };
+    const { mod, dependencies: dependencies2 } = await getModule(filePath, cwd);
+    const theme2 = mod?.default ?? mod?.theme ?? mod?.customTheme ?? mod?.defaultTheme ?? {};
+    const config3 = mod?.config ?? mod?.customConfig ?? mod?.defaultConfig ?? {};
+    return { theme: theme2, config: config3, dependencies: dependencies2 };
   };
   let file = await readFile();
+  const { theme, config: config2, dependencies } = file;
   const buildFile = async () => {
-    await generateThemeTypings({ theme: file.theme, outFile });
+    await generateThemeTypings({ theme, config: config2, outFile });
     if (watchFile) console.log("\n", "\u231B\uFE0F Watching for changes...");
   };
   if (watchFile) {
-    const watchPath = typeof watchFile === "string" ? watchFile : file.dependencies;
+    const watchPath = typeof watchFile === "string" ? watchFile : dependencies;
     import_chokidar.default.watch(watchPath).on("ready", buildFile).on("change", async (filePath) => {
       console.log("\u{1F4E6} File changed", filePath);
       file = await readFile();