ziko 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities",
   "keywords": [
     "Zikojs",
@@ -15,8 +15,7 @@
     "Single Page Application"
   ],
   "type": "module",
-  "source": "core/index.js",
-  "main": "dist/ziko.cjs",
+  "main": "dist/ziko.mjs",
   "module": "dist/ziko.mjs",
   "unpkg": "dist/ziko.min.js",
   "files": [
@@ -29,11 +28,20 @@
     ".": {
       "import": "./dist/ziko.mjs",
       "require": "./dist/ziko.cjs"
+    },
+    "./A": {
+      "import": "./src/A/index.js"
+    },
+    "./react": {
+      "import": "./wrapper/react/index.jsx"
     }
   },
+  "bin": {
+    "create-ziko-app": "starter/bin/index.js"
+  },
   "scripts": {
     "test": "node --watch test/index.js",
-    "test-link":"node _link/index.js",
+    "test-link": "node _link/index.js",
     "lint": "eslint src/*/*/*",
     "dev": "rollup -c rollup.config.js -w",
     "build": "rollup -c rollup.config.js"

package/starter/bin/index.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import path from "path"
+import { fileURLToPath } from 'node:url';
+import { createFolder,copyFolder , runCommand } from "./utils/commands.js";
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE = path.join(__dirname,"../template");
+const PROJECT_TITLE = process.argv[2]||"zikojs-project";
+createFolder(PROJECT_TITLE);
+copyFolder(TEMPLATE,path.join(process.cwd(),PROJECT_TITLE));
+runCommand(`cd ${PROJECT_TITLE} && npm install`);
+

package/wrapper/react/README.md

@@ -0,0 +1,26 @@
+# Overview
+react-ziko is a tool designed for rendering [ziko](https://github.com/zakarialaoui10/ziko.js) elements within a React application.
+
+# Install 
+```bash
+  npm i react-ziko
+```
+# Usage
+```jsx
+import ZikoUI from "react-ziko";
+import { text } from "ziko";
+const ui = text("Hello World").style({
+    color:"darkblue"
+});
+export default function App() {
+  return (
+    <main>
+      <ZikoUI ui={ui.render(false)} />
+    </main>
+  );
+}
+
+```
+# Dependencies
+ - [React](https://react.dev/) :  
+ - [Zikojs](https://github.com/zakarialaoui10/ziko.js) :

package/wrapper/react/index.jsx

@@ -1,9 +1,15 @@
 import React, { useRef, useEffect } from "react";
 import {ZikoUIElement} from "ziko";
+/**
+ * A React component for rendering ZikoUIElement.
+ * @param {Object} props - Component props.
+ * @param {ZikoUIElement} props.ui - The ZikoUIElement to render.
+ * @returns {JSX.Element} JSX representation of the ZikoUI component.
+ */
 function ZikoUI({ ui }) {
   const containerRef = useRef(null);
   useEffect(() => {
-    console.log(globalThis.__ZikoConfig__)
+    globalThis.__Ziko__.__Config__.setDefault({render:false})
     if (containerRef.current && ui && ui instanceof ZikoUIElement) {
       containerRef.current.innerHTML = "";
       containerRef.current.appendChild(ui.element);

package/wrapper/svelte/ZikoUI.svelte

@@ -0,0 +1,15 @@
+<ziko-ui bind:this={containerRef} data-engine="ziko"></ziko-ui>
+
+<script>
+  import { onMount } from 'svelte';
+  import {ZikoUIElement} from "ziko";
+  let containerRef;
+  
+  onMount(() => {
+    if (containerRef && ui instanceof ZikoUIElement) {
+      containerRef.innerHTML = "";
+      containerRef.appendChild(ui.element);
+    }
+  });
+  export let ui;
+</script>

package/wrapper/vue/ZikoUI.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" data-engine="ziko">Test</div>
+  <ziko-ui ref="containerRef" data-engine="ziko"></ziko-ui>
 </template>
 <script>
 import {ZikoUIElement} from "ziko"
@@ -8,10 +8,16 @@ export default {
     ui: Object
   },
   mounted() {
+    //globalThis.__Ziko__.__Config__.setDefault({render:false})
     if (this.$refs.containerRef && this.ui instanceof ZikoUIElement) {
       this.$refs.containerRef.innerHTML = "";
-      this.$refs.containerRef.appendChild(this.ui.element);
+      this.$refs.containerRef.appendChild(this.ui.render(false).element);
     }
   }
 };
 </script>
+<style scoped>
+  ziko-ui{
+    display:block;
+  }
+</style>

package/core/App/Globals/__Target__.js

@@ -1,3 +0,0 @@
-var __Target__=null;
-if(globalThis?.document?.body)__Target__=document.body;
-export { __Target__}

package/core/App/Globals/__UI__.js

@@ -1,38 +0,0 @@
-const __UI__={
-    text:[],
-    p:[],
-    pre:[],
-    h1:[],
-    h2:[],
-    h3:[],
-    h4:[],
-    h5:[],
-    h6:[],
-    br:[],
-    hr:[],
-    btn:[],
-    ol:[],
-    ul:[],
-    image:[],
-    video:[],
-    audio:[],
-    Article:[],
-    Main:[],
-    Section:[],
-    Aside:[],
-    Nav:[],
-    Header:[],
-    Footer:[],
-    Flex:[],
-    FlexMain:[],
-    FlexNav:[],
-    FlexHeader:[],
-    FlexFooter:[],
-    FlexSection:[],
-    FLexArticle:[],
-    FlexAside:[],
-    Table:[],
-    Svg:[],
-    Canvas:[]
-  }
-export { __UI__ };

package/core/App/Globals/__init__.js

@@ -1,8 +0,0 @@
-const __init__=()=>document.documentElement.setAttribute("data-engine","zikojs");
-// if(globalThis?.document){
-//     document.addEventListener("DOMContentLoaded", __init__);
-//     document.removeEventListener("DOMContentLoaded", __init__);
-// }
-export {
-    __init__
-}

package/core/App/Globals/index.js

@@ -1,18 +0,0 @@
-// var __Target__=null;
-// if(globalThis?.document?.body)__Target__=document.body;
-const __ZikoConfig__={
-    default:{
-        target:null,
-        render:true
-    },
-    setDefault:function(pairs){
-        const keys=Object.keys(pairs);
-        const values=Object.values(pairs);
-        for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
-    },
-    init:()=>document.documentElement.setAttribute("data-engine","zikojs")
-}
-export * from "./__init__";
-export * from "./__Target__";
-export * from "./__UI__";
-export {__ZikoConfig__}

package/core/App/Router/index.js

@@ -1,40 +0,0 @@
-import { text } from "../../UI/Text";
-class ZikoSPA{
-    constructor(root_UI,routes){
-        this.root_UI=root_UI;
-        this.routes=new Map([
-            [404,text("Error 404")],
-            ...Object.entries(routes)
-        ]);
-        this.patterns=new Map();
-        this.maintain();
-        window.onpopstate = this.render(location.pathname);
-
-    }
-    get(path,wrapper){
-        (path instanceof RegExp)
-        ? this.patterns.set(path,wrapper)
-        : this.routes.set(path,wrapper);
-        this.maintain();
-        return this;
-    }
-    maintain(){
-        this.root_UI.append(...this.routes.values());
-        [...this.routes.values()].map(n=>n.render(false));
-        this.render(location.pathname)
-        return this;
-    }
-    render(path){
-        if(this.routes.get(path))this.routes.get(path).render(true);
-        else{   
-            const key=[...this.patterns.keys()].find(pattern=>pattern.test(path))
-            if(key)this.patterns.get(key)(path);
-            else this.routes.get(404).render(true)
-        }
-        window.history.pushState({}, "", path);
-        return this;
-    }
-}
-const SPA=(root_UI,routes,patterns)=>new ZikoSPA(root_UI,routes,patterns);
-
-export {SPA}

package/core/App/Seo/index.js

@@ -1,43 +0,0 @@
-class ZikoSeo{
-    constructor(app){
-        this.app=app;
-        this.meta={};
-        this.#setMeta("generator","zikojs")
-    }
-    #setMeta(key,value){
-        const meta=document.querySelector(`meta[name=${key}]`);
-        this.meta=meta?meta:document.createElement("meta");
-        this.meta.setAttribute("name",key);
-        this.meta.setAttribute("content",value);
-        if(!meta)this.app.head.append(this.meta);
-        return this;     
-    }
-    charset(charset="utf-8"){
-        const meta=document.querySelector("meta[charset]");
-        this.meta=meta?meta:document.createElement("meta");
-        this.meta.setAttribute("charset",charset);
-        if(!meta)this.app.head.append(this.meta);
-        return this;
-    }
-    description(description){
-        this.#setMeta("description",description);
-        return this;    
-    }
-    viewport(viewport="width=device-width, initial-scale=1.0"){
-        this.#setMeta("viewport",viewport);
-        return this;    
-    }
-    keywords(...keywords){
-        keywords.push("zikojs");
-        keywords=[...new Set(keywords)].join(", ");
-        this.#setMeta("keywords",keywords);
-        return this;
-    }
-    author(name="",email=""){
-        const author=[name,email].join(", ");
-        this.#setMeta("author",author);
-        return this;
-    }
-}
-const Seo=(app)=>new ZikoSeo(app);
-export{Seo}