onejs-core 0.3.42 → 0.3.44

package/definitions/Assemblies/OneJS.Runtime.d.ts

@@ -230,6 +230,7 @@ declare namespace CS {
             public removeChild ($child: OneJS.Dom.Dom) : void
             public contains ($child: OneJS.Dom.Dom) : boolean
             public insertBefore ($a: OneJS.Dom.Dom, $b: OneJS.Dom.Dom) : void
+            public insertAfter ($a: OneJS.Dom.Dom, $b: OneJS.Dom.Dom) : void
             public setAttribute ($name: string, $val: any) : void
             public removeAttribute ($name: string) : void
             public focus () : void

package/definitions/globals.d.ts

@@ -24,9 +24,9 @@ declare const onejs: {
         eventSource: T,
         eventName: K,
         handler: OneJS.EventGenericType<T[K]>
-    ): () => void
+    ): CS.System.Action
 
-    subscribe(eventName: string, handler: () => void): () => void
+    subscribe(eventName: string, handler: () => void): CS.System.Action
 }
 
 declare function require(name: string): any

package/definitions/jsx.d.ts

@@ -78,6 +78,7 @@ declare global {
 
         interface IntrinsicAttributes {
             id?: string
+            key?: string | number
         }
 
         // interface VNode<P = {}> {

package/dist/dom/dom.d.ts

@@ -27,10 +27,12 @@ export declare class DomWrapper {
     dom: CS.OneJS.Dom.Dom;
     domStyleWrapper: DomStyleWrapper;
     cachedChildNodes: DomWrapper[] | null;
+    boundListeners: WeakMap<WeakKey, any>;
     constructor(dom: CS.OneJS.Dom.Dom);
     appendChild(child: DomWrapper): void;
     removeChild(child: DomWrapper): void;
     insertBefore(a: DomWrapper, b: DomWrapper): void;
+    insertAfter(a: DomWrapper, b: DomWrapper): void;
     contains(child: DomWrapper): boolean;
     clearChildren(): void;
     focus(): void;
@@ -38,4 +40,20 @@ export declare class DomWrapper {
     removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean): void;
     setAttribute(name: string, value: any): void;
     removeAttribute(name: string): void;
+    /**
+     * Returns all elements matching the specified selector.
+     * Supports basic selectors:
+     * - Tag names: 'div'
+     * - IDs: '#myId'
+     * - Classes: '.myClass'
+     * - Combinations: 'div.myClass#myId'
+     */
+    querySelectorAll(selector: string): DomWrapper[];
+    /**
+     * Returns the first element matching the specified selector.
+     * Supports the same basic selectors as querySelectorAll.
+     */
+    querySelector(selector: string): DomWrapper | null;
 }
+export declare function querySelectorAll(root: DomWrapper, selector: string): DomWrapper[];
+export declare function querySelector(root: DomWrapper, selector: string): DomWrapper | null;

package/dist/dom/dom.js

@@ -40,15 +40,20 @@ export class DomWrapper {
     dom;
     domStyleWrapper;
     cachedChildNodes = null;
+    boundListeners = new WeakMap();
     constructor(dom) {
         this.dom = dom;
         this.domStyleWrapper = new DomStyleWrapper(dom.style);
     }
     appendChild(child) {
+        if (!child)
+            return;
         this.dom.appendChild(child.dom);
         this.cachedChildNodes = null;
     }
     removeChild(child) {
+        if (!child)
+            return;
         this.dom.removeChild(child.dom);
         this.cachedChildNodes = null;
     }
@@ -56,7 +61,13 @@ export class DomWrapper {
         this.dom.insertBefore(a?._dom, b?._dom);
         this.cachedChildNodes = null;
     }
+    insertAfter(a, b) {
+        this.dom.insertAfter(a?._dom, b?._dom);
+        this.cachedChildNodes = null;
+    }
     contains(child) {
+        if (!child)
+            return false;
         return this.dom.contains(child._dom);
     }
     clearChildren() {
@@ -67,12 +78,19 @@ export class DomWrapper {
         this.dom.focus();
     }
     addEventListener(type, listener, useCapture) {
-        // @ts-ignore
-        this.dom.addEventListener(type, listener.bind(this), useCapture ? true : false);
+        let boundListener = this.boundListeners.get(listener);
+        if (!boundListener) {
+            boundListener = listener.bind(this);
+            this.boundListeners.set(listener, boundListener);
+        }
+        this.dom.addEventListener(type, boundListener, useCapture ? true : false);
     }
     removeEventListener(type, listener, useCapture) {
-        // @ts-ignore
-        this.dom.removeEventListener(type, listener.bind(this), useCapture ? true : false);
+        const boundListener = this.boundListeners.get(listener);
+        if (boundListener) {
+            this.dom.removeEventListener(type, boundListener, useCapture ? true : false);
+            this.boundListeners.delete(listener); // isn't strictly necessary for WeakMap, but still good practice
+        }
     }
     setAttribute(name, value) {
         this.dom.setAttribute(name, value);
@@ -80,4 +98,123 @@ export class DomWrapper {
     removeAttribute(name) {
         this.dom.removeAttribute(name);
     }
+    /**
+     * Returns all elements matching the specified selector.
+     * Supports basic selectors:
+     * - Tag names: 'div'
+     * - IDs: '#myId'
+     * - Classes: '.myClass'
+     * - Combinations: 'div.myClass#myId'
+     */
+    querySelectorAll(selector) {
+        const selectorInfo = parseSelector(selector);
+        const results = [];
+        function traverse(element) {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                results.push(element);
+            }
+            for (const child of element.childNodes) {
+                traverse(child);
+            }
+        }
+        traverse(this);
+        return results;
+    }
+    /**
+     * Returns the first element matching the specified selector.
+     * Supports the same basic selectors as querySelectorAll.
+     */
+    querySelector(selector) {
+        const selectorInfo = parseSelector(selector);
+        function traverse(element) {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                return element;
+            }
+            for (const child of element.childNodes) {
+                const match = traverse(child);
+                if (match) {
+                    return match;
+                }
+            }
+            return null;
+        }
+        return traverse(this);
+    }
+}
+function parseSelector(selector) {
+    const selectorInfo = {
+        classes: []
+    };
+    // Handle ID
+    const idMatch = selector.match(/#([^.#\s]+)/);
+    if (idMatch) {
+        selectorInfo.id = idMatch[1];
+        selector = selector.replace(idMatch[0], '');
+    }
+    // Handle classes
+    const classMatches = selector.match(/\.([^.#\s]+)/g);
+    if (classMatches) {
+        selectorInfo.classes = classMatches.map(c => c.substring(1));
+        selector = selector.replace(/\.[^.#\s]+/g, '');
+    }
+    // Handle tag name (what's left after removing id and classes)
+    const tagName = selector.trim();
+    if (tagName) {
+        selectorInfo.tag = tagName.toLowerCase();
+    }
+    return selectorInfo;
+}
+function elementMatchesSelector(element, selectorInfo) {
+    // Check tag name
+    if (selectorInfo.tag && element.ve.name.toLowerCase() !== selectorInfo.tag) {
+        return false;
+    }
+    // Check ID
+    if (selectorInfo.id && element.Id !== selectorInfo.id) {
+        return false;
+    }
+    // Check classes
+    if (selectorInfo.classes.length > 0) {
+        const elementClasses = element.classname.split(' ').filter(c => c);
+        for (const className of selectorInfo.classes) {
+            if (!elementClasses.includes(className)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+export function querySelectorAll(root, selector) {
+    const results = [];
+    const selectorInfo = parseSelector(selector);
+    function traverse(element) {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            results.push(element);
+        }
+        // Recursively check children
+        for (const child of element.childNodes) {
+            traverse(child);
+        }
+    }
+    traverse(root);
+    return results;
+}
+export function querySelector(root, selector) {
+    const selectorInfo = parseSelector(selector);
+    function traverse(element) {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            return element;
+        }
+        // Recursively check children
+        for (const child of element.childNodes) {
+            const match = traverse(child);
+            if (match) {
+                return match;
+            }
+        }
+        return null;
+    }
+    return traverse(root);
 }

package/dist/index.js

@@ -37,3 +37,10 @@ if (typeof ___document != "undefined") {
     // @ts-ignore
     globalThis.document = new DocumentWrapper(___document);
 }
+// @ts-ignore
+CS.OneJS.EngineHost.prototype.sub = function (a, b, c) {
+    let unsubscribe = c ? this.subscribe(a, b, c) : this.subscribe(a, b);
+    return () => {
+        unsubscribe.Invoke();
+    };
+};

package/dom/dom.ts

@@ -45,6 +45,7 @@ export class DomWrapper {
     domStyleWrapper: DomStyleWrapper
 
     cachedChildNodes: DomWrapper[] | null = null
+    boundListeners = new WeakMap();
 
     constructor(dom: CS.OneJS.Dom.Dom) {
         this.dom = dom
@@ -52,11 +53,13 @@ export class DomWrapper {
     }
 
     appendChild(child: DomWrapper) {
+        if (!child) return
         this.dom.appendChild(child.dom)
         this.cachedChildNodes = null
     }
 
     removeChild(child: DomWrapper) {
+        if (!child) return
         this.dom.removeChild(child.dom)
         this.cachedChildNodes = null
     }
@@ -66,7 +69,13 @@ export class DomWrapper {
         this.cachedChildNodes = null
     }
 
+    insertAfter(a: DomWrapper, b: DomWrapper) {
+        this.dom.insertAfter(a?._dom, b?._dom)
+        this.cachedChildNodes = null
+    }
+
     contains(child: DomWrapper) {
+        if (!child) return false
         return this.dom.contains(child._dom)
     }
 
@@ -80,13 +89,20 @@ export class DomWrapper {
     }
 
     addEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean) {
-        // @ts-ignore
-        this.dom.addEventListener(type, listener.bind(this), useCapture ? true : false)
+        let boundListener = this.boundListeners.get(listener);
+        if (!boundListener) {
+            boundListener = listener.bind(this);
+            this.boundListeners.set(listener, boundListener);
+        }
+        this.dom.addEventListener(type, boundListener, useCapture ? true : false)
     }
 
     removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean) {
-        // @ts-ignore
-        this.dom.removeEventListener(type, listener.bind(this), useCapture ? true : false)
+        const boundListener = this.boundListeners.get(listener);
+        if (boundListener) {
+            this.dom.removeEventListener(type, boundListener, useCapture ? true : false)
+            this.boundListeners.delete(listener); // isn't strictly necessary for WeakMap, but still good practice
+        }
     }
 
     setAttribute(name: string, value: any) {
@@ -96,4 +112,156 @@ export class DomWrapper {
     removeAttribute(name: string) {
         this.dom.removeAttribute(name)
     }
+
+    /**
+     * Returns all elements matching the specified selector.
+     * Supports basic selectors:
+     * - Tag names: 'div'
+     * - IDs: '#myId'
+     * - Classes: '.myClass'
+     * - Combinations: 'div.myClass#myId'
+     */
+    querySelectorAll(selector: string): DomWrapper[] {
+        const selectorInfo = parseSelector(selector);
+        const results: DomWrapper[] = [];
+
+        function traverse(element: DomWrapper) {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                results.push(element);
+            }
+
+            for (const child of element.childNodes) {
+                traverse(child);
+            }
+        }
+
+        traverse(this);
+        return results;
+    }
+
+    /**
+     * Returns the first element matching the specified selector.
+     * Supports the same basic selectors as querySelectorAll.
+     */
+    querySelector(selector: string): DomWrapper | null {
+        const selectorInfo = parseSelector(selector);
+
+        function traverse(element: DomWrapper): DomWrapper | null {
+            if (elementMatchesSelector(element, selectorInfo)) {
+                return element;
+            }
+
+            for (const child of element.childNodes) {
+                const match = traverse(child);
+                if (match) {
+                    return match;
+                }
+            }
+
+            return null;
+        }
+
+        return traverse(this);
+    }
+}
+
+interface SelectorInfo {
+    tag?: string;
+    id?: string;
+    classes: string[];
+}
+
+function parseSelector(selector: string): SelectorInfo {
+    const selectorInfo: SelectorInfo = {
+        classes: []
+    };
+
+    // Handle ID
+    const idMatch = selector.match(/#([^.#\s]+)/);
+    if (idMatch) {
+        selectorInfo.id = idMatch[1];
+        selector = selector.replace(idMatch[0], '');
+    }
+
+    // Handle classes
+    const classMatches = selector.match(/\.([^.#\s]+)/g);
+    if (classMatches) {
+        selectorInfo.classes = classMatches.map(c => c.substring(1));
+        selector = selector.replace(/\.[^.#\s]+/g, '');
+    }
+
+    // Handle tag name (what's left after removing id and classes)
+    const tagName = selector.trim();
+    if (tagName) {
+        selectorInfo.tag = tagName.toLowerCase();
+    }
+
+    return selectorInfo;
+}
+
+function elementMatchesSelector(element: DomWrapper, selectorInfo: SelectorInfo): boolean {
+    // Check tag name
+    if (selectorInfo.tag && element.ve.name.toLowerCase() !== selectorInfo.tag) {
+        return false;
+    }
+
+    // Check ID
+    if (selectorInfo.id && element.Id !== selectorInfo.id) {
+        return false;
+    }
+
+    // Check classes
+    if (selectorInfo.classes.length > 0) {
+        const elementClasses = element.classname.split(' ').filter(c => c);
+        for (const className of selectorInfo.classes) {
+            if (!elementClasses.includes(className)) {
+                return false;
+            }
+        }
+    }
+
+    return true;
+}
+
+export function querySelectorAll(root: DomWrapper, selector: string): DomWrapper[] {
+    const results: DomWrapper[] = [];
+    const selectorInfo = parseSelector(selector);
+
+    function traverse(element: DomWrapper) {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            results.push(element);
+        }
+
+        // Recursively check children
+        for (const child of element.childNodes) {
+            traverse(child);
+        }
+    }
+
+    traverse(root);
+    return results;
+}
+
+export function querySelector(root: DomWrapper, selector: string): DomWrapper | null {
+    const selectorInfo = parseSelector(selector);
+
+    function traverse(element: DomWrapper): DomWrapper | null {
+        // Check if current element matches
+        if (elementMatchesSelector(element, selectorInfo)) {
+            return element;
+        }
+
+        // Recursively check children
+        for (const child of element.childNodes) {
+            const match = traverse(child);
+            if (match) {
+                return match;
+            }
+        }
+
+        return null;
+    }
+
+    return traverse(root);
 }

package/index.ts

@@ -49,4 +49,12 @@ declare global {
 if (typeof ___document != "undefined") {
     // @ts-ignore
     globalThis.document = new DocumentWrapper(___document)
+}
+
+// @ts-ignore
+CS.OneJS.EngineHost.prototype.sub = function (a, b, c) {
+    let unsubscribe = c ? this.subscribe(a, b, c) : this.subscribe(a, b)
+    return () => {
+        unsubscribe.Invoke()
+    }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "onejs-core",
     "description": "The JS part of OneJS, a UI framework and Scripting Engine for Unity.",
-    "version": "0.3.42",
+    "version": "0.3.44",
     "main": "./dist/index.js",
     "types": "./typings.d.ts",
     "dependencies": {
@@ -13,6 +13,7 @@
         "fs-extra": "^11.2.0",
         "postcss": "^8.4.38",
         "postcss-cli": "^11.0.0",
+        "progress": "^2.0.3",
         "rimraf": "^5.0.7",
         "tailwindcss": "^3.4.1",
         "tar": "^7.2.0",

package/scripts/switch.cjs

@@ -5,6 +5,7 @@ const path = require('path')
 const fse = require('fs-extra')
 const xml2js = require('xml2js')
 const { rimraf } = require('rimraf')
+const ProgressBar = require('progress')
 
 const fsp = fs.promises
 
@@ -172,7 +173,7 @@ async function downloadFile(fileUrl, outputDir) {
 
     ensureDirectoryExistence(outputLocationPath);
 
-    // Check if the file already exists
+    // Check if file exists (keep existing code)
     if (fs.existsSync(outputLocationPath)) {
         console.log(`Local .tgz found: ${outputLocationPath}`);
         return outputLocationPath;
@@ -185,15 +186,24 @@ async function downloadFile(fileUrl, outputDir) {
         throw new Error(`Failed to fetch ${fileUrl}: ${response.statusText}`);
     }
 
+    // Get the total size for the progress bar
+    const totalSize = parseInt(response.headers.get('content-length'), 10);
+    
+    // Create progress bar
+    const progressBar = new ProgressBar('[:bar] :percent ETA: :etas', {
+        complete: '=',
+        incomplete: ' ',
+        width: 40,
+        total: totalSize
+    });
+
     const fileStream = fs.createWriteStream(outputLocationPath);
     for await (const chunk of response.body) {
         fileStream.write(chunk);
+        progressBar.tick(chunk.length);
     }
 
     fileStream.end();
-    fileStream.on('finish', () => {
-        console.log(`Download completed: ${outputLocationPath}`);
-    });
 
     return new Promise((resolve, reject) => {
         fileStream.on('close', () => resolve(outputLocationPath));

package/scripts/uss-transform-plugin.cjs

@@ -39,12 +39,12 @@ module.exports = () => {
 
             // Handle hexadecimal colors with alpha value to RGBA conversion
             root.walkDecls(decl => {
-                decl.value = decl.value.replace(/: #([A-Fa-f0-9]{8})/g, (match, hex) => {
+                decl.value = decl.value.replace(/#([A-Fa-f0-9]{8})/g, (match, hex) => {
                     const r = parseInt(hex.slice(0, 2), 16);
                     const g = parseInt(hex.slice(2, 4), 16);
                     const b = parseInt(hex.slice(4, 6), 16);
                     const a = parseInt(hex.slice(6, 8), 16) / 255;
-                    return `: rgba(${r}, ${g}, ${b}, ${a})`;
+                    return `rgba(${r}, ${g}, ${b}, ${a})`;
                 });
             });