From 1dc89858c523ffe7157859628d344e4319939dcd Mon Sep 17 00:00:00 2001
From: zakarialaoui10 <zakarialaoui10@gmail.com>
Date: Mon, 30 Dec 2024 23:50:06 +0100
Subject: [PATCH 1/2] add van-wrapper

---
 addons/van_wrapper/README.md | 80 ++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 addons/van_wrapper/README.md

diff --git a/addons/van_wrapper/README.md b/addons/van_wrapper/README.md
new file mode 100644
index 0000000..41ae6c0
--- /dev/null
+++ b/addons/van_wrapper/README.md
@@ -0,0 +1,80 @@
+# Van Wrapper
+
+_Author : [zakarialaoui10](https://github.com/zakarialaoui10)
+
+## Description :
+
+Van-Wrapper is a tool that makes it easy to render VanJS elements within other popular frameworks.
+
+## Main repository : 
+
+https://github.com/zakarialaoui10/van-wrapper
+
+
+## Usage
+
+### *Component Declaration :*
+```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
+```
+### *Component Integration :*
+
+#### 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 (
+        <VanWrapper>
+           <HelloFromVan 
+              environement={environement} 
+            />
+        </VanWrapper>
+    )
+ }
+```
+#### Vue 
+```xml
+<script>
+import VanWrapper from "van-wrapper/vue"
+import HelloFromVan from "./HelloFromVan.js"
+</script>
+<template>
+    <VanWrapper>
+           <HelloFromVan 
+              environement="Vue"  
+            />
+    </VanWrapper>
+</template>
+```
+#### Svelte
+
+```jsx
+---
+import VanWrapper from "van-wrapper/svelte";
+import HelloFromVan from "./HelloFromVan.js"
+---
+<VanWrapper ui={HelloFromVan({environement:"Svelte"})}/>
+```
+
+## Why use this 
+
+- Expanding VanJS Adoption : Developers can gradually adopt VanJS in existing codebases without disrupting the architecture.
+
+- Use VanJS with features from other frameworks, like SolidJS’s file-based routing, to build dynamic apps ...
+
+- Cross-Framework Compatibility: Supports React, Vue, Svelte, Solid, Preact and potentially other frameworks in the future.
\ No newline at end of file

From d0c80b689e8eef3716091f8e4550d5f882c513a2 Mon Sep 17 00:00:00 2001
From: ZAKARIA ELALAOUI <63521765+zakarialaoui10@users.noreply.github.com>
Date: Fri, 3 Jan 2025 15:17:50 +0100
Subject: [PATCH 2/2] Remove unnecessary import

---
 addons/van_wrapper/README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/addons/van_wrapper/README.md b/addons/van_wrapper/README.md
index 41ae6c0..992e355 100644
--- a/addons/van_wrapper/README.md
+++ b/addons/van_wrapper/README.md
@@ -16,7 +16,6 @@ https://github.com/zakarialaoui10/van-wrapper
 ### *Component Declaration :*
 ```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")),
@@ -77,4 +76,4 @@ import HelloFromVan from "./HelloFromVan.js"
 
 - Use VanJS with features from other frameworks, like SolidJS’s file-based routing, to build dynamic apps ...
 
-- Cross-Framework Compatibility: Supports React, Vue, Svelte, Solid, Preact and potentially other frameworks in the future.
\ No newline at end of file
+- Cross-Framework Compatibility: Supports React, Vue, Svelte, Solid, Preact and potentially other frameworks in the future.