mdzjs 0.0.1 → 0.0.2

package/README.md

@@ -1,16 +1,19 @@
-# Markdown for [Zikojs](https://github.com/zakarialaoui10/ziko.js)
+> [!NOTE]   
+> This project is part of the [ZikoJS](https://github.com/zakarialaoui10/ziko.js) ecosystem.
+
+# MDZjs
+A Markdown preprocessor for Zikojs. Markdown in Zikojs.
+It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
 
 ## Install 
 ```bash
  npm i mdzjs
 ```
-
-## Usage 
-
-### Config 
+ 
+## Config 
 ```js
 import {defineConfig} from "vite"
-import {MDZ} from "mdzjs"
+import MDZ from "mdzjs/vite"
 export default defineConfig({
     plugins : [
         MDZ()
@@ -18,67 +21,78 @@ export default defineConfig({
 })
 ```
 
-### Example 
+## Usage
+
+*Article.mdz :*
 
-```md
+```js
 ---
-title : MDZ
-background : tomato
+ title : MDZ 
+ name : world
+ __props__ : 
+   background : tomato
+   data : []
 ---
+import data from "./data.js";
+import InteractiveComponent from "./InteractiveComponent.js";
 
-import InteractiveBlock from "./InteractiveBlock.js";
+# Hello {name}
 
-**MDZ** (Markdown for ***zikojs***) is a format that allows you to append Zikojs Elements directly within Markdown.
+<InteractiveComponent data={data} background={tomato}/>
 
-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:
+```js
+// main.js
+import Article,{title} from "./Article.mdz"
+```
 
-<InteractiveBlock data="Hello  from MDZ" color="darkblue"/>
+## Features
+- **Simple Integration :** Write Markdown as usual, and inject Zikojs elements wherever needed.
+- **Extensible :** Create custom interactive components using Zikojs and use them in any Markdown file.
+- **Reusable :** MDZ exports a default functional component, allowing you to call it multiple times with different data, enabling dynamic and versatile use.
+- **Frontmatter Support :**  Use `YAML` syntax in to include metadata like titles, descriptions, or configurations in your Markdown files, and define props to pass data dynamically to Zikojs components.
 
-### 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.
+- **Markdown :** Use standard Markdown syntax for writing content. 
+- **JSX Syntax :** Write components in JSX within Markdown, enabling easy integration of Zikojs elements with JavaScript and HTML..
+- **Props :** Pass data to components through props, enabling dynamic rendering and customization of content within your Markdown files.
+- **ESM :** Supports ECMAScript Modules (ESM), allowing you to import and export modules
+- **Expressions :** MDZjs lets you use JS expressions inside curly braces, like Hello {name}. 
+These expressions can be full JS programs, as long as they evaluate to something renderable. For example, you can use an IIFE like this:
+```js
+Hello {(()=>{
+    const names = ["world", "everyone"];
+    const {length} = names
+    return names[Math.floor(Math.random()*length)]
+})()}
+```
+- **Internal scripts :**  Include JS logic that runs alongside MDZjs components but isn't rendered in the output. 
+They can initialize variables or perform side effects...
 
-3- **Extensible :** Create custom components like InteractiveBlock and use them in any Markdown file.
+```html
+<script>
+    console.log("Hello from MDZjs")
+    let addons = [
+        "ziko-gl",
+        "ziko-lottie",
+        "ziko-chart"
+    ]
+// The addons variable can be accessed and used in MDZjs expressions 
+</script>
 ```
+- **Interleaving :** You can use inline markdown elements inside HTML or Zikojs Components
 
-```js
-// InteractiveBlock.js
-import {Flex, input, text} from "ziko"
-export default ({data, color})=>{
-    let txt = text(data).style({color})
-    let inp = input(data).style({
-        padding : "5px",
-        background : "transparent",
-        outline :"none",
-        boxShadow :"1px 1px 1px white",
-        fontSize : "inherit"
-    })
-    inp.onInput(e=>txt.setValue(e.value))
-    return Flex(
-        inp,
-        txt
-    ).vertical(0, "space-around").size("60%").style({
-        border : "2px darkblue solid",
-        padding : "10px",
-        minHeight : "100px",
-        margin : "auto"
-    })
-}
+```html
+<Header background={background}>
+ ***Hello {name}***
+</Header>
 ```
+# ⭐️ Show your support
 
-```js
-// main.js
-import { useTitle } from "ziko"
-import UI,{title, background} 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")
-```
+If you appreciate the project, kindly demonstrate your support by giving it a star!<br>
+
+[![Star](https://img.shields.io/github/stars/zakarialaoui10/mdzjs?style=social)](https://github.com/zakarialaoui10/mdzjs)
+<!--## Financial support-->
+# License 
+This projet is licensed under the terms of MIT License 
+<img src="https://img.shields.io/github/license/zakarialaoui10/mdzjs?color=rgb%2820%2C21%2C169%29" width="100" align="right">

package/__src__/index.js

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

package/__src__/test.js

@@ -0,0 +1,21 @@
+import { getZikoScript } from "./converter/index.js";
+const markdownContent = `
+---
+modules:
+ - import Component from "./Component" 
+ - import OtherComponent from "./OtherComponent"
+ - import OtherComonenetWithProps from "./OtherComonenetWithProps"
+title: MDZ
+---
+Para
+[Link](#hi)
+
+<Component />
+
+line2
+
+<OtherComponent />
+<OtherComonenetWithProps data="hello" />
+`;
+const script = getZikoScript(markdownContent);
+console.log(script)

package/{v2/test.js → __v2__/_test.js}

@@ -61,7 +61,7 @@ Test {sayHi()}
 `;
 
 let res = transpileMDZ(Markdown)
-// console.log(res)
+console.log(res)
 
 // const md2 = "```js \n console.log(1) \n ```"
 // const md2 = `

package/__v2__/clean.js

@@ -0,0 +1,67 @@
+export function cleanMD(str, openSign, closeSign) {
+    const result = [];
+    let currentExpr = '';
+    let currentText = '';
+    let braceCount = 0;
+    let isEscaped = false;
+  
+    for (let i = 0; i < str.length; i++) {
+      const char = str[i];
+  
+      if (char === '\\' && !isEscaped) {
+        // Set escape flag and skip adding the backslash for now
+        isEscaped = true;
+        continue;
+      }
+  
+      if (isEscaped) {
+        // If escaped, append the literal character and reset escape flag
+        currentText += char;
+        isEscaped = false;
+        continue;
+      }
+  
+      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, openSign, closeSign));
+          currentExpr = '';
+        }
+      } else {
+        if (braceCount === 0) {
+          currentText += char;
+        } else {
+          currentExpr += char;
+        }
+      }
+    }
+  
+    if (currentText) {
+      result.push(currentText.trim());
+    }
+  
+    return result.join('');
+  }
+  
+  function cleanExpression(block, openSign = "", closeSign = "") {
+    const content = block.slice(1, -1);
+    const cleanedContent = content
+      .split('\n')
+      .map(line => line.trim())
+      .filter(line => line)
+      .join('\n');
+    return `${openSign}{${cleanedContent}}${closeSign}`;
+    // return `${openSign}{\n${cleanedContent}\n}${closeSign}`;
+  }
+  
+//   const input = "Normal text {expression here} and \\{escaped brace\\}";
+//   console.log(cleanMD(input, "[", "]"));
+  

package/__v2__/hast.js

@@ -0,0 +1,70 @@
+import { parseDocument } from 'htmlparser2';
+import { cleanMD } from './clean.js';
+import { splitBetween } from './utils/split-between.js';
+import { isObject } from './utils/is-object.js';
+const OPEN_SIGN = "\"EXP_START"
+const CLOSE_SIGN = "EXP_END\""
+function transformNode(node) {
+  switch (node.type) {
+    case 'text': {
+      const text = node.data;
+      const cleanedText = cleanMD(text, OPEN_SIGN, CLOSE_SIGN)
+      const args = splitBetween(cleanedText, OPEN_SIGN, CLOSE_SIGN).map(({type, value})=>{
+        if(type === "string") return `"${value}"`
+        return value.slice(1,-1)
+      })
+      return args.length!==0 ? args : null;
+    }
+    case 'tag': {
+      const tagName = node.rawTagName || node.name;
+      const isJSXComponent = /^[A-Z]/.test(tagName);
+
+      const attributes = node.attribs
+        ? Object.entries(node.attribs)
+            .map(([key, value]) => `${key}: ${
+              isObject(value)
+                ?value
+                :(value.at(0)==="{")?value.slice(1,-1):'"'+value+'"'
+              }`)
+            .join(', ')
+        : '';
+      const childNodes = node.children
+        .map(transformNode)
+        .filter(Boolean)
+        .join(', ');
+
+      if (isJSXComponent) {
+        if(node.children.length > 0) return `${tagName}({${attributes}}, ${childNodes})`
+        return `${tagName}({${attributes}})`;
+      } 
+      else {
+        if(node.children.length > 0) return `tag('${tagName}', {${attributes}}, ${childNodes})`;
+        return `tag('${tagName}', {${attributes}})`
+      }
+    }
+    default:
+      return '';
+  }
+}
+
+
+
+const html = `
+<p ref="ll" id={m} ob={a:1}>Hi {exp} \\{</p>
+<p ref="ll">{exp} \\{</p>
+<p ref="ll" id={m} ob={a:1}>Hi {exp} \\{</p>
+<p ref="ll">{exp} \\{</p>
+<ZikoComp test=1>
+<p> Hi </p>
+</ZikoComp>
+<Void />
+`.trim();
+
+const ast = parseDocument(html, { lowerCaseTags: false }); 
+
+const transformedCode = ast.children
+  .map(transformNode)
+  .filter(Boolean) 
+  // .join(', ');
+
+console.log(transformedCode);

package/__v2__/html2js.js

@@ -0,0 +1,59 @@
+import { parseDocument } from 'htmlparser2';
+
+function transformNode(node) {
+  switch (node.type) {
+    case 'text': {
+      const text = node.data;
+      return processText(text);
+    }
+    case 'tag': {
+      const tagName = node.rawTagName || node.name; 
+      const isJSXComponent = /^[A-Z]/.test(tagName); 
+
+      const attributes = node.attribs
+        ? Object.entries(node.attribs)
+            .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+            .join(', ')
+        : '';
+
+      const childNodes = node.children
+        .map(transformNode)
+        .filter(Boolean) // Remove empty strings from children
+        .join(', ');
+
+      if (isJSXComponent) {
+        return `${tagName}({${attributes}}, ${childNodes})`;
+      } else {
+        return `tag('${tagName}', {${attributes}}, ${childNodes})`;
+      }
+    }
+    default:
+      return '';
+  }
+}
+
+function processText(text) {
+  return JSON.stringify(text.trim());
+}
+
+const html = `<p>
+Hello world 
+<span> 
+hi 
+</span>
+<JsxComponent data={zikojs} />
+
+<JsxComponent>
+ <Js />
+ <Js />
+</JsxComonent>
+</p>`;
+
+const ast = parseDocument(html, { lowerCaseTags: false }); // Disable automatic lowercase conversion
+
+const transformedCode = ast.children
+  .map(transformNode)
+  .filter(Boolean) // Remove empty strings from top-level nodes
+  .join(', ');
+
+console.log(transformedCode);

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

@@ -0,0 +1,93 @@
+function cleanMD(str, openSign, closeSign) {
+  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, openSign, closeSign));
+        currentExpr = '';
+      }
+    } else {
+      if (braceCount === 0) {
+        currentText += char; 
+      } else {
+        currentExpr += char; 
+      }
+    }
+  }  
+  if (currentText) {
+    result.push(currentText.trim());
+  }
+
+  return result.join(''); 
+}
+
+function cleanExpression(block, openSign="", closeSign ="") {
+  const content = block.slice(1, -1);
+  const cleanedContent = content
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line)
+    .join('\n');
+  return `${openSign}{\n${cleanedContent}\n}${closeSign}`;
+}
+  
+  // 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
+}

package/__v2__/test.js

@@ -0,0 +1,19 @@
+import { transpileMDZ } from "./transpiler/index.js";
+
+const Markdown = `
+---
+title : hi
+__Props__ :
+  m : 1
+ 
+---
+
+# Hi 
+
+{
+ 1+1
+}
+<p> Hi </p>
+`
+let res = transpileMDZ(Markdown)
+console.log(res)

package/{v2 → __v2__}/transpiler/index.js

@@ -6,8 +6,9 @@ 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).parse(markdown);
+const parseMDZ = (markdown) => unified().use(remarkParse).use(remarkGFM).use(remarkFrontmatter, ['yaml']).parse(markdown);
 
 const processMDZ = (markdown) => {
   const importRegex = /^\s*import\s+[^;]+;$/gm
@@ -27,7 +28,6 @@ const transformMDZ = (markdownAST) => {
     switch(node.type){
       case 'text' : {
         const text = node.value;
-        // console.log({pr : processText(text)})
         return processText(text)
       }
       case 'paragraph' : {
@@ -78,7 +78,7 @@ const transformMDZ = (markdownAST) => {
         return `h('blockquote', {}, ${childNodes})`;
       }
       case 'thematicBreak': {
-        return `h('hr', {}, '')`;
+        return `h('hr', {})`;
       }
       case 'table': {
         const headerRows = node.children[0].children.map(transformNode).join(', ');
@@ -101,8 +101,11 @@ const transformMDZ = (markdownAST) => {
         switch (type) {
           case 'jsx':
             return ` ${jsx2js(component.replaceAll("\n",""))}`;
-          case 'html':
-            return ` HTMLWrapper("${component}")`;
+          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()}`
@@ -127,7 +130,7 @@ const transformMDZ = (markdownAST) => {
     }
   });
   return {
-    fm : parseYaml(fm[0].value),
+    fm : fm[0] ? parseYaml(fm[0].value) : {},
     body : mdBody.map(transformNode).map(n=>n instanceof Object? n.value: `__items__.push(${n})`).join("\n")
   }
 };
@@ -142,21 +145,23 @@ const transpileMDZ= markdown =>{
         .map(([key, value]) => `${key} = ${JSON.stringify(value)}`)
         .join(', ')
     : '';
-let ui = `
-const __items__ = [];
+    
+console.log({defaultProps : fm})
+let ui = `const __items__ = [];
 ${body}
 // console.log({__items__})
 const UI = (${defaultProps ? `{${defaultProps}}={}`: ""}) => Flex(...__items__).vertical(0, 0);
 export default UI
 `
-let attributs = `const {${Object.keys(Attr).join(",")}} = ${JSON.stringify(Attr,"",2)}`
-let exports = `export {${Object.keys(Attr).join(", ")}}`
+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
-  ].join('\n');
+    exports,
+  ].filter(Boolean).join('\n');
   return Output
 
 }

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.1",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -14,23 +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",
+    "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",
     "unified": "^11.0.5",
     "yaml": "^2.6.1",
-    "ziko": "^0.0.22"
+    "ziko": "^0.0.27"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.0",