vueless 1.2.1-beta.0 → 1.2.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.1-beta.0",
+  "version": "1.2.1-beta.1",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/plugin-vite.js

@@ -120,21 +120,21 @@ export const Vueless = function (options = {}) {
     configResolved: async (config) => {
       if (!isNuxtModuleEnv) {
         /* auto import user configs */
-        await autoImportUserConfigs();
+        await autoImportUserConfigs(basePath);
 
         /* merge and cache component configs. */
         await cacheMergedConfigs(vuelessSrcDir);
       }
 
-      await buildWebTypes(vuelessSrcDir);
-      await setCustomPropTypes(vuelessSrcDir);
+      await buildWebTypes({ vuelessSrcDir, basePath });
+      await setCustomPropTypes({ vuelessSrcDir, basePath });
 
       /* collect used in project colors for tailwind safelist */
-      await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, debug });
+      await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, basePath, debug });
 
       /* cache vueless built-in and project icons */
       await removeIconsCache(basePath);
-      await createIconsCache({ env, debug, targetFiles });
+      await createIconsCache({ env, targetFiles, basePath, debug });
 
       if (isNuxtModuleEnv) {
         await copyIconsCache(basePath);
@@ -170,7 +170,7 @@ export const Vueless = function (options = {}) {
 
       if (hasIconChanges && currentIconLines.length) {
         /* cache vueless built-in and project icons */
-        await createIconsCache({ env, debug, targetFiles: [file] });
+        await createIconsCache({ env, targetFiles: [file], basePath, debug });
 
         if (isNuxtModuleEnv) {
           await copyIconsCache(basePath);

package/utils/node/dynamicProps.d.ts

@@ -1,2 +1,2 @@
-export function setCustomPropTypes(srcDir: any): Promise<void>;
+export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {}): Promise<void>;
 export function removeCustomPropTypes(srcDir: any): Promise<void>;

package/utils/node/dynamicProps.js

@@ -3,7 +3,7 @@ import { existsSync } from "node:fs";
 import path from "node:path";
 
 import { removeFolderIfEmpty } from "./helper.js";
-import { vuelessConfig } from "./vuelessConfig.js";
+import { getVuelessConfig } from "./vuelessConfig.js";
 
 import {
   CACHE_DIR,
@@ -25,7 +25,9 @@ const WORD_IN_QUOTE_REG_EXP = /"([^"]+)"/g;
 
 const DEFAULT_SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
 
-export async function setCustomPropTypes(srcDir) {
+export async function setCustomPropTypes({ vuelessSrcDir, basePath } = {}) {
+  const vuelessConfig = await getVuelessConfig(basePath);
+
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
     let componentGlobalConfig = vuelessConfig.components?.[componentName];
 
@@ -78,8 +80,10 @@ export async function setCustomPropTypes(srcDir) {
     const isCustomProps = componentGlobalConfig && componentGlobalConfig.props;
 
     if (isCustomProps) {
-      await cacheComponentTypes(path.join(srcDir, componentDir));
-      await modifyComponentTypes(path.join(srcDir, componentDir), componentGlobalConfig.props);
+      const cachePath = path.join(vuelessSrcDir, componentDir);
+
+      await cacheComponentTypes(cachePath);
+      await modifyComponentTypes(cachePath, componentGlobalConfig.props);
     }
   }
 }

package/utils/node/loaderIcon.d.ts

@@ -1,4 +1,4 @@
-export function createIconsCache({ env, debug, targetFiles }?: string): Promise<void>;
+export function createIconsCache({ env, debug, targetFiles, basePath }?: string): Promise<void>;
 export function removeIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
 export function copyIconsCache(basePath: string, isVuelessEnv?: boolean): Promise<void>;
 export function generateIconExports(): string;

package/utils/node/loaderIcon.js

@@ -11,7 +11,7 @@ import { cwd } from "node:process";
 import { rm, cp } from "node:fs/promises";
 import { createRequire } from "module";
 
-import { vuelessConfig } from "./vuelessConfig.js";
+import { getVuelessConfig } from "./vuelessConfig.js";
 import { getDirFiles, getMergedComponentConfig } from "./helper.js";
 import {
   ICONS_DIR,
@@ -34,8 +34,9 @@ let uIconDefaults = {};
  * @param {string} env
  * @param {boolean} debug
  * @param {Array} targetFiles
+ * @param {string} basePath
  */
-export async function createIconsCache({ env, debug = false, targetFiles = [] } = {}) {
+export async function createIconsCache({ env, debug = false, targetFiles = [], basePath } = {}) {
   const isInternalEnv = env === INTERNAL_ENV;
   const isStorybookEnv = env === STORYBOOK_ENV;
 
@@ -55,6 +56,8 @@ export async function createIconsCache({ env, debug = false, targetFiles = [] }
     ...vuelessMergedConfigFiles,
   ];
 
+  const vuelessConfig = await getVuelessConfig(basePath);
+
   if (isInternalEnv) {
     const storybookFiles = [];
     const internalFiles = [];
@@ -65,13 +68,13 @@ export async function createIconsCache({ env, debug = false, targetFiles = [] }
         : internalFiles.push(file);
     }
 
-    await findAndCopyIcons(storybookFiles, STORYBOOK_ICONS_LIBRARY, debug);
-    await findAndCopyIcons(internalFiles, INTERNAL_ICONS_LIBRARY, debug);
+    await findAndCopyIcons(storybookFiles, STORYBOOK_ICONS_LIBRARY, vuelessConfig, debug);
+    await findAndCopyIcons(internalFiles, INTERNAL_ICONS_LIBRARY, vuelessConfig, debug);
   }
 
   if (!isInternalEnv) {
     await cachePackageIcons(isStorybookEnv);
-    await findAndCopyIcons(files, uIconDefaults.library, debug);
+    await findAndCopyIcons(files, uIconDefaults.library, vuelessConfig, debug);
   }
 }
 
@@ -180,9 +183,10 @@ async function cachePackageIcons(isStorybookEnv) {
  * Scan the project for icon names and copy found icons to the cache.
  * @param {Array} files
  * @param {string} library
+ * @param {object} vuelessConfig
  * @param {boolean} debug
  */
-async function findAndCopyIcons(files, library, debug) {
+async function findAndCopyIcons(files, library, vuelessConfig, debug) {
   const safelistIcons = vuelessConfig.components?.["UIcon"]?.safelistIcons;
 
   const validIconNamesRegex = /^(?!icon$|name$)[a-z0-9_-]+$/;

package/utils/node/storybook.d.ts

@@ -1,2 +1,2 @@
 export function defineConfigWithVueless(config: Object): Promise<Object>;
-export function getVuelessStoriesGlob(vuelessEnv: string, basePath: string): Promise<string[]>;
+export function getVuelessStoriesGlob(vuelessEnv: string): Promise<string[]>;

package/utils/node/storybook.js

@@ -1,5 +1,4 @@
 import { getVuelessConfig } from "./vuelessConfig.js";
-import { autoImportUserConfigs } from "./helper.js";
 import {
   COMPONENTS,
   DIRECTIVES,
@@ -17,10 +16,7 @@ import {
 export function defineConfigWithVueless(config) {
   return (async () => ({
     ...config,
-    stories: [
-      ...config.stories,
-      ...(await getVuelessStoriesGlob(config?.vuelessEnv, config?.basePath)),
-    ],
+    stories: [...config.stories, ...(await getVuelessStoriesGlob(config?.vuelessEnv))],
     addons: [
       ...new Set([
         ...(config.addons || []),
@@ -53,13 +49,9 @@ export function defineConfigWithVueless(config) {
  * Retrieves the glob pattern for Vueless stories based on the provided Vueless environment.
  *
  * @param {string} vuelessEnv - The Vueless environment.
- * @param {string} basePath - The Project base path.
  * @return {Promise<string[]>} A promise that resolves to an array of glob patterns for Vueless stories.
  */
-export async function getVuelessStoriesGlob(vuelessEnv, basePath) {
-  /* Auto import user configs. */
-  await autoImportUserConfigs(basePath);
-
+export async function getVuelessStoriesGlob(vuelessEnv) {
   const vuelessSrcDir = vuelessEnv === INTERNAL_ENV ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
   const vuelessConfig = await getVuelessConfig();
   const storiesGlob = [];

package/utils/node/tailwindSafelist.d.ts

@@ -1,5 +1,5 @@
 export function clearTailwindSafelist(): Promise<void>;
-export function createTailwindSafelist({ env, srcDir, targetFiles }?: {
+export function createTailwindSafelist({ env, srcDir, targetFiles, basePath }?: {
     env: string;
     srcDir: string;
     targetFiles?: string[] | undefined;

package/utils/node/tailwindSafelist.js

@@ -5,7 +5,7 @@ import { readFile, unlink, writeFile, mkdir } from "node:fs/promises";
 import { merge } from "lodash-es";
 
 import { getDefaultComponentConfig, getMergedComponentConfig, getDirFiles } from "./helper.js";
-import { vuelessConfig } from "./vuelessConfig.js";
+import { getVuelessConfig } from "./vuelessConfig.js";
 import {
   COMPONENTS,
   INTERNAL_ENV,
@@ -50,25 +50,31 @@ export async function clearTailwindSafelist() {
  * @param {string[]} [options.targetFiles=[]] - Optional array of target file paths to include in the safelist generation.
  * @return {Promise<void>} A promise that resolves when the safelist file is successfully created and written to disk.
  */
-export async function createTailwindSafelist({ env, srcDir, targetFiles = [] } = {}) {
+export async function createTailwindSafelist({ env, srcDir, targetFiles, basePath } = {}) {
   const isStorybookEnv = env === STORYBOOK_ENV;
   const isInternalEnv = env === INTERNAL_ENV;
 
+  const vuelessConfig = await getVuelessConfig(basePath);
+
   /* Safelist dynamic color classes in components. */
-  const classes = await getComponentsSafelistClasses({
+  const classes = await getComponentsSafelistClasses(vuelessConfig, {
     env: { isStorybookEnv, isInternalEnv },
     targetFiles,
     srcDir,
   });
 
   /* Safelist all color shades to allow runtime color switching feature. */
-  const runtimeColorCSSVariables = getRuntimeColorCSSVariables(isStorybookEnv, isInternalEnv);
+  const runtimeColorCSSVariables = getRuntimeColorCSSVariables(
+    vuelessConfig,
+    isStorybookEnv,
+    isInternalEnv,
+  );
 
   /* Safelist primary and neutral color variables. */
-  let brandColorCSSVariables = getBrandColorCSSVariables(isInternalEnv);
+  let brandColorCSSVariables = getBrandColorCSSVariables(vuelessConfig, isInternalEnv);
 
   /* Safelist all color variables to allow runtime color switching feature. */
-  const themeCSSVariables = getThemeCSSVariables();
+  const themeCSSVariables = getThemeCSSVariables(vuelessConfig);
 
   const safelist = [
     ...new Set([
@@ -91,11 +97,12 @@ export async function createTailwindSafelist({ env, srcDir, targetFiles = [] } =
  * Generates a list of runtime CSS color variables based on the environment
  * and available configuration.
  *
+ * @param {object} vuelessConfig - The Vueless config object.
  * @param {boolean} isStorybookEnv - Indicates if the method is executed in a Storybook environment.
  * @param {boolean} isInternalEnv - Indicates if the method is executed in an Internal environment.
  * @return {string[]} An array of strings, each representing CSS variable definitions for colors and shades.
  */
-function getRuntimeColorCSSVariables(isStorybookEnv, isInternalEnv) {
+function getRuntimeColorCSSVariables(vuelessConfig, isStorybookEnv, isInternalEnv) {
   if (!isStorybookEnv && !isInternalEnv && !vuelessConfig.runtimeColors) return [];
 
   const colors = vuelessConfig.runtimeColors?.length
@@ -110,10 +117,11 @@ function getRuntimeColorCSSVariables(isStorybookEnv, isInternalEnv) {
 /**
  * Generates an array of CSS variable strings for `primary` and `neutral` colors based on environment settings.
  *
+ * @param {object} vuelessConfig - The Vueless config object.
  * @param {boolean} isInternalEnv - Indicates whether the current environment is internal.
  * @return {string[]} An array of CSS variable strings representing brand colors and their shades.
  */
-function getBrandColorCSSVariables(isInternalEnv) {
+function getBrandColorCSSVariables(vuelessConfig, isInternalEnv) {
   if (isInternalEnv) return [];
 
   const colors = [
@@ -132,9 +140,10 @@ function getBrandColorCSSVariables(isInternalEnv) {
  * This method combines theme settings from default and custom configurations and
  * returns an array of variable values for each theme.
  *
+ * @param {object} vuelessConfig - The Vueless config object.
  * @return {Array} An array containing CSS variable values from the light and dark themes.
  */
-function getThemeCSSVariables() {
+function getThemeCSSVariables(vuelessConfig) {
   const lightThemeConfig = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme);
   const darkThemeConfig = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme);
 
@@ -150,6 +159,7 @@ function getThemeCSSVariables() {
  * CSS classes based on component usage, environment conditions, and configured colors.
  *
  * @param {Object} params - The parameters for the function.
+ * @param {object} vuelessConfig - The Vueless config object.
  * @param {Array<string>} params.targetFiles - List of file paths to check for component usage.
  * @param {Object} params.env - Environment variables for distinguishing between different environments.
  * @param {boolean} params.env.isStorybookEnv - Indicates whether the function is running in a Storybook environment.
@@ -159,7 +169,7 @@ function getThemeCSSVariables() {
  * @return {Promise<Array<string>>} A promise that resolves to an array of safelisted CSS class names
  * for all matched components and nested components.
  */
-async function getComponentsSafelistClasses({ targetFiles, env, srcDir }) {
+async function getComponentsSafelistClasses(vuelessConfig, { targetFiles = [], env, srcDir }) {
   const { isStorybookEnv, isInternalEnv } = env;
 
   let srcVueFiles = [];

package/utils/node/webTypes.d.ts

@@ -1 +1 @@
-export function buildWebTypes(srcDir: any): Promise<void>;
+export function buildWebTypes({ vuelessSrcDir, basePath }?: {}): Promise<void>;

package/utils/node/webTypes.js

@@ -1,10 +1,11 @@
-import { vuelessConfig } from "./vuelessConfig.js";
+import { getVuelessConfig } from "./vuelessConfig.js";
 
-export async function buildWebTypes(srcDir) {
+export async function buildWebTypes({ vuelessSrcDir, basePath } = {}) {
   try {
+    const vuelessConfig = await getVuelessConfig(basePath);
     const { default: build } = await import("@vueless/storybook/webTypes/index.js");
 
-    await build(vuelessConfig, srcDir);
+    await build(vuelessConfig, vuelessSrcDir);
   } catch (error) {
     if (error.code !== "ERR_MODULE_NOT_FOUND") {
       // eslint-disable-next-line no-console

package/utils/theme.ts

@@ -78,9 +78,10 @@ function toggleColorModeClass() {
  * @param {boolean} isCachedAutoMode
  * @return {string} current color mode
  */
-function setColorMode(mode: `${ColorMode}`, isCachedAutoMode: boolean = false): string {
+function setColorMode(mode: `${ColorMode}`, isCachedAutoMode?: boolean): string {
   const colorMode = mode || getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
 
+  // TODO: This always true `!!Number(getStored(AUTO_MODE_KEY))` > `!!Number(undefined) = true`
   isCachedAutoMode = isCachedAutoMode ?? !!Number(getStored(AUTO_MODE_KEY));
 
   const isAutoMode = colorMode === ColorMode.Auto;