nativecorejs 0.1.0

package/dist/utils/dom.js

@@ -0,0 +1,70 @@
+export const dom = {
+    query: (selector) => document.querySelector(selector),
+    queryAll: (selector) => document.querySelectorAll(selector),
+    $: (selector) => document.querySelector(selector),
+    $$: (selector) => document.querySelectorAll(selector),
+    within: (parent, selector) => {
+        const element = typeof parent === 'string' ? document.querySelector(parent) : parent;
+        return element ? element.querySelector(selector) : null;
+    },
+    withinAll: (parent, selector) => {
+        const element = typeof parent === 'string' ? document.querySelector(parent) : parent;
+        return element ? element.querySelectorAll(selector) : [];
+    },
+    create: (tag, attrs, ...children) => {
+        const element = document.createElement(tag);
+        if (attrs) {
+            for (const [key, value] of Object.entries(attrs)) {
+                element.setAttribute(key, value);
+            }
+        }
+        for (const child of children) {
+            if (typeof child === 'string') {
+                element.appendChild(document.createTextNode(child));
+            }
+            else {
+                element.appendChild(child);
+            }
+        }
+        return element;
+    },
+    addClass: (element, ...classes) => {
+        const target = typeof element === 'string' ? document.querySelector(element) : element;
+        if (target)
+            target.classList.add(...classes);
+    },
+    removeClass: (element, ...classes) => {
+        const target = typeof element === 'string' ? document.querySelector(element) : element;
+        if (target)
+            target.classList.remove(...classes);
+    },
+    toggleClass: (element, className, force) => {
+        const target = typeof element === 'string' ? document.querySelector(element) : element;
+        if (target)
+            target.classList.toggle(className, force);
+    },
+    show: (element) => {
+        const target = typeof element === 'string' ? document.querySelector(element) : element;
+        if (target)
+            target.style.removeProperty('display');
+    },
+    hide: (element) => {
+        const target = typeof element === 'string' ? document.querySelector(element) : element;
+        if (target)
+            target.style.display = 'none';
+    },
+    listen: (selectorOrElement, eventName, handler, options) => {
+        const element = typeof selectorOrElement === 'string'
+            ? document.querySelector(selectorOrElement)
+            : selectorOrElement;
+        if (element) {
+            element.addEventListener(eventName, handler, options);
+            return () => element.removeEventListener(eventName, handler, options);
+        }
+        return () => { };
+    }
+};
+if (typeof window !== 'undefined') {
+    window.dom = dom;
+}
+export default dom;

package/dist/utils/events.d.ts

@@ -0,0 +1,20 @@
+export declare function on<T = Event>(selector: string, eventName: string, handler: (event: T) => void): () => void;
+export declare function bindEvents(bindings: Record<string, Record<string, (event: any) => void>>): () => void;
+export declare const onClick: (selector: string, handler: (event: Event) => void) => () => void;
+export declare const onChange: (selector: string, handler: (event: Event) => void) => () => void;
+export declare const onInput: (selector: string, handler: (event: Event) => void) => () => void;
+export declare const onSubmit: (selector: string, handler: (event: Event) => void) => () => void;
+export declare function delegate<T = Event>(containerSelector: string, eventName: string, targetSelector: string, handler: (event: T, target: Element) => void): () => void;
+export declare function trackEvents(): {
+    on<T = Event>(selector: string, eventName: string, handler: (event: T) => void): void;
+    onClick(selector: string, handler: (event: Event) => void): void;
+    onChange(selector: string, handler: (event: Event) => void): void;
+    onInput(selector: string, handler: (event: Event) => void): void;
+    onSubmit(selector: string, handler: (event: Event) => void): void;
+    delegate<T = Event>(containerSelector: string, eventName: string, targetSelector: string, handler: (event: T, target: Element) => void): void;
+    cleanup(): void;
+};
+export declare function trackSubscriptions(): {
+    watch(unsubscribe: () => void): void;
+    cleanup(): void;
+};

package/dist/utils/events.js

@@ -0,0 +1,80 @@
+export function on(selector, eventName, handler) {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach(el => {
+        el.addEventListener(eventName, handler);
+    });
+    return () => {
+        elements.forEach(el => {
+            el.removeEventListener(eventName, handler);
+        });
+    };
+}
+export function bindEvents(bindings) {
+    const cleanups = [];
+    for (const [eventName, handlers] of Object.entries(bindings)) {
+        for (const [selector, handler] of Object.entries(handlers)) {
+            cleanups.push(on(selector, eventName, handler));
+        }
+    }
+    return () => {
+        cleanups.forEach(cleanup => cleanup());
+    };
+}
+export const onClick = (selector, handler) => on(selector, 'click', handler);
+export const onChange = (selector, handler) => on(selector, 'change', handler);
+export const onInput = (selector, handler) => on(selector, 'input', handler);
+export const onSubmit = (selector, handler) => on(selector, 'submit', handler);
+export function delegate(containerSelector, eventName, targetSelector, handler) {
+    const container = document.querySelector(containerSelector);
+    if (!container)
+        return () => { };
+    const delegateHandler = (event) => {
+        const target = event.target.closest(targetSelector);
+        if (target && container.contains(target)) {
+            handler(event, target);
+        }
+    };
+    container.addEventListener(eventName, delegateHandler);
+    return () => {
+        container.removeEventListener(eventName, delegateHandler);
+    };
+}
+export function trackEvents() {
+    const cleanupFunctions = [];
+    return {
+        on(selector, eventName, handler) {
+            cleanupFunctions.push(on(selector, eventName, handler));
+        },
+        onClick(selector, handler) {
+            cleanupFunctions.push(onClick(selector, handler));
+        },
+        onChange(selector, handler) {
+            cleanupFunctions.push(onChange(selector, handler));
+        },
+        onInput(selector, handler) {
+            cleanupFunctions.push(onInput(selector, handler));
+        },
+        onSubmit(selector, handler) {
+            cleanupFunctions.push(onSubmit(selector, handler));
+        },
+        delegate(containerSelector, eventName, targetSelector, handler) {
+            cleanupFunctions.push(delegate(containerSelector, eventName, targetSelector, handler));
+        },
+        cleanup() {
+            cleanupFunctions.forEach(cleanup => cleanup());
+            cleanupFunctions.length = 0;
+        }
+    };
+}
+export function trackSubscriptions() {
+    const unsubscribers = [];
+    return {
+        watch(unsubscribe) {
+            unsubscribers.push(unsubscribe);
+        },
+        cleanup() {
+            unsubscribers.forEach(fn => fn());
+            unsubscribers.length = 0;
+        }
+    };
+}

package/dist/utils/templates.d.ts

@@ -0,0 +1,2 @@
+export declare const html: (strings: TemplateStringsArray, ...values: any[]) => string;
+export declare const css: (strings: TemplateStringsArray, ...values: any[]) => string;

package/dist/utils/templates.js

@@ -0,0 +1,2 @@
+export const html = (strings, ...values) => String.raw({ raw: strings }, ...values);
+export const css = (strings, ...values) => String.raw({ raw: strings }, ...values);

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "nativecorejs",
+  "version": "0.1.0",
+  "description": "NativeCore framework runtime primitives and utilities",
+  "keywords": [
+    "nativecore",
+    "nativecorejs",
+    "web-components",
+    "signals",
+    "spa"
+  ],
+  "homepage": "https://github.com/davidtv2008/nativecorejs#readme",
+  "bugs": {
+    "url": "https://github.com/davidtv2008/nativecorejs/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davidtv2008/nativecorejs.git"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./styles/base.css": "./src/styles/base.css"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^5.6.3"
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,40 @@
+/* NativeCore base framework styles */
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+    box-sizing: border-box;
+}
+
+*::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    transition: background 0.2s ease;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+    * {
+        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+    }
+
+    *::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    *::-webkit-scrollbar-thumb:hover {
+        background: rgba(255, 255, 255, 0.3);
+    }
+}