Van-Wrapper

https://github.com/zakarialaoui10/van-wrapper
Admin
Van-Wrapper is a tool that makes it easy to render VanJS elements within other popular frameworks.
Tokens:582
Snippets:4
Trust Score:9.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Declaring a VanJS Component

Source: https://github.com/zakarialaoui10/van-wrapper/blob/main/README.md

This JavaScript snippet shows how to define a simple VanJS component named `HelloFromVan`. It uses VanJS tags (`div`, `p`, `a`) to create a DOM structure that displays a message and links, demonstrating how to build UI elements with VanJS.

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

--------------------------------

### Using VanWrapper in Svelte

Source: https://github.com/zakarialaoui10/van-wrapper/blob/main/README.md

This Svelte snippet shows how to integrate a VanJS component (`HelloFromVan`) into a Svelte application. It imports `VanWrapper` and the VanJS component in the script section (delimited by `---`) and passes the instantiated VanJS component as the `ui` prop to the `VanWrapper` component.

```jsx
---
import VanWrapper from "van-wrapper/svelte";
import HelloFromVan from "./HelloFromVan.js"
---
<VanWrapper ui={HelloFromVan({environement:"Svelte"})}/>
```

--------------------------------

### Using VanWrapper in React (JSX)

Source: https://github.com/zakarialaoui10/van-wrapper/blob/main/README.md

This JSX snippet demonstrates how to integrate a VanJS component (`HelloFromVan`) within a React application using the `VanWrapper` component. It imports the necessary components and renders the VanJS component as a child of `VanWrapper`, passing props.

```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 (
        <VanWrapper>
           <HelloFromVan 
              environement={environement} 
            />
        </VanWrapper>
    )
 }
```

--------------------------------

### Using VanWrapper in Vue

Source: https://github.com/zakarialaoui10/van-wrapper/blob/main/README.md

This Vue snippet illustrates how to embed a VanJS component (`HelloFromVan`) within a Vue application. It imports `VanWrapper` and the VanJS component in the script section and uses them within the template, rendering the VanJS component inside `VanWrapper`.

```xml
<script>
import VanWrapper from "van-wrapper/vue"
import HelloFromVan from "./HelloFromVan.js"
</script>
<template>
    <VanWrapper>
           <HelloFromVan 
              environement="Vue"  
            />
    </VanWrapper>
</template>
```
Tokens:
Raw