vueless 0.0.478-beta.17 → 0.0.478-beta.19

package/constants.js

@@ -190,3 +190,6 @@ export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
 export const TAILWIND_CLASS_DELIMITER = ":";
+export const CACHE_PATH = "node_modules/.cache/vueless";
+export const WEB_TYPES_FILE_NAME_WITH_EXT = "web-types.json";
+export const VUELESS_CONFIG_FILE_NAME = "vueless.config";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.478-beta.17",
+  "version": "0.0.478-beta.19",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -32,7 +32,7 @@
     "build": "npx @vueless/web-types && node .scripts/icons && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "node .scripts/icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && node .scripts/package",
+    "release:prepare": "npx @vueless/web-types && node .scripts/icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md node_modules/.cache/vueless/web-types.json dist/ && node .scripts/package",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
@@ -66,7 +66,7 @@
     "@vue/eslint-config-typescript": "^14.1.1",
     "@vue/tsconfig": "^0.5.1",
     "@vueless/storybook": "^0.0.37",
-    "@vueless/web-types": "^0.0.18",
+    "@vueless/web-types": "^0.0.20",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^9.12.0",

package/ui.image-icon/UIcon.vue

@@ -15,7 +15,7 @@ import { getDefault } from "../utils/ui.ts";
 import { isSSR } from "../utils/helper.ts";
 
 import { UIcon } from "./constants.js";
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.js";
 
 import { vTooltip } from "../directives";

package/ui.image-icon/storybook/Docs.mdx

@@ -2,7 +2,7 @@ import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source
 import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.image-icon/useAttrs.js

@@ -1,6 +1,6 @@
 import useUI from "../composables/useUI.ts";
 
-import defaultConfig from "./config.js";
+import defaultConfig from "./config.ts";
 
 export default function useAttrs(props) {
   const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);

package/utils/node/helper.js

@@ -1,13 +1,16 @@
 import path from "path";
 import fs, { statSync } from "fs";
 import { readdir } from "node:fs/promises";
+import { CACHE_PATH, WEB_TYPES_FILE_NAME_WITH_EXT } from "../../constants.js";
 
-export function addWebTypesToPackageJson(env) {
-  if (env === "vueless") return;
+export function addWebTypesToPackageJson({ env, debug, noWebTypesInPackageJson } = {}) {
+  if (env === "vueless" || noWebTypesInPackageJson) return;
 
-  const webTypesPath = fs.existsSync(process.cwd() + "/web-types.json")
-    ? "./web-types.json"
-    : "./node_modules/vueless/web-types.json";
+  const projectWebTypesPath = path.join(process.cwd(), CACHE_PATH, WEB_TYPES_FILE_NAME_WITH_EXT);
+
+  const webTypesPath = fs.existsSync(projectWebTypesPath)
+    ? `./${CACHE_PATH}/${WEB_TYPES_FILE_NAME_WITH_EXT}`
+    : `./node_modules/vueless/${WEB_TYPES_FILE_NAME_WITH_EXT}`;
 
   try {
     const packageJsonPath = path.resolve(process.cwd(), "package.json");
@@ -17,6 +20,11 @@ export function addWebTypesToPackageJson(env) {
     packageJson["web-types"] = webTypesPath;
 
     fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n", "utf8");
+
+    if (debug) {
+      // eslint-disable-next-line no-console
+      console.error("Web-types added to project package.json", webTypesPath);
+    }
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error("Error:", error);
@@ -84,3 +92,16 @@ export function getDefaultConfigJson(fileContents) {
   // indirect eval
   return (0, eval)("(" + objectString + ")"); // Converting into JS object
 }
+
+export function merge(source, target) {
+  for (const [key, val] of Object.entries(source)) {
+    if (val !== null && typeof val === `object`) {
+      target[key] ??= new val.__proto__.constructor();
+      merge(val, target[key]);
+    } else {
+      target[key] = val;
+    }
+  }
+
+  return target; // we're replacing in-situ, so this is more for chaining than anything else
+}

package/utils/node/loaderIcon.js

@@ -14,21 +14,23 @@ import { createRequire } from "module";
 import { rm, cp } from "node:fs/promises";
 
 import { vuelessConfig } from "./vuelessConfig.js";
-import { getDirFiles, getDefaultConfigJson } from "./helper.js";
-
-const DEFAULT_ICONS_DIR = "./src/assets/icons";
-const VUELESS_ICONS_DIR = "./src/assets/icons/cache";
-const PROJECT_ICONS_DIR = path.join(process.cwd(), "/node_modules/vueless/assets/icons/cache");
-const DEFAULT_CONFIG_PATH = "ui.image-icon/config.js";
-const STORYBOOK_STORY_EXTENSION = "/stories.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 iconCacheDir = PROJECT_ICONS_DIR;
+let cachedIconsDir = CACHED_ICONS_DIR;
 
 // perform icons copy magick... ✨
 export async function copyIcons({ mode = "", env, debug, targetFiles = [], isNuxt } = {}) {
@@ -38,49 +40,50 @@ export async function copyIcons({ mode = "", env, debug, targetFiles = [], isNux
   isStorybookMode = mode === "storybook";
   isVuelessIconsMode = mode === "vuelessIcons";
 
-  if (isVuelessIconsMode && isVuelessEnv) iconCacheDir = DEFAULT_ICONS_DIR;
-  if (isStorybookMode && isVuelessEnv) iconCacheDir = VUELESS_ICONS_DIR;
+  if (isVuelessIconsMode && isVuelessEnv) cachedIconsDir = DEFAULT_ICONS_DIR;
+  if (isStorybookMode && isVuelessEnv) cachedIconsDir = CACHED_ICONS_DIR;
 
   if (isStorybookMode) {
-    const storyBookFiles = await getDirFiles("src", STORYBOOK_STORY_EXTENSION);
+    const storybookStoriesJs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[0]);
+    const storybookStoriesTs = await getDirFiles("src", STORYBOOK_STORY_EXTENSIONS[1]);
 
-    findAndCopyIcons(storyBookFiles.flat());
+    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_EXTENSION] }),
+      getDirFiles(jsFilePath, ".js", { exclude: [STORYBOOK_STORY_EXTENSIONS[0]] }),
     );
 
     const tsFiles = targetFiles.map((tsFilePath) =>
-      getDirFiles(tsFilePath, ".ts", { exclude: [STORYBOOK_STORY_EXTENSION, ".d.ts"] }),
+      getDirFiles(tsFilePath, ".ts", { exclude: [STORYBOOK_STORY_EXTENSIONS[1], ".d.ts"] }),
     );
 
     const iconFiles = await Promise.all([...vueFiles, ...jsFiles, ...tsFiles]);
 
-    findAndCopyIcons([...iconFiles.flat(), "vueless.config.js", "vueless.config.ts"]);
+    findAndCopyIcons([
+      ...iconFiles.flat(),
+      `${VUELESS_CONFIG_FILE_NAME}.js`,
+      `${VUELESS_CONFIG_FILE_NAME}.ts`,
+    ]);
   }
 
   if (isNuxt) {
-    await cp(
-      path.join(process.cwd(), "node_modules/vueless/assets"),
-      path.join(process.cwd(), "assets/.vueless"),
-      {
-        recursive: true,
-      },
-    );
+    await cp(CACHED_ICONS_DIR, NUXT_ASSETS_DIR, {
+      recursive: true,
+    });
   }
 }
 
 export async function removeIcons({ debug, isNuxt }) {
-  if (!fs.existsSync(iconCacheDir)) return;
+  if (!fs.existsSync(cachedIconsDir)) return;
 
-  await rm(iconCacheDir, { recursive: true, force: true });
+  await rm(cachedIconsDir, { recursive: true, force: true });
 
   if (isNuxt) {
-    await rm(path.join(process.cwd(), "assets/.vueless"), { recursive: true, force: true });
+    await rm(NUXT_ASSETS_DIR, { recursive: true, force: true });
   }
 
   if (debug) {
@@ -174,19 +177,19 @@ function findAndCopyIcons(files) {
       vueless: {
         // @material-symbols icons which used across the components.
         source: `${process.cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
-        destination: `${iconCacheDir}/${name}.svg`
+        destination: `${cachedIconsDir}/${name}.svg`
       },
       "@material-symbols": {
         source: `${process.cwd()}/node_modules/${library}/svg-${weight}/${style}/${name}.svg`,
-        destination: `${iconCacheDir}/${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: `${iconCacheDir}/${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: `${iconCacheDir}/24/${style}/${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 */
@@ -216,7 +219,7 @@ function getSafelistIcons() {
 }
 
 function getMergedConfig() {
-  const defaultConfigPath = (isVuelessEnv ? "src/" : "node_modules/vueless/") + DEFAULT_CONFIG_PATH;
+  const defaultConfigPath = (isVuelessEnv ? "src/" : "node_modules/vueless/") + ICON_CONFIG_PATH;
 
   if (fs.existsSync(defaultConfigPath)) {
     const defaultConfigFile = fs.readFileSync(defaultConfigPath).toString();
@@ -227,16 +230,3 @@ function getMergedConfig() {
     return merge(globalConfig?.defaults || {}, defaultConfig.defaults);
   }
 }
-
-function merge(source, target) {
-  for (const [key, val] of Object.entries(source)) {
-    if (val !== null && typeof val === `object`) {
-      target[key] ??= new val.__proto__.constructor();
-      merge(val, target[key]);
-    } else {
-      target[key] = val;
-    }
-  }
-
-  return target; // we're replacing in-situ, so this is more for chaining than anything else
-}

package/utils/node/mergeConfigs.js

@@ -181,7 +181,7 @@ export function createMergeConfigsFunction(cx) {
         : defaultConfigItem;
     });
 
-    return [...config, ...globalConfigUniqueItems, ...propsConfigUniqueItems];
+    return [...(config || []), ...globalConfigUniqueItems, ...propsConfigUniqueItems];
   }
 
   return mergeConfigs;

package/utils/node/vuelessConfig.js

@@ -1,7 +1,9 @@
-import fs from "fs";
-import path from "path";
+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.
@@ -9,9 +11,9 @@ import esbuild from "esbuild";
 export let vuelessConfig = {};
 
 (async () => {
-  const configPathJs = path.join(process.cwd(), "/vueless.config.js");
-  const configPathTs = path.join(process.cwd(), "/vueless.config.ts");
-  const configOutPath = path.join(process.cwd(), "node_modules/.cache/vueless/vueless.config.mjs");
+  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 = {};

package/utils/storybook.ts

@@ -103,7 +103,10 @@ interface TableConfig {
 
 /* Load Web-Types from the project root. */
 const [webTypes]: WebTypes[] = Object.values(
-  import.meta.glob("/web-types.json", { eager: true, import: "default" }),
+  import.meta.glob("/node_modules/.cache/vueless/web-types.json", {
+    eager: true,
+    import: "default",
+  }),
 );
 
 const getComponentData = (componentName: string | undefined) => {

package/vite.d.ts

@@ -0,0 +1,10 @@
+export function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
+  api: import("unplugin-vue-components/types.js").PublicPluginAPI;
+};
+
+export function Vueless(options?: {
+  env?: string;
+  mode?: string;
+  debug?: boolean;
+  include?: string[];
+}): never;

package/vite.js

@@ -25,7 +25,7 @@ export const VuelessUnpluginComponents = (options) =>
   – Loads SVG images as a Vue components.
  */
 export const Vueless = function (options = {}) {
-  const { mode, debug, env, include } = options;
+  const { mode, debug, env, include, noWebTypesInPackageJson } = options;
 
   const isNuxt = mode === "nuxt-module";
   const srcDir = isNuxt ? process.cwd() : getVueSourceFile();
@@ -74,7 +74,7 @@ export const Vueless = function (options = {}) {
         await removeIcons({ debug, isNuxt });
 
         /* add web-types config to the package.json */
-        addWebTypesToPackageJson(env, debug);
+        addWebTypesToPackageJson({ env, debug, noWebTypesInPackageJson });
       }
     },