Skip to content

createMeta

Create Setter and Getter for property without conflict (based on Symbol). It is commonly used to attach non-conflicting properties to complex objects.

Demo

vue
<script setup lang="ts">
import { createMeta } from '.'

// assume this is a very complex object
const obj = ref({ hello: 'world' })

const [set, get] = createMeta<'set!' | 'not yet'>()
set(obj.value, 'not yet')

const val = computed(() => get(obj.value))
const hasSet = computed(() => val.value === 'set!')
</script>

<template>
  <div>
    <button btn @click="set(obj, hasSet ? 'not yet' : 'set!')">
      {{ hasSet ? 'Reverse' : 'Set' }}
    </button>

    <p>{{ val }}</p>
  </div>
</template>

not yet

Type Declarations

Details
ts
/**
 * Create Setter and Getter for property without conflict (based on Symbol).
 *
 * It is useful when you want to add properties to a complex object.
 *
 * @example
 * ```ts
 * const [set, get] = createMeta<{one: number}>()
 *
 * const ent = new Entity() // Assume a complex object provided by other library.
 * set(ent, { one: 1 })
 * get(ent) // = { one: 1 }
 *
 * // In js, you can provide a example object to specify the type of the meta data.
 *
 * // createMeta<{ one: number }>()
 * createMeta({ one: 1 })
 * ```
 *
 * @see {@link https://s3xysteak.github.io/fnclip/functions/object/createMeta/}
 */
export declare function createMeta<Meta = any>(__for_type_infer?: Meta, META_KEY?: PropertyKey): readonly [(target: any, meta: Meta) => void, (target: any) => Meta | undefined];

Source

SourceDemo