Vanjs-jsx NPM | npm.io

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-core

Change 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;

@everything-registry/sub-chunk-3042

3 months ago

4 months ago

7 months ago

7 months ago