lib/clapton/javascripts/dist/components-for-test.js in clapton-0.0.17 vs lib/clapton/javascripts/dist/components-for-test.js in clapton-0.0.18
- old
+ new
@@ -46,12 +46,12 @@
class BlockQuote {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</blockquote>`;
+ get renderWrapper() {
+ return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -64,12 +64,12 @@
}
add(child) {
this.children.push(child);
return this;
}
- get render() {
- return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</div>`;
+ get renderWrapper() {
+ return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
}
add_action(eventType, stateName, fnName, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
return this;
}
@@ -78,12 +78,12 @@
class Bold {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</strong>`;
+ get renderWrapper() {
+ return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -96,12 +96,12 @@
}
add(child) {
this.children.push(child);
return this;
}
- get render() {
- return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</button>`;
+ get renderWrapper() {
+ return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
}
@@ -112,11 +112,11 @@
this.state = state;
this.attributes = attributes;
this.attribute = attribute;
this.attributes["data-attribute"] = attribute;
}
- get render() {
+ get renderWrapper() {
return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
@@ -126,12 +126,12 @@
class Code {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</code>`;
+ get renderWrapper() {
+ return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -143,11 +143,11 @@
this.state = state;
this.attribute = attribute;
this.attributes = attributes;
this.attributes["data-attribute"] = attribute;
}
- get render() {
+ get renderWrapper() {
const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
@@ -183,12 +183,12 @@
constructor(type, attributes = {}) {
this.children = [];
this.type = type;
this.attributes = attributes;
}
- get render() {
- return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</${this.type}>`;
+ get renderWrapper() {
+ return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -196,22 +196,22 @@
class Embed {
constructor(html) {
this.html = html;
}
- get render() {
+ get renderWrapper() {
return this.html;
}
}
class Emphasis {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</em>`;
+ get renderWrapper() {
+ return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -220,12 +220,12 @@
class Form {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</form>`;
+ get renderWrapper() {
+ return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -235,12 +235,12 @@
constructor(level, attributes = {}) {
this.children = [];
this.level = level;
this.attributes = attributes;
}
- get render() {
- return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</h${this.level}>`;
+ get renderWrapper() {
+ return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -251,23 +251,23 @@
this.children = [];
this.attributes = attributes;
this.src = src;
this.alt = alt;
}
- get render() {
+ get renderWrapper() {
return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
}
}
class Link {
constructor(href, attributes = {}) {
this.children = [];
this.attributes = attributes;
this.href = href;
}
- get render() {
- return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</a>`;
+ get renderWrapper() {
+ return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -280,12 +280,12 @@
}
add(child) {
this.children.push(child);
return this;
}
- get render() {
- return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</li>`;
+ get renderWrapper() {
+ return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
}
}
class List {
constructor(attributes = {}) {
@@ -294,12 +294,12 @@
}
add(child) {
this.children.push(child);
return this;
}
- get render() {
- return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ul>`;
+ get renderWrapper() {
+ return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
}
}
class OrderedList {
constructor(attributes = {}) {
@@ -308,22 +308,22 @@
}
add(child) {
this.children.push(child);
return this;
}
- get render() {
- return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</ol>`;
+ get renderWrapper() {
+ return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
}
}
class Paragraph {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</p>`;
+ get renderWrapper() {
+ return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -332,12 +332,12 @@
class Quote {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</q>`;
+ get renderWrapper() {
+ return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -348,11 +348,11 @@
this.state = state;
this.attributes = attributes;
this.attribute = attribute;
this.attributes["data-attribute"] = attribute;
}
- get render() {
+ get renderWrapper() {
return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
@@ -365,22 +365,22 @@
this.options = options;
this.state = state;
this.attribute = attribute;
this.attributes = attributes;
}
- get render() {
- return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.render).join("")}</select>`;
+ get renderWrapper() {
+ return `<select ${htmlAttributes(this.attributes)}>${this.options.map(option => `<option value='${option.value}'${option.value === this.state[this.attribute] ? " selected" : ""}>${option.text}</option>`).join("")}${this.children.map(child => child.renderWrapper).join("")}</select>`;
}
}
class Span {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
- get render() {
- return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}</span>`;
+ get renderWrapper() {
+ return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
}
add(child) {
this.children.push(child);
return this;
}
@@ -391,11 +391,11 @@
this.state = state;
this.attributes = attributes;
this.attribute = attribute;
this.attributes["data-attribute"] = attribute;
}
- get render() {
+ get renderWrapper() {
return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
@@ -404,11 +404,11 @@
class Text {
constructor(value) {
this.value = value;
}
- get render() {
+ get renderWrapper() {
return this.value;
}
}
class TextArea {
@@ -416,11 +416,11 @@
this.state = state;
this.attributes = attributes;
this.attribute = attribute;
this.attributes["data-attribute"] = attribute;
}
- get render() {
+ get renderWrapper() {
return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
@@ -467,11 +467,11 @@
}
h(...props) {
return new Clapton.Heading(props[0], props[1]);
}
img(...props) {
- return new Clapton.Image(props[0], props[1]);
+ return new Clapton.Image(props[0], props[1], props[2]);
}
a(...props) {
return new Clapton.Link(props[0], props[1]);
}
li(...props) {
@@ -512,14 +512,18 @@
class Component {
constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
this._state = state;
this.id = id;
this._errors = errors;
- this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
this._c = new Presets();
}
get render() {
- return this._root.render;
+ return new Box({});
+ }
+ get renderWrapper() {
+ const root = this.render;
+ root.attributes = { ...root.attributes, data: { ...root.attributes.data, component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } };
+ return root.renderWrapper;
}
}
exports.BlockQuote = BlockQuote;
exports.Bold = Bold;