vueless 1.2.8-beta.1 → 1.2.8-beta.11

package/utils/node/dynamicProps.js

@@ -1,6 +1,6 @@
+import path from "node:path";
 import fs from "node:fs/promises";
 import { existsSync } from "node:fs";
-import path from "node:path";
 
 import { removeFolderIfEmpty } from "./helper.js";
 import { getVuelessConfig } from "./vuelessConfig.js";
@@ -8,86 +8,97 @@ import { getVuelessConfig } from "./vuelessConfig.js";
 import {
   CACHE_DIR,
   COMPONENTS,
-  GRAYSCALE_COLOR,
+  TEXT_COLOR,
   INHERIT_COLOR,
   PRIMARY_COLOR,
-  TEXT_COLOR,
+  GRAYSCALE_COLOR,
+  VUELESS_CACHE_DIR,
 } from "../../constants.js";
+import { buildWebTypes } from "./webTypes.js";
 
+/* local constants */
+const SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
 const OPTIONAL_MARK = "?";
 const CLOSING_BRACKET = "}";
 const IGNORE_PROP = "@ignore";
 const CUSTOM_PROP = "@custom";
 
+/* regular expressions */
 const PROPS_INTERFACE_REG_EXP = /export\s+interface\s+Props(?:<[^>]+>)?\s*{([^}]*)}/s;
 const UNION_SYMBOLS_REG_EXP = /[?|:"|;]/g;
 const WORD_IN_QUOTE_REG_EXP = /"([^"]+)"/g;
 
-const DEFAULT_SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
-
+/**
+ * Updates custom PropTypes for components based on provided configuration and colors.
+ *
+ * @param {Object} options Configuration options.
+ * @param {string} options.vuelessSrcDir The source directory for Vueless components.
+ * @param {string} options.basePath The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} Resolves when custom PropTypes for all components are updated successfully.
+ */
 export async function setCustomPropTypes({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
 
+  const hasCustomColors = vuelessConfig.colors?.length;
+  const hasCustomColorProp = !!Object.values(vuelessConfig.components || {}).find(
+    (component) => component.props?.color,
+  );
+
+  let componentsWithColorProp = [];
+
+  /* Build web-types.json to get list of components with color prop */
+  if (hasCustomColors || hasCustomColorProp) {
+    await buildWebTypes({ vuelessSrcDir, basePath });
+
+    componentsWithColorProp = await getComponentsWithColors();
+  }
+
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
     let componentGlobalConfig = vuelessConfig.components?.[componentName];
+    const hasDefaultColorProp = componentsWithColorProp.some((item) => item.name === componentName);
+
+    /* Skip components without props and without global colors in config */
+    if (!componentGlobalConfig?.props && !(hasCustomColors && hasDefaultColorProp)) {
+      continue;
+    }
 
-    if (vuelessConfig.colors && vuelessConfig.colors.length && componentGlobalConfig) {
-      const customProps = componentGlobalConfig.props || [];
-      const colorPropsIndex = customProps.findIndex((prop) => prop.name === "color");
-      const isCustomColorProp = colorPropsIndex !== -1;
+    /* Add colors to the default or custom color prop */
+    if (componentGlobalConfig?.props?.color || (hasCustomColors && hasDefaultColorProp)) {
+      // eslint-disable-next-line prettier/prettier
+      const defaultColors = componentsWithColorProp.find((component) => component.name === componentName)?.colors || [];
+      const safelistedColors = defaultColors.filter((color) => SAFE_COLORS.includes(color));
 
-      const modifiedCustomColorProp = isCustomColorProp
-        ? customProps.with(colorPropsIndex, {
-            ...customProps[colorPropsIndex],
-            name: "color",
+      componentGlobalConfig = {
+        ...(componentGlobalConfig || {}),
+        props: {
+          ...(componentGlobalConfig?.props || {}),
+          color: {
+            ...(componentGlobalConfig?.props?.color || {}),
             values: [
               ...new Set([
-                ...(customProps[colorPropsIndex]?.values || []),
-                ...vuelessConfig.colors,
-                ...DEFAULT_SAFE_COLORS,
+                ...(componentGlobalConfig?.props?.color?.values || []),
+                ...(vuelessConfig.colors || []),
+                ...safelistedColors,
               ]),
             ],
-          })
-        : undefined;
-
-      const customPropsWithColor = [
-        ...customProps,
-        {
-          name: "color",
-          values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-          required: false,
-        },
-      ];
-
-      componentGlobalConfig = {
-        ...componentGlobalConfig,
-        props: isCustomColorProp ? modifiedCustomColorProp : customPropsWithColor,
-      };
-    }
-
-    if (vuelessConfig.colors && vuelessConfig.colors.length && !componentGlobalConfig) {
-      componentGlobalConfig = {
-        props: [
-          {
-            name: "color",
-            values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-            required: false,
           },
-        ],
+        },
       };
     }
 
-    const isCustomProps = componentGlobalConfig && componentGlobalConfig.props;
+    const cachePath = path.join(vuelessSrcDir, componentDir);
 
-    if (isCustomProps) {
-      const cachePath = path.join(vuelessSrcDir, componentDir);
-
-      await cacheComponentTypes(cachePath);
-      await modifyComponentTypes(cachePath, componentGlobalConfig.props);
-    }
+    await cacheComponentTypes(cachePath);
+    await modifyComponentTypes(cachePath, componentGlobalConfig.props);
   }
 }
 
+/**
+ * Removes custom prop types definitions for components.
+ *
+ * @param {string} srcDir - The source directory containing the component directories.
+ * @return {Promise<void>} - A promise that resolves when custom prop types have been removed.
+ */
 export async function removeCustomPropTypes(srcDir) {
   for await (const componentDir of Object.values(COMPONENTS)) {
     await restoreComponentTypes(path.join(srcDir, componentDir));
@@ -95,6 +106,39 @@ export async function removeCustomPropTypes(srcDir) {
   }
 }
 
+/**
+ * Retrieves a list of components that have a "color" prop from the `web-types.json` file.
+ *
+ * @return {Promise<Array<string>>} A promise that resolves with an array of component names.
+ */
+async function getComponentsWithColors() {
+  const webTypesPath = path.join(VUELESS_CACHE_DIR, "web-types.json");
+
+  if (!existsSync(webTypesPath)) {
+    return [];
+  }
+
+  const webTypesContent = await fs.readFile(webTypesPath, "utf8");
+  const webTypes = JSON.parse(webTypesContent);
+
+  if (!webTypes.contributions?.html?.tags) {
+    return [];
+  }
+
+  return webTypes.contributions.html.tags
+    .filter((component) => component?.attributes.some((attribute) => attribute.name === "color"))
+    .map((component) => ({
+      name: component.name,
+      colors: component.attributes.find((attribute) => attribute.name === "color")?.enum,
+    }));
+}
+
+/**
+ * Caches the component types by copying a source file to a specified cache directory.
+ *
+ * @param {string} filePath - The directory path where the source file is located and the cache directory will be created.
+ * @return {Promise<void>} A promise that resolves when the file has been successfully copied, or immediately if no action is taken.
+ */
 async function cacheComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(filePath, "types.ts");
@@ -111,6 +155,13 @@ async function cacheComponentTypes(filePath) {
   await fs.cp(sourceFile, destFile);
 }
 
+/**
+ * Clears the cached component types by removing the specified cache file
+ * and deleting the corresponding folder if it is empty.
+ *
+ * @param {string} filePath - The base file path where the cache directory resides.
+ * @return {Promise<void>} A promise that resolves when the cache has been cleared.
+ */
 async function clearComponentTypesCache(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -122,6 +173,13 @@ async function clearComponentTypesCache(filePath) {
   await removeFolderIfEmpty(cacheDir);
 }
 
+/**
+ * Restores the component type definitions by copying a cached file to the destination.
+ *
+ * @param {string} filePath - The directory path where the component types should be restored.
+ * This path serves as the base for locating the cached file and the destination file.
+ * @return {Promise<void>} A promise that resolves when the component types have been successfully restored.
+ */
 async function restoreComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -132,6 +190,14 @@ async function restoreComponentTypes(filePath) {
   }
 }
 
+/**
+ * Extracts and processes the values from multiple lines based on the given indices.
+ *
+ * @param {Array<string>} lines - The array of lines to process.
+ * @param {number} propIndex - The index from which to start slicing the lines.
+ * @param {number} propEndIndex - The index until which to slice the lines (inclusive).
+ * @return {Array<string>} An array of strings with processed values, trimmed of unnecessary symbols.
+ */
 function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
   return lines
     .slice(propIndex)
@@ -139,6 +205,15 @@ function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
     .map((item) => item.replace(UNION_SYMBOLS_REG_EXP, "").trim());
 }
 
+/**
+ * Extracts and returns inline union values from the specified lines of text,
+ * based on provided property indices.
+ *
+ * @param {string[]} lines - The array of string lines to extract union values from.
+ * @param {number} propIndex - The starting index in the lines array from where extraction begins.
+ * @param {number} propEndIndex - The ending index in the lines array up to which extraction is performed.
+ * @return {string[]} An array of extracted union values, or an empty array if no matches are found.
+ */
 function getInlineUnionValues(lines, propIndex, propEndIndex) {
   const types = lines
     .slice(propIndex)
@@ -167,10 +242,8 @@ async function modifyComponentTypes(filePath, props) {
 
     const lines = propsInterface.split("\n");
 
-    for (const prop of props) {
-      const { name, type, values = [], description, required, ignore } = prop;
-
-      if (!name) return;
+    for (const name in props) {
+      const { type, values = [], description, required, ignore } = props[name];
 
       /* Find line with prop. */
       const propRegex = new RegExp(`^\\s*${name}[?:]?\\s*:`);

package/utils/node/helper.d.ts

@@ -1,15 +1,18 @@
-export function getDirFiles(dirPath: any, ext: any, { recursive, exclude }?: {
+export function getDirFiles(dirPath: string, ext: string, { recursive, exclude }?: {
     recursive?: boolean | undefined;
-    exclude?: never[] | undefined;
+    exclude?: string[] | undefined;
 }): Promise<string[]>;
 export function getNuxtDirs(): string[];
 export function getVueDirs(): string[];
 export function getVuelessConfigDirs(): string[];
-export function getMergedComponentConfig(name: any): Promise<any>;
-export function getDefaultComponentConfig(name: any, configDir: any): Promise<{}>;
-export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {}): Promise<void>;
-export function buildTSFile(entryPath: any, configOutFile: any): Promise<void>;
-export function removeFolderIfEmpty(dirPath: any): Promise<void>;
+export function getMergedComponentConfig(name: string): Promise<Object>;
+export function getDefaultComponentConfig(name: string, configDir: string): Promise<Object>;
+export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {
+    vuelessSrcDir: string;
+    basePath: string;
+}): Promise<void>;
+export function buildTSFile(entryPath: string, configOutFile: string): Promise<void>;
+export function removeFolderIfEmpty(dirPath: string): Promise<void>;
 export function detectTypeScript(): Promise<boolean>;
 export function autoImportUserConfigs(basePath?: string): Promise<void>;
 export function generateConfigIndexContent(imports?: string[], componentEntries?: string[]): Promise<string>;

package/utils/node/helper.js

@@ -20,6 +20,16 @@ import {
   CONFIG_INDEX_FILE_NAME,
 } from "../../constants.js";
 
+/**
+ * Retrieves a list of file names in a specified directory that match the given extension and filtering criteria.
+ *
+ * @param {string} dirPath - The path of the directory to search for files.
+ * @param {string} ext - The extension of the files to include in the result.
+ * @param {Object} [options] - Optional settings to customize the file search.
+ * @param {boolean} [options.recursive=true] - Whether to search directories recursively.
+ * @param {string[]} [options.exclude=[]] - A list of file or directory names to exclude from the result.
+ * @return {Promise<string[]>} - A promise that resolves to an array of file paths that match the specified criteria.
+ */
 export async function getDirFiles(dirPath, ext, { recursive = true, exclude = [] } = {}) {
   let fileNames = [];
 
@@ -65,6 +75,10 @@ export async function getDirFiles(dirPath, ext, { recursive = true, exclude = []
     .filter((filePath) => !statSync(filePath).isDirectory());
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Nuxt.js project.
+ * @return {string[]}.
+ */
 export function getNuxtDirs() {
   return [
     path.join(cwd(), "app"),
@@ -82,14 +96,28 @@ export function getNuxtDirs() {
   ];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vue.js project.
+ * @return {string[]}.
+ */
 export function getVueDirs() {
   return [path.join(cwd(), "src")];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vueless project.
+ * @return {string[]}.
+ */
 export function getVuelessConfigDirs() {
   return [path.join(cwd(), VUELESS_CONFIG_DIR)];
 }
 
+/**
+ * Retrieves the merged config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @return {Promise<Object>} A promise that resolves to the merged configuration object for the specified component.
+ */
 export async function getMergedComponentConfig(name) {
   const configOutPath = path.join(cwd(), `${VUELESS_MERGED_CONFIGS_CACHED_DIR}/${name}.json`);
 
@@ -100,6 +128,13 @@ export async function getMergedComponentConfig(name) {
   }
 }
 
+/**
+ * Retrieves the default config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @param {string} configDir - The directory path where the component's configuration file is located.
+ * @return {Promise<Object>} A promise that resolves to the default configuration object for the specified component.
+ */
 export async function getDefaultComponentConfig(name, configDir) {
   const configOutPath = path.join(cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
   let config = {};
@@ -117,6 +152,14 @@ export async function getDefaultComponentConfig(name, configDir) {
   return config;
 }
 
+/**
+ * Caches merged configs for all components.
+ *
+ * @param {Object} options - Configuration options.
+ * @param {string} options.vuelessSrcDir - The source directory for Vueless components.
+ * @param {string} options.basePath - The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} A promise that resolves when all merged configs have been cached.
+ */
 export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
   const componentNames = Object.entries(COMPONENTS);
@@ -146,6 +189,13 @@ export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   }
 }
 
+/**
+ * Builds a TypeScript file into a JavaScript file using esbuild.
+ *
+ * @param {string} entryPath - The path to the TypeScript file to be built.
+ * @param {string} configOutFile - The output path for the resulting JavaScript file.
+ * @return {Promise<void>} A promise that resolves when the build is complete.
+ */
 export async function buildTSFile(entryPath, configOutFile) {
   await esbuild.build({
     entryPoints: [entryPath],
@@ -158,13 +208,20 @@ export async function buildTSFile(entryPath, configOutFile) {
   });
 }
 
+/**
+ * Removes a folder if it is empty.
+ * @param {string} dirPath - The path to the directory to be removed.
+ * @return {Promise<void>} A promise that resolves when the directory has been removed.
+ */
 export async function removeFolderIfEmpty(dirPath) {
-  if (existsSync(dirPath)) {
+  try {
     const files = await readdir(dirPath);
 
     if (!files.length) {
-      await rmdir(dirPath);
+      await rmdir(dirPath, { recursive: false, force: true });
     }
+  } catch {
+    // suppress errors
   }
 }
 

package/utils/node/tailwindSafelist.js

@@ -233,7 +233,7 @@ function getClassesToSafelist(config) {
   const safelistItems = [];
 
   for (const key in config) {
-    if (key === SYSTEM_CONFIG_KEY.defaults) continue;
+    if (key === SYSTEM_CONFIG_KEY.defaults || SYSTEM_CONFIG_KEY.props) continue;
 
     if (Object.hasOwn(config, key)) {
       const classes = config[key];
@@ -267,7 +267,7 @@ function getClassesToSafelist(config) {
  */
 function getSafelistClasses(config, colors) {
   const classes = new Set();
-  const defaultColor = config.defaults?.color || "";
+  const defaultColor = config.defaults?.color || config.props?.color?.default || "";
 
   getClassesToSafelist(config).map((safelistClass) => {
     [...colors, defaultColor].forEach((color) => {

package/utils/theme.ts

@@ -35,6 +35,8 @@ import {
   DEFAULT_DISABLED_OPACITY,
   LETTER_SPACING,
   DEFAULT_LETTER_SPACING,
+  LIGHT_THEME,
+  DARK_THEME,
 } from "../constants";
 
 import type {
@@ -191,6 +193,8 @@ export function resetTheme() {
     `vl-${ROUNDING}-lg`,
     `vl-${LETTER_SPACING}`,
     `vl-${DISABLED_OPACITY}`,
+    `vl-${LIGHT_THEME}`,
+    `vl-${DARK_THEME}`,
   ];
 
   themeKeys.forEach((key) => {
@@ -217,8 +221,8 @@ export function getTheme(config?: ThemeConfig): MergedThemeConfig {
   const letterSpacing = getLetterSpacing(config?.letterSpacing);
   const disabledOpacity = getDisabledOpacity(config?.disabledOpacity);
 
-  const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme);
-  const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme);
+  const lightTheme = getLightTheme(config?.lightTheme);
+  const darkTheme = getDarkTheme(config?.darkTheme);
 
   return {
     colorMode,
@@ -254,8 +258,8 @@ export function setTheme(config: ThemeConfig = {}) {
   let primary = getPrimaryColor(config.primary);
   const neutral = getNeutralColor(config.neutral);
 
-  const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme, config.lightTheme);
-  const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme, config.darkTheme);
+  const lightTheme = getLightTheme(config.lightTheme);
+  const darkTheme = getDarkTheme(config.darkTheme);
 
   /* Redeclare primary color if grayscale color set as default */
   if (primary === GRAYSCALE_COLOR) {
@@ -608,7 +612,7 @@ function getLetterSpacing(letterSpacing?: ThemeConfig["letterSpacing"]) {
   const storageKey = `vl-${LETTER_SPACING}`;
 
   const spacing = letterSpacing ?? getStored(storageKey) ?? vuelessConfig.letterSpacing;
-  const mergedSpacing = Math.max(0, Number(spacing ?? DEFAULT_LETTER_SPACING));
+  const mergedSpacing = Number(spacing ?? DEFAULT_LETTER_SPACING);
 
   if (isCSR && letterSpacing !== undefined) {
     setCookie(storageKey, String(mergedSpacing));
@@ -636,6 +640,58 @@ function getDisabledOpacity(disabledOpacity?: ThemeConfig["disabledOpacity"]) {
   return mergedOpacity;
 }
 
+/**
+ * Retrieve light theme configuration and save them to cookie and localStorage.
+ * @return Partial<VuelessCssVariables> - light theme configuration.
+ */
+function getLightTheme(lightTheme?: Partial<VuelessCssVariables>) {
+  const storageKey = `vl-${LIGHT_THEME}`;
+
+  const storedLightTheme: Partial<VuelessCssVariables> = JSON.parse(getStored(storageKey) ?? "{}");
+
+  const mergedLightTheme = merge(
+    {},
+    DEFAULT_LIGHT_THEME,
+    vuelessConfig.lightTheme,
+    storedLightTheme,
+    lightTheme,
+  );
+
+  if (isCSR && lightTheme !== undefined) {
+    const themeString = JSON.stringify(mergedLightTheme);
+
+    localStorage.setItem(storageKey, themeString);
+  }
+
+  return mergedLightTheme;
+}
+
+/**
+ * Retrieve dark theme configuration and save them to cookie and localStorage.
+ * @return Partial<VuelessCssVariables> - dark theme configuration.
+ */
+function getDarkTheme(darkTheme?: Partial<VuelessCssVariables>) {
+  const storageKey = `vl-${DARK_THEME}`;
+
+  const storedDarkTheme: Partial<VuelessCssVariables> = JSON.parse(getStored(storageKey) ?? "{}");
+
+  const mergedDarkTheme = merge(
+    {},
+    DEFAULT_DARK_THEME,
+    vuelessConfig.darkTheme,
+    storedDarkTheme,
+    darkTheme,
+  );
+
+  if (isCSR && darkTheme !== undefined) {
+    const themeString = JSON.stringify(mergedDarkTheme);
+
+    localStorage.setItem(storageKey, themeString);
+  }
+
+  return mergedDarkTheme;
+}
+
 /**
  * Generate and apply Vueless CSS variables.
  * @return string - Vueless CSS variables string.

package/utils/ui.ts

@@ -7,7 +7,13 @@ import { createGetMergedConfig } from "./node/mergeConfigs";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
 import { ICON_NON_PROPS_DEFAULTS, TAILWIND_MERGE_EXTENSION } from "../constants";
 
-import type { Config, ComponentDefaults, UnknownObject, ComponentNames } from "../types";
+import type {
+  Config,
+  UnknownObject,
+  ComponentNames,
+  ComponentDefaults,
+  ComponentCustomProps,
+} from "../types";
 
 interface MergedConfigOptions {
   defaultConfig: unknown;
@@ -87,10 +93,14 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
  * Return default values for component props, icons, etc..
  */
 export function getDefaults<Props, Config>(defaultConfig: Config, name: ComponentNames) {
-  const componentDefaults = (defaultConfig as UnknownObject).defaults || {};
+  const componentDefaults = (defaultConfig as Config & UnknownObject).defaults || {};
   const globalDefaults = vuelessConfig.components?.[name]?.defaults || {};
 
-  const defaults = merge({}, componentDefaults, globalDefaults) as Props & ComponentDefaults;
+  const customProps = vuelessConfig.components?.[name]?.props as ComponentCustomProps;
+  const customPropsDefaults = getCustomPropsDefaults(customProps) || {};
+
+  const defaults = merge({}, componentDefaults, globalDefaults, customPropsDefaults) as Props &
+    ComponentDefaults;
 
   /* Remove non a props defaults. */
   for (const key in defaults) {
@@ -116,3 +126,22 @@ export function getDefaults<Props, Config>(defaultConfig: Config, name: Componen
 export function setColor(classes: string, color: string) {
   return classes?.replace(/{color}/g, color);
 }
+
+/**
+ * Retrieves the default values from the provided component custom properties.
+ */
+export function getCustomPropsDefaults(props: ComponentCustomProps) {
+  const customPropsDefaults: ComponentDefaults = {};
+
+  if (!props) {
+    return customPropsDefaults;
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value.default) {
+      customPropsDefaults[key] = value.default;
+    }
+  }
+
+  return customPropsDefaults;
+}