BUILD //
WITH THE WEB

import { HTMLComponent } from '@modular-cube';
import config from './MyComponent.config.json' with { type: "json" };

export default class MyComponent extends HTMLComponent {
    // Define your variables
    
    // Called before the component is fully processed
    // Used to load configuration (HTML, CSS, behavior settings, etc.)
    async preProcess() {
        super.preProcess({ config });
    }
    
    // Called early in the component lifecycle
    // Can be used to set up initial properties or prepare internal state
    async toProcess() { 
        // Add early setup logic here
    }

    // Called after the component’s DOM has been created
    // Provides access to the shadow DOM for manipulation or event binding
    async atProcess(dom) { 
        // Add async logic here
    }
    
    // Enable your component config to call update every frame
    // Called every frame for continuous logic, animation, or state updates
    async inProcess(dom) {
        
    }
}
                

<!-- Text content interpolation -->
<p>Hello, ${this.word}!</p>

<!-- Attribute binding -->
<img alt="${this.title}"> 

<!-- Conditional class binding -->
<div class="card-${this.color}">...</div>

<!-- Inline style binding -->
<span style="color: '${this.color}';">Colored Text</span>

<!-- Rendered if color is "blue" -->
<divif="${this.color === 'blue'}">
    Blue
</div>
                

:host {
    --component-radius: ${this.borderRadius};
}

.card {
    border: 1px solid #ccc;
    border-radius: var(--component-radius);
    padding: 1rem;
    background: ${this.cardBackground};
}  
                

{
    "name": "MyComponent",
    "descripttion": "",

    "files": {
        "html": {
            "path": "./MyComponent.html"
        },

        "css": {
            "path": "./MyComponent.css"
        }
    },

    "behavior": {
        "apendToBody": false,
        "lazyLoading": false,
        "fps": 0,
        "debug": false
    }
}