vsx
v0.7.0
Published
Write vanilla JavaScript in JSX.
Downloads
65
Readme
vsx
Write vanilla JavaScript in JSX.
Installation
Using npm:
npm install vsx
Using yarn:
yarn add vsx
Using pnpm:
pnpm add vsx
Using ESM CDN:
<script src="https://esm.sh/vsx">
Using unpkg CDN:
<script src="https://unpkg.com/vsx">
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/vsx"></script>
Caveat: By using a CDN, you can't write JSX although it's still better than writing regular JavaScript IMO.
Usage
With TypeScript, add these options in your tsconfig
"jsx":"react",
"jsxFactory": "VSX.createElement",
"jsxFragmentFactory": "VSX.createFragment",
Here's an example of a counter:
import VSX, { createEffect, createState } from "vsx";
const Counter = () => {
const [count, setCount] = createState(0);
createEffect(() => {
console.log("Count", count().value)
}, [count]);
return (
<>
<button
onClick={() => setCount(count().value - 1 )}
>
-
</button>
<span>
{count}
</span>
<button
onClick={() => setCount(count().value + 1 )}
>
+
</button>
</>
)
}
API Reference
createElement(tag: string | (() => Node), props: { [key: string]: any } | null, ...children: Array<string | Node>): Node
It is applied to every HTML and JSX element via the runtime of your choice.
createFragment(props: { [key: string]: any } | null, ...children: Array<string | Node>): Array<string | Node>
It is applied to every JSX fragment via the runtime of your choice.
createState(initialValue: Data): [get(): State, set(updatedValue: Data): void]
A hook function to manage DOM elements' state.
createEffect(fn: () => void, deps: string[]): void
A hook function to manage side effects.
Data: null | number | string | boolean | Data[]
It represents a state variable's value with it's type information.
State: { key: string: typedValue?: Data}
Type definition of a state variable.
Contributing
- Open an issue before submitting a pull request.
- PRs should have short descriptive titles. For example:
- fix(docs): fix typo in
createElement
description - feat(state): add support for arrays
- fix(docs): fix typo in
- Ensure PRs reference a related issue
- Ensure there are tests that cover your changes