ziko 1.9.0 → 2.0.0-alpha.0

package/package.json

@@ -1,97 +1,70 @@
-{
-  "name": "ziko",
-  "version": "1.9.0",
-  "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
-  "keywords": [
-    "front-end",
-    "framework",
-    "zikojs",
-    "ziko",
-    "math",
-    "user-interface",
-    "time",
-    "dom",
-    "single page application",
-    "file based routing"
-  ],
-  "type": "module",
-  "main": "dist/ziko.mjs",
-  "module": "dist/ziko.mjs",
-  "unpkg": "dist/ziko.min.js",
-  "files": [
-    "src",
-    "dist",
-    "LICENCE"
-  ],
-  "exports": {
-    "./src/*": {
-      "import": "./src/*"
-    },
-    "./*": {
-      "import": "./src/*/index.js"
-    },
-    ".": {
-      "import": "./dist/ziko.mjs",
-      "require": "./dist/ziko.cjs"
-    },
-    "./helpers": {
-      "import": "./src/__helpers__.js"
-    },
-    "./events": {
-      "import": "./src/events/index.js"
-    },
-    "./watch": {
-      "import": "./src/watch/index.js"
-    },
-    "./use": {
-      "import": "./src/use/index.js"
-    },
-    "./hooks": {
-      "import": "./src/hooks/index.js"
-    },
-    "./ui": {
-      "import": "./src/ui/index.js",
-      "type": "./src/ui/index.d.ts"
-    },
-    "./tags": {
-      "import": "./src/tags/index.js"
-    },
-    "./src": "./src/index.js",
-    "./html": {},
-    "./app": {},
-    "./components": {}
-  },
-  "sideEffects": true,
-  "bin": {
-    "create-ziko-app": "starter/bin/index.js"
-  },
-  "scripts": {
-    "test": "npx vitest",
-    "test-link": "node _link/index.js",
-    "lint": "eslint src/*/*/*",
-    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
-    "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
-    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/zakarialaoui10/ziko.js.git"
-  },
-  "author": "zakaria elalaoui",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/zakarialaoui10/ziko.js/issues"
-  },
-  "homepage": "https://github.com/zakarialaoui10/ziko.js#readme",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@vitest/coverage-v8": "^4.0.18",
-    "cross-env": "^10.1.0",
-    "eslint": "^10.0.0",
-    "jsdom": "^26.0.0",
-    "rollup": "^4.57.1",
-    "vitest": "^4.0.18"
-  }
-}
+{
+  "name": "ziko",
+  "version": "2.0.0-alpha.0",
+  "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
+  "keywords": [
+    "front-end",
+    "framework",
+    "zikojs",
+    "ziko",
+    "math",
+    "user-interface",
+    "time",
+    "dom",
+    "single page application",
+    "file based routing"
+  ],
+  "type": "module",
+  "main": "dist/ziko.mjs",
+  "module": "dist/ziko.mjs",
+  "unpkg": "dist/ziko.min.js",
+  "files": [
+    "src",
+    "dist",
+    "LICENCE"
+  ],
+  "exports": {
+    "./*": {
+      "import": "./src/*/index.js"
+    },
+    ".": {
+      "import": "./dist/ziko.mjs",
+      "require": "./dist/ziko.cjs"
+    },
+    "./helpers": {
+      "import": "./src/__helpers__.js"
+    },
+    "./events": {
+      "import": "./src/events/index.js"
+    },
+    "./hooks": {
+      "import": "./src/hooks/index.js"
+    }
+  },
+  "sideEffects": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zikojs/ziko.git",
+    "directory": "packages/ziko"
+  },
+  "author": "zakaria elalaoui",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zikojs/ziko/issues"
+  },
+  "homepage": "https://github.com/zikojs/ziko#readme",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.57.1"
+  },
+  "scripts": {
+    "test": "npx vitest",
+    "test-link": "node _link/index.js",
+    "lint": "eslint src/*/*/*",
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
+    "watch": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
+  }
+}

package/src/__ziko__/__config__.js

@@ -2,9 +2,9 @@ export const __Config__ = {
     default:{
         target:null,
         render:true,
-        math:{
-            mode:"deg"
-        }
+        // math:{
+        //     mode:"deg"
+        // }
     },
     setDefault:function(pairs){
         const keys=Object.keys(pairs);

package/src/__ziko__/__state__.js

@@ -1,4 +1,3 @@
-import { useSessionStorage } from '../hooks/use-storage.js'
 export var __State__ = {
     store : new Map(),
     index : 0,

package/src/{dom/components → components}/Fragment/index.js

@@ -1,4 +1,4 @@
-import { UIElement } from "../../constructors/UIElement.js";
+import { UIElement } from "../../dom/UIElement/index.js";
 
 export class UIFragment extends UIElement{
     constructor(...items){

package/src/{dom/components/wrappers → components}/HTMLWrapper/index.js

@@ -1,6 +1,6 @@
-import { UIElement } from "../../../constructors/UIElement.js";
+import { UIElement } from "../../dom/UIElement/index.js";
 
-class UIHTMLWrapper extends UIElement {
+export class UIHTMLWrapper extends UIElement {
     constructor(content){
         super({element : 'div', name : 'html_wrappper'})
         this.element.append(html2dom(content))
@@ -19,8 +19,4 @@ function html2dom(htmlString) {
     }
 }
 
-const HTMLWrapper = (content) => new UIHTMLWrapper(content)
-export{
-    UIHTMLWrapper,
-    HTMLWrapper
-}
+export const HTMLWrapper = (content) => new UIHTMLWrapper(content)

package/src/{dom/components/wrappers → components}/SVGWrapper/index.js

@@ -1,6 +1,5 @@
-import { UIElement } from "../../../constructors/UIElement.js";
-
-class UISVGWrapper extends UIElement {
+import { UIElement } from "../../dom/UIElement/index.js";
+export class UISVGWrapper extends UIElement {
     constructor(content){
         super({element : 'div', name : 'html_wrappper'})
         this.element.append(svg2dom(content));
@@ -27,20 +26,9 @@ function svg2dom(svgString) {
       element.setAttribute(name, value)
     }
     element.append(...children)
-
-    globalThis.svg = svg
-    globalThis.children = children 
-    globalThis.attributes = attributes
-    globalThis.element = element
     return element;
   }
   throw new Error("DOMParser is not available in this environment");
 }
 
-
-
-const SVGWrapper = (content) => new UISVGWrapper(content)
-export{
-    UISVGWrapper,
-    SVGWrapper
-}
+export const SVGWrapper = (content) => new UISVGWrapper(content)

package/src/{dom/components → components}/Suspense/index.js

@@ -1,4 +1,4 @@
-import {UIElement} from "../../mini/UIElement.js";
+import { UIElement } from "../../dom/UIElement/index.js";
 export class UISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"})

package/src/{dom/components → components}/Swap/index.js

@@ -1,5 +1,5 @@
-import { UIElement } from "../../constructors/UIElement.js";
-import { call_with_optional_props } from '../../utils/index.js';
+import { UIElement } from "../../dom/UIElement/index.js";
+import { call_with_optional_props } from '../../dom/internal-utils/call_with_optional_props.js';
 
 export class UISwap extends UIElement {
     #DISPLAYS_MAP = new WeakMap()

package/src/{dom/components → components}/Switch/index.js

@@ -1,5 +1,4 @@
-import { UIElement } from "../../constructors/UIElement.js";
-
+import { UIElement } from "../../dom/UIElement/index.js";
 class UISwitch extends UIElement{
     constructor(key, cases){
         super()

package/src/components/View/index.js

@@ -0,0 +1,11 @@
+import { UIElement } from "../../dom/UIElement/index.js";
+import { call_with_optional_props } from '../../dom/internal-utils/call_with_optional_props.js';
+
+export class UIView extends UIElement{
+    constructor(...items){
+        super({element : 'div', name : 'view'})
+        this.append(...items)
+    }
+}
+
+export const View = (...items) => call_with_optional_props(UIElement);

package/src/{dom/components → components}/index.js

@@ -5,6 +5,5 @@ export * from './Swap/index.js';
 export * from './Fragment/index.js';
 export * from './For/index.js';
 export * from './Switch/index.js';
-
-export * from './wrappers/index.js'
-export * from './graphics/index.js'
+export * from './HTMLWrapper/index.js'
+export * from './SVGWrapper/index.js'

package/src/dom/{constructors/UIElement.js → UIElement/index.js}

@@ -1,12 +1,12 @@
-import { UIElementCore } from "./UIElementCore.js";
-import { register_to_class } from "../../helpers/register/register-to-class.js";
+import { UIElement as UIElementCore } from "../../mini-dom/UIElement/index.js";
+import { register_to_class } from "../../internal-utils/register/register-to-class.js";
 import { 
   LifecycleMethods,
   AttrsMethods,
   DomMethods,
   IndexingMethods,
   StyleMethods,
-} from "./mixins/index.js";
+} from "../../mini-dom/mixins/index.js";
 
 import {
   EventController,
@@ -102,9 +102,9 @@ class UIElement extends UIElementCore{
   get text(){
     return this.element.textContent;
   }
-  get isBody(){
-    return this.element === globalThis?.document.body;
-  }
+  // get isBody(){
+  //   return this.element === globalThis?.document.body;
+  // }
   get parent(){
     return this.cache.parent;
   }

package/src/dom/index.js

@@ -1,7 +1,3 @@
-export * from './constructors/UIElement.js'
-export * from './constructors/UINode.js'
-export * from './utils/index.js'
+export * from './UIElement/index.js'
 export * from './tags/index.js';
-export * from './text/index.js';
-export * from './web-component/index.js'
-export * from './components/index.js'
+// export * from './text/index.js';

package/src/dom/{utils → internal-utils}/call_with_optional_props.js

@@ -1,4 +1,4 @@
-import { is_primitive } from "./checkers.js";
+import { is_primitive } from "../../internal-utils/checkers/index.js";
 export const call_with_optional_props = (Component) => {
     return (...args) => {
         const first = args[0];

package/src/dom/{utils/is_ui_item.js → internal-utils/checkers.js}

@@ -1,5 +1,6 @@
 import { isStateGetter } from '../../hooks/use-state.js'
 import { UIElement } from '../constructors/UIElement.js'
+
 export const is_ui_item = item => {
     return (
         ['string', 'number'].includes(item)

package/src/dom/internal-utils/is_ui_item.js

@@ -0,0 +1,10 @@
+import { isStateGetter } from '../../hooks/use-state.js'
+import { UIElement } from '../UIElement/index.js'
+export const is_ui_item = item => {
+    return (
+        ['string', 'number'].includes(item)
+        || isStateGetter(item)
+        || item instanceof HTMLElement
+        || item instanceof UIElement
+    )
+}

package/src/dom/tags/index.js

@@ -1,8 +1,8 @@
-import {UIElement} from "../constructors/UIElement.js";
+import {UIElement} from "../UIElement/index.js";
 import { HTMLTags, SVGTags, MathMLTags } from "./tags-list.js";
 import { isStateGetter } from "../../hooks/use-state.js";
-import { call_with_optional_props } from "../utils/call_with_optional_props.js";
-import { is_ui_item } from "../utils/is_ui_item.js";
+import { call_with_optional_props } from "../internal-utils/call_with_optional_props.js";
+import { is_ui_item } from "../internal-utils/is_ui_item.js";
 
 export const tags = new Proxy({}, {
   get(target, prop) {

package/src/events/custom-events-registry/view.js

@@ -1,4 +1,4 @@
-import { throttle } from "../../time/decorators/index.js";
+import { throttle } from "../../time/index.js";
 class ViewEvent extends CustomEvent {
     constructor(type, detail, { bubbles = true, cancelable = true } = {}) {
         super(type, { detail, bubbles, cancelable });

package/src/hooks/index.d.ts

@@ -1,13 +1,5 @@
-export type * from './use-ipc'
-export type * from './use-storage.d.ts'
 export type * from './use-state.d.ts'
 export type * from './use-derived.d.ts'
 export type * from './use-effect.d.ts'
 export type * from './use-reactive.d.ts'
-export type * from './use-thread.d.ts'
 export type * from './use-event-emitter.d.ts'
-export type * from './use-media-query.d.ts'
-export type * from './use-title.d.ts'
-export type * from './use-favicon.d.ts'
-export type * from './use-root.d.ts'
-export type * from './use-query-params.d.ts'

package/src/hooks/index.js

@@ -1,16 +1,5 @@
-// STATES
 export * from './use-state.js';
 export * from './use-derived.js';
 export * from './use-reactive.js';
 export * from './use-effect.js'
-
-//
-export * from './use-ipc.js'
-export * from './use-storage.js'
-export * from './use-thread.js'
-export * from './use-event-emitter.js'
-export * from './use-media-query.js'
-export * from './use-title.js'
-export * from './use-root.js'
-
-export * from './use-query-params.js'
+export * from './use-event-emitter.js'

package/src/hooks/use-derived.js

@@ -1,30 +1,34 @@
-import { STATE_GETTER } from '../symbols/index.js';
+import { STATE_GETTER } from '../internal-utils/symbols/index.js';
 
 export function useDerived(deriveFn, sources) {
-    let value = deriveFn(...sources.map(s => s().value));
+    const getValue = () => deriveFn(...sources.map(source => source().value));
+
+    let value = getValue();
     const subscribers = new Set();
 
-    // const unsubscribers = sources.map(source => {
-    //     const srcValue = source();
+    const notify = () => {
+        const newValue = getValue();
+
+        if (Object.is(newValue, value)) return;
 
-    //     return srcValue._subscribe(() => {
-    //         const newVal = deriveFn(...sources.map(s => s().value));
+        value = newValue;
+        subscribers.forEach(fn => fn(value));
+    };
 
-    //         if (!Object.is(newVal, value)) {
-    //             value = newVal;
-    //             subscribers.forEach(fn => fn(value));
-    //         }
-    //     });
-    // });
+    const unsubscribers = sources.map(source => {
+        const state = source();
+        return state._subscribe(notify);
+    });
 
     const getter = () => ({
         value,
-        _subscribe: (fn) => {
+        _subscribe(fn) {
             subscribers.add(fn);
             return () => subscribers.delete(fn);
         },
     });
 
     getter[STATE_GETTER] = true;
-    return getter
+
+    return getter;
 }

package/src/hooks/use-effect.js

@@ -1,40 +1,32 @@
 import { isStateGetter } from "./use-state.js";
 
-export const useEffect = (callback, deps = []) =>{
+export const useEffect = (callback, deps = []) => {
     const states = deps.filter(isStateGetter);
-
     let cleanup;
 
+    const getValues = () =>
+        states.map(state => state().value);
+
     const execute = () => {
-        // Cleanup previous effect
         if (typeof cleanup === "function") {
             cleanup();
         }
 
-        // Read current state values
-        const values = states.map(state => state().value);
-
-        // Execute effect
-        cleanup = callback(...values);
+        cleanup = callback(getValues());
     };
 
-    // Subscribe to states
     const unsubscribers = states.map(state =>
         state()._subscribe(execute)
     );
 
-    // Initial execution
     execute();
 
-    // Return effect cleanup
     return () => {
-        unsubscribers.forEach(unsubscribe => {
-            unsubscribe();
-        });
+        unsubscribers.forEach(unsubscribe => unsubscribe());
 
         if (typeof cleanup === "function") {
             cleanup();
             cleanup = undefined;
         }
     };
-}
+};

package/src/hooks/use-reactive.d.ts

@@ -1,4 +1,4 @@
-import { mapfun, MapfunResult } from "../math/utils/mapfun.d.ts";
+import { mapfun, MapfunResult } from "../math/mapfun/index.d.ts";
 import { useState } from "./use-state.d.ts";
 
 export function useReactive<

package/src/hooks/use-reactive.js

@@ -1,4 +1,4 @@
-import { mapfun } from '../math/utils/mapfun.js'
+import { mapfun } from '../math/mapfun/index.js'
 import { useState } from './use-state.js'
 
 const useReactive = (nested_value) => mapfun(

package/src/hooks/use-state.js

@@ -1,10 +1,4 @@
-// import { __init__global__ } from "../__ziko__/index.js";
-
-// if (!globalThis.__Ziko__) __init__global__();
-
-// export const STATE_GETTER = Symbol.for("ziko.stateGetter");
-
-import {STATE_GETTER} from '../symbols/index.js'
+import { STATE_GETTER } from '../internal-utils/symbols/index.js';
 
 export function useState(initialValue) {
     const state = {

package/src/index.js

@@ -1,18 +1,14 @@
 export * from "./math/index.js";
 export * from "./dom/index.js";
 export * from "./time/index.js";
-export * from "./data/index.js";
-// export * from "./reactivity/index.js"
-export * from "./app/index.js";
 export * from './hooks/index.js';
-// export * from './use/index.js'
-
 export * from "./events/index.js";
+export * from './string/index.js'
 
 if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-import './math/functions/proxy.js'
+// import './math/functions/proxy.js'
 
 

package/src/{helpers → internal-utils}/checkers/index.js

@@ -1,2 +1,2 @@
 export const is_primitive = value => typeof value !== 'object' && typeof value !== 'function' || value === null;
-export const is_async = fn => fn && fn.constructor && fn.constructor.name === "AsyncFunction";
+export const is_async = fn => fn && fn.constructor && fn.constructor.name === "AsyncFunction";

package/src/math/index.d.ts

@@ -1,4 +1,4 @@
-export type * from './random/index.d.ts';
-export type * from './complex/index.d.ts';
-export type * from './stats/index.d.ts'
-export type * from './functions/index.d.ts'
+export type * from './random/index';
+export type * from './complex/index';
+export type * from './stats/index'
+export type * from './functions/index'

package/src/math/index.js

@@ -1,11 +1,8 @@
-export * from "./const.js"
-export * from "./functions/index.js"
-export * from "./complex/index.js"
-export * from "./matrix/index.js"
-export * from './stats/index.js'
-// export * from "./discret"
-export * from "./random/index.js"
-// export * from "./utils/index.js"  // To Check
-// export * from "./statistics"
-// export default Math;
+export * from "./const/index.js"
+export * from './mapfun/index.js'
+export * from './utils/index.js'
+// export * from './ufunc/index.js'
+// export * from './random/index.js'
+// export * from './complex/index.js'
+
 

package/src/math/{functions/mapfun → mapfun}/index.js

@@ -1,4 +1,4 @@
-import { is_primitive } from "../../../helpers/checkers/index.js";
+import { is_primitive } from "../../internal-utils/checkers/index.js";
 export const mapfun=(fun,...X)=>{
     const Y=X.map(x=>{
         if(is_primitive(x) || x?.__mapfun__) return fun(x)

package/src/math/{functions/utils → utils}/index.d.ts

@@ -1,4 +1,4 @@
-import { Mappable } from "../mapfun/index.d.ts";
+import { Mappable } from "../../mapfun/indexx
 /**
  * Converts degrees to radians.
  *