Quick Start Guide

This guide walks you through utilizing the core features of @doyzfin/common in under five minutes.

1. Class Name Merging in Components

Combine CSS styles reactively inside Svelte or React component rendering. The cn merger handles conflict overrides automatically:

<!-- ExampleSvelteComponent.svelte -->
<script lang="ts">
	import { cn } from '@doyzfin/common';
	let active = true;
</script>

<div
	class={cn(
		'px-4 py-2 border border-border text-muted-foreground transition',
		active && 'bg-primary text-white border-primary'
	)}
>
	Utility class block
</div>

2. Secure Client-Only API Checks

Use isBrowser and isServer to prevent script execution exceptions on Edge servers or serverless routing environments:

import { isBrowser } from '@doyzfin/common';

export const load = async () => {
	if (isBrowser()) {
		// Only executed on the client browser
		const savedTheme = localStorage.getItem('theme');
		return { theme: savedTheme };
	}

	return { theme: 'dark' };
};

3. Safe JSON Parsing

Parse string parameters cleanly without wrapping try/catch blocks:

import { tryParseJson } from '@doyzfin/common';

const payload = '{"status": "active", "code": 200}';
const parsed = tryParseJson<{ status: string; code: number }>(payload);

if (parsed) {
	console.log('API Status Code:', parsed.code);
}