mdzjs 0.0.0 → 0.0.2

package/preview/package.json

@@ -12,6 +12,12 @@
     "vite": "^5.4.8"
   },
   "dependencies": {
-    "ziko": "^0.0.16"
+    "highlight.js": "^11.11.0",
+    "jsdom": "^25.0.1",
+    "prism": "^4.1.2",
+    "ziko": "^0.0.27",
+    "ziko-gl": "^0.0.3",
+    "ziko-lottie": "^0.0.7",
+    "ziko-wrapper": "^0.0.25"
   }
 }

package/preview/test.mdz

@@ -1,21 +1,37 @@
 ---
-modules : 
- - import InteractiveBlock from "./InteractiveBlock.js"
-title : MDZ
-background : tomato
+title : "MDZ Overview"
+background : "red"
+__props__ : {
+    name : World KKK
+}
 ---
-**MDZ** (Markdown for ***zikojs***) is a format that allows you to append Zikojs Elements directly within Markdown.
+import {Dom} from "./Components/Dom"
+import InteractiveBlock from "./Components/InteractiveBlock.js"
 
-It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
+# Hello world 
 
-Here’s an example of an interactive block rendered within this MDZ file:
+<Dom text="Hello from dom" color="red" />
+<InteractiveBlock />
 
-<InteractiveBlock data="Hello  from MDZ" color="cyan"/>
+Hello **{name}**
 
-### Features of MDZ:
-1- **Simple Integration :** Write Markdown as usual, and inject ZikoJS elements wherever needed.
-2- **Frontmatter Support :** In this example, the title of the document is set dynamically through the frontmatter.
-
-3- **Extensible :** Create custom components like InteractiveBlock and use them in any Markdown file.
+|Addon|Dependncies|
+|-|-|
+|ziko-gl|threejs|
+|ziko-code|codemirror|
+|ziko-lottie|lottie-web|
 
+```js
+console.log({a:1})
+fuction B(){
+ return [
+   1,
+   2
+ ]
+}
+```
 
+```py
+ print(10)
+ A=[1,2,3]
+```

package/preview/test.mdz.__

@@ -0,0 +1,24 @@
+---
+modules : 
+ - import InteractiveBlock from "./InteractiveBlock.js"
+ - import Scene from "./Scene.js"
+title : MDZ
+background : tomato
+---
+**MDZ** (Markdown for ***zikojs***) is a format that allows you to append Zikojs Elements directly within Markdown.
+
+It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
+
+Here’s an example of an interactive block rendered within this MDZ file:
+
+<InteractiveBlock data="Hello  from MDZ" color="cyan"/>
+
+### Features of MDZ:
+1- **Simple Integration :** Write Markdown as usual, and inject ZikoJS elements wherever needed.
+2- **Frontmatter Support :** In this example, the title of the document is set dynamically through the frontmatter.
+
+3- **Extensible :** Create custom components like InteractiveBlock and use them in any Markdown file.
+
+<Scene />
+
+

package/preview/vite.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
-import { MDZ } from "../src/vite/index.js";
+// import { MDZ } from "../src/vite/index.js";
+import ViteMDZ  from "../src/bundlers/vite.js"
 export default defineConfig({
-    plugins : [MDZ()]
+    plugins : [ViteMDZ()]
 })

package/rollup.config.js

@@ -57,7 +57,7 @@ isProduction &&
   );
 
 export default {
-  input: "src/index.js",
+  input: "v2/index.js",
   output,
   external: ["ziko"],
   plugins: [

package/src/bundlers/vite.js

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

package/src/example.md

@@ -0,0 +1,3 @@
+---
+title : hello
+---

package/src/index.js

@@ -1,2 +1 @@
-export {parseMDZ} from "./parser/index.js"
-export {MDZ} from "./vite/index.js"
+export * from "./transpiler/index.js"

package/src/test.js

@@ -1,21 +1,49 @@
-import { getZikoScript } from "./converter/index.js";
-const markdownContent = `
----
-modules:
- - import Component from "./Component" 
- - import OtherComponent from "./OtherComponent"
- - import OtherComonenetWithProps from "./OtherComonenetWithProps"
-title: MDZ
+// import { cleanMD } from "./pre-parse/clean-md.js";
+import { parseMDZ, transpileMDZ } from "./transpiler/index.js";
+import { parseYml } from "./utils/parse-yml.js";
+
+const md = `---
+title : get started
+id : 1
+__props__ : 
+ color : red
+ size : 10
 ---
-Para
-[Link](#hi)
 
-<Component />
+<script>
+ console.log(1)
+ console.log(2)
+
+ console.log(3)
+</script>
+
+import A from "./A"
+export const b = 10;
+
+Hello {name} mm {m} [mmmm](kkk)
+
+<B exp={1+1} str="kk">
+  # hi
+  # hi
+</B>
+
+# Hi 
+## HI {Ziko}
+
+
+|A|B|
+|-|-|
+
+`
 
-line2
+// const md = `---
+// title : Hi
+// ---
+// `
+const ast = parseMDZ(md)
+// console.log(ast.children.at(-1))
+const js = transpileMDZ(md)
+console.log(js)
+// console.log(JSON.stringify(ast, null, 2))
 
-<OtherComponent />
-<OtherComonenetWithProps data="hello" />
-`;
-const script = getZikoScript(markdownContent);
-console.log(script)
+// parseYml('a : 1\n__props__ : \n d : 2\n e : 1')

package/src/transpiler/index.js

@@ -0,0 +1,3 @@
+export { parseMDZ } from "./parser.js";
+export { processMDZAST } from "./process.js";
+export { transpileMDZ } from "./transpile.js";

package/src/transpiler/parser.js

@@ -0,0 +1,14 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkGFM from "remark-gfm";
+import remarkMdx from "remark-mdx"
+
+const parseMDZ = (markdown) => unified() 
+    .use(remarkParse)
+    .use(remarkGFM)
+    .use(remarkFrontmatter, ['yaml'])
+    .use(remarkMdx)
+    .parse(markdown)
+
+export{parseMDZ}

package/src/transpiler/process.js

@@ -0,0 +1,172 @@
+import { 
+  componentType,
+  processAttribute,
+  parseYml,
+  hyperscript
+} from "../utils/index.js"
+import hljs from "highlight.js"
+const processMDZAST = (markdownAST) => {
+    const transformNode = (node) => {
+      switch(node.type){
+        case 'mdxjsEsm' : {
+          return {
+            type : "script",
+            value : node.value
+          }
+        }
+        case 'text' : {
+          const text = node.value;
+          return `"${text}"`
+        }
+        case 'mdxTextExpression' : {
+          const {value} = node
+          return value
+        }
+        case 'heading' : {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript(`h${node.depth}`,"{}", childNodes);
+          // return `h('h${node.depth}', {}, ${childNodes})`;
+        }
+        case 'paragraph' : {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("p","{}", childNodes)
+          // return `h('p', {}, ${childNodes})` 
+        }
+        case 'strong': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("strong","{}", childNodes);
+          // return `h('strong', {}, ${childNodes})`;
+        }
+  
+        case 'emphasis': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("emphasis","{}", childNodes);
+          // return `h('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);
+          // return `h('${listTag}', {}, ${childNodes})`;
+        }
+  
+        case 'listItem': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("li", "{}", childNodes);
+          // return `h('li', {}, ${childNodes})`;
+        }
+  
+        case 'code': {
+          const language = node.lang ? `{ 'data-lang': '${node.lang}' }` : '';
+          const highlightedCode = hljs.highlightAuto(node.value, [node.lang || '']).value;
+          hljs
+          const formatedCode = highlightedCode.replace(/(\r\n|\n|\r)/g, "<br>")    
+          const out =  hyperscript("pre", "{}", hyperscript(
+            "code",
+            language,
+            JSON.stringify(node.value)
+          ));
+          return `HTMLWrapper('<pre>${formatedCode}</pre>')`
+          // return out
+        }
+  
+        case 'blockquote': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("blockquote", "{}", childNodes);
+        }
+        case 'thematicBreak': {
+          return `h('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)}.style({border : "1px solid darkblue", borderCollapse: "collapse"})`
+          // return `h('tr', {}, ${cells}).style({border : "1px solid darkblue", borderCollapse: "collapse"})`;
+        }
+        case 'tableCell': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return `${hyperscript("td", "{}", childNodes)}.style({border : "1px solid darkblue", borderCollapse: "collapse", padding : "5px"})`
+          // return `h('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 'mdxJsxFlowElement':{
+          const {name, attributes, children} = node;
+          const childNodes = children.map(transformNode).join(', ');
+          const hasChildren = childNodes.length > 0;
+          console.log({name})
+          console.log(componentType(name))
+          switch(componentType(name)){
+            case "jsx" : return `${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+            case "html" : return `h("${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")
+              }
+            }
+          }
+        }
+      }
+      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
+    }
+  };
+export {
+    processMDZAST
+}

package/src/transpiler/transpile.js

@@ -0,0 +1,22 @@
+import { parseMDZ } from "./parser.js";
+import { processMDZAST } from "./process.js";
+
+const transpileMDZ=(Markdown)=>{
+    const ast = parseMDZ(Markdown);
+    const {attrs, props, esm, statements}= processMDZAST(ast)
+    console.log({props})
+    const body = [
+        'import {h, HTMLWrapper, Flex} from "ziko"',
+        attrs,
+        ...esm,
+        `export default (${props})=>{`,
+        'const __items__ = []',
+        ...statements,
+        "const UI = Flex(...__items__).vertical(0, 0)",
+        "return UI }"
+      ]
+    return body.join("\n");
+}
+export{
+    transpileMDZ
+}

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,4 @@
+export const hyperscript = (tag, attrs, children="") => {
+    const HasChildren = !!children;
+    return `h("${tag}", ${attrs}${HasChildren ?`, ${children}` : ""})`
+}

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

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(", ")}}` 
+}