@shadow-js/vite
Advanced tools
Vite plugin for ShadowJS that provides seamless development experience with hot reload, JSX compilation, and optimized build process.
npm install @shadow-js/vite
Install together with ShadowJS:
npm install @shadow-js/core @shadow-js/vite
vite.config.ts
import { defineConfig } from "vite";
import shadow from "@shadow-js/vite";
export default defineConfig({
plugins: [shadow()],
});
src/App.tsx
import { useStore, Show } from "@shadow-js/core";
function App() {
const [count, setCount] = useStore(0);
return (
<div>
<h1>ShadowJS Counter</h1>
<button onClick={() => setCount((c) => c + 1)}>Count: {count()}</button>
<Show when={count() > 5}>
<p>🎉 You reached {count()}!</p>
</Show>
</div>
);
}
export default App;
src/main.ts
import { render } from "@shadow-js/core";
import App from "./App";
render(App, document.getElementById("app")!);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ShadowJS App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
The plugin integrates ShadowJS with Vite's build pipeline:
Source Code (.tsx)
↓
ShadowJS Compiler (JSX → Reactive)
↓
SWC (TypeScript → JavaScript)
↓
Vite (Bundling & Optimization)
↓
Output Bundle
// vite.config.ts
import { defineConfig } from "vite";
import shadow from "@shadow-js/vite";
export default defineConfig({
plugins: [shadow()],
// Your other Vite configuration
});
// vite.config.ts
import { defineConfig } from "vite";
import shadow from "@shadow-js/vite";
export default defineConfig({
plugins: [
shadow({
// Plugin-specific options (future)
}),
],
// Vite configuration
server: {
port: 3000,
open: true,
},
build: {
target: "es2022",
minify: "esbuild",
},
// TypeScript configuration
esbuild: {
// Vite handles TypeScript compilation
},
});
The ShadowJS plugin works well with other Vite plugins:
import { defineConfig } from "vite";
import shadow from "@shadow-js/vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
export default defineConfig({
plugins: [
shadow(),
viteStaticCopy({
targets: [
{
src: "static/*",
dest: "assets",
},
],
}),
],
});
| Component | Description |
|---|---|
| JSX Transform | Converts ShadowJS JSX to reactive expressions |
| TypeScript Support | Handles TypeScript compilation via SWC |
| HMR Integration | Manages hot module replacement |
| Source Maps | Generates source maps for debugging |
| Error Handling | Provides clear error messages |
.tsx and .jsx filesThe plugin provides seamless HMR for ShadowJS components:
// This component will hot-reload automatically
function Counter() {
const [count, setCount] = useStore(0);
return <button onClick={() => setCount((c) => c + 1)}>{count()}</button>;
}
Full TypeScript support with IntelliSense:
// TypeScript types work perfectly
function UserComponent({ user }: { user: User }) {
const [isEditing, setIsEditing] = useStore(false);
return (
<div>
<h2>{user().name}</h2>
<button onClick={() => setIsEditing((v) => !v)}>
{isEditing() ? "Cancel" : "Edit"}
</button>
</div>
);
}
We welcome any contributions! See the Contributing Guide for details.
Areas for contribution:
MIT License - see LICENSE for details.
Built by Jehaad AL-Johani for the ShadowJS ecosystem.
FAQs
Vite plugin for ShadowJS (JSX + transforms via SWC)
We found that @shadow-js/vite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PolinRider expands across npm, Packagist, Go modules, and Chrome extensions, using hidden loaders to target developer environments.
Security News
Open source attacks are accelerating as AI coding agents pull in dependencies faster, with less human review.
Research
/Security News
Malicious Chrome and Firefox extensions posed as free VPNs while stealing clipboard data through later extension updates.