Skip to content

Instantly share code, notes, and snippets.

View nitedani's full-sized avatar

nitedani

  • Hungary
  • 19:28 (UTC +02:00)
View GitHub Profile
@nitedani
nitedani / DateTime.tsx
Created May 13, 2024 16:59
DateTime component that fixes React SSR and Client rendering mismatch.
import React, { useId, useMemo } from "react";
export const DateTime = (
props: {
date?: Date | null;
format: (date: Date) => string;
placeholder?: string;
} & React.HTMLAttributes<"span">
) => {
const { format, date } = props;
@nitedani
nitedani / proxy.ts
Created February 17, 2024 09:33
Pure node simple websocket proxy
function setupWsProxy(server: http.Server) {
server.on('upgrade', (clientReq, clientSocket) => {
const req_ = http.request({
port: remotePort,
host: remoteHost,
headers: clientReq.headers
})
req_.end()
req_.on('upgrade', (remoteResponse, remoteSocket) => {
@nitedani
nitedani / useImageEditor.tsx
Created January 1, 2024 16:19
React + Fabric image editor hook.
import { useMantineTheme } from "@mantine/core";
import {
Canvas,
Group as FabricGroup,
Object as FabricObject,
Image,
Path,
PencilBrush,
Point,
} from "fabric";
@nitedani
nitedani / aroundMethodDecarator.ts
Last active November 14, 2023 12:33
aroundMethodDecarator
/* eslint-disable @typescript-eslint/no-explicit-any */
export const aroundMethodDecarator = (
decoratorFn: (
args: any[],
name: string | symbol,
next: (..._args: any[]) => any
) => any
): MethodDecorator => {
return (_target: any, _key: string | symbol, descriptor: PropertyDescriptor) => {
const originalMethod = descriptor.value;
@nitedani
nitedani / floater.tsx
Created October 26, 2023 19:22
Discord-like floater window
import { motion, useSpring } from "framer-motion";
import {
MouseEventHandler,
ReactEventHandler,
useCallback,
useEffect,
useRef,
useState,
} from "react";
@nitedani
nitedani / compile.js
Created September 18, 2022 02:40
Compile angular components
import { NgtscProgram, readConfiguration } from '@angular/compiler-cli';
import { dirname, resolve } from 'path';
import ts from 'typescript';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url));
const { options, rootNames } = readConfiguration(
resolve(__dirname, '..', 'tsconfig.angular.json')
);
const host = ts.createIncrementalCompilerHost(options);
@nitedani
nitedani / useQuery.ts
Last active August 28, 2022 04:49
react-streaming+react-query - server-side suspense data-fetching
// environment: node and browser
import { parse, stringify } from "@brillout/json-s";
import { useRef } from "react";
import {
QueryClient,
QueryFunction,
QueryKey,
useQuery as useReactQuery,
useQueryClient,
@nitedani
nitedani / profiler.ts
Last active April 29, 2022 20:41
Detect memory spikes, capture and upload cpu and heap profiles to s3.
CAPTURE_AWS_REGION=
CAPTURE_AWS_ACCESS_KEY=
CAPTURE_AWS_SECRET_KEY=
CAPTURE_AWS_BUCKET=
CAPTURE_MEM_TRIGGER_MB=500
CAPTURE_MEM_LIMIT_MB=1000
CAPTURE_TIME_LIMIT_SEC=20
import { S3 } from 'aws-sdk';
import dotenv from 'dotenv';
@nitedani
nitedani / cache.ts
Last active November 9, 2021 16:41
Cache & hot observable/promise sharing decorator
import 'reflect-metadata';
import * as LRU from 'lru-cache';
import { from, isObservable } from 'rxjs';
import { finalize, shareReplay, tap } from 'rxjs/operators';
import { Md5 } from 'ts-md5/dist/md5';
export const aroundMethodDecarator = (
decoratorFn: (
args: any[],
name: string,