vueless 0.0.479 → 0.0.481

package/utils/node/tailwindSafelist.js

@@ -0,0 +1,366 @@
+import path from "node:path";
+import { merge } from "lodash-es";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { extendTailwindMerge } from "tailwind-merge";
+import { isEqual, omit } from "lodash-es";
+import { defineConfig } from "cva";
+
+import { vuelessConfig } from "./vuelessConfig.js";
+import { createMergeConfigsFunction } from "./mergeConfigs.js";
+import { getDefaultConfigJson, getDirFiles } from "./helper.js";
+import {
+  COMPONENTS,
+  BRAND_COLORS,
+  BRAND_COLOR,
+  GRAY_COLOR,
+  DYNAMIC_COLOR_PATTERN,
+  TAILWIND_CLASS_DELIMITER,
+  TAILWIND_MERGE_EXTENSION,
+  NESTED_COMPONENT_REG_EXP,
+} from "../../constants.js";
+
+const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
+
+export const { cx } = defineConfig({
+  hooks: {
+    onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_REG_EXP, ""),
+  },
+});
+
+const mergeConfigs = createMergeConfigsFunction(cx);
+
+export function clearTailwindSafelist() {
+  process.env.VUELESS_SAFELIST = "";
+}
+
+export async function createTailwindSafelist({ mode, env, debug, targetFiles = [] } = {}) {
+  const isStorybookMode = mode === "storybook";
+  const isVuelessEnv = env === "vueless";
+  const vuelessFilePath = isVuelessEnv ? "src" : "node_modules/vueless";
+
+  const vuelessVueFiles = await getDirFiles(vuelessFilePath, ".vue");
+  const vuelessConfigJsFiles = await getDirFiles(vuelessFilePath, "/config.ts");
+  const vuelessConfigTsFiles = await getDirFiles(vuelessFilePath, "/config.js");
+  const vuelessConfigFiles = [...vuelessConfigJsFiles, ...vuelessConfigTsFiles].flat();
+
+  let srcVueFiles = [];
+
+  if (!isVuelessEnv) {
+    srcVueFiles = await Promise.all(
+      targetFiles.map((componentPath) => getDirFiles(componentPath, ".vue")),
+    );
+
+    srcVueFiles = srcVueFiles.flat();
+  }
+
+  const vuelessFiles = [...srcVueFiles, ...vuelessVueFiles, ...vuelessConfigFiles];
+
+  const storybookColors = {
+    colors: [...BRAND_COLORS, BRAND_COLOR, GRAY_COLOR],
+    isComponentExists: true,
+  };
+  const safelist = [];
+
+  const componentNames = Object.keys(COMPONENTS);
+
+  for await (const component of componentNames) {
+    const defaultConfigPath = vuelessConfigFiles.find((file) =>
+      isDefaultComponentConfig(file, component),
+    );
+    const defaultConfig = await readFile(path.join(process.cwd(), defaultConfigPath), {
+      encoding: "utf-8",
+    });
+    const nestedComponents = (defaultConfig.match(/\{U\w+\}/g) || []).map(
+      (nestedComponentPattern) => nestedComponentPattern.replaceAll(/[{}]/g, ""),
+    );
+
+    const { colors, isComponentExists } = isStorybookMode
+      ? storybookColors
+      : await findComponentColors(vuelessFiles, component);
+
+    if (isComponentExists && colors.length) {
+      const componentSafelist = await getComponentSafelist(component, {
+        colors,
+        vuelessConfigFiles,
+        isVuelessEnv,
+      });
+
+      safelist.push(...componentSafelist);
+    }
+
+    if (isComponentExists && colors.length && nestedComponents.length) {
+      for await (const nestedComponent of nestedComponents) {
+        const nestedComponentSafelist = await getComponentSafelist(nestedComponent, {
+          colors,
+          vuelessConfigFiles,
+          isVuelessEnv,
+        });
+
+        safelist.push(...nestedComponentSafelist);
+      }
+    }
+  }
+
+  const mergedSafelist = mergeSafelistPatterns(safelist);
+
+  if (debug) {
+    // eslint-disable-next-line no-console
+    console.log("VUELESS_SAFELIST", mergedSafelist);
+  }
+
+  process.env.VUELESS_SAFELIST = JSON.stringify(mergedSafelist);
+  process.env.VUELESS_STRATEGY = vuelessConfig.strategy || "";
+}
+
+function getSafelistClasses(config) {
+  const safelistItems = [];
+
+  for (const key in config) {
+    if (Object.prototype.hasOwnProperty.call(config, key)) {
+      const classes = config[key];
+
+      if (typeof classes === "object" && Array.isArray(classes)) {
+        safelistItems.push(...classes.map(getSafelistClasses));
+      }
+
+      if (typeof classes === "object" && !Array.isArray(classes)) {
+        safelistItems.push(...getSafelistClasses(classes));
+      }
+
+      if (typeof classes === "string") {
+        safelistItems.push(
+          ...classes.split(" ").filter((classItem) => classItem.includes(DYNAMIC_COLOR_PATTERN)),
+        );
+      }
+    }
+  }
+
+  return safelistItems.flat().map((item) => item.replaceAll("\\n", "").trim());
+}
+
+function getSafelistItem(safelistClass, colorString) {
+  const classes = safelistClass.split(TAILWIND_CLASS_DELIMITER);
+  const mainClass = classes.at(-1);
+  const variantClasses = classes.slice(0, classes.length - 1);
+
+  const pattern = mainClass.replace(DYNAMIC_COLOR_PATTERN, colorString);
+  const variants = variantClasses
+    .map((variantItem) => (variantItem ? variantItem : TAILWIND_CLASS_DELIMITER))
+    .join("");
+
+  return classes.length === 1 ? { pattern } : { pattern, variants: [variants].flat() };
+}
+
+async function getComponentSafelist(componentName, { colors, vuelessConfigFiles }) {
+  let defaultConfigPath = vuelessConfigFiles.find((file) =>
+    isDefaultComponentConfig(file, componentName),
+  );
+  const customConfig = vuelessConfig.component?.[componentName] || {};
+  let defaultConfig = {};
+
+  if (defaultConfigPath) {
+    const configPath = path.join(process.cwd(), defaultConfigPath);
+    const defaultConfigContent = await readFile(configPath, { encoding: "utf-8" });
+
+    defaultConfig = getDefaultConfigJson(defaultConfigContent);
+  }
+
+  const mergedConfig = omit(mergeConfigs({ defaultConfig, globalConfig: customConfig }), [
+    "defaults",
+  ]);
+
+  const colorString = `(${colors.join("|")})`;
+
+  return getSafelistClasses(mergedConfig).map((safelistClass) =>
+    getSafelistItem(safelistClass, colorString),
+  );
+}
+
+async function findComponentColors(files, componentName) {
+  const objectColorRegExp = new RegExp(/\bcolor\s*:\s*["']([^"'\s]+)["']/, "g");
+  const singleColorRegExp = new RegExp(/\bcolor\s*=\s*["']([^"'\s]+)["']/);
+  const ternaryColorRegExp = new RegExp(/\bcolor="[^']*'([^']*)'\s*:\s*'([^']*)'/);
+
+  const brandColor = getComponentBrandColor(componentName);
+  const colors = new Set();
+
+  if (brandColor && brandColor !== "grayscale") {
+    colors.add(brandColor);
+  }
+
+  getSafelistColorsFromConfig().forEach((color) => colors.add(color));
+
+  let isComponentExists = false;
+
+  for await (const file of files) {
+    if (!existsSync(file)) continue;
+
+    const fileContent = await readFile(file, "utf-8");
+    const isDefaultConfig = isDefaultComponentConfig(file, componentName);
+    const componentRegExp = new RegExp(`<${componentName}[^>]+>`, "g");
+    const matchedComponent = fileContent.match(componentRegExp);
+
+    if (!isComponentExists) {
+      isComponentExists = Boolean(matchedComponent);
+    }
+
+    if (isDefaultConfig) {
+      fileContent.match(objectColorRegExp)?.forEach((colorMatch) => {
+        const [, color] = objectColorRegExp.exec(colorMatch) || [];
+
+        colors.add(color);
+      });
+    }
+
+    /* Collect color from U[Component] */
+    matchedComponent?.forEach((match) => {
+      const [, singleColor] = singleColorRegExp.exec(match) || [];
+      const [, ternaryColorOne, ternaryColorTwo] = ternaryColorRegExp.exec(match) || [];
+
+      // Match color in script variables.
+      const objectColors = objectColorRegExp.exec(fileContent) || [];
+
+      [singleColor, ternaryColorOne, ternaryColorTwo, ...objectColors].forEach((color) => {
+        if (color) colors.add(color);
+      });
+    });
+  }
+
+  return {
+    colors: Array.from(colors).filter(
+      (color) => color && [...BRAND_COLORS, BRAND_COLOR, GRAY_COLOR].includes(color),
+    ),
+    isComponentExists,
+  };
+}
+
+function getComponentBrandColor(componentName) {
+  const globalBrandColor = vuelessConfig.brand || "";
+  const globalComponentConfig = vuelessConfig.component?.[componentName] || {};
+
+  return vuelessConfig.component ? globalComponentConfig.defaults?.color : globalBrandColor;
+}
+
+function isDefaultComponentConfig(filePath, componentName) {
+  const componentDirName = filePath.split(path.sep).at(-2);
+
+  return (
+    componentDirName === COMPONENTS[componentName] &&
+    (filePath.endsWith("/config.js") || filePath.endsWith("/config.ts"))
+  );
+}
+
+function getSafelistColorsFromConfig(componentName) {
+  const globalSafelistColors = vuelessConfig.safelistColors || [];
+  const componentSafelistColors =
+    (vuelessConfig.component && vuelessConfig.component[componentName]?.safelistColors) || [];
+
+  return [...globalSafelistColors, ...componentSafelistColors];
+}
+
+/**
+ Combine collected tailwind patterns from different components into groups.
+ */
+function mergeSafelistPatterns(safelist) {
+  const safelistData = getSafelistData(safelist);
+  const mergedColorsSafelist = mergeSafelistColors(safelistData);
+
+  return mergeSafelistVariants(mergedColorsSafelist).map((item) => {
+    const pattern = `${item.property}(${item.colorPattern})-(${Array.from(item.shades).join("|")})`;
+    const safelistItem = { pattern };
+
+    if (item.variants) {
+      safelistItem.variants = item.variants;
+    }
+
+    return safelistItem;
+  });
+}
+
+function getSafelistData(safelist) {
+  return safelist.map((safelistItem) => {
+    const matchGroupStart = 1;
+    const matchGroupEnd = 4;
+    const safelistItemRegExp = new RegExp(/^(.*-)\((.*)\)-(\d+(?:\/\d+)?)$/);
+
+    const [property, colorPattern, colorShade] = safelistItem.pattern
+      .match(safelistItemRegExp)
+      .slice(matchGroupStart, matchGroupEnd);
+
+    return {
+      property,
+      colorPattern,
+      variants: safelistItem.variants,
+      shades: new Set([colorShade]),
+    };
+  });
+}
+
+function mergeSafelistColors(safelistData) {
+  const mergedSafelist = [];
+
+  safelistData.forEach((currentSafelistItem, currentIndex) => {
+    const duplicateIndex = mergedSafelist.findIndex((safelistItem, index) => {
+      const isSameItem = index === currentIndex;
+      const isSameProperty = safelistItem.property === currentSafelistItem.property;
+      const isSameVariants = isEqual(safelistItem.variants, currentSafelistItem.variants);
+
+      const currentItemColors = currentSafelistItem.colorPattern.split("|");
+      const safelistColors = safelistItem.colorPattern.split("|");
+
+      const isIncludesColors =
+        safelistItem.colorPattern === currentSafelistItem.colorPattern ||
+        currentItemColors.some((color) => safelistColors.includes(color)) ||
+        safelistColors.some((color) => currentItemColors.includes(color));
+
+      return !isSameItem && isSameProperty && isSameVariants && isIncludesColors;
+    });
+
+    if (duplicateIndex === -1) {
+      mergedSafelist.push(currentSafelistItem);
+    } else {
+      const mergedColors = [
+        ...new Set([
+          ...currentSafelistItem.colorPattern.split("|"),
+          ...mergedSafelist[duplicateIndex].colorPattern.split("|"),
+        ]),
+      ];
+
+      mergedSafelist[duplicateIndex].colorPattern = mergedColors.join("|");
+      mergedSafelist[duplicateIndex].shades.add(
+        ...currentSafelistItem.shades,
+        ...mergedSafelist[duplicateIndex].shades,
+      );
+    }
+  });
+
+  return mergedSafelist;
+}
+
+function mergeSafelistVariants(safelistData) {
+  safelistData.forEach((currentItem, currentIndex) => {
+    if (!currentItem.variants) return;
+
+    const duplicateIndex = safelistData.findIndex((item, index) => {
+      const isSameItem = index === currentIndex;
+      const isSameProperty = item.property === currentItem.property;
+      const isSameColors = item.colorPattern === currentItem.colorPattern;
+      const isSameShades = isEqual(item.shades, currentItem.shades);
+
+      return !isSameItem && isSameProperty && isSameColors && isSameShades;
+    });
+
+    if (~duplicateIndex) {
+      const currentItemVariants = currentItem.variants;
+      const foundItemVariants = safelistData[duplicateIndex].variants || [];
+
+      safelistData[duplicateIndex].variants = [
+        ...new Set([...currentItemVariants, ...foundItemVariants]),
+      ];
+      safelistData.splice(currentIndex, 1);
+    }
+  });
+
+  return safelistData;
+}

package/utils/node/vuelessConfig.js

@@ -0,0 +1,42 @@
+import fs from "node:fs";
+import path from "node:path";
+import esbuild from "esbuild";
+
+import { CACHE_PATH, VUELESS_CONFIG_FILE_NAME } from "../../constants.js";
+
+/**
+ * Load Vueless config from the project root.
+ * IIFE is used to prevent top level await issue.
+ */
+export let vuelessConfig = {};
+
+(async () => {
+  const configPathJs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.js`);
+  const configPathTs = path.join(process.cwd(), `${VUELESS_CONFIG_FILE_NAME}.ts`);
+  const configOutPath = path.join(process.cwd(), `${CACHE_PATH}/${VUELESS_CONFIG_FILE_NAME}.mjs`);
+
+  if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
+    vuelessConfig = {};
+
+    return;
+  }
+
+  fs.existsSync(configPathJs) && (await buildConfig(configPathJs, configOutPath));
+  fs.existsSync(configPathTs) && (await buildConfig(configPathTs, configOutPath));
+
+  if (fs.existsSync(configOutPath)) {
+    vuelessConfig = (await import(configOutPath)).default;
+  }
+})();
+
+async function buildConfig(entryPath, configOutFile) {
+  await esbuild.build({
+    entryPoints: [entryPath],
+    outfile: configOutFile,
+    bundle: true,
+    platform: "node",
+    format: "esm",
+    target: "ESNext",
+    loader: { ".ts": "ts" },
+  });
+}

package/utils/node/vuelessResolver.js

@@ -0,0 +1,28 @@
+/**
+ Custom vueless UI library resolver for "unplugin-vue-components" Vite plugin.
+
+ When new components are added, please add related to them data into an `COMPONENTS` object with a format:
+ - key = component name;
+ - value = component folder;
+
+ Docs: https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#importing-from-ui-libraries
+ */
+
+import { COMPONENTS } from "../../constants.js";
+
+export function componentResolver(componentName) {
+  const folder = COMPONENTS[componentName];
+
+  if (folder) {
+    return { from: `vueless/${folder}/${componentName}.vue` };
+  }
+}
+
+export const directiveResolver = {
+  type: "directive",
+  resolve(name) {
+    return {
+      from: `vueless/directives/v${name}.js`,
+    };
+  },
+};

package/utils/{utilPlatform.js → platform.ts}

@@ -1,4 +1,11 @@
-import { isCSR } from "./utilHelper.js";
+import { isCSR } from "./helper.ts";
+
+interface ModernNavigator extends Navigator {
+  standalone: string;
+  userAgentData: {
+    platform: string;
+  };
+}
 
 const isWindows = isCSR && checkIsWindows();
 const isMac = isCSR && checkIsMac();
@@ -16,7 +23,7 @@ function checkIsMac() {
 }
 
 function checkIsPWA() {
-  return !!navigator.standalone;
+  return !!(navigator as ModernNavigator).standalone;
 }
 
 function checkIsIOS() {
@@ -40,7 +47,7 @@ function checkIsAndroid() {
 }
 
 function getPlatform() {
-  return navigator.userAgentData?.platform || navigator.platform || "unknown";
+  return (navigator as ModernNavigator).userAgentData?.platform || navigator.platform || "unknown";
 }
 
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows };

package/utils/{utilStorybook.js → storybook.ts}

@@ -1,29 +1,96 @@
+import { COMPONENTS } from "../constants.js";
+
+import type {
+  WebTypes,
+  Tag,
+  Attribute,
+  EventProperty,
+  SlotBinding,
+  ExposeProperty,
+} from "../types.ts";
+
+interface Types {
+  [key: string]: ArgType | undefined;
+}
+
+export interface ArgType {
+  control?: "text" | "number" | "boolean" | "array" | "select" | false;
+  options?: string[];
+  table?: TableConfig;
+  name?: string;
+  description?: string;
+  type?: string | null;
+  action?: string;
+}
+
+interface TableConfig {
+  disable?: boolean;
+  defaultValue?: { summary: unknown };
+  category?: "slots" | "expose" | "Storybook Events";
+  type?: Record<string, string | string[]>;
+}
+
+type ComponentNames = keyof typeof COMPONENTS;
+
 /* Load Web-Types from the project root. */
-const [webTypes] = Object.values(
-  import.meta.glob("/web-types.json", { eager: true, import: "default" }),
+const [webTypes]: WebTypes[] = Object.values(
+  import.meta.glob("/node_modules/.cache/vueless/web-types.json", {
+    eager: true,
+    import: "default",
+  }),
 );
 
-const getComponentData = (componentName) => {
-  return webTypes.contributions.html.tags.find((item) => item.name === componentName);
+const getComponentData = (componentName: ComponentNames) => {
+  const component = webTypes?.contributions?.html?.tags?.find(
+    (item: Tag) => item.name === componentName,
+  );
+
+  if (!component) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "The component docs data is missing. Probably the `web-types.json` file is missing or have incorrect format.",
+    );
+  }
+
+  return component;
 };
 
-export function getSlotNames(componentName) {
-  return getComponentData(componentName)?.slots?.map((item) => item.name);
+export function getSlotNames(componentName: string | undefined) {
+  if (!componentName) return;
+
+  return getComponentData(componentName as ComponentNames)?.slots?.map((item) => item.name);
+}
+
+/**
+ * Create story param config to show component description with a link on GitHub.
+ */
+export function getDocsDescription(componentName: string | undefined) {
+  if (!componentName) return;
+
+  return {
+    docs: {
+      description: {
+        component: `The \`${componentName}\` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]})`,
+      },
+    },
+  };
 }
 
-export function getArgTypes(componentName) {
-  const component = getComponentData(componentName);
+export function getArgTypes(componentName: string | undefined) {
+  if (!componentName) return;
+
+  const component = getComponentData(componentName as ComponentNames);
 
   if (!component) return;
 
-  const types = {
+  const types: Partial<Types> = {
     // Hide default template arg in docs.
     defaultTemplate: { table: { disable: true } },
     // Hide slot template arg in docs.
     slotTemplate: { table: { disable: true } },
   };
 
-  component.attributes?.forEach((attribute) => {
+  component.attributes?.forEach((attribute: Attribute) => {
     const type = attribute.value.type;
 
     if (type === "string" || type.includes("string")) {
@@ -63,24 +130,23 @@ export function getArgTypes(componentName) {
     }
 
     if (type.includes("|")) {
-      const options = attribute.value.type.replace(/['|]/g, "").split(/\s+/);
-
-      if (options.length > 1) {
-        types[attribute.name] = {
-          options,
-          control: "select",
-          table: {
-            defaultValue: { summary: attribute.default || "" },
-          },
-        };
-      } else {
-        types[attribute.name] = {
-          control: type.split("|")[0],
-          table: {
-            defaultValue: { summary: attribute.default || "" },
-          },
-        };
-      }
+      types[attribute.name] = {
+        control: type.split("|")[0] as ArgType["control"],
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+        },
+      };
+    }
+
+    if (attribute.enum) {
+      types[attribute.name] = {
+        options: attribute.enum,
+        control: "select",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+          type: { summary: attribute.enum.join(" | ") },
+        },
+      };
     }
 
     if (attribute.description?.includes("@ignore")) {
@@ -93,9 +159,9 @@ export function getArgTypes(componentName) {
   });
 
   component.slots?.forEach((slot) => {
-    const bindings = [];
+    const bindings: string[] = [];
 
-    slot.bindings?.forEach((binding) => {
+    slot.bindings?.forEach((binding: SlotBinding) => {
       if (binding.name === "name") return;
 
       const description = binding.description ? ` (${binding.description})` : "";
@@ -122,9 +188,9 @@ export function getArgTypes(componentName) {
   });
 
   component.exposes?.forEach((expose) => {
-    const properties = [];
+    const properties: string[] = [];
 
-    expose.properties?.forEach((property) => {
+    expose.properties?.forEach((property: ExposeProperty) => {
       const description = property.description ? ` (${property.description})` : "";
 
       properties.push(`${property.type}${description}`);
@@ -149,9 +215,9 @@ export function getArgTypes(componentName) {
   });
 
   component.events?.forEach((event) => {
-    const properties = [];
+    const properties: string[] = [];
 
-    event.properties?.forEach((property) => {
+    event.properties?.forEach((property: EventProperty) => {
       const description = property.description ? ` (${property.description})` : "";
 
       properties.push(`${property.name}: ${property.type}${description}`);
@@ -176,11 +242,11 @@ export function getArgTypes(componentName) {
   return types;
 }
 
-export function getSource(defaultConfig) {
+export function getSource(defaultConfig: string) {
   return defaultConfig.replace("export default /*tw*/ ", "").replace(";", "");
 }
 
-export function getSlotsFragment(defaultTemplate) {
+export function getSlotsFragment(defaultTemplate: string) {
   return `
   <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
     <template v-if="slot === 'default' && !args['defaultSlot']">${defaultTemplate || ""}</template>

package/utils/tailwindConfig.ts

@@ -0,0 +1,33 @@
+import { isSSR, isCSR } from "./helper.ts";
+
+import type { Config } from "tailwindcss";
+
+/**
+ * Load Tailwind config from the project root.
+ * Both for server and client side renderings.
+ * IIFE for SSR is used to prevent top level await issue.
+ */
+export let tailwindConfig: Config;
+
+if (isSSR) {
+  /* Load Tailwind config from the project root in IIFE (no top-level await). */
+  (async () => {
+    try {
+      const filePath = `${process.cwd()}/tailwind.config`;
+
+      tailwindConfig = (await import(/* @vite-ignore */ `${filePath}.js`)).default;
+
+      if (!tailwindConfig) {
+        tailwindConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
+      }
+    } catch {
+      tailwindConfig = {} as Config;
+    }
+  })();
+}
+
+if (isCSR) {
+  tailwindConfig = Object.values(
+    import.meta.glob("/tailwind.config.{js,ts}", { eager: true, import: "default" }),
+  )[0] as Config;
+}