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>
 }