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 Clapton = (function (exports) {
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 Bold {
79
- constructor(attributes = {}) {
80
- this.children = [];
81
- this.attributes = attributes;
82
- }
64
+ class BlockQuote extends Base {
83
65
  get renderWrapper() {
84
- return `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
85
- }
86
- add(child) {
87
- this.children.push(child);
88
- return this;
66
+ return `<blockquote ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</blockquote>`;
89
67
  }
90
68
  }
91
69
 
92
- class Button {
93
- constructor(attributes = {}) {
94
- this.attributes = attributes;
95
- this.children = [];
96
- }
97
- add(child) {
98
- this.children.push(child);
99
- return this;
100
- }
70
+ class Div extends Base {
101
71
  get renderWrapper() {
102
- return `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
103
- }
104
- add_action(event, klass, fn, options = {}) {
105
- this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
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 Bold 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 `<strong ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</strong>`;
123
79
  }
124
80
  }
125
81
 
126
- class Code {
127
- constructor(attributes = {}) {
128
- this.children = [];
129
- this.attributes = attributes;
130
- }
82
+ class Button 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 `<button ${htmlAttributes(this.attributes)}>${this.children.map(child => child.renderWrapper).join("")}</button>`;
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 Clapton = (function (exports) {
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 Clapton = (function (exports) {
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 Clapton = (function (exports) {
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,48 +284,41 @@ var Clapton = (function (exports) {
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
  exports.BlockQuote = BlockQuote;
452
300
  exports.Bold = Bold;
453
- exports.Box = Box;
454
301
  exports.Button = Button;
455
- exports.Checkbox = Checkbox;
456
302
  exports.Code = Code;
457
303
  exports.Component = Component;
458
- exports.DateTimeField = DateTimeField;
304
+ exports.Div = Div;
459
305
  exports.Element = Element;
460
306
  exports.Embed = Embed;
461
307
  exports.Emphasis = Emphasis;
462
308
  exports.Form = Form;
463
309
  exports.Heading = Heading;
464
310
  exports.Image = Image;
311
+ exports.Input = Input;
465
312
  exports.Link = Link;
466
313
  exports.List = List;
467
314
  exports.ListItem = ListItem;
468
315
  exports.OrderedList = OrderedList;
469
316
  exports.Paragraph = Paragraph;
470
317
  exports.Quote = Quote;
471
- exports.RadioButton = RadioButton;
472
318
  exports.Select = Select;
473
319
  exports.Span = Span;
474
320
  exports.Text = Text;
475
321
  exports.TextArea = TextArea;
476
- exports.TextField = TextField;
477
322
 
478
323
  return exports;
479
324