add props and fix multiline components

Author: zakarialaoui10

rollup.config.js

@@ -57,7 +57,7 @@ isProduction &&
   );
 
 export default {
-  input: "src/index.js",
+  input: "v2/index.js",
   output,
   external: ["ziko"],
   plugins: [

v2/index.js

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

v2/readme.md

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

v2/test.js

@@ -4,11 +4,19 @@ const Markdown = `
 title: "Example Page"
 author: "John Doe"
 count : 10
+__Props__ : {
+  color : "red",
+  id : 10
+}
 ---
 
 import Button from './Button.js';
 
-# Hello World <Button data = "100"/>
+# Hello World 
+<Button 
+data="100" 
+p="kkk"
+/>
 
 This is a paragraph with <Button data="hello"/>
 
@@ -26,4 +34,5 @@ This is a paragraph with <Button data="hello"/>
 console.log(transpileMDZ(Markdown))
 
 // const md2 = "```js \n console.log(1) \n ```"
-// console.log(transpileMDZ(md2))
+// console.log(transpileMDZ(md2))
+

v2/transformers/vite/index.js

@@ -1,5 +1,5 @@
 import { transpileMDZ } from "../../transpiler/index.js";
-export function MDZ(){
+export function ViteMDZ(){
     return {
       name: 'MDZ',
       transform(src, id) {

v2/transpiler/index.js

@@ -86,10 +86,11 @@ const transformMDZ = (markdownAST) => {
       }
       case 'html' : {
         const component = node.value.trim();
+        console.log({component})
         const type = getComponentType(component);
         switch (type) {
           case 'jsx':
-            return ` ${jsx2js(component)}`;
+            return ` ${jsx2js(component.replaceAll("\n",""))}`;
           case 'html':
             return ` HTMLWrapper("${component}")`;
           default:
@@ -103,22 +104,36 @@ const transformMDZ = (markdownAST) => {
   };
 
   const body = markdownAST.children.map(transformNode).join(',\n');
-  return `()=>Flex(
-${body}
-).vertical(0,0)`
+  return body
+//   return `const UI=()=>Flex(
+// ${body}
+// ).vertical(0,0)
+// export default UI
+// `
 };
 
 const transpileMDZ= markdown =>{
   const { imports, frontmatter, cleanedMarkdown } = processMDZ(markdown);
   const ast = parseMDZ(cleanedMarkdown);
-  const jsFunction = transformMDZ(ast);
+  const {__Props__, ...Attr} = frontmatter
+  const body = transformMDZ(ast);
+  const defaultProps = __Props__
+    ? Object.entries(__Props__)
+        .map(([key, value]) => `${key} = ${JSON.stringify(value)}`)
+        .join(', ')
+    : '';
+  let ui = `const UI=({${defaultProps}})=>Flex(
+${body}
+).vertical(0,0);
+export default UI;
+  `
   let exports = `
-const attributes = ${JSON.stringify(frontmatter)};
-export {${Object.keys(frontmatter)}} = attributes;
+const Attr = ${JSON.stringify(Attr)};
+export {${Object.keys(Attr)}} = Attr;
   `
   const Output = [
     ...imports,
-    jsFunction,
+    ui,
     exports,
   ].join('\n');