JSFiddle - React, Tailwind, and code Playground

by proticm

HTML

<script src="https://cdn.jsdelivr.net/npm/@plazarjs/core/dist/core.min.js"></script>

JavaScript

var childDef = pz.define('my-child-component', { 
  ownerType: 'component', 
  template: '<div>My first child Component!</div>', 
  renderTo: 'root', 
  style: 'color: red' 
  // other configs 
}); 

pz.define('my-component', { 
  ownerType: 'component', 
  // autoLoad: true, --- If we uncomment this line, load method invocation is not required. The component will load it self upon creation. 
  template: '<div>My first Component!</div>', 
  renderTo: 'body' 
  // If we uncomment the components array, we do not need to add the child component dynamically. It will be added upon the parent component creation. 
  // Also, declarative approach can be used in case when we have our component stored globally, otherwise, components array should contain the actual definitions. 
  /*components: [{ 
    type: 'my-child-component' 
  }]*/ 
  // other configs 
}).create().load();

// Create method invocation is not a requirement here. We use it only in case when we want to create a component immediately after defining it. 
// We can create the component later by doing the following: 
// var componentDef = pz.getDefinitionOf('my-component'); 
// componentDef.create().load(); 

var myComp = pz.getInstanceOf('my-component'); 
// in case when we have our definition stored globally, we can use a declarative approach: 
myComp.addChild({ 
  type: 'my-child-component' 
  // other configs 
}); 
// otherwise, we must use the actual definition as a parameter: 
// myComp.addChild(childDef);