mdzjs 0.0.2 → 0.0.4

package/preview/package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "highlight.js": "^11.11.0",
         "jsdom": "^25.0.1",
-        "prism": "^4.1.2",
+        "prism": "^1.0.0",
         "ziko": "^0.0.27",
         "ziko-gl": "^0.0.3",
         "ziko-lottie": "^0.0.7",
@@ -691,24 +691,12 @@
         "node": ">= 14"
       }
     },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "license": "MIT"
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
-    "node_modules/change-emitter": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
-      "integrity": "sha512-YXzt1cQ4a2jqazhcuSWEOc1K2q8g9H6eWNsyZgi640LDzRWVQ2eDe+Y/kVdftH+vYdPF2rgDb3dLdpxE1jvAxw==",
-      "license": "MIT"
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -721,24 +709,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/core-js": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-      "integrity": "sha512-ZiPp9pZlgxpWRu0M+YWbm6+aQ84XEfH1JRXvfOc/fILWI0VKhLC2LX13X1NYq4fULzLMq7Hfh43CSo2/aIaUPA==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "license": "MIT"
-    },
-    "node_modules/create-react-class": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz",
-      "integrity": "sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
-      }
-    },
     "node_modules/cssstyle": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
@@ -796,15 +766,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/encoding": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "license": "MIT",
-      "dependencies": {
-        "iconv-lite": "^0.6.2"
-      }
-    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -856,21 +817,6 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
-    "node_modules/fbjs": {
-      "version": "0.8.18",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.18.tgz",
-      "integrity": "sha512-EQaWFK+fEPSoibjNy8IxUtaFOMXcWsY0JaVrQoZR9zC8N2Ygf9iDITPWjUTVIax95b6I742JFLqASHfsag/vKA==",
-      "license": "MIT",
-      "dependencies": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.30"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
@@ -909,11 +855,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-      "integrity": "sha512-r8huvKK+m+VraiRipdZYc+U4XW43j6OFG/oIafe7GfDbRpCduRoX9JI/DRxqgtBSCeL+et6N6ibZoedHS2NyOQ=="
-    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -970,31 +911,6 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "license": "MIT"
     },
-    "node_modules/is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha512-9c4TNAKYXM5PRyVcwUZrF3W09nQ+sO7+jydgs4ZGW9dhsLG2VOlISJABombdQqQRXCwuYG3sYV/puGf5rp0qmA==",
-      "license": "MIT",
-      "dependencies": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "license": "MIT"
-    },
     "node_modules/jsdom": {
       "version": "25.0.1",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
@@ -1066,18 +982,6 @@
         "@types/trusted-types": "^2.0.2"
       }
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/lottie-web": {
       "version": "5.12.2",
       "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
@@ -1130,31 +1034,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
-    },
     "node_modules/nwsapi": {
       "version": "2.2.16",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.16.tgz",
       "integrity": "sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==",
       "license": "MIT"
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -1210,53 +1095,10 @@
       }
     },
     "node_modules/prism": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/prism/-/prism-4.1.2.tgz",
-      "integrity": "sha512-SsqrfKkYKYEYz/7RRET2KVZd9O22Rnj3331Al06ClLMycKWoM+MpfrjQrKuHGoIJ9IOy+k27kPEFnqPoAeFZpA==",
-      "license": "MIT",
-      "dependencies": {
-        "prism-react": "^1.0.2",
-        "prism-redux": "^1.0.2"
-      }
-    },
-    "node_modules/prism-react": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/prism-react/-/prism-react-1.0.2.tgz",
-      "integrity": "sha512-OoBo0kX55Fi+M4oGuYQ+AkU4/xSvB357mLXbYGP3j4oi4RtsdY5Rn3ViJ6gGU8IkZKs5cnmF7IteWWwUFyVd7Q==",
-      "license": "MIT",
-      "dependencies": {
-        "recompose": "^0.22.0"
-      },
-      "peerDependencies": {
-        "react": "^15.0.2 || ^0.14.8"
-      }
-    },
-    "node_modules/prism-redux": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/prism-redux/-/prism-redux-1.0.2.tgz",
-      "integrity": "sha512-e1DGRK+V/dxL6n6M25Py1QrAQLHkeueXyNxDTURT1y+KAMwSJdnlNvGU3ZLY2RIaA+ZdFTc9oTvTSR+mS88VyQ==",
-      "license": "MIT"
-    },
-    "node_modules/promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "license": "MIT",
-      "dependencies": {
-        "asap": "~2.0.3"
-      }
-    },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prism/-/prism-1.0.0.tgz",
+      "integrity": "sha512-nPYWvGqE1dRk1QMKiQwdIxbGUIvp0i89U/JidlRIxQtu+I5089N+nY8w4eGxG76PnjB7Xc4cmMMiTwRJ87aVhQ==",
+      "license": "ISC"
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -1267,45 +1109,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/react": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.7.0.tgz",
-      "integrity": "sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "create-react-class": "^15.6.0",
-        "fbjs": "^0.8.9",
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.0",
-        "prop-types": "^15.5.10"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/recompose": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.22.0.tgz",
-      "integrity": "sha512-QjNK/CgNg6wa7sqaQelgkRdl7ktIYbOV4xp0m2n8TexmHI5h3gjOc5a6nNQhtH3Js63hGZ1HfvJ3DUErrvZ2yg==",
-      "license": "MIT",
-      "dependencies": {
-        "change-emitter": "^0.1.2",
-        "fbjs": "^0.8.1",
-        "hoist-non-react-statics": "^1.0.0",
-        "symbol-observable": "^1.0.4"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0"
-      }
-    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -1372,12 +1175,6 @@
         "node": ">=v12.22.7"
       }
     },
-    "node_modules/setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "license": "MIT"
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1388,15 +1185,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -1451,36 +1239,10 @@
         "node": ">=18"
       }
     },
-    "node_modules/ua-parser-js": {
-      "version": "0.7.40",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.40.tgz",
-      "integrity": "sha512-us1E3K+3jJppDBa3Tl0L3MOJiGhe1C6P0+nIvQAFYbxlMAx0h81eOwLmU57xgqToduDDPx3y5QsdjPfDu+FgOQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "ua-parser-js": "script/cli.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/vite": {
-      "version": "5.4.8",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
-      "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
+      "version": "5.4.19",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
+      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1570,12 +1332,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/whatwg-fetch": {
-      "version": "3.6.20",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
-      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
-      "license": "MIT"
-    },
     "node_modules/whatwg-mimetype": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",

package/preview/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "highlight.js": "^11.11.0",
     "jsdom": "^25.0.1",
-    "prism": "^4.1.2",
+    "prism": "^1.0.0",
     "ziko": "^0.0.27",
     "ziko-gl": "^0.0.3",
     "ziko-lottie": "^0.0.7",

package/preview/vite.config.js

@@ -1,6 +1,8 @@
 import { defineConfig } from "vite";
 // import { MDZ } from "../src/vite/index.js";
-import ViteMDZ  from "../src/bundlers/vite.js"
+// import ViteMDZ  from "../src/bundlers/vite.js"
+import ViteMDZ from "mdzjs/vite"
+
 export default defineConfig({
     plugins : [ViteMDZ()]
 })

package/src/transpiler/process.js

@@ -6,6 +6,7 @@ import {
 } from "../utils/index.js"
 import hljs from "highlight.js"
 const processMDZAST = (markdownAST) => {
+    let hasCode = false;
     const transformNode = (node) => {
       switch(node.type){
         case 'mdxjsEsm' : {
@@ -16,7 +17,8 @@ const processMDZAST = (markdownAST) => {
         }
         case 'text' : {
           const text = node.value;
-          return `"${text}"`
+          const escaped = text.replace(/"/g, '\\"');
+          return `"${escaped}"`;
         }
         case 'mdxTextExpression' : {
           const {value} = node
@@ -25,23 +27,19 @@ const processMDZAST = (markdownAST) => {
         case 'heading' : {
           const childNodes = node.children.map(transformNode).join(', ');
           return hyperscript(`h${node.depth}`,"{}", childNodes);
-          // return `h('h${node.depth}', {}, ${childNodes})`;
         }
         case 'paragraph' : {
           const childNodes = node.children.map(transformNode).join(', ');
           return hyperscript("p","{}", childNodes)
-          // return `h('p', {}, ${childNodes})` 
         }
         case 'strong': {
           const childNodes = node.children.map(transformNode).join(', ');
           return hyperscript("strong","{}", childNodes);
-          // return `h('strong', {}, ${childNodes})`;
         }
   
         case 'emphasis': {
           const childNodes = node.children.map(transformNode).join(', ');
-          return hyperscript("emphasis","{}", childNodes);
-          // return `h('em', {}, ${childNodes})`;
+          return hyperscript("em","{}", childNodes);
         }
   
         case 'link': {
@@ -58,27 +56,25 @@ const processMDZAST = (markdownAST) => {
           const listTag = node.ordered ? 'ol' : 'ul';
           const childNodes = node.children.map(transformNode).join(', ');
           return hyperscript(listTag, "{}", childNodes);
-          // return `h('${listTag}', {}, ${childNodes})`;
         }
   
         case 'listItem': {
           const childNodes = node.children.map(transformNode).join(', ');
           return hyperscript("li", "{}", childNodes);
-          // return `h('li', {}, ${childNodes})`;
         }
   
         case 'code': {
-          const language = node.lang ? `{ 'data-lang': '${node.lang}' }` : '';
+          hasCode = true;
+          // const language = node.lang ? `{ 'data-lang': '${node.lang}' }` : '';
           const highlightedCode = hljs.highlightAuto(node.value, [node.lang || '']).value;
-          hljs
+          // hljs
           const formatedCode = highlightedCode.replace(/(\r\n|\n|\r)/g, "<br>")    
-          const out =  hyperscript("pre", "{}", hyperscript(
-            "code",
-            language,
-            JSON.stringify(node.value)
-          ));
+          // const out =  hyperscript("pre", "{}", hyperscript(
+          //   "code",
+          //   language,
+          //   JSON.stringify(node.value)
+          // ));
           return `HTMLWrapper('<pre>${formatedCode}</pre>')`
-          // return out
         }
   
         case 'blockquote': {
@@ -110,6 +106,7 @@ const processMDZAST = (markdownAST) => {
           // return `h('td', {}, ${childNodes}).style({border : "1px solid darkblue", borderCollapse: "collapse", padding : "5px"})`;
         }
         case 'yaml':{
+          // console.log({yml : node.value})
           const {props, attrs} = parseYml(node.value)
           return {
             type : "yaml",
@@ -121,10 +118,12 @@ const processMDZAST = (markdownAST) => {
           const {name, attributes, children} = node;
           const childNodes = children.map(transformNode).join(', ');
           const hasChildren = childNodes.length > 0;
-          console.log({name})
-          console.log(componentType(name))
+          // console.log({name})
+          // console.log(componentType(name))
           switch(componentType(name)){
-            case "jsx" : return `${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+            case "jsx" : {
+              return `${name}(${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
+            }
             case "html" : return `h("${name}", ${processAttribute(attributes)}${hasChildren ?`, ${childNodes}`:""})`;
             case "script" : {
               const statements = [];
@@ -149,8 +148,8 @@ const processMDZAST = (markdownAST) => {
       switch(node.type){
         case 'yaml' : {
           const Transformed = transformNode(node)
-          props = Transformed.props,
-          attrs = Transformed.attrs
+          props = Transformed.props;
+          attrs = Transformed.attrs;
         } break;
         case 'mdxjsEsm' : esm.push(node.value); break;
         default : {
@@ -164,7 +163,8 @@ const processMDZAST = (markdownAST) => {
       attrs,
       props,
       esm,
-      statements
+      statements,
+      hasCode
     }
   };
 export {

package/src/transpiler/transpile.js

@@ -1,20 +1,21 @@
 import { parseMDZ } from "./parser.js";
 import { processMDZAST } from "./process.js";
+import { stringifyProps } from "../utils/parse-yml.js";
 
-const transpileMDZ=(Markdown)=>{
+const transpileMDZ=(Markdown, CodeStyle = "1c-light")=>{
     const ast = parseMDZ(Markdown);
-    const {attrs, props, esm, statements}= processMDZAST(ast)
-    console.log({props})
+    const {attrs, props, esm, statements, hasCode}= processMDZAST(ast)
     const body = [
         'import {h, HTMLWrapper, Flex} from "ziko"',
         attrs,
         ...esm,
-        `export default (${props})=>{`,
+        `export default (${stringifyProps(props)})=>{`,
         'const __items__ = []',
         ...statements,
         "const UI = Flex(...__items__).vertical(0, 0)",
         "return UI }"
       ]
+    if(hasCode) body.unshift(`import("highlight.js/styles/${CodeStyle}.css")`);
     return body.join("\n");
 }
 export{

package/src/types/Style.d.ts

@@ -0,0 +1,84 @@
+export type Style = 
+    | '1c-light'
+    | 'a11-dark'
+    | 'a11-dark'
+    | 'agate'
+    | 'an-old-hope'
+    | 'androidstudio'
+    | 'arduino-light'
+    | 'arta'
+    | 'ascetic'
+    | 'atom-one-dark-reasonable'
+    | 'atom-one-dark'
+    | 'atom-one-light'
+    | 'brown-paper'
+    | 'codepen-embed'
+    | 'color-brewer'
+    | 'cybertopia-cherry'
+    | 'cybertopia-dimmer'
+    | 'cybertopia-icecap'
+    | 'cybertopia-saturated'
+    | 'dark'
+    | 'default'
+    | 'devibeans'
+    | 'docco'
+    | 'far'
+    | 'felipec'
+    | 'foundation'
+    | 'github-dark-dimmed'
+    | 'github-dark'
+    | 'github'
+    | 'gml'
+    | 'googlecode'
+    | 'gradient-dark'
+    | 'gradient-light'
+    | 'grayscale'
+    | 'hybrid'
+    | 'idea'
+    | 'intellij-light'
+    | 'ir-black'
+    | 'isbl-editor-dark'
+    | 'isbl-editor-light'
+    | 'kimbie-dark'
+    | 'kimbie-light'
+    | 'lightfair'
+    | 'lioshi'
+    | 'magula'
+    | 'mono-blue'
+    | 'monokai-sublime'
+    | 'monokai'
+    | 'night-owl'
+    | 'nnfx-dark'
+    | 'nord'
+    | 'obsidian'
+    | 'panda-syntax-dark'
+    | 'panda-syntax-light'
+    | 'paraiso-dark'
+    | 'paraiso-light'
+    | 'pojoaque'
+    | 'purebasic'
+    | 'qtcreator-dark'
+    | 'qtcreator-light'
+    | 'rainbow'
+    | 'rose-pine-dawn'
+    | 'rose-pine-moon'
+    | 'rose-pine'
+    | 'routeros'
+    | 'school-book'
+    | 'shades-of-purple'
+    | 'srcery'
+    | 'stackoverflow-dark'
+    | 'stackoverflow-light'
+    | 'sunburst'
+    | 'tokyo-night-dark'
+    | 'tokyo-night-light'
+    | 'tomorrow-night-blue'
+    | 'tomorrow-night-bright'
+    | 'vs'
+    | 'vs2015'
+    | 'xcode'
+    | 'xt256'
+    
+
+    
+ 

package/src/utils/hyperscript.js

@@ -1,4 +1,29 @@
 export const hyperscript = (tag, attrs, children="") => {
     const HasChildren = !!children;
+
+    if(tag === "p"){
+        children = children + ',""'
+        const splitted = splitQuotedLines(children);
+        children = insertBetween(splitted, 'h("br")')
+        children[children.length - 1] = children.at(-1).slice(0, -3)
+    }
     return `h("${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;
+}