@wagmi/vue 0.0.0-vue-20240513033839

package/src/exports/chains.ts

@@ -0,0 +1,5 @@
+////////////////////////////////////////////////////////////////////////////////
+// viem/chains
+////////////////////////////////////////////////////////////////////////////////
+
+export * from 'viem/chains'

package/src/exports/connectors.ts

@@ -0,0 +1,5 @@
+////////////////////////////////////////////////////////////////////////////////
+// @wagmi/connectors
+////////////////////////////////////////////////////////////////////////////////
+
+export * from '@wagmi/connectors'

package/src/exports/index.ts

@@ -0,0 +1,176 @@
+////////////////////////////////////////////////////////////////////////////////
+// Plugin
+////////////////////////////////////////////////////////////////////////////////
+
+export { configKey, type WagmiPluginOptions, WagmiPlugin } from '../plugin.js'
+
+////////////////////////////////////////////////////////////////////////////////
+// Errors
+////////////////////////////////////////////////////////////////////////////////
+
+export { type BaseErrorType, BaseError } from '../errors/base.js'
+
+export {
+  type WagmiPluginNotFoundErrorType,
+  WagmiPluginNotFoundError,
+  type WagmiInjectionContextErrorType,
+  WagmiInjectionContextError,
+} from '../errors/plugin.js'
+
+////////////////////////////////////////////////////////////////////////////////
+// Composables
+////////////////////////////////////////////////////////////////////////////////
+
+export {
+  type UseAccountParameters,
+  type UseAccountReturnType,
+  useAccount,
+} from '../composables/useAccount.js'
+
+export {
+  type UseAccountEffectParameters,
+  useAccountEffect,
+} from '../composables/useAccountEffect.js'
+
+export {
+  type UseBlockNumberParameters,
+  type UseBlockNumberReturnType,
+  useBlockNumber,
+} from '../composables/useBlockNumber.js'
+
+export {
+  type UseChainIdParameters,
+  type UseChainIdReturnType,
+  useChainId,
+} from '../composables/useChainId.js'
+
+export {
+  type UseClientParameters,
+  type UseClientReturnType,
+  useClient,
+} from '../composables/useClient.js'
+
+export {
+  type UseConnectorClientParameters,
+  type UseConnectorClientReturnType,
+  useConnectorClient,
+} from '../composables/useConnectorClient.js'
+
+export {
+  type UseChainsParameters,
+  type UseChainsReturnType,
+  useChains,
+} from '../composables/useChains.js'
+
+export {
+  type UseConfigParameters,
+  type UseConfigReturnType,
+  useConfig,
+} from '../composables/useConfig.js'
+
+export {
+  type UseConnectParameters,
+  type UseConnectReturnType,
+  useConnect,
+} from '../composables/useConnect.js'
+
+export {
+  type UseConnectionsParameters,
+  type UseConnectionsReturnType,
+  useConnections,
+} from '../composables/useConnections.js'
+
+export {
+  type UseConnectorsParameters,
+  type UseConnectorsReturnType,
+  useConnectors,
+} from '../composables/useConnectors.js'
+
+export {
+  type UseDisconnectParameters,
+  type UseDisconnectReturnType,
+  useDisconnect,
+} from '../composables/useDisconnect.js'
+
+export {
+  type UseReconnectParameters,
+  type UseReconnectReturnType,
+  useReconnect,
+} from '../composables/useReconnect.js'
+
+export {
+  type UseSwitchAccountParameters,
+  type UseSwitchAccountReturnType,
+  useSwitchAccount,
+} from '../composables/useSwitchAccount.js'
+
+export {
+  type UseSwitchChainParameters,
+  type UseSwitchChainReturnType,
+  useSwitchChain,
+} from '../composables/useSwitchChain.js'
+
+export {
+  type UseWatchBlockNumberParameters,
+  type UseWatchBlockNumberReturnType,
+  useWatchBlockNumber,
+} from '../composables/useWatchBlockNumber.js'
+
+////////////////////////////////////////////////////////////////////////////////
+// @wagmi/core
+////////////////////////////////////////////////////////////////////////////////
+
+export {
+  // Config
+  type Connection,
+  type Connector,
+  type Config,
+  type CreateConfigParameters,
+  type State,
+  createConfig,
+  // Connector
+  type ConnectorEventMap,
+  type CreateConnectorFn,
+  createConnector,
+  // Errors
+  type ChainNotConfiguredErrorType,
+  ChainNotConfiguredError,
+  type ConnectorAlreadyConnectedErrorType,
+  ConnectorAlreadyConnectedError,
+  type ConnectorNotFoundErrorType,
+  ConnectorNotFoundError,
+  type ConnectorAccountNotFoundErrorType,
+  ConnectorAccountNotFoundError,
+  type ProviderNotFoundErrorType,
+  ProviderNotFoundError,
+  type SwitchChainNotSupportedErrorType,
+  SwitchChainNotSupportedError,
+  // Storage
+  type CreateStorageParameters,
+  type Storage,
+  createStorage,
+  noopStorage,
+  // Transports
+  custom,
+  fallback,
+  http,
+  webSocket,
+  unstable_connector,
+  // Types
+  type Register,
+  type ResolvedRegister,
+  // Utilities
+  cookieStorage,
+  cookieToInitialState,
+  deepEqual,
+  deserialize,
+  normalizeChainId,
+  parseCookie,
+  serialize,
+} from '@wagmi/core'
+
+////////////////////////////////////////////////////////////////////////////////
+// Version
+////////////////////////////////////////////////////////////////////////////////
+
+export { version } from '../version.js'

package/src/exports/nuxt.ts

@@ -0,0 +1,4 @@
+import { wagmiModule } from '../nuxt/module.js'
+
+export { type WagmiModuleOptions } from '../nuxt/module.js'
+export default wagmiModule

package/src/exports/query.ts

@@ -0,0 +1,17 @@
+////////////////////////////////////////////////////////////////////////////////
+// @wagmi/core/query
+////////////////////////////////////////////////////////////////////////////////
+
+export * from '@wagmi/core/query'
+
+export {
+  type UseMutationParameters,
+  type UseMutationReturnType,
+  useMutation,
+} from '../utils/query.js'
+
+export {
+  type UseQueryParameters,
+  type UseQueryReturnType,
+  useQuery,
+} from '../utils/query.js'

package/src/nuxt/module.ts

@@ -0,0 +1,25 @@
+import { fileURLToPath } from 'node:url'
+import type { NuxtModule } from '@nuxt/schema'
+import { defineNuxtModule } from 'nuxt/kit'
+
+// TODO: createConfig parameters to options?
+export type WagmiModuleOptions = {}
+
+export const wagmiModule: NuxtModule<WagmiModuleOptions> =
+  defineNuxtModule<WagmiModuleOptions>({
+    meta: {
+      name: '@wagmi/vue',
+      configKey: 'wagmi',
+      compatibility: {
+        nuxt: '^3.0.0',
+      },
+    },
+    setup(_options, nuxt) {
+      // Transpile runtime
+      const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
+      nuxt.options.build.transpile.push(runtimeDir)
+
+      // TODO: Add client and server plugins
+      // TODO: Auto import composables
+    },
+  })

package/src/plugin.ts

@@ -0,0 +1,22 @@
+import { type ResolvedRegister, type State, hydrate } from '@wagmi/core'
+import type { Plugin } from 'vue'
+
+export const configKey = Symbol()
+
+export type WagmiPluginOptions = {
+  config: ResolvedRegister['config']
+  initialState?: State | undefined
+  reconnectOnMount?: boolean | undefined
+}
+
+export const WagmiPlugin = {
+  install(app, options) {
+    const { config, reconnectOnMount = true } = options
+    app.provide(configKey, config)
+    // TODO: check this works in SSR env.
+    //       - reconnect on mount.
+    //       - hydrate initial state.
+    const { onMount } = hydrate(config, { ...options, reconnectOnMount })
+    onMount()
+  },
+} satisfies Plugin<WagmiPluginOptions>

package/src/types/properties.ts

@@ -0,0 +1,27 @@
+import type { DefaultError, QueryKey } from '@tanstack/vue-query'
+import type { Config } from '@wagmi/core'
+import type { MaybeRef } from 'vue'
+import type { UseQueryParameters } from '../utils/query.js'
+import type { DeepUnwrapRef } from './ref.js'
+
+export type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+export type EnabledParameter = {
+  enabled?: MaybeRef<boolean> | undefined
+}
+
+export type QueryParameter<
+  queryFnData = unknown,
+  error = DefaultError,
+  data = queryFnData,
+  queryKey extends QueryKey = QueryKey,
+> = {
+  query?:
+    | Omit<
+        DeepUnwrapRef<UseQueryParameters<queryFnData, error, data, queryKey>>,
+        'queryFn' | 'queryHash' | 'queryKey' | 'queryKeyHashFn' | 'throwOnError'
+      >
+    | undefined
+}

package/src/types/ref.ts

@@ -0,0 +1,36 @@
+// Credit: https://github.com/TanStack/query/blob/01ce023826b81e6c41e354f27691f65c9725af67/packages/vue-query/src/types.ts
+
+import type { Config } from '@wagmi/core'
+import type { MaybeRef, Ref, UnwrapRef } from 'vue'
+
+type Primitive = string | number | boolean | bigint | symbol | undefined | null
+type UnwrapLeaf =
+  | Primitive
+  | Function
+  | Date
+  | Error
+  | RegExp
+  | Map<any, any>
+  | WeakMap<any, any>
+  | Set<any>
+  | WeakSet<any>
+
+export type DeepMaybeRef<value> = MaybeRef<
+  value extends Function | Config
+    ? value
+    : value extends object
+    ? {
+        [key in keyof value]: DeepMaybeRef<value[key]>
+      }
+    : value
+>
+
+export type DeepUnwrapRef<T> = T extends UnwrapLeaf
+  ? T
+  : T extends Ref<infer U>
+  ? DeepUnwrapRef<U>
+  : T extends {}
+  ? {
+      [Property in keyof T]: DeepUnwrapRef<T[Property]>
+    }
+  : UnwrapRef<T>

package/src/utils/cloneDeep.ts

@@ -0,0 +1,43 @@
+// Credit: https://github.com/TanStack/query/blob/01ce023826b81e6c41e354f27691f65c9725af67/packages/vue-query/src/utils.ts
+
+import { isRef, unref } from 'vue'
+
+import type { DeepMaybeRef, DeepUnwrapRef } from '../types/ref.js'
+
+function cloneDeep<value>(
+  value: DeepMaybeRef<value>,
+  customize?: (val: DeepMaybeRef<value>) => value | undefined,
+): value {
+  if (customize) {
+    const result = customize(value)
+    // If it's a ref of undefined, return undefined
+    if (result === undefined && isRef(value)) return result as value
+    if (result !== undefined) return result
+  }
+
+  if (Array.isArray(value))
+    return value.map((val) => cloneDeep(val, customize)) as unknown as value
+
+  if (typeof value === 'object' && isPlainObject(value)) {
+    const entries = Object.entries(value).map(([key, val]) => [
+      key,
+      cloneDeep(val, customize),
+    ])
+    return Object.fromEntries(entries)
+  }
+
+  return value as value
+}
+
+export function deepUnref<value>(value: value): DeepUnwrapRef<value> {
+  return cloneDeep(value as any, (val) => {
+    if (isRef(val)) return deepUnref(unref(val))
+    return undefined
+  })
+}
+
+function isPlainObject(value: unknown): value is Object {
+  if (Object.prototype.toString.call(value) !== '[object Object]') return false
+  const prototype = Object.getPrototypeOf(value)
+  return prototype === null || prototype === Object.prototype
+}

package/src/utils/getVersion.ts

@@ -0,0 +1,3 @@
+import { version } from '../version.js'
+
+export const getVersion = () => `@wagmi/vue@${version}`

package/src/utils/query.ts

@@ -0,0 +1,159 @@
+import {
+  type DefaultError,
+  type MutationObserverOptions,
+  type QueryKey,
+  type QueryObserverOptions,
+  type UseMutationReturnType as tanstack_UseMutationReturnType,
+  type UseQueryReturnType as tanstack_UseQueryReturnType,
+  useMutation,
+  useQuery as tanstack_useQuery,
+} from '@tanstack/vue-query'
+import {
+  type Evaluate,
+  type ExactPartial,
+  type Omit,
+  type UnionOmit,
+} from '@wagmi/core/internal'
+import { hashFn } from '@wagmi/core/query'
+import { type MaybeRef, computed, unref } from 'vue'
+
+import type { DeepMaybeRef, DeepUnwrapRef } from '../types/ref.js'
+
+export type UseMutationParameters<
+  data = unknown,
+  error = Error,
+  variables = void,
+  context = unknown,
+> = Evaluate<
+  DeepMaybeRef<
+    Omit<
+      DeepUnwrapRef<
+        MutationObserverOptions<data, error, Evaluate<variables>, context>
+      >,
+      'mutationFn' | 'mutationKey' | 'throwOnError'
+    >
+  >
+>
+
+export type UseMutationReturnType<
+  data = unknown,
+  error = Error,
+  variables = void,
+  context = unknown,
+> = Evaluate<
+  UnionOmit<
+    tanstack_UseMutationReturnType<data, error, variables, context>,
+    'mutate' | 'mutateAsync'
+  >
+>
+
+export { useMutation }
+
+////////////////////////////////////////////////////////////////////////////////
+
+export type UseQueryParameters<
+  queryFnData = unknown,
+  error = DefaultError,
+  data = queryFnData,
+  queryKey extends QueryKey = QueryKey,
+> = Evaluate<
+  DeepMaybeRef<
+    ExactPartial<
+      Omit<
+        DeepUnwrapRef<QueryObserverOptions<queryFnData, error, data, queryKey>>,
+        'initialData'
+      >
+    > & {
+      // Fix `initialData` type
+      initialData?:
+        | DeepUnwrapRef<
+            QueryObserverOptions<queryFnData, error, data, queryKey>
+          >['initialData']
+        | undefined
+    }
+  >
+>
+
+export type UseQueryReturnType<data = unknown, error = DefaultError> = Evaluate<
+  tanstack_UseQueryReturnType<data, error> & {
+    queryKey: QueryKey
+  }
+>
+
+// Adding some basic customization.
+// Ideally we don't have this function, but `import('@tanstack/vue-query').useQuery` currently has some quirks where it is super hard to
+// pass down the inferred `initialData` type because of it's discriminated overload in the on `useQuery`.
+export function useQuery<queryFnData, error, data, queryKey extends QueryKey>(
+  parameters: MaybeRef<
+    UseQueryParameters<queryFnData, error, data, queryKey> & {
+      queryKey: QueryKey
+    }
+  >,
+): UseQueryReturnType<data, error> {
+  const options = computed(() => ({
+    ...(unref(parameters) as any),
+    queryKeyHashFn: hashFn,
+  }))
+  const result = tanstack_useQuery(options) as UseQueryReturnType<data, error>
+  result.queryKey = unref(options).queryKey as QueryKey
+  return result
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+// export type UseInfiniteQueryParameters<
+//   queryFnData = unknown,
+//   error = DefaultError,
+//   data = queryFnData,
+//   queryData = queryFnData,
+//   queryKey extends QueryKey = QueryKey,
+//   pageParam = unknown,
+// > = Evaluate<
+//   Omit<
+//     UseInfiniteQueryOptions<
+//       queryFnData,
+//       error,
+//       data,
+//       queryData,
+//       queryKey,
+//       pageParam
+//     >,
+//     'initialData'
+//   > & {
+//     // Fix `initialData` type
+//     initialData?:
+//       | UseInfiniteQueryOptions<
+//           queryFnData,
+//           error,
+//           data,
+//           queryKey
+//         >['initialData']
+//       | undefined
+//   }
+// >
+
+// export type UseInfiniteQueryReturnType<
+//   data = unknown,
+//   error = DefaultError,
+// > = import('@tanstack/vue-query').UseInfiniteQueryReturnType<data, error> & {
+//   queryKey: QueryKey
+// }
+
+// // Adding some basic customization.
+// export function useInfiniteQuery<
+//   queryFnData,
+//   error,
+//   data,
+//   queryKey extends QueryKey,
+// >(
+//   parameters: UseInfiniteQueryParameters<queryFnData, error, data, queryKey> & {
+//     queryKey: QueryKey
+//   },
+// ): UseInfiniteQueryReturnType<data, error> {
+//   const result = tanstack_useInfiniteQuery({
+//     ...(parameters as any),
+//     queryKeyHashFn: hashFn, // for bigint support
+//   }) as UseInfiniteQueryReturnType<data, error>
+//   result.queryKey = parameters.queryKey
+//   return result
+// }

package/src/utils/updateState.ts

@@ -0,0 +1,10 @@
+// Credit: https://github.com/TanStack/query/blob/01ce023826b81e6c41e354f27691f65c9725af67/packages/vue-query/src/utils.ts#L11-L18
+
+export function updateState(
+  state: Record<string, unknown>,
+  update: Record<string, any>,
+): void {
+  Object.keys(state).forEach((key) => {
+    state[key] = update[key]
+  })
+}

package/src/version.ts

@@ -0,0 +1 @@
+export const version = '0.0.0-vue-20240513033839'