mol_jsx_lib 0.0.57 → 0.0.58

package/node.test.js

@@ -818,7 +818,7 @@ var $;
     $.$mol_jsx_frag = '';
     function $mol_jsx(Elem, props, ...childNodes) {
         const id = props && props.id || '';
-        const guid = $.$mol_jsx_prefix + id;
+        const guid = id ? $.$mol_jsx_prefix ? $.$mol_jsx_prefix + '/' + id : id : $.$mol_jsx_prefix;
         if (Elem && $.$mol_jsx_booked) {
             if ($.$mol_jsx_booked.has(id)) {
                 $mol_fail(new Error(`JSX already has tag with id ${JSON.stringify(guid)}`));
@@ -2808,50 +2808,50 @@ var $;
             const Button = (props, target) => {
                 return $mol_jsx("button", { title: props.hint }, target());
             };
-            const dom = $mol_jsx(Button, { id: "/foo", hint: "click me" }, () => 'hey!');
-            $mol_assert_equal(dom.outerHTML, '<button title="click me" id="/foo">hey!</button>');
+            const dom = $mol_jsx(Button, { id: "foo", hint: "click me" }, () => 'hey!');
+            $mol_assert_equal(dom.outerHTML, '<button title="click me" id="foo">hey!</button>');
         },
         'Nested guid generation'() {
             const Foo = () => {
                 return $mol_jsx("div", null,
-                    $mol_jsx(Bar, { id: "/bar" },
-                        $mol_jsx("img", { id: "/icon" })));
+                    $mol_jsx(Bar, { id: "bar" },
+                        $mol_jsx("img", { id: "icon" })));
             };
             const Bar = (props, icon) => {
                 return $mol_jsx("span", null, icon);
             };
-            const dom = $mol_jsx(Foo, { id: "/foo" });
-            $mol_assert_equal(dom.outerHTML, '<div id="/foo"><span id="/foo/bar"><img id="/foo/icon"></span></div>');
+            const dom = $mol_jsx(Foo, { id: "foo" });
+            $mol_assert_equal(dom.outerHTML, '<div id="foo"><span id="foo/bar"><img id="foo/icon"></span></div>');
         },
         'Fail on non unique ids'() {
             const App = () => {
                 return $mol_jsx("div", null,
-                    $mol_jsx("span", { id: "/bar" }),
-                    $mol_jsx("span", { id: "/bar" }));
+                    $mol_jsx("span", { id: "bar" }),
+                    $mol_jsx("span", { id: "bar" }));
             };
-            $mol_assert_fail(() => $mol_jsx(App, { id: "/foo" }), 'JSX already has tag with id "/foo/bar"');
+            $mol_assert_fail(() => $mol_jsx(App, { id: "foo" }), 'JSX already has tag with id "foo/bar"');
         },
         'Owner based guid generationn'() {
             const Foo = () => {
                 return $mol_jsx("div", null,
-                    $mol_jsx(Bar, { id: "/bar", icon: () => $mol_jsx("img", { id: "/icon" }) }));
+                    $mol_jsx(Bar, { id: "bar", icon: () => $mol_jsx("img", { id: "icon" }) }));
             };
             const Bar = (props) => {
                 return $mol_jsx("span", null, props.icon());
             };
-            const dom = $mol_jsx(Foo, { id: "/foo" });
-            $mol_assert_equal(dom.outerHTML, '<div id="/foo"><span id="/foo/bar"><img id="/foo/icon"></span></div>');
+            const dom = $mol_jsx(Foo, { id: "foo" });
+            $mol_assert_equal(dom.outerHTML, '<div id="foo"><span id="foo/bar"><img id="foo/icon"></span></div>');
         },
         'Fail on same ids from different caller'() {
             const Foo = () => {
                 return $mol_jsx("div", null,
-                    $mol_jsx("img", { id: "/icon" }),
-                    $mol_jsx(Bar, { id: "/bar", icon: () => $mol_jsx("img", { id: "/icon" }) }));
+                    $mol_jsx("img", { id: "icon" }),
+                    $mol_jsx(Bar, { id: "bar", icon: () => $mol_jsx("img", { id: "icon" }) }));
             };
             const Bar = (props) => {
                 return $mol_jsx("span", null, props.icon());
             };
-            $mol_assert_fail(() => $mol_jsx(Foo, { id: "/foo" }), 'JSX already has tag with id "/foo/icon"');
+            $mol_assert_fail(() => $mol_jsx(Foo, { id: "foo" }), 'JSX already has tag with id "foo/icon"');
         },
     });
 })($ || ($ = {}));
@@ -2877,9 +2877,9 @@ var $;
 (function ($) {
     $mol_test({
         'Attach to document'() {
-            const doc = $mol_dom_parse('<html><body id="/foo"></body></html>');
-            $mol_jsx_attach(doc, () => $mol_jsx("body", { id: "/foo" }, "bar"));
-            $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">bar</body></html>');
+            const doc = $mol_dom_parse('<html><body id="foo"></body></html>');
+            $mol_jsx_attach(doc, () => $mol_jsx("body", { id: "foo" }, "bar"));
+            $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo">bar</body></html>');
         },
     });
 })($ || ($ = {}));
@@ -3865,10 +3865,10 @@ var $;
                         this.childNodes.join('-'));
                 }
             }
-            const dom = $mol_jsx(Foo, { id: "/foo", title: "bar" },
+            const dom = $mol_jsx(Foo, { id: "foo", title: "bar" },
                 "xxx",
                 123);
-            $mol_assert_equal(dom.outerHTML, '<div id="/foo">bar xxx-123</div>');
+            $mol_assert_equal(dom.outerHTML, '<div id="foo">bar xxx-123</div>');
         },
         'View by element'() {
             let br;
@@ -3876,7 +3876,7 @@ var $;
             class Br extends $mol_jsx_view {
                 render() {
                     br = this;
-                    return $mol_jsx("br", { id: "/foo" });
+                    return $mol_jsx("br", { id: "foo" });
                 }
             }
             class Brr extends $mol_jsx_view {
@@ -3889,7 +3889,7 @@ var $;
             $mol_assert_equal(Brr.of($mol_jsx(Brr, null)), brr);
         },
         async 'Attached view rerender'() {
-            const doc = $mol_dom_parse('<html><body id="/foo"></body></html>');
+            const doc = $mol_dom_parse('<html><body id="foo"></body></html>');
             class Title extends $mol_jsx_view {
                 value(next = 'foo') { return next; }
                 render() {
@@ -3899,13 +3899,13 @@ var $;
             __decorate([
                 $mol_mem
             ], Title.prototype, "value", null);
-            const dom = $mol_jsx_attach(doc, () => $mol_jsx(Title, { id: "/foo" }));
+            const dom = $mol_jsx_attach(doc, () => $mol_jsx(Title, { id: "foo" }));
             const title = Title.of(dom);
             $mol_assert_equal(title.ownerDocument, doc);
-            $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">foo</body></html>');
+            $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo">foo</body></html>');
             title.value('bar');
             await $mol_wire_fiber.sync();
-            $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">bar</body></html>');
+            $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo">bar</body></html>');
         },
         async 'Nested bound views'($) {
             class Task extends $mol_jsx_view {
@@ -3925,23 +3925,23 @@ var $;
             class App extends $mol_jsx_view {
                 title(next = '') { return next; }
                 render() {
-                    return ($mol_jsx(List, null, this.title() && $mol_jsx(Task, { id: "/task", title: next => this.title(next) })));
+                    return ($mol_jsx(List, null, this.title() && $mol_jsx(Task, { id: "task", title: next => this.title(next) })));
                 }
             }
             __decorate([
                 $mol_mem
             ], App.prototype, "title", null);
-            const doc = $mol_dom_parse('<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root"></body></html>');
-            const root = $.$mol_jsx_attach(doc, () => $mol_jsx(App, { "$": $, id: "/root" }));
-            $mol_assert_equal($mol_dom_serialize(doc.documentElement), '<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root" class="list"></body></html>');
+            const doc = $mol_dom_parse('<html xmlns="http://www.w3.org/1999/xhtml"><body id="root"></body></html>');
+            const root = $.$mol_jsx_attach(doc, () => $mol_jsx(App, { "$": $, id: "root" }));
+            $mol_assert_equal($mol_dom_serialize(doc.documentElement), '<html xmlns="http://www.w3.org/1999/xhtml"><body id="root" class="list"></body></html>');
             App.of(root).title('barbar');
             await $mol_wire_fiber.sync();
             $mol_assert_equal(Task.of(root.firstElementChild).title(), 'barbar');
-            $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>');
+            $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>');
             Task.of(root.firstElementChild).title('foofoo');
             await $mol_wire_fiber.sync();
             $mol_assert_equal(App.of(root).title(), 'foofoo');
-            $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>');
+            $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>');
         },
     });
 })($ || ($ = {}));