.

Author: zakarialaoui10

package-lock.json

@@ -29,7 +29,6 @@
     "remark-parse": "^11.0.0",
     "rollup": "^4.24.0",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0",
     "yaml": "^2.6.1",
     "ziko": "^0.0.20"
   },

package.json

@@ -0,0 +1,29 @@
+import { transpileMDZ } from "./transpiler/index.js";
+const Markdown = `
+---
+title: "Example Page"
+author: "John Doe"
+count : 10
+---
+
+import Button from './Button.js';
+
+# Hello World <Button data = "100"/>
+
+This is a paragraph with <Button data="hello"/>
+
+<p> Hello </p>
+
+[ll](#)
+
+***uuu***
+![alt](#)
+
+
+<InteractiveBlog />
+`;
+
+console.log(transpileMDZ(Markdown))
+
+// const md2 = "```js \n console.log(1) \n ```"
+// console.log(transpileMDZ(md2))

v2/fm.js

@@ -0,0 +1,16 @@
+import { transpileMDZ } from "../../transpiler/index.js";
+export function MDZ(){
+    return {
+      name: 'MDZ',
+      transform(src, id) {
+        if (id.endsWith('.mdz')) {
+          console.log(src)
+          return {
+            code: transpileMDZ(src),
+            map: null,
+          };
+        }
+      },
+    };
+  }
+  

v2/index-marked.js

@@ -0,0 +1,128 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import { getComponentType } from './get-component-type.js';
+import { jsx2js } from './jsx2js.js';
+import { parse as parseYaml } from 'yaml'; 
+
+const parseMDZ = (markdown) => unified().use(remarkParse).parse(markdown);
+
+const processMDZ = (markdown) => {
+  // Frontmatter regex (between '---' or '+++')
+  const frontmatterRegex = /^---\n([\s\S]+?)\n---/m;
+  const importRegex = /^import\s+.+from\s+.+;$/gm;
+  
+  let imports = ['import {tag, Flex, HTMLWrapper} from "ziko"'];
+  let frontmatter = {};
+  let cleanedMarkdown = markdown;
+
+  const frontmatterMatch = markdown.match(frontmatterRegex);
+  if (frontmatterMatch) {
+    const frontmatterContent = frontmatterMatch[1];
+    frontmatter = parseYaml(frontmatterContent); 
+    cleanedMarkdown = cleanedMarkdown.replace(frontmatterRegex, ''); 
+  }
+
+  cleanedMarkdown = cleanedMarkdown.replace(importRegex, (match) => {
+    imports.push(match.trim());
+    return ''; 
+  });
+  return { imports, frontmatter, cleanedMarkdown };
+};
+
+const transformMDZ = (markdownAST) => {
+  const transformNode = (node) => {
+    // console.log(node.type)
+    switch(node.type){
+      case 'text' : return JSON.stringify(node.value);
+      case 'paragraph' : {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('p', {}, ${childNodes})`; 
+      }
+      case 'heading' : {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('h${node.depth}', {}, ${childNodes})`;
+      }
+      case 'strong': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('strong', {}, ${childNodes})`;
+      }
+
+      case 'emphasis': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('em', {}, ${childNodes})`;
+      }
+
+      case 'link': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('a', { href: "${node.url}" }, ${childNodes})`;
+      }
+
+      case 'image': {
+        return ` tag('img', { src: "${node.url}", alt: "${node.alt || ''}" })`;
+      }
+
+      case 'list': {
+        const listTag = node.ordered ? 'ol' : 'ul';
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('${listTag}', {}, ${childNodes})`;
+      }
+
+      case 'listItem': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('li', {}, ${childNodes})`;
+      }
+
+      case 'code': {
+        const language = node.lang ? `, { 'data-lang': '${node.lang}' }` : '';
+        return ` tag('pre', {}, tag('code'${language}, {}, ${JSON.stringify(node.value)}))`;
+      }
+
+      case 'blockquote': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return ` tag('blockquote', {}, ${childNodes})`;
+      }
+      case 'thematicBreak': {
+        return ` tag('hr', {}, '')`;
+      }
+      case 'html' : {
+        const component = node.value.trim();
+        const type = getComponentType(component);
+        switch (type) {
+          case 'jsx':
+            return ` ${jsx2js(component)}`;
+          case 'html':
+            return ` HTMLWrapper("${component}")`;
+          default:
+            return null;
+        }
+      }
+  
+
+    }
+    return 'null';
+  };
+
+  const body = markdownAST.children.map(transformNode).join(',\n');
+  return `()=>Flex(
+${body}
+).vertical(0,0)`
+};
+
+const transpileMDZ= markdown =>{
+  const { imports, frontmatter, cleanedMarkdown } = processMDZ(markdown);
+  const ast = parseMDZ(cleanedMarkdown);
+  const jsFunction = transformMDZ(ast);
+  let exports = `
+const attributes = ${JSON.stringify(frontmatter)};
+export {${Object.keys(frontmatter)}} = attributes;
+  `
+  const Output = [
+    ...imports,
+    jsFunction,
+    exports,
+  ].join('\n');
+  
+  return Output
+
+}
+export {transpileMDZ}