j-component

import jComponent from 'j-component'; // Define a behavior const myBehavior = jComponent.behavior({ data: { behaviorText: 'Hello from behavior' }, methods: { logBehavior: function() { console.log('Behavior method called:', this.data.behaviorText); } } }); // Register a global component 'my-view' jComponent.register({ id: 'my-view', tagName: 'wx-view', template: '<div style="border: 1px solid green; padding: 10px;"><slot/></div>' }); // Register a custom component 'my-child-component' const childComponentId = jComponent.register({ tagName: 'my-child', template: '<my-view>Child Component Content: {{text}}</my-view>', properties: { text: String }, behaviors: [myBehavior], methods: { onTap: function() { console.log('Child tapped!'); this.triggerLifeTime('customEvent', { detail: 'data' }); } } }); // Register a root component that uses the child component const rootComponentId = jComponent.register({ template: '<my-child id="myChild" text="Initial Text"></my-child>', usingComponents: { 'my-child': childComponentId }, ready: function() { const child = this.querySelector('#myChild'); if (child) { child.instance.logBehavior(); child.setData({ text: 'Updated Text from Parent' }, () => { console.log('Child data updated.'); }); // Simulate an event child.dispatchEvent('touchstart', { touches: [{ x: 0, y: 0 }] }); } } }); // Create an instance of the root component const rootComponentInstance = jComponent.create(rootComponentId); // Append the component's DOM to the document body (for browser environments) document.body.appendChild(rootComponentInstance.dom); console.log('Root Component JSON:', rootComponentInstance.toJSON());