onejs-core 1.0.37 → 2.0.2

package/README.md

@@ -1,5 +1,103 @@
-This is the Core JS Lib for OneJS V2. It generally contains 3 things:
+This is the Core JS Lib for OneJS V2. It contains the following:
 
 1) Document and Dom wrappers
 2) Type definitions for a good portion of built-in Unity assemblies
-3) Utility scripts used by esbuild and tailwind
+3) Utility scripts used by esbuild and tailwind
+4) Convenience color parsing utils for better usage in JS
+5) A suite of math utils to make vector, quaternion, and matrix math way easier in JS
+
+## Examples
+
+### Math Utils
+
+https://github.com/Singtaa/onejs-core/tree/main/math
+
+```ts
+import { vec3, quat, mul, add } from 'onejs/math';
+
+// Create a position vector
+const position = vec3(1, 2, 3);
+
+// Create a rotation
+const rotation = quat(0, 0, 0, 1);
+
+// Apply rotation to direction vector
+const direction = vec3(0, 0, 1);
+const rotatedDirection = mul(rotation, direction);
+
+// Move in the rotated direction
+const newPosition = add(position, rotatedDirection);
+
+console.log(newPosition); // [1, 2, 4]
+```
+
+### Color Utils
+
+```tsx
+import { namedColor, parseColor, palettes } from "onejs-core/utils"
+import { useEffect, useRef } from "preact/hooks"
+import { h, render } from "preact"
+import { forwardRef } from "preact/compat"
+import { GameObject, PrimitiveType, MeshRenderer, Vector3, Physics, Random, Rigidbody, CollisionDetectionMode, PhysicsMaterial, SphereCollider, Mathf, Camera, Collider } from "UnityEngine"
+import { RuntimePanelUtils } from "UnityEngine/UIElements"
+
+let plane = GameObject.CreatePrimitive(PrimitiveType.Plane)
+plane.transform.position = new Vector3(0, -10, 0)
+plane.GetComp(MeshRenderer).material.color = namedColor("maroon")
+plane.transform.localScale = new Vector3(15, 1, 15)
+
+let pm = new PhysicsMaterial()
+pm.bounciness = 0.6
+plane.GetComp(Collider).material = pm
+
+var cam = GameObject.Find("Main Camera")
+cam.transform.position = new Vector3(0, 6, -10)
+cam.transform.LookAt(new Vector3(0, -15, 0))
+
+Physics.gravity = new Vector3(0, -30, 0)
+
+let balls: GameObject[] = []
+
+function createRandomBall() {
+    let ball = GameObject.CreatePrimitive(PrimitiveType.Sphere)
+    ball.GetComp(MeshRenderer).material.color = parseColor(palettes[Mathf.RoundToInt(Random.Range(0, 99))][2])
+    ball.transform.position = Vector3.op_Multiply(Random.insideUnitSphere, 2)
+    let rb = ball.AddComp(Rigidbody)
+    rb.collisionDetectionMode = CollisionDetectionMode.Continuous
+    rb.drag = 0.3
+    ball.GetComp(SphereCollider).material = pm
+    balls.push(ball)
+}
+
+for (let i = 0; i < 10; i++) {
+    createRandomBall()
+}
+
+const NamePlate = forwardRef(({ index }: { index: number }, ref) => {
+    return <div ref={ref} class="absolute hidden text-teal-700 text-xl">{`Ball ${index}`}</div>
+})
+
+const App = () => {
+    const refs = Array.from({ length: balls.length }, () => useRef<Element>())
+
+    useEffect(() => {
+        var interval = setInterval(update)
+        return () => clearInterval(interval)
+    }, [])
+
+    function update() {
+        for (let i = 0; i < balls.length; i++) {
+            const ball = balls[i]
+            var pos = RuntimePanelUtils.CameraTransformWorldToPanel(document.body!.ve.panel, ball.transform.position, Camera.main);
+            refs[i].current!.style.translate = pos
+            refs[i].current!.style.display = "flex"
+        }
+    }
+
+    return <div class="w-full h-full">
+        {balls.map((ball, i) => <NamePlate ref={refs[i]} index={i} />)}
+    </div>
+}
+
+render(<App />, document.body)
+```

package/bin/oj.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+console.log("ojojoj")

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

@@ -242,8 +242,8 @@ declare namespace CS {
             public get _children(): any;
             public set _children(value: any);
             public get _listeners(): System.Collections.Generic.Dictionary$2<string, UnityEngine.UIElements.EventCallback$1<UnityEngine.UIElements.EventBase>>;
-            public get classname(): string;
-            public set classname(value: string);
+            public get className(): string;
+            public set className(value: string);
             public SetBackgroundColor ($color: UnityEngine.Color) : void
             public clearChildren () : void
             public _addToListeners ($name: string, $callback: UnityEngine.UIElements.EventCallback$1<UnityEngine.UIElements.EventBase>) : void

package/dist/dom/dom.d.ts

@@ -18,14 +18,16 @@ export declare class DomWrapper {
     get checked(): boolean;
     get data(): any;
     set data(value: any);
-    get classname(): string;
-    set classname(value: string);
+    get className(): string;
+    set className(value: string);
+    get classList(): DomTokenList;
     /**
      * Not using private fields because of issues with the `#private;` line
      * generated by tsc
      */
     dom: CS.OneJS.Dom.Dom;
     domStyleWrapper: DomStyleWrapper;
+    domTokenList: DomTokenList;
     cachedChildNodes: DomWrapper[] | null;
     boundListeners: WeakMap<WeakKey, any>;
     constructor(dom: CS.OneJS.Dom.Dom);
@@ -36,7 +38,9 @@ export declare class DomWrapper {
     contains(child: DomWrapper): boolean;
     clearChildren(): void;
     focus(): void;
-    addEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean): void;
+    addEventListener(type: string, listener: (event: EventBase) => void, options?: boolean | {
+        once?: boolean;
+    }): void;
     removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean): void;
     setAttribute(name: string, value: any): void;
     removeAttribute(name: string): void;
@@ -57,3 +61,19 @@ export declare class DomWrapper {
 }
 export declare function querySelectorAll(root: DomWrapper, selector: string): DomWrapper[];
 export declare function querySelector(root: DomWrapper, selector: string): DomWrapper | null;
+declare class DomTokenList {
+    dom: CS.OneJS.Dom.Dom;
+    constructor(dom: CS.OneJS.Dom.Dom);
+    _tokens(): string[];
+    _update(tokens: string[]): void;
+    add(...tokens: string[]): void;
+    remove(...tokens: string[]): void;
+    toggle(token: string, force?: boolean): boolean;
+    contains(token: string): boolean;
+    replace(oldToken: string, newToken: string): boolean;
+    toString(): string;
+    get length(): number;
+    item(index: number): string | null;
+    [Symbol.iterator](): Iterator<string>;
+}
+export {};

package/dist/dom/dom.js

@@ -31,19 +31,22 @@ export class DomWrapper {
     get checked() { return this.dom.checked; }
     get data() { return this.dom.data; }
     set data(value) { this.dom.data = value; }
-    get classname() { return this.dom.classname; }
-    set classname(value) { this.dom.classname = value; }
+    get className() { return this.dom.className; }
+    set className(value) { this.dom.className = value; }
+    get classList() { return this.domTokenList; }
     /**
      * Not using private fields because of issues with the `#private;` line
      * generated by tsc
      */
     dom;
     domStyleWrapper;
+    domTokenList;
     cachedChildNodes = null;
     boundListeners = new WeakMap();
     constructor(dom) {
         this.dom = dom;
         this.domStyleWrapper = new DomStyleWrapper(dom.style);
+        this.domTokenList = new DomTokenList(dom);
     }
     appendChild(child) {
         if (!child)
@@ -77,13 +80,22 @@ export class DomWrapper {
     focus() {
         this.dom.focus();
     }
-    addEventListener(type, listener, useCapture) {
+    addEventListener(type, listener, options) {
         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);
+        if (typeof options === 'object' && options.once) {
+            const onceWrapper = (event) => {
+                boundListener(event);
+                this.dom.removeEventListener(type, onceWrapper, false);
+            };
+            this.dom.addEventListener(type, onceWrapper, false);
+        }
+        else {
+            this.dom.addEventListener(type, boundListener, options ? true : false);
+        }
     }
     removeEventListener(type, listener, useCapture) {
         const boundListener = this.boundListeners.get(listener);
@@ -175,7 +187,7 @@ function elementMatchesSelector(element, selectorInfo) {
     }
     // Check classes
     if (selectorInfo.classes.length > 0) {
-        const elementClasses = element.classname.split(' ').filter(c => c);
+        const elementClasses = element.className.split(' ').filter(c => c);
         for (const className of selectorInfo.classes) {
             if (!elementClasses.includes(className)) {
                 return false;
@@ -218,3 +230,60 @@ export function querySelector(root, selector) {
     }
     return traverse(root);
 }
+class DomTokenList {
+    dom;
+    constructor(dom) {
+        this.dom = dom;
+    }
+    _tokens() {
+        return this.dom.className.trim().split(/\s+/).filter(Boolean);
+    }
+    _update(tokens) {
+        this.dom.className = tokens.join(' ');
+    }
+    add(...tokens) {
+        const set = new Set(this._tokens());
+        tokens.forEach(t => t && set.add(t));
+        this._update(Array.from(set));
+    }
+    remove(...tokens) {
+        const set = new Set(this._tokens());
+        tokens.forEach(t => set.delete(t));
+        this._update(Array.from(set));
+    }
+    toggle(token, force) {
+        if (!token)
+            return false;
+        const has = this.contains(token);
+        if (force === true || (!has && force !== false)) {
+            this.add(token);
+            return true;
+        }
+        if (has && (force === false || force === undefined)) {
+            this.remove(token);
+            return false;
+        }
+        return has;
+    }
+    contains(token) {
+        return this._tokens().includes(token);
+    }
+    replace(oldToken, newToken) {
+        if (!this.contains(oldToken))
+            return false;
+        const tokens = this._tokens().map(t => (t === oldToken ? newToken : t));
+        this._update(tokens);
+        return true;
+    }
+    toString() {
+        return this.dom.className;
+    }
+    get length() { return this._tokens().length; }
+    item(index) {
+        const t = this._tokens();
+        return index >= 0 && index < t.length ? t[index] : null;
+    }
+    [Symbol.iterator]() {
+        return this._tokens()[Symbol.iterator]();
+    }
+}

package/dist/index.d.ts

@@ -14,9 +14,6 @@ declare global {
     interface Document extends DocumentWrapper {
     }
     interface Element extends DomWrapper {
-        classname: string;
-        nodeType: number;
-        ve: CS.UnityEngine.UIElements.VisualElement;
     }
     const newCsArray: <T>(type: {
         new (...args: any[]): T;

package/dom/dom.ts

@@ -34,8 +34,9 @@ export class DomWrapper {
     public get data(): any { return this.dom.data }
     public set data(value: any) { this.dom.data = value }
 
-    public get classname(): string { return this.dom.classname }
-    public set classname(value: string) { this.dom.classname = value }
+    public get className(): string { return this.dom.className }
+    public set className(value: string) { this.dom.className = value }
+    public get classList(): DomTokenList { return this.domTokenList }
 
     /**
      * Not using private fields because of issues with the `#private;` line
@@ -43,6 +44,7 @@ export class DomWrapper {
      */
     dom: CS.OneJS.Dom.Dom
     domStyleWrapper: DomStyleWrapper
+    domTokenList: DomTokenList
 
     cachedChildNodes: DomWrapper[] | null = null
     boundListeners = new WeakMap();
@@ -50,6 +52,7 @@ export class DomWrapper {
     constructor(dom: CS.OneJS.Dom.Dom) {
         this.dom = dom
         this.domStyleWrapper = new DomStyleWrapper(dom.style)
+        this.domTokenList = new DomTokenList(dom)
     }
 
     appendChild(child: DomWrapper) {
@@ -88,13 +91,22 @@ export class DomWrapper {
         this.dom.focus()
     }
 
-    addEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean) {
+    addEventListener(type: string, listener: (event: EventBase) => void, options?: boolean | { once?: boolean }) {
         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)
+
+        if (typeof options === 'object' && options.once) {
+            const onceWrapper = (event: EventBase) => {
+                boundListener(event);
+                this.dom.removeEventListener(type, onceWrapper, false);
+            };
+            this.dom.addEventListener(type, onceWrapper, false);
+        } else {
+            this.dom.addEventListener(type, boundListener, options ? true : false);
+        }
     }
 
     removeEventListener(type: string, listener: (event: EventBase) => void, useCapture?: boolean) {
@@ -212,7 +224,7 @@ function elementMatchesSelector(element: DomWrapper, selectorInfo: SelectorInfo)
 
     // Check classes
     if (selectorInfo.classes.length > 0) {
-        const elementClasses = element.classname.split(' ').filter(c => c);
+        const elementClasses = element.className.split(' ').filter(c => c);
         for (const className of selectorInfo.classes) {
             if (!elementClasses.includes(className)) {
                 return false;
@@ -264,4 +276,71 @@ export function querySelector(root: DomWrapper, selector: string): DomWrapper |
     }
 
     return traverse(root);
+}
+
+class DomTokenList {
+    dom: CS.OneJS.Dom.Dom
+
+    constructor(dom: CS.OneJS.Dom.Dom) {
+        this.dom = dom
+    }
+
+    _tokens(): string[] {
+        return this.dom.className.trim().split(/\s+/).filter(Boolean)
+    }
+
+    _update(tokens: string[]) {
+        this.dom.className = tokens.join(' ')
+    }
+
+    add(...tokens: string[]) {
+        const set = new Set(this._tokens())
+        tokens.forEach(t => t && set.add(t))
+        this._update(Array.from(set))
+    }
+
+    remove(...tokens: string[]) {
+        const set = new Set(this._tokens())
+        tokens.forEach(t => set.delete(t))
+        this._update(Array.from(set))
+    }
+
+    toggle(token: string, force?: boolean): boolean {
+        if (!token) return false
+        const has = this.contains(token)
+        if (force === true || (!has && force !== false)) {
+            this.add(token)
+            return true
+        }
+        if (has && (force === false || force === undefined)) {
+            this.remove(token)
+            return false
+        }
+        return has
+    }
+
+    contains(token: string): boolean {
+        return this._tokens().includes(token)
+    }
+
+    replace(oldToken: string, newToken: string): boolean {
+        if (!this.contains(oldToken)) return false
+        const tokens = this._tokens().map(t => (t === oldToken ? newToken : t))
+        this._update(tokens)
+        return true
+    }
+
+    toString(): string {
+        return this.dom.className
+    }
+
+    get length(): number { return this._tokens().length }
+    item(index: number): string | null {
+        const t = this._tokens()
+        return index >= 0 && index < t.length ? t[index] : null
+    }
+
+    [Symbol.iterator](): Iterator<string> {
+        return this._tokens()[Symbol.iterator]()
+    }
 }

package/index.ts

@@ -40,9 +40,7 @@ export { emo } from "./styling/index"
 declare global {
     interface Document extends DocumentWrapper { }
     interface Element extends DomWrapper {
-        classname: string
-        nodeType: number
-        ve: CS.UnityEngine.UIElements.VisualElement
+
     }
     const newCsArray: <T>(type: { new(...args: any[]): T }, count: number) => CS.System.Array
     const toJsArray: <T>(csArr: CS.System.Array) => T[]

package/math/README.md

@@ -5,7 +5,7 @@ Convenience functions for working with vectors, quaternions, matrices, etc.
 ## Usage Example
 
 ```typescript
-import { vec3, quat, mul, add } from 'onejs/math';
+import { vec3, quat, mul, add } from 'onejs-core/math';
 
 // Create a position vector
 const position = vec3(1, 2, 3);
@@ -209,4 +209,4 @@ lerp(a: Vector3, b: Vector3, t: number): Vector3
 lerp(a: Vector4, b: Vector4, t: number): Vector4
 lerp(a: Quaternion, b: Quaternion, t: number): Quaternion
 lerp(a: Color, b: Color, t: number): Color
-```
+```

package/package.json

@@ -1,23 +1,26 @@
-{
-    "name": "onejs-core",
-    "description": "The JS part of OneJS, a UI framework and Scripting Engine for Unity.",
-    "version": "1.0.37",
-    "main": "./dist/index.js",
-    "types": "./typings.d.ts",
-    "dependencies": {
-        "css-flatten": "^2.0.0",
-        "css-simple-parser": "^3.0.0",
-        "progress": "^2.0.3"
-    },
-    "devDependencies": {
-        "esbuild": "^0.20.0",
-        "fs-extra": "^11.2.0",
-        "postcss": "^8.4.38",
-        "postcss-cli": "^11.0.0",
-        "rimraf": "^5.0.7",
-        "tailwindcss": "^3.4.1",
-        "tar": "^7.2.0",
-        "tiny-glob": "^0.2.9",
-        "xml2js": "^0.6.2"
-    }
-}
+{
+    "name": "onejs-core",
+    "description": "The JS part of OneJS, a UI framework and Scripting Engine for Unity.",
+    "version": "2.0.2",
+    "main": "./dist/index.js",
+    "types": "./typings.d.ts",
+    "bin": {
+        "oj": "./bin/oj.js"
+    },
+    "dependencies": {
+        "css-flatten": "^2.0.0",
+        "css-simple-parser": "^3.0.0",
+        "progress": "^2.0.3"
+    },
+    "devDependencies": {
+        "esbuild": "^0.20.0",
+        "fs-extra": "^11.2.0",
+        "postcss": "^8.4.38",
+        "postcss-cli": "^11.0.0",
+        "rimraf": "^5.0.7",
+        "tailwindcss": "^3.4.17",
+        "tar": "^7.2.0",
+        "tiny-glob": "^0.2.9",
+        "xml2js": "^0.6.2"
+    }
+}

package/scripts/postcss/optional-import-plugin.cjs

@@ -0,0 +1,26 @@
+const fs = require("fs")
+const path = require("path")
+const postcssImport = require("postcss-import")
+
+module.exports = function optionalImportPlugin() {
+    const optionalImportMap = new Map()
+
+    return postcssImport({
+        resolve(id, basedir) {
+            const fullPath = path.resolve(basedir, id)
+            if (!fs.existsSync(fullPath)) {
+                const fakePath = path.resolve(".optional-imports", id.replace(/[\\/]/g, "_") + ".css")
+                optionalImportMap.set(fakePath, "")
+                console.warn(`[postcss-import] Skipping: ${id}`)
+                return fakePath
+            }
+            return fullPath
+        },
+        load(filename) {
+            if (optionalImportMap.has(filename)) {
+                return "/* optional import skipped */"
+            }
+            return fs.readFileSync(filename, "utf8")
+        }
+    })
+}

package/scripts/postcss/tailwind-logging-plugin.cjs

@@ -0,0 +1,12 @@
+module.exports = () => {
+    return {
+        postcssPlugin: 'postcss-logging-plugin',
+        Once(root, { result }) {
+            process.stdout.write('\x1Bc')
+            console.log('[tailwindcss] compiler started...')
+        },
+        OnceExit(root, { result }) {
+            console.log('[tailwindcss] watching...')
+        }
+    }
+}

package/scripts/switch.cjs

@@ -13,9 +13,9 @@ const projectDir = path.resolve(process.cwd(), '..')
 const manifestPath = path.join(projectDir, 'Packages', 'manifest.json')
 
 const backends = [
-    { name: "QuickJS", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.1.0/PuerTS_Quickjs_2.1.0.tgz" },
-    { name: "V8", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.1.0/PuerTS_V8_2.1.0.tgz" },
-    { name: "NodeJS", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.1.0/PuerTS_Nodejs_2.1.0.tgz" }
+    { name: "QuickJS", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.2.1/PuerTS_Quickjs_2.2.1.tgz" },
+    { name: "V8", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.2.1/PuerTS_V8_2.2.1.tgz" },
+    { name: "NodeJS", tgzUrl: "https://github.com/Tencent/puerts/releases/download/Unity_v2.2.1/PuerTS_Nodejs_2.2.1.tgz" }
 ]
 
 const args = process.argv.slice(2)
@@ -30,16 +30,26 @@ if (args.length > 0 && args[0].toLowerCase() == "clear") {
             console.log(`Deleted ${downloadedPath}`)
         }
     }
-} else if (args.length > 0 && ["quickjs", "v8", "nodejs"].includes(args[0].toLowerCase())) {
-    const backend = backends.find(b => b.name.toLowerCase() === args[0])
-    const outputDir = "./tmp"
-    Process(backend, outputDir)
+} else if (
+    args.length > 0 &&
+    (["quickjs", "v8", "nodejs"].includes(args[0].toLowerCase()) ||
+     (args[0].toLowerCase().endsWith('.tgz') || /^https?:\/\/.+\.tgz$/i.test(args[0])))
+) {
+    let backend;
+    const outputDir = "./tmp";
+    if (["quickjs", "v8", "nodejs"].includes(args[0].toLowerCase())) {
+        backend = backends.find(b => b.name.toLowerCase() === args[0]);
+    } else {
+        backend = { name: "Custom", tgzUrl: args[0] };
+    }
+    Process(backend, outputDir);
 } else {
-    console.log("Usage: npm run switch <quickjs|v8|nodejs|clear>\n")
+    console.log("Usage: npm run switch <quickjs|v8|nodejs|clear|tgz-url>\n")
     console.log("           quickjs: Switch to QuickJS backend")
     console.log("           v8: Switch to V8 backend")
     console.log("           nodejs: Switch to NodeJS backend")
-    console.log("           clear: Clear all downloaded .tgz files\n")
+    console.log("           clear: Clear all downloaded .tgz files")
+    console.log("           <tgz-url>: Switch using a custom .tgz package URL\n")
 }
 
 async function Process(backend, outputDir) {
@@ -266,4 +276,4 @@ async function deleteDirectorySafely(dirPath) {
         return true
     }
     return false
-}
+}

package/.github/workflows/jsr.yml

@@ -1,19 +0,0 @@
-# name: Publish
-# on:
-#   push:
-#     branches:
-#       - main
-
-# jobs:
-#   publish:
-#     runs-on: ubuntu-latest
-
-#     permissions:
-#       contents: read
-#       id-token: write
-
-#     steps:
-#       - uses: actions/checkout@v4
-
-#       - name: Publish package
-#         run: npx jsr publish