vueless 0.0.479 → 0.0.481

package/utils/node/loaderIcon.js

@@ -0,0 +1,232 @@
+/**
+ This scrypt find icon names from the UIcon props and objects across the project
+ and copy SVG icons from the default icons library (@material-symbols or other from config)
+ to the ".../cache" folder.
+
+ Those icons will be used only in the build stage.
+ The script is needed to avoid all @material-symbols icons set in the project bundle.
+ */
+
+/* eslint-disable no-console */
+import fs from "node:fs";
+import path from "node:path";
+import { createRequire } from "module";
+import { rm, cp } from "node:fs/promises";
+
+import { vuelessConfig } from "./vuelessConfig.js";
+import { getDirFiles, getDefaultConfigJson, merge } from "./helper.js";
+import { CACHE_PATH, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+
+const ICONS_DIR = "assets/icons";
+const NUXT_ASSETS_DIR = path.join(process.cwd(), "assets/.vueless/icons");
+const DEFAULT_ICONS_DIR = path.join(process.cwd(), `src/${ICONS_DIR}`);
+const CACHED_ICONS_DIR = path.join(process.cwd(), `${CACHE_PATH}/${ICONS_DIR}`);
+const ICON_CONFIG_PATH = "ui.image-icon/config.ts";
+const ICON_COMPONENT_NAME = "UIcon";
+const STORYBOOK_STORY_EXTENSIONS = ["/stories.js", "/stories.ts"];
+
+let isDebug = false;
+let isVuelessEnv = false;
+let isDefaultMode = false;
+let isStorybookMode = false;
+let isVuelessIconsMode = false;
+let cachedIconsDir = CACHED_ICONS_DIR;
+
+// perform icons copy magick... ✨
+export async function copyIcons({ mode = "", env, debug, targetFiles = [], isNuxt } = {}) {
+  isDebug = debug || false;
+  isVuelessEnv = env === "vueless";
+  isDefaultMode = mode === "";
+  isStorybookMode = mode === "storybook";
+  isVuelessIconsMode = mode === "vuelessIcons";
+
+  if (isVuelessIconsMode && isVuelessEnv) cachedIconsDir = DEFAULT_ICONS_DIR;
+  if (isStorybookMode && isVuelessEnv) cachedIconsDir = CACHED_ICONS_DIR;
+
+  if (isStorybookMode) {
+    const storybookStoriesJs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[0]);
+    const storybookStoriesTs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[1]);
+
+    findAndCopyIcons([...storybookStoriesJs.flat(), ...storybookStoriesTs.flat()]);
+  }
+
+  if (isVuelessIconsMode || isDefaultMode || isStorybookMode) {
+    const vueFiles = targetFiles.map((componentPath) => getDirFiles(componentPath, ".vue"));
+
+    const jsFiles = targetFiles.map((jsFilePath) =>
+      getDirFiles(jsFilePath, ".js", { exclude: [STORYBOOK_STORY_EXTENSIONS[0]] }),
+    );
+
+    const tsFiles = targetFiles.map((tsFilePath) =>
+      getDirFiles(tsFilePath, ".ts", { exclude: [STORYBOOK_STORY_EXTENSIONS[1], ".d.ts"] }),
+    );
+
+    const iconFiles = await Promise.all([...vueFiles, ...jsFiles, ...tsFiles]);
+
+    findAndCopyIcons([
+      ...iconFiles.flat(),
+      `${VUELESS_CONFIG_FILE_NAME}.js`,
+      `${VUELESS_CONFIG_FILE_NAME}.ts`,
+    ]);
+  }
+
+  if (isNuxt) {
+    await cp(CACHED_ICONS_DIR, NUXT_ASSETS_DIR, {
+      recursive: true,
+    });
+  }
+}
+
+export async function removeIcons({ debug, isNuxt }) {
+  if (!fs.existsSync(cachedIconsDir)) return;
+
+  await rm(cachedIconsDir, { recursive: true, force: true });
+
+  if (isNuxt) {
+    await rm(NUXT_ASSETS_DIR, { recursive: true, force: true });
+  }
+
+  if (debug) {
+    console.log("Dynamically copied icons was successfully removed.");
+  }
+}
+
+function findAndCopyIcons(files) {
+  const defaults = getMergedConfig();
+  const safelistIcons = getSafelistIcons();
+
+  safelistIcons.forEach((iconName) => {
+    copyFile(iconName, false);
+    copyFile(iconName, true);
+  });
+
+  files.forEach((file) => {
+    const fileContents = fs.existsSync(file) ? fs.readFileSync(file).toString() : "";
+
+    /* Objects across the project */
+    const iconNameRegex = /\w*(icon)\w*:\s*["']([^"'\s]+)["']/gi;
+    const objectMatchNameArray = fileContents.match(iconNameRegex);
+
+    if (objectMatchNameArray) {
+      for (const match of objectMatchNameArray) {
+        const iconNameMatch = iconNameRegex.exec(match);
+        const iconName = iconNameMatch && iconNameMatch[2];
+
+        try {
+          if (iconName) {
+            copyFile(iconName);
+          }
+        } catch (error) {
+          isDebug && console.log(error);
+        }
+
+        iconNameRegex.lastIndex = 0;
+      }
+    }
+
+    /* Vueless components props */
+    const uComponentIconNamePattern = `\\b\\w*(name|icon)\\w*\\s*=\\s*(['"])(.*?)\\2`;
+    const uComponentIconNameArray = fileContents.match(new RegExp(uComponentIconNamePattern, "g"));
+
+    if (!uComponentIconNameArray) return;
+
+    for (const match of uComponentIconNameArray) {
+      const groupMatch = match.match(new RegExp(uComponentIconNamePattern));
+      const iconName = groupMatch ? groupMatch[3] : null;
+
+      try {
+        if (!iconName) return;
+
+        if (iconName?.includes("?")) {
+          const [trueName, falseName] = getTernaryValues(iconName);
+
+          copyFile(trueName);
+          copyFile(falseName);
+        } else {
+          copyFile(iconName);
+        }
+      } catch (error) {
+        isDebug && console.log(error);
+      }
+    }
+  });
+
+  function getTernaryValues(expression) {
+    const [, values] = expression
+      .replace(/\s/g, "") // newlines and spaces
+      .replace(/\?\./g, "") // conditional chaining `?.`
+      .replace(/['"]/g, "") // single and double quotes
+      .split("?");
+
+    const [trueValue, falseValue] = values.split(":");
+
+    return [trueValue, falseValue];
+  }
+
+  function copyFile(name) {
+    name = name.toLowerCase();
+
+    const library = defaults.library;
+    const weight = defaults.weight;
+    const style = defaults.style;
+
+    const require = createRequire(import.meta.url);
+
+    /* eslint-disable vue/max-len, prettier/prettier */
+    const libraries = {
+      vueless: {
+        // @material-symbols icons which used across the components.
+        source: `${process.cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+        destination: `${cachedIconsDir}/${name}.svg`
+      },
+      "@material-symbols": {
+        source: `${process.cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
+        destination: `${cachedIconsDir}/${library}/svg-${weight}/${style}/${name}.svg`
+      },
+      "bootstrap-icons": {
+        source: `${process.cwd()}/node_modules/${library}/icons/${name}.svg`,
+        destination: `${cachedIconsDir}/${library}/icons/${name}.svg`
+      },
+      heroicons: {
+        source: `${process.cwd()}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
+        destination: `${cachedIconsDir}/24/${style}/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`
+      }
+    };
+    /* eslint-enable vue/max-len, prettier/prettier */
+
+    const { source, destination } =
+      libraries[isVuelessIconsMode && isVuelessEnv ? "vueless" : library];
+
+    if (fs.existsSync(destination) || !fs.existsSync(source)) return;
+
+    const destDir = path.dirname(destination);
+
+    fs.mkdirSync(destDir, { recursive: true });
+    fs.copyFile(require.resolve(source), destination, (error) => {
+      if (isDebug) {
+        error
+          ? console.error(`Error copying icon "${name}":`, error)
+          : console.log(`Icon "${name}" copied successfully!`);
+      }
+    });
+  }
+}
+
+function getSafelistIcons() {
+  return vuelessConfig.component
+    ? vuelessConfig.component[ICON_COMPONENT_NAME]?.safelistIcons || []
+    : [];
+}
+
+function getMergedConfig() {
+  const defaultConfigPath = (isVuelessEnv ? "src/" : "node_modules/vueless/") + ICON_CONFIG_PATH;
+
+  if (fs.existsSync(defaultConfigPath)) {
+    const defaultConfigFile = fs.readFileSync(defaultConfigPath).toString();
+
+    const defaultConfig = getDefaultConfigJson(defaultConfigFile);
+    const globalConfig = vuelessConfig.component && vuelessConfig.component[ICON_COMPONENT_NAME];
+
+    return merge(globalConfig?.defaults || {}, defaultConfig.defaults);
+  }
+}

package/utils/node/loaderSvg.js

@@ -0,0 +1,71 @@
+import fs from "node:fs";
+import { compileTemplate } from "vue/compiler-sfc";
+import { optimize as optimizeSvg } from "svgo";
+
+import { DEFAULT_SVGO_CONFIG } from "../../constants.js";
+
+export async function loadSvg(id, options) {
+  const {
+    defaultImport = "url",
+    svgo = true,
+    svgoConfig = DEFAULT_SVGO_CONFIG,
+    debug = false,
+  } = options;
+  const svgRegex = /\.svg(\?(raw|url|component|skipsvgo))?$/;
+
+  if (!id.match(svgRegex)) {
+    return;
+  }
+
+  let svg;
+  let [svgPath, query] = id.split("?", 2);
+  const importType = query || defaultImport;
+
+  // clear svg path from prefix if exist
+  svgPath = svgPath.replace("/__skip_vite/", "");
+
+  // use default svg loader
+  if (importType === "url" && !svgPath.includes(".generated")) {
+    return;
+  }
+
+  if (debug) {
+    // eslint-disable-next-line no-console
+    console.log("iconPath:", svgPath);
+  }
+
+  try {
+    svg = await fs.promises.readFile(svgPath, "utf-8");
+  } catch {
+    // define an empty svg to prevent a UI crash.
+    svg = `<svg xmlns="http://www.w3.org/2000/svg"></svg>`;
+    // eslint-disable-next-line no-console
+    console.warn("\n", `${id} couldn't be loaded by vueless vite plugin.`);
+  }
+
+  if (importType === "raw") {
+    return `export default ${JSON.stringify(svg)}`;
+  }
+
+  if (svgo !== false && query !== "skipsvgo") {
+    svg = optimizeSvg(svg, {
+      ...svgoConfig,
+      svgPath,
+    }).data;
+  }
+
+  // prevent compileTemplate from removing the style tag
+  svg = svg.replace(/<style/g, '<component is="style"').replace(/<\/style/g, "</component");
+
+  const { code } = compileTemplate({
+    id: JSON.stringify(id),
+    source: svg,
+    filename: svgPath,
+    transformAssetUrls: false,
+  });
+
+  return `
+    ${code}
+    export default { render: render }
+  `;
+}

package/utils/node/mergeConfigs.js

@@ -0,0 +1,199 @@
+import { cloneDeep } from "lodash-es";
+
+import { SYSTEM_CONFIG_KEY } from "../../constants.js";
+
+export function createMergeConfigsFunction(cx) {
+  /**
+   * Recursively merge config objects with removing tailwind classes duplicates.
+   * config - final merged config.
+   * isReplace - enables class replacement instead of merge.
+   * isVariants - if true, prevents adding a "base" key into nested objects.
+   */
+  function mergeConfigs({
+    defaultConfig,
+    globalConfig,
+    propsConfig,
+    config = {},
+    isReplace = false,
+    isVariants = false,
+  }) {
+    globalConfig = cloneDeep(globalConfig || {});
+    propsConfig = cloneDeep(propsConfig || {});
+
+    const isGlobalConfig = Object.keys(globalConfig).length;
+    const isPropsConfig = Object.keys(propsConfig).length;
+
+    // Add unique keys from defaultConfig to composedConfig
+    const composedConfig = cloneDeep(defaultConfig);
+
+    // Add unique keys from globalConfig to composedConfig
+    for (const key in globalConfig) {
+      if (!Object.keys(composedConfig).includes(key)) {
+        composedConfig[key] = globalConfig[key];
+      }
+    }
+
+    // Add unique keys from propsConfig to composedConfig
+    for (const key in propsConfig) {
+      if (!Object.keys(composedConfig).includes(key)) {
+        composedConfig[key] = propsConfig[key];
+      }
+    }
+
+    const {
+      i18n,
+      defaults,
+      strategy,
+      safelist,
+      component,
+      safelistColors,
+      defaultVariants,
+      compoundVariants,
+    } = SYSTEM_CONFIG_KEY;
+
+    for (const key in composedConfig) {
+      if (isGlobalConfig || isPropsConfig) {
+        if (key === safelist || key === safelistColors) {
+          if (propsConfig[key]) {
+            // eslint-disable-next-line no-console
+            console.warn(`Passing '${key}' key in 'config' prop is not allowed.`);
+          }
+        } else if (key === component) {
+          config[key] = propsConfig[key] || defaultConfig[key];
+
+          if (globalConfig[key]) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Passing '${key}' key in 'config' prop or by global config is not allowed.`,
+            );
+          }
+        } else if (key === strategy) {
+          config[key] = propsConfig[key] || globalConfig[key] || defaultConfig[key];
+        } else if (key === defaults || key === defaultVariants) {
+          config[key] = {
+            ...defaultConfig[key],
+            ...globalConfig[key],
+            ...propsConfig[key],
+          };
+        } else if (key === compoundVariants) {
+          config[key] = mergeCompoundVariants({
+            defaultConfig,
+            globalConfig,
+            propsConfig,
+            isReplace,
+          });
+        } else {
+          const isObjectComposedConfig = typeof composedConfig[key] === "object";
+          const isObjectGlobalConfig = typeof globalConfig[key] === "object";
+          const isObjectPropsConfig = typeof propsConfig[key] === "object";
+
+          const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
+          const isEmpty = composedConfig[key] === null;
+          const isI18n = key === i18n;
+
+          if (key === "variants" && !isVariants) {
+            isVariants = true;
+          }
+
+          config[key] =
+            isObject && !isEmpty && !isI18n
+              ? mergeConfigs({
+                  defaultConfig: stringToObject(composedConfig[key], { addBase: !isVariants }),
+                  globalConfig: stringToObject(globalConfig[key], { addBase: !isVariants }),
+                  propsConfig: stringToObject(propsConfig[key], { addBase: !isVariants }),
+                  config: stringToObject(composedConfig[key], { addBase: !isVariants }),
+                  isReplace,
+                  isVariants,
+                })
+              : isReplace || isI18n
+                ? propsConfig[key] || globalConfig[key] || defaultConfig[key]
+                : cx([defaultConfig[key], globalConfig[key], propsConfig[key]]);
+        }
+      } else {
+        config[key] = composedConfig[key];
+      }
+    }
+
+    return config;
+  }
+
+  /**
+   * Merge CVA compound variants arrays.
+   * isReplace - enables class replacement instead of merge.
+   */
+  function mergeCompoundVariants({ defaultConfig, globalConfig, propsConfig, isReplace }) {
+    if (
+      (globalConfig.compoundVariants && !Array.isArray(globalConfig.compoundVariants)) ||
+      (propsConfig.compoundVariants && !Array.isArray(propsConfig.compoundVariants)) ||
+      (defaultConfig.compoundVariants && !Array.isArray(defaultConfig.compoundVariants))
+    ) {
+      // eslint-disable-next-line no-console
+      console.error("CompoundVariants should be an array.");
+    }
+
+    const globalConfigUniqueItems = cloneDeep(globalConfig.compoundVariants || []);
+    const propsConfigUniqueItems = cloneDeep(propsConfig.compoundVariants || []);
+
+    const config = defaultConfig.compoundVariants?.map((defaultConfigItem) => {
+      /**
+       * Compare two objects by keys for match.
+       */
+      function isSameItem(configItem) {
+        const hasConfigItemKeys = Object.keys(defaultConfigItem)
+          .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+          .every((item) => Boolean(item));
+
+        const hasDefaultConfigItemKeys = Object.keys(configItem)
+          .map((key) => defaultConfigItem[key] === configItem[key] || key === "class")
+          .every((item) => Boolean(item));
+
+        return hasConfigItemKeys && hasDefaultConfigItemKeys;
+      }
+
+      /**
+       * Find the same compound variant item in custom config if exist.
+       */
+      function findItem(config = []) {
+        const globalConfigUniqueItemIndex = globalConfigUniqueItems.findIndex(isSameItem);
+        const propsConfigUniqueItemIndex = propsConfigUniqueItems.findIndex(isSameItem);
+
+        if (~globalConfigUniqueItemIndex) {
+          globalConfigUniqueItems.splice(globalConfigUniqueItemIndex, 1);
+        }
+
+        if (~propsConfigUniqueItemIndex) {
+          propsConfigUniqueItems.splice(propsConfigUniqueItemIndex, 1);
+        }
+
+        return config.find(isSameItem);
+      }
+
+      const globalConfigItem = findItem(globalConfig.compoundVariants);
+      const propsConfigItem = findItem(propsConfig.compoundVariants);
+
+      return globalConfigItem || propsConfigItem
+        ? {
+            ...defaultConfigItem,
+            class: isReplace
+              ? propsConfigItem?.class || globalConfigItem?.class || defaultConfigItem.class
+              : cx([defaultConfigItem.class, globalConfigItem?.class, propsConfigItem?.class]),
+          }
+        : defaultConfigItem;
+    });
+
+    return [...(config || []), ...globalConfigUniqueItems, ...propsConfigUniqueItems];
+  }
+
+  return mergeConfigs;
+}
+
+/**
+ Turn simplified nested component config to regular config.
+ */
+function stringToObject(value, { addBase = false }) {
+  if (typeof value !== "object" && addBase) {
+    return { base: value || "" };
+  }
+
+  return typeof value === "object" ? value : addBase ? { base: value || "" } : {};
+}