@playcanvas/web-components 0.1.1 → 0.1.3

package/dist/pwc.js

@@ -80,6 +80,11 @@
                     this.app.assets.add(asset);
                 }
             });
+            // Get all pc-material elements that are direct children of the pc-app element
+            const materialElements = this.querySelectorAll(':scope > pc-material');
+            Array.from(materialElements).forEach((materialElement) => {
+                materialElement.createMaterial();
+            });
             // Load assets before starting the application
             this.app.preload(() => {
                 // Start the application
@@ -224,7 +229,7 @@
             const app = await appElement.getApplication();
             // Create a new entity
             this.entity = new playcanvas.Entity(this._name, app);
-            if (this.parentElement && this.parentElement.tagName === 'pc-entity' && this.parentElement.entity) {
+            if (this.parentElement && this.parentElement.tagName.toLowerCase() === 'pc-entity' && this.parentElement.entity) {
                 this.parentElement.entity.addChild(this.entity);
             }
             else {
@@ -459,6 +464,10 @@
         get preload() {
             return this._preload;
         }
+        static get(id) {
+            const assetElement = document.querySelector(`pc-asset[id="${id}"]`);
+            return assetElement === null || assetElement === void 0 ? void 0 : assetElement.asset;
+        }
         static get observedAttributes() {
             return ['preload'];
         }
@@ -580,21 +589,39 @@
          */
         constructor() {
             super('camera');
-            this._clearColor = new playcanvas.Color(1, 1, 1, 1);
+            this._clearColor = new playcanvas.Color(0.75, 0.75, 0.75, 1);
+            this._clearColorBuffer = true;
+            this._clearDepthBuffer = true;
+            this._clearStencilBuffer = false;
+            this._cullFaces = true;
             this._farClip = 1000;
+            this._flipFaces = false;
             this._fov = 45;
+            this._frustumCulling = true;
             this._nearClip = 0.1;
             this._orthographic = false;
             this._orthoHeight = 10;
+            this._priority = 0;
+            this._rect = new playcanvas.Vec4(0, 0, 1, 1);
+            this._scissorRect = new playcanvas.Vec4(0, 0, 1, 1);
         }
         getInitialComponentData() {
             return {
                 clearColor: this._clearColor,
+                clearColorBuffer: this._clearColorBuffer,
+                clearDepthBuffer: this._clearDepthBuffer,
+                clearStencilBuffer: this._clearStencilBuffer,
+                cullFaces: this._cullFaces,
                 farClip: this._farClip,
+                flipFaces: this._flipFaces,
                 fov: this._fov,
+                frustumCulling: this._frustumCulling,
                 nearClip: this._nearClip,
-                projection: this._orthographic ? playcanvas.PROJECTION_ORTHOGRAPHIC : playcanvas.PROJECTION_PERSPECTIVE,
-                orthoHeight: this._orthoHeight
+                orthographic: this._orthographic,
+                orthoHeight: this._orthoHeight,
+                priority: this._priority,
+                rect: this._rect,
+                scissorRect: this._scissorRect
             };
         }
         /**
@@ -621,6 +648,74 @@
         get clearColor() {
             return this._clearColor;
         }
+        /**
+         * Sets the clear color buffer of the camera.
+         * @param value - The clear color buffer.
+         */
+        set clearColorBuffer(value) {
+            this._clearColorBuffer = value;
+            if (this.component) {
+                this.component.clearColorBuffer = value;
+            }
+        }
+        /**
+         * Gets the clear color buffer of the camera.
+         * @returns The clear color buffer.
+         */
+        get clearColorBuffer() {
+            return this._clearColorBuffer;
+        }
+        /**
+         * Sets the clear depth buffer of the camera.
+         * @param value - The clear depth buffer.
+         */
+        set clearDepthBuffer(value) {
+            this._clearDepthBuffer = value;
+            if (this.component) {
+                this.component.clearDepthBuffer = value;
+            }
+        }
+        /**
+         * Gets the clear depth buffer of the camera.
+         * @returns The clear depth buffer.
+         */
+        get clearDepthBuffer() {
+            return this._clearDepthBuffer;
+        }
+        /**
+         * Sets the clear stencil buffer of the camera.
+         * @param value - The clear stencil buffer.
+         */
+        set clearStencilBuffer(value) {
+            this._clearStencilBuffer = value;
+            if (this.component) {
+                this.component.clearStencilBuffer = value;
+            }
+        }
+        /**
+         * Gets the clear stencil buffer of the camera.
+         * @returns The clear stencil buffer.
+         */
+        get clearStencilBuffer() {
+            return this._clearStencilBuffer;
+        }
+        /**
+         * Sets the cull faces of the camera.
+         * @param value - The cull faces.
+         */
+        set cullFaces(value) {
+            this._cullFaces = value;
+            if (this.component) {
+                this.component.cullFaces = value;
+            }
+        }
+        /**
+         * Gets the cull faces of the camera.
+         * @returns The cull faces.
+         */
+        get cullFaces() {
+            return this._cullFaces;
+        }
         /**
          * Sets the far clip distance of the camera.
          * @param value - The far clip distance.
@@ -638,6 +733,23 @@
         get farClip() {
             return this._farClip;
         }
+        /**
+         * Sets the flip faces of the camera.
+         * @param value - The flip faces.
+         */
+        set flipFaces(value) {
+            this._flipFaces = value;
+            if (this.component) {
+                this.component.flipFaces = value;
+            }
+        }
+        /**
+         * Gets the flip faces of the camera.
+         * @returns The flip faces.
+         */
+        get flipFaces() {
+            return this._flipFaces;
+        }
         /**
          * Sets the field of view of the camera.
          * @param value - The field of view.
@@ -655,6 +767,23 @@
         get fov() {
             return this._fov;
         }
+        /**
+         * Sets the frustum culling of the camera.
+         * @param value - The frustum culling.
+         */
+        set frustumCulling(value) {
+            this._frustumCulling = value;
+            if (this.component) {
+                this.component.frustumCulling = value;
+            }
+        }
+        /**
+         * Gets the frustum culling of the camera.
+         * @returns The frustum culling.
+         */
+        get frustumCulling() {
+            return this._frustumCulling;
+        }
         /**
          * Sets the near clip distance of the camera.
          * @param value - The near clip distance.
@@ -706,8 +835,76 @@
         get orthoHeight() {
             return this._orthoHeight;
         }
+        /**
+         * Sets the priority of the camera.
+         * @param value - The priority.
+         */
+        set priority(value) {
+            this._priority = value;
+            if (this.component) {
+                this.component.priority = value;
+            }
+        }
+        /**
+         * Gets the priority of the camera.
+         * @returns The priority.
+         */
+        get priority() {
+            return this._priority;
+        }
+        /**
+         * Sets the rect of the camera.
+         * @param value - The rect.
+         */
+        set rect(value) {
+            this._rect = value;
+            if (this.component) {
+                this.component.rect = value;
+            }
+        }
+        /**
+         * Gets the rect of the camera.
+         * @returns The rect.
+         */
+        get rect() {
+            return this._rect;
+        }
+        /**
+         * Sets the scissor rect of the camera.
+         * @param value - The scissor rect.
+         */
+        set scissorRect(value) {
+            this._scissorRect = value;
+            if (this.component) {
+                this.component.scissorRect = value;
+            }
+        }
+        /**
+         * Gets the scissor rect of the camera.
+         * @returns The scissor rect.
+         */
+        get scissorRect() {
+            return this._scissorRect;
+        }
         static get observedAttributes() {
-            return [...super.observedAttributes, 'clear-color', 'near-clip', 'far-clip', 'fov', 'orthographic', 'ortho-height'];
+            return [
+                ...super.observedAttributes,
+                'clear-color',
+                'clear-color-buffer',
+                'clear-depth-buffer',
+                'clear-stencil-buffer',
+                'cull-faces',
+                'far-clip',
+                'flip-faces',
+                'fov',
+                'frustum-culling',
+                'near-clip',
+                'orthographic',
+                'ortho-height',
+                'priority',
+                'rect',
+                'scissor-rect'
+            ];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             super.attributeChangedCallback(name, _oldValue, newValue);
@@ -715,12 +912,30 @@
                 case 'clear-color':
                     this.clearColor = parseColor(newValue);
                     break;
+                case 'clear-color-buffer':
+                    this.clearColorBuffer = newValue !== 'false';
+                    break;
+                case 'clear-depth-buffer':
+                    this.clearDepthBuffer = newValue !== 'false';
+                    break;
+                case 'clear-stencil-buffer':
+                    this.clearStencilBuffer = newValue !== 'false';
+                    break;
+                case 'cull-faces':
+                    this.cullFaces = newValue !== 'false';
+                    break;
                 case 'far-clip':
                     this.farClip = parseFloat(newValue);
                     break;
+                case 'flip-faces':
+                    this.flipFaces = newValue !== 'true';
+                    break;
                 case 'fov':
                     this.fov = parseFloat(newValue);
                     break;
+                case 'frustum-culling':
+                    this.frustumCulling = newValue !== 'false';
+                    break;
                 case 'near-clip':
                     this.nearClip = parseFloat(newValue);
                     break;
@@ -730,6 +945,15 @@
                 case 'ortho-height':
                     this.orthoHeight = parseFloat(newValue);
                     break;
+                case 'priority':
+                    this.priority = parseFloat(newValue);
+                    break;
+                case 'rect':
+                    this.rect = parseVec4(newValue);
+                    break;
+                case 'scissor-rect':
+                    this.scissorRect = parseVec4(newValue);
+                    break;
             }
         }
     }
@@ -877,16 +1101,12 @@
             await super.connectedCallback();
             this.component._text._material.useFog = true;
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         getInitialComponentData() {
             return {
                 anchor: this._anchor,
                 autoWidth: this._autoWidth,
                 color: this._color,
-                fontAsset: this.getAsset().id,
+                fontAsset: AssetElement.get(this._asset).id,
                 fontSize: this._fontSize,
                 lineHeight: this._lineHeight,
                 pivot: this._pivot,
@@ -914,7 +1134,7 @@
         }
         set asset(value) {
             this._asset = value;
-            const asset = this.getAsset();
+            const asset = AssetElement.get(value);
             if (this.component && asset) {
                 this.component.fontAsset = asset.id;
             }
@@ -1065,13 +1285,9 @@
             super('gsplat');
             this._asset = '';
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         getInitialComponentData() {
             return {
-                asset: this.getAsset()
+                asset: AssetElement.get(this._asset)
             };
         }
         /**
@@ -1083,7 +1299,7 @@
         }
         set asset(value) {
             this._asset = value;
-            const asset = this.getAsset();
+            const asset = AssetElement.get(value);
             if (this.component && asset) {
                 this.component.asset = asset;
             }
@@ -1375,6 +1591,120 @@
     }
     customElements.define('pc-light', LightComponentElement);
 
+    /**
+     * Represents a material in the PlayCanvas engine.
+     */
+    class MaterialElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._diffuse = new playcanvas.Color(1, 1, 1);
+            this._diffuseMap = '';
+            this._metalnessMap = '';
+            this._normalMap = '';
+            this._roughnessMap = '';
+            this.material = null;
+        }
+        createMaterial() {
+            this.material = new playcanvas.StandardMaterial();
+            this.material.glossInvert = true;
+            this.material.useMetalness = true;
+            this.material.diffuse = this._diffuse;
+            this.diffuseMap = this._diffuseMap;
+            this.metalnessMap = this._metalnessMap;
+            this.normalMap = this._normalMap;
+            this.roughnessMap = this._roughnessMap;
+            this.material.update();
+        }
+        disconnectedCallback() {
+            if (this.material) {
+                this.material.destroy();
+                this.material = null;
+            }
+        }
+        setMap(map, property) {
+            if (this.material) {
+                const asset = AssetElement.get(map);
+                if (asset) {
+                    if (asset.loaded) {
+                        this.material[property] = asset.resource;
+                        this.material[property].anisotropy = 4;
+                    }
+                    else {
+                        asset.once('load', () => {
+                            this.material[property] = asset.resource;
+                            this.material[property].anisotropy = 4;
+                            this.material.update();
+                        });
+                    }
+                }
+            }
+        }
+        set diffuse(value) {
+            this._diffuse = value;
+            if (this.material) {
+                this.material.diffuse = value;
+            }
+        }
+        get diffuse() {
+            return this._diffuse;
+        }
+        set diffuseMap(value) {
+            this._diffuseMap = value;
+            this.setMap(value, 'diffuseMap');
+        }
+        get diffuseMap() {
+            return this._diffuseMap;
+        }
+        set metalnessMap(value) {
+            this._metalnessMap = value;
+            this.setMap(value, 'metalnessMap');
+        }
+        get metalnessMap() {
+            return this._metalnessMap;
+        }
+        set normalMap(value) {
+            this._normalMap = value;
+            this.setMap(value, 'normalMap');
+        }
+        get normalMap() {
+            return this._normalMap;
+        }
+        set roughnessMap(value) {
+            this._roughnessMap = value;
+            this.setMap(value, 'glossMap');
+        }
+        get roughnessMap() {
+            return this._roughnessMap;
+        }
+        static get(id) {
+            const materialElement = document.querySelector(`pc-material[id="${id}"]`);
+            return materialElement === null || materialElement === void 0 ? void 0 : materialElement.material;
+        }
+        static get observedAttributes() {
+            return ['diffuse', 'diffuse-map', 'metalness-map', 'normal-map', 'roughness-map'];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            switch (name) {
+                case 'diffuse':
+                    this.diffuse = parseColor(newValue);
+                    break;
+                case 'diffuse-map':
+                    this.diffuseMap = newValue;
+                    break;
+                case 'metalness-map':
+                    this.metalnessMap = newValue;
+                    break;
+                case 'normal-map':
+                    this.normalMap = newValue;
+                    break;
+                case 'roughness-map':
+                    this.roughnessMap = newValue;
+                    break;
+            }
+        }
+    }
+    customElements.define('pc-material', MaterialElement);
+
     /**
      * Represents a render component in the PlayCanvas engine.
      *
@@ -1383,9 +1713,14 @@
     class RenderComponentElement extends ComponentElement {
         constructor() {
             super('render');
-            this._type = 'asset';
             this._castShadows = true;
+            this._material = '';
             this._receiveShadows = true;
+            this._type = 'asset';
+        }
+        async connectedCallback() {
+            await super.connectedCallback();
+            this.material = this._material;
         }
         getInitialComponentData() {
             return {
@@ -1435,6 +1770,23 @@
         get castShadows() {
             return this._castShadows;
         }
+        /**
+         * Sets the material of the render component.
+         * @param value - The id of the material asset to use.
+         */
+        set material(value) {
+            this._material = value;
+            if (this.component) {
+                this.component.material = MaterialElement.get(value);
+            }
+        }
+        /**
+         * Gets the id of the material asset used by the render component.
+         * @returns The id of the material asset.
+         */
+        get material() {
+            return this._material;
+        }
         /**
          * Sets the receive shadows flag of the render component.
          * @param value - The receive shadows flag.
@@ -1453,20 +1805,23 @@
             return this._receiveShadows;
         }
         static get observedAttributes() {
-            return [...super.observedAttributes, 'cast-shadows', 'receive-shadows', 'type'];
+            return [...super.observedAttributes, 'cast-shadows', 'material', 'receive-shadows', 'type'];
         }
         attributeChangedCallback(name, _oldValue, newValue) {
             super.attributeChangedCallback(name, _oldValue, newValue);
             switch (name) {
-                case 'type':
-                    this.type = newValue;
-                    break;
                 case 'cast-shadows':
                     this.castShadows = newValue !== 'false';
                     break;
+                case 'material':
+                    this.material = newValue;
+                    break;
                 case 'receive-shadows':
                     this.receiveShadows = newValue !== 'false';
                     break;
+                case 'type':
+                    this.type = newValue;
+                    break;
             }
         }
     }
@@ -1660,91 +2015,275 @@
     customElements.define('pc-rigidbody', RigidBodyComponentElement);
 
     /**
-     * Represents a script component in the PlayCanvas engine.
+     * Represents a screen component in the PlayCanvas engine.
      *
      * @category Components
      */
-    class ScriptComponentElement extends ComponentElement {
+    class ScreenComponentElement extends ComponentElement {
         constructor() {
-            super('script');
+            super('screen');
+            this._screenSpace = false;
+            this._resolution = new playcanvas.Vec2(640, 320);
+            this._referenceResolution = new playcanvas.Vec2(640, 320);
+            this._priority = 0;
+            this._blend = false;
+            this._scaleBlend = 0.5;
+        }
+        getInitialComponentData() {
+            return {
+                priority: this._priority,
+                referenceResolution: this._referenceResolution,
+                resolution: this._resolution,
+                scaleBlend: this._scaleBlend,
+                scaleMode: this._blend ? playcanvas.SCALEMODE_BLEND : playcanvas.SCALEMODE_NONE,
+                screenSpace: this._screenSpace
+            };
         }
         /**
-         * Gets the script component.
-         * @returns The script component.
+         * Gets the screen component.
+         * @returns The screen component.
          */
         get component() {
             return super.component;
         }
+        set priority(value) {
+            this._priority = value;
+            if (this.component) {
+                this.component.priority = this._priority;
+            }
+        }
+        get priority() {
+            return this._priority;
+        }
+        set referenceResolution(value) {
+            this._referenceResolution = value;
+            if (this.component) {
+                this.component.referenceResolution = this._referenceResolution;
+            }
+        }
+        get referenceResolution() {
+            return this._referenceResolution;
+        }
+        set resolution(value) {
+            this._resolution = value;
+            if (this.component) {
+                this.component.resolution = this._resolution;
+            }
+        }
+        get resolution() {
+            return this._resolution;
+        }
+        set scaleBlend(value) {
+            this._scaleBlend = value;
+            if (this.component) {
+                this.component.scaleBlend = this._scaleBlend;
+            }
+        }
+        get scaleBlend() {
+            return this._scaleBlend;
+        }
+        set blend(value) {
+            this._blend = value;
+            if (this.component) {
+                this.component.scaleMode = this._blend ? playcanvas.SCALEMODE_BLEND : playcanvas.SCALEMODE_NONE;
+            }
+        }
+        get blend() {
+            return this._blend;
+        }
+        set screenSpace(value) {
+            this._screenSpace = value;
+            if (this.component) {
+                this.component.screenSpace = this._screenSpace;
+            }
+        }
+        get screenSpace() {
+            return this._screenSpace;
+        }
+        static get observedAttributes() {
+            return [
+                ...super.observedAttributes,
+                'blend',
+                'screen-space',
+                'resolution',
+                'reference-resolution',
+                'priority',
+                'scale-blend'
+            ];
+        }
+        attributeChangedCallback(name, _oldValue, newValue) {
+            super.attributeChangedCallback(name, _oldValue, newValue);
+            switch (name) {
+                case 'priority':
+                    this.priority = parseInt(newValue);
+                    break;
+                case 'reference-resolution':
+                    this.referenceResolution = parseVec2(newValue);
+                    break;
+                case 'resolution':
+                    this.resolution = parseVec2(newValue);
+                    break;
+                case 'scale-blend':
+                    this.scaleBlend = parseFloat(newValue);
+                    break;
+                case 'blend':
+                    this.blend = this.hasAttribute('blend');
+                    break;
+                case 'screen-space':
+                    this.screenSpace = this.hasAttribute('screen-space');
+                    break;
+            }
+        }
     }
-    customElements.define('pc-scripts', ScriptComponentElement);
+    customElements.define('pc-screen', ScreenComponentElement);
 
     /**
-     * Represents a script in the PlayCanvas engine.
+     * Represents a script component in the PlayCanvas engine.
+     *
+     * @category Components
      */
-    class ScriptElement extends HTMLElement {
+    class ScriptComponentElement extends ComponentElement {
         constructor() {
-            super(...arguments);
-            this._attributes = {};
-            this._enabled = true;
-            this._name = '';
-            this._script = null;
+            super('script');
+            // Create mutation observer to watch for child script elements
+            this.observer = new MutationObserver(this.handleMutations.bind(this));
+            this.observer.observe(this, {
+                childList: true
+            });
+            // Listen for script attribute and enable changes
+            this.addEventListener('scriptattributeschange', this.handleScriptAttributesChange.bind(this));
+            this.addEventListener('scriptenablechange', this.handleScriptEnableChange.bind(this));
         }
         async connectedCallback() {
-            var _a, _b, _c;
-            const appElement = this.closest('pc-app');
-            if (!appElement) {
-                console.error(`${this.tagName.toLowerCase()} should be a descendant of pc-app`);
+            await super.connectedCallback();
+            // Handle initial script elements
+            this.querySelectorAll(':scope > pc-script').forEach((scriptElement) => {
+                const scriptName = scriptElement.getAttribute('name');
+                const attributes = scriptElement.getAttribute('attributes');
+                if (scriptName) {
+                    this.createScript(scriptName, attributes);
+                }
+            });
+        }
+        applyAttributes(script, attributes) {
+            try {
+                // Parse the attributes string into an object and set them on the script
+                const attributesObject = attributes ? JSON.parse(attributes) : {};
+                Object.assign(script, attributesObject);
+            }
+            catch (error) {
+                console.error(`Error parsing attributes JSON string ${attributes}:`, error);
+            }
+        }
+        handleScriptAttributesChange(event) {
+            const scriptElement = event.target;
+            const scriptName = scriptElement.getAttribute('name');
+            if (!scriptName || !this.component)
                 return;
+            const script = this.component.get(scriptName);
+            if (script) {
+                this.applyAttributes(script, event.detail.attributes);
             }
-            await appElement.getApplication();
-            const scriptAttributes = this.getAttribute('attributes');
-            if (scriptAttributes) {
-                try {
-                    this._attributes = JSON.parse(scriptAttributes);
-                }
-                catch (e) {
-                    console.error('Failed to parse script attributes:', e);
-                }
+        }
+        handleScriptEnableChange(event) {
+            const scriptElement = event.target;
+            const scriptName = scriptElement.getAttribute('name');
+            if (!scriptName || !this.component)
+                return;
+            const script = this.component.get(scriptName);
+            if (script) {
+                script.enabled = event.detail.enabled;
             }
-            // When the script is created, initialize it with the necessary attributes
-            (_a = this.scriptsElement) === null || _a === void 0 ? void 0 : _a.component.on(`create:${this._name}`, (scriptInstance) => {
-                Object.assign(scriptInstance, this._attributes);
-            });
-            this._script = (_c = (_b = this.scriptsElement) === null || _b === void 0 ? void 0 : _b.component.create(this._name, { preloading: false })) !== null && _c !== void 0 ? _c : null;
         }
-        disconnectedCallback() {
-            var _a;
-            (_a = this.scriptsElement) === null || _a === void 0 ? void 0 : _a.component.destroy(this._name);
+        createScript(name, attributes) {
+            if (!this.component)
+                return null;
+            this.component.on(`create:${name}`, (script) => {
+                this.applyAttributes(script, attributes);
+            });
+            return this.component.create(name);
         }
-        refreshAttributes() {
-            if (this._script) {
-                Object.entries(this._attributes).forEach(([name, value]) => {
-                    if (this._script && name in this._script) {
-                        this._script[name] = value;
+        destroyScript(name) {
+            if (!this.component)
+                return;
+            this.component.destroy(name);
+        }
+        handleMutations(mutations) {
+            for (const mutation of mutations) {
+                // Handle added nodes
+                mutation.addedNodes.forEach((node) => {
+                    if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                        const scriptName = node.getAttribute('name');
+                        const attributes = node.getAttribute('attributes');
+                        if (scriptName) {
+                            this.createScript(scriptName, attributes);
+                        }
+                    }
+                });
+                // Handle removed nodes
+                mutation.removedNodes.forEach((node) => {
+                    if (node instanceof HTMLElement && node.tagName.toLowerCase() === 'pc-script') {
+                        const scriptName = node.getAttribute('name');
+                        if (scriptName) {
+                            this.destroyScript(scriptName);
+                        }
                     }
                 });
             }
         }
-        get scriptsElement() {
-            const scriptsElement = this.parentElement;
-            if (!(scriptsElement instanceof ScriptComponentElement)) {
-                console.warn('pc-script must be a direct child of a pc-scripts element');
-                return null;
-            }
-            return scriptsElement;
+        disconnectedCallback() {
+            var _a;
+            this.observer.disconnect();
+            (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
         }
+        /**
+         * Gets the script component.
+         * @returns The script component.
+         */
+        get component() {
+            return super.component;
+        }
+    }
+    customElements.define('pc-scripts', ScriptComponentElement);
+
+    /**
+     * Represents a script in the PlayCanvas engine.
+     */
+    class ScriptElement extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._attributes = '{}';
+            this._enabled = true;
+            this._name = '';
+        }
+        /**
+         * Sets the attributes of the script.
+         * @param value - The attributes of the script.
+         */
         set scriptAttributes(value) {
-            this._attributes = JSON.parse(value);
-            this.refreshAttributes();
+            this._attributes = value;
+            this.dispatchEvent(new CustomEvent('scriptattributeschange', {
+                detail: { attributes: value },
+                bubbles: true
+            }));
         }
+        /**
+         * Gets the attributes of the script.
+         * @returns The attributes of the script.
+         */
         get scriptAttributes() {
-            return JSON.stringify(this._attributes);
+            return this._attributes;
         }
+        /**
+         * Sets the enabled state of the script.
+         * @param value - The enabled state of the script.
+         */
         set enabled(value) {
             this._enabled = value;
-            if (this._script) {
-                this._script.enabled = value;
-            }
+            this.dispatchEvent(new CustomEvent('scriptenablechange', {
+                detail: { enabled: value },
+                bubbles: true
+            }));
         }
         /**
          * Gets the enabled state of the script.
@@ -1881,7 +2420,7 @@
             }
         }
     }
-    customElements.define('pc-sound', SoundComponentElement);
+    customElements.define('pc-sounds', SoundComponentElement);
 
     /**
      * Represents a sound slot in the PlayCanvas engine.
@@ -1903,10 +2442,6 @@
              */
             this.soundSlot = null;
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         async connectedCallback() {
             const appElement = this.closest('pc-app');
             if (!appElement) {
@@ -1948,7 +2483,7 @@
             var _a;
             this._asset = value;
             if (this.soundSlot) {
-                const id = (_a = this.getAsset()) === null || _a === void 0 ? void 0 : _a.id;
+                const id = (_a = AssetElement.get(value)) === null || _a === void 0 ? void 0 : _a.id;
                 if (id) {
                     this.soundSlot.asset = id;
                 }
@@ -2129,7 +2664,7 @@
             }
         }
     }
-    customElements.define('pc-sound-slot', SoundSlotElement);
+    customElements.define('pc-sound', SoundSlotElement);
 
     /**
      * Represents a model in the PlayCanvas engine.
@@ -2152,12 +2687,8 @@
                 this.asset = asset;
             }
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         _loadModel() {
-            const asset = this.getAsset();
+            const asset = AssetElement.get(this._asset);
             if (!asset) {
                 return;
             }
@@ -2385,10 +2916,6 @@
             this.asset = this.getAttribute('asset') || '';
             this.solidColor = this.hasAttribute('solid-color');
         }
-        getAsset() {
-            const assetElement = document.querySelector(`pc-asset[id="${this._asset}"]`);
-            return assetElement.asset;
-        }
         getScene() {
             const appElement = this.closest('pc-app');
             if (!appElement) {
@@ -2404,7 +2931,7 @@
             this._asset = value;
             const scene = this.getScene();
             if (scene) {
-                const asset = this.getAsset();
+                const asset = AssetElement.get(value);
                 if (asset) {
                     if (asset.resource) {
                         scene.envAtlas = asset.resource;
@@ -2498,11 +3025,13 @@
     exports.GSplatComponentElement = GSplatComponentElement;
     exports.LightComponentElement = LightComponentElement;
     exports.ListenerComponentElement = ListenerComponentElement;
+    exports.MaterialElement = MaterialElement;
     exports.ModelElement = ModelElement;
     exports.ModuleElement = ModuleElement;
     exports.RenderComponentElement = RenderComponentElement;
     exports.RigidBodyComponentElement = RigidBodyComponentElement;
     exports.SceneElement = SceneElement;
+    exports.ScreenComponentElement = ScreenComponentElement;
     exports.ScriptComponentElement = ScriptComponentElement;
     exports.ScriptElement = ScriptElement;
     exports.SkyElement = SkyElement;