van-mdx 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ZAKARIA ELALAOUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,97 @@
+# van-mdx
+
+A Markdown preprocessor for [Vanjs](https://vanjs.org/). 
+It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
+
+## Demos : 
+
+## Install : 
+
+```bash
+npm i van-mdx@latest
+```
+
+## Config :
+
+```js
+import {defineConfig} from "vite"
+import VanMdx from "van-mdx/vite"
+export default defineConfig({
+    plugins : [
+        VanMdx()
+    ]
+})
+```
+
+## Usage :
+
+- ***Article.mdx :***
+```jsx
+---
+ title : Van-Mdx Starter 
+ name : world
+ __props__ : 
+   background : tomato
+   data : []
+---
+
+import data from "./data.js";
+import InteractiveComponent from "./InteractiveComponent.js";
+
+# Hello {name}
+
+<InteractiveComponent data={data} background={tomato}/>
+```
+
+```js
+// main.js
+import van from "vanjs-core"
+import InteractiveArticle,{title} from "./Article.mdx"
+
+const {article} = van.tags;
+
+const Article_1 = article(
+    InteractiveArticle({
+        background : "yellow"
+    })
+)
+
+van.add(
+    Article_1
+)
+```
+
+## Features :
+
+- ***Simple Integration :*** Write Markdown as usual, and inject Vanjs components wherever needed.
+- ***Extensible :***  Create custom interactive components using `Vanjs` and use them in any Markdown file.
+- ***Reusable :*** `Van-Mdx` exports a default functional component, allowing you to call it multiple times with different data, enabling dynamic and versatile use.
+- ***Frontmatter Support :*** Use `YAML` syntax in to include metadata like titles, descriptions, or configurations in your Markdown files, and define props to pass data dynamically to Zikojs components.
+- ***Markdown Support :*** Use standard Markdown syntax for writing content.
+- ***HTML Support :*** Use standard HTML syntax for writing content.
+- ***JSX Syntax :*** Declare component using Vanjs Hyperscript syntax, and render it using JSX
+- ***Props :*** Pass data to components through props, enabling dynamic rendering and customization of content within your Markdown files.
+- ***Attributes:*** 
+- ***ESM : :***  Supports ECMAScript Modules (ESM), allowing you to import and export modules
+- ***Expressions :*** Van-Mdx lets you use JS expressions inside curly braces, like Hello {name}. These expressions can be full JS programs, as long as they evaluate to something renderable. For example, you can use an IIFE like this:
+```js
+Hello {(()=>{
+    const names = ["world", "everyone"];
+    const {length} = names
+    return names[Math.floor(Math.random()*length)]
+})()}
+```
+- ***Internal scripts :*** Include JS logic that runs alongside Van-Mdx components but isn't rendered in the output. They can initialize variables or perform side effects...
+- ***Interleaving :*** You can use inline markdown elements inside HTML or Vanjs Components 
+```jsx
+<p>
+ ***Hello {name}***
+</p>
+```
+
+
+# ⭐️ Show your support
+If you appreciate the project, kindly demonstrate your support by giving it a star!
+
+# Licence
+This projet is licensed under the terms of MIT License

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "van-mdx",
+  "version": "0.0.0",
+  "description": "Markdown for Vanjs",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "exports": {
+    ".": "./src/index.js",
+    "./vite": "./src/bundlers/vite.js"
+  },
+  "author": "zakaria elalaoui",
+  "license": "MIT",
+  "dependencies": {
+    "highlight.js": "^11.11.1",
+    "mdzjs": "^0.0.8",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-mdx": "^3.1.0",
+    "remark-parse": "^11.0.0",
+    "unified": "^11.0.5",
+    "vanjs-core": "^1.5.5",
+    "ziko": "^0.0.27"
+  }
+}

package/src/bundlers/vite.js

@@ -0,0 +1,15 @@
+import { transpileMD } from "../transpiler/index.js";
+export default function VanMdx(){
+    return {
+      name: 'VanMdx',
+      transform(src, id) {
+        if (id.endsWith('.mdx')) {
+          return {
+            code: transpileMD(src),
+            map: null,
+          };
+        }
+      },
+    };
+  }
+  

package/src/transpiler/index.js

@@ -0,0 +1,2 @@
+export * from "./process.js";
+export * from "./transpile.js";

package/src/transpiler/process.js

@@ -0,0 +1,168 @@
+import { 
+  componentType,
+  processAttribute,
+  parseYml,
+  hyperscript
+} from "../utils/index.js"
+import hljs from "highlight.js"
+const processMDAST = (markdownAST) => {
+    let hasCode = false;
+    const transformNode = (node) => {
+      switch(node.type){
+        case 'mdxjsEsm' : {
+          return {
+            type : "script",
+            value : node.value
+          }
+        };
+        case 'text' : {
+          const text = node.value;
+          const escaped = text.replace(/"/g, '\\"');
+          return `"${escaped}"`;
+        };
+        case 'mdxTextExpression' : {
+          const {value} = node
+          return value
+        };
+        case 'heading' : {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript(`h${node.depth}`,"{}", childNodes);
+        };
+        case 'paragraph' : {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("p","{}", childNodes)
+        };
+        case 'strong': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("strong","{}", childNodes);
+        };
+        case 'emphasis': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("em","{}", childNodes);
+        };
+        case 'link': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("a", `{ href: "${node.url}" }`, childNodes);
+        };
+        case 'image': {
+          hyperscript("img", `{ src: "${node.url}", alt: "${node.alt || ''}`)
+          return `h('img', { src: "${node.url}", alt: "${node.alt || ''}" })`;
+        };
+        case 'list': {
+          const listTag = node.ordered ? 'ol' : 'ul';
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript(listTag, "{}", childNodes);
+        };
+        case 'listItem': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("li", "{}", childNodes);
+        };
+  
+        case 'code': {
+          hasCode = true;
+          // const language = node.lang ? `{ 'data-lang': '${node.lang}' }` : '';
+          const highlightedCode = hljs.highlightAuto(node.value, [node.lang || '']).value;
+          const formatedCode = highlightedCode.replace(/(\r\n|\n|\r)/g, "<br>")    
+          return `HTMLWrapper('<pre>${formatedCode}</pre>').element`
+        }  
+        case 'blockquote': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("blockquote", "{}", childNodes);
+        }
+        case 'thematicBreak': {
+          return `van.tags.hr()`;
+        }
+        case 'table': {
+          const headerRows = node.children[0].children.map(transformNode).join(', ');
+          const bodyRows = node.children.slice(1).map(transformNode).join(', ');
+          const thead = hyperscript("thead", "{}", hyperscript("tr", "{}", headerRows));
+          const tbody = hyperscript("tbody", "{}", bodyRows);
+          return hyperscript("table", "{}", [thead, tbody].join(","))
+          // console.log({thead, tbody})
+          // const thead = `h('thead', {}, h('tr', {}, ${headerRows})`;
+          // const tbody = `h('tbody', {}, ${bodyRows})`
+          // return `h('table', {}, ${thead}), ${tbody}).style({border : "1px solid darkblue", borderCollapse: "collapse"}`;
+        }
+        case 'tableRow': {
+          const cells = node.children.map(transformNode).join(', ');
+          return `${hyperscript("tr", "{}", cells)}`
+          return `${hyperscript("tr", "{}", cells)}.style({border : "1px solid darkblue", borderCollapse: "collapse"})`
+        }
+        case 'tableCell': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return `${hyperscript("td", "{}", childNodes)}`
+          return `${hyperscript("td", "{}", childNodes)}.style({border : "1px solid darkblue", borderCollapse: "collapse", padding : "5px"})`
+        }
+        case 'yaml':{
+          const {props, attrs} = parseYml(node.value)
+          return {
+            type : "yaml",
+            props, 
+            attrs
+          }
+        }
+        case 'mdxJsxTextElement': {
+          const {name, attributes, children} = node;
+          const childNodes = children.map(transformNode).join(', ');
+          const hasChildren = childNodes.length > 0;
+          return `van.tags.${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+        };
+        case 'mdxJsxFlowElement':{
+          const {name, attributes, children} = node;
+          const childNodes = children.map(transformNode).join(', ');
+          const hasChildren = childNodes.length > 0;
+          switch(componentType(name)){
+            case "jsx" : {
+              return `${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+            }
+            case "html" : {
+              return `van.tags.${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+            }
+            case "script" : {
+              const statements = [];
+              for(let i=0; i<node.children.length; i++) statements.push(node.children[i].children[0].value)
+              return {
+                type : "script",
+                isScript : true,
+                value : statements.join("\n")
+              }
+            }
+          }
+        }
+        default : {
+          console.log(node.type)
+        }
+      }
+      return 'null';
+    };
+    let esm = [];
+    let props = "";
+    let attrs = "";
+
+    const statements = []
+    markdownAST.children.forEach((node) => {
+      switch(node.type){
+        case 'yaml' : {
+          const Transformed = transformNode(node)
+          props = Transformed.props;
+          attrs = Transformed.attrs;
+        } break;
+        case 'mdxjsEsm' : esm.push(node.value); break;
+        default : {
+          const Transformed = transformNode(node);
+          if(Transformed.isScript) statements.push(Transformed.value);
+          else statements.push(`__items__.push(${Transformed})`)
+        }
+      }
+    });
+    return {
+      attrs,
+      props,
+      esm,
+      statements,
+      hasCode
+    }
+  };
+export {
+    processMDAST
+}

package/src/transpiler/transpile.js

@@ -0,0 +1,23 @@
+import { parseMarkdown } from "mdzjs";
+import { processMDAST } from "./process.js";
+import { stringifyProps } from "../utils/parse-yml.js";
+
+const transpileMD=(Markdown)=>{
+    const ast = parseMarkdown(Markdown);
+    const {attrs, props, esm, statements, hasCode}= processMDAST(ast)
+    const body = [
+        'import van from "vanjs-core"',
+        'import { HTMLWrapper } from "ziko"',
+        attrs,
+        ...esm,
+        `export default (${stringifyProps(props)})=>{`,
+        'const __items__ = []',
+        ...statements,
+        "const UI = van.tags.div(...__items__)",
+        "return UI }"
+      ]
+    return body.join("\n");
+}
+export{
+    transpileMD
+}

package/src/utils/component-type.js

@@ -0,0 +1,5 @@
+export const componentType = tag => {
+    if(tag === "script") return "script";
+    if(tag.toLowerCase() !== tag || tag.includes(".")) return "jsx";
+    return "html"
+}

package/src/utils/hyperscript.js

@@ -0,0 +1,30 @@
+export const hyperscript = (tag, attrs, children="") => {
+    const HasChildren = !!children;
+
+    if(tag){
+        children = ',""' + children + ',""'
+        const splitted = splitQuotedLines(children);
+        children = insertBetween(splitted, 'van.tags.br()')
+        children[children.length - 1] = children.at(-1).slice(0, -3)
+        children[0] = children.at(0).slice(3)
+    }
+    return `van.tags.${tag}(${attrs}${HasChildren ?`, ${children}` : ""})`
+}
+
+function splitQuotedLines(str) {
+  return str
+    .slice(1, -1)                        
+    .split(/\r\n|\r|\n/)                
+    .map(line => `"${line}"`);          
+}
+
+function insertBetween(arr, value) {
+  const result = [];
+  for (let i = 0; i < arr.length; i++) {
+    result.push(arr[i]);
+    if (i < arr.length - 1) {
+      result.push(value);
+    }
+  }
+  return result;
+}

package/src/utils/index.js

@@ -0,0 +1,4 @@
+export { componentType } from "./component-type.js";
+export { processAttribute } from "./process-attributes.js";
+export { parseYml } from "./parse-yml.js";
+export { hyperscript } from "./hyperscript.js"

package/src/utils/parse-yml.js

@@ -0,0 +1,23 @@
+import { parse } from 'yaml'; 
+
+const parseYml = yml => {
+    const {__props__, ...__attrs__} = yml ? parse(yml) : {__props__ : {}} ;
+    const HasAttributs = Object.keys(__attrs__).length > 0
+    return {
+        props : __props__,
+        attrs : HasAttributs
+                ?[
+                    `const {${Object.keys(__attrs__).join(",")}} = ${JSON.stringify(__attrs__,"",2)}`,
+                    `export {${Object.keys(__attrs__).join(", ")}}`
+                ].join("\n")
+                : "",
+    }
+}
+
+const stringifyProps = (props) =>{
+    return props
+            ?`{${Object.entries(props).map(([key, value]) => `${key} = ${JSON.stringify(value)}`).join(", ")}}={}`
+            :""
+}
+
+export {parseYml, stringifyProps}

package/src/utils/process-attributes.js

@@ -0,0 +1,13 @@
+export const processAttribute = (attributes) =>{
+    if(attributes.length === 0) return "{}"
+    let attr = []
+    for(let i=0; i<attributes.length ; i++){
+        let {name, value} = attributes[i]
+        attr.push({
+            name,
+            value : typeof value === "string" ? value : value.value,
+            isExpression : typeof value !== "string"
+        })
+    }
+    return `{${attr.map(({name, value, isExpression})=>`${name}:${isExpression ? value : `"${value}"`}`).join(", ")}}` 
+}