Valkit

Valkit is a lightweight utility library designed to simplify value processing.

Supports React(16+), Vue(3+), and TypeScript.

Examples

In Vue Template's for loop, it's often necessary to process some values of item, for example:

<template><divv-for="item in items" :key="item.id"><imgv-if="item.cover || item.image" :src="item.cover || item.image" /><div>{{ item.name }}</div></div></template>

Valkit helps reuse value-processing code:

<template><divv-for="item in items" :key="item.id"><Valkit:value="item" :resolver="(item) => item.cover || item.image"><template#default="{ value: cover }"><imgv-if="cover" :src="cover" /><div>{{ item.name }}</div></template></Valkit></div></template>

Usage

Core

• valkit(value, resolver)
• valkitResolve(value, resolver)
• valkitIs(value, predicate)
• valkitSafe(value, fallback)

import{valkit,valkitResolve,valkitIs,valkitSafe}from'valkit'valkit(1,(v)=>v)// 1valkit(()=>1,(v)=>v)// 1valkitIs(1,(v)=>v===1)// truevalkitSafe(1)// 1valkitSafe(()=>{thrownewError('test')},1)// 1

React

• Valkit
• ValkitResolve

import{Valkit}from'valkit/react'constComponent=()=><Valkitvalue={1}resolver={(v)=>v}render={(v)=><div>{v}</div>}/>

Vue

• Valkit
• ValkitResolve

<scriptsetup>import{Valkit}from'valkit/vue'</script><template><Valkit:value="1" :resolver="(v) => v"><template#default="{ value }"><div>{{ value }}</div></template></Valkit></template>