mdzjs 0.10.7 → 0.11.0

package/README.md

@@ -95,4 +95,12 @@ If you appreciate the project, kindly demonstrate your support by giving it a st
 <!--## 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">
+<img src="https://img.shields.io/github/license/zakarialaoui10/mdzjs?color=rgb%2820%2C21%2C169%29" width="100" align="right"
+
+<!-- 
+ To do 
+   : fix fm
+   : add possibility of adding plugins 
+   : add zod
+   : auto typing 
+-->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdzjs",
-  "version": "0.10.7",
+  "version": "0.11.0",
   "description": "markdown preprocessor for zikojs",
   "main": "index.js",
   "type": "module",
@@ -12,8 +12,8 @@
   },
   "exports": {
     ".": "./src/index.js",
-    "./vite": "./src/bundlers/vite.js",
-    "./astro": "./src/bundlers/astro.js"
+    "./*": "./src/loaders/*/index.js"
+
   },
   "author": "zakaria elalaoui",
   "keywords": [
@@ -35,10 +35,13 @@
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.1.0",
     "remark-parse": "^11.0.0",
+    "remark-toc": "^9.0.0",
     "rollup": "^4.24.0",
     "unified": "^11.0.5",
+    "vfile-matter": "^5.0.1",
+    "vfile-reporter": "^8.1.1",
     "yaml": "^2.6.1",
-    "ziko": "^0.45.5",
+    "ziko": "^0.48.1",
     "ziko-wrapper": "^0.0.25"
   },
   "devDependencies": {

package/src/index.js

@@ -1 +1,57 @@
-export * from "./transpiler/index.js"
+import { unified } from 'unified';
+import { reporter } from 'vfile-reporter'
+import remarkParse from 'remark-parse';
+import remarkMdx from 'remark-mdx'
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkToc from 'remark-toc'
+import remarkGFM from 'remark-gfm';
+import { VFile } from 'vfile';
+import {matter} from 'vfile-matter';
+
+
+export async function parseMarkdown(markdown, ...plugins) {
+  const file = new VFile(markdown);
+  matter(file, { strip: true });
+
+  const preprocessor = unified()
+    .use(remarkParse)
+    .use(remarkGFM)
+    .use(remarkFrontmatter, ['yaml'])
+    .use(remarkToc)
+    .use(remarkMdx)
+
+  plugins.forEach(plugin => {
+    if (Array.isArray(plugin)) preprocessor.use(...plugin);
+    else preprocessor.use(plugin);
+  })
+  const ast = preprocessor.parse(String(file));
+  if(file.messages.length > 0 ) console.error(reporter(file))
+
+  return {
+    file,
+    frontmatter: file.data.matter,
+    ast,
+  };
+}
+
+// const inp = `
+// ---
+// a : 1
+// b : 2
+// MDZ.Props : 
+//  - a : 1
+//  - c : 2
+// ---
+
+// // const {a, b} 
+// // = MDZ.Props
+
+// ## Contents
+
+// ## History
+
+// ### Discovery
+// `.trimStart()
+// const out = await parseMarkdown(inp)
+
+// console.log(JSON.stringify(out.ast.children, null, 2))

package/src/loaders/vite/index.js

@@ -0,0 +1,31 @@
+import { transpileMDZ } from "../../transpiler/index.js";
+
+export default function ViteMDZ({ extensions = [".mdx"], plugins } = {}) {
+  return {
+    name: "mdz-loader",
+    async transform(src, id) {
+      if (id.endsWith(".mdz") || extensions.some((ext) => id.endsWith(ext))) {
+        const code = await transpileMDZ(src, {plugins});
+        return {
+          code,
+          map: null,
+        };
+      }
+    },
+
+    handleHotUpdate({ file, server }) {
+      if (file.endsWith(".mdz")) {
+        server.ws.send({
+          type: "custom",
+          event: "custom-update",
+          data: {
+            file,
+            timestamp: Date.now(),
+          },
+        });
+
+        return [file];
+      }
+    },
+  };
+}

package/src/parser/index.js

@@ -0,0 +1,57 @@
+import { unified } from 'unified';
+import { reporter } from 'vfile-reporter'
+import remarkParse from 'remark-parse';
+import remarkMdx from 'remark-mdx'
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkToc from 'remark-toc'
+import remarkGFM from 'remark-gfm';
+import { VFile } from 'vfile';
+import {matter} from 'vfile-matter';
+
+
+export async function parseMDZ(markdown, ...plugins) {
+  const file = new VFile(markdown);
+  matter(file, { strip: true });
+
+  const preprocessor = unified()
+    .use(remarkParse)
+    .use(remarkGFM)
+    .use(remarkFrontmatter, ['yaml'])
+    .use(remarkToc)
+    .use(remarkMdx)
+
+  plugins.forEach(plugin => {
+    if (Array.isArray(plugin)) preprocessor.use(...plugin);
+    else preprocessor.use(plugin);
+  })
+  const ast = preprocessor.parse(String(file));
+  if(file.messages.length > 0 ) console.error(reporter(file))
+
+  return {
+    file,
+    frontmatter: file.data.matter,
+    ast,
+  };
+}
+
+// const inp = `
+// ---
+// a : 1
+// b : 2
+// MDZ.Props : 
+//  - a : 1
+//  - c : 2
+// ---
+
+// // const {a, b} 
+// // = MDZ.Props
+
+// ## Contents
+
+// ## History
+
+// ### Discovery
+// `.trimStart()
+// const out = await parseMarkdown(inp)
+
+// console.log(JSON.stringify(out.ast.children, null, 2))

package/src/processor/index.js

@@ -0,0 +1,148 @@
+import { 
+  componentType,
+  processAttribute,
+//   parseYml,
+  hyperscript
+} from "../utils/index.js"
+import hljs from "highlight.js"
+const processMDZAST = (markdownAST) => {
+    let hasCode = false;
+    const transformNode = (node) => {
+      switch(node.type){
+        case 'mdxjsEsm' : {
+          return {
+            type : "script",
+            value : node.value
+          }
+        }
+        case 'text' : {
+          const text = node.value;
+          const escaped = text.replace(/"/g, '\\"');
+          return `"${escaped}"`;
+        }
+        case 'mdxTextExpression' : {
+          const {value} = node
+          return value
+        }
+        case 'mdxFlowExpression' : {
+          const {value} = node;
+          if(!node.parent || node.parent.type === 'root') 
+            return hyperscript("p", "{}", value);
+          return value
+        }
+        case 'heading' : {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript(`h${node.depth}`,"{}", childNodes);
+        }
+        case 'paragraph' : {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("p","{}", childNodes)
+        }
+        case 'strong': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("strong","{}", childNodes);
+        }
+        case 'emphasis': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("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 `tags.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);
+        }
+  
+        case 'listItem': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("li", "{}", childNodes);
+        }
+        case 'inlineCode' : {
+          return hyperscript("code", "{}", `"${node.value}"`)
+        }
+        case 'code': {
+          hasCode = true;
+          const highlightedCode = hljs.highlightAuto(node.value, [node.lang || '']).value;
+          const formatedCode = highlightedCode.replace(/(\r\n|\n|\r)/g, "<br>")    
+          return `HTMLWrapper('<pre><code>${formatedCode}</code></pre>')`
+        }
+        case 'blockquote': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return hyperscript("blockquote", "{}", childNodes);
+        }
+        case 'thematicBreak': {
+          return `tags.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(","))
+        }
+        case 'tableRow': {
+          const cells = node.children.map(transformNode).join(', ');
+          return `${hyperscript("tr", "{}", cells)}`
+        }
+        case 'tableCell': {
+          const childNodes = node.children.map(transformNode).join(', ');
+          return `${hyperscript("td", "{}", childNodes)}`
+        }
+        case 'mdxJsxTextElement': {
+          const {name, attributes, children} = node;
+          const childNodes = children.map(transformNode).join(', ');
+          const hasChildren = childNodes.length > 0;
+          return `tags.${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+        };
+        case 'mdxJsxFlowElement':{
+          const {name, attributes, children} = node;
+          const childNodes = children.map(transformNode).join(', ');
+          const hasChildren = childNodes.length > 0;
+          switch(componentType(name)){
+            case "jsx" : {
+              return `${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+            }
+            case "html" : return `tags.${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 = [];
+    const statements = []
+    markdownAST.children.forEach((node) => {
+      switch(node.type){
+        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 {
+      esm,
+      statements,
+      hasCode
+    }
+  };
+export {
+    processMDZAST
+}

package/src/test.js

@@ -1,49 +1,24 @@
-// 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
+import { parseMDZ } from "./parser/index.js";
+import { processMDZAST } from "./processor/index.js";
+import { transpileMDZ } from "./transpiler/index.js";
+const inp = `
 ---
+a : 1
+b : 2
+MDZ.Props : 
+ - a : 3
+ - c : 2
+---
+import A from 'B';
 
-<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|
-|-|-|
+{A}
 
+# Hello 
 `
+// const out = await parseMDZ(inp)
+// const p = processMDZAST(out.ast)
+const t = await transpileMDZ(inp)
 
-// 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))
-
-// parseYml('a : 1\n__props__ : \n d : 2\n e : 1')
+// console.log(out)
+// console.log(p)
+console.log(t)

package/src/transpiler/index.js

@@ -1,3 +1,26 @@
-export { parseMarkdown } from "./parser.js";
-export { processMDZAST } from "./process.js";
-export { transpileMDZ } from "./transpile.js";
+import { parseMDZ } from "../parser/index.js";
+import { processMDZAST } from "../processor/index.js";
+import { stringifyProps, transformeAttrs } from "../utils/index.js";
+
+const transpileMDZ = async (Markdown, {plugins = []} = {})=>{
+    const {ast, frontmatter} = await parseMDZ(Markdown, ...plugins);
+    const {esm, statements, hasCode}= processMDZAST(ast);
+
+    const { 'MDZ.Props': props, ...attrs } = frontmatter;
+
+    const body = [
+        'import {tags, HTMLWrapper} from "ziko"',
+        ...esm,
+        transformeAttrs(attrs),
+        `export default (${stringifyProps(props)})=>{`,
+        'const __items__ = []',
+        ...statements,
+        "const UI = tags.div({class : 'mdz-wrapper'}, ...__items__).style({display : 'contents'})",
+        "return UI }"
+      ]
+    // if(hasCode) body.unshift(`import("highlight.js/styles/${CodeStyle}.css")`);
+    return body.join("\n");
+}
+export{
+    transpileMDZ
+}

package/src/utils/index.js

@@ -1,4 +1,5 @@
 export { componentType } from "./component-type.js";
 export { processAttribute } from "./process-attributes.js";
-export { parseYml } from "./parse-yml.js";
-export { hyperscript } from "./hyperscript.js"
+export * from "./parse-yml.js";
+export { hyperscript } from "./hyperscript.js"
+export * from './transforme-attrs.js'

package/src/utils/transforme-attrs.js

@@ -0,0 +1,10 @@
+export const transformeAttrs = attrs => {
+    const HasAttributs = Object.keys(attrs).length > 0
+    return HasAttributs 
+        ? [
+            `const {${Object.keys(attrs).join(",")}} = ${JSON.stringify(attrs,"",2)}`,
+            `export {${Object.keys(attrs).join(", ")}}`
+        ].join("\n")
+        : ''
+
+}

package/src-dep/index.js

@@ -0,0 +1 @@
+export * from "./transpiler/index.js"

package/src-dep/test.js

@@ -0,0 +1,49 @@
+// 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
+---
+
+<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|
+|-|-|
+
+`
+
+// 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))
+
+// parseYml('a : 1\n__props__ : \n d : 2\n e : 1')

package/src-dep/transpiler/index.js

@@ -0,0 +1,3 @@
+export { parseMarkdown } from "./parser.js";
+export { processMDZAST } from "./process.js";
+export { transpileMDZ } from "./transpile.js";

package/src-dep/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-dep/utils/hyperscript.js

@@ -0,0 +1,29 @@
+export const hyperscript = (tag, attrs, children="") => {
+    const HasChildren = !!children;
+    if(tag){
+        children = ',""' + children + ',""'
+        const splitted = splitQuotedLines(children);
+        children = insertBetween(splitted, 'tags.br({})')
+        children[children.length - 1] = children.at(-1).slice(0, -3)
+        children[0] = children.at(0).slice(3)
+    }
+    return `tags.${tag}(${attrs}${HasChildren ?`, ${children}` : ""})`
+}
+
+function splitQuotedLines(str) {
+  return str
+    .slice(1, -1)                        // Remove the surrounding quotes
+    .split(/\r\n|\r|\n/)                // Split by newline types
+    .map(line => `"${line}"`);          // Re-wrap each line in quotes
+}
+
+function insertBetween(arr, value) {
+  const result = [];
+  for (let i = 0; i < arr.length; i++) {
+    result.push(arr[i]);
+    if (i < arr.length - 1) {
+      result.push(value);
+    }
+  }
+  return result;
+}

package/src-dep/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-dep/utils/parse-yml.js

@@ -0,0 +1,23 @@
+import { parse } from 'yaml'; 
+
+const parseYml = yml => {
+    const {__props__, ...__attrs__} = yml ? parse(yml) : {__props__ : {}} ;
+    const HasAttributs = Object.keys(__attrs__).length > 0
+    return {
+        props : __props__,
+        attrs : HasAttributs
+                ?[
+                    `const {${Object.keys(__attrs__).join(",")}} = ${JSON.stringify(__attrs__,"",2)}`,
+                    `export {${Object.keys(__attrs__).join(", ")}}`
+                ].join("\n")
+                : "",
+    }
+}
+
+const stringifyProps = (props) =>{
+    return props
+            ?`{${Object.entries(props).map(([key, value]) => `${key} = ${JSON.stringify(value)}`).join(", ")}}={}`
+            :""
+}
+
+export {parseYml, stringifyProps}

package/src-dep/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(", ")}}` 
+}