React: fast developing with Vite

https://vitejs.dev

new-vite-project.ps1

#requires -version 5

<#
.SYNOPSIS
    Creates a new Vite (React + TypeScript) project in a new subfolder.
#>

$projectName = Read-Host "Enter the name of the new project"

if ([string]::IsNullOrWhiteSpace($projectName)) {
    Write-Error "Project name cannot be empty."
    exit 1
}

if (Test-Path $projectName) {
    $answer = Read-Host "Folder '$projectName' already exists. Delete it? (y/n)"
    if ($answer -eq "y") {
        Remove-Item -Path $projectName -Recurse -Force
    }
    else {
        Write-Error "Aborted because folder '$projectName' already exists."
        exit 1
    }
}

New-Item -ItemType Directory -Path $projectName | Out-Null
Push-Location $projectName

try {
    git init

    npx create-vite@latest . --template react-ts  --no-interactive  

    npm install
    
    npm install --save-dev typescript@latest

    Write-Host "Project '$projectName' has been created in $(Get-Location)." -ForegroundColor Green

    code .
}
finally {
    Pop-Location
}

new-vite-project.cmd (Invoke powershell script)

@echo off
pushd "%~dp0"
powershell.exe -ExecutionPolicy Bypass -File ./new-vite-project.ps1
popd
pause

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