mdzjs 0.0.4 → 0.0.6

package/examples/vanjs/package.json

@@ -14,6 +14,8 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
+    "mdzjs": "^0.0.5",
+    "p5.wrapper": "^0.0.1",
     "vanjs-core": "^1.5.5",
     "ziko-wrapper": "^0.0.25"
   }

package/examples/vanjs/src/App.css

@@ -22,13 +22,23 @@ a:hover {
   color: #535bf2;
 }
 
-body {
+.counter{
+  margin: 10px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width : 50vw;
+  height: 120px;
+  border : 2px solid darkcyan;
+  border-radius: 10%;
+}
+/* body {
   margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
-}
+} */
 
 h1 {
   font-size: 3.2em;
@@ -71,6 +81,7 @@ button {
   background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
+  height: 50px;
 }
 button:hover {
   border-color: #646cff;

package/examples/vanjs/src/App.js

@@ -1,7 +1,5 @@
 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})
 
@@ -9,31 +7,31 @@ 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"),
+    // 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"),
   );
 };
 

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

@@ -1,106 +1,68 @@
 ---
 title : "Vanjs Zikojs Interleaving"
-background : "red"
 __props__ : {
-    name ,
-    cel ,
+    counter_start : 0
 }
-__code_style__ : "default"
 ---
 
-import Dom from "../components/comp.js";
+import Counter from "../components/Counter.js"
+import Sketch from "../components/Sketch.js"
 
-export const a = 1;
+# Hello World
 
-```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** .
+Introducing **MDZ** a Markdown preprocessor designed for [Zikojs](https://github.com/zakarialaoui10)
+Thanks to the [interleaving](https://github.com/vanjs-org/van/issues/456) capability between **Zikojs** and **VanJS**, MDZ is fully compatible with VanJS as well.
 
-- p('l')
+The example below show how it works.
 
-p("jjj")
+To define a component, you can use a Hyperscript-based syntax : 
+```js
+// compoenents/Counter.js
+import van from "vanjs-core";
 
-## Overview 
+const Counter = ({start = 0}={}) => {
+  const { button } = van.tags;
+  const counter = van.state(start);
+  return (
+    button({ onclick: () => ++counter.val }, "Counter: ", counter)
+  );
+};
+export default Counter;
 
-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.
+To integrate the component inside MDZ, use JSX-like syntax :
 
-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**
+```jsx
+<Counter start={5} />
+```
 
-## What This Enables ? 
-This appraoch enbales : 
-- Use **VanJS elements** inside ZikoJS layouts.
-- Use **ZikoJS components** inside VanJS tags.
+The MDZ file is parsed as a JavaScript module and returns the UI component as its default export.
+Additionally, any declared attributes are exposed as named exports
 
-## 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]);
+import Blog ,{title} from "./blog/test.mdx";
+console.log(title) // Vanjs Zikojs Interleaving
 ```
-This line perform an implicit conversion from Dom Node to ZikoUIElement before appendig it to the layout
+In this case, Blog behaves like a JavaScript function with destructured props : (\{ counter_start = 0 } = \{}) 
 
-- 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
+this design allows you to pass props to any part of the Markdown content — including passing them as props to embedded VanJS components.
 
-All you need to do is import the side-effect module:
+<Counter start={counter_start} />
 
-```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)
-```
+## P5-wrapper Example :
 
-This demo illustrates interleaving happening in both directions.
+First of all [P5.wrapper](https://github.com/zakarialaoui10/p5.wrapper) is another Zikojs and VanJS plugin that enables P5.js to run in a declarative and component-based way.
+It's not ready for production yet, but I've included this demo to showcase how it works.
 
-> [!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` ?
+<Sketch />
 
+## Show Supports
 
+If you find this project useful or inspiring, consider showing your support by giving a star to the libraries that make it all possible : 
+- => [Zikojs](https://github.com/zakarialaoui10/ziko.js) The core UI engine that powers reactive rendering in this project.
+- => [Mdzjs](https://github.com/zakarialaoui10/mdzjs) The Markdown preprocessor that lets you use JSX-like components and JavaScript expressions inside Markdown files.
+- => [Vanjs](https://github.com/vanjs-org/van) A lightweight UI library compatible with Zikojs, used here for interleaving component rendering.
+- => [Ziko-Wrapper](https://github.com/zakarialaoui10/ziko-wrapper) The bridge that enables using Zikojs components inside Vanjs seamlessly without compatibility issues.
+- => [p5.wrapper](https://github.com/zakarialaoui10/p5.wrapper) A declarative wrapper that allows embedding P5.js sketches as components inside your app.

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

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

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

@@ -0,0 +1,24 @@
+import { P5Canvas2D, P5Circle } from "p5.wrapper/van";
+import { cos, sin, PI } from "ziko";
+
+const c1 = P5Circle({ r : 40})
+             .fill("blue")
+             .stroke("green");
+const c2 = P5Circle({x:0, y:0, r:50})
+             .fill("darkblue")
+             .stroke("green");
+             
+const Canvas = () => P5Canvas2D(c1, c2)
+  .style({
+    outline : "2px darkblue solid",
+    margin : "50px auto"
+  })
+  .size("250px", "250px")
+  .view(-100, -100, 100, 100)
+  .setCustomLoopCallback(e => {
+    c1.posX(75 * cos((e.iter * PI) / 50));
+    c1.posY(75 * sin((e.iter * PI) / 50));
+    c2.setRadius(20*(1.5+cos(e.iter * PI/50)))
+  });
+
+export default Canvas

package/examples/vanjs/vite.config.js

@@ -3,6 +3,9 @@ import MDZ from "mdzjs/vite"
 
 export default defineConfig({
     plugins:[
-        MDZ({extensions : ["mdx"]})
+        MDZ({
+            extensions : ["mdx"],
+            useVanJs : true
+        })
     ]
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdzjs",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -35,7 +35,8 @@
     "rollup": "^4.24.0",
     "unified": "^11.0.5",
     "yaml": "^2.6.1",
-    "ziko": "^0.0.27"
+    "ziko": "^0.0.27",
+    "ziko-wrapper": "^0.0.25"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.0",

package/preview/test.mdz

@@ -10,6 +10,8 @@ import InteractiveBlock from "./Components/InteractiveBlock.js"
 
 # Hello world 
 
+- JJ **ll**
+
 <Dom text="Hello from dom" color="red" />
 <InteractiveBlock />
 

package/src/bundlers/vite.js

@@ -1,11 +1,11 @@
 import { transpileMDZ } from "../transpiler/index.js";
-export default function ViteMDZ({extensions = [".mdx"]}={}){
+export default function ViteMDZ({extensions = [".mdx"], useVanJs = false}={}){
     return {
       name: 'MDZ',
       transform(src, id) {
         if (id.endsWith('.mdz')||extensions.some(ext=>id.endsWith(ext))) {
           return {
-            code: transpileMDZ(src),
+            code: transpileMDZ(src, useVanJs),
             map: null,
           };
         }

package/src/transpiler/transpile.js

@@ -2,7 +2,7 @@ import { parseMDZ } from "./parser.js";
 import { processMDZAST } from "./process.js";
 import { stringifyProps } from "../utils/parse-yml.js";
 
-const transpileMDZ=(Markdown, CodeStyle = "1c-light")=>{
+const transpileMDZ=(Markdown, useVanJs = false, CodeStyle = "1c-light")=>{
     const ast = parseMDZ(Markdown);
     const {attrs, props, esm, statements, hasCode}= processMDZAST(ast)
     const body = [
@@ -16,6 +16,7 @@ const transpileMDZ=(Markdown, CodeStyle = "1c-light")=>{
         "return UI }"
       ]
     if(hasCode) body.unshift(`import("highlight.js/styles/${CodeStyle}.css")`);
+    if(useVanJs) body.unshift('import "ziko-wrapper/van"')
     return body.join("\n");
 }
 export{

package/src/utils/hyperscript.js

@@ -1,11 +1,12 @@
 export const hyperscript = (tag, attrs, children="") => {
     const HasChildren = !!children;
 
-    if(tag === "p"){
-        children = children + ',""'
+    if(tag){
+        children = ',""' + children + ',""'
         const splitted = splitQuotedLines(children);
         children = insertBetween(splitted, 'h("br")')
         children[children.length - 1] = children.at(-1).slice(0, -3)
+        children[0] = children.at(0).slice(3)
     }
     return `h("${tag}", ${attrs}${HasChildren ?`, ${children}` : ""})`
 }

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

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

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

@@ -1,13 +0,0 @@
-// 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");
-}