vueless 0.0.478-beta.16 → 0.0.478-beta.17

package/composables/useLocale.ts

@@ -6,7 +6,7 @@ import type { InjectionKey } from "vue";
 
 export const LocaleSymbol: InjectionKey<LocaleInstance> = Symbol.for("vueless:locale");
 
-export function createLocale(options: LocaleOptions) {
+export function createLocale(options?: LocaleOptions) {
   const i18n =
     options?.adapter && options?.adapter?.name ? options?.adapter : createVuelessAdapter(options);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.478-beta.16",
+  "version": "0.0.478-beta.17",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -27,12 +27,12 @@
     "access": "public"
   },
   "scripts": {
-    "dev:docs": "npx @vueless/web-types && node .prepare/icons && storybook dev -p 6006 --docs --no-open",
-    "dev": "npx @vueless/web-types && node .prepare/icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
-    "build": "npx @vueless/web-types && node .prepare/icons && storybook build --docs",
+    "dev:docs": "npx @vueless/web-types && node .scripts/icons && storybook dev -p 6006 --docs --no-open",
+    "dev": "npx @vueless/web-types && node .scripts/icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "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 .prepare/icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && node .prepare/package",
+    "release:prepare": "node .scripts/icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md 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",

package/types.ts

@@ -7,6 +7,7 @@ import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 
 import type { ComputedRef, MaybeRef } from "vue";
 import type { Props } from "tippy.js";
+import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
 export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
 
@@ -181,7 +182,7 @@ export interface KeysToExtend {
 }
 
 export interface CreateVuelessOptions {
-  i18n?: Record<string, string | object>;
+  i18n?: LocaleOptions;
 }
 
 export interface TailwindSafelist {

package/utils/node/loaderIcon.js

@@ -13,25 +13,9 @@ import path from "node:path";
 import { createRequire } from "module";
 import { rm, cp } from "node:fs/promises";
 
+import { vuelessConfig } from "./vuelessConfig.js";
 import { getDirFiles, getDefaultConfigJson } from "./helper.js";
 
-let vuelessConfig = {};
-
-/* Load Vueless config from the project root in IIFE (no top-level await). */
-(async () => {
-  try {
-    const filePath = `${process.cwd()}/vueless.config`;
-
-    vuelessConfig = (await import(`${filePath}.js`)).default;
-
-    if (!vuelessConfig) {
-      vuelessConfig = (await import(`${filePath}.ts`)).default;
-    }
-  } catch {
-    vuelessConfig = {};
-  }
-})();
-
 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");

package/utils/node/tailwindSafelist.js

@@ -6,6 +6,7 @@ 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 {
@@ -18,23 +19,6 @@ import {
   NESTED_COMPONENT_REG_EXP,
 } from "../../constants.js";
 
-let vuelessConfig = {};
-
-/* Load Vueless config from the project root in IIFE (no top-level await). */
-(async () => {
-  try {
-    const filePath = `${process.cwd()}/vueless.config`;
-
-    vuelessConfig = (await import(`${filePath}.js`)).default;
-
-    if (!vuelessConfig) {
-      vuelessConfig = (await import(`${filePath}.ts`)).default;
-    }
-  } catch {
-    vuelessConfig = {};
-  }
-})();
-
 const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
 
 export const { cx } = defineConfig({
@@ -164,10 +148,7 @@ function getSafelistItem(safelistClass, colorString) {
   return classes.length === 1 ? { pattern } : { pattern, variants: [variants].flat() };
 }
 
-async function getComponentSafelist(
-  componentName,
-  { colors, vuelessConfigFiles, isVuelessEnv = false },
-) {
+async function getComponentSafelist(componentName, { colors, vuelessConfigFiles }) {
   let defaultConfigPath = vuelessConfigFiles.find((file) =>
     isDefaultComponentConfig(file, componentName),
   );
@@ -175,9 +156,6 @@ async function getComponentSafelist(
   let defaultConfig = {};
 
   if (defaultConfigPath) {
-    // disable file caching on vueless env (for the dev purpose)
-    defaultConfigPath = isVuelessEnv ? `${defaultConfigPath}?${Date.now()}` : defaultConfigPath;
-
     const configPath = path.join(process.cwd(), defaultConfigPath);
     const defaultConfigContent = await readFile(configPath, { encoding: "utf-8" });
 

package/utils/node/vuelessConfig.js

@@ -0,0 +1,38 @@
+import fs from "fs";
+import path from "path";
+import esbuild from "esbuild";
+
+/**
+ * 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.js");
+  const configPathTs = path.join(process.cwd(), "/vueless.config.ts");
+  const configOutPath = path.join(process.cwd(), "node_modules/.cache/vueless/vueless.config.mjs");
+
+  if (!fs.existsSync(configPathJs) && !fs.existsSync(configPathTs)) {
+    vuelessConfig = {};
+
+    return;
+  }
+
+  fs.existsSync(configPathJs) && (await buildConfig(configPathJs, configOutPath));
+  fs.existsSync(configPathTs) && (await buildConfig(configPathTs, 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/{tailwind.ts → tailwindConfig.ts}

@@ -20,7 +20,9 @@ if (isSSR) {
       if (!tailwindConfig) {
         tailwindConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
       }
-    } catch {}
+    } catch {
+      tailwindConfig = {} as Config;
+    }
   })();
 }
 

package/utils/theme.ts

@@ -1,7 +1,7 @@
 import { merge } from "lodash-es";
 import tailwindColors from "tailwindcss/colors.js";
 
-import { tailwindConfig } from "./tailwind.ts";
+import { tailwindConfig } from "./tailwindConfig.ts";
 import { vuelessConfig } from "./ui.ts";
 import { isSSR, isCSR } from "./helper.ts";
 import {
@@ -70,7 +70,7 @@ export function setTheme(config: InternalThemeConfig = {}) {
     vuelessConfig.ringOffsetColorLight ??
     DEFAULT_RING_OFFSET_COLOR_LIGHT;
 
-  const isBrandColor = BRAND_COLORS.some((color) => color === brand);
+  const isBrandColor = [...BRAND_COLORS, GRAYSCALE_COLOR].some((color) => color === brand);
   const isGrayColor = GRAY_COLORS.some((color) => color === gray);
 
   if (!isBrandColor) {