diff --git a/src/vite-plus/README.md b/src/vite-plus/README.md index 8c614c6..b40684f 100644 --- a/src/vite-plus/README.md +++ b/src/vite-plus/README.md @@ -1,32 +1,40 @@ # Vite+ Development Environment (vite-plus) -Complete Vite+ toolchain setup with VS Code extensions, Oxc formatter/linter, Vitest, and optimized configuration for the unified web development workflow. +Complete Vite+ unified toolchain setup with the `vp` CLI, integrating Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown, and Vite Task into a single development experience with VS Code extensions pre-configured. ## Features +- **Vite+ CLI (`vp`)**: Unified toolchain installed via the official installer - **VS Code Extensions**: Oxc and Vitest extensions pre-configured -- **Vite CLI**: Optional global Vite installation for quick project scaffolding -- **Vitest CLI**: Optional global Vitest installation for running tests -- **Oxc Integration**: Blazing fast linting and formatting (100x faster than ESLint) +- **Oxc Integration**: Ultra-fast linting (Oxlint) and formatting (Oxfmt) - **Vitest Support**: Test explorer and optimal configuration - **Smart Defaults**: Editor configured for Vite+ best practices -- **Project Helper**: Includes `vite-plus-init` command for setup guidance ## What is Vite+? -Vite+ is the unified toolchain for web development, combining: +[Vite+](https://viteplus.dev/) combines [Vite](https://vite.dev/), [Vitest](https://vitest.dev/), [Oxlint](https://oxc.rs/docs/guide/usage/linter.html), [Oxfmt](https://oxc.rs/docs/guide/usage/formatter.html), [Rolldown](https://rolldown.rs/), and [tsdown](https://tsdown.dev/) into a single, unified web development toolchain driven by [Vite Task](https://github.com/voidzero-dev/vite-task). -- **Vite** - Lightning-fast dev server and build tool -- **Vitest** - Fast unit test framework -- **Oxc** - Ultra-fast linter and formatter (Rust-based) -- **Rolldown** - Faster bundler -- All-in-one CLI for dev, test, lint, format, and more +**Key `vp` commands:** -Built by the creators of Vite, Vitest, and Oxc for enterprise-scale productivity. +| Command | Description | +|---------|-------------| +| `vp create` | Scaffold new projects and monorepos | +| `vp install` | Install dependencies using the correct package manager | +| `vp dev` | Start Vite dev server with instant HMR | +| `vp check` | Lint (Oxlint) + format (Oxfmt) + type-check (tsgo) | +| `vp test` | Run tests with Vitest | +| `vp build` | Production builds with Rolldown | +| `vp run` | Execute package.json scripts via Vite Task | +| `vp pack` | Bundle libraries or create standalone binaries | +| `vp env` | Manage Node.js globally and per project | + +All you need is `vp` and a `vite.config.ts` at the project root. + +Built by VoidZero (creators of Vite, Vitest, and Oxc). Open source under MIT license. ## Usage -### Basic Setup +### Basic Setup (recommended) Add this feature to your `devcontainer.json`: @@ -39,60 +47,45 @@ Add this feature to your `devcontainer.json`: ``` This will: -1. Install Vite, Vitest, and Oxc CLIs globally +1. Install `vp` (Vite+ unified CLI) for the devcontainer user 2. Install Oxc and Vitest VS Code extensions 3. Configure Oxc as the default formatter 4. Enable format-on-save and auto-fix 5. Set up Vitest test explorer -### With Global CLIs (default) - -```json -{ - "features": { - "ghcr.io/helpers4/devcontainer/viteplus:1": { - "installVite": true, - "installVitest": true, - "installOxc": true - } - } -} -``` - -This allows you to run `vite`, `vitest`, and `oxc` commands globally without npx. +### With standalone fallback CLIs -### With Vite+ Unified CLI (Early Access) +If you prefer standalone tools instead of or alongside `vp`: ```json { "features": { "ghcr.io/helpers4/devcontainer/vite-plus:1": { + "installVitePlus": true, "installVite": true, "installVitest": true, - "installVitePlus": true, "installOxc": true } } } ``` -**Note**: Vite+ is currently in early access. Register at [viteplus.dev](https://viteplus.dev/). When available, this will install the unified `vite+` CLI. +**Note**: When using `vp`, standalone installs of Vite, Vitest, and Oxc are not needed — `vp` bundles them all. ## Options | Option | Type | Default | Description | |--------|------|---------|-------------| -| `installVite` | boolean | `true` | Install Vite CLI globally | -| `installVitest` | boolean | `true` | Install Vitest CLI globally | -| `installVitePlus` | boolean | `false` | Install Vite+ unified CLI globally (early access) | -| `installOxc` | boolean | `true` | Install Oxc CLI globally | -| `enableExperimentalFormatter` | boolean | `true` | Enable experimental Oxc formatter features | +| `installVitePlus` | boolean | `true` | Install Vite+ unified CLI (`vp`) for the devcontainer user (`~/.vite-plus/bin`) | +| `installVite` | boolean | `false` | Install standalone Vite CLI via npm (not needed with `vp`) | +| `installVitest` | boolean | `false` | Install standalone Vitest CLI via npm (not needed with `vp`) | +| `installOxc` | boolean | `false` | Install Oxc language server via npm (not needed with `vp`) | ## VS Code Extensions Included ### Oxc (oxc.oxc-vscode) -- Ultra-fast linting (up to 100x faster than ESLint) -- Prettier-compatible formatting +- Ultra-fast linting with Oxlint (~50× to ~100× faster than ESLint) +- Prettier-compatible formatting with Oxfmt (up to 30× faster than Prettier) - ESLint rule compatibility (600+ rules) - Type-aware linting support @@ -109,96 +102,84 @@ This allows you to run `vite`, `vitest`, and `oxc` commands globally without npx "oxc.enable": true, "oxc.lint.enable": true, "oxc.fmt.enable": true, - "oxc.fmt.experimental": true, "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.oxc": "explicit" }, "vitest.enable": true, - "vitest.commandLine": "npx vitest" // Uses local project version if available + "vitest.commandLine": "npx vitest" } ``` -**Note**: Even though Vitest is installed globally, `npx vitest` ensures the test runner uses the project's local version specified in `package.json`, maintaining consistency across the team. +**Note**: Even though `vp test` can run Vitest, the VS Code Vitest Explorer uses `npx vitest` to ensure the project's local version runs. -## Project Setup Helper +## Typical Project Setup with Vite+ -After the container is created, run: +### 1. Create a new project ```bash -vite-plus-init +vp create my-app ``` -This displays: -- Recommended dependencies for your project type -- Example configuration files -- Setup instructions for React, Vue, or other frameworks +### 2. Install dependencies -## Typical Project Setup +```bash +cd my-app +vp install +``` + +### 3. Develop + +```bash +vp dev +``` + +### 4. Check code quality (lint + format + type-check) + +```bash +vp check # report issues +vp check --fix # auto-fix formatting and linting +``` -### 1. Install Dependencies +### 5. Run tests ```bash -# Core Vite+ toolchain -npm install -D vite vitest +vp test +``` + +### 6. Build for production -# Oxc tools (if not using unified Vite+ CLI) -npm install -D oxc-linter oxc-formatter +```bash +vp build +``` -# For React -npm install -D @vitejs/plugin-react +### 7. Run scripts via Vite Task -# For Vue -npm install -D @vitejs/plugin-vue +```bash +vp run ``` -### 2. Create vite.config.ts +All tasks are configured in your `vite.config.ts`: ```typescript import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' export default defineConfig({ - plugins: [react()], + plugins: [], test: { globals: true, environment: 'happy-dom', }, -}) -``` - -### 3. Create oxc.config.json - -```json -{ - "lint": { - "rules": { - "no-unused-vars": "error", - "no-console": "warn" - } + run: { + tasks: { + 'generate:icons': { + command: 'node scripts/generate-icons.js', + cache: true, + }, + }, }, - "format": { - "indentWidth": 2, - "lineWidth": 100 - } -} -``` - -### 4. Update package.json scripts - -```json -{ - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "test": "vitest", - "test:ui": "vitest --ui", - "lint": "oxc lint .", - "format": "oxc fmt ." - } -} +}) ``` ## Works Great With @@ -230,14 +211,28 @@ Vite+ works with all Vite-compatible frameworks: ## Performance Benefits -- **40x faster builds** than webpack -- **100x faster linting** than ESLint +- **~1.6× to ~7.7× faster production builds** than Vite 7 (Rolldown) +- **~50× to ~100× faster linting** than ESLint (Oxlint) +- **Up to 30× faster formatting** than Prettier (Oxfmt) - **Instant HMR** for all file types -- **Native speed formatting** with Oxc -- **Fast unit tests** with Vitest +- **Automated caching** with Vite Task for monorepo scripts + +## Bundled Tools & Versions + +Vite+ Alpha ships with: +- Vite 8 +- Vitest 4.1 +- Oxlint 1.52 +- Oxfmt (beta) +- Rolldown +- tsdown ## Troubleshooting +### `vp` command not found + +The installer places `vp` in `~/.vite-plus/bin/`. Ensure your shell profile sources it. Open a new terminal session after installation. + ### Oxc not formatting Check that `oxc.oxc-vscode` extension is enabled: @@ -256,29 +251,19 @@ export default defineConfig({ }) ``` -### Global CLI not available +## Migrating an existing project -If `oxc` or `vite` commands aren't found, ensure the feature installed with: -```json -{ - "features": { - "ghcr.io/helpers4/devcontainer/viteplus:1": { - "installOxc": true - } - } -} -``` -vite`, `vitest`, or `oxc` commands aren't found, ensure the feature installed with: -```json -{ - "features": { - "ghcr.io/helpers4/devcontainer/vite-plus:1": { - "installVite": true, - "installVitest": true,/r/nGWebL -- **Vite Documentation**: https://vite.dev/ -- **Vitest Documentation**: https://vitest.dev/ -- **Oxc Documentation**: https://oxc.rs/ -- **VoidZero (Company)**: https://voidzero.dev/ +Run `vp migrate` in your project root or see the [migration guide](https://viteplus.dev/guide/). + +## Links + +- **Vite+**: https://viteplus.dev/ +- **Vite**: https://vite.dev/ +- **Vitest**: https://vitest.dev/ +- **Oxc**: https://oxc.rs/ +- **Rolldown**: https://rolldown.rs/ +- **tsdown**: https://tsdown.dev/ +- **Vite Task**: https://github.com/voidzero-dev/vite-task ## License diff --git a/src/vite-plus/devcontainer-feature.json b/src/vite-plus/devcontainer-feature.json index 29eaa5e..d3e1ea7 100644 --- a/src/vite-plus/devcontainer-feature.json +++ b/src/vite-plus/devcontainer-feature.json @@ -1,34 +1,29 @@ { "id": "vite-plus", - "version": "1.0.1", + "version": "1.0.2", "name": "Vite+ Development Environment", - "description": "Complete Vite+ toolchain setup with VS Code extensions, Oxc formatter/linter, Vitest, and optimized configuration.", + "description": "Complete Vite+ unified toolchain setup (vp) with Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown, and VS Code integration.", "documentationURL": "https://github.com/helpers4/devcontainer/tree/main/features/vite-plus", "options": { - "installVite": { + "installVitePlus": { "type": "boolean", "default": true, - "description": "Install Vite CLI globally" + "description": "Install Vite+ unified CLI (vp) for the devcontainer user (~/.vite-plus/bin)" }, - "installVitest": { + "installVite": { "type": "boolean", - "default": true, - "description": "Install Vitest CLI globally" + "default": false, + "description": "Install Vite CLI globally via npm (not needed if using vp)" }, - "installVitePlus": { + "installVitest": { "type": "boolean", "default": false, - "description": "Install Vite+ unified CLI globally (currently in early access)" + "description": "Install Vitest CLI globally via npm (not needed if using vp)" }, "installOxc": { "type": "boolean", - "default": true, - "description": "Install Oxc CLI globally for linting and formatting" - }, - "enableExperimentalFormatter": { - "type": "boolean", - "default": true, - "description": "Enable experimental Oxc formatter in VS Code settings" + "default": false, + "description": "Install Oxc language server globally via npm (not needed if using vp)" } }, "customizations": { @@ -42,7 +37,6 @@ "oxc.enable": true, "oxc.lint.enable": true, "oxc.fmt.enable": true, - "oxc.fmt.experimental": true, "editor.defaultFormatter": "oxc.oxc-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { diff --git a/src/vite-plus/install.sh b/src/vite-plus/install.sh index 3c6152e..d4de178 100644 --- a/src/vite-plus/install.sh +++ b/src/vite-plus/install.sh @@ -1,51 +1,131 @@ #!/usr/bin/env bash -# Vite+ DevContainer Feature -# Copyright (c) 2025 helpers4 -# Licensed under LGPL-3.0 - see LICENSE file for details +# This file is part of helpers4. +# Copyright (C) 2025 baxyz +# SPDX-License-Identifier: LGPL-3.0-or-later # -# Sets up Vite+ development environment with Oxc, Vitest, and VS Code configuration +# Sets up Vite+ development environment with the unified vp CLI, +# Oxc formatter/linter, Vitest, and VS Code configuration set -e -echo "🔧 Setting up viteplus devcontainer feature..." +echo "🔧 Setting up vite-plus devcontainer feature..." # Get options -INSTALL_VITE="${INSTALLVITE:-true}" -INSTALL_VITEST="${INSTALLVITEST:-true}" -INSTALL_VITE_PLUS="${INSTALLVITEPLUS:-false}" -INSTALL_OXC="${INSTALLOXC:-true}" -ENABLE_EXPERIMENTAL_FORMATTER="${ENABLEEXPERIMENTALFORMATTER:-true}" +INSTALL_VITE_PLUS="${INSTALLVITEPLUS:-true}" +INSTALL_VITE="${INSTALLVITE:-false}" +INSTALL_VITEST="${INSTALLVITEST:-false}" +INSTALL_OXC="${INSTALLOXC:-false}" + +# Detect non-root user +if [ "$(id -u)" -ne 0 ]; then + echo "❌ This script must be run as root." + exit 1 +fi + +USERNAME="${_REMOTE_USER:-"automatic"}" +if [ "$USERNAME" = "automatic" ] || [ "$USERNAME" = "root" ]; then + if getent passwd vscode >/dev/null 2>&1; then + USERNAME="vscode" + elif getent passwd node >/dev/null 2>&1; then + USERNAME="node" + else + USERNAME="root" + fi +fi -# Check if node/npm is available +# Ensure apt is in non-interactive mode +export DEBIAN_FRONTEND=noninteractive + +# Update apt if needed +apt_get_update() { + if [ "$(find /var/lib/apt/lists/* | wc -l)" = "0" ]; then + echo "Running apt-get update..." + apt-get update -y + fi +} + +# Check and install packages +check_packages() { + if ! dpkg -s "$@" > /dev/null 2>&1; then + apt_get_update + apt-get -y install --no-install-recommends "$@" + fi +} + +# Check if node/npm is available (needed for fallback tools and npm-based installs) if ! command -v npm >/dev/null 2>&1; then echo "❌ npm not found. Please ensure Node.js feature is installed first." exit 1 fi -# Install Oxc CLI globally if requested -if [ "$INSTALL_OXC" = "true" ]; then - echo "📦 Installing Oxc CLI globally..." - if npm install -g oxc-language-server 2>/dev/null; then - echo "✅ Oxc CLI installed" - - # Verify installation - if command -v oxc >/dev/null 2>&1; then - OXC_VERSION=$(oxc --version 2>/dev/null || echo "unknown") - echo " Version: ${OXC_VERSION}" - fi +# Install Vite+ unified CLI (vp) via the official installer +if [ "$INSTALL_VITE_PLUS" = "true" ]; then + echo "📦 Installing Vite+ unified CLI (vp) via official installer..." - if [ "$ENABLE_EXPERIMENTAL_FORMATTER" = "true" ]; then - echo " Experimental formatter: enabled (via VS Code settings)" + # Ensure curl and ca-certificates are available + check_packages curl ca-certificates + + # Download installer to a temp file to avoid pipefail issues + INSTALLER_SCRIPT=$(mktemp) + trap 'rm -f "$INSTALLER_SCRIPT"' EXIT + + if ! curl -fsSL https://vite.plus -o "$INSTALLER_SCRIPT"; then + echo "❌ Failed to download Vite+ installer." + exit 1 + fi + chmod 644 "$INSTALLER_SCRIPT" + + # Install vp for the devcontainer user (per-user install in ~/.vite-plus/bin) + if [ "$USERNAME" != "root" ]; then + if su - "$USERNAME" -c "bash '$INSTALLER_SCRIPT'"; then + USER_HOME=$(eval echo "~${USERNAME}") + USER_VP_HOME="${USER_HOME}/.vite-plus" + if [ -d "$USER_VP_HOME" ]; then + echo "✅ Vite+ CLI (vp) installed at ${USER_VP_HOME}/bin" + fi + + # Verify vp is available for the user + if su - "$USERNAME" -c 'command -v vp' >/dev/null 2>&1; then + VP_VERSION=$(su - "$USERNAME" -c 'vp --version 2>/dev/null' || echo "unknown") + echo " Version: ${VP_VERSION}" + else + echo " vp installed, will be available in new shell sessions for ${USERNAME}" + fi else - echo " Experimental formatter: disabled" + echo "❌ Failed to install Vite+ CLI via official installer." + exit 1 fi else - echo "⚠️ Failed to install Oxc CLI, but continuing..." + # Root-only fallback + if bash "$INSTALLER_SCRIPT"; then + echo "✅ Vite+ CLI (vp) installed" + VP_HOME="${HOME}/.vite-plus" + if [ -d "$VP_HOME" ]; then + export PATH="${VP_HOME}/bin:${PATH}" + fi + if command -v vp >/dev/null 2>&1; then + VP_VERSION=$(vp --version 2>/dev/null || echo "unknown") + echo " Version: ${VP_VERSION}" + fi + else + echo "❌ Failed to install Vite+ CLI via official installer." + exit 1 + fi fi fi -# Install Vite if requested +# Install standalone Oxc language server if requested (not needed with vp) +if [ "$INSTALL_OXC" = "true" ]; then + echo "📦 Installing Oxc language server globally..." + if npm install -g oxc-language-server 2>/dev/null; then + echo "✅ Oxc language server installed" + else + echo "⚠️ Failed to install Oxc language server, but continuing..." + fi +fi + +# Install standalone Vite CLI if requested (not needed with vp) if [ "$INSTALL_VITE" = "true" ]; then echo "📦 Installing Vite CLI globally..." if npm install -g vite 2>/dev/null; then @@ -59,7 +139,7 @@ if [ "$INSTALL_VITE" = "true" ]; then fi fi -# Install Vitest if requested +# Install standalone Vitest CLI if requested (not needed with vp) if [ "$INSTALL_VITEST" = "true" ]; then echo "📦 Installing Vitest CLI globally..." if npm install -g vitest 2>/dev/null; then @@ -73,90 +153,18 @@ if [ "$INSTALL_VITEST" = "true" ]; then fi fi -# Install Vite+ if requested (currently in early access) -if [ "$INSTALL_VITE_PLUS" = "true" ]; then - echo "📦 Installing Vite+ CLI globally..." - echo " Note: Vite+ is currently in early access" - - # Check if vite+ is available on npm - if npm view vite-plus version >/dev/null 2>&1; then - if npm install -g vite-plus 2>/dev/null; then - echo "✅ Vite+ CLI installed" - if command -v vite-plus >/dev/null 2>&1; then - VITEPLUS_VERSION=$(vite-plus --version 2>/dev/null || echo "unknown") - echo " Version: ${VITEPLUS_VERSION}" - fi - else - echo "⚠️ Failed to install Vite+ CLI" - echo " You may need to wait for official release or join early access" - fi - else - echo "ℹ️ Vite+ not yet available on npm" - echo " Register at: https://tally.so/r/nGWebL" - fi -fi - -# Create a helper script for project setup -cat > /usr/local/bin/vite-plus-init << 'EOFSCRIPT' -#!/usr/bin/env bash - -# Vite+ Project Initialization Helper -set -e - -echo "🚀 Vite+ Project Setup Helper" -echo "" - -# Check if we're in a project directory -if [ ! -f "package.json" ]; then - echo "❌ No package.json found. Please run this from your project root." - exit 1 -fi - -echo "📋 Recommended Vite+ dependencies:" -echo "" -echo "Core toolchain:" -echo " npm install -D vite vitest oxc-linter oxc-formatter" -echo "" -echo "For React projects:" -echo " npm install -D @vitejs/plugin-react" -echo "" -echo "For Vue projects:" -echo " npm install -D @vitejs/plugin-vue" -echo "" -echo "For type checking:" -echo " npm install -D typescript @types/node" -echo "" -echo "Example vite.config.ts:" -echo " import { defineConfig } from 'vite'" -echo " export default defineConfig({" -echo " plugins: []," -echo " test: {" -echo " globals: true," -echo " environment: 'happy-dom'" -echo " }" -echo " })" -echo "" -echo "Example oxc.config.json:" -echo " {" -echo " \"lint\": {" -echo " \"rules\": {}" -echo " }," -echo " \"format\": {" -echo " \"indentWidth\": 2" -echo " }" -echo " }" -echo "" -EOFSCRIPT - -chmod +x /usr/local/bin/vite-plus-init - echo "" echo "✅ Vite+ feature installed successfully!" echo "" -echo "📝 Next steps:" -echo " 1. Your VS Code is now configured with Oxc formatter and Vitest" -echo " 2. Run 'vite-plus-init' in your project to see setup recommendations" -echo " 3. Install project dependencies with your package manager" +echo "📝 Vite+ unified commands:" +echo " vp create - Scaffold a new project" +echo " vp install - Install dependencies" +echo " vp dev - Start dev server" +echo " vp check - Lint (Oxlint) + format (Oxfmt) + type-check (tsgo)" +echo " vp test - Run tests (Vitest)" +echo " vp build - Production build (Rolldown)" +echo " vp run - Execute package.json scripts via Vite Task" +echo " vp pack - Bundle libraries or create standalone binaries" echo "" echo "🔗 Resources:" echo " - Vite+: https://viteplus.dev/" diff --git a/test/vite-plus/test.sh b/test/vite-plus/test.sh index f83b8fc..c04bff5 100755 --- a/test/vite-plus/test.sh +++ b/test/vite-plus/test.sh @@ -1,5 +1,9 @@ #!/bin/bash +# This file is part of helpers4. +# Copyright (C) 2025 baxyz +# SPDX-License-Identifier: LGPL-3.0-or-later + # Test script for vite-plus feature set -e @@ -12,16 +16,19 @@ check "node is available" command -v node check "npm is available" command -v npm -check "vite CLI is available" command -v vite +# Check vp (Vite+ unified CLI) installation +# vp is required by default (installVitePlus=true), so this must pass +check "vp CLI is available" command -v vp +check "vp version displays" vp --version -check "vitest CLI is available" command -v vitest +# Check standalone Vite CLI (optional, not needed with vp) +if command -v vite >/dev/null 2>&1; then + check "vite CLI is available" command -v vite +fi -# Check Oxc installation (optional) -if command -v oxc >/dev/null 2>&1; then - check "oxc CLI is available" command -v oxc - check "oxc version displays" oxc --version -else - echo "⚠️ Oxc CLI not installed (installOxc=false or failed to install)" +# Check standalone Vitest CLI (optional, not needed with vp) +if command -v vitest >/dev/null 2>&1; then + check "vitest CLI is available" command -v vitest fi reportResults