Valkit is a lightweight utility library designed to simplify value processing.
Supports React(16+), Vue(3+), and TypeScript.
In Vue Template's for loop, it's often necessary to process some values of item, for example:
<template>
<div v-for="item in items" :key="item.id">
<img v-if="item.cover || item.image" :src="item.cover || item.image" />
<div>{{ item.name }}</div>
</div>
</template>Valkit helps reuse value-processing code:
<template>
<div v-for="item in items" :key="item.id">
<Valkit :value="item" :resolver="(item) => item.cover || item.image">
<template #default="{ value: cover }">
<img v-if="cover" :src="cover" />
<div>{{ item.name }}</div>
</template>
</Valkit>
</div>
</template>valkit(value, resolver)valkitResolve(value, resolver)valkitIs(value, predicate)valkitSafe(value, fallback)
import { valkit, valkitResolve, valkitIs, valkitSafe } from 'valkit'
valkit(1, (v) => v) // 1
valkit(
() => 1,
(v) => v
) // 1
valkitIs(1, (v) => v === 1) // true
valkitSafe(1) // 1
valkitSafe(() => {
throw new Error('test')
}, 1) // 1ValkitValkitResolve
import { Valkit } from 'valkit/react'
const Component = () => <Valkit value={1} resolver={(v) => v} render={(v) => <div>{v}</div>} />ValkitValkitResolve
<script setup>
import { Valkit } from 'valkit/vue'
</script>
<template>
<Valkit :value="1" :resolver="(v) => v">
<template #default="{ value }">
<div>{{ value }}</div>
</template>
</Valkit>
</template>