ziko 0.0.4 → 0.0.5

package/core/App/Globals/index.js

@@ -0,0 +1,18 @@
+// 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/{src → core}/App/app.js

@@ -15,7 +15,7 @@ class ZikoUIApp extends ZikoUIFlex{
             theme:null,
             isRoot:true
         });
-        this.render();
+        this.render(globalThis.__ZikoConfig__.default.render);
     }
     #init(){
         this.root.setAttribute("data-engine","zikojs");

package/{src → core}/App/index.js

@@ -8,4 +8,5 @@ export {
 } from "./Themes";
 export {
     __init__,
+    __ZikoConfig__
 } from "./Globals"

package/{src → core}/Graphics/Canvas/canvas.js

@@ -20,7 +20,7 @@ class ZikoUICanvas extends ZikoUIElement{
             [-10,-10],
             [10,10]
         ])
-        this.render();
+        this.render(globalThis.__ZikoConfig__.default.render);
         setTimeout(()=>this.resize(w,h),0);
         this.on("sizeupdated",()=>this.adjust())
     }

package/{src → core}/Reactivity/Events/index.js

@@ -21,7 +21,7 @@ const Events={
     Focus,
     Input,
     HashEvent,
-    CustomEvent,
+    customEvent,
     ExtractAll: function () {
         const keys = Object.keys(this);
         for (let i = 0; i < keys.length; i++) {

package/{src → core}/UI/CustomElement/Elements/Accordion/index.js

@@ -1,10 +1,10 @@
 import ZikoUIElement from "../../../ZikoUIElement";
 import { ZikoUIFlex } from "../../Flex";
-import { ZikoHtml } from "../../../Misc";
+import { html } from "../../../Misc";
 class ZikoUIAccordion extends ZikoUIElement{
     constructor(summary,content,icon="😁"){
         super("details","Accordion")
-        this.summary=ZikoHtml("summary",summary).style({
+        this.summary=html("summary",summary).style({
             fontSize:"1.1em",
             padding:"0.625rem",
             fontWeight:"bold",

package/{src → core}/UI/CustomElement/Elements/CodeNote/CodeCell.js

@@ -142,7 +142,7 @@ class ZikoUICodeCell extends ZikoUIFlex{
 
     }
     evaluate(order){
-        globalThis.__Target__=this.Output.element;
+        globalThis.__ZikoConfig__.default.target=this.Output.element;
         switch(this.cache.type){
             case "js":this.#evaluateJs(order);break;
         }

package/{src → core}/UI/CustomElement/Elements/CodeNote/SubElements.js

@@ -1,8 +1,8 @@
-import { ZikoHtml } from "../../../Misc";
+import { html } from "../../../Misc";
 import { Flex } from "../../Flex";
 import { text } from "../../../Text";
 import { ZikoUICodeNote } from "./CodeNote";
-const Input=(codeText="")=>ZikoHtml("code",codeText).style({
+const Input=(codeText="")=>html("code",codeText).style({
     width:"100%",
     height:"auto",
     padding:"10px",
@@ -16,7 +16,7 @@ const Input=(codeText="")=>ZikoHtml("code",codeText).style({
     background:"#f6f8fa",
     color:"#0062C3"
 }).setAttr("contenteditable",true).setAttr("spellcheck",false);
-const Output=()=>ZikoHtml("output").style({
+const Output=()=>html("output").style({
     width:"100%",
     height:"auto",
     padding:"5px 0",
@@ -43,7 +43,7 @@ const Right=(ctx)=>Flex(
     text('▶️').style(BTN_STYLE).onClick(e=>{
         if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
         ctx.execute();
-        globalThis.__Target__=e.target.parent.parent[1][1];
+        globalThis.__ZikoConfig__.default.target=e.target.parent.parent[1][1];
     }),
     text('📋').style(BTN_STYLE).onClick(()=>{
         navigator.clipboard.writeText(ctx.codeText)

package/{src → core}/UI/Inputs/Primitives/btn.js

@@ -1,10 +1,9 @@
 import ZikoUIElement from "../../ZikoUIElement.js";
 class ZikoUIBtn extends ZikoUIElement {
     constructor(value = "button") {
-      super();
+      super("button","btn");
       this.element = document.createElement("button");
       this.setValue(value);
-      this.render();
       this.st.cursor("pointer");
     }
     setValue(value) {

package/{src → core}/UI/Inputs/Primitives/inputs.js

@@ -13,7 +13,6 @@ class ZikoUIInput extends ZikoUIElement {
     Object.assign(this.events,{input:null})
     this.setValue(value);
     if(datalist)this.linkDatalist(datalist)
-    this.render();
   }
   onInput(...callbacks){
     if(!this.events.input)this.events.input = Input(this);
@@ -124,7 +123,6 @@ class ZikoUIInputNumber extends ZikoUIInput {
     super();
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
-    this.render();
   }
   get value() {
     return +this.element.value;
@@ -147,7 +145,6 @@ class ZikoUIInputSlider extends ZikoUIInputNumber {
     super();
     this._setType("range");
     this.setMin(min).setMax(max).setValue(val).setStep(step);
-    this.render();
   }
 }
 class ZikoUIInputColor extends ZikoUIInput {
@@ -155,7 +152,6 @@ class ZikoUIInputColor extends ZikoUIInput {
     super();
     this._setType("color");
     this.background(this.value);
-    this.render();
     this.onInput(() => this.background(this.value));
   }
 }
@@ -163,35 +159,30 @@ class ZikoUIInputPassword extends ZikoUIInput {
   constructor() {
     super();
     this._setType("password");
-    this.render();
   }
 }
 class ZikoUIInputEmail extends ZikoUIInput {
   constructor() {
     super();
     this._setType("email");
-    this.render();
   }
 }
 class ZikoUIInputTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("time");
-    this.render();
   }
 }
 class ZikoUIInputDate extends ZikoUIInput {
   constructor() {
     super();
     this._setType("date");
-    this.render();
   }
 }
 class ZikoUIInputDateTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("datetime-local");
-    this.render();
   }
 }
 class ZikoUIInputCheckbox extends ZikoUIInput {
@@ -271,7 +262,6 @@ class ZikoUIInputDatalist extends ZikoUIElement {
     super();
     this.element = document.createElement("datalist");
     this.addOptions(...options).setId("ziko-datalist-id"+Random.string(10));
-    this.render();
   }
   addOptions(...options) {
     options.map((n) => this.append(new ZikoUIInputOption(n)));

package/{src → core}/UI/Inputs/Primitives/select.js

@@ -4,7 +4,6 @@ class ZikoUISelect extends ZikoUIElement {
     constructor(){
       super();
       this.element=document.createElement("select");
-      this.render()
     }
     addOptions(...options) {
       options.map(n => this.append(new ZikoUIInputOption(n)));

package/{src → core}/UI/Inputs/Primitives/textarea.js

@@ -5,7 +5,6 @@ class ZikoUITextArea extends ZikoUIElement {
       super();
       this.element = document.createElement("textarea");
       //Object.assign(this,inputComposer.call(this));
-      this.render();
     }
     get value(){
       return this.element.textContent;

package/{src → core}/UI/List/index.js

@@ -5,7 +5,6 @@ class ZikoUILI extends ZikoUIElement{
     super();
     this.element=document.createElement("li");
     this.append(UI);
-    this.render()
   }
 }
 class ZikoUIList extends ZikoUIElement {
@@ -105,7 +104,6 @@ class ZikoUIOList extends ZikoUIList{
   constructor(...arr){
     super("ol","ol");
     this.append(...arr);
-    this.render();
   }
   type(tp = 1) {
     this.element.setAttribute("type", tp);
@@ -120,7 +118,6 @@ class ZikoUIUList extends ZikoUIList{
   constructor(...arr){
     super("ul","ul");
     this.append(...arr);
-    this.render();
   }
 }
 const li=UI=>new ZikoUILI(UI)

package/{src → core}/UI/Media/Audio/index.js

@@ -3,7 +3,6 @@ class ZikoUIAudio extends ZikoUIElement {
     constructor(src) {
       super("audio","audio");
       this.element.setAttribute("src", src);
-      this.render();
       this.useControls();
     }
     get t(){

package/{src → core}/UI/Media/Image/figure.js

@@ -7,7 +7,6 @@ class ZikoUIFigure extends ZikoUIElement{
       this.caption.append(caption.element)
       this.element.append(this.img);
       this.element.append(this.caption);
-      this.render();
     }
 }
 const figure =(image,caption) =>new ZikoUIFigure(image,caption);

package/{src → core}/UI/Media/Image/image.js

@@ -8,7 +8,6 @@ class ZikoUIImage extends ZikoUIElement {
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
       this.style({ border: "1px solid black", width: w, height: h });
-      this.render();
     }
      updateSrc(url){
       this.value=url;

package/{src → core}/UI/Media/Video/index.js

@@ -7,7 +7,6 @@ class ZikoUIVideo extends ZikoUIElement {
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
       this.style({ width: w, height: h });
-      this.render();
     }
     get t(){
       return this.element.currentTime;  

package/{src → core}/UI/Misc/index.js

@@ -1,29 +1,25 @@
 import ZikoUIElement from "../ZikoUIElement.js";
 class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
-    super(element,"ZikoHtml");
-      this.render();
+    super(element,"html");
   }
 }
 class ZikoUIBr extends ZikoUIElement {
     constructor() {
       super("br","br");
-        this.render();
-        delete this.append
+          delete this.append
     }
   }
   class ZikoUIHr extends ZikoUIElement {
     constructor() {
       super("hr","hr");
-        this.render();
-        delete this.append
+          delete this.append
     }
   }
   class ZikoUILink extends ZikoUIElement{
     constructor(href){
       super("a","link");
       this.setHref(href);
-      this.render();
     }
     setHref(href){
       this.element.href=href;
@@ -34,9 +30,9 @@ class ZikoUIBr extends ZikoUIElement {
   const brs = (n=1)=> new Array(n).fill(new ZikoUIBr());
   const hrs = (n=1)=> new Array(n).fill(new ZikoUIHr());
   const link=(href,...UIElement)=>new ZikoUILink(href).append(...UIElement);
-  const ZikoHtml=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
+  const html=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
 export{
-  ZikoHtml,
+  html,
   br,
   hr,
   brs,

package/{src → core}/UI/Semantic/index.js

@@ -2,45 +2,38 @@ import ZikoUIElement from "../ZikoUIElement.js";
 class ZikoUIMain extends ZikoUIElement{
     constructor(){
       super("main","Main");
-      this.render();
     }
   }
   class ZikoUIHeader extends ZikoUIElement{
     constructor(){
       super("header","Header");
-      this.render();
     }
   }
   class ZikoUINav extends ZikoUIElement{
     constructor(){
       super("nav","Nav");
-      this.render();
     }
   }
   class ZikoUISection extends ZikoUIElement{
     constructor(){
       super("section","Section");
       this.style({position:"relative"})
-      this.render();
     }
   }
   class ZikoUIArticle extends ZikoUIElement{
     constructor(){
       super("article","Article");
-      this.render();
     }
   }
   class ZikoUIAside extends ZikoUIElement{
     constructor(){
       super("aside","Aside");
-      this.render();
     }
   }
   class ZikoUIFooter extends ZikoUIElement{
     constructor(){
       super("footer","Footer");
       this.element=document.createElement("footer");
-      this.render();
     }
   }
 const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);

package/{src → core}/UI/Table/table.js

@@ -13,7 +13,6 @@ class ZikoUITable extends ZikoUIElement {
         }
         if(body)this.fromMatrix(body);
         if(caption)this.setCaption(caption)
-        this.render();
     }
     get caption(){
         return this.structure.caption;

package/{src → core}/UI/Text/heading.js

@@ -4,7 +4,6 @@ class ZikoUIHeading extends ZikoUIElement {
       super(`h${type}`,`h${type}`);
       this.element = document.createElement("h" + type);
       this.element.textContent = value;
-      this.render();
     }
     get value() {
       return this.element.innerText;

package/{src → core}/UI/Text/p.js

@@ -6,7 +6,6 @@ class ZikoUIParagraphe extends ZikoUIElement {
       super("p","p");
       this.addValue(...value);
       this.style({margin:0,padding:0});
-      this.render();
     }
     addValue(...value) {
       for (let i = 0; i < value.length; i++) {

package/{src → core}/UI/Text/text.js

@@ -8,7 +8,6 @@ class ZikoUIText extends ZikoUIElement {
       this.text = "";
       this.addValue(...value);
       this.st.display("inline-block");
-      this.render();
     }
     clear() {
       this.element.textContent = "";

package/{src → core}/UI/ZikoUIElement.js

@@ -19,7 +19,8 @@ import { text } from "./Text";
 import { Random } from "../Math/Random";
 class ZikoUIElement {
   constructor(element,name="") {
-    this.target = globalThis.__Target__||globalThis.document.body;
+    //this.target = globalThis.__Target__||globalThis.document.body;
+    this.target = globalThis.__ZikoConfig__.default.target||globalThis.document.body
     if(typeof element === "string") element = globalThis.document.createElement(element);
     this.element = element;
     this.uuid=this.constructor.name+"-"+Random.string(10);
@@ -61,6 +62,7 @@ class ZikoUIElement {
      });
     this.size("auto", "auto");
     globalThis.__UI__[this.cache.name]?.push(this);
+    this.render(globalThis.__ZikoConfig__.default.render);
   }
   get st(){
     return this.cache.style;

package/{src → core}/UI/index.js

@@ -14,7 +14,7 @@ import {
     brs,
     hrs,
     link,
-    ZikoHtml
+    html
 } from "./Misc";
 import {
     ol,
@@ -66,7 +66,7 @@ import{
     } from "./Semantic";
 import { Table } from "./Table";
 const UI={
-    ZikoHtml,
+    html,
     text,
     p,
     h1,
@@ -149,6 +149,6 @@ export * from "./Semantic";
 export * from "./Misc";
 export * from "./CustomElement";
 export {
-    ZikoHtml
+    html
 }
 export default UI;

package/{src → core}/index.js

@@ -9,6 +9,7 @@ import {SPA} from "./App/Router";
 import { 
     __UI__,
     __Target__,
+    __ZikoConfig__
  } from "./App/Globals";
 import ZikoUIElement from "./UI/ZikoUIElement.js";
 import { App } from "./App";
@@ -25,7 +26,7 @@ const Ziko={
 }
 globalThis.__Ziko__=Ziko;
 globalThis.__UI__=__UI__;
-globalThis.__Target__=__Target__;
+globalThis.__ZikoConfig__=__ZikoConfig__;
 function ExtractAll(){
     UI.ExtractAll();
     Math.ExtractAll();
@@ -61,6 +62,7 @@ export {
     Data,
     ZikoUIElement,
     SPA,
+    __ZikoConfig__,
     ExtractAll,
     RemoveAll
 };