mdzjs 0.0.1 → 0.0.2

package/preview/package.json

@@ -12,8 +12,12 @@
     "vite": "^5.4.8"
   },
   "dependencies": {
-    "ziko": "^0.0.22",
+    "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-lottie": "^0.0.7",
+    "ziko-wrapper": "^0.0.25"
   }
 }

package/preview/test.mdz

@@ -1,59 +1,37 @@
 ---
-title : "MDZ"
+title : "MDZ Overview"
 background : "red"
-__Props__ : {
-    a : 1,
-    c : 10
+__props__ : {
+    name : World KKK
 }
 ---
+import {Dom} from "./Components/Dom"
+import InteractiveBlock from "./Components/InteractiveBlock.js"
 
-import {cos} from "ziko";
-import InteractiveBlock from "./InteractiveBlock.js";
-import Scene from "./Scene.js";
+# Hello world 
 
-Hello World {cos(0)}
+<Dom text="Hello from dom" color="red" />
+<InteractiveBlock />
 
-Hello {title}
+Hello **{name}**
 
-<script>
-    var a = 1000
-    const b = ()=> Math.random()
-</script>
-
-test {a}
-
-<InteractiveBlock data="Hello  from MDZ" color="cyan"/>
-
-import Hi from "./Hi.js";
-
-- <Hi txt="Messi" color="red"/> 
-- <Hi txt="Messi" color="red"/> 
-- <Hi txt="Messi" color="red"/> 
-
-
-- <Scene data="h"/> 
-
-|A|B|
+|Addon|Dependncies|
 |-|-|
-|1|2|
-
-
-<!-- {p}
-
-# Test H1
-# Test H1 with Expression 1+1 = {1+1}
-# Test H1 With IIFE {(()=>Math.random())()}
-# Test H1 With <Hi txt="zikojs element" color="red"/> 
-
-
-<script>
-    let x = [0, PI/6, PI/4, PI/2, PI]
-    let y = cos(x)
-    import {sin} from "ziko"
-</script>
-
-- **cos(x[0])** : <Hi txt={1+1} />
-
--->
+|ziko-gl|threejs|
+|ziko-code|codemirror|
+|ziko-lottie|lottie-web|
+
+```js
+console.log({a:1})
+fuction B(){
+ return [
+   1,
+   2
+ ]
+}
+```
 
-www.koora.com
+```py
+ print(10)
+ A=[1,2,3]
+```

package/preview/vite.config.js

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

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

package/v2/pre-parse/clean-md.js

@@ -1,93 +0,0 @@
-function cleanMD(str) {
-    const result = [];
-    let currentExpr = '';
-    let currentText = '';
-    let braceCount = 0;
-    for (let i = 0; i < str.length; i++) {
-      const char = str[i];
-      if (char === '{') {
-        if (braceCount === 0 && currentText) {
-          result.push(currentText.trim());
-          currentText = '';
-        }
-        braceCount++;
-        currentExpr += char;
-      } else if (char === '}') {
-        braceCount--;
-        currentExpr += char;
-        if (braceCount === 0) {
-          result.push(cleanExpression(currentExpr));
-          currentExpr = '';
-        }
-      } else {
-        if (braceCount === 0) {
-          currentText += char; 
-        } else {
-          currentExpr += char; 
-        }
-      }
-    }  
-    if (currentText) {
-      result.push(currentText.trim());
-    }
-  
-    return result.join(''); 
-  }
-  
-  function cleanExpression(block) {
-    const content = block.slice(1, -1);
-    const cleanedContent = content
-      .split('\n')
-      .map(line => line.trim())
-      .filter(line => line)
-      .join('\n');
-    return `{\n${cleanedContent}\n}`;
-  }
-  
-  // const text = `
-  // const obj = {
-  
-  //   key1: 'value1',
-  
-  
-  //   key2: 'value2',
-  
-  
-  //   key3: {
-  //     nestedKey1: 'nestedValue1',
-  
-  
-  //     nestedKey2: 'nestedValue2',
-  
-  
-  //     nestedKey3: {
-  
-  //       deepKey: 'deepValue'
-  
-  //     }
-  
-  //   }
-  
-  
-  // };
-  
-  // export default {
-  
-  
-  //   keyA: 'valueA',
-  
-  
-  //   keyB: {
-  
-  //     nestedKey: 'nestedValue'
-  
-  //   }
-  
-  // };
-  // `;
-  
-  // console.log(cleanMD(text));
-  
-export{
-  cleanMD
-}