mdzjs 0.0.0 → 0.0.2

package/__v2__/transpiler/index.js

@@ -0,0 +1,168 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import { getComponentType } from './get-component-type.js';
+import { jsx2js } from './jsx2js.js';
+import { processText } from "./process-text.js"
+import { parse as parseYaml } from 'yaml'; 
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkGFM from "remark-gfm"
+import { cleanMD } from '../pre-parse/clean-md.js';
+
+const parseMDZ = (markdown) => unified().use(remarkParse).use(remarkGFM).use(remarkFrontmatter, ['yaml']).parse(markdown);
+
+const processMDZ = (markdown) => {
+  const importRegex = /^\s*import\s+[^;]+;$/gm
+  let imports = ['import {h, Flex, HTMLWrapper} from "ziko"'];
+  let frontmatter = {};
+  let cleanedMarkdown = markdown;
+
+  cleanedMarkdown = cleanedMarkdown.replace(importRegex, (match) => {
+    imports.push(match.trim());
+    return ''; 
+  });
+  return { imports : imports.join("\n"), frontmatter, cleanedMarkdown };
+};
+
+const transformMDZ = (markdownAST) => {
+  const transformNode = (node) => {
+    switch(node.type){
+      case 'text' : {
+        const text = node.value;
+        return processText(text)
+      }
+      case 'paragraph' : {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('p', {}, ${childNodes})` 
+      }
+      case 'heading' : {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('h${node.depth}', {}, ${childNodes})`;
+      }
+      case 'strong': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('strong', {}, ${childNodes})`;
+      }
+
+      case 'emphasis': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('em', {}, ${childNodes})`;
+      }
+
+      case 'link': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('a', { href: "${node.url}" }, ${childNodes})`;
+      }
+
+      case 'image': {
+        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 `h('${listTag}', {}, ${childNodes})`;
+      }
+
+      case 'listItem': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('li', {}, ${childNodes})`;
+      }
+
+      case 'code': {
+        const language = node.lang ? `, { 'data-lang': '${node.lang}' }` : '';
+        return `h('pre', {}, h('code'${language}, {}, ${JSON.stringify(node.value)}))`;
+      }
+
+      case 'blockquote': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('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 = `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 `h('tr', {}, ${cells}).style({border : "1px solid darkblue", borderCollapse: "collapse"})`;
+      }
+      case 'tableCell': {
+        const childNodes = node.children.map(transformNode).join(', ');
+        return `h('td', {}, ${childNodes}).style({border : "1px solid darkblue", borderCollapse: "collapse", padding : "5px"})`;
+      }
+      case 'html' : {
+        const component = node.value.trim();
+        const type = getComponentType(component);
+        switch (type) {
+          case 'jsx':
+            return ` ${jsx2js(component.replaceAll("\n",""))}`;
+          case 'html':{
+            return ` HTMLWrapper("${component}")`
+
+            // To be replaced by HTML Parser
+          }
+          case 'script' : return {
+            type : "script",
+            value : `${component.replace(/<script[^>]*>/g, '').replace(/<\/script>/g, '').trim()}`
+          };
+          default:
+            return null;
+        }
+      }
+  
+
+    }
+    return 'null';
+  };
+  let fm = [];
+  let mdBody = [];
+
+  markdownAST.children.forEach((node) => {
+    if (node.type === 'yaml') {
+      fm.push(node); 
+    } else {
+      mdBody.push(node); 
+    }
+  });
+  return {
+    fm : fm[0] ? parseYaml(fm[0].value) : {},
+    body : mdBody.map(transformNode).map(n=>n instanceof Object? n.value: `__items__.push(${n})`).join("\n")
+  }
+};
+
+const transpileMDZ= markdown =>{
+  const { imports, cleanedMarkdown } = processMDZ(markdown);
+  const ast = parseMDZ(cleanedMarkdown);
+  const {body,fm} = transformMDZ(ast);
+  const {__Props__, ...Attr} = fm
+  const defaultProps = __Props__
+    ? Object.entries(__Props__)
+        .map(([key, value]) => `${key} = ${JSON.stringify(value)}`)
+        .join(', ')
+    : '';
+    
+console.log({defaultProps : fm})
+let ui = `const __items__ = [];
+${body}
+// console.log({__items__})
+const UI = (${defaultProps ? `{${defaultProps}}={}`: ""}) => Flex(...__items__).vertical(0, 0);
+export default UI
+`
+const AttrFounded = Object.keys(Attr).length > 0
+let attributs = AttrFounded ? `const {${Object.keys(Attr).join(",")}} = ${JSON.stringify(Attr,"",2)}` : null
+let exports = AttrFounded ? `export {${Object.keys(Attr).join(", ")}}` : null
+  const Output = [
+    imports,
+    attributs,
+    ui,
+    exports,
+  ].filter(Boolean).join('\n');
+  return Output
+
+}
+export {transpileMDZ}

package/__v2__/transpiler/jsx2js.js

@@ -0,0 +1,30 @@
+function jsx2js(component) {
+    const regex = /<(\w+)([^>]*)\/?>/;
+    const match = component.match(regex);
+    if (!match) {
+        throw new Error("Invalid component format");
+    }
+
+    const componentName = match[1];
+    const attributesString = match[2];
+    const attributes = {};
+
+    const attrRegex = /(\w+)\s*=\s*("([^"]*)"|{([^}]*)})/g;
+    let attrMatch;
+
+    while ((attrMatch = attrRegex.exec(attributesString)) !== null) {
+        const key = attrMatch[1];
+        const value = attrMatch[3] || attrMatch[4]; // Either the string value or the expression inside {}
+        attributes[key] = value === attrMatch[3]?JSON.stringify(value):new Function(`return ${value}`)();
+    }
+
+    const attributesArray = Object.entries(attributes).map(([key, value]) => {
+        return `${key}:${value}`; 
+    });
+
+    const attributesStringFormatted = attributesArray.join(',');
+
+    return `${componentName}({${attributesStringFormatted}})`;
+}
+
+export { jsx2js };

package/__v2__/transpiler/process-text.js

@@ -0,0 +1,48 @@
+function processText(str) {
+    const result = [];
+    let currentExpr = '';
+    let currentText = '';
+    let insideBraces = false;
+    let braceCount = 0;
+  
+    for (let i = 0; i < str.length; i++) {
+      const char = str[i];
+  
+      if (char === '{') {
+        if (braceCount === 0 && currentText) {
+          result.push(currentText); 
+          currentText = ''; 
+        }
+        braceCount++;
+        currentExpr += char;
+      } else if (char === '}') {
+        braceCount--;
+        currentExpr += char;
+        if (braceCount === 0) {
+          result.push({type:"expression", value : currentExpr.slice(1,-1)}); 
+          // try {
+          //   // console.log({currentExpr:currentExpr.slice(1,-1)})
+          //   // const evaluatedExpr = new Function(`return ${currentExpr.trim().slice(1,-1)}`)()
+          //   result.push({type:"expression", value : currentExpr.slice(1,-1)}); 
+          // } catch (e) {
+          //   //result.push({type:"string", value : currentExpr.trim}); 
+          //   result.push(currentExpr.trim()); 
+          // }
+          currentExpr = ''; 
+        }
+      } else {
+        if (braceCount === 0) {
+          currentText += char; 
+        } else {
+          currentExpr += char; 
+        }
+      }
+    }  
+    if (currentText) {
+      result.push(currentText);
+    }
+    return result.map(n=>typeof(n)==="string"?`"${n}"`:n.value);
+  }
+export{
+  processText
+}

package/__v2__/utils/is-object.js

@@ -0,0 +1,11 @@
+export function isObject(input) {
+    try {
+      const parsed = new Function(`return (${input})`)();
+      return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed);
+    } catch {
+      return false;
+    }
+  }
+  
+//   console.log(isObject("{a:1}")); // true
+//   console.log(isObject("{1+1}")) // false

package/__v2__/utils/split-between.js

@@ -0,0 +1,47 @@
+export function splitBetween(input, startToken, endToken) {
+    const pattern = new RegExp(`${startToken}(.*?)${endToken}`, "g"); // Match the tokens and capture the content inside
+    const result = [];
+    let lastIndex = 0;
+  
+    input.replace(pattern, (match, content, offset) => {
+      if (offset > lastIndex) {
+        result.push({
+          type: "string",
+          value: input.slice(lastIndex, offset),
+        });
+      }
+      result.push({
+        type: "expression",
+        value: content,
+      });
+      lastIndex = offset + match.length;
+    });
+  
+    if (lastIndex < input.length) {
+      result.push({
+        type: "string",
+        value: input.slice(lastIndex),
+      });
+    }
+  
+    return result;
+  }
+  
+// const input = "Text before {token content} text between {another token} end text";
+// console.log(splitBetween(input, "{", "}"));
+  
+
+// export function splitBetween(input, startToken , endToken) {
+//     const pattern = new RegExp(`${startToken}|${endToken}`, "g")
+//     const arr=input.split(pattern);
+//     return arr
+// }
+
+// // const input = `
+// // Hi "EXP_START{This is an expression}EXP_END" How are you , {}
+// // `;
+
+// // const startToken = "\"EXP_START";
+// // const endToken = "EXP_END\"";
+// // console.log(splitBetween(input, startToken, endToken));
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdzjs",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -14,19 +14,29 @@
     "import": "./src/index.js"
   },
   "./vite": {
-    "import": "./src/vite/index.js"
+    "import": "./src/bundlers/vite.js"
   },
-  "author": "",
+  "author": "zakaria elalaoui",
   "keywords": [
     "zikojs",
-    "zikojs-addons"
+    "zikojs-addons",
+    "markdown",
+    "remark",
+    "mdx",
+    "preprocessor"
   ],
   "license": "MIT",
   "dependencies": {
-    "front-matter": "^4.0.2",
-    "marked": "^14.1.2",
+    "acorn": "^8.14.0",
+    "htmlparser2": "^9.1.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-mdx": "^3.1.0",
+    "remark-parse": "^11.0.0",
     "rollup": "^4.24.0",
-    "ziko": "^0.0.16"
+    "unified": "^11.0.5",
+    "yaml": "^2.6.1",
+    "ziko": "^0.0.27"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.0",

package/preview/Components/Dom.js

@@ -0,0 +1,6 @@
+export const Dom=({text, color})=>{
+    const element = document.createElement("p")
+    element.innerText = text;
+    element.style.color = color;
+    return element;
+}

package/preview/Components/Hi.js

@@ -0,0 +1,2 @@
+import {text} from "ziko"
+export default ({txt, color})=>text(txt).style({color})

package/preview/Components/Scene.js

@@ -0,0 +1,10 @@
+import {SceneGl, cube3} from "ziko-gl"
+import { LottiePlayer } from "ziko-lottie"
+import {Flex} from "ziko"
+export default ({data})=>{
+    return LottiePlayer().size("200px","200px").useControls()
+    let element = SceneGl("200px","200px").add(
+        cube3(1)
+    )
+    return Flex().append(element)
+}

package/preview/index.html

@@ -10,7 +10,16 @@
       rel="stylesheet"
     />
     <link href="https://fonts.cdnfonts.com/css/cheeronsta" rel="stylesheet">
-                                
+    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.css">
+
+            <style>
+              pre{
+                background : #282b2e;
+                padding : 10px;
+                color : white
+              }
+            </style>                    
     <!-- <style>
       body{
         font-family: "Gloria Hallelujah", cursive;

package/preview/main.js

@@ -1,12 +1,9 @@
 import { useTitle } from "ziko"
-import UI,{attributes} from "./test.mdz"
-const {title, background} = attributes
+import UI,{title} from "./test.mdz"
 title && useTitle(title)
-UI().style({
-    border : "2px darkblue solid",
-    width : "70%",
-    margin : "auto",
-    padding : "10px",
-    fontFamily : "Cheeronsta",
-    background : background ?? "orange"
-}).vertical(-1, "space-around")
+UI({name : "from MDZjs"})
+    .vertical(-1, 0)
+    .style({
+        border :"1px darkblue solid",
+        padding : "15px",
+    })