⬅️ Back to Table of Contents

📄 createReusableTemplate

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	7
📐 Interfaces	1
📑 Type Aliases	5

📚 Table of Contents

• Imports
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/createReusableTemplate/index.ts

📦 Imports

Name	Source
ComponentObjectPropsOptions	vue
DefineComponent	vue
Slot	vue
camelize	@vueuse/shared
makeDestructurable	@vueuse/shared
defineComponent	vue
shallowRef	vue

---

Functions

createReusableTemplate(options: CreateReusableTemplateOptions<Bindings>): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps>

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

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * 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__
 */

Calls:

• shallowRef (from vue)
• defineComponent (from vue)
• render.value
• keysToCamelKebabCase
• makeDestructurable (from @vueuse/shared)

Code

export function createReusableTemplate<
  Bindings extends Record<string, any>,
  MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals = Record<'default', undefined>,
>(
  options: CreateReusableTemplateOptions<Bindings> = {},
): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps> {
  const {
    inheritAttrs = true,
    name = 'ReusableTemplate',
  } = options

  const render = shallowRef<Slot | undefined>()

  const define = defineComponent({
    name: `${name}.define`,
    setup(_, { slots }) {
      return () => {
        render.value = slots.default
      }
    },
  }) as unknown as DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>

  const reuse = defineComponent({
    inheritAttrs,
    name: `${name}.reuse`,
    props: options.props,
    setup(props, { attrs, slots }) {
      return () => {
        if (!render.value && process.env.NODE_ENV !== 'production')
          throw new Error('[VueUse] Failed to find the definition of reusable template')
        const vnode = render.value?.({
          ...(options.props == null
            ? keysToCamelKebabCase(attrs)
            : props),
          $slots: slots,
        })

        return (inheritAttrs && vnode?.length === 1) ? vnode[0] : vnode
      }
    },
  }) as unknown as ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>

  return makeDestructurable(
    { define, reuse },
    [define, reuse],
  ) as ReusableTemplatePair<Bindings, MapSlotNameToSlotProps>
}

keysToCamelKebabCase(obj: Record<string, any>): Record<string, any>

Parameters:

• obj Record<string, any>

Returns: Record<string, any>

Calls:

• camelize (from @vueuse/shared)

Code

function keysToCamelKebabCase(obj: Record<string, any>) {
  const newObj: typeof obj = {}
  for (const key in obj)
    newObj[camelize(key)] = obj[key]
  return newObj
}

---

Interfaces

CreateReusableTemplateOptions<Props extends Record<string, any>>

Interface Code

export interface CreateReusableTemplateOptions<Props extends Record<string, any>> {
  /**
   * Inherit attrs from reuse component.
   *
   * @default true
   */
  inheritAttrs?: boolean
  /**
   * Name for the reuse component (useful for devtools).
   */
  name?: string
  /**
   * Props definition for reuse component.
   */
  props?: ComponentObjectPropsOptions<Props>
}

Properties

Name	Type	Optional	Description
inheritAttrs	boolean	✓	not shown
name	string	✓	not shown
props	ComponentObjectPropsOptions<Props>	✓	not shown

---

Type Aliases

ObjectLiteralWithPotentialObjectLiterals

type ObjectLiteralWithPotentialObjectLiterals = Record<string, Record<string, any> | undefined>;

GenerateSlotsFromSlotMap<T extends ObjectLiteralWithPotentialObjectLiterals>

type GenerateSlotsFromSlotMap<T extends ObjectLiteralWithPotentialObjectLiterals> = {
  [K in keyof T]: Slot<T[K]>
};

DefineTemplateComponent<Bindings extends Record<string, any>, MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals>

type DefineTemplateComponent<Bindings extends Record<string, any>, MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals> = DefineComponent & {
  new(): { $slots: { default: (_: Bindings & { $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps> }) => any } }
};

ReuseTemplateComponent<Bindings extends Record<string, any>, MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals>

type ReuseTemplateComponent<Bindings extends Record<string, any>, MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals> = DefineComponent<Bindings> & {
  new(): { $slots: GenerateSlotsFromSlotMap<MapSlotNameToSlotProps> }
};

ReusableTemplatePair<Bindings extends Record<string, any>, MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals>

type ReusableTemplatePair<Bindings extends Record<string, any>, MapSlotNameToSlotProps extends ObjectLiteralWithPotentialObjectLiterals> = [
  DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>,
  ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>,
] & {
  define: DefineTemplateComponent<Bindings, MapSlotNameToSlotProps>
  reuse: ReuseTemplateComponent<Bindings, MapSlotNameToSlotProps>
};

---

Generated by Syntax Scribe