mol_jsx_lib 0.0.57 → 0.0.60

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 (17) hide show
  1. package/node.d.ts +2 -0
  2. package/node.deps.json +1 -1
  3. package/node.esm.js +17 -1
  4. package/node.esm.js.map +1 -1
  5. package/node.js +17 -1
  6. package/node.js.map +1 -1
  7. package/node.test.js +51 -33
  8. package/node.test.js.map +1 -1
  9. package/package.json +1 -1
  10. package/web.d.ts +2 -0
  11. package/web.deps.json +1 -1
  12. package/web.esm.js +17 -1
  13. package/web.esm.js.map +1 -1
  14. package/web.js +17 -1
  15. package/web.js.map +1 -1
  16. package/web.test.js +34 -32
  17. package/web.test.js.map +1 -1
package/web.test.js CHANGED
@@ -325,50 +325,52 @@ var $;
325
325
  const Button = (props, target) => {
326
326
  return $mol_jsx("button", { title: props.hint }, target());
327
327
  };
328
- const dom = $mol_jsx(Button, { id: "/foo", hint: "click me" }, () => 'hey!');
329
- $mol_assert_equal(dom.outerHTML, '<button title="click me" id="/foo">hey!</button>');
328
+ const dom = $mol_jsx(Button, { id: "foo", hint: "click me" }, () => 'hey!');
329
+ $mol_assert_equal(dom.outerHTML, '<button title="click me" id="foo" class="Button">hey!</button>');
330
330
  },
331
331
  'Nested guid generation'() {
332
332
  const Foo = () => {
333
333
  return $mol_jsx("div", null,
334
- $mol_jsx(Bar, { id: "/bar" },
335
- $mol_jsx("img", { id: "/icon" })));
334
+ $mol_jsx(Bar, { id: "bar" },
335
+ $mol_jsx("img", { id: "icon" })));
336
336
  };
337
337
  const Bar = (props, icon) => {
338
- return $mol_jsx("span", null, icon);
338
+ return $mol_jsx("span", null,
339
+ icon,
340
+ $mol_jsx("i", { id: "label" }));
339
341
  };
340
- const dom = $mol_jsx(Foo, { id: "/foo" });
341
- $mol_assert_equal(dom.outerHTML, '<div id="/foo"><span id="/foo/bar"><img id="/foo/icon"></span></div>');
342
+ const dom = $mol_jsx(Foo, { id: "foo" });
343
+ $mol_assert_equal(dom.outerHTML, '<div id="foo" class="Foo"><span id="foo/bar" class="Foo_bar Bar"><img id="foo/icon" class="Foo_icon"><i id="foo/bar/label" class="Foo_bar_label Bar_label"></i></span></div>');
342
344
  },
343
345
  'Fail on non unique ids'() {
344
346
  const App = () => {
345
347
  return $mol_jsx("div", null,
346
- $mol_jsx("span", { id: "/bar" }),
347
- $mol_jsx("span", { id: "/bar" }));
348
+ $mol_jsx("span", { id: "bar" }),
349
+ $mol_jsx("span", { id: "bar" }));
348
350
  };
349
- $mol_assert_fail(() => $mol_jsx(App, { id: "/foo" }), 'JSX already has tag with id "/foo/bar"');
351
+ $mol_assert_fail(() => $mol_jsx(App, { id: "foo" }), 'JSX already has tag with id "foo/bar"');
350
352
  },
351
353
  'Owner based guid generationn'() {
352
354
  const Foo = () => {
353
355
  return $mol_jsx("div", null,
354
- $mol_jsx(Bar, { id: "/bar", icon: () => $mol_jsx("img", { id: "/icon" }) }));
356
+ $mol_jsx(Bar, { id: "middle", icon: () => $mol_jsx("img", { id: "icon" }) }));
355
357
  };
356
358
  const Bar = (props) => {
357
359
  return $mol_jsx("span", null, props.icon());
358
360
  };
359
- const dom = $mol_jsx(Foo, { id: "/foo" });
360
- $mol_assert_equal(dom.outerHTML, '<div id="/foo"><span id="/foo/bar"><img id="/foo/icon"></span></div>');
361
+ const dom = $mol_jsx(Foo, { id: "app" });
362
+ $mol_assert_equal(dom.outerHTML, '<div id="app" class="Foo"><span id="app/middle" class="Foo_middle Bar"><img id="app/icon" class="Foo_icon"></span></div>');
361
363
  },
362
364
  'Fail on same ids from different caller'() {
363
365
  const Foo = () => {
364
366
  return $mol_jsx("div", null,
365
- $mol_jsx("img", { id: "/icon" }),
366
- $mol_jsx(Bar, { id: "/bar", icon: () => $mol_jsx("img", { id: "/icon" }) }));
367
+ $mol_jsx("img", { id: "icon" }),
368
+ $mol_jsx(Bar, { id: "bar", icon: () => $mol_jsx("img", { id: "icon" }) }));
367
369
  };
368
370
  const Bar = (props) => {
369
371
  return $mol_jsx("span", null, props.icon());
370
372
  };
371
- $mol_assert_fail(() => $mol_jsx(Foo, { id: "/foo" }), 'JSX already has tag with id "/foo/icon"');
373
+ $mol_assert_fail(() => $mol_jsx(Foo, { id: "foo" }), 'JSX already has tag with id "foo/icon"');
372
374
  },
373
375
  });
374
376
  })($ || ($ = {}));
@@ -394,9 +396,9 @@ var $;
394
396
  (function ($) {
395
397
  $mol_test({
396
398
  'Attach to document'() {
397
- const doc = $mol_dom_parse('<html><body id="/foo"></body></html>');
398
- $mol_jsx_attach(doc, () => $mol_jsx("body", { id: "/foo" }, "bar"));
399
- $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">bar</body></html>');
399
+ const doc = $mol_dom_parse('<html><body id="foo"></body></html>');
400
+ $mol_jsx_attach(doc, () => $mol_jsx("body", { id: "foo" }, "bar"));
401
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo">bar</body></html>');
400
402
  },
401
403
  });
402
404
  })($ || ($ = {}));
@@ -1448,10 +1450,10 @@ var $;
1448
1450
  this.childNodes.join('-'));
1449
1451
  }
1450
1452
  }
1451
- const dom = $mol_jsx(Foo, { id: "/foo", title: "bar" },
1453
+ const dom = $mol_jsx(Foo, { id: "foo", title: "bar" },
1452
1454
  "xxx",
1453
1455
  123);
1454
- $mol_assert_equal(dom.outerHTML, '<div id="/foo">bar xxx-123</div>');
1456
+ $mol_assert_equal(dom.outerHTML, '<div id="foo" class="Foo">bar xxx-123</div>');
1455
1457
  },
1456
1458
  'View by element'() {
1457
1459
  let br;
@@ -1459,7 +1461,7 @@ var $;
1459
1461
  class Br extends $mol_jsx_view {
1460
1462
  render() {
1461
1463
  br = this;
1462
- return $mol_jsx("br", { id: "/foo" });
1464
+ return $mol_jsx("br", { id: "foo" });
1463
1465
  }
1464
1466
  }
1465
1467
  class Brr extends $mol_jsx_view {
@@ -1472,7 +1474,7 @@ var $;
1472
1474
  $mol_assert_equal(Brr.of($mol_jsx(Brr, null)), brr);
1473
1475
  },
1474
1476
  async 'Attached view rerender'() {
1475
- const doc = $mol_dom_parse('<html><body id="/foo"></body></html>');
1477
+ const doc = $mol_dom_parse('<html><body id="foo"></body></html>');
1476
1478
  class Title extends $mol_jsx_view {
1477
1479
  value(next = 'foo') { return next; }
1478
1480
  render() {
@@ -1482,13 +1484,13 @@ var $;
1482
1484
  __decorate([
1483
1485
  $mol_mem
1484
1486
  ], Title.prototype, "value", null);
1485
- const dom = $mol_jsx_attach(doc, () => $mol_jsx(Title, { id: "/foo" }));
1487
+ const dom = $mol_jsx_attach(doc, () => $mol_jsx(Title, { id: "foo" }));
1486
1488
  const title = Title.of(dom);
1487
1489
  $mol_assert_equal(title.ownerDocument, doc);
1488
- $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">foo</body></html>');
1490
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo" class="Title">foo</body></html>');
1489
1491
  title.value('bar');
1490
1492
  await $mol_wire_fiber.sync();
1491
- $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">bar</body></html>');
1493
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo" class="Title">bar</body></html>');
1492
1494
  },
1493
1495
  async 'Nested bound views'($) {
1494
1496
  class Task extends $mol_jsx_view {
@@ -1508,23 +1510,23 @@ var $;
1508
1510
  class App extends $mol_jsx_view {
1509
1511
  title(next = '') { return next; }
1510
1512
  render() {
1511
- return ($mol_jsx(List, null, this.title() && $mol_jsx(Task, { id: "/task", title: next => this.title(next) })));
1513
+ return ($mol_jsx(List, null, this.title() && $mol_jsx(Task, { id: "task", title: next => this.title(next) })));
1512
1514
  }
1513
1515
  }
1514
1516
  __decorate([
1515
1517
  $mol_mem
1516
1518
  ], App.prototype, "title", null);
1517
- const doc = $mol_dom_parse('<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root"></body></html>');
1518
- const root = $.$mol_jsx_attach(doc, () => $mol_jsx(App, { "$": $, id: "/root" }));
1519
- $mol_assert_equal($mol_dom_serialize(doc.documentElement), '<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root" class="list"></body></html>');
1519
+ const doc = $mol_dom_parse('<html xmlns="http://www.w3.org/1999/xhtml"><body id="root"></body></html>');
1520
+ const root = $.$mol_jsx_attach(doc, () => $mol_jsx(App, { "$": $, id: "root" }));
1521
+ $mol_assert_equal($mol_dom_serialize(doc.documentElement), '<html xmlns="http://www.w3.org/1999/xhtml"><body id="root" class="list App List"></body></html>');
1520
1522
  App.of(root).title('barbar');
1521
1523
  await $mol_wire_fiber.sync();
1522
1524
  $mol_assert_equal(Task.of(root.firstElementChild).title(), 'barbar');
1523
- $mol_assert_equal(doc.documentElement.outerHTML, '<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root" class="list"><h1 id="/root/task">barbar</h1></body></html>');
1525
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html xmlns="http://www.w3.org/1999/xhtml"><body id="root" class="list App List"><h1 id="root/task" class="App_task Task">barbar</h1></body></html>');
1524
1526
  Task.of(root.firstElementChild).title('foofoo');
1525
1527
  await $mol_wire_fiber.sync();
1526
1528
  $mol_assert_equal(App.of(root).title(), 'foofoo');
1527
- $mol_assert_equal(doc.documentElement.outerHTML, '<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root" class="list"><h1 id="/root/task">foofoo</h1></body></html>');
1529
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html xmlns="http://www.w3.org/1999/xhtml"><body id="root" class="list App List"><h1 id="root/task" class="App_task Task">foofoo</h1></body></html>');
1528
1530
  },
1529
1531
  });
1530
1532
  })($ || ($ = {}));