vanjs-jsx
v0.2.1
Published
jsx-runtime for vanjs
Downloads
14
Readme
Quick Start
Author: cqh
Stackblitz Demo
https://stackblitz.com/edit/vitejs-vite-zepzmw?embed=1&file=src%2Fmain.tsx
Create a New Project
# yarn
yarn create vite my-van-jsx --template vanilla-ts# yarn
yarn add vanjs-jsx vanjs-coreChange tsconfig.json
{ "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "module": "ESNext", "lib": ["ES2020", "DOM", "DOM.Iterable"], "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, /* For vanjs-jsx */ "jsx": "react-jsx", "jsxImportSource": "vanjs-jsx" }, "include": ["src"] }
Add You Component
main.ts -> main.tsx
import van from "vanjs-core"; import Hello from "./Hello"; van.add(document.getElementById("app")!, <Hello name={"your name"} />);change index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vanjs-jsx</title> </head> <body> <div id="app"></div> <!-- change script src --> <script type="module" src="/src/main.tsx"></script> </body> </html>Write Your Component
Hello.tsx
interface IProps { name: string; } const Hello = (props: IProps) => { const { name } = props; return <div>Hello {name}</div>; }; export default Hello;