van-mdx 0.4.0 → 0.6.0

package/README.md

@@ -6,7 +6,7 @@ It combines the simplicity of Markdown syntax with the power and flexibility of
 ## Demos : 
  - ***Hello World*** : 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/zakarialaoui10/van-mdx/tree/main/examples/hello-world?file=src%2Fcontent%2FArticle.mdx)
-
+ 
 ## Install : 
 
 ```bash

package/package.json

@@ -1,38 +1,39 @@
-{
-  "name": "van-mdx",
-  "version": "0.4.0",
-  "description": "Markdown preprocessor for Vanjs",
-  "type": "module",
-  "main": "index.js",
-  "keywords": [
-    "vanjs",
-    "astro-integration",
-    "mdx",
-    "markdown",
-    "preprocessor"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "exports": {
-    ".": "./src/index.js",
-    "./vite": "./src/bundlers/vite/index.js",
-    "./astro": "./src/bundlers/astro/index.js",
-    "./astro/entry-client": "./src/bundlers/astro/entry-client.js",
-    "./astro/entry-server": "./src/bundlers/astro/entry-server.js"
-  },
-  "author": "zakaria elalaoui",
-  "license": "MIT",
-  "dependencies": {
-    "highlight.js": "^11.11.1",
-    "mdzjs": "^0.10.1",
-    "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.45.2",
-    "ziko-server": "^0.9.4"
-  }
-}
+{
+  "name": "van-mdx",
+  "version": "0.6.0",
+  "description": "Markdown preprocessor for Vanjs",
+  "type": "module",
+  "main": "index.js",
+  "keywords": [
+    "vanjs",
+    "astro-integration",
+    "mdx",
+    "markdown",
+    "preprocessor"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/loaders/*/index.js",
+    "./astro": "./src/bundlers/astro/index.js",
+    "./astro/entry-client": "./src/bundlers/astro/entry-client.js",
+    "./astro/entry-server": "./src/bundlers/astro/entry-server.js"
+  },
+    "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zakarialaoui10/van-mdx.git"
+  },
+  "author": "zakaria elalaoui",
+  "license": "MIT",
+    "bugs": {
+    "url": "https://github.com/zakarialaoui10/van-mdx/issues"
+  },
+  "homepage": "https://github.com/zakarialaoui10/van-mdx#readme",
+  "dependencies": {
+    "mdzjs": "^0.15.1",
+    "vanjs-core": "^1.6.0",
+    "ziko": "^0.64.0"
+  }
+}

package/src/loaders/vite/index.js

@@ -0,0 +1,35 @@
+import { transpileMD } from '../../transpiler/index.js';
+
+export default function ViteMDVan({ extensions = ['.mdx'], plugins } = {}) {
+  return {
+    name: 'van-mdx',
+    async transform(src, id) {
+      if (id.endsWith('.mdv') || extensions.some((ext) => id.endsWith(ext))) {
+        const code = await transpileMD(src, {plugins});
+        return {
+          code,
+          map: null,
+        };
+      }
+    },
+
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith('.mdv')) {
+        // console.log({file})
+        server.ws.send({
+          type : 'full-reload'
+        })
+        // server.ws.send({
+        //   type: 'custom',
+        //   event: 'custom-update',
+        //   data: {
+        //     file,
+        //     timestamp: Date.now(),
+        //   },
+        // });
+
+        return [file];
+      }
+    },
+  };
+}

package/src/transpiler/index.js

@@ -1,2 +1,33 @@
-export * from "./process.js";
-export * from "./transpile.js";
+import{
+    parseMD,
+    processMDAST,
+    stringifyProps,
+    transformeAttrs
+} from 'mdzjs'
+
+const transpileMD = async (Markdown, {plugins = []} = {})=>{
+    const {ast, frontmatter} = await parseMD(Markdown.trimStart(), ...plugins);
+    const {esm, statements, hasCode, Tags}= processMDAST(ast);
+
+    const { 'Van.Props': props, ...attrs } = frontmatter;
+
+    const body = [
+        "import van from 'vanjs-core'",
+        hasCode ?? "import {HTMLWrapper as _HTMLWrapper} from 'ziko/ui';",
+        hasCode ?? "const HTMLWrapper = (html) => _HTMLWrapper(html).element;",
+        ...esm,
+        transformeAttrs(attrs),
+        `export default (${stringifyProps(props)})=>{`,
+        `const {${[...Tags].join(', ')}} = van.tags`,
+        'const __items__ = []',
+        ...statements,
+        'return __items__',
+        '}',
+      ]
+
+    // if(hasCode) body.unshift(`import("highlight.js/styles/${CodeStyle}.css")`);
+    return body.filter(Boolean).join("\n");
+}
+export{
+    transpileMD
+}

package/src/bundlers/astro/entry-client.js

@@ -1,20 +0,0 @@
-export default function (wrapper) {
-    return (Component, props, { default: children, ...slotted }, {client}) => {
-        // if (!wrapper.hasAttribute("ssr")){
-        //     console.log("ssr")
-        //     return
-        // }
-        console.log({wrapper})
-        console.log(`Client ...`)
-        wrapper.setAttribute("data-engine","van-mdx")
-        const properties = props ?? {};
-        switch(client){
-            case "only" : wrapper.append(Component(properties)); break;
-            default : {
-                wrapper.innerHTML = ""
-                console.log(`Client Hydration : ${Component}`)
-                wrapper.append(Component(properties)); break;
-            }
-        }
-    };
-}

package/src/bundlers/astro/entry-server.js

@@ -1,19 +0,0 @@
-import {renderDomToString } from "ziko-server/server-only-utils"
-function check(Component, attributes) {
-    if (typeof Component !== "function") return false;
-	return true
-}
-async function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
-    console.log(`renderToStaticMarkup : ${Component}`)
-    const UI = Component(props)
-    const html = renderDomToString(UI)
-    return { 
-        html,
-     };
-}
-
-export default {
-    name : "astro-van-mdx",
-    check,
-    renderToStaticMarkup
-}

package/src/bundlers/astro/index.js

@@ -1,39 +0,0 @@
-import ViteVanMdx from "../vite/index.js"
-const AstroVanMdx = () => ({
-    name: "astro-van-mdx",
-    hooks: {
-        "astro:config:setup": async ({ updateConfig, addRenderer }) => {
-            updateConfig({
-              vite : {
-                plugins : [
-                  ViteVanMdx()
-                ]
-              }
-            })            
-            addRenderer({
-                name: "astro-van-mdx",
-                serverEntrypoint: "van-mdx/astro/entry-server",
-                clientEntrypoint: "van-mdx/astro/entry-client",
-            });
-        },
-    },
-});
-export default AstroVanMdx;
-
-
-// import ViteVanMdx from "../vite/index.js";
-// const AstroVanMdx = () => ({
-//     name: "astro-mdzjs",
-//     hooks: {
-//         "astro:config:setup": async ({ updateConfig }) => {
-//           updateConfig({
-//             vite : {
-//               plugins : [
-//                 ViteVanMdx()
-//               ]
-//             }
-//           })
-//         },
-//     },
-// });
-// export default AstroVanMdx;

package/src/bundlers/vite/index.js

@@ -1,15 +0,0 @@
-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/process.js

@@ -1,172 +0,0 @@
-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 'inlineCode' : {
-          return `van.tags.code("${node.value}")`
-        }
-        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><code>${formatedCode}</code></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(","))
-        }
-        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" : {
-              console.log({
-                Component : name, 
-                children,
-              })
-              const f = `${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`
-              console.log({f})
-              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

@@ -1,23 +0,0 @@
-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

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

package/src/utils/hyperscript.js

@@ -1,30 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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