mdzjs 0.0.0 → 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
 ---
-modules : 
- - import InteractiveBlock from "./InteractiveBlock.js"
-title : MDZ
-background : tomato
+ title : MDZ 
+ name : world
+ __props__ : 
+   background : tomato
+   data : []
 ---
-**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***
+import data from "./data.js";
+import InteractiveComponent from "./InteractiveComponent.js";
 
-Here’s an example of an interactive block rendered within this MDZ file:
+# Hello {name}
 
-<InteractiveBlock data="Hello  from MDZ" color="darkblue"/>
+<InteractiveComponent data={data} background={tomato}/>
 
-### 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.
 ```
 
 ```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"
-    })
-}
+// main.js
+import Article,{title} from "./Article.mdz"
 ```
 
+## 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.
+
+- **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
-// main.js
-import { useTitle } from "ziko"
-import UI,{attributes} from "./test.mdz"
-const {title, background} = attributes
-title && useTitle(title)
-UI().style({
-    border : "2px darkblue solid",
-    width : "70%",
-    margin : "auto",
-    padding : "10px",
-    fontFamily : "Cheeronsta",
-    background : background ?? "orange"
-}).vertical(-1, "space-around")
-```
+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...
+
+```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
+
+```html
+<Header background={background}>
+ ***Hello {name}***
+</Header>
+```
+# ⭐️ Show your support
+
+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

@@ -0,0 +1,77 @@
+import { transpileMDZ } from "./transpiler/index.js";
+
+let cos = Math.cos
+const Markdown = `---
+title: "Example Page"
+author: "John Doe"
+count : 10
+__Props__ : {
+  color : "red",
+  id : 10
+}
+---
+
+import Button from './Button.js';
+
+import {cos} from "ziko";
+
+# Hello World 
+<Button 
+data="100" 
+p="kkk"
+/>
+
+This is a paragraph with <Button data="hello"/>
+
+<p> Hello {1+1} </p>
+
+<Button 
+data="100" 
+p="kkk"
+m={1+1}
+/>
+
+
+Hello {(()=>{
+  let a = Math.random()
+  return 1/a
+})()} , How are you ?
+
+<script>
+ let a=10
+</script>
+
+{(async () => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
+  const data = await response.json()
+  return data
+})()}
+
+{const sayHi=()=>{
+
+  return "Hi"
+}
+}
+
+Test {sayHi()}
+
+<script>
+ let a=1
+</script>
+`;
+
+let res = transpileMDZ(Markdown)
+console.log(res)
+
+// const md2 = "```js \n console.log(1) \n ```"
+// const md2 = `
+// ---
+// title : "MDZ"     
+// background : "red"
+// ---
+
+// Hello World 
+// `
+// console.log(md2)
+// console.log(transpileMDZ(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__/index.js

@@ -0,0 +1,2 @@
+export { transpileMDZ } from "./transpiler/index.js"
+export {ViteMDZ} from "./transformers/vite/index.js"

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__/readme.md

@@ -0,0 +1,17 @@
+## features :
+
+✅ Frontmatter
+✅ Props
+✅ Expression value in props
+✅ Markdown
+✅ Html
+✅ Zikojs Components
+
+
+## To Do
+
+Async Directive
+Expressions 
+Smart Links
+Latex
+Math 

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__/transformers/vite/index.js

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

package/__v2__/transpiler/get-component-type.js

@@ -0,0 +1,27 @@
+function getComponentType(component) {
+    const trimmedComponent = component.trim();
+    
+    const tagRegex = /^<([a-zA-Z][a-z0-9]*)/; // Match opening HTML/JSX tag
+    const match = trimmedComponent.match(tagRegex);
+    
+    if (match) {
+        const tagName = match[1];
+        
+        // Check if the first letter is uppercase - PascalCase component name
+        if (tagName[0] === tagName[0].toUpperCase()) {
+            return "jsx";
+        }
+        
+        // Return "script" if it's a script tag
+        if (tagName.toLowerCase() === 'script') {
+            return "script";
+        }
+
+        // Otherwise, it's just regular HTML
+        return "html";
+    }
+
+    return "unknown";
+}
+
+export { getComponentType };

package/__v2__/transpiler/import-plugin.js

@@ -0,0 +1,19 @@
+import { visit } from 'unist-util-visit';
+
+const remarkImports = () => {
+  return (tree, file) => {
+    const imports = [];
+
+    visit(tree, 'html', (node, index, parent) => {
+      if (node.value.trim().startsWith('import ')) {
+        imports.push(node.value.trim());
+        parent.children.splice(index, 1);
+      }
+    });
+    file.data.imports = imports;
+  };
+};
+
+export {
+    remarkImports
+};