vueless 0.0.338 → 0.0.339

package/directives/vTooltip.js

@@ -1,34 +1,37 @@
 import tippy from "tippy.js";
 import { merge } from "lodash-es";
 
-// Fix for SSR
-import "tippy.js/dist/tippy.css";
-import "tippy.js/themes/light.css";
-import "tippy.js/animations/shift-away.css";
-
 import { vuelessConfig } from "../utils/utilUI.js";
 import { isCSR, isSSR } from "../utils/utilHelper.js";
 
-const globalSettings = vuelessConfig?.directive?.tooltip || {};
-const defaultSettings = {
-  arrow: true,
-  theme: "light",
-  animation: "shift-away",
-};
+let settings = {};
 
-const mergedSettings = merge(defaultSettings, globalSettings);
+if (isCSR) {
+  import("tippy.js/dist/tippy.css");
+  import("tippy.js/themes/light.css");
+  import("tippy.js/animations/shift-away.css");
 
-isCSR && tippy.setDefaultProps(mergedSettings);
+  const defaultSettings = {
+    arrow: true,
+    theme: "light",
+    animation: "shift-away",
+  };
+
+  settings = merge(defaultSettings, vuelessConfig?.directive?.tooltip || {});
+  tippy.setDefaultProps(settings);
+}
 
 export default {
   mounted(el, bindings) {
-    isCSR && tippy(el, merge(mergedSettings, bindings.value || {}));
+    if (isSSR) return;
+
+    tippy(el, merge(settings, bindings.value || {}));
   },
 
   updated(el, bindings) {
     if (!el._tippy || isSSR) return;
 
-    el._tippy.setProps(merge(mergedSettings, bindings.value || {}));
+    el._tippy.setProps(merge(settings, bindings.value || {}));
   },
 
   unmounted(el) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.338",
+  "version": "0.0.339",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.59",
+    "@vueless/plugin-vite": "^0.0.60",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.15",
     "autoprefixer": "^10.4.19",

package/ui.button-toggle-item/UToggleItem.vue

@@ -53,7 +53,7 @@ import { computed, inject, onMounted, ref } from "vue";
 import UButton from "../ui.button/UButton.vue";
 import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import { TYPE_RADIO } from "../ui.button-toggle/constants";
+import { TYPE_RADIO } from "../ui.button-toggle/constants.js";
 
 import useAttrs from "./useAttrs.js";
 import defaultConfig from "./config.js";

package/utils/utilTheme.js

@@ -14,7 +14,7 @@ import {
   DARK_MODE_SELECTOR,
   GRAY_COLORS,
   PX_IN_REM,
-} from "../constants";
+} from "../constants.js";
 
 export function themeInit() {
   const prefersColorSchemeDark = window && window.matchMedia("(prefers-color-scheme: dark)");

package/utils/utilUI.js

@@ -7,29 +7,27 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   NESTED_COMPONENT_REG_EXP,
-} from "../constants";
+} from "../constants.js";
 
 /**
  Load Vueless config from the project root.
  Both for server and client side renderings.
- IIFE is used to cache the results.
+ IIFE for SSR is used to prevent top level await issue.
  */
-export const vuelessConfig = (() => {
-  let config = {};
+export let vuelessConfig = {};
 
-  if (isSSR) {
-    // TODO: test it in SSR, maybe `await` is needed
-    config = import(/* @vite-ignore */ `${process.cwd()}/vueless.config.js`).default;
-  }
-
-  if (isCSR) {
-    config = Object.values(
-      import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
-    )[0];
-  }
+if (isSSR) {
+  (async () =>
+    (vuelessConfig = (
+      await import(/* @vite-ignore */ `${process.cwd()}/vueless.config.js?${Date.now()}`)
+    ).default))();
+}
 
-  return config;
-})();
+if (isCSR) {
+  vuelessConfig = Object.values(
+    import.meta.glob("/vueless.config.js", { eager: true, import: "default" }),
+  )[0];
+}
 
 /**
  Extend twMerge (tailwind merge) by vueless and user config:

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.338",
+  "version": "0.0.339",
   "contributions": {
     "html": {
       "description-markup": "markdown",