mdzjs 0.0.2 → 0.0.4

package/examples/vanjs/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vanjs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "start": "vite preview --port 5173",
+    "preview": "vite build && vite preview --port 5173",
+    "serve": "vite serve dist/ --host --port 4173"
+  },
+  "devDependencies": {
+    "vite": "^6.3.5"
+  },
+  "dependencies": {
+    "vanjs-core": "^1.5.5",
+    "ziko-wrapper": "^0.0.25"
+  }
+}

package/examples/vanjs/public/vanjs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" zoomAndPan="magnify" viewBox="0 0 768 767.999994" height="1024" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="5499afe1a4"><path d="M 215.664062 352.992188 L 398 352.992188 L 398 586 L 215.664062 586 Z M 215.664062 352.992188 " clip-rule="nonzero"/></clipPath><clipPath id="6e3c31a3f1"><path d="M 307.773438 586.222656 L 399.886719 352.992188 L 215.664062 352.992188 L 307.773438 586.222656 " clip-rule="nonzero"/></clipPath><clipPath id="c2a5ed2f60"><path d="M 262.246094 437.246094 L 303.734375 437.246094 L 303.734375 586.222656 L 262.246094 586.222656 Z M 262.246094 437.246094 " clip-rule="nonzero"/></clipPath><clipPath id="341bd9ebc4"><path d="M 176.109375 45.578125 L 431.589844 45.578125 L 431.589844 354.578125 L 176.109375 354.578125 Z M 176.109375 45.578125 " clip-rule="nonzero"/></clipPath><clipPath id="591359977e"><path d="M 249 100 L 350 100 L 350 115 L 249 115 Z M 249 100 " clip-rule="nonzero"/></clipPath><clipPath id="a29af40afb"><path d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.960938 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 " clip-rule="evenodd"/></clipPath><clipPath id="c6b87c20df"><path d="M 191 301 L 425 301 L 425 330 L 191 330 Z M 191 301 " clip-rule="nonzero"/></clipPath><clipPath id="952bfe5c80"><path d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.960938 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 " clip-rule="evenodd"/></clipPath><clipPath id="e6a025e8f2"><path d="M 192 192 L 415 192 L 415 229 L 192 229 Z M 192 192 " clip-rule="nonzero"/></clipPath><clipPath id="3a8aa5200a"><path d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.960938 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 " clip-rule="evenodd"/></clipPath></defs><path fill="#f44336" d="M 192.09375 -0.09375 C 86.0625 -0.09375 0.09375 85.875 0.09375 191.90625 L 0.09375 575.90625 C 0.09375 681.9375 86.0625 767.90625 192.09375 767.90625 L 576.09375 767.90625 C 682.125 767.90625 768.09375 681.9375 768.09375 575.90625 L 768.09375 191.90625 C 768.09375 85.875 682.125 -0.09375 576.09375 -0.09375 Z M 192.09375 -0.09375 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#5499afe1a4)"><g clip-path="url(#6e3c31a3f1)"><path fill="#f9ad48" d="M 215.664062 352.992188 L 397.6875 352.992188 L 397.6875 585.582031 L 215.664062 585.582031 Z M 215.664062 352.992188 " fill-opacity="1" fill-rule="nonzero"/></g></g><g clip-path="url(#c2a5ed2f60)"><path fill="#f9ad48" d="M 262.246094 437.246094 L 305.867188 437.246094 L 305.867188 587.503906 L 262.246094 587.503906 Z M 262.246094 437.246094 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#341bd9ebc4)"><path fill="#fdfdfe" d="M 211.324219 355.304688 C 211.324219 355.304688 178.050781 328.160156 195.265625 301.105469 C 158.363281 259.308594 183.039062 206.449219 211.324219 192.921875 C 203.335938 158.503906 222.957031 123.03125 270.304688 111.78125 C 270.304688 111.78125 319.265625 88.945312 299.503906 49.40625 C 299.015625 48.402344 299.246094 47.183594 300.074219 46.429688 C 300.90625 45.671875 302.140625 45.550781 303.101562 46.132812 C 346.609375 72.28125 336.726562 111.78125 336.726562 111.78125 C 384.0625 123.03125 415.375 174.480469 395.699219 213.824219 C 423.992188 227.34375 451.125 277.75 414.222656 319.546875 C 431.4375 346.601562 395.699219 355.304688 395.699219 355.304688 " fill-opacity="1" fill-rule="evenodd"/></g><g clip-path="url(#591359977e)"><g clip-path="url(#a29af40afb)"><path fill="#f0f1f4" d="M 336.726562 111.78125 C 336.726562 111.78125 307.355469 105.789062 270.304688 111.78125 C 233.246094 117.777344 257.167969 101.179688 257.167969 101.179688 C 257.167969 101.179688 316.273438 96.109375 349.488281 111.78125 C 346.71875 117.316406 336.726562 111.78125 336.726562 111.78125 Z M 336.726562 111.78125 " fill-opacity="1" fill-rule="evenodd"/></g></g><g clip-path="url(#c6b87c20df)"><g clip-path="url(#952bfe5c80)"><path fill="#f0f1f4" d="M 191.316406 309.976562 C 191.316406 309.976562 227.554688 317.546875 284.667969 319.546875 C 353.101562 321.945312 424.058594 329.386719 424.058594 329.386719 L 414.222656 319.546875 C 414.222656 319.546875 368.296875 313.8125 284.667969 309.976562 C 201.105469 306.132812 195.265625 301.105469 195.265625 301.105469 Z M 191.316406 309.976562 " fill-opacity="1" fill-rule="evenodd"/></g></g><g clip-path="url(#e6a025e8f2)"><g clip-path="url(#3a8aa5200a)"><path fill="#f0f1f4" d="M 211.324219 192.921875 C 211.324219 192.921875 344.414062 196.839844 395.699219 213.824219 C 408.234375 210.515625 414.277344 228.457031 414.277344 228.457031 C 337.539062 209.058594 271.070312 204.855469 197 203.488281 L 192.359375 192.921875 Z M 211.324219 192.921875 " fill-opacity="1" fill-rule="evenodd"/></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(-5.061192, 679.12656)"><g><path d="M 439.417969 -274.324219 L 473.835938 -274.324219 C 495.28125 -274.324219 512.238281 -289.789062 512.238281 -308.742188 C 512.238281 -323.703125 502.761719 -332.183594 485.304688 -332.683594 L 435.429688 -332.683594 L 425.953125 -332.183594 C 405.503906 -331.683594 400.015625 -329.191406 391.535156 -314.726562 L 385.550781 -304.25 L 267.34375 -103.246094 L 267.34375 -199.507812 C 267.34375 -245.894531 264.847656 -269.835938 258.363281 -288.789062 C 248.886719 -315.722656 214.972656 -336.171875 179.058594 -336.171875 C 106.238281 -336.171875 43.394531 -273.828125 43.394531 -201.503906 C 43.394531 -150.628906 82.796875 -110.726562 132.175781 -110.726562 C 168.085938 -110.726562 193.523438 -126.6875 193.523438 -149.632812 C 193.523438 -162.101562 181.054688 -173.574219 167.585938 -173.074219 L 146.640625 -172.574219 C 125.691406 -172.078125 109.230469 -188.039062 109.230469 -207.988281 C 109.230469 -242.402344 139.65625 -275.324219 171.578125 -275.324219 C 184.046875 -275.324219 195.019531 -266.84375 199.507812 -253.375 C 203 -243.898438 203.5 -236.917969 204.496094 -199.507812 L 208.488281 -35.414062 C 208.984375 -19.453125 210.480469 -12.46875 214.972656 -4.988281 C 220.457031 3.988281 232.925781 10.472656 245.394531 10.472656 C 263.851562 10.472656 275.324219 1.996094 289.289062 -21.945312 Z M 439.417969 -274.324219 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(321.501901, 676.137634)"><g><path d="M 4.28125 -42.859375 C 4.28125 -51.640625 5.9375 -59.34375 9.25 -65.96875 C 12.570312 -72.601562 17.085938 -77.707031 22.796875 -81.28125 C 28.515625 -84.851562 34.894531 -86.640625 41.9375 -86.640625 C 47.957031 -86.640625 53.238281 -85.414062 57.78125 -82.96875 C 62.320312 -80.519531 65.816406 -77.304688 68.265625 -73.328125 L 68.265625 -85.421875 L 94.453125 -85.421875 L 94.453125 0 L 68.265625 0 L 68.265625 -12.09375 C 65.722656 -8.113281 62.179688 -4.898438 57.640625 -2.453125 C 53.097656 -0.00390625 47.816406 1.21875 41.796875 1.21875 C 34.847656 1.21875 28.515625 -0.585938 22.796875 -4.203125 C 17.085938 -7.828125 12.570312 -12.984375 9.25 -19.671875 C 5.9375 -26.359375 4.28125 -34.085938 4.28125 -42.859375 Z M 68.265625 -42.703125 C 68.265625 -49.234375 66.453125 -54.382812 62.828125 -58.15625 C 59.210938 -61.9375 54.800781 -63.828125 49.59375 -63.828125 C 44.394531 -63.828125 39.984375 -61.960938 36.359375 -58.234375 C 32.734375 -54.515625 30.921875 -49.390625 30.921875 -42.859375 C 30.921875 -36.328125 32.734375 -31.144531 36.359375 -27.3125 C 39.984375 -23.488281 44.394531 -21.578125 49.59375 -21.578125 C 54.800781 -21.578125 59.210938 -23.460938 62.828125 -27.234375 C 66.453125 -31.015625 68.265625 -36.171875 68.265625 -42.703125 Z M 68.265625 -42.703125 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(425.44452, 676.137634)"><g><path d="M 61.53125 -86.34375 C 71.53125 -86.34375 79.515625 -83.097656 85.484375 -76.609375 C 91.460938 -70.128906 94.453125 -61.226562 94.453125 -49.90625 L 94.453125 0 L 68.421875 0 L 68.421875 -46.375 C 68.421875 -52.09375 66.941406 -56.535156 63.984375 -59.703125 C 61.023438 -62.867188 57.046875 -64.453125 52.046875 -64.453125 C 47.046875 -64.453125 43.066406 -62.867188 40.109375 -59.703125 C 37.148438 -56.535156 35.671875 -52.09375 35.671875 -46.375 L 35.671875 0 L 9.484375 0 L 9.484375 -85.421875 L 35.671875 -85.421875 L 35.671875 -74.09375 C 38.316406 -77.863281 41.882812 -80.847656 46.375 -83.046875 C 50.875 -85.242188 55.925781 -86.34375 61.53125 -86.34375 Z M 61.53125 -86.34375 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(528.621739, 676.137634)"><g><path d="M 76.84375 -107.453125 L 76.84375 -34.296875 C 76.84375 -22.960938 73.648438 -14.234375 67.265625 -8.109375 C 60.890625 -1.984375 52.296875 1.078125 41.484375 1.078125 C 30.160156 1.078125 21.078125 -2.132812 14.234375 -8.5625 C 7.398438 -15 3.984375 -24.132812 3.984375 -35.96875 L 30 -35.96875 C 30 -31.476562 30.914062 -28.082031 32.75 -25.78125 C 34.59375 -23.488281 37.25 -22.34375 40.71875 -22.34375 C 43.882812 -22.34375 46.332031 -23.363281 48.0625 -25.40625 C 49.800781 -27.445312 50.671875 -30.410156 50.671875 -34.296875 L 50.671875 -107.453125 Z M 76.84375 -107.453125 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(617.103086, 676.137634)"><g><path d="M 48.375 1.078125 C 40.507812 1.078125 33.460938 -0.195312 27.234375 -2.75 C 21.015625 -5.300781 16.039062 -9.078125 12.3125 -14.078125 C 8.59375 -19.078125 6.628906 -25.097656 6.421875 -32.140625 L 34.296875 -32.140625 C 34.703125 -28.160156 36.078125 -25.125 38.421875 -23.03125 C 40.765625 -20.945312 43.828125 -19.90625 47.609375 -19.90625 C 51.484375 -19.90625 54.539062 -20.796875 56.78125 -22.578125 C 59.03125 -24.367188 60.15625 -26.84375 60.15625 -30 C 60.15625 -32.65625 59.257812 -34.847656 57.46875 -36.578125 C 55.6875 -38.316406 53.492188 -39.75 50.890625 -40.875 C 48.296875 -42 44.597656 -43.273438 39.796875 -44.703125 C 32.859375 -46.835938 27.191406 -48.976562 22.796875 -51.125 C 18.410156 -53.269531 14.632812 -56.429688 11.46875 -60.609375 C 8.3125 -64.796875 6.734375 -70.257812 6.734375 -77 C 6.734375 -87 10.351562 -94.828125 17.59375 -100.484375 C 24.84375 -106.148438 34.285156 -108.984375 45.921875 -108.984375 C 57.765625 -108.984375 67.304688 -106.148438 74.546875 -100.484375 C 81.796875 -94.828125 85.675781 -86.945312 86.1875 -76.84375 L 57.859375 -76.84375 C 57.660156 -80.3125 56.382812 -83.039062 54.03125 -85.03125 C 51.6875 -87.019531 48.675781 -88.015625 45 -88.015625 C 41.84375 -88.015625 39.289062 -87.171875 37.34375 -85.484375 C 35.40625 -83.804688 34.4375 -81.382812 34.4375 -78.21875 C 34.4375 -74.75 36.066406 -72.046875 39.328125 -70.109375 C 42.597656 -68.171875 47.707031 -66.078125 54.65625 -63.828125 C 61.59375 -61.484375 67.226562 -59.238281 71.5625 -57.09375 C 75.894531 -54.957031 79.644531 -51.847656 82.8125 -47.765625 C 85.976562 -43.679688 87.5625 -38.425781 87.5625 -32 C 87.5625 -25.875 86.003906 -20.3125 82.890625 -15.3125 C 79.773438 -10.3125 75.257812 -6.328125 69.34375 -3.359375 C 63.425781 -0.398438 56.4375 1.078125 48.375 1.078125 Z M 48.375 1.078125 "/></g></g></g></svg>

package/examples/vanjs/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/examples/vanjs/src/App.css

@@ -0,0 +1,97 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanjs:hover {
+  filter: drop-shadow(0 0 2em #f44336aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #999;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+  .read-the-docs {
+    color: #555;
+  }
+}

package/examples/vanjs/src/App.js

@@ -0,0 +1,42 @@
+import van from "vanjs-core";
+import Counter from "./components/Counter";
+import "./App.css";
+import "ziko-wrapper/van"
+import Blog ,{title} from "./blog/test.mdx";
+console.log({title})
+
+export const App = () => {
+  const { div, h1, img, p, a } = van.tags;
+  return div(
+    Blog({name : "cyan", __code_style__ : "1c-light"}).vertical(-1, -1),
+    a(
+      { href: "https://vite.dev", target: "_blank" },
+      img({
+        src: "/vite.svg",
+        class: "logo",
+        alt: "Vite logo",
+        width: 96,
+        height: 96,
+      }),
+    ),
+    a(
+      { href: "https://vanjs.org", target: "_blank" },
+      img({
+        src: "/vanjs.svg",
+        class: "logo vanjs",
+        alt: "VanJS logo",
+        width: 96,
+        height: 96,
+      }),
+    ),
+    h1(
+      "Hello VanJS!",
+    ),
+    div({ class: "card" }, Counter()),
+    p({ class: "read-the-docs" }, "Click on the VanJS logo to learn more"),
+  );
+};
+
+const root = document.getElementById("app");
+
+van.add(root, App());

package/examples/vanjs/src/blog/__test__.mdx

@@ -0,0 +1,18 @@
+---
+title : "Vanjs Zikojs Interleaving"
+background : "red"
+__props__ : {
+    name : World KKK
+}
+---
+
+Line1
+Line2
+\{br()}
+Line3
+
+L7
+
+
+1. L1
+2. l2

package/examples/vanjs/src/blog/test.mdx

@@ -0,0 +1,106 @@
+---
+title : "Vanjs Zikojs Interleaving"
+background : "red"
+__props__ : {
+    name ,
+    cel ,
+}
+__code_style__ : "default"
+---
+
+import Dom from "../components/comp.js";
+
+export const a = 1;
+
+```js
+const a = 10
+const b = 20
+console.log({a, b})
+```
+
+
+Hello {background}
+
+
+<Dom> 
+Dm
+*inline* 
+</Dom>
+
+<p>
+** Html **
+</p> 
+
+## Overview 
+
+Hi 👋 I'm working on a library called [Zikojs](https://github.com/zakarialaoui10/ziko.js), It shares many principles with VanJS especially in terms of **declarative hyperscript-style coding** **Strong 2** 
+
+Hi 👋 I'm working on a library called [Zikojs](https://github.com/zakarialaoui10/ziko.js),
+It shares many principles with VanJS especially in terms of **declarative hyperscript-style coding** **Strong 2** .
+
+- p('l')
+
+p("jjj")
+
+## Overview 
+
+Hi 👋 I'm working on a library called [Zikojs](https://github.com/zakarialaoui10/ziko.js), It shares many principles with VanJS, especially in terms of **declarative hyperscript-style coding**
+
+While both frameworks allow you to write code like p("Hello World"), the key difference lies in what is returned :
+- In **Vanjs** it returns a Dom `Node` ( `HTMLElement` or `SVGElement`)
+- In **Zikojs** returns an instance `ZikoUIElement`,  which contains the DOM node internally (accessible via .element) and provides an extended API.
+
+Even though the API looks similar, the return values are structurally different. Recently, I've implemented a **bridge** that enables **seamless interleaving between ZikoJS and VanJS**
+
+## What This Enables ? 
+This appraoch enbales : 
+- Use **VanJS elements** inside ZikoJS layouts.
+- Use **ZikoJS components** inside VanJS tags.
+
+## How It works ? 
+- In order to make vanjs elements compatible with zikojs i added this line inside my library :
+```js
+if (ele[i] instanceof Node) ele[i] = new ZikoUIElement(ele[i]);
+```
+This line perform an implicit conversion from Dom Node to ZikoUIElement before appendig it to the layout
+
+- On the other hand, since I am not the author of VanJS and any additions may increase bundle size, I created a small runtime script that customizes the van.tags and van.add methods. You can check the script here:
+ziko-wrapper/vanify.js
+
+All you need to do is import the side-effect module:
+
+```js
+import "ziko-wrapper/van";
+```
+This will patch VanJS to automatically unwrap ZikoJS elements when used as children.
+
+> [!Tip] 
+> So, practically, all ZikoJS libraries can be considered usable as VanJS libraries and vice versa. 
+
+## Demo
+```javascript
+import van from "vanjs-core";
+import { Flex } from "ziko";
+import { Activity } from "vanjs-lucide";
+import "ziko-wrapper/van";
+
+const { p } = van.tags;
+
+const para = p(
+    Flex(
+        p("Hello From Van"),
+        Activity({ class:"icon", style:"color: turquoise" })
+    )
+    .style({ border: "1px darkblue solid" })
+    .vertical(0, 0)
+);
+
+document.body.append(para)
+```
+
+This demo illustrates interleaving happening in both directions.
+
+> [!IMPORTANT]  
+> For me, once I finish the documentation, I plan to add VanJS plugins as ZikoJS plugins. Now, I want to add some of my libraries as VanJS plugins as well, but I’m wondering whether I should create independent packages with names prefixed by `van-[plugin]`, or if it’s enough to provide a wrapper—like I did in [p5.wrapper](https://github.com/zakarialaoui10/p5.wrapper)—so users just need to import from `ziko-[plugin]/van` ?
+
+

package/examples/vanjs/src/components/Counter.js

@@ -0,0 +1,10 @@
+import van from "vanjs-core";
+
+const Counter = () => {
+  const { button } = van.tags;
+  const counter = van.state(0);
+  return (
+    button({ onclick: () => ++counter.val }, "Counter: ", counter)
+  );
+};
+export default Counter;

package/examples/vanjs/src/components/comp.js

@@ -0,0 +1,13 @@
+// export default function Dom({}, ...children){
+//     console.log({children})
+//     const element = document.createElement("div")
+//     children.forEach(n=>element.append(n))
+//     return element
+// }
+
+import {p} from "ziko"
+
+export default function Dom({children}){
+    // children.forEach(n=>console.log(n.element))
+    return p("ppp");
+}

package/examples/vanjs/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/examples/vanjs/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import MDZ from "mdzjs/vite"
+
+export default defineConfig({
+    plugins:[
+        MDZ({extensions : ["mdx"]})
+    ]
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdzjs",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -10,11 +10,9 @@
     "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
   },
-  "./": {
-    "import": "./src/index.js"
-  },
-  "./vite": {
-    "import": "./src/bundlers/vite.js"
+  "exports": {
+    ".": "./src/index.js",
+    "./vite": "./src/bundlers/vite.js"
   },
   "author": "zakaria elalaoui",
   "keywords": [
@@ -28,6 +26,7 @@
   "license": "MIT",
   "dependencies": {
     "acorn": "^8.14.0",
+    "highlight.js": "^11.11.1",
     "htmlparser2": "^9.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",

package/preview/index.html

@@ -10,7 +10,7 @@
       rel="stylesheet"
     />
     <link href="https://fonts.cdnfonts.com/css/cheeronsta" rel="stylesheet">
-    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.css">
 
             <style>

package/preview/main.js

@@ -6,4 +6,4 @@ UI({name : "from MDZjs"})
     .style({
         border :"1px darkblue solid",
         padding : "15px",
-    })
+})