ziko 0.50.1 → 0.51.0

package/src/ui/constructors/UIElement.js

@@ -1,6 +1,7 @@
 import { UIElementCore } from "./UIElementCore.js";
 import { register_to_class } from "../../__helpers__/register/register-to-class.js";
 import { 
+  LifecycleMethods,
   AttrsMethods,
   DomMethods,
   IndexingMethods,
@@ -22,6 +23,7 @@ class UIElement extends UIElementCore{
     // console.log(this)
     register_to_class(
       this, 
+      LifecycleMethods,
       AttrsMethods, 
       DomMethods, 
       StyleMethods,
@@ -151,32 +153,12 @@ class UIElement extends UIElementCore{
   // get id() {
   //   return this.element.getAttribute("id");
   // }
-  // onSwipe(width_threshold, height_threshold,...callbacks){
-  //   if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
-  //   this.events.swipe.onSwipe(...callbacks);
-  //   return this;
-  // }
   // To Fix
   // onKeysDown({keys=[],callback}={}){
   //   if(!this.events.key)this.events.key = useKeyEvent(this);
   //   this.events.key.handleSuccessifKeys({keys,callback});
   //   return this;
   // }
-  // onSelect(...callbacks){
-  //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-  //   this.events.clipboard.onSelect(...callbacks);
-  //   return this;
-  // }
-  // on(event_name,...callbacks){
-  //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
-  //   this.events.custom.on(event_name,...callbacks);
-  //   return this;
-  // }
-  // emit(event_name,detail={}){
-  //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
-  //   this.events.custom.emit(event_name,detail);
-  //   return this;
-  // }
   // watchAttr(callback){
   //   if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
   //   return this;
@@ -185,16 +167,8 @@ class UIElement extends UIElementCore{
   //   if(!this.observer.children)this.observer.children = watchChildren(this,callback);
   //   return this;
   // }
-  // watchSize(callback){
-  //   if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
-  //   this.observer.resize.start();
-  //   return this;
-  // }
-  // watchIntersection(callback,config){
-  //   if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
-  //   this.observer.intersection.start();
-  //   return this;
-  // }
+  // watchSize(callback)Remplaced By on onViewResize
+  // watchIntersection(callback,config) Remplaced By onViewEnter and onViewExit
 
 }
 export { UIElement }

package/src/ui/{constructors/UIElement-lite.js → mini/UIElement.js}

@@ -1,4 +1,4 @@
-import { UIElementCore } from "./UIElementCore.js";
+import { UIElementCore } from "../constructors/UIElementCore.js";
 class UIElement extends UIElementCore{
     constructor({element, name, type, render}){
         super({element, name, type, render})

package/src/ui/suspense/index.js

@@ -1,4 +1,4 @@
-import {UIElement} from "../constructors/UIElement-lite.js";
+import {UIElement} from "../mini/UIElement.js";
 class ZikoUISuspense extends UIElement{
     constructor(fallback_ui, callback){
         super({element : "div", name : "suspense"})
@@ -12,7 +12,6 @@ class ZikoUISuspense extends UIElement{
                 const ui = await callback()
                 fallback_ui.unmount()
                 this.append(ui)
-                // console.log(content)
             }
             catch(error){
                 console.log({error})

package/types/data/api/index.d.ts

@@ -0,0 +1,15 @@
+// fetchdom.d.ts
+
+/**
+ * Fetches a URL and parses it into a DOM Document asynchronously.
+ * @param url The URL to fetch. Defaults to 'https://github.com/zakarialaoui10'.
+ * @returns A Promise resolving to the root element of the parsed DOM.
+ */
+export function fetchdom(url?: string): Promise<Element>;
+
+/**
+ * Fetches a URL synchronously (using `preload`) and parses it into a DOM Document.
+ * @param url The URL to fetch. Defaults to 'https://github.com/zakarialaoui10'.
+ * @returns The root element of the parsed DOM.
+ */
+export function fetchdomSync(url?: string): Element;

package/types/data/index.d.ts

@@ -0,0 +1 @@
+export type * from './api/index.d.ts'

package/types/data/string/checkers.d.ts

@@ -0,0 +1,51 @@
+// stringUtils.d.ts
+
+/**
+ * Checks if a string is in camelCase.
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string is camelCase, false otherwise.
+ */
+export function is_camelcase(text?: string): boolean;
+
+/**
+ * Checks if a string contains hyphens (hyphen-case).
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string contains hyphens, false otherwise.
+ */
+export function is_hyphencase(text?: string): boolean;
+
+/**
+ * Checks if a string contains underscores (snake_case).
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string contains underscores, false otherwise.
+ */
+export function is_snakeCase(text?: string): boolean;
+
+/**
+ * Checks if a string is in PascalCase.
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string is PascalCase, false otherwise.
+ */
+export function is_pascalcalse(text?: string): boolean;
+
+/**
+ * Checks if a string is a palindrome (case-insensitive).
+ * @param text The string to check.
+ * @returns True if the string is a palindrome, false otherwise.
+ */
+export function is_palindrome(text: string): boolean;
+
+/**
+ * Checks if two words are anagrams of each other.
+ * @param word The first word.
+ * @param words The second word.
+ * @returns True if the words are anagrams, false otherwise.
+ */
+export function is_anagram(word: string, words: string): boolean;
+
+/**
+ * Checks if a string is an isogram (no repeating letters, case-insensitive).
+ * @param text The string to check. Defaults to empty string.
+ * @returns True if the string is an isogram, false otherwise.
+ */
+export function is_isogram(text?: string): boolean;

package/types/data/string/converters.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Converts camelCase to hyphen-case.
+ * @param text The camelCase string. Defaults to ''.
+ * @returns The converted hyphen-case string.
+ */
+export function camel2hyphencase(text?: string): string;
+
+/**
+ * Converts camelCase to snake_case.
+ */
+export function camel2snakecase(text?: string): string;
+
+/**
+ * Converts camelCase to PascalCase.
+ */
+export function camel2pascalcase(text?: string): string;
+
+/**
+ * Converts camelCase to CONSTANT_CASE.
+ */
+export function camel2constantcase(text?: string): string;
+
+/**
+ * Converts PascalCase to snake_case.
+ */
+export function pascal2snakecase(text?: string): string;
+
+/**
+ * Converts PascalCase to hyphen-case.
+ */
+export function pascal2hyphencase(text?: string): string;
+
+/**
+ * Converts PascalCase to camelCase.
+ */
+export function pascal2camelcase(text?: string): string;
+
+/**
+ * Converts PascalCase to CONSTANT_CASE.
+ */
+export function pascal2constantcase(text?: string): string;
+
+/**
+ * Converts snake_case to camelCase.
+ */
+export function snake2camelcase(text?: string): string;
+
+/**
+ * Converts snake_case to hyphen-case.
+ */
+export function snake2hyphencase(text?: string): string;
+
+/**
+ * Converts snake_case to PascalCase.
+ */
+export function snake2pascalcase(text?: string): string;
+
+/**
+ * Converts snake_case to CONSTANT_CASE.
+ */
+export function snake2constantcase(text?: string): string;
+
+/**
+ * Converts hyphen-case to camelCase.
+ */
+export function hyphen2camelcase(text?: string): string;
+
+/**
+ * Converts hyphen-case to snake_case.
+ */
+export function hyphen2snakecase(text?: string): string;
+
+/**
+ * Converts hyphen-case to PascalCase.
+ */
+export function hyphen2pascalcase(text?: string): string;
+
+/**
+ * Converts hyphen-case to CONSTANT_CASE.
+ */
+export function hyphen2constantcase(text?: string): string;
+
+/**
+ * Converts CONSTANT_CASE to camelCase.
+ */
+export function constant2camelcase(text?: string): string;
+
+/**
+ * Converts CONSTANT_CASE to snake_case.
+ */
+export function constant2snakecase(text?: string): string;
+
+/**
+ * Converts CONSTANT_CASE to PascalCase.
+ */
+export function constant2pascalcase(text?: string): string;
+
+/**
+ * Converts CONSTANT_CASE to hyphen-case.
+ */
+export function constant2hyphencase(text?: string): string;

package/types/data/string/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './checkers.d.ts'
+export type * from './converters.d.ts'

package/types/index.d.ts

@@ -1,3 +1,5 @@
 export type * from './math'
 export type * from './time'
-export type * from './hooks'
+export type * from './router'
+export type * from './hooks'
+export type * from './data'

package/types/router/file-based-router/index.d.ts

@@ -0,0 +1,20 @@
+// createSPAFileBasedRouter.d.ts
+
+import { UIElement } from '../../../src/ui/constructors/UIElement.js'
+
+/**
+ * Creates a SPA (Single Page Application) file-based router.
+ * Automatically loads and mounts the component corresponding to the current path.
+ * Supports dynamic routes and parameter extraction.
+ *
+ * @param pages - An object mapping route paths to async module functions that return a component.
+ *                Example: { "/user/[id]": () => import("./pages/user/[id].js") }
+ * @param target - Optional DOM element to mount the component. Defaults to `document.body`.
+ */
+export function createSPAFileBasedRouter(
+  pages: Record<
+    string, 
+    () => Promise<{ default: (param? : Record<string, string>) => UIElement }>
+  >,
+  target?: HTMLElement | UIElement
+): Promise<void>;

package/types/router/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './file-based-router'
+export type * from './utils'

package/types/router/utils/dynamic-routes-parser.d.ts

@@ -0,0 +1,14 @@
+// dynamic_routes_parser.d.ts
+
+/**
+ * Parses a route according to a dynamic mask and returns extracted parameters.
+ *
+ * @param mask - The dynamic route mask (e.g., "/user/[id]+", "/blog/[...slug]").
+ * @param route - The actual route to parse (e.g., "/user/42", "/blog/2025/oct/post").
+ * @returns An object mapping parameter names to their corresponding values.
+ *          Returns an empty object if the route does not match the mask.
+ */
+export declare function dynamic_routes_parser(
+  mask: string,
+  route: string
+): Record<string, string>;

package/types/router/utils/get-root.d.ts

@@ -0,0 +1,11 @@
+// get_root.d.ts
+
+/**
+ * Finds the common root path among an array of paths.
+ * Dynamic segments (e.g., `[id]`) are considered as matching any segment.
+ *
+ * @param paths - An array of route paths (e.g., ["/user/42", "/user/99"]).
+ * @returns The common root path as a string (e.g., "/user/").
+ *          Returns an empty string if no common root exists.
+ */
+export declare function get_root(paths: string[]): string;

package/types/router/utils/index.d.ts

@@ -0,0 +1,5 @@
+export type * from './dynamic-routes-parser.d.ts'
+export type * from './routes-matcher.d.ts'
+export type * from './get-root.d.ts'
+export type * from './routes-grouper.d.ts'
+export type * from './normalize-path.d.ts'

package/types/router/utils/normalize-path.d.ts

@@ -0,0 +1,15 @@
+// normalize_path.d.ts
+
+/**
+ * Normalizes a file path into a route path.
+ *
+ * @param inputPath - The file path to normalize (e.g., "./src/pages/user/[id].ts").
+ * @param root - The root directory to consider as the base (default: "./src/pages").
+ * @param extensions - Array of valid file extensions (default: ["js", "ts"]).
+ * @returns A normalized route path (e.g., "/user/[id]") or an empty string if it cannot be normalized.
+ */
+export declare function normalize_path(
+  inputPath: string,
+  root?: string,
+  extensions?: string[]
+): string;

package/types/router/utils/routes-grouper.d.ts

@@ -0,0 +1,29 @@
+// routes_utils.d.ts
+
+/**
+ * Checks if a route path is dynamic.
+ * Dynamic segments include:
+ *   - Parameters like "[id]"
+ *   - Catch-all segments like "[...slug]"
+ *   - Optional segments like "[id]+"
+ *
+ * @param path - The route path to check.
+ * @returns `true` if the path is dynamic, otherwise `false`.
+ */
+export function is_dynamic(path: string): boolean;
+
+/**
+ * Groups routes into static and dynamic categories.
+ * Throws an error if an optional parameter appears anywhere but the end of the path.
+ *
+ * @param routeMap - An object mapping route paths to their handlers/values.
+ * @returns An object with two properties:
+ *   - `static`: Routes with no dynamic segments.
+ *   - `dynamic`: Routes with dynamic segments.
+ */
+export function routes_grouper<T>(
+  routeMap: Record<string, T>
+): {
+  static: Record<string, T>;
+  dynamic: Record<string, T>;
+};

package/types/router/utils/routes-matcher.d.ts

@@ -0,0 +1 @@
+export declare function routes_matcher(mask: string, route: string): boolean;