idk

src/compilers/FormatProperties.ts

@@ -1,11 +1,28 @@
-import { Type } from "../index.js"
-import { Properties } from "../types/properties/components.js"
+import { Binding } from "../types/properties/value.js"
 
 export function FormatProperties(properties: any) {
+	const property_bags: Record<Binding, any> = {}
+
+	for (const key in properties) {
+		const value = properties[key]
+
+		if (key.startsWith("#")) {
+			property_bags[<Binding>key] = value
+			delete properties[key]
+		}
+	}
+
 	if (properties.anchor) {
 		properties.anchor_from = properties.anchor_to = properties.anchor
 		delete properties.anchor
 	}
 
+	if (Object.keys(property_bags))
+		if (properties.property_bags) {
+			properties.property_bags = { ...property_bags, ...properties.property_bags }
+		} else {
+			properties.property_bags = property_bags
+		}
+
 	return properties
 }

src/compilers/Memory.ts

@@ -1,9 +1,11 @@
 import { UI } from "../components/UI.js"
+import { Renderer } from "../types/enums/Renderer.js"
+import { Type } from "../types/enums/Type.js"
 
 export const Memory = {
-	cache: new Map<string, { namespace: string; elements: Map<string, UI<any>> }>(),
+	cache: new Map<string, { namespace: string; elements: Map<string, UI<Type, Renderer | null>> }>(),
 
-	register_ui(path: string, element: UI<any, any>) {
+	register_ui(path: string, element: UI<Type, Renderer | null>) {
 		const { elements: saver, namespace } = this.get_file(path, element.namespace!)
 
 		if (saver.get(element.name!)) {
@@ -15,11 +17,22 @@ export const Memory = {
 		return namespace
 	},
 
+	gen_ui_file_content(namespace: string, elements: Map<string, UI<Type, Renderer | null>>) {
+		return JSON.stringify(
+			{
+				namespace,
+				...elements.toJSON(),
+			},
+			null,
+			4
+		)
+	},
+
 	get_file(path: string, namespace: string) {
 		let cached = this.cache.get(path)
 
 		if (!cached) {
-			cached = { namespace, elements: new Map<string, UI<any>>() }
+			cached = { namespace, elements: new Map<string, UI<Type, Renderer | null>>() }
 			this.cache.set(path, cached)
 		}
 

src/compilers/PreCompile.ts

@@ -0,0 +1,11 @@
+declare global {
+	interface Map<K, V> {
+		toJSON(): Record<string, V>
+	}
+}
+
+Map.prototype.toJSON = function () {
+	const obj: any = {}
+	this.forEach((value, key) => (obj[key] = value))
+	return obj
+}

src/compilers/RunEnd.ts

@@ -0,0 +1,7 @@
+import { Memory } from "./Memory.js"
+
+process.on("beforeExit", () => {
+	Memory.cache.forEach(({ elements, namespace }) => {
+		console.log(Memory.gen_ui_file_content(namespace, elements))
+	})
+})

src/components/UI.ts

@@ -21,6 +21,11 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 	constructor(public type?: T, name?: string, namespace?: string, path?: string) {
 		super()
 
+		if (name === "namespace") {
+			console.error("The 'namespace' cannot be used as a name")
+			process.exit(1)
+		}
+
 		this.name = name?.match(/^\w+/)?.[0] || RandomString(16)
 		this.namespace = namespace || RandomString(16)
 
@@ -31,7 +36,7 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 	}
 
 	setProperties(properties: Properties<T, K>) {
-		this.properties = properties
+		this.properties = { ...this.properties, ...properties }
 		return this
 	}
 
@@ -40,7 +45,7 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 			throw new Error("Cannot add a child to itself")
 		}
 
-		this.controls.set(name || child.name, [child, properties || {}])
+		this.controls.set(name || RandomString(16), [child, properties || {}])
 		return this
 	}
 
@@ -50,10 +55,13 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 
 	toJSON() {
 		const obj: any = {
-			type: this.type,
 			...FormatProperties(this.properties),
 		}
 
+		if (this.type) {
+			obj.type = this.type
+		}
+
 		if (this.controls.size) {
 			obj.controls = []
 			this.controls.forEach((e, key) => obj.controls.push({ [key + e[0]]: e[1] }))
@@ -63,7 +71,7 @@ export class UI<T extends Type, K extends Renderer | null = null> extends Class
 	}
 
 	[util.inspect.custom]($: any, opts: any) {
-		const obj: any = this.properties
+		const obj: any = FormatProperties(this.properties)
 
 		if (this.controls.size) {
 			obj.controls = []

src/index.ts

@@ -1,3 +1,6 @@
+import "./compilers/PreCompile.js"
+import "./compilers/RunEnd.js"
+
 export * from "./components/UI.js"
 export { Animation } from "./components/Animation.js"
 export * from "./components/Utils.js"

src/types/properties/element/Control.ts

@@ -1,4 +1,4 @@
-import { AnimValue, Array2, Binding, PropertyBags, Value } from "../value.js"
+import { AnimValue, Array2, Binding, PropertyBags, Value, Variable } from "../value.js"
 
 export interface Control {
 	visible?: Value<boolean>
@@ -18,4 +18,5 @@ export interface Control {
 	follows_cursor?: Value<boolean>
 	property_bags?: Value<PropertyBags>
 	[key: Binding]: Value<any>
+	[key: Variable]: Value<any>
 }

test/app.ts

@@ -1,21 +1,13 @@
-import { Anchor, Button, Custom, Extends, GlobalVariables, Panel, Renderer, Type, UI } from ".."
+import { Binding, Color, Label, Panel } from ".."
 
-const paperDoll = Custom(Renderer.ANIMATED_GIF_RENDERER, {
-	camera_tilt_degrees: 360,
-	starting_rotation: 0,
-})
-
-const panel = Panel({
-	anchor: Anchor.BOTTOM_LEFT,
-	offset: [50, 50],
-}).setProperties({
-	camera_tilt_degrees: 360,
-})
-
-paperDoll.setProperties({
-	camera_tilt_degrees: 360,
-})
-
-panel.setProperties({
-	hover_control: "cac",
+Panel({
+	"#test": 123,
+	[Binding.IS_CREATIVE_LAYOUT]: true,
+	[Binding.INVENTORY_SELECTED_ITEM_COLOR]: Color(0x00ff00),
+}).addChild(
+	Label({
+		text: "Hello, World!",
+		shadow: true,
+		color: Color("#3b0202"),
 	})
+)

tsconfig.json

@@ -7,7 +7,7 @@
 		"outDir": "dist",
 		"declaration": true,
 
-		"sourceMap": true,
+		"sourceMap": false,
 		"strict": true,
 		"esModuleInterop": true,
 		"incremental": true,