mol_jsx_lib 0.0.56 → 0.0.59

package/node.test.js

@@ -721,6 +721,34 @@ var $;
 ;
 "use strict";
 var $;
+(function ($) {
+    function $mol_func_name(func) {
+        let name = func.name;
+        if (name?.length > 1)
+            return name;
+        for (let key in this) {
+            try {
+                if (this[key] !== func)
+                    continue;
+                name = key;
+                Object.defineProperty(func, 'name', { value: name });
+                break;
+            }
+            catch { }
+        }
+        return name;
+    }
+    $.$mol_func_name = $mol_func_name;
+    function $mol_func_name_from(target, source) {
+        Object.defineProperty(target, 'name', { value: source.name });
+        return target;
+    }
+    $.$mol_func_name_from = $mol_func_name_from;
+})($ || ($ = {}));
+//mol/func/name/name.ts
+;
+"use strict";
+var $;
 (function ($) {
     function $mol_dom_render_children(el, childNodes) {
         const node_set = new Set(childNodes);
@@ -781,6 +809,7 @@ var $;
 var $;
 (function ($) {
     $.$mol_jsx_prefix = '';
+    $.$mol_jsx_crumbs = '';
     $.$mol_jsx_booked = null;
     $.$mol_jsx_document = {
         getElementById: () => null,
@@ -790,16 +819,45 @@ var $;
     $.$mol_jsx_frag = '';
     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(/([^ ]+)/, `$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(id)}`));
+                $mol_fail(new Error(`JSX already has tag with id ${JSON.stringify(guid)}`));
             }
             else {
                 $.$mol_jsx_booked.add(id);
             }
         }
-        const guid = $.$mol_jsx_prefix + id;
         let node = guid ? $.$mol_jsx_document.getElementById(guid) : null;
+        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')
+                    continue;
+                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);
+                props[field] = wrapper;
+            }
+        }
         if (typeof Elem !== 'string') {
             if ('prototype' in Elem) {
                 const view = node && node[Elem] || new Elem;
@@ -808,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;
@@ -815,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;
                 }
             }
         }
@@ -853,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;
@@ -1863,6 +1927,7 @@ var $;
         }
         attributes;
         ownerDocument;
+        className;
         get childNodes() {
             return this._kids();
         }
@@ -1873,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;
             }
         }
@@ -2560,6 +2628,20 @@ var $;
 //mol/assert/assert.ts
 ;
 "use strict";
+var $;
+(function ($_1) {
+    $mol_test({
+        'FQN of anon function'($) {
+            const $$ = Object.assign($, { $mol_func_name_test: (() => () => { })() });
+            $mol_assert_equal($$.$mol_func_name_test.name, '');
+            $mol_assert_equal($$.$mol_func_name($$.$mol_func_name_test), '$mol_func_name_test');
+            $mol_assert_equal($$.$mol_func_name_test.name, '$mol_func_name_test');
+        },
+    });
+})($ || ($ = {}));
+//mol/func/name/name.test.ts
+;
+"use strict";
 //mol/type/error/error.ts
 ;
 "use strict";
@@ -2742,28 +2824,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" class="Button">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" class="Foo"><span id="foo/bar" class="Foo_bar Bar"><img id="foo/icon" class="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"');
+        },
+        'Owner based guid generationn'() {
+            const Foo = () => {
+                return $mol_jsx("div", null,
+                    $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: "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 = () => {
+                return $mol_jsx("div", null,
+                    $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(App, { id: "/foo" }), 'JSX already has tag with id "/bar"');
+            $mol_assert_fail(() => $mol_jsx(Foo, { id: "foo" }), 'JSX already has tag with id "foo/icon"');
         },
     });
 })($ || ($ = {}));
@@ -2789,9 +2893,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>');
         },
     });
 })($ || ($ = {}));
@@ -3777,10 +3881,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" class="Foo">bar xxx-123</div>');
         },
         'View by element'() {
             let br;
@@ -3788,7 +3892,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 {
@@ -3801,7 +3905,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() {
@@ -3811,13 +3915,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" 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 {
@@ -3837,23 +3941,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 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>');
         },
     });
 })($ || ($ = {}));