vueless 0.0.2 → 0.0.3

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

@@ -0,0 +1,291 @@
+/**
+ 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.merge";
+
+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/plugin.vite/services/svgLoader.service.js

@@ -0,0 +1,76 @@
+/* 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/plugin.vite/services/tailwindSafelist.service.js

@@ -0,0 +1,197 @@
+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);
+
+  console.log(process.env.SAFELIST_JSON);
+}
+
+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
+  }
+}