@vueuse/nuxt 7.0.0-alpha.0 → 7.2.2

package/README.md

@@ -2,9 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/@vueuse/nuxt?color=a1b858)](https://www.npmjs.com/package/@vueuse/nuxt)
 
-> This is an add-on of [VueUse](https://github.com/vueuse/vueuse), provides Nuxt specific composables and auto-import capabilities.
-
-> Expiremental. **Will NOT follow semvar**.
+> This is an add-on of [VueUse](https://github.com/vueuse/vueuse), which provides better Nuxt integration auto-import capabilities.
 
 ## Install
 
@@ -17,22 +15,11 @@ npm i <b>@vueuse/nuxt</b>
 
 export function defineNuxtConfig({
   buildModules: [
-    '@vueuse/nuxt/module'
+    '@vueuse/nuxt'
   ]
 })
 ```
 
-## Functions
-
-`@vueuse/nuxt` provides the following functions
-
-<!--GENERATED LIST, DO NOT MODIFY MANUALLY-->
-<!--FUNCTIONS_LIST_STARTS-->
-  - [`useNuxtDark`](https://vueuse.org/nuxt/useNuxtDark/) — reactive dark mode with auto data persistence for Nuxt
-
-
-<!--FUNCTIONS_LIST_ENDS-->
-
 ## License
 
 [MIT License](https://github.com/vueuse/vueuse/blob/master/LICENSE) © 2021-PRESENT [Anthony Fu](https://github.com/antfu)

package/index.cjs

@@ -1,46 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@vueuse/core');
-var vueDemi = require('vue-demi');
-var _app = require('#app');
-
-function useNuxtDark(options = {}) {
-  const {
-    attribute = "class",
-    valueDark = "dark",
-    valueLight = "light",
-    window = core.defaultWindow,
-    cookieKey = "vueuse-color-schema"
-  } = options;
-  const preferredDark = core.usePreferredDark({ window });
-  const store = _app.useCookie(cookieKey);
-  if (store.value == null)
-    store.value = "auto";
-  const isDark = vueDemi.computed({
-    get() {
-      return store.value === "auto" ? preferredDark.value : store.value === "dark";
-    },
-    set(v) {
-      if (v === preferredDark.value)
-        store.value = "auto";
-      else
-        store.value = v ? "dark" : "light";
-    }
-  });
-  _app.useMeta(vueDemi.computed(() => ({
-    htmlAttrs: {
-      [attribute]: isDark.value ? valueDark : valueLight
-    }
-  })));
-  return isDark;
+// CommonJS proxy to bypass jiti transforms from nuxt 2 and using native ESM
+module.exports = function(...args) {
+  return import('./index.mjs').then(m => m.default.call(this, ...args))
 }
 
-exports.useNuxtDark = useNuxtDark;
-Object.keys(core).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return core[k]; }
-  });
-});
+module.exports.meta = require('./package.json')

package/index.d.ts

@@ -1,48 +1 @@
-import * as vue_demi from 'vue-demi';
-import { ConfigurableWindow } from '@vueuse/core';
-export * from '@vueuse/core';
-
-interface UseNuxtDarkOptions extends ConfigurableWindow {
-    /**
-     * HTML attribute applying the target element
-     *
-     * @default 'class'
-     */
-    attribute?: string;
-    /**
-     * Value applying to the target element when isDark=true
-     *
-     * @default 'dark'
-     */
-    valueDark?: string;
-    /**
-     * Value applying to the target element when isDark=false
-     *
-     * @default 'light'
-     */
-    valueLight?: string;
-    /**
-     * A custom handler for handle the updates.
-     * When specified, the default behavior will be overridded.
-     *
-     * @default undefined
-     */
-    onChanged?: (isDark: boolean) => void;
-    /**
-     * Key to persist the data into Nuxt's useCookie.
-     *
-     * Pass `null` to disable persistence
-     *
-     * @default 'vueuse-color-schema'
-     */
-    cookieKey?: string;
-}
-/**
- * Reactive dark mode with auto data persistence for Nuxt.
- *
- * @see https://vueuse.org/useNuxtDark
- * @param options
- */
-declare function useNuxtDark(options?: UseNuxtDarkOptions): vue_demi.WritableComputedRef<boolean>;
-
-export { UseNuxtDarkOptions, useNuxtDark };
+export default function(): void

package/index.mjs

@@ -1,37 +1,68 @@
-import { usePreferredDark, defaultWindow } from '@vueuse/core';
-export * from '@vueuse/core';
-import { computed } from 'vue-demi';
-import { useCookie, useMeta } from '#app';
+import fs from 'fs';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { isPackageExists } from 'local-pkg';
 
-function useNuxtDark(options = {}) {
-  const {
-    attribute = "class",
-    valueDark = "dark",
-    valueLight = "light",
-    window = defaultWindow,
-    cookieKey = "vueuse-color-schema"
-  } = options;
-  const preferredDark = usePreferredDark({ window });
-  const store = useCookie(cookieKey);
-  if (store.value == null)
-    store.value = "auto";
-  const isDark = computed({
-    get() {
-      return store.value === "auto" ? preferredDark.value : store.value === "dark";
-    },
-    set(v) {
-      if (v === preferredDark.value)
-        store.value = "auto";
-      else
-        store.value = v ? "dark" : "light";
-    }
+const _dirname = typeof __dirname === "undefined" ? dirname(fileURLToPath(import.meta.url)) : __dirname;
+const disabledFunctions = [
+  "useFetch",
+  "toRefs",
+  "useCookie"
+];
+const packages = [
+  "core",
+  "shared",
+  "nuxt",
+  "integrations",
+  "components",
+  "motion",
+  "firebase",
+  "rxjs",
+  "sound",
+  "head"
+];
+const fullPackages = packages.map((p) => `@vueuse/${p}`);
+function VueUseModule() {
+  const { nuxt } = this;
+  nuxt.hook("vite:extend", ({ config }) => {
+    config.optimizeDeps = config.optimizeDeps || {};
+    config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
+    config.optimizeDeps.exclude.push(...fullPackages);
   });
-  useMeta(computed(() => ({
-    htmlAttrs: {
-      [attribute]: isDark.value ? valueDark : valueLight
+  nuxt.options.build = nuxt.options.build || {};
+  nuxt.options.build.transpile = nuxt.options.build.transpile || [];
+  nuxt.options.build.transpile.push("@vueuse/nuxt");
+  let indexes;
+  nuxt.hook("autoImports:sources", (sources) => {
+    if (sources.find((i) => fullPackages.includes(i.from)))
+      return;
+    if (!indexes) {
+      try {
+        indexes = JSON.parse(fs.readFileSync(resolve(_dirname, "./indexes.json"), "utf-8"));
+        indexes == null ? void 0 : indexes.functions.forEach((i) => {
+          if (i.package === "shared")
+            i.package = "core";
+        });
+      } catch (e) {
+        throw new Error("[@vueuse/nuxt] Failed to load indexes.json");
+      }
+    }
+    if (!indexes)
+      return;
+    for (const pkg of packages) {
+      if (pkg === "shared")
+        continue;
+      if (!isPackageExists(`@vueuse/${pkg}`))
+        continue;
+      const functions = indexes.functions.filter((i) => (i.package === "core" || i.package === "shared") && !i.internal);
+      if (functions.length) {
+        sources.push({
+          from: `@vueuse/${pkg}`,
+          names: indexes.functions.filter((i) => i.package === pkg && !i.internal).map((i) => i.name).filter((i) => i.length >= 4 && !disabledFunctions.includes(i))
+        });
+      }
     }
-  })));
-  return isDark;
+  });
 }
 
-export { useNuxtDark };
+export { VueUseModule as default };