mol_jsx_lib 0.0.58 → 0.0.61

package/node.test.js

@@ -809,6 +809,7 @@ var $;
 var $;
 (function ($) {
     $.$mol_jsx_prefix = '';
+    $.$mol_jsx_crumbs = '';
     $.$mol_jsx_booked = null;
     $.$mol_jsx_document = {
         getElementById: () => null,
@@ -819,6 +820,7 @@ var $;
     function $mol_jsx(Elem, props, ...childNodes) {
         const id = props && props.id || '';
         const guid = id ? $.$mol_jsx_prefix ? $.$mol_jsx_prefix + '/' + id : id : $.$mol_jsx_prefix;
+        const crumbs_self = id ? $.$mol_jsx_crumbs.replace(/(\S+)/g, `$1_${id}`) : $.$mol_jsx_crumbs;
         if (Elem && $.$mol_jsx_booked) {
             if ($.$mol_jsx_booked.has(id)) {
                 $mol_fail(new Error(`JSX already has tag with id ${JSON.stringify(guid)}`));
@@ -831,6 +833,7 @@ var $;
         if ($.$mol_jsx_prefix) {
             const prefix_ext = $.$mol_jsx_prefix;
             const booked_ext = $.$mol_jsx_booked;
+            const crumbs_ext = $.$mol_jsx_crumbs;
             for (const field in props) {
                 const func = props[field];
                 if (typeof func !== 'function')
@@ -838,14 +841,17 @@ var $;
                 const wrapper = function (...args) {
                     const prefix = $.$mol_jsx_prefix;
                     const booked = $.$mol_jsx_booked;
+                    const crumbs = $.$mol_jsx_crumbs;
                     try {
                         $.$mol_jsx_prefix = prefix_ext;
                         $.$mol_jsx_booked = booked_ext;
+                        $.$mol_jsx_crumbs = crumbs_ext;
                         return func.call(this, ...args);
                     }
                     finally {
                         $.$mol_jsx_prefix = prefix;
                         $.$mol_jsx_booked = booked;
+                        $.$mol_jsx_crumbs = crumbs;
                     }
                 };
                 $mol_func_name_from(wrapper, func);
@@ -860,6 +866,7 @@ var $;
                 view.childNodes = childNodes;
                 if (!view.ownerDocument)
                     view.ownerDocument = $.$mol_jsx_document;
+                view.className = (crumbs_self ? crumbs_self + ' ' : '') + (Elem['name'] || Elem);
                 node = view.valueOf();
                 node[Elem] = view;
                 return node;
@@ -867,14 +874,17 @@ var $;
             else {
                 const prefix = $.$mol_jsx_prefix;
                 const booked = $.$mol_jsx_booked;
+                const crumbs = $.$mol_jsx_crumbs;
                 try {
                     $.$mol_jsx_prefix = guid;
                     $.$mol_jsx_booked = new Set;
+                    $.$mol_jsx_crumbs = (crumbs_self ? crumbs_self + ' ' : '') + (Elem['name'] || Elem);
                     return Elem(props, ...childNodes);
                 }
                 finally {
                     $.$mol_jsx_prefix = prefix;
                     $.$mol_jsx_booked = booked;
+                    $.$mol_jsx_crumbs = crumbs;
                 }
             }
         }
@@ -905,6 +915,8 @@ var $;
         }
         if (guid)
             node.id = guid;
+        if ($.$mol_jsx_crumbs)
+            node.className = (props?.['class'] ? props['class'] + ' ' : '') + crumbs_self;
         return node;
     }
     $.$mol_jsx = $mol_jsx;
@@ -1915,6 +1927,7 @@ var $;
         }
         attributes;
         ownerDocument;
+        className;
         get childNodes() {
             return this._kids();
         }
@@ -1925,16 +1938,19 @@ var $;
         valueOf() {
             const prefix = $mol_jsx_prefix;
             const booked = $mol_jsx_booked;
+            const crumbs = $mol_jsx_crumbs;
             const document = $mol_jsx_document;
             try {
                 $mol_jsx_prefix = this[Symbol.toStringTag];
                 $mol_jsx_booked = new Set;
+                $mol_jsx_crumbs = this.className;
                 $mol_jsx_document = this.ownerDocument;
                 return this.render();
             }
             finally {
                 $mol_jsx_prefix = prefix;
                 $mol_jsx_booked = booked;
+                $mol_jsx_crumbs = crumbs;
                 $mol_jsx_document = document;
             }
         }
@@ -2809,7 +2825,7 @@ var $;
                 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>');
+            $mol_assert_equal(dom.outerHTML, '<button title="click me" id="foo" class="Button">hey!</button>');
         },
         'Nested guid generation'() {
             const Foo = () => {
@@ -2818,10 +2834,12 @@ var $;
                         $mol_jsx("img", { id: "icon" })));
             };
             const Bar = (props, icon) => {
-                return $mol_jsx("span", null, icon);
+                return $mol_jsx("span", null,
+                    icon,
+                    $mol_jsx("i", { id: "label" }));
             };
             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>');
+            $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>');
         },
         'Fail on non unique ids'() {
             const App = () => {
@@ -2834,13 +2852,13 @@ var $;
         '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: "middle", 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: "app" });
+            $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>');
         },
         'Fail on same ids from different caller'() {
             const Foo = () => {
@@ -3868,7 +3886,7 @@ var $;
             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" class="Foo">bar xxx-123</div>');
         },
         'View by element'() {
             let br;
@@ -3902,10 +3920,10 @@ var $;
             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" class="Title">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" class="Title">bar</body></html>');
         },
         async 'Nested bound views'($) {
             class Task extends $mol_jsx_view {
@@ -3933,15 +3951,15 @@ var $;
             ], 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>');
+            $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>');
             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 App List"><h1 id="root/task" class="App_task 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 App List"><h1 id="root/task" class="App_task Task">foofoo</h1></body></html>');
         },
     });
 })($ || ($ = {}));