mdzjs 0.0.0

package/preview/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "preview",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.4.8"
+  },
+  "dependencies": {
+    "ziko": "^0.0.16"
+  }
+}

package/preview/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/preview/src/pages/[blog]/[lang]/index.js

@@ -0,0 +1,3 @@
+export default ({blog,lang})=>{
+    console.log({blog,lang})
+}

package/preview/src/pages/[blog]/index.js

@@ -0,0 +1,3 @@
+export default (params)=>{
+    console.log(params)
+}

package/preview/src/pages/about.js

@@ -0,0 +1,6 @@
+import { p } from "ziko"
+export default ()=>{
+    return p("About  ").style({
+        color:"red",
+    })
+}

package/preview/src/pages/articles/[data]/[color]/index.js

@@ -0,0 +1,6 @@
+import { text } from "ziko";
+export default ({data,color})=>{
+    return text(data).style({
+        color : color
+    })
+}

package/preview/src/pages/articles/a1.js

@@ -0,0 +1,6 @@
+import { p } from "ziko"
+export default ()=>{
+    return p("Bla bla bla  ").style({
+        color:"red",
+    })
+}

package/preview/src/pages/index.js

@@ -0,0 +1,20 @@
+import { p,App,Flex } from "ziko"
+
+const {QueryParams} = __Ziko__
+export default ()=>{
+    return App({
+        head : {
+            title : "ziko",
+        },
+        wrapper : ()=>Flex(p("Hello world").style({
+            color : QueryParams.color ?? "black"
+        })).size("100vw","100vh").vertical(0,0)
+    })
+}
+document.body.style.overflow = "hidden"
+// export default ()=>{
+//     return p("Hello from zikojs File based routing ").style({
+//         color:"red",
+//         fontFamily : "Gloria Hallelujah"
+//     })
+// }

package/preview/src/pages/me.js

@@ -0,0 +1,3 @@
+export default ()=>{
+    console.log("me")
+}

package/preview/test.mdz

@@ -0,0 +1,21 @@
+---
+modules : 
+ - import InteractiveBlock from "./InteractiveBlock.js"
+title : MDZ
+background : tomato
+---
+**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***
+
+Here’s an example of an interactive block rendered within this MDZ file:
+
+<InteractiveBlock data="Hello  from MDZ" color="cyan"/>
+
+### 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.
+
+

package/preview/vite.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+import { MDZ } from "../src/vite/index.js";
+export default defineConfig({
+    plugins : [MDZ()]
+})

package/rollup.config.js

@@ -0,0 +1,67 @@
+import { Str } from "ziko";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from '@rollup/plugin-commonjs';
+
+import terser from "@rollup/plugin-terser";
+
+const Addon_name = "mdz";
+const Author = "";
+
+const banner = `
+/*
+  Project: ${Addon_name}
+  Author: ${Author}
+  Date : ${new Date()}
+*/
+`;
+const isProduction = process.env.NODE_ENV === "production";
+
+const output = [
+  {
+    file: `dist/${Addon_name}.mjs`,
+    format: "es",
+    banner,
+    exports: "named",
+  },
+  {
+    file: `dist/${Addon_name}.js`,
+    format: "umd",
+    name: Str.hyphen2pascalcase(Addon_name),
+    banner,
+    exports: "named",
+  },
+];
+isProduction &&
+  output.push(
+    {
+      file: `dist/${Addon_name}.min.mjs`,
+      format: "es",
+      banner,
+      exports: "named",
+    },
+    {
+      file: `dist/${Addon_name}.min.js`,
+      format: "umd",
+      name: Str.hyphen2pascalcase(Addon_name),
+      banner,
+      exports: "named",
+      plugins: [
+        terser({
+          output: {
+            comments: (node, { type, value }) =>
+              type === "comment2" && value.includes("Author"),
+          },
+        }),
+      ],
+    },
+  );
+
+export default {
+  input: "src/index.js",
+  output,
+  external: ["ziko"],
+  plugins: [
+    resolve(),
+    commonjs(),
+  ],
+};

package/src/converter/index.js

@@ -0,0 +1,17 @@
+import { parseMDZ } from "../parser/index.js"
+const getZikoScript=(MDZ)=>{
+    let {modules,attributes,components}=parseMDZ(MDZ)
+    return `
+import {Flex, HTMLWrapper} from "ziko";
+${modules?.join(";\n")};
+
+export const attributes = ${JSON.stringify(attributes)}
+
+export default ()=> Flex(
+ ${components.join(",\n ")}
+).vertical(0, "space-around")
+    `
+}
+export{
+    getZikoScript
+}

package/src/index.js

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

package/src/parser/get-component-type.js

@@ -0,0 +1,17 @@
+function getComponentType(component) {
+    const trimmedComponent = component.trim();
+    const tagRegex = /^<([a-zA-Z][a-z0-9]*)/;
+    const match = trimmedComponent.match(tagRegex);
+    if (match) {
+        const tagName = match[1];
+        if (tagName[0] === tagName[0].toUpperCase()) {
+            return "jsx";
+        } else {
+            return "html";
+        }
+    }
+    return "unknown";
+}
+export{
+    getComponentType
+}

package/src/parser/index.js

@@ -0,0 +1,30 @@
+import { smartJoin } from './smart-join.js';
+import { jsx2js } from './jsx2js.js';
+import { getComponentType } from './get-component-type.js';
+import { parseMarkdown } from './parser-markdown.js';
+function parseMDZ(markdown) {
+    const { body, attributes } = parseMarkdown(markdown.trim(""));
+    const {modules, ...props} = attributes
+    let JSXIndexesBefore = [], JSXIndexesAfter = [];
+    const Output = body.split("\n").filter((n) => n !== "");
+    Output.filter((n, i) => {
+      if (getComponentType(n) === "jsx") JSXIndexesBefore.push(i);
+    });
+    const JoinedTags = smartJoin(Output, JSXIndexesBefore);
+    JoinedTags.filter((n, i) => {
+      if (getComponentType(n) === "jsx") JSXIndexesAfter.push(i);
+    });
+    let components = [];
+    JoinedTags.forEach((n, i) => {
+      if (JSXIndexesAfter.includes(i)) components.push(jsx2js(n));
+      else components.push(`HTMLWrapper("${n}")`);
+    });
+    return{
+      components,
+      modules,
+      attributes : props
+    }
+  }
+export{
+    parseMDZ
+}

package/src/parser/jsx2js.js

@@ -0,0 +1,23 @@
+function jsx2js(component) {
+    const regex = /<(\w+)([^>]*)\/?>/;
+    const match = component.match(regex);
+    if (!match) {
+        throw new Error("Invalid component format");
+    }
+    const componentName = match[1];
+    const attributesString = match[2];
+    const attributes = {};
+    const attrRegex = /(\w+)="([^"]*)"/g;
+    let attrMatch;
+    while ((attrMatch = attrRegex.exec(attributesString)) !== null) {
+        attributes[attrMatch[1]] = attrMatch[2];
+    }
+    const attributesArray = Object.entries(attributes).map(([key, value]) => {
+        return `${key}:${JSON.stringify(value)}`;
+    });
+    const attributesStringFormatted = attributesArray.join(',');
+    return `${componentName}({${attributesStringFormatted}})`;
+}
+export{
+    jsx2js
+}

package/src/parser/parser-markdown.js

@@ -0,0 +1,18 @@
+import { marked } from 'marked';
+import fm from 'front-matter';
+
+function parseMarkdown(markdown) {
+  let FMProps = {};
+  function preprocess(markdown) {
+    const { attributes, body } = fm(markdown);
+    FMProps = { ...attributes };
+    return body;
+  }
+  marked.use({ hooks: { preprocess } });
+  const body = marked.parse(markdown);
+  return { body, attributes: FMProps };
+}
+
+export{
+    parseMarkdown,
+}

package/src/parser/smart-join.js

@@ -0,0 +1,18 @@
+function smartJoin(strings = [], indexes = []) {
+    const result = [];
+    let lastIndex = 0;
+    indexes.forEach(index => {
+        if (index > lastIndex) {
+            result.push(strings.slice(lastIndex, index).join(''));
+        }
+        result.push(strings[index]);
+        lastIndex = index + 1; 
+    });
+    if (lastIndex < strings.length) {
+        result.push(...strings.slice(lastIndex));
+    }
+    return result;
+}
+export {
+    smartJoin
+}

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

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