corecmp
v0.8.0
Published
Web components framework
Downloads
9
Readme
CoreCMP
CoreCMP is a framework to create web apps based on HTML and CSS
How it works
The idea behind CoreCMP is to create a tree construct that describes a web app. A tree does not represent the final page, it is more like a blueprint of a page structure.
Lets start with a simple example.
We want to render a todo list as follows
<div class="todo">
<div class="editor">
<form class="create-form">
<input class="create-input" type="text" size="200">
<button class="submit-button">Add item</button>
</form>
</div>
<div class="listing">
<ul class="todo-list">
<li class="todo-item">
<span class="item-id">001</span>
<span class="item-title">First todo item</span>
<span class="item-status">open</span>
</li>
<li class="todo-item">
<span class="item-id">002</span>
<span class="item-title">Second todo item</span>
<span class="item-status">progress</span>
</li>
<li class="todo-item">
<span class="item-id">003</span>
<span class="item-title">Third todo item</span>
<span class="item-status">done</span>
</li>
</ul>
</div>
</div>
In CoreCMP topic, this means we create a class for each Node. Don't worry, it sounds lots of work, but it isn't. First lets break the structure down to a simple tree.
Todo
Editor
CreateForm
CreateInput
SubmitButton
Listing
TodoList
ItemId
ItemTitle
ItemStatus
This would be our tree structure. Each html node has become a tree item. It is not necessary to repeat a list of nodes in the tree structure. This will be done during the rendering process.
Next, we create a class of each of the tree's node and connect them so that we get a tree like in the example above.
A CoreCMP class is a javascript class which describes one node of the structure tree.
Lets take the last node first.
class ItemStatus extends Node {
create () {
this.tag = 'span'
}
render (data) {
return this.createNode(data.status)
}
}
Here we go, the first node class is done.
Lets go through the class. The class name is identical with the tag's css class. ItemStatus
<=> item-status
CoreCMP uses the class name to generate a snake cased css class name. (There is an option to define an additional class name.)
The class has two methods. create()
creates a tree node and describes the node itself and render()
renders the node and returns it as html. The call to createNode()
is important, it creates the html node and introduces it into the tree.
If we call the node it renders a html tag.
const node = new ItemStatus()
const html = node.render({
status: 'open'
})
// html == <span class="item-status">open</span>
Next, add ItemID and ItemTitle node.
class ItemId extends Node {
create () {
this.tag = 'span'
}
render (data) {
return this.createNode(data.id)
}
}
class ItemTitle extends Node {
create () {
this.tag = 'span'
}
render (data) {
return this.createNode(data.title)
}
}
Lets go one level up, the TodoList node, which contains the three node we already created.
The TodoList node extends the internal List
class which renders a <ul> <li>
list.
class TodoList extends List {
create () {
this.childNodes(ItemId, ItemTitle, ItemStatus)
}
}
The method childNodes()
defines a node's child node(s). It adds 1 or more node classes (Not instances!). If we call render()
we get the node's html.
The class TodoList
has its own render()
method, we do not overwrite it here. A list's render()
method expects an array of objects as its argument. It walks through the array and creates one instance of the child node(s) for each array element wrapped by <li class="list-item"></li>
const node = new TodoList()
const html = node.render([{
id: '001',
title: 'First todo item',
status: 'open'
}, {
id: '002',
title: 'Second todo item',
status: 'progress'
}, {
id: '003',
title: 'Third todo item',
status: 'done'
}])
The rendered html:
<ul class="todo-list">
<li class="list-item">
<span class="item-id">001</span>
<span class="item-title">First todo item</span>
<span class="item-status">open</span>
</li>
<li class="list-item">
<span class="item-id">002</span>
<span class="item-title">Second todo item</span>
<span class="item-status">progress</span>
</li>
<li class="list-item">
<span class="item-id">003</span>
<span class="item-title">Third todo item</span>
<span class="item-status">done</span>
</li>
</ul>
The Listing
class is a container for the TodoList
.
class Listing extends Node
create () {
this.childNodes(TodoList)
}
The tag
property and render()
method is not necessary here. It is defined in the Node
core class.
Default tag: div
Render method default:
render (data) {
return this.createNode(data)
}
The Editor
element, a html form to add new items. Lets do it all at once, we go through the tree from the end up to Editor
.
Editor
CreateForm
CreateInput
SubmitButton
class CreateInput extends Node {
create () {
this.tag = 'input'
this.isVoidTag = true // Avoid rendering a closing tag
}
}
class SubmitButton extends Node {
create () {
this.tag = 'button'
}
render (data) {
return this.createElement('Add item') // Use a string as data
}
}
class CreateForm extends Node {
create () {
this.tag = 'form'
this.childNodes(CreateInput, SubmitButton)
}
}
class Editor extends Node {
create () {
this.tag = 'form'
this.childNodes(CreateForm)
}
}
Last node! The Todo
node, our root node.
class Todo extends Node {
create () {
this.childNodes(Editor, Listing)
}
}
Lets test it.
const node = new Todo()
const html = node.render([{
id: '001'
title: 'First todo item'
status: 'open'
},{
id: '002'
title: 'Second todo item'
status: 'progress'
}, {
id: '003'
title: 'Third todo item'
status: 'done'
}])
The rendered html is the same as the first example above.
IDs
All objects in in blueprint have an unique id. This list shows the prefixes.
| Prefix | Object |
| ------ | ------------ |
| c
| Component |
| t'
| Tags |
| l
| TagList |
| e
| Templates |
| g
| Signals |
| s
| States |
| a
| Actions |
| d
| DataServices |