devskill 2.0.2

package/skills/vueuse-functions/references/createInjectionState.md

@@ -0,0 +1,215 @@
+---
+category: State
+---
+
+# createInjectionState
+
+Create global state that can be injected into components.
+
+## Usage
+
+```ts twoslash include useCounterStore
+// useCounterStore.ts
+import { createInjectionState } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
+  // state
+  const count = shallowRef(initialValue)
+
+  // getters
+  const double = computed(() => count.value * 2)
+
+  // actions
+  function increment() {
+    count.value++
+  }
+
+  return { count, double, increment }
+})
+
+export { useProvideCounterStore }
+
+// If you want to hide `useCounterStore` and wrap it in default value logic or throw error logic, please don't export `useCounterStore`
+export { useCounterStore }
+
+export function useCounterStoreWithDefaultValue() {
+  return useCounterStore() ?? {
+    count: shallowRef(0),
+    double: shallowRef(0),
+    increment: () => {},
+  }
+}
+
+export function useCounterStoreOrThrow() {
+  const counterStore = useCounterStore()
+  if (counterStore == null)
+    throw new Error('Please call `useProvideCounterStore` on the appropriate parent component')
+  return counterStore
+}
+```
+
+```vue
+<!-- RootComponent.vue -->
+<script setup lang="ts">
+// @filename: useCounterStore.ts
+// @include: useCounterStore
+// ---cut---
+import { useProvideCounterStore } from './useCounterStore'
+
+useProvideCounterStore(0)
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+```
+
+```vue
+<!-- CountComponent.vue -->
+<script setup lang="ts">
+// @filename: useCounterStore.ts
+// @include: useCounterStore
+// ---cut---
+import { useCounterStore } from './useCounterStore'
+
+// use non-null assertion operator to ignore the case that store is not provided.
+const { count, double } = useCounterStore()!
+// if you want to allow component to working without providing store, you can use follow code instead:
+// const { count, double } = useCounterStore() ?? { count: shallowRef(0), double: shallowRef(0) }
+// also, you can use another hook to provide default value
+// const { count, double } = useCounterStoreWithDefaultValue()
+// or throw error
+// const { count, double } = useCounterStoreOrThrow()
+</script>
+
+<template>
+  <ul>
+    <li>
+      count: {{ count }}
+    </li>
+    <li>
+      double: {{ double }}
+    </li>
+  </ul>
+</template>
+```
+
+```vue
+<!-- ButtonComponent.vue -->
+<script setup lang="ts">
+// @filename: useCounterStore.ts
+// @include: useCounterStore
+// ---cut---
+import { useCounterStore } from './useCounterStore'
+
+// use non-null assertion operator to ignore the case that store is not provided.
+const { increment } = useCounterStore()!
+</script>
+
+<template>
+  <button @click="increment">
+    +
+  </button>
+</template>
+```
+
+## Provide a custom InjectionKey
+
+```ts
+// useCounterStore.ts
+import { createInjectionState } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+// custom injectionKey
+const CounterStoreKey = 'counter-store'
+
+const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
+  // state
+  const count = shallowRef(initialValue)
+
+  // getters
+  const double = computed(() => count.value * 2)
+
+  // actions
+  function increment() {
+    count.value++
+  }
+
+  return { count, double, increment }
+}, { injectionKey: CounterStoreKey })
+```
+
+## Provide a custom default value
+
+```ts
+// useCounterStore.ts
+import { createInjectionState } from '@vueuse/core'
+import { computed, shallowRef } from 'vue'
+
+const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
+  // state
+  const count = shallowRef(initialValue)
+
+  // getters
+  const double = computed(() => count.value * 2)
+
+  // actions
+  function increment() {
+    count.value++
+  }
+
+  return { count, double, increment }
+}, { defaultValue: 0 })
+```
+
+## Type Declarations
+
+```ts
+export type CreateInjectionStateReturn<
+  Arguments extends Array<any>,
+  Return,
+> = Readonly<
+  [
+    /**
+     * Call this function in a provider component to create and provide the state.
+     *
+     * @param args Arguments passed to the composable
+     * @returns The state returned by the composable
+     */
+    useProvidingState: (...args: Arguments) => Return,
+    /**
+     * Call this function in a consumer component to inject the state.
+     *
+     * @returns The injected state, or `undefined` if not provided and no default value was set.
+     */
+    useInjectedState: () => Return | undefined,
+  ]
+>
+export interface CreateInjectionStateOptions<Return> {
+  /**
+   * Custom injectionKey for InjectionState
+   */
+  injectionKey?: string | InjectionKey<Return>
+  /**
+   * Default value for the InjectionState
+   */
+  defaultValue?: Return
+}
+/**
+ * Create global state that can be injected into components.
+ *
+ * @see https://vueuse.org/createInjectionState
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createInjectionState<
+  Arguments extends Array<any>,
+  Return,
+>(
+  composable: (...args: Arguments) => Return,
+  options?: CreateInjectionStateOptions<Return>,
+): CreateInjectionStateReturn<Arguments, Return>
+```

package/skills/vueuse-functions/references/createProjection.md

@@ -0,0 +1,31 @@
+---
+category: '@Math'
+related: useProjection, createGenericProjection
+---
+
+# createProjection
+
+Reactive numeric projection from one domain to another.
+
+## Usage
+
+```ts
+import { createProjection } from '@vueuse/math'
+
+const useProjector = createProjection([0, 10], [0, 100])
+const input = ref(0)
+const projected = useProjector(input) // projected.value === 0
+
+input.value = 5 // projected.value === 50
+input.value = 10 // projected.value === 100
+```
+
+## Type Declarations
+
+```ts
+export declare function createProjection(
+  fromDomain: MaybeRefOrGetter<readonly [number, number]>,
+  toDomain: MaybeRefOrGetter<readonly [number, number]>,
+  projector?: ProjectorFunction<number, number>,
+): UseProjection<number, number>
+```

package/skills/vueuse-functions/references/createRef.md

@@ -0,0 +1,54 @@
+---
+category: Reactivity
+---
+
+# createRef
+
+Returns a `deepRef` or `shallowRef` depending on the `deep` param.
+
+## Usage
+
+```ts
+import { createRef } from '@vueuse/core'
+import { isShallow, ref } from 'vue'
+
+const initialData = 1
+
+const shallowData = createRef(initialData)
+const deepData = createRef(initialData, true)
+
+isShallow(shallowData) // true
+isShallow(deepData) // false
+```
+
+## Type Declarations
+
+```ts
+export type CreateRefReturn<
+  T = any,
+  D extends boolean = false,
+> = ShallowOrDeepRef<T, D>
+export type ShallowOrDeepRef<
+  T = any,
+  D extends boolean = false,
+> = D extends true ? Ref<T> : ShallowRef<T>
+/**
+ * Returns a `deepRef` or `shallowRef` depending on the `deep` param.
+ *
+ * @example createRef(1) // ShallowRef<number>
+ * @example createRef(1, false) // ShallowRef<number>
+ * @example createRef(1, true) // Ref<number>
+ * @example createRef("string") // ShallowRef<string>
+ * @example createRef<"A"|"B">("A", true) // Ref<"A"|"B">
+ *
+ * @param value
+ * @param deep
+ * @returns the `deepRef` or `shallowRef`
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createRef<T = any, D extends boolean = false>(
+  value: T,
+  deep?: D,
+): CreateRefReturn<T, D>
+```

package/skills/vueuse-functions/references/createReusableTemplate.md

@@ -0,0 +1,357 @@
+---
+category: Component
+outline: deep
+---
+
+# createReusableTemplate
+
+Define and reuse template inside the component scope.
+
+## Motivation
+
+It's common to have the need to reuse some part of the template. For example:
+
+```vue
+<template>
+  <dialog v-if="showInDialog">
+    <!-- something complex -->
+  </dialog>
+  <div v-else>
+    <!-- something complex -->
+  </div>
+</template>
+```
+
+We'd like to reuse our code as much as possible. So normally we might need to extract those duplicated parts into a component. However, in a separated component you lose the ability to access the local bindings. Defining props and emits for them can be tedious sometimes.
+
+So this function is made to provide a way for defining and reusing templates inside the component scope.
+
+## Usage
+
+In the previous example, we could refactor it to:
+
+```vue
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate>
+    <!-- something complex -->
+  </DefineTemplate>
+
+  <dialog v-if="showInDialog">
+    <ReuseTemplate />
+  </dialog>
+  <div v-else>
+    <ReuseTemplate />
+  </div>
+</template>
+```
+
+- `<DefineTemplate>` will register the template and renders nothing.
+- `<ReuseTemplate>` will render the template provided by `<DefineTemplate>`.
+- `<DefineTemplate>` must be used before `<ReuseTemplate>`.
+
+> **Note**: It's recommended to extract as separate components whenever possible. Abusing this function might lead to bad practices for your codebase.
+
+### Options API
+
+When using with [Options API](https://vuejs.org/guide/introduction.html#api-styles), you will need to define `createReusableTemplate` outside of the component setup and pass to the `components` option in order to use them in the template.
+
+```vue
+<script>
+import { createReusableTemplate } from '@vueuse/core'
+import { defineComponent } from 'vue'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+
+export default defineComponent({
+  components: {
+    DefineTemplate,
+    ReuseTemplate,
+  },
+  setup() {
+    // ...
+  },
+})
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ data, msg, anything }">
+    <div>{{ data }} passed from usage</div>
+  </DefineTemplate>
+
+  <ReuseTemplate :data="data" msg="The first usage" />
+</template>
+```
+
+### Passing Data
+
+You can also pass data to the template using slots:
+
+- Use `v-slot="..."` to access the data on `<DefineTemplate>`
+- Directly bind the data on `<ReuseTemplate>` to pass them to the template
+
+```vue
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ data, msg, anything }">
+    <div>{{ data }} passed from usage</div>
+  </DefineTemplate>
+
+  <ReuseTemplate :data="data" msg="The first usage" />
+  <ReuseTemplate :data="anotherData" msg="The second usage" />
+  <ReuseTemplate v-bind="{ data: something, msg: 'The third' }" />
+</template>
+```
+
+### TypeScript Support
+
+`createReusableTemplate` accepts a generic type to provide type support for the data passed to the template:
+
+```vue
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+
+// Comes with pair of `DefineTemplate` and `ReuseTemplate`
+const [DefineFoo, ReuseFoo] = createReusableTemplate<{ msg: string }>()
+
+// You can create multiple reusable templates
+const [DefineBar, ReuseBar] = createReusableTemplate<{ items: string[] }>()
+</script>
+
+<template>
+  <DefineFoo v-slot="{ msg }">
+    <!-- `msg` is typed as `string` -->
+    <div>Hello {{ msg.toUpperCase() }}</div>
+  </DefineFoo>
+
+  <ReuseFoo msg="World" />
+
+  <!-- @ts-expect-error Type Error! -->
+  <ReuseFoo :msg="1" />
+</template>
+```
+
+Optionally, if you are not a fan of array destructuring, the following usages are also legal:
+
+```vue
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+
+const { define: DefineFoo, reuse: ReuseFoo } = createReusableTemplate<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <DefineFoo v-slot="{ msg }">
+    <div>Hello {{ msg.toUpperCase() }}</div>
+  </DefineFoo>
+
+  <ReuseFoo msg="World" />
+</template>
+```
+
+```vue
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+
+const TemplateFoo = createReusableTemplate<{ msg: string }>()
+</script>
+
+<template>
+  <TemplateFoo.define v-slot="{ msg }">
+    <div>Hello {{ msg.toUpperCase() }}</div>
+  </TemplateFoo.define>
+
+  <TemplateFoo.reuse msg="World" />
+</template>
+```
+
+::: warning
+Passing boolean props without `v-bind` is not supported. See the [Caveats](#boolean-props) section for more details.
+:::
+
+### Props and Attributes
+
+By default, all props and attributes passed to `<ReuseTemplate>` will be passed to the template. If you don't want certain props to be passed to the DOM, you need to define the runtime props:
+
+```ts
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
+  props: {
+    msg: String,
+    enable: Boolean,
+  }
+})
+```
+
+If you don't want to pass any props to the template, you can pass the `inheritAttrs` option:
+
+```ts
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate({
+  inheritAttrs: false,
+})
+```
+
+### Passing Slots
+
+It's also possible to pass slots back from `<ReuseTemplate>`. You can access the slots on `<DefineTemplate>` from `$slots`:
+
+```vue
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ $slots, otherProp }">
+    <div some-layout>
+      <!-- To render the slot -->
+      <component :is="$slots.default" />
+    </div>
+  </DefineTemplate>
+
+  <ReuseTemplate>
+    <div>Some content</div>
+  </ReuseTemplate>
+  <ReuseTemplate>
+    <div>Another content</div>
+  </ReuseTemplate>
+</template>
+```
+
+## Caveats
+
+### Boolean props
+
+As opposed to Vue's behavior, props defined as `boolean` that were passed without `v-bind` or absent will be resolved into an empty string or `undefined` respectively:
+
+```vue
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
+  value?: boolean
+}>()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ value }">
+    {{ typeof value }}: {{ value }}
+  </DefineTemplate>
+
+  <ReuseTemplate :value="true" />
+  <!-- boolean: true -->
+
+  <ReuseTemplate :value="false" />
+  <!-- boolean: false -->
+
+  <ReuseTemplate value />
+  <!-- string: -->
+
+  <ReuseTemplate />
+  <!-- undefined: -->
+</template>
+```
+
+## References
+
+This function is migrated from [vue-reuse-template](https://github.com/antfu/vue-reuse-template).
+
+Existing Vue discussions/issues about reusing template:
+
+- [Discussion on Reusing Templates](https://github.com/vuejs/core/discussions/6898)
+
+Alternative Approaches:
+
+- [Vue Macros - `namedTemplate`](https://vue-macros.sxzz.moe/features/named-template.html)
+- [`unplugin-vue-reuse-template`](https://github.com/liulinboyi/unplugin-vue-reuse-template)
+
+## Type Declarations
+
+```ts
+type ObjectLiteralWithPotentialObjectLiterals = Record<
+  string,
+  Record<string, any> | undefined
+>
+type GenerateSlotsFromSlotMap<
+  T extends ObjectLiteralWithPotentialObjectLiterals,
+> = {
+  [K in keyof T]: Slot<T[K]>
+}
+export type DefineTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent & {
+  new (): {
+    $slots: {
+      default: (
+        _: Bindings & {
+          $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps>
+        },
+      ) => any
+    }
+  }
+}
+export type ReuseTemplateComponent<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = DefineComponent<Bindings> & {
+  new (): {
+    $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps>
+  }
+}
+export type ReusableTemplatePair<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals,
+> = [
+  DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+  ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>,
+] & {
+  define: DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
+  reuse: ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
+}
+export interface CreateReusableTemplateOptions<
+  Props extends Record<string, any>,
+> {
+  /**
+   * Inherit attrs from reuse component.
+   *
+   * @default true
+   */
+  inheritAttrs?: boolean
+  /**
+   * Props definition for reuse component.
+   */
+  props?: ComponentObjectPropsOptions<Props>
+}
+/**
+ * This function creates `define` and `reuse` components in pair,
+ * It also allow to pass a generic to bind with type.
+ *
+ * @see https://vueuse.org/createReusableTemplate
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createReusableTemplate<
+  Bindings extends Record<string, any>,
+  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals =
+    Record<"default", undefined>,
+>(
+  options?: CreateReusableTemplateOptions<Bindings>,
+): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps>
+```

package/skills/vueuse-functions/references/createSharedComposable.md

@@ -0,0 +1,42 @@
+---
+category: State
+related: createGlobalState
+---
+
+# createSharedComposable
+
+Make a composable function usable with multiple Vue instances.
+
+> [!WARNING]
+> When used in a **SSR** environment, `createSharedComposable` will **automatically fallback** to a non-shared version.
+> This means every call will create a fresh instance in SSR to avoid [cross-request state pollution](https://vuejs.org/guide/scaling-up/ssr.html#cross-request-state-pollution).
+
+## Usage
+
+```ts
+import { createSharedComposable, useMouse } from '@vueuse/core'
+
+const useSharedMouse = createSharedComposable(useMouse)
+
+// CompA.vue
+const { x, y } = useSharedMouse()
+
+// CompB.vue - will reuse the previous state and no new event listeners will be registered
+const { x, y } = useSharedMouse()
+```
+
+## Type Declarations
+
+```ts
+export type SharedComposableReturn<T extends AnyFn = AnyFn> = T
+/**
+ * Make a composable function usable with multiple Vue instances.
+ *
+ * @see https://vueuse.org/createSharedComposable
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createSharedComposable<Fn extends AnyFn>(
+  composable: Fn,
+): SharedComposableReturn<Fn>
+```