dtwo 3.0.0 → 3.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 - Dtwo Project
+Copyright (c) 2022 - Dtwo Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,3 +1,7 @@
-# Dtwo 3
+# Dtwo
 
-> The core of Dtwo 3
+Dtwo 3: **The Intuitive Web Framework** ✨
+
+## License
+
+[MIT](./LICENSE)

package/bin/dtwo.mjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import '@dtwo/cli/cli'
+import 'dtwc/cli'

package/config.d.ts

@@ -1,4 +1,4 @@
-import { DtwoConfig } from '@dtwo/schema'
+import type { DtwoConfig } from '@dtwo/schema'
 export { DtwoConfig } from '@dtwo/schema'
 
 export declare function defineDtwoConfig(config: DtwoConfig): DtwoConfig

package/dist/app/compat/idle-callback.d.ts

@@ -0,0 +1,2 @@
+export declare const requestIdleCallback: Window['requestIdleCallback'];
+export declare const cancelIdleCallback: Window['cancelIdleCallback'];

package/dist/app/compat/idle-callback.mjs

@@ -0,0 +1,13 @@
+export const requestIdleCallback = process.server ? void 0 : globalThis.requestIdleCallback || ((cb) => {
+  const start = Date.now();
+  const idleDeadline = {
+    didTimeout: false,
+    timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
+  };
+  return setTimeout(() => {
+    cb(idleDeadline);
+  }, 1);
+});
+export const cancelIdleCallback = process.server ? null : globalThis.cancelIdleCallback || ((id) => {
+  clearTimeout(id);
+});

package/dist/app/components/dtwo-island.d.ts

@@ -0,0 +1,33 @@
+declare const _default: import("kdu").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    props: {
+        type: ObjectConstructor;
+        default: () => undefined;
+    };
+    context: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}, () => import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<import("kdu").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    props: {
+        type: ObjectConstructor;
+        default: () => undefined;
+    };
+    context: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>>, {
+    props: Record<string, any>;
+    context: Record<string, any>;
+}>;
+export default _default;

package/dist/app/components/dtwo-island.mjs

@@ -0,0 +1,62 @@
+import { defineComponent, createStaticKNode, computed, ref, watch } from "kdu";
+import { debounce } from "perfect-debounce";
+import { hash } from "ohash";
+import { appendHeader } from "h3";
+import { useHead, useDtwoApp, useRequestEvent } from "#app";
+const pKey = "_islandPromises";
+export default defineComponent({
+  name: "DtwoIsland",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    props: {
+      type: Object,
+      default: () => void 0
+    },
+    context: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  async setup(props) {
+    const dtwoApp = useDtwoApp();
+    const hashId = computed(() => hash([props.name, props.props, props.context]));
+    const event = useRequestEvent();
+    const html = ref("");
+    const cHead = ref({ link: [], style: [] });
+    useHead(cHead);
+    function _fetchComponent() {
+      const url = `/__dtwo_island/${props.name}:${hashId.value}`;
+      if (process.server && process.env.prerender) {
+        appendHeader(event, "x-hole-prerender", url);
+      }
+      return $fetch(url, {
+        params: {
+          ...props.context,
+          props: props.props ? JSON.stringify(props.props) : void 0
+        }
+      });
+    }
+    async function fetchComponent() {
+      dtwoApp[pKey] = dtwoApp[pKey] || {};
+      if (!dtwoApp[pKey][hashId.value]) {
+        dtwoApp[pKey][hashId.value] = _fetchComponent().finally(() => {
+          delete dtwoApp[pKey][hashId.value];
+        });
+      }
+      const res = await dtwoApp[pKey][hashId.value];
+      cHead.value.link = res.head.link;
+      cHead.value.style = res.head.style;
+      html.value = res.html;
+    }
+    if (process.client) {
+      watch(props, debounce(fetchComponent, 100));
+    }
+    if (process.server || !dtwoApp.isHydrating) {
+      await fetchComponent();
+    }
+    return () => createStaticKNode(html.value, 1);
+  }
+});

package/dist/app/components/dtwo-link.d.ts

@@ -1,4 +1,4 @@
-import { DefineComponent } from 'kdu';
+import type { DefineComponent } from 'kdu';
 import type { RouteLocationRaw } from 'kdu-router';
 export type DtwoLinkOptions = {
     componentName?: string;
@@ -23,11 +23,11 @@ export type DtwoLinkProps = {
     ariaCurrentValue?: string;
 };
 export declare function defineDtwoLink(options: DtwoLinkOptions): DefineComponent<DtwoLinkProps, {}, {}, import("kdu").ComputedOptions, import("kdu").MethodOptions, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<DtwoLinkProps>, {
-    to?: any;
     href?: any;
+    to?: any;
 }>;
 declare const _default: DefineComponent<DtwoLinkProps, {}, {}, import("kdu").ComputedOptions, import("kdu").MethodOptions, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<DtwoLinkProps>, {
-    to?: any;
     href?: any;
+    to?: any;
 }>;
 export default _default;

package/dist/app/components/dtwo-link.mjs

@@ -1,23 +1,12 @@
 import { defineComponent, h, ref, resolveComponent, computed, onMounted, onBeforeUnmount } from "kdu";
 import { hasProtocol } from "ufo";
 import { preloadRouteComponents } from "../composables/preload.mjs";
+import { onDtwoReady } from "../composables/ready.mjs";
 import { navigateTo, useRouter } from "../composables/router.mjs";
 import { useDtwoApp } from "../dtwo.mjs";
+import { cancelIdleCallback, requestIdleCallback } from "../compat/idle-callback.mjs";
 const firstNonUndefined = (...args) => args.find((arg) => arg !== void 0);
 const DEFAULT_EXTERNAL_REL_ATTRIBUTE = "noopener noreferrer";
-const requestIdleCallback = process.server ? void 0 : globalThis.requestIdleCallback || ((cb) => {
-  const start = Date.now();
-  const idleDeadline = {
-    didTimeout: false,
-    timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
-  };
-  return setTimeout(() => {
-    cb(idleDeadline);
-  }, 1);
-});
-const cancelIdleCallback = process.server ? null : globalThis.cancelIdleCallback || ((id) => {
-  clearTimeout(id);
-});
 export function defineDtwoLink(options) {
   const componentName = options.componentName || "DtwoLink";
   const checkPropConflicts = (props, main, sub) => {
@@ -28,6 +17,7 @@ export function defineDtwoLink(options) {
   return defineComponent({
     name: componentName,
     props: {
+      // Routing
       to: {
         type: [String, Object],
         default: void 0,
@@ -38,6 +28,7 @@ export function defineDtwoLink(options) {
         default: void 0,
         required: false
       },
+      // Attributes
       target: {
         type: String,
         default: void 0,
@@ -53,6 +44,7 @@ export function defineDtwoLink(options) {
         default: void 0,
         required: false
       },
+      // Prefetching
       prefetch: {
         type: Boolean,
         default: void 0,
@@ -63,6 +55,7 @@ export function defineDtwoLink(options) {
         default: void 0,
         required: false
       },
+      // Styling
       activeClass: {
         type: String,
         default: void 0,
@@ -78,6 +71,7 @@ export function defineDtwoLink(options) {
         default: void 0,
         required: false
       },
+      // Kdu Router's `<RouterLink>` additional props
       replace: {
         type: Boolean,
         default: void 0,
@@ -88,11 +82,13 @@ export function defineDtwoLink(options) {
         default: void 0,
         required: false
       },
+      // Edge cases handling
       external: {
         type: Boolean,
         default: void 0,
         required: false
       },
+      // Slot API
       custom: {
         type: Boolean,
         default: void 0,
@@ -124,24 +120,26 @@ export function defineDtwoLink(options) {
         const shouldPrefetch = props.prefetch !== false && props.noPrefetch !== true && typeof to.value === "string" && props.target !== "_blank" && !isSlowConnection();
         if (shouldPrefetch) {
           const dtwoApp = useDtwoApp();
-          const observer = useObserver();
           let idleId;
           let unobserve = null;
           onMounted(() => {
-            idleId = requestIdleCallback(() => {
-              if (el?.value?.tagName) {
-                unobserve = observer.observe(el.value, async () => {
-                  unobserve?.();
-                  unobserve = null;
-                  await Promise.all([
-                    dtwoApp.hooks.callHook("link:prefetch", to.value).catch(() => {
-                    }),
-                    !isExternal.value && preloadRouteComponents(to.value, router).catch(() => {
-                    })
-                  ]);
-                  prefetched.value = true;
-                });
-              }
+            const observer = useObserver();
+            onDtwoReady(() => {
+              idleId = requestIdleCallback(() => {
+                if (el?.value?.tagName) {
+                  unobserve = observer.observe(el.value, async () => {
+                    unobserve?.();
+                    unobserve = null;
+                    await Promise.all([
+                      dtwoApp.hooks.callHook("link:prefetch", to.value).catch(() => {
+                      }),
+                      !isExternal.value && preloadRouteComponents(to.value, router).catch(() => {
+                      })
+                    ]);
+                    prefetched.value = true;
+                  });
+                }
+              });
             });
           });
           onBeforeUnmount(() => {

package/dist/app/components/dtwo-loading-indicator.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("kdu").DefineComponent<{
         default: number;
     };
     color: {
-        type: StringConstructor;
+        type: (BooleanConstructor | StringConstructor)[];
         default: string;
     };
 }, () => import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
@@ -31,13 +31,13 @@ declare const _default: import("kdu").DefineComponent<{
         default: number;
     };
     color: {
-        type: StringConstructor;
+        type: (BooleanConstructor | StringConstructor)[];
         default: string;
     };
 }>>, {
     duration: number;
+    color: string | boolean;
     throttle: number;
     height: number;
-    color: string;
 }>;
 export default _default;

package/dist/app/components/dtwo-loading-indicator.mjs

@@ -16,7 +16,7 @@ export default defineComponent({
       default: 3
     },
     color: {
-      type: String,
+      type: [String, Boolean],
       default: "repeating-linear-gradient(to right,#d7555d 0%,#e5757b 50%,#0047e1 100%)"
     }
   },
@@ -40,7 +40,7 @@ export default defineComponent({
         width: `${indicator.progress.value}%`,
         height: `${props.height}px`,
         opacity: indicator.isLoading.value ? 1 : 0,
-        background: props.color,
+        background: props.color || void 0,
         backgroundSize: `${100 / indicator.progress.value * 100}% auto`,
         transition: "width 0.1s, height 0.4s, opacity 0.4s",
         zIndex: 999999
@@ -57,12 +57,13 @@ function useLoadingIndicator(opts) {
   function start() {
     clear();
     progress.value = 0;
-    isLoading.value = true;
-    if (opts.throttle) {
-      if (process.client) {
-        _throttle = setTimeout(_startTimer, opts.throttle);
-      }
+    if (opts.throttle && process.client) {
+      _throttle = setTimeout(() => {
+        isLoading.value = true;
+        _startTimer();
+      }, opts.throttle);
     } else {
+      isLoading.value = true;
       _startTimer();
     }
   }

package/dist/app/components/dtwo-root.kdu

@@ -1,16 +1,20 @@
 <template>
   <Suspense @resolve="onResolve">
     <ErrorComponent k-if="error" :error="error" />
+    <IslandRendererer k-else-if="islandContext" :context="islandContext" />
     <AppComponent k-else />
   </Suspense>
 </template>
 
 <script setup>
-import { defineAsyncComponent, onErrorCaptured, provide } from 'kdu'
+import { defineAsyncComponent, onErrorCaptured, onServerPrefetch, provide } from 'kdu'
 import { callWithDtwo, isDtwoError, showError, useError, useRoute, useDtwoApp } from '#app'
 import AppComponent from '#build/app-component.mjs'
 
 const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))
+const IslandRendererer = process.server
+  ? defineAsyncComponent(() => import('./island-renderer').then(r => r.default || r))
+  : () => null
 
 const dtwoApp = useDtwoApp()
 const onResolve = dtwoApp.deferHydration()
@@ -29,7 +33,11 @@ const error = useError()
 onErrorCaptured((err, target, info) => {
   dtwoApp.hooks.callHook('kdu:error', err, target, info).catch(hookError => console.error('[dtwo] Error in `kdu:error` hook', hookError))
   if (process.server || (isDtwoError(err) && (err.fatal || err.unhandled))) {
-    callWithDtwo(dtwoApp, showError, [err])
+    const p = callWithDtwo(dtwoApp, showError, [err])
+    onServerPrefetch(() => p)
   }
 })
+
+// Component islands context
+const { islandContext } = process.server && dtwoApp.ssrContext
 </script>

package/dist/app/components/island-renderer.d.ts

@@ -0,0 +1,20 @@
+declare const _default: import("kdu").DefineComponent<{
+    context: {
+        type: () => {
+            name: string;
+            props?: Record<string, any>;
+        };
+        required: true;
+    };
+}, () => import("kdu").KNode<import("kdu").RendererNode, import("kdu").RendererElement, {
+    [key: string]: any;
+}>[], unknown, {}, {}, import("kdu").ComponentOptionsMixin, import("kdu").ComponentOptionsMixin, {}, string, import("kdu").KNodeProps & import("kdu").AllowedComponentProps & import("kdu").ComponentCustomProps, Readonly<import("kdu").ExtractPropTypes<{
+    context: {
+        type: () => {
+            name: string;
+            props?: Record<string, any>;
+        };
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/dist/app/components/island-renderer.mjs

@@ -0,0 +1,26 @@
+import { createBlock, defineComponent, h, Teleport } from "kdu";
+import * as islandComponents from "#build/components.islands.mjs";
+import { createError } from "#app";
+export default defineComponent({
+  props: {
+    context: {
+      type: Object,
+      required: true
+    }
+  },
+  async setup(props) {
+    const component = islandComponents[props.context.name];
+    if (!component) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: `Island component not found: ${JSON.stringify(component)}`
+      });
+    }
+    if (typeof component === "object") {
+      await component.__asyncLoader?.();
+    }
+    return () => [
+      createBlock(Teleport, { to: "dtwo-island" }, [h(component || "span", props.context.props)])
+    ];
+  }
+});

package/dist/app/components/layout.d.ts

@@ -1,4 +1,4 @@
-import { Ref, KNode } from 'kdu';
+import type { Ref, KNode } from 'kdu';
 declare const _default: import("kdu").DefineComponent<{
     name: {
         type: () => string | false | Ref<string | false>;

package/dist/app/components/layout.mjs

@@ -5,6 +5,8 @@ import { useRoute as useKduRouterRoute } from "#build/pages";
 import layouts from "#build/layouts";
 import { appLayoutTransition as defaultLayoutTransition } from "#build/dtwo.config.mjs";
 const LayoutLoader = defineComponent({
+  name: "LayoutLoader",
+  inheritAttrs: false,
   props: {
     name: String,
     ...process.dev ? { hasTransition: Boolean } : {}
@@ -23,14 +25,16 @@ const LayoutLoader = defineComponent({
     const LayoutComponent = await layouts[props.name]().then((r) => r.default || r);
     return () => {
       if (process.dev && process.client && props.hasTransition) {
-        knode = h(LayoutComponent, {}, context.slots);
+        knode = h(LayoutComponent, context.attrs, context.slots);
         return knode;
       }
-      return h(LayoutComponent, {}, context.slots);
+      return h(LayoutComponent, context.attrs, context.slots);
     };
   }
 });
 export default defineComponent({
+  name: "DtwoLayout",
+  inheritAttrs: false,
   props: {
     name: {
       type: [String, Boolean, Object],
@@ -59,7 +63,12 @@ export default defineComponent({
       }
       const transitionProps = route.meta.layoutTransition ?? defaultLayoutTransition;
       return _wrapIf(Transition, hasLayout && transitionProps, {
-        default: () => _wrapIf(LayoutLoader, hasLayout && { key: layout.value, name: layout.value, hasTransition: process.dev ? !!transitionProps : void 0 }, context.slots).default()
+        default: () => _wrapIf(LayoutLoader, hasLayout && {
+          key: layout.value,
+          name: layout.value,
+          ...process.dev ? { hasTransition: !!transitionProps } : {},
+          ...context.attrs
+        }, context.slots).default()
       }).default();
     };
   }

package/dist/app/components/utils.mjs

@@ -1,5 +1,6 @@
 import { defineComponent, h } from "kdu";
 const Fragment = defineComponent({
+  name: "FragmentWrapper",
   setup(_props, { slots }) {
     return () => slots.default?.();
   }

package/dist/app/composables/asyncData.d.ts

@@ -1,5 +1,5 @@
 import type { Ref, WatchSource } from 'kdu';
-import { DtwoApp } from '../dtwo';
+import type { DtwoApp } from '../dtwo';
 export type _Transform<Input = any, Output = any> = (input: Input) => Output;
 export type PickFrom<T, K extends Array<string>> = T extends Array<any> ? T : T extends Record<string, any> ? keyof T extends K[number] ? T : Pick<T, K[number]> : T;
 export type KeysOf<T> = Array<T extends T ? keyof T extends string ? keyof T : string : never>;
@@ -35,6 +35,9 @@ export declare function useAsyncData<DataT, DataE = Error, Transform extends _Tr
 export declare function useAsyncData<DataT, DataE = Error, Transform extends _Transform<DataT> = _Transform<DataT, DataT>, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>>(key: string, handler: (ctx?: DtwoApp) => Promise<DataT>, options?: AsyncDataOptions<DataT, Transform, PickKeys>): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null>;
 export declare function useLazyAsyncData<DataT, DataE = Error, Transform extends _Transform<DataT> = _Transform<DataT, DataT>, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>>(handler: (ctx?: DtwoApp) => Promise<DataT>, options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'>): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null>;
 export declare function useLazyAsyncData<DataT, DataE = Error, Transform extends _Transform<DataT> = _Transform<DataT, DataT>, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>>(key: string, handler: (ctx?: DtwoApp) => Promise<DataT>, options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'>): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null>;
+export declare function useDtwoData<DataT = any>(key: string): {
+    data: Ref<DataT | null>;
+};
 export declare function refreshDtwoData(keys?: string | string[]): Promise<void>;
 export declare function clearDtwoData(keys?: string | string[] | ((key: string) => boolean)): void;
 export {};

package/dist/app/composables/asyncData.mjs

@@ -1,4 +1,4 @@
-import { onBeforeMount, onServerPrefetch, onUnmounted, ref, getCurrentInstance, watch, unref } from "kdu";
+import { onBeforeMount, onServerPrefetch, onUnmounted, ref, getCurrentInstance, watch, unref, toRef } from "kdu";
 import { useDtwoApp } from "../dtwo.mjs";
 import { createError } from "./error.mjs";
 const getDefault = () => null;
@@ -84,7 +84,11 @@ export function useAsyncData(...args) {
   const fetchOnServer = options.server !== false && dtwo.payload.serverRendered;
   if (process.server && fetchOnServer && options.immediate) {
     const promise = initialFetch();
-    onServerPrefetch(() => promise);
+    if (getCurrentInstance()) {
+      onServerPrefetch(() => promise);
+    } else {
+      dtwo.hook("app:created", () => promise);
+    }
   }
   if (process.client) {
     const instance = getCurrentInstance();
@@ -132,6 +136,15 @@ export function useLazyAsyncData(...args) {
   const [key, handler, options] = args;
   return useAsyncData(key, handler, { ...options, lazy: true }, null);
 }
+export function useDtwoData(key) {
+  const dtwo = useDtwoApp();
+  if (!(key in dtwo.payload.data)) {
+    dtwo.payload.data[key] = null;
+  }
+  return {
+    data: toRef(dtwo.payload.data, key)
+  };
+}
 export async function refreshDtwoData(keys) {
   if (process.server) {
     return Promise.resolve();

package/dist/app/composables/component.d.ts

@@ -1,3 +1,3 @@
-import { defineComponent } from 'kdu';
+import type { defineComponent } from 'kdu';
 export declare const DtwoComponentIndicator = "__dtwo_component";
 export declare const defineDtwoComponent: typeof defineComponent;

package/dist/app/composables/cookie.d.ts

@@ -1,12 +1,13 @@
-import { Ref } from 'kdu';
-import { CookieParseOptions, CookieSerializeOptions } from 'cookie-es';
+import type { Ref } from 'kdu';
+import type { CookieParseOptions, CookieSerializeOptions } from 'cookie-es';
 type _CookieOptions = Omit<CookieSerializeOptions & CookieParseOptions, 'decode' | 'encode'>;
 export interface CookieOptions<T = any> extends _CookieOptions {
     decode?(value: string): T;
     encode?(value: T): string;
     default?: () => T | Ref<T>;
+    watch?: boolean | 'shallow';
 }
-export interface CookieRef<T> extends Ref<T | null> {
+export interface CookieRef<T> extends Ref<T> {
 }
-export declare function useCookie<T = string>(name: string, _opts?: CookieOptions<T>): CookieRef<T>;
+export declare function useCookie<T = string | null>(name: string, _opts?: CookieOptions<T>): CookieRef<T>;
 export {};

package/dist/app/composables/cookie.mjs

@@ -7,6 +7,7 @@ import { useDtwoApp } from "../dtwo.mjs";
 import { useRequestEvent } from "./ssr.mjs";
 const CookieDefaults = {
   path: "/",
+  watch: true,
   decode: (val) => destr(decodeURIComponent(val)),
   encode: (val) => encodeURIComponent(typeof val === "string" ? val : JSON.stringify(val))
 };
@@ -15,9 +16,14 @@ export function useCookie(name, _opts) {
   const cookies = readRawCookies(opts) || {};
   const cookie = ref(cookies[name] ?? opts.default?.());
   if (process.client) {
-    watch(cookie, () => {
+    const callback = () => {
       writeClientCookie(name, cookie.value, opts);
-    });
+    };
+    if (opts.watch) {
+      watch(cookie, callback, { deep: opts.watch !== "shallow" });
+    } else {
+      callback();
+    }
   } else if (process.server) {
     const dtwoApp = useDtwoApp();
     const writeFinalCookieValue = () => {

package/dist/app/composables/error.d.ts

@@ -1,4 +1,4 @@
-import { H3Error } from 'h3';
+import type { H3Error } from 'h3';
 export declare const useError: () => import("kdu").Ref<Error | {
     url: string;
     statusCode: string;

package/dist/app/composables/fetch.d.ts

@@ -1,15 +1,15 @@
-import type { FetchError, FetchOptions } from 'ofetch';
-import type { TypedInternalResponse, HoleFetchRequest } from 'holepack';
-import { Ref } from 'kdu';
+import type { FetchError } from 'ofetch';
+import type { TypedInternalResponse, HoleFetchOptions, HoleFetchRequest } from 'holepack';
+import type { Ref } from 'kdu';
 import type { AsyncDataOptions, _Transform, KeyOfRes, AsyncData, PickFrom } from './asyncData';
 export type FetchResult<ReqT extends HoleFetchRequest> = TypedInternalResponse<ReqT, unknown>;
 type ComputedOptions<T extends Record<string, any>> = {
     [K in keyof T]: T[K] extends Function ? T[K] : T[K] extends Record<string, any> ? ComputedOptions<T[K]> | Ref<T[K]> | T[K] : Ref<T[K]> | T[K];
 };
-type ComputedFetchOptions = ComputedOptions<FetchOptions>;
-export interface UseFetchOptions<DataT, Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>> extends AsyncDataOptions<DataT, Transform, PickKeys>, ComputedFetchOptions {
+type ComputedFetchOptions<R extends HoleFetchRequest> = ComputedOptions<HoleFetchOptions<R>>;
+export interface UseFetchOptions<DataT, Transform extends _Transform<DataT, any> = _Transform<DataT, DataT>, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>, R extends HoleFetchRequest = string & {}> extends AsyncDataOptions<DataT, Transform, PickKeys>, ComputedFetchOptions<R> {
     key?: string;
 }
-export declare function useFetch<ResT = void, ErrorT = FetchError, ReqT extends HoleFetchRequest = HoleFetchRequest, _ResT = ResT extends void ? FetchResult<ReqT> : ResT, Transform extends (res: _ResT) => any = (res: _ResT) => _ResT, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>>(request: Ref<ReqT> | ReqT | (() => ReqT), opts?: UseFetchOptions<_ResT, Transform, PickKeys>): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null>;
+export declare function useFetch<ResT = void, ErrorT = FetchError, ReqT extends HoleFetchRequest = HoleFetchRequest, _ResT = ResT extends void ? FetchResult<ReqT> : ResT, Transform extends (res: _ResT) => any = (res: _ResT) => _ResT, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>>(request: Ref<ReqT> | ReqT | (() => ReqT), opts?: UseFetchOptions<_ResT, Transform, PickKeys, ReqT>): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null>;
 export declare function useLazyFetch<ResT = void, ErrorT = FetchError, ReqT extends HoleFetchRequest = HoleFetchRequest, _ResT = ResT extends void ? FetchResult<ReqT> : ResT, Transform extends (res: _ResT) => any = (res: _ResT) => _ResT, PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>>(request: Ref<ReqT> | ReqT | (() => ReqT), opts?: Omit<UseFetchOptions<_ResT, Transform, PickKeys>, 'lazy'>): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null>;
 export {};

package/dist/app/composables/fetch.mjs

@@ -3,7 +3,7 @@ import { hash } from "ohash";
 import { useAsyncData } from "./asyncData.mjs";
 export function useFetch(request, arg1, arg2) {
   const [opts = {}, autoKey] = typeof arg1 === "string" ? [{}, arg1] : [arg1, arg2];
-  const _key = opts.key || hash([autoKey, unref(opts.baseURL), typeof request === "string" ? request : "", unref(opts.params)]);
+  const _key = opts.key || hash([autoKey, unref(opts.baseURL), typeof request === "string" ? request : "", unref(opts.params || opts.query)]);
   if (!_key || typeof _key !== "string") {
     throw new TypeError("[dtwo] [useFetch] key must be a string: " + _key);
   }
@@ -61,6 +61,7 @@ export function useLazyFetch(request, arg1, arg2) {
       ...opts,
       lazy: true
     },
+    // @ts-ignore
     autoKey
   );
 }