Skip to content

Instantly share code, notes, and snippets.

View composite's full-sized avatar
🤡
This is the face. 이것은 면상이다.

Ukjin Yang composite

🤡
This is the face. 이것은 면상이다.
View GitHub Profile
@composite
composite / use-clock.test.ts
Created January 20, 2026 01:25
useClock* - fires every, even of your time react hook, no dependencies required other than react, requires react 18 or later. AI Generated. MIT License.
import { useEffect, act } from 'react';
import { createRoot } from 'react-dom/client';
import { afterEach, describe, expect, it, vi } from 'vitest';
interface TestClockProps {
target?: number | number[];
onChange: (value: Date) => void;
}
type UseClockSecond = (target?: number | number[]) => Date;
@composite
composite / hono-vite-node-server-build-plugin.ts
Created January 8, 2026 12:42
Hono + Vite server with graceful scheduler start and stop integration
import type { Plugin } from 'vite';
import type { NodeBuildOptions } from '@hono/vite-build/node';
import buildPlugin from '@hono/vite-build';
const nodeBuildPlugin = (pluginOptions?: NodeBuildOptions): Plugin => {
const port = pluginOptions?.port ?? 3000;
return {
...buildPlugin({
...{
entryContentBeforeHooks: [
@composite
composite / bree.child.ts
Created January 8, 2026 11:45
node.js `Worker` with `.ts` in dev, real life usage with Bree, `?modulePath` plugin for Vite and howto... you can make all for one!
import { parentPort } from 'node:worker_threads';
const heavyTask = (): string => {
return "Task Completed in TypeScript! and it also works after built Javascript!";
};
parentPort?.postMessage(heavyTask());
@composite
composite / border-image-source.css
Last active December 17, 2025 14:08
Achieve border Gradation with border-image-source for tailwindcss 4, see live at https://play.tailwindcss.com/ecO7qn5v8C
@import "tailwindcss";
/* ============================================
Border Gradient Utilities for Tailwind CSS 4
============================================ */
/* 1. Linear Gradients - 8 Directions */
@utility border-linear-to-t {
--tw-border-gradient-position: to top;
border-image-source: linear-gradient(var(--tw-border-gradient-position), var(--tw-border-gradient-stops));
@composite
composite / docker-pull-and-restart.sh
Created July 3, 2025 07:35
Docker update and restart (currently not work I'll find why.)
#!/bin/bash
#set -ex
day=$(date '+%Y%m%d')
now=$(date '+%Y-%m-%d %H:%M:%S')
dir=$(dirname "$0")
out=$(sudo docker compose --project-directory "$dir" -f "$dir/docker-compose.yml" pull)
log="$dir/log/pull-$day.log"
mkdir -p $(dirname "$log")
@composite
composite / README.md
Last active January 8, 2026 11:49
A Vite plugin that directory and flat based router for React Router (Next.js style)

Vite Data Route plugin for ReactRouter v7

A powerful file-based routing plugin for React Router v7 that enables automatic route generation based on your file system structure, with full support for layouts, loaders, actions, and error boundaries.

Requirements

  • react-router 7.0.0 or higher
  • vite 6.0.0 or higher
  • glob package (dev dependency)
@composite
composite / backup-indexedb.js
Created May 8, 2025 01:59
Save whole code to snippet in devtools and run it. learn more about snippets in devtools: https://developer.chrome.com/docs/devtools/javascript/snippets
void (async () => {
const dbName = prompt("What's the name of the database to export?");
if (!dbName) return;
try {
const dbExists = await new Promise(resolve => {
const request = window.indexedDB.open(dbName);
request.onupgradeneeded = e => {
e.target.transaction.abort();
resolve(false);
};
@composite
composite / use-data-array.ts
Last active March 27, 2025 02:30
AI Generated react hooks
'use client';
import { useState, useCallback, useMemo, Dispatch, SetStateAction } from 'react';
export interface DataArray<R> {
data: R[] & { added: R[]; updated: R[]; removed: R[]; initial: R[] };
length: number;
isMutated: boolean;
isInsert: boolean;
isUpdate: boolean;
@composite
composite / plotly-lazy.ts
Created March 5, 2025 05:21
Plotly.js for React: Modern style instead of react-plotly.js, typescript and SSR friendly.
import { lazy, forwardRef, useEffect } from 'react';
export interface PlotlyProps extends HTMLAttributes<HTMLDivElement> {
data: Partial<Data>[];
layout?: Partial<Layout>;
config?: Partial<Config>;
}
export const Plotly = lazy(
() =>
@composite
composite / request-single-frame.ts
Created March 4, 2025 08:09
AI Generated utility functions - Typescript friendly, tested.
/**
* Definition of the animation frame callback function type
*/
type AnimationFrameCallback = (time: number) => void;
/**
* Definition of the cancel function type
*/
type CancelFunction = () => void;