React: fast developing with Vite

Date: 2022-12-13

https://vitejs.dev

# this command does not work?!
#npm create vite@latest my-app -- --template react-ts

# but this one does:
npx create-vite  my-app -- --template react-ts

# or:
mkdir my-app
cd my-app
git init
npx create-vite . -- --template react-ts
npm i --save-dev vite-plugin-checker
# or add to package.json command
#"start": "concurrently --kill-others \"tsc --noEmit --watch\" \"vite\"",

https://vite.dev/guide/features.html#transpile-only

https://github.com/fi3ework/vite-plugin-checker

Vite Hot Reload Persist (HMR)

// helper function: hotReloadPersist or createPersistentSingleton
export function hotReloadPersist<T>(
    key: string,
    factory: () => T,
    hot?: ImportMeta['hot']
): T {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const data = hot?.data as Record<string, any> | undefined;
    if (data) {
        if (!data[key]) data[key] = factory();
        return data[key];
    }
    return factory();
}

// reuse same class when hot reloading module
export const domainPorts = hotReloadPersist("domainPorts", () => new DomainPorts(), import.meta.hot);

70860cookie-checkReact: fast developing with Vite