⬅️ Back to Table of Contents

📄 createTemplatePromise

📊 Analysis Summary

Metric	Count
🔧 Functions	6
📦 Imports	9
⚡ Async/Await Patterns	2
📐 Interfaces	2
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Async/Await Patterns
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/createTemplatePromise/index.ts

📦 Imports

Name	Source
DefineComponent	vue
Ref	vue
TransitionGroupProps	vue
deepRef	vue
defineComponent	vue
Fragment	vue
h	vue
shallowReactive	vue
TransitionGroup	vue

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
promise-chain	createTemplatePromise	none	new Promise((_resolve, _reject) => { props.resolve = (v) => { props.i...
promise-chain	create	none	new Promise((_resolve, _reject) => { props.resolve = (v) => { props.i...

---

Functions

createTemplatePromise(options: TemplatePromiseOptions): TemplatePromise<Return, Args>

Creates a template promise component.

See: https://vueuse.org/createTemplatePromise

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Creates a template promise component.
 *
 * @see https://vueuse.org/createTemplatePromise
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• deepRef (from vue)
• shallowReactive (from vue)
• instances.value.push
• new Promise<Return>((_resolve, _reject) => { props.resolve = (v) => { props.isResolving = true return _resolve(v) } props.reject = _reject }) .finally
• _resolve
• instances.value.indexOf
• instances.value.splice
• create
• defineComponent (from vue)
• instances.value.map
• h (from vue)
• slots.default

Internal Comments:

// @ts-expect-error There's a breaking type change in Vue 3.3 <https://github.com/vuejs/core/pull/7963> (x4)

Code

export function createTemplatePromise<Return, Args extends any[] = []>(
  options: TemplatePromiseOptions = {},
): TemplatePromise<Return, Args> {
  let index = 0
  const instances = deepRef([]) as Ref<TemplatePromiseProps<Return, Args>[]>

  function create(...args: Args) {
    const props = shallowReactive({
      key: index++,
      args,
      promise: undefined,
      resolve: () => {},
      reject: () => {},
      isResolving: false,
      options,
    }) as TemplatePromiseProps<Return, Args>

    instances.value.push(props)

    props.promise = new Promise<Return>((_resolve, _reject) => {
      props.resolve = (v) => {
        props.isResolving = true
        return _resolve(v)
      }
      props.reject = _reject
    })
      .finally(() => {
        props.promise = undefined
        const index = instances.value.indexOf(props)
        if (index !== -1)
          instances.value.splice(index, 1)
      })

    return props.promise
  }

  function start(...args: Args) {
    if (options.singleton && instances.value.length > 0)
      return instances.value[0].promise
    return create(...args)
  }

  const component = defineComponent((_, { slots }) => {
    const renderList = () => instances.value.map(props => h(Fragment, { key: props.key }, slots.default?.(props)))
    if (options.transition)
      return () => h(TransitionGroup, options.transition, renderList)
    return renderList
  })

  // @ts-expect-error There's a breaking type change in Vue 3.3 <https://github.com/vuejs/core/pull/7963>
  component.start = start

  return component as TemplatePromise<Return, Args>
}

Internal helpers

Declared inside another function in this file.

create(args: Args): Promise<Return>

Parameters:

• args Args

Returns: Promise<Return>

Calls:

• shallowReactive (from vue)
• instances.value.push
• new Promise<Return>((_resolve, _reject) => { props.resolve = (v) => { props.isResolving = true return _resolve(v) } props.reject = _reject }) .finally
• _resolve
• instances.value.indexOf
• instances.value.splice

Code

function create(...args: Args) {
    const props = shallowReactive({
      key: index++,
      args,
      promise: undefined,
      resolve: () => {},
      reject: () => {},
      isResolving: false,
      options,
    }) as TemplatePromiseProps<Return, Args>

    instances.value.push(props)

    props.promise = new Promise<Return>((_resolve, _reject) => {
      props.resolve = (v) => {
        props.isResolving = true
        return _resolve(v)
      }
      props.reject = _reject
    })
      .finally(() => {
        props.promise = undefined
        const index = instances.value.indexOf(props)
        if (index !== -1)
          instances.value.splice(index, 1)
      })

    return props.promise
  }

resolve(): void

Returns: void

Code

() => {}

reject(): void

Returns: void

Code

() => {}

start(args: Args): any

Parameters:

• args Args

Returns: any

Calls:

• create

Code

function start(...args: Args) {
    if (options.singleton && instances.value.length > 0)
      return instances.value[0].promise
    return create(...args)
  }

renderList(): any

Returns: any

Calls:

• instances.value.map

Code

() => instances.value.map(props => h(Fragment, { key: props.key }, slots.default?.(props)))

---

Interfaces

TemplatePromiseProps<Return, Args extends any[] = []>

Interface Code

export interface TemplatePromiseProps<Return, Args extends any[] = []> {
  /**
   * The promise instance.
   */
  promise: Promise<Return> | undefined
  /**
   * Resolve the promise.
   */
  resolve: (v: Return | Promise<Return>) => void
  /**
   * Reject the promise.
   */
  reject: (v: any) => void
  /**
   * Arguments passed to TemplatePromise.start()
   */
  args: Args
  /**
   * Indicates if the promise is resolving.
   * When passing another promise to `resolve`, this will be set to `true` until the promise is resolved.
   */
  isResolving: boolean
  /**
   * Options passed to createTemplatePromise()
   */
  options: TemplatePromiseOptions
  /**
   * Unique key for list rendering.
   */
  key: number
}

Properties

Name	Type	Optional	Description
promise	Promise<Return> \| undefined	✗	not shown
resolve	(v: Return \| Promise<Return>) => void	✗	not shown
reject	(v: any) => void	✗	not shown
args	Args	✗	not shown
isResolving	boolean	✗	not shown
options	TemplatePromiseOptions	✗	not shown
key	number	✗	not shown

TemplatePromiseOptions

Interface Code

export interface TemplatePromiseOptions {
  /**
   * Determines if the promise can be called only once at a time.
   *
   * @default false
   */
  singleton?: boolean

  /**
   * Transition props for the promise.
   */
  transition?: TransitionGroupProps
}

Properties

Name	Type	Optional	Description
singleton	boolean	✓	not shown
transition	TransitionGroupProps	✓	not shown

---

Type Aliases

TemplatePromise<Return, Args extends any[] = []>

type TemplatePromise<Return, Args extends any[] = []> = DefineComponent<object> & {
  new(): {
    $slots: {
      default: (_: TemplatePromiseProps<Return, Args>) => any
    }
  }
} & {
  start: (...args: Args) => Promise<Return>
};

---

Generated by Syntax Scribe