van-mdx 0.0.0 → 0.0.2

package/README.md

@@ -4,6 +4,8 @@ A Markdown preprocessor for [Vanjs](https://vanjs.org/).
 It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
 
 ## 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 : 
 
@@ -28,10 +30,10 @@ export default defineConfig({
 - ***Article.mdx :***
 ```jsx
 ---
- title : Van-Mdx Starter 
- name : world
+ title : "Van-Mdx Starter" 
+ name : "world"
  __props__ : 
-   background : tomato
+   background : "tomato"
    data : []
 ---
 

package/package.json

@@ -1,27 +1,38 @@
 {
   "name": "van-mdx",
-  "version": "0.0.0",
-  "description": "Markdown for Vanjs",
+  "version": "0.0.2",
+  "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.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.0.8",
+    "mdzjs": "^0.0.10",
     "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"
+    "ziko": "^0.0.29",
+    "ziko-server": "^0.0.7"
   }
 }

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

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

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

@@ -0,0 +1,39 @@
+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.js → vite/index.js}

@@ -1,4 +1,4 @@
-import { transpileMD } from "../transpiler/index.js";
+import { transpileMD } from "../../transpiler/index.js";
 export default function VanMdx(){
     return {
       name: 'VanMdx',

package/src/transpiler/process.js

@@ -57,13 +57,15 @@ const processMDAST = (markdownAST) => {
           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>${formatedCode}</pre>').element`
+          return `HTMLWrapper('<pre><code>${formatedCode}</code></pre>').element`
         }  
         case 'blockquote': {
           const childNodes = node.children.map(transformNode).join(', ');
@@ -78,10 +80,6 @@ const processMDAST = (markdownAST) => {
           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(', ');
@@ -113,6 +111,12 @@ const processMDAST = (markdownAST) => {
           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" : {