mirage-engine 0.1.1 → 0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 siwoo lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# MirageEngine
+
+> **An engine that mirrors HTML DOM elements to a WebGL scene in real-time.**
+
+MirageEngine directly mirrors HTML DOM elements to WebGL objects. It observes DOM mutations and synchronizes position, style, and content in real-time, allowing standard HTML elements to exist within a WebGL context.
+
+## Installation
+
+```bash
+npm install mirage-engine
+```
+
+## Usage
+
+```ts
+import { Mirage } from 'mirage-engine';
+
+const engine = new Mirage("#target");
+engine.start();
+```

package/dist/dev/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1 +1,2 @@
-export { Mirage } from './core/Mirage';
+export * from './src/index'
+export {}

package/dist/mirage-engine.js

@@ -1,24 +1,26 @@
-var p = Object.defineProperty;
-var v = (r, e, t) => e in r ? p(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var i = (r, e, t) => (v(r, typeof e != "symbol" ? e + "" : e, t), t);
-import * as h from "three";
-class S {
+var D = Object.defineProperty;
+var E = (n, e, t) => e in n ? D(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var s = (n, e, t) => (E(n, typeof e != "symbol" ? e + "" : e, t), t);
+import * as a from "three";
+const m = 0, u = 1, p = 2, y = 8;
+class R {
   constructor() {
-    i(this, "canvas");
-    i(this, "scene");
-    i(this, "camera");
-    i(this, "renderer");
-    i(this, "renderOrder", 0);
-    this.canvas = document.createElement("canvas"), this.scene = new h.Scene();
+    s(this, "canvas");
+    s(this, "scene");
+    s(this, "camera");
+    s(this, "renderer");
+    s(this, "renderOrder", 0);
+    s(this, "meshMap", /* @__PURE__ */ new Map());
+    this.canvas = document.createElement("canvas"), this.scene = new a.Scene();
     const e = window.innerWidth, t = window.innerHeight;
-    this.camera = new h.OrthographicCamera(
+    this.camera = new a.OrthographicCamera(
       e / -2,
       e / 2,
       t / 2,
       t / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.renderer = new h.WebGLRenderer({
+    ), this.camera.position.z = 100, this.renderer = new a.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0
     }), this.renderer.setSize(e, t);
@@ -36,102 +38,119 @@ class S {
   setSize(e, t) {
     this.renderer.setSize(e, t), this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
   }
-  clearScene() {
-    for (; this.scene.children.length > 0; )
-      this.scene.remove(this.scene.children[0]);
+  syncScene(e) {
+    this.renderOrder = 0;
+    const t = /* @__PURE__ */ new Set();
+    this.reconcileNode(e, t);
+    for (const [r, i] of this.meshMap.entries())
+      t.has(r) || (this.scene.remove(i), i.geometry.dispose(), i.material instanceof a.Material && i.material.dispose(), this.meshMap.delete(r));
   }
-  buildScene(e) {
+  reconcileNode(e, t) {
     if (e.type === "BOX") {
-      const t = new h.PlaneGeometry(
-        e.rect.width,
-        e.rect.height
-      ), s = e.styles.backgroundColor;
-      let o = s, n = 1;
-      if (s === "transparent" || s === "rgba(0, 0, 0, 0)")
-        o = "#ffffff", n = 0;
-      else if (s.startsWith("rgba")) {
-        const a = s.match(/[\d.]+/g);
-        if (a && a.length >= 4) {
-          const g = a[0], y = a[1], T = a[2];
-          n = parseFloat(a[3]), o = `rgb(${g}, ${y}, ${T})`;
-        }
+      t.add(e.element);
+      let r = this.meshMap.get(e.element);
+      if (r)
+        console.log("[V2] 기존 매쉬 재사용:", e.element);
+      else {
+        console.log("[V2] 매쉬 신규 생성:", e.element);
+        const i = new a.PlaneGeometry(1, 1), o = new a.MeshBasicMaterial({ transparent: !0 });
+        r = new a.Mesh(i, o), this.scene.add(r), this.meshMap.set(e.element, r);
       }
-      const c = e.styles.opacity * n, d = new h.MeshBasicMaterial({
-        color: o,
-        opacity: c,
-        transparent: c < 1
-      }), l = new h.Mesh(t, d), u = this.renderer.domElement.width, f = this.renderer.domElement.height, w = 1e-3;
-      this.renderOrder++, l.position.set(
-        e.rect.x - u / 2 + e.rect.width / 2,
-        -e.rect.y + f / 2 - e.rect.height / 2,
-        e.styles.zIndex + this.renderOrder * w
-      ), this.scene.add(l);
-      for (const a of e.children)
-        this.buildScene(a);
+      this.updateMeshProperties(r, e);
+      for (const i of e.children)
+        this.reconcileNode(i, t);
     }
   }
-  syncScene(e) {
-    this.clearScene(), this.renderOrder = 0, this.buildScene(e);
+  updateMeshProperties(e, t) {
+    console.log(
+      `[V2] 업데이트 중인 매쉬 ID: ${e.uuid}, 마스크: ${t.dirtyMask}`
+    );
+    const { rect: r, styles: i } = t, o = this.renderer.domElement.width, l = this.renderer.domElement.height;
+    e.scale.set(r.width, r.height, 1);
+    const g = 1e-3;
+    this.renderOrder++, e.position.set(
+      r.x - o / 2 + r.width / 2,
+      -r.y + l / 2 - r.height / 2,
+      i.zIndex + this.renderOrder * g
+    );
+    const c = e.material, d = i.backgroundColor;
+    let f = d, w = 1;
+    if (d === "transparent" || d === "rgba(0, 0, 0, 0)")
+      f = "#ffffff", w = 0;
+    else if (d.startsWith("rgba")) {
+      const h = d.match(/[\d.]+/g);
+      if (h && h.length >= 4) {
+        const M = h[0], b = h[1], S = h[2];
+        w = parseFloat(h[3]), f = `rgb(${M}, ${b}, ${S})`;
+      }
+    }
+    const T = i.opacity * w;
+    c.color.set(f), c.opacity = T, c.transparent = T < 1, t.dirtyMask & u && console.log(" -> 위치/크기만 업데이트됨"), t.dirtyMask & p && console.log(" -> 스타일만 업데이트됨");
   }
   render() {
     this.renderer.render(this.scene, this.camera);
   }
 }
-function m(r) {
-  if (r.tagName === "SCRIPT" || r.tagName === "STYLE")
+function v(n, e = u | p) {
+  if (n.tagName === "SCRIPT" || n.tagName === "STYLE")
     return null;
-  const e = r.getBoundingClientRect(), t = {
-    x: e.x + window.scrollX,
-    y: e.y + window.scrollY,
-    width: e.width,
-    height: e.height
-  }, s = window.getComputedStyle(r), o = {
-    backgroundColor: s.backgroundColor,
-    opacity: parseFloat(s.opacity),
-    zIndex: parseInt(s.zIndex, 10) || 0
-  }, n = [];
-  for (const c of r.children) {
-    const d = m(c);
-    d && n.push(d);
+  const t = n.getBoundingClientRect(), r = {
+    x: t.x + window.scrollX,
+    y: t.y + window.scrollY,
+    width: t.width,
+    height: t.height
+  }, i = window.getComputedStyle(n), o = {
+    backgroundColor: i.backgroundColor,
+    opacity: parseFloat(i.opacity),
+    zIndex: parseInt(i.zIndex, 10) || 0
+  }, l = [];
+  for (const g of n.children) {
+    const c = v(g);
+    c && l.push(c);
   }
   return {
     type: "BOX",
-    rect: t,
+    element: n,
+    rect: r,
     styles: o,
-    children: n
+    dirtyMask: e,
+    children: l
   };
 }
-class b {
+class C {
   constructor(e, t) {
-    i(this, "target");
-    i(this, "renderer");
-    i(this, "observer");
-    i(this, "isDomDirty", !1);
-    i(this, "isRunning", !1);
-    i(this, "mutationTimer", null);
-    i(this, "cssTimer", null);
-    i(this, "onTransitionFinished", (e) => {
-      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.cssTimer = window.setTimeout(() => {
+    s(this, "target");
+    s(this, "renderer");
+    s(this, "observer");
+    s(this, "isDomDirty", !1);
+    s(this, "isRunning", !1);
+    s(this, "pendingMask", m);
+    s(this, "mutationTimer", null);
+    s(this, "cssTimer", null);
+    s(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= u | p, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
-    i(this, "onWindowResize", () => {
+    s(this, "onWindowResize", () => {
       this.renderer.setSize(window.innerWidth, window.innerHeight), this.isDomDirty = !0;
     });
-    i(this, "renderLoop", () => {
+    s(this, "renderLoop", () => {
       this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
     });
-    this.target = e, this.renderer = t, this.observer = new MutationObserver((s) => {
-      let o = !1, n = !1;
-      for (const c of s)
-        c.type === "childList" ? o = !0 : c.type === "attributes" && (n = !0);
-      if (o) {
-        this.clearTimers(), console.log("Structural Changed"), this.isDomDirty = !0;
-        return;
+    this.target = e, this.renderer = t, this.observer = new MutationObserver((r) => {
+      let i = m;
+      for (const o of r)
+        o.type === "childList" ? i |= y : o.type === "attributes" && (o.attributeName === "style" || o.attributeName === "class") && (i |= u | p);
+      if (i !== m) {
+        if (this.pendingMask |= i, i & y) {
+          this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
+          return;
+        }
+        this.mutationTimer && clearTimeout(this.mutationTimer), this.mutationTimer = window.setTimeout(() => {
+          this.mutationTimer = null, this.isDomDirty = !0;
+        }, 200);
       }
-      n && (this.mutationTimer && clearTimeout(this.mutationTimer), this.mutationTimer = window.setTimeout(() => {
-        this.mutationTimer = null, this.isDomDirty = !0;
-      }, 200));
     });
   }
   start() {
@@ -150,19 +169,19 @@ class b {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const e = m(this.target);
-    e && this.renderer.syncScene(e);
+    const e = v(this.target, this.pendingMask);
+    e && this.renderer.syncScene(e), this.pendingMask = m;
   }
 }
-class C {
+class k {
   constructor(e) {
-    i(this, "renderer");
-    i(this, "syncer");
-    i(this, "target");
+    s(this, "renderer");
+    s(this, "syncer");
+    s(this, "target");
     const t = document.querySelector(e);
     if (!t)
       throw new Error(`[Mirage] Element not found: ${e}`);
-    this.target = t, this.renderer = new S(), this.renderer.mount(document.body), this.syncer = new b(this.target, this.renderer);
+    this.target = t, this.renderer = new R(), this.renderer.mount(document.body), this.syncer = new C(this.target, this.renderer);
   }
   start() {
     this.syncer.start();
@@ -172,5 +191,5 @@ class C {
   }
 }
 export {
-  C as Mirage
+  k as Mirage
 };

package/dist/mirage-engine.umd.js

@@ -1 +1 @@
-(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s.MirageEngine={},s.THREE))})(this,function(s,o){"use strict";var O=Object.defineProperty;var C=(s,o,d)=>o in s?O(s,o,{enumerable:!0,configurable:!0,writable:!0,value:d}):s[o]=d;var i=(s,o,d)=>(C(s,typeof o!="symbol"?o+"":o,d),d);function d(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const u=d(o);class y{constructor(){i(this,"canvas");i(this,"scene");i(this,"camera");i(this,"renderer");i(this,"renderOrder",0);this.canvas=document.createElement("canvas"),this.scene=new u.Scene;const e=window.innerWidth,t=window.innerHeight;this.camera=new u.OrthographicCamera(e/-2,e/2,t/2,t/-2,1,1e3),this.camera.position.z=100,this.renderer=new u.WebGLRenderer({canvas:this.canvas,alpha:!0}),this.renderer.setSize(e,t)}mount(e){e.appendChild(this.canvas)}dispose(){try{this.renderer.dispose()}catch{}this.canvas.parentElement&&this.canvas.parentElement.removeChild(this.canvas)}setSize(e,t){this.renderer.setSize(e,t),this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}clearScene(){for(;this.scene.children.length>0;)this.scene.remove(this.scene.children[0])}buildScene(e){if(e.type==="BOX"){const t=new u.PlaneGeometry(e.rect.width,e.rect.height),n=e.styles.backgroundColor;let c=n,a=1;if(n==="transparent"||n==="rgba(0, 0, 0, 0)")c="#ffffff",a=0;else if(n.startsWith("rgba")){const h=n.match(/[\d.]+/g);if(h&&h.length>=4){const S=h[0],E=h[1],D=h[2];a=parseFloat(h[3]),c=`rgb(${S}, ${E}, ${D})`}}const l=e.styles.opacity*a,m=new u.MeshBasicMaterial({color:c,opacity:l,transparent:l<1}),g=new u.Mesh(t,m),T=this.renderer.domElement.width,b=this.renderer.domElement.height,v=.001;this.renderOrder++,g.position.set(e.rect.x-T/2+e.rect.width/2,-e.rect.y+b/2-e.rect.height/2,e.styles.zIndex+this.renderOrder*v),this.scene.add(g);for(const h of e.children)this.buildScene(h)}}syncScene(e){this.clearScene(),this.renderOrder=0,this.buildScene(e)}render(){this.renderer.render(this.scene,this.camera)}}function f(r){if(r.tagName==="SCRIPT"||r.tagName==="STYLE")return null;const e=r.getBoundingClientRect(),t={x:e.x+window.scrollX,y:e.y+window.scrollY,width:e.width,height:e.height},n=window.getComputedStyle(r),c={backgroundColor:n.backgroundColor,opacity:parseFloat(n.opacity),zIndex:parseInt(n.zIndex,10)||0},a=[];for(const l of r.children){const m=f(l);m&&a.push(m)}return{type:"BOX",rect:t,styles:c,children:a}}class p{constructor(e,t){i(this,"target");i(this,"renderer");i(this,"observer");i(this,"isDomDirty",!1);i(this,"isRunning",!1);i(this,"mutationTimer",null);i(this,"cssTimer",null);i(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});i(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});i(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=e,this.renderer=t,this.observer=new MutationObserver(n=>{let c=!1,a=!1;for(const l of n)l.type==="childList"?c=!0:l.type==="attributes"&&(a=!0);if(c){this.clearTimers(),console.log("Structural Changed"),this.isDomDirty=!0;return}a&&(this.mutationTimer&&clearTimeout(this.mutationTimer),this.mutationTimer=window.setTimeout(()=>{this.mutationTimer=null,this.isDomDirty=!0},200))})}start(){this.isRunning||(this.isRunning=!0,this.observer.observe(this.target,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),this.target.addEventListener("transitionend",this.onTransitionFinished),this.target.addEventListener("animationend",this.onTransitionFinished),window.addEventListener("resize",this.onWindowResize),this.forceUpdateScene(),this.renderLoop())}stop(){this.isRunning=!1,this.observer.disconnect(),this.clearTimers(),this.target.removeEventListener("transitionend",this.onTransitionFinished),this.target.removeEventListener("animationend",this.onTransitionFinished),window.removeEventListener("resize",this.onWindowResize)}clearTimers(){this.mutationTimer&&(clearTimeout(this.mutationTimer),this.mutationTimer=null),this.cssTimer&&(clearTimeout(this.cssTimer),this.cssTimer=null)}forceUpdateScene(){this.isDomDirty=!1;const e=f(this.target);e&&this.renderer.syncScene(e)}}class w{constructor(e){i(this,"renderer");i(this,"syncer");i(this,"target");const t=document.querySelector(e);if(!t)throw new Error(`[Mirage] Element not found: ${e}`);this.target=t,this.renderer=new y,this.renderer.mount(document.body),this.syncer=new p(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop(),this.renderer.dispose()}}s.Mirage=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.MirageEngine={},o.THREE))})(this,function(o,a){"use strict";var z=Object.defineProperty;var L=(o,a,h)=>a in o?z(o,a,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[a]=h;var s=(o,a,h)=>(L(o,typeof a!="symbol"?a+"":a,h),h);function h(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const d=h(a),f=0,p=1,g=2,b=8;class E{constructor(){s(this,"canvas");s(this,"scene");s(this,"camera");s(this,"renderer");s(this,"renderOrder",0);s(this,"meshMap",new Map);this.canvas=document.createElement("canvas"),this.scene=new d.Scene;const e=window.innerWidth,t=window.innerHeight;this.camera=new d.OrthographicCamera(e/-2,e/2,t/2,t/-2,1,1e3),this.camera.position.z=100,this.renderer=new d.WebGLRenderer({canvas:this.canvas,alpha:!0}),this.renderer.setSize(e,t)}mount(e){e.appendChild(this.canvas)}dispose(){try{this.renderer.dispose()}catch{}this.canvas.parentElement&&this.canvas.parentElement.removeChild(this.canvas)}setSize(e,t){this.renderer.setSize(e,t),this.camera.left=e/-2,this.camera.right=e/2,this.camera.top=t/2,this.camera.bottom=t/-2,this.camera.updateProjectionMatrix()}syncScene(e){this.renderOrder=0;const t=new Set;this.reconcileNode(e,t);for(const[i,r]of this.meshMap.entries())t.has(i)||(this.scene.remove(r),r.geometry.dispose(),r.material instanceof d.Material&&r.material.dispose(),this.meshMap.delete(i))}reconcileNode(e,t){if(e.type==="BOX"){t.add(e.element);let i=this.meshMap.get(e.element);if(i)console.log("[V2] 기존 매쉬 재사용:",e.element);else{console.log("[V2] 매쉬 신규 생성:",e.element);const r=new d.PlaneGeometry(1,1),c=new d.MeshBasicMaterial({transparent:!0});i=new d.Mesh(r,c),this.scene.add(i),this.meshMap.set(e.element,i)}this.updateMeshProperties(i,e);for(const r of e.children)this.reconcileNode(r,t)}}updateMeshProperties(e,t){console.log(`[V2] 업데이트 중인 매쉬 ID: ${e.uuid}, 마스크: ${t.dirtyMask}`);const{rect:i,styles:r}=t,c=this.renderer.domElement.width,y=this.renderer.domElement.height;e.scale.set(i.width,i.height,1);const T=.001;this.renderOrder++,e.position.set(i.x-c/2+i.width/2,-i.y+y/2-i.height/2,r.zIndex+this.renderOrder*T);const l=e.material,u=r.backgroundColor;let w=u,M=1;if(u==="transparent"||u==="rgba(0, 0, 0, 0)")w="#ffffff",M=0;else if(u.startsWith("rgba")){const m=u.match(/[\d.]+/g);if(m&&m.length>=4){const O=m[0],C=m[1],k=m[2];M=parseFloat(m[3]),w=`rgb(${O}, ${C}, ${k})`}}const S=r.opacity*M;l.color.set(w),l.opacity=S,l.transparent=S<1,t.dirtyMask&p&&console.log(" -> 위치/크기만 업데이트됨"),t.dirtyMask&g&&console.log(" -> 스타일만 업데이트됨")}render(){this.renderer.render(this.scene,this.camera)}}function v(n,e=p|g){if(n.tagName==="SCRIPT"||n.tagName==="STYLE")return null;const t=n.getBoundingClientRect(),i={x:t.x+window.scrollX,y:t.y+window.scrollY,width:t.width,height:t.height},r=window.getComputedStyle(n),c={backgroundColor:r.backgroundColor,opacity:parseFloat(r.opacity),zIndex:parseInt(r.zIndex,10)||0},y=[];for(const T of n.children){const l=v(T);l&&y.push(l)}return{type:"BOX",element:n,rect:i,styles:c,dirtyMask:e,children:y}}class D{constructor(e,t){s(this,"target");s(this,"renderer");s(this,"observer");s(this,"isDomDirty",!1);s(this,"isRunning",!1);s(this,"pendingMask",f);s(this,"mutationTimer",null);s(this,"cssTimer",null);s(this,"onTransitionFinished",e=>{this.target.contains(e.target)&&this.mutationTimer===null&&(this.cssTimer&&clearTimeout(this.cssTimer),this.pendingMask|=p|g,this.cssTimer=window.setTimeout(()=>{this.isDomDirty=!0,this.cssTimer=null},50))});s(this,"onWindowResize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight),this.isDomDirty=!0});s(this,"renderLoop",()=>{this.isRunning&&(this.isDomDirty&&this.forceUpdateScene(),this.renderer.render(),requestAnimationFrame(this.renderLoop))});this.target=e,this.renderer=t,this.observer=new MutationObserver(i=>{let r=f;for(const c of i)c.type==="childList"?r|=b:c.type==="attributes"&&(c.attributeName==="style"||c.attributeName==="class")&&(r|=p|g);if(r!==f){if(this.pendingMask|=r,r&b){this.clearTimers(),console.log("Structural Change detected"),this.isDomDirty=!0;return}this.mutationTimer&&clearTimeout(this.mutationTimer),this.mutationTimer=window.setTimeout(()=>{this.mutationTimer=null,this.isDomDirty=!0},200)}})}start(){this.isRunning||(this.isRunning=!0,this.observer.observe(this.target,{childList:!0,subtree:!0,attributes:!0,characterData:!0}),this.target.addEventListener("transitionend",this.onTransitionFinished),this.target.addEventListener("animationend",this.onTransitionFinished),window.addEventListener("resize",this.onWindowResize),this.forceUpdateScene(),this.renderLoop())}stop(){this.isRunning=!1,this.observer.disconnect(),this.clearTimers(),this.target.removeEventListener("transitionend",this.onTransitionFinished),this.target.removeEventListener("animationend",this.onTransitionFinished),window.removeEventListener("resize",this.onWindowResize)}clearTimers(){this.mutationTimer&&(clearTimeout(this.mutationTimer),this.mutationTimer=null),this.cssTimer&&(clearTimeout(this.cssTimer),this.cssTimer=null)}forceUpdateScene(){this.isDomDirty=!1;const e=v(this.target,this.pendingMask);e&&this.renderer.syncScene(e),this.pendingMask=f}}class R{constructor(e){s(this,"renderer");s(this,"syncer");s(this,"target");const t=document.querySelector(e);if(!t)throw new Error(`[Mirage] Element not found: ${e}`);this.target=t,this.renderer=new E,this.renderer.mount(document.body),this.syncer=new D(this.target,this.renderer)}start(){this.syncer.start()}stop(){this.syncer.stop(),this.renderer.dispose()}}o.Mirage=R,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/dist/{core → src/core}/Syncer.d.ts

@@ -5,6 +5,7 @@ export declare class Syncer {
     private observer;
     private isDomDirty;
     private isRunning;
+    private pendingMask;
     private mutationTimer;
     private cssTimer;
     constructor(target: HTMLElement, renderer: Renderer);

package/dist/src/dom/Extractor.d.ts

@@ -0,0 +1,2 @@
+import { SceneNode } from '../types';
+export declare function extractSceneGraph(element: HTMLElement, initialMask?: number): SceneNode | null;

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export { Mirage } from './core/Mirage';

package/dist/{renderer → src/renderer}/Renderer.d.ts

@@ -5,12 +5,13 @@ export declare class Renderer {
     private readonly camera;
     private readonly renderer;
     private renderOrder;
+    private meshMap;
     constructor();
     mount(parent: HTMLElement): void;
     dispose(): void;
     setSize(width: number, height: number): void;
-    private clearScene;
-    private buildScene;
     syncScene(graphNode: SceneNode): void;
+    private reconcileNode;
+    private updateMeshProperties;
     render(): void;
 }

package/dist/{types → src/types}/index.d.ts

@@ -11,7 +11,14 @@ export interface BoxStyles {
 }
 export interface SceneNode {
     type: "BOX";
+    element: HTMLElement;
     rect: NodeRect;
     styles: BoxStyles;
+    dirtyMask: number;
     children: SceneNode[];
 }
+export declare const DIRTY_NONE = 0;
+export declare const DIRTY_RECT: number;
+export declare const DIRTY_STYLE: number;
+export declare const DIRTY_ZINDEX: number;
+export declare const DIRTY_STRUCTURE: number;

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "mirage-engine",
-  "version": "0.1.1",
+  "version": "0.2.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./dist/mirage-engine.umd.js",
   "module": "./dist/mirage-engine.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dltldn333/MirageEngine"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/dist/dom/Extractor.d.ts

@@ -1,2 +0,0 @@
-import { SceneNode } from '../types';
-export declare function extractSceneGraph(element: HTMLElement): SceneNode | null;