vueless 0.0.5 → 0.0.6

package/src/plugin.vite/services/iconResolver.service.js

@@ -1,291 +0,0 @@
-/**
- 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 ".../.generated" 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 "fs";
-import path from "path";
-import { createRequire } from "node:module";
-import { merge } from "lodash-es";
-
-import vuelessConfig from "../../../vueless.config.js";
-
-const DESTINATION_DIR = "./src/assets/images/.generated";
-const DEFAULT_CONFIG_PATH = ".vueless/ui.image-icon/configs/default.config.js";
-const STORYBOOK_STORY_EXTENSION = ".stories.js";
-const U_ICON = "UIcon";
-
-const defaultVariants = getMergedConfig();
-const args = parseArgs();
-
-let isDebug = false;
-
-// run method manually
-if (args.run) {
-  copyIcons(args.mode);
-}
-
-// perform icons copy magick... ✨
-export function copyIcons(mode = "src", debug) {
-  isDebug = debug || false;
-
-  removeIcons();
-
-  const vuelessVueFiles = getFiles(".vueless", ".vue");
-  const vuelessJsFiles = getFiles(".vueless", ".js");
-  const vuelessLayoutsVueFiles = getFiles(".vueless-layouts", ".vue");
-  const vuelessLayoutsJsFiles = getFiles(".vueless-layouts", ".js");
-  const vuelessServicesJsFiles = getFiles(".vueless-services", ".js");
-
-  findAndCopyIcons([
-    ...vuelessVueFiles,
-    ...vuelessJsFiles,
-    ...vuelessLayoutsVueFiles,
-    ...vuelessLayoutsJsFiles,
-    ...vuelessServicesJsFiles,
-    "vueless.config.js",
-    "vueless.config.ts",
-  ]);
-
-  if (mode === "src" || mode === "all") {
-    const srcVueFiles = getFiles("src", ".vue");
-    const srcJsFiles = getFiles("src", ".js");
-    const srcTsFiles = getFiles("src", ".ts");
-
-    findAndCopyIcons([...srcVueFiles, ...srcJsFiles, ...srcTsFiles]);
-  }
-
-  if (mode === "storybook" || mode === "all") {
-    const vuelessStoriesJsFiles = getFiles(".vueless", STORYBOOK_STORY_EXTENSION);
-
-    findAndCopyIcons(vuelessStoriesJsFiles);
-  }
-}
-
-export function removeIcons() {
-  if (fs.existsSync(DESTINATION_DIR)) {
-    fs.rmSync(DESTINATION_DIR, { recursive: true, force: true });
-
-    if (isDebug) {
-      console.log("Dynamically copied icons was successfully removed.");
-    }
-  }
-}
-
-function findAndCopyIcons(files) {
-  const safelistIcons = getSafelistIcons();
-
-  safelistIcons.forEach((iconName) => {
-    copyFile(iconName, false);
-    copyFile(iconName, true);
-  });
-
-  files.forEach(async (file) => {
-    const fileContents = fs.existsSync(file) ? fs.readFileSync(file).toString() : "";
-
-    /* Objects across the project */
-    const objectRegExp = /(\{|[^{])[^}]*\b\w*icon\w*:\s*["']([^"']+)["'][^}]*}/gi;
-    const objectMatches = fileContents.match(objectRegExp);
-
-    if (objectMatches) {
-      for (const match of objectMatches) {
-        const iconNameRegex = /\w*(icon)\w*:\s*["']([^"'\s]+)["']/gi;
-        const iconNameMatch = iconNameRegex.exec(match);
-        const iconName = iconNameMatch && iconNameMatch[2];
-
-        const iconFillRegex = /\w*(fill)\w*:\s*(true|false)/gi;
-        const fillMatch = iconFillRegex.exec(match);
-        const fill = fillMatch ? fillMatch[2] : defaultVariants.fill;
-
-        try {
-          if (iconName) {
-            copyFile(iconName, fill);
-          }
-        } catch (error) {
-          // console.log(error);
-        }
-
-        iconNameRegex.lastIndex = 0;
-        iconFillRegex.lastIndex = 0;
-      }
-    }
-
-    /* UIcon */
-    const regexName = /\bname\s*=\s*["']([^"'\s]+)["']/;
-    const regexFill = /(:(fill)="([^"]*)"|fill)/;
-
-    const matchNameArray = fileContents.match(/<UIcon[^>]+>/g);
-
-    if (matchNameArray) {
-      for (const match of matchNameArray) {
-        const iconNameMatch = regexName.exec(match);
-        const iconFillMatch = regexFill.exec(match);
-
-        const iconName = iconNameMatch ? iconNameMatch[1] : null;
-        const fill = iconFillMatch ? iconFillMatch[1] : defaultVariants.fill;
-
-        try {
-          if (iconName) {
-            if (iconFillMatch && iconFillMatch[3]) {
-              copyFile(iconName, false);
-              copyFile(iconName, true);
-            } else {
-              copyFile(iconName, fill);
-            }
-          }
-        } catch (error) {
-          // console.log(error);
-        }
-      }
-    }
-
-    /* UIcon with ternary operator */
-    const ternaryRegexName = /\bname="[^']*'([^']*)'\s*:\s*'([^']*)'/;
-    const ternaryRegexFill = /(:(fill)="([^"]*)"|fill)/;
-
-    const ternaryMatchNameArray = fileContents.match(/<UIcon[^>]+>/g);
-
-    if (ternaryMatchNameArray) {
-      for (const match of ternaryMatchNameArray) {
-        const iconNameMatch = ternaryRegexName.exec(match);
-        const iconFillMatch = ternaryRegexFill.exec(match);
-
-        const fill = iconFillMatch ? iconFillMatch[1] : defaultVariants.fill;
-
-        try {
-          if (iconFillMatch && iconFillMatch[3]) {
-            copyFile(iconNameMatch[1], false);
-            copyFile(iconNameMatch[2], true);
-            copyFile(iconNameMatch[1], false);
-            copyFile(iconNameMatch[2], true);
-          } else {
-            copyFile(iconNameMatch[1], fill);
-            copyFile(iconNameMatch[2], fill);
-          }
-        } catch (error) {
-          // console.log(error);
-        }
-      }
-    }
-  });
-}
-
-function getFiles(dirPath, extension, fileList) {
-  const files = fs.readdirSync(dirPath);
-
-  fileList = fileList || [];
-
-  files.forEach((file) => {
-    const filePath = path.join(dirPath, file);
-    const stat = fs.statSync(filePath);
-
-    if (stat.isDirectory()) {
-      fileList = getFiles(filePath, extension, fileList);
-    } else {
-      const isStorybookStory =
-        filePath.endsWith(STORYBOOK_STORY_EXTENSION) && extension !== STORYBOOK_STORY_EXTENSION;
-
-      if (filePath.endsWith(extension) && !isStorybookStory) {
-        fileList.push(filePath);
-      }
-    }
-  });
-
-  return fileList;
-}
-
-function copyFile(name, fill) {
-  name = name.toLowerCase();
-  fill = Boolean(fill);
-
-  const library = defaultVariants.library;
-  const weight = defaultVariants.weight;
-  const style = defaultVariants.style;
-
-  const require = createRequire(import.meta.url);
-
-  /* eslint-disable prettier/prettier */
-  const libraries = {
-    "@material-symbols": {
-      source: `${library}/svg-${weight}/${style}/${name}${fill ? "-fill" : ""}.svg`,
-      destination: `${DESTINATION_DIR}/${library}/svg-${weight}/${style}/${name}${fill ? "-fill" : ""}.svg`,
-    },
-    "bootstrap-icons": {
-      source: `${library}/icons/${name}${fill ? "-fill" : ""}.svg`,
-      destination: `${DESTINATION_DIR}/${library}/icons/${name}${fill ? "-fill" : ""}.svg`,
-    },
-    heroicons: {
-      source: `${library}/${style}/${fill ? "solid" : "outline"}/${name}.svg`,
-      destination: `${DESTINATION_DIR}/${library}/${style}/${fill ? "solid" : "outline"}/${name}.svg`,
-    },
-  };
-  /* eslint-enable prettier/prettier */
-
-  const { source, destination } = libraries[library];
-
-  if (fs.existsSync(destination)) {
-    return;
-  }
-
-  const destDir = path.dirname(destination);
-
-  fs.mkdirSync(destDir, { recursive: true });
-  fs.copyFile(require.resolve(source), destination, (err) => {
-    if (args.debug || isDebug) {
-      err
-        ? console.error(`Error copying icon "${name}":`, err)
-        : console.log(`Icon "${name}" copied successfully!`);
-    }
-  });
-}
-
-function parseArgs() {
-  const args = process.argv.slice(2);
-  const parsedArgs = {};
-
-  let currentKey = null;
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i];
-
-    if (arg.startsWith("--")) {
-      const key = arg.slice(2);
-
-      parsedArgs[key] = true;
-      currentKey = key;
-    } else if (currentKey) {
-      parsedArgs[currentKey] = arg;
-      currentKey = null;
-    }
-  }
-
-  return parsedArgs;
-}
-
-function getSafelistIcons() {
-  return vuelessConfig.component ? vuelessConfig.component[U_ICON]?.safelistIcons || [] : [];
-}
-
-function getMergedConfig() {
-  if (fs.existsSync(DEFAULT_CONFIG_PATH)) {
-    const defaultConfigFile = fs.readFileSync(DEFAULT_CONFIG_PATH).toString();
-
-    const defaultConfig = getDefaultConfigJson(defaultConfigFile);
-    const globalConfig = vuelessConfig.component || {};
-
-    return merge(defaultConfig.defaultVariants, globalConfig[U_ICON]?.defaultVariants);
-  }
-}
-
-function getDefaultConfigJson(fileContents) {
-  const objectStartIndex = fileContents.indexOf("{");
-  const objectString = fileContents.substring(objectStartIndex).replace("};", "}");
-
-  // indirect eval
-  return (0, eval)("(" + objectString + ")"); // Converting into JS object
-}

package/src/plugin.vite/services/svgLoader.service.js

@@ -1,76 +0,0 @@
-/* eslint-disable no-console */
-
-import fs from "fs";
-import { compileTemplate } from "vue/compiler-sfc";
-import { optimize as optimizeSvg } from "svgo";
-
-const DEFAULT_SVGO_CONFIG = {
-  plugins: [
-    {
-      name: "preset-default",
-      params: {
-        overrides: {
-          removeViewBox: false,
-          convertColors: {
-            currentColor: true,
-          },
-        },
-      },
-    },
-  ],
-};
-
-export async function loadSvg(id, options) {
-  const { defaultImport = "url", svgo = true, svgoConfig = DEFAULT_SVGO_CONFIG } = options;
-  const svgRegex = /\.svg(\?(raw|url|component|skipsvgo))?$/;
-
-  if (!id.match(svgRegex)) {
-    return;
-  }
-
-  let svg;
-  const [path, query] = id.split("?", 2);
-  const importType = query || defaultImport;
-
-  // use default svg loader
-  if (importType === "url" && !path.includes(".generated")) {
-    return;
-  }
-
-  try {
-    svg = await fs.promises.readFile(path, "utf-8");
-  } catch (ex) {
-    console.warn(
-      "\n",
-      `${id} couldn't be loaded by vite-plugin-vue-vueless, fallback to default loader.`,
-    );
-
-    return;
-  }
-
-  if (importType === "raw") {
-    return `export default ${JSON.stringify(svg)}`;
-  }
-
-  if (svgo !== false && query !== "skipsvgo") {
-    svg = optimizeSvg(svg, {
-      ...svgoConfig,
-      path,
-    }).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: path,
-    transformAssetUrls: false,
-  });
-
-  return `
-    ${code}
-    export default { render: render }
-  `;
-}

package/src/plugin.vite/services/tailwindSafelist.service.js

@@ -1,195 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-import vuelessConfig from "../../../vueless.config.js";
-import { brandColors } from "../../service.tailwind";
-import { components } from "./unpluginComponentsResolver.js";
-
-const COMPONENTS_WITH_COLOR_PROP = [
-  "UButton",
-  "ULink",
-  "UDropdownButton",
-  "UDropdownBadge",
-  "UDropdownLink",
-  "UCheckbox",
-  "UCheckboxGroup",
-  "UCheckboxMultiState",
-  "USwitch",
-  "URadio",
-  "URadioCard",
-  "URadioGroup",
-  "UHeader",
-  "UText",
-  "UAlert",
-  "UMoney",
-  "UBadge",
-  "UModalConfirm",
-  "UIcon",
-  "UDot",
-];
-
-export function createTailwindSafelist() {
-  const safelist = [];
-
-  const srcVueFiles = getFiles("src", ".vue");
-  const vuelessVueFiles = getFiles(".vueless", ".vue");
-  const vuelessLayoutVueFiles = getFiles(".vueless-layouts", ".vue");
-  const vuelessJsConfigFiles = getFiles(".vueless", ".config.js");
-
-  const files = [
-    ...srcVueFiles,
-    ...vuelessVueFiles,
-    ...vuelessLayoutVueFiles,
-    ...vuelessJsConfigFiles,
-  ];
-
-  /* Generate safelist */
-  COMPONENTS_WITH_COLOR_PROP.forEach((component) => {
-    const { colors, isExistsComponent } = findColors(files, component);
-
-    if (isExistsComponent && colors.length) {
-      // eslint-disable-next-line vue/max-len, prettier/prettier
-      const defaultConfigPath = vuelessJsConfigFiles.find((file) => checkDefaultConfig(file, component));
-
-      const defaultSafelist = getDefaultConfig(defaultConfigPath)?.safelist;
-      const customSafelist =
-        vuelessConfig.component && vuelessConfig.component[component]?.safelist;
-
-      const colorString = colors.join("|");
-
-      const selectedSafelist = customSafelist
-        ? customSafelist && customSafelist(colorString)
-        : defaultSafelist && defaultSafelist(colorString);
-
-      if (selectedSafelist) {
-        safelist.push(...selectedSafelist);
-      }
-    }
-  });
-
-  process.env.SAFELIST_JSON = JSON.stringify(safelist);
-}
-
-function getFiles(dirPath, extension, fileList) {
-  const files = fs.readdirSync(dirPath);
-
-  fileList = fileList || [];
-
-  files.forEach((file) => {
-    const filePath = path.join(dirPath, file);
-    const stat = fs.statSync(filePath);
-
-    if (stat.isDirectory()) {
-      fileList = getFiles(filePath, extension, fileList);
-    } else {
-      filePath.endsWith(extension) && fileList.push(filePath);
-    }
-  });
-
-  return fileList;
-}
-
-function findColors(files, component) {
-  const colors = [];
-  const brandColor = getBrandColor();
-
-  if (brandColor && brandColor !== "grayscale") {
-    colors.push(brandColor);
-  }
-
-  if (!brandColors.includes("gray")) {
-    brandColors.push("gray");
-  }
-
-  /* Add safelist colors from config */
-  getSafelistColorsFromConfig(component).forEach((color) => addColor(color, colors));
-
-  let isExistsComponent = false;
-
-  files.forEach((file) => {
-    const fileContents = fs.existsSync(file) ? fs.readFileSync(file).toString() : "";
-
-    const isDefaultConfig = checkDefaultConfig(file, component);
-
-    /* Collect color from config objects */
-    if (isDefaultConfig) {
-      const colorRegExp = /\bcolor\s*:\s*["']([^"'\s]+)["']/g;
-      const matchedColors = fileContents.match(colorRegExp);
-
-      if (matchedColors) {
-        for (const match of matchedColors) {
-          const matchedColor = colorRegExp.exec(match);
-
-          addColor(matchedColor && matchedColor[1], colors);
-
-          colorRegExp.lastIndex = 0;
-        }
-      }
-    }
-
-    /* Collect color from U[Component] */
-    const componentRegExp = new RegExp(`<${component}[^>]+>`, "g");
-    const matchedComponent = fileContents.match(componentRegExp);
-
-    if (matchedComponent) {
-      isExistsComponent = true;
-
-      /* single value prop */
-      const colorRegExp = /\bcolor\s*=\s*["']([^"'\s]+)["']/;
-
-      for (const match of matchedComponent) {
-        const matchedColor = colorRegExp.exec(match);
-
-        addColor(matchedColor && matchedColor[1], colors);
-      }
-
-      /* ternary value prop */
-      const ternaryRegExp = /\bcolor="[^']*'([^']*)'\s*:\s*'([^']*)'/;
-
-      for (const match of matchedComponent) {
-        const matchedColors = ternaryRegExp.exec(match);
-
-        addColor(matchedColors && matchedColors[1], colors);
-        addColor(matchedColors && matchedColors[2], colors);
-      }
-    }
-  });
-
-  return { colors, isExistsComponent };
-}
-
-function addColor(color, colors) {
-  if (brandColors.includes(color) && !colors.includes(color)) {
-    colors.push(color);
-  }
-}
-
-function getSafelistColorsFromConfig(component) {
-  const globalSafelistColors = vuelessConfig.safelistColors || [];
-  const componentSafelistColors =
-    (vuelessConfig.component && vuelessConfig.component[component]?.safelistColors) || [];
-
-  return [...globalSafelistColors, ...componentSafelistColors];
-}
-
-function getBrandColor(component) {
-  return vuelessConfig.component
-    ? vuelessConfig.component[component]?.defaultVariants?.color
-    : vuelessConfig.brand || "";
-}
-
-function checkDefaultConfig(filePath, component) {
-  return filePath.includes(components[component]) && filePath.endsWith("default.config.js");
-}
-
-function getDefaultConfig(path) {
-  if (fs.existsSync(path)) {
-    const defaultConfigFile = fs.readFileSync(path).toString();
-
-    const objectStartIndex = defaultConfigFile.indexOf("{");
-    const objectString = defaultConfigFile.substring(objectStartIndex).replace("};", "}");
-
-    // indirect eval
-    return (0, eval)("(" + objectString + ")"); // Converting into JS object
-  }
-}