https://github.com/zakarialaoui10/van-wrapper
Van-Wrapper is a tool that makes it easy to render VanJS elements within other popular frameworks.
https://github.com/zakarialaoui10/van-wrapper
vanjs wrapper zikojs
Last synced: about 1 year ago
JSON representation
Van-Wrapper is a tool that makes it easy to render VanJS elements within other popular frameworks.
- Host: GitHub
- URL: https://github.com/zakarialaoui10/van-wrapper
- Owner: zakarialaoui10
- License: mit
- Created: 2024-12-22T14:33:15.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-07T21:02:04.000Z (over 1 year ago)
- Last Synced: 2025-03-29T05:24:03.048Z (about 1 year ago)
- Topics: vanjs, wrapper, zikojs
- Language: JavaScript
- Homepage:
- Size: 113 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Van-wrapper
Van-Wrapper is a tool that facilitates the rendering of VanJS elements within other popular frameworks.
## Integrate Vanjs inside Other Environment
### VanJS Component Decalaration
```js
// HelloFromVan.js
import { VanWrapper } from "van-wrapper/vue";
const {a, p, div} = van.tags
const HelloFromVan = ({environement}) => div(
p(message, a({href: "https://vanjs.org/"}, "VanJS")),
p(
"This is a ",
a({href: "https://vanjs.org/"}, "VanJS "),
`Element Wrapped inside ${environement} App`
)
)
export default HelloFromVan
```
### Use
#### JSX Based
```jsx
import VanWrapper from "van-wrapper/react"
// import VanWrapper from "van-wrapper/solid"
// import VanWrapper from "van-wrapper/preact"
import HelloFromVan from "./HelloFromVan.js"
const environement = "React" // It's only a message
export default function App(){
return (
)
}
```
#### Vue
```xml
import VanWrapper from "van-wrapper/vue"
import HelloFromVan from "./HelloFromVan.js"
```
#### Svelte
```jsx
---
import VanWrapper from "van-wrapper/svelte";
import HelloFromVan from "./HelloFromVan.js"
---
```
# License
This projet is licensed under the terms of MIT License
