clapton 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +23 -105
  3. data/lib/clapton/javascripts/dist/c-for-test.js +129 -271
  4. data/lib/clapton/javascripts/dist/c.js +129 -271
  5. data/lib/clapton/javascripts/dist/client.js +3 -0
  6. data/lib/clapton/javascripts/dist/components-for-test.js +90 -245
  7. data/lib/clapton/javascripts/dist/components.js +89 -241
  8. data/lib/clapton/javascripts/src/c-base.ts +45 -33
  9. data/lib/clapton/javascripts/src/channel/clapton-channel.js +1 -0
  10. data/lib/clapton/javascripts/src/client.ts +1 -0
  11. data/lib/clapton/javascripts/src/components/{box.ts → base.ts} +6 -8
  12. data/lib/clapton/javascripts/src/components/block-quote.spec.ts +1 -1
  13. data/lib/clapton/javascripts/src/components/block-quote.ts +2 -14
  14. data/lib/clapton/javascripts/src/components/bold.ts +2 -14
  15. data/lib/clapton/javascripts/src/components/button.ts +2 -19
  16. data/lib/clapton/javascripts/src/components/code.ts +2 -14
  17. data/lib/clapton/javascripts/src/components/component.ts +28 -2
  18. data/lib/clapton/javascripts/src/components/{box.spec.ts → div.spec.ts} +8 -8
  19. data/lib/clapton/javascripts/src/components/div.ts +8 -0
  20. data/lib/clapton/javascripts/src/components/element.ts +3 -9
  21. data/lib/clapton/javascripts/src/components/emphasis.ts +2 -14
  22. data/lib/clapton/javascripts/src/components/form.ts +2 -14
  23. data/lib/clapton/javascripts/src/components/heading.ts +4 -10
  24. data/lib/clapton/javascripts/src/components/image.spec.ts +2 -2
  25. data/lib/clapton/javascripts/src/components/image.ts +3 -14
  26. data/lib/clapton/javascripts/src/components/input.spec.ts +16 -0
  27. data/lib/clapton/javascripts/src/components/{datetime-field.ts → input.ts} +9 -11
  28. data/lib/clapton/javascripts/src/components/link.spec.ts +6 -6
  29. data/lib/clapton/javascripts/src/components/link.ts +3 -16
  30. data/lib/clapton/javascripts/src/components/list-item.ts +2 -14
  31. data/lib/clapton/javascripts/src/components/list.ts +2 -14
  32. data/lib/clapton/javascripts/src/components/ordered-list.ts +2 -14
  33. data/lib/clapton/javascripts/src/components/paragraph.ts +2 -14
  34. data/lib/clapton/javascripts/src/components/quote.ts +2 -14
  35. data/lib/clapton/javascripts/src/components/select.ts +3 -5
  36. data/lib/clapton/javascripts/src/components/span.ts +2 -14
  37. data/lib/clapton/javascripts/src/components/text-area.ts +4 -9
  38. data/lib/clapton/javascripts/src/components-for-test.ts +3 -6
  39. data/lib/clapton/javascripts/src/components.ts +3 -6
  40. data/lib/clapton/javascripts/src/dom/update-component.ts +1 -0
  41. data/lib/clapton/test_helper/base.rb +4 -4
  42. data/lib/clapton/version.rb +1 -1
  43. metadata +7 -14
  44. data/lib/clapton/javascripts/dist/c +0 -559
  45. data/lib/clapton/javascripts/dist/c-base.js +0 -589
  46. data/lib/clapton/javascripts/src/components/checkbox.spec.ts +0 -16
  47. data/lib/clapton/javascripts/src/components/checkbox.ts +0 -23
  48. data/lib/clapton/javascripts/src/components/datetime-field.spec.ts +0 -16
  49. data/lib/clapton/javascripts/src/components/radio-button.spec.ts +0 -16
  50. data/lib/clapton/javascripts/src/components/radio-button.ts +0 -23
  51. data/lib/clapton/javascripts/src/components/text-field.spec.ts +0 -16
  52. data/lib/clapton/javascripts/src/components/text-field.ts +0 -23
@@ -43,155 +43,63 @@ var c = (function () {
43
43
  .replace(/'/g, "'");
44
44
  };
45
45
 
46
- class BlockQuote {
46
+ class Base {
47
47
  constructor(attributes = {}) {
48
48
  this.children = [];
49
49
  this.attributes = attributes;
50
50
  }
51
- get renderWrapper() {
52
- return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
53
- }
54
51
  add(child) {
55
52
  this.children.push(child);
56
53
  return this;
57
54
  }
58
- }
59
-
60
- class Box {
61
- constructor(attributes = {}) {
62
- this.children = [];
63
- this.attributes = attributes;
64
- }
65
- add(child) {
66
- this.children.push(child);
67
- return this;
68
- }
69
- get renderWrapper() {
70
- return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
71
- }
72
55
  add_action(eventType, stateName, fnName, options = {}) {
73
56
  this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${eventType}->${stateName}#${fnName}@${options.debounce || 0}`;
74
57
  return this;
75
58
  }
59
+ get renderWrapper() {
60
+ return "";
61
+ }
76
62
  }
77
63
 
78
- class Button {
79
- constructor(attributes = {}) {
80
- this.attributes = attributes;
81
- this.children = [];
82
- }
83
- add(child) {
84
- this.children.push(child);
85
- return this;
86
- }
64
+ class BlockQuote extends Base {
87
65
  get renderWrapper() {
88
- return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
89
- }
90
- add_action(event, klass, fn, options = {}) {
91
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
92
- return this;
66
+ return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
93
67
  }
94
68
  }
95
69
 
96
- class Bold {
97
- constructor(attributes = {}) {
98
- this.children = [];
99
- this.attributes = attributes;
100
- }
70
+ class Div extends Base {
101
71
  get renderWrapper() {
102
- return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
103
- }
104
- add(child) {
105
- this.children.push(child);
106
- return this;
72
+ return `<div ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</div>`;
107
73
  }
108
74
  }
109
75
 
110
- class Checkbox {
111
- constructor(state, attribute, attributes = {}) {
112
- this.state = state;
113
- this.attributes = attributes;
114
- this.attribute = attribute;
115
- this.attributes["data-attribute"] = attribute;
116
- }
76
+ class Button extends Base {
117
77
  get renderWrapper() {
118
- return `<input type='checkbox' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
119
- }
120
- add_action(event, klass, fn, options = {}) {
121
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
122
- return this;
78
+ return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
123
79
  }
124
80
  }
125
81
 
126
- class Code {
127
- constructor(attributes = {}) {
128
- this.children = [];
129
- this.attributes = attributes;
130
- }
82
+ class Bold extends Base {
131
83
  get renderWrapper() {
132
- return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
133
- }
134
- add(child) {
135
- this.children.push(child);
136
- return this;
84
+ return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
137
85
  }
138
86
  }
139
87
 
140
- class DateTimeField {
141
- constructor(state, attribute, attributes = {}) {
142
- this.attributes = {};
143
- this.state = state;
144
- this.attribute = attribute;
145
- this.attributes = attributes;
146
- this.attributes["data-attribute"] = attribute;
147
- }
88
+ class Code extends Base {
148
89
  get renderWrapper() {
149
- const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
150
- return `<input type='datetime-local' ${htmlAttributes(this.attributes)} value='${value}'/>`;
151
- }
152
- add_action(event, klass, fn, options = {}) {
153
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
154
- return this;
155
- }
156
- datetime_local_value(value) {
157
- if (!value) {
158
- return "";
159
- }
160
- const date = new Date(value);
161
- date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
162
- let month = date.getMonth() + 1;
163
- let day = date.getDate();
164
- let hours = date.getHours();
165
- let minutes = date.getMinutes();
166
- if (month < 10) {
167
- month = `0${month}`;
168
- }
169
- if (day < 10) {
170
- day = `0${day}`;
171
- }
172
- if (hours < 10) {
173
- hours = `0${hours}`;
174
- }
175
- if (minutes < 10) {
176
- minutes = `0${minutes}`;
177
- }
178
- return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
90
+ return `<code ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</code>`;
179
91
  }
180
92
  }
181
93
 
182
- class Element {
94
+ class Element extends Base {
183
95
  constructor(type, attributes = {}) {
96
+ super(attributes);
184
97
  this.children = [];
185
98
  this.type = type;
186
- this.attributes = attributes;
187
99
  }
188
100
  get renderWrapper() {
189
101
  return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</${this.type}>`;
190
102
  }
191
- add(child) {
192
- this.children.push(child);
193
- return this;
194
- }
195
103
  }
196
104
 
197
105
  class Embed {
@@ -203,187 +111,86 @@ var c = (function () {
203
111
  }
204
112
  }
205
113
 
206
- class Emphasis {
207
- constructor(attributes = {}) {
208
- this.children = [];
209
- this.attributes = attributes;
210
- }
114
+ class Emphasis extends Base {
211
115
  get renderWrapper() {
212
116
  return `<em ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</em>`;
213
117
  }
214
- add(child) {
215
- this.children.push(child);
216
- return this;
217
- }
218
118
  }
219
119
 
220
- class Form {
221
- constructor(attributes = {}) {
222
- this.children = [];
223
- this.attributes = attributes;
224
- }
120
+ class Form extends Base {
225
121
  get renderWrapper() {
226
122
  return `<form ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</form>`;
227
123
  }
228
- add(child) {
229
- this.children.push(child);
230
- return this;
231
- }
232
124
  }
233
125
 
234
- class Heading {
126
+ class Heading extends Base {
235
127
  constructor(level, attributes = {}) {
236
- this.children = [];
128
+ super(attributes);
237
129
  this.level = level;
238
- this.attributes = attributes;
239
130
  }
240
131
  get renderWrapper() {
241
132
  return `<h${this.level} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</h${this.level}>`;
242
133
  }
243
- add(child) {
244
- this.children.push(child);
245
- return this;
246
- }
247
134
  }
248
135
 
249
- class Image {
250
- constructor(src, alt, attributes = {}) {
251
- this.children = [];
252
- this.attributes = attributes;
253
- this.src = src;
254
- this.alt = alt;
255
- }
136
+ class Image extends Base {
256
137
  get renderWrapper() {
257
- return `<img src='${this.src}' alt='${this.alt}' ${htmlAttributes(this.attributes)}/>`;
138
+ return `<img ${htmlAttributes(this.attributes)}/>`;
258
139
  }
259
140
  }
260
141
 
261
- class Link {
262
- constructor(href, attributes = {}) {
263
- this.children = [];
264
- this.attributes = attributes;
265
- this.href = href;
266
- }
142
+ class Link extends Base {
267
143
  get renderWrapper() {
268
- return `<a href='${this.href}' ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
269
- }
270
- add(child) {
271
- this.children.push(child);
272
- return this;
144
+ return `<a ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</a>`;
273
145
  }
274
146
  }
275
147
 
276
- class ListItem {
277
- constructor(attributes = {}) {
278
- this.children = [];
279
- this.attributes = attributes;
280
- }
281
- add(child) {
282
- this.children.push(child);
283
- return this;
284
- }
148
+ class ListItem extends Base {
285
149
  get renderWrapper() {
286
150
  return `<li ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</li>`;
287
151
  }
288
152
  }
289
153
 
290
- class List {
291
- constructor(attributes = {}) {
292
- this.children = [];
293
- this.attributes = attributes;
294
- }
295
- add(child) {
296
- this.children.push(child);
297
- return this;
298
- }
154
+ class List extends Base {
299
155
  get renderWrapper() {
300
156
  return `<ul ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ul>`;
301
157
  }
302
158
  }
303
159
 
304
- class OrderedList {
305
- constructor(attributes = {}) {
306
- this.children = [];
307
- this.attributes = attributes;
308
- }
309
- add(child) {
310
- this.children.push(child);
311
- return this;
312
- }
160
+ class OrderedList extends Base {
313
161
  get renderWrapper() {
314
162
  return `<ol ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</ol>`;
315
163
  }
316
164
  }
317
165
 
318
- class Paragraph {
319
- constructor(attributes = {}) {
320
- this.children = [];
321
- this.attributes = attributes;
322
- }
166
+ class Paragraph extends Base {
323
167
  get renderWrapper() {
324
168
  return `<p ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</p>`;
325
169
  }
326
- add(child) {
327
- this.children.push(child);
328
- return this;
329
- }
330
170
  }
331
171
 
332
- class Quote {
333
- constructor(attributes = {}) {
334
- this.children = [];
335
- this.attributes = attributes;
336
- }
172
+ class Quote extends Base {
337
173
  get renderWrapper() {
338
174
  return `<q ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</q>`;
339
175
  }
340
- add(child) {
341
- this.children.push(child);
342
- return this;
343
- }
344
176
  }
345
177
 
346
- class RadioButton {
347
- constructor(state, attribute, attributes = {}) {
348
- this.state = state;
349
- this.attributes = attributes;
350
- this.attribute = attribute;
351
- this.attributes["data-attribute"] = attribute;
352
- }
353
- get renderWrapper() {
354
- return `<input type='radio' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
355
- }
356
- add_action(event, klass, fn, options = {}) {
357
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
358
- return this;
359
- }
360
- }
361
-
362
- class Select {
178
+ class Select extends Base {
363
179
  constructor(options = [], state, attribute, attributes = {}) {
364
- this.children = [];
180
+ super(attributes);
365
181
  this.options = options;
366
182
  this.state = state;
367
183
  this.attribute = attribute;
368
- this.attributes = attributes;
369
184
  }
370
185
  get renderWrapper() {
371
186
  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>`;
372
187
  }
373
188
  }
374
189
 
375
- class Span {
376
- constructor(attributes = {}) {
377
- this.children = [];
378
- this.attributes = attributes;
379
- }
190
+ class Span extends Base {
380
191
  get renderWrapper() {
381
192
  return `<span ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</span>`;
382
193
  }
383
- add(child) {
384
- this.children.push(child);
385
- return this;
386
- }
387
194
  }
388
195
 
389
196
  class Component {
@@ -393,7 +200,7 @@ var c = (function () {
393
200
  this._errors = errors;
394
201
  }
395
202
  get render() {
396
- return new Box({});
203
+ return new Div({});
397
204
  }
398
205
  get renderWrapper() {
399
206
  const root = this.render;
@@ -405,21 +212,66 @@ var c = (function () {
405
212
  }
406
213
  return root.renderWrapper;
407
214
  }
215
+ static effect(dependencies, callback) {
216
+ this._effects.push({ dependencies, callback });
217
+ }
218
+ get effects() {
219
+ return this.constructor._effects;
220
+ }
221
+ runEffects() {
222
+ this.effects.forEach((effect) => {
223
+ if (effect.dependencies.some((dependency) => this._state[dependency] !== undefined)) {
224
+ effect.callback(this._state);
225
+ }
226
+ });
227
+ }
228
+ runEffectOnFirstRender() {
229
+ this.effects.forEach((effect) => {
230
+ if (effect.dependencies.length === 0) {
231
+ effect.callback(this._state);
232
+ }
233
+ });
234
+ }
408
235
  }
236
+ Component._effects = [];
409
237
 
410
- class TextField {
238
+ class Input extends Base {
411
239
  constructor(state, attribute, attributes = {}) {
412
- this.state = state;
413
- this.attributes = attributes;
240
+ super(attributes);
414
241
  this.attribute = attribute;
242
+ this.state = state;
415
243
  this.attributes["data-attribute"] = attribute;
416
244
  }
417
245
  get renderWrapper() {
418
- return `<input type='text' ${htmlAttributes(this.attributes)} value='${this.state[this.attribute] || ""}'/>`;
246
+ let value = this.state[this.attribute];
247
+ if (this.attributes.type === "datetime-local" && value) {
248
+ value = this.datetime_local_value(value);
249
+ }
250
+ return `<input ${htmlAttributes(this.attributes)} value='${value || ""}'/>`;
419
251
  }
420
- add_action(event, klass, fn, options = {}) {
421
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
422
- return this;
252
+ datetime_local_value(value) {
253
+ if (!value) {
254
+ return "";
255
+ }
256
+ const date = new Date(value);
257
+ date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
258
+ let month = date.getMonth() + 1;
259
+ let day = date.getDate();
260
+ let hours = date.getHours();
261
+ let minutes = date.getMinutes();
262
+ if (month < 10) {
263
+ month = `0${month}`;
264
+ }
265
+ if (day < 10) {
266
+ day = `0${day}`;
267
+ }
268
+ if (hours < 10) {
269
+ hours = `0${hours}`;
270
+ }
271
+ if (minutes < 10) {
272
+ minutes = `0${minutes}`;
273
+ }
274
+ return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
423
275
  }
424
276
  }
425
277
 
@@ -432,31 +284,27 @@ var c = (function () {
432
284
  }
433
285
  }
434
286
 
435
- class TextArea {
287
+ class TextArea extends Base {
436
288
  constructor(state, attribute, attributes = {}) {
437
- this.state = state;
438
- this.attributes = attributes;
289
+ super(attributes);
439
290
  this.attribute = attribute;
291
+ this.state = state;
440
292
  this.attributes["data-attribute"] = attribute;
441
293
  }
442
294
  get renderWrapper() {
443
295
  return `<textarea ${htmlAttributes(this.attributes)}>${this.state[this.attribute] || ""}</textarea>`;
444
296
  }
445
- add_action(event, klass, fn, options = {}) {
446
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
447
- return this;
448
- }
449
297
  }
450
298
 
451
299
  const Clapton = {
452
- Box, Component, Text, TextField, Button, DateTimeField, BlockQuote, Checkbox, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, RadioButton, Select, Span, Embed, Bold, TextArea
300
+ Div, Component, Text, Input, Button, BlockQuote, Code, Element, Emphasis, Form, Heading, Image, Link, List, ListItem, OrderedList, Paragraph, Quote, Select, Span, Embed, Bold, TextArea
453
301
  };
454
302
 
455
- const bq = (...props) => {
303
+ const blockquote = (...props) => {
456
304
  return new Clapton.BlockQuote(...props);
457
305
  };
458
- const box = (...props) => {
459
- return new Clapton.Box(...props);
306
+ const div = (...props) => {
307
+ return new Clapton.Div(...props);
460
308
  };
461
309
  const b = (...props) => {
462
310
  return new Clapton.Bold(...props);
@@ -464,15 +312,9 @@ var c = (function () {
464
312
  const button = (...props) => {
465
313
  return new Clapton.Button(...props);
466
314
  };
467
- const check = (...props) => {
468
- return new Clapton.Checkbox(props[0], props[1], props[2]);
469
- };
470
315
  const code = (...props) => {
471
316
  return new Clapton.Code(...props);
472
317
  };
473
- const datetime = (...props) => {
474
- return new Clapton.DateTimeField(props[0], props[1], props[2]);
475
- };
476
318
  const el = (...props) => {
477
319
  return new Clapton.Element(props[0], props[1]);
478
320
  };
@@ -485,14 +327,29 @@ var c = (function () {
485
327
  const form = (...props) => {
486
328
  return new Clapton.Form(...props);
487
329
  };
488
- const h = (...props) => {
489
- return new Clapton.Heading(props[0], props[1]);
330
+ const h1 = (...props) => {
331
+ return new Clapton.Heading(1, props[1]);
332
+ };
333
+ const h2 = (...props) => {
334
+ return new Clapton.Heading(2, props[1]);
335
+ };
336
+ const h3 = (...props) => {
337
+ return new Clapton.Heading(3, props[1]);
338
+ };
339
+ const h4 = (...props) => {
340
+ return new Clapton.Heading(4, props[1]);
341
+ };
342
+ const h5 = (...props) => {
343
+ return new Clapton.Heading(5, props[1]);
344
+ };
345
+ const h6 = (...props) => {
346
+ return new Clapton.Heading(6, props[1]);
490
347
  };
491
348
  const img = (...props) => {
492
- return new Clapton.Image(props[0], props[1], props[2]);
349
+ return new Clapton.Image(props[0]);
493
350
  };
494
351
  const a = (...props) => {
495
- return new Clapton.Link(props[0], props[1]);
352
+ return new Clapton.Link(props[0]);
496
353
  };
497
354
  const li = (...props) => {
498
355
  return new Clapton.ListItem(...props);
@@ -509,9 +366,6 @@ var c = (function () {
509
366
  const q = (...props) => {
510
367
  return new Clapton.Quote(...props);
511
368
  };
512
- const radio = (...props) => {
513
- return new Clapton.RadioButton(props[0], props[1], props[2]);
514
- };
515
369
  const select = (...props) => {
516
370
  return new Clapton.Select(props[0], props[1], props[2]);
517
371
  };
@@ -522,27 +376,23 @@ var c = (function () {
522
376
  return new Clapton.TextArea(props[0], props[1], props[2]);
523
377
  };
524
378
  const input = (...props) => {
525
- return new Clapton.TextField(props[0], props[1], props[2]);
379
+ return new Clapton.Input(props[0], props[1], props[2]);
526
380
  };
527
381
  const text = (...props) => {
528
382
  return new Clapton.Text(props[0]);
529
383
  };
530
384
  const c = (name, ...props) => {
531
385
  switch (name) {
532
- case "bq":
533
- return bq(...props);
534
- case "box":
535
- return box(...props);
386
+ case "blockquote":
387
+ return blockquote(...props);
388
+ case "div":
389
+ return div(...props);
536
390
  case "b":
537
391
  return b(...props);
538
392
  case "button":
539
393
  return button(...props);
540
- case "check":
541
- return check(...props);
542
394
  case "code":
543
395
  return code(...props);
544
- case "datetime":
545
- return datetime(...props);
546
396
  case "el":
547
397
  return el(...props);
548
398
  case "embed":
@@ -551,8 +401,18 @@ var c = (function () {
551
401
  return em(...props);
552
402
  case "form":
553
403
  return form(...props);
554
- case "h":
555
- return h(...props);
404
+ case "h1":
405
+ return h1(...props);
406
+ case "h2":
407
+ return h2(...props);
408
+ case "h3":
409
+ return h3(...props);
410
+ case "h4":
411
+ return h4(...props);
412
+ case "h5":
413
+ return h5(...props);
414
+ case "h6":
415
+ return h6(...props);
556
416
  case "img":
557
417
  return img(...props);
558
418
  case "a":
@@ -567,8 +427,6 @@ var c = (function () {
567
427
  return p(...props);
568
428
  case "q":
569
429
  return q(...props);
570
- case "radio":
571
- return radio(...props);
572
430
  case "select":
573
431
  return select(...props);
574
432
  case "span":
@@ -580,7 +438,7 @@ var c = (function () {
580
438
  case "text":
581
439
  return text(...props);
582
440
  default:
583
- return new Clapton.Component(...props);
441
+ return new Clapton.Element(name, ...props);
584
442
  }
585
443
  };
586
444