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/node.test.js CHANGED
@@ -809,6 +809,7 @@ var $;
809
809
  var $;
810
810
  (function ($) {
811
811
  $.$mol_jsx_prefix = '';
812
+ $.$mol_jsx_crumbs = '';
812
813
  $.$mol_jsx_booked = null;
813
814
  $.$mol_jsx_document = {
814
815
  getElementById: () => null,
@@ -818,7 +819,8 @@ var $;
818
819
  $.$mol_jsx_frag = '';
819
820
  function $mol_jsx(Elem, props, ...childNodes) {
820
821
  const id = props && props.id || '';
821
- const guid = $.$mol_jsx_prefix + id;
822
+ const guid = id ? $.$mol_jsx_prefix ? $.$mol_jsx_prefix + '/' + id : id : $.$mol_jsx_prefix;
823
+ const crumbs_self = id ? $.$mol_jsx_crumbs.replace(/(\S+)/g, `$1_${id}`) : $.$mol_jsx_crumbs;
822
824
  if (Elem && $.$mol_jsx_booked) {
823
825
  if ($.$mol_jsx_booked.has(id)) {
824
826
  $mol_fail(new Error(`JSX already has tag with id ${JSON.stringify(guid)}`));
@@ -831,6 +833,7 @@ var $;
831
833
  if ($.$mol_jsx_prefix) {
832
834
  const prefix_ext = $.$mol_jsx_prefix;
833
835
  const booked_ext = $.$mol_jsx_booked;
836
+ const crumbs_ext = $.$mol_jsx_crumbs;
834
837
  for (const field in props) {
835
838
  const func = props[field];
836
839
  if (typeof func !== 'function')
@@ -838,14 +841,17 @@ var $;
838
841
  const wrapper = function (...args) {
839
842
  const prefix = $.$mol_jsx_prefix;
840
843
  const booked = $.$mol_jsx_booked;
844
+ const crumbs = $.$mol_jsx_crumbs;
841
845
  try {
842
846
  $.$mol_jsx_prefix = prefix_ext;
843
847
  $.$mol_jsx_booked = booked_ext;
848
+ $.$mol_jsx_crumbs = crumbs_ext;
844
849
  return func.call(this, ...args);
845
850
  }
846
851
  finally {
847
852
  $.$mol_jsx_prefix = prefix;
848
853
  $.$mol_jsx_booked = booked;
854
+ $.$mol_jsx_crumbs = crumbs;
849
855
  }
850
856
  };
851
857
  $mol_func_name_from(wrapper, func);
@@ -860,6 +866,7 @@ var $;
860
866
  view.childNodes = childNodes;
861
867
  if (!view.ownerDocument)
862
868
  view.ownerDocument = $.$mol_jsx_document;
869
+ view.className = (crumbs_self ? crumbs_self + ' ' : '') + (Elem['name'] || Elem);
863
870
  node = view.valueOf();
864
871
  node[Elem] = view;
865
872
  return node;
@@ -867,14 +874,17 @@ var $;
867
874
  else {
868
875
  const prefix = $.$mol_jsx_prefix;
869
876
  const booked = $.$mol_jsx_booked;
877
+ const crumbs = $.$mol_jsx_crumbs;
870
878
  try {
871
879
  $.$mol_jsx_prefix = guid;
872
880
  $.$mol_jsx_booked = new Set;
881
+ $.$mol_jsx_crumbs = (crumbs_self ? crumbs_self + ' ' : '') + (Elem['name'] || Elem);
873
882
  return Elem(props, ...childNodes);
874
883
  }
875
884
  finally {
876
885
  $.$mol_jsx_prefix = prefix;
877
886
  $.$mol_jsx_booked = booked;
887
+ $.$mol_jsx_crumbs = crumbs;
878
888
  }
879
889
  }
880
890
  }
@@ -905,6 +915,8 @@ var $;
905
915
  }
906
916
  if (guid)
907
917
  node.id = guid;
918
+ if ($.$mol_jsx_crumbs)
919
+ node.className = (props?.['class'] ? props['class'] + ' ' : '') + crumbs_self;
908
920
  return node;
909
921
  }
910
922
  $.$mol_jsx = $mol_jsx;
@@ -1915,6 +1927,7 @@ var $;
1915
1927
  }
1916
1928
  attributes;
1917
1929
  ownerDocument;
1930
+ className;
1918
1931
  get childNodes() {
1919
1932
  return this._kids();
1920
1933
  }
@@ -1925,16 +1938,19 @@ var $;
1925
1938
  valueOf() {
1926
1939
  const prefix = $mol_jsx_prefix;
1927
1940
  const booked = $mol_jsx_booked;
1941
+ const crumbs = $mol_jsx_crumbs;
1928
1942
  const document = $mol_jsx_document;
1929
1943
  try {
1930
1944
  $mol_jsx_prefix = this[Symbol.toStringTag];
1931
1945
  $mol_jsx_booked = new Set;
1946
+ $mol_jsx_crumbs = this.className;
1932
1947
  $mol_jsx_document = this.ownerDocument;
1933
1948
  return this.render();
1934
1949
  }
1935
1950
  finally {
1936
1951
  $mol_jsx_prefix = prefix;
1937
1952
  $mol_jsx_booked = booked;
1953
+ $mol_jsx_crumbs = crumbs;
1938
1954
  $mol_jsx_document = document;
1939
1955
  }
1940
1956
  }
@@ -2808,50 +2824,52 @@ var $;
2808
2824
  const Button = (props, target) => {
2809
2825
  return $mol_jsx("button", { title: props.hint }, target());
2810
2826
  };
2811
- const dom = $mol_jsx(Button, { id: "/foo", hint: "click me" }, () => 'hey!');
2812
- $mol_assert_equal(dom.outerHTML, '<button title="click me" id="/foo">hey!</button>');
2827
+ const dom = $mol_jsx(Button, { id: "foo", hint: "click me" }, () => 'hey!');
2828
+ $mol_assert_equal(dom.outerHTML, '<button title="click me" id="foo" class="Button">hey!</button>');
2813
2829
  },
2814
2830
  'Nested guid generation'() {
2815
2831
  const Foo = () => {
2816
2832
  return $mol_jsx("div", null,
2817
- $mol_jsx(Bar, { id: "/bar" },
2818
- $mol_jsx("img", { id: "/icon" })));
2833
+ $mol_jsx(Bar, { id: "bar" },
2834
+ $mol_jsx("img", { id: "icon" })));
2819
2835
  };
2820
2836
  const Bar = (props, icon) => {
2821
- return $mol_jsx("span", null, icon);
2837
+ return $mol_jsx("span", null,
2838
+ icon,
2839
+ $mol_jsx("i", { id: "label" }));
2822
2840
  };
2823
- const dom = $mol_jsx(Foo, { id: "/foo" });
2824
- $mol_assert_equal(dom.outerHTML, '<div id="/foo"><span id="/foo/bar"><img id="/foo/icon"></span></div>');
2841
+ const dom = $mol_jsx(Foo, { id: "foo" });
2842
+ $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>');
2825
2843
  },
2826
2844
  'Fail on non unique ids'() {
2827
2845
  const App = () => {
2828
2846
  return $mol_jsx("div", null,
2829
- $mol_jsx("span", { id: "/bar" }),
2830
- $mol_jsx("span", { id: "/bar" }));
2847
+ $mol_jsx("span", { id: "bar" }),
2848
+ $mol_jsx("span", { id: "bar" }));
2831
2849
  };
2832
- $mol_assert_fail(() => $mol_jsx(App, { id: "/foo" }), 'JSX already has tag with id "/foo/bar"');
2850
+ $mol_assert_fail(() => $mol_jsx(App, { id: "foo" }), 'JSX already has tag with id "foo/bar"');
2833
2851
  },
2834
2852
  'Owner based guid generationn'() {
2835
2853
  const Foo = () => {
2836
2854
  return $mol_jsx("div", null,
2837
- $mol_jsx(Bar, { id: "/bar", icon: () => $mol_jsx("img", { id: "/icon" }) }));
2855
+ $mol_jsx(Bar, { id: "middle", icon: () => $mol_jsx("img", { id: "icon" }) }));
2838
2856
  };
2839
2857
  const Bar = (props) => {
2840
2858
  return $mol_jsx("span", null, props.icon());
2841
2859
  };
2842
- const dom = $mol_jsx(Foo, { id: "/foo" });
2843
- $mol_assert_equal(dom.outerHTML, '<div id="/foo"><span id="/foo/bar"><img id="/foo/icon"></span></div>');
2860
+ const dom = $mol_jsx(Foo, { id: "app" });
2861
+ $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>');
2844
2862
  },
2845
2863
  'Fail on same ids from different caller'() {
2846
2864
  const Foo = () => {
2847
2865
  return $mol_jsx("div", null,
2848
- $mol_jsx("img", { id: "/icon" }),
2849
- $mol_jsx(Bar, { id: "/bar", icon: () => $mol_jsx("img", { id: "/icon" }) }));
2866
+ $mol_jsx("img", { id: "icon" }),
2867
+ $mol_jsx(Bar, { id: "bar", icon: () => $mol_jsx("img", { id: "icon" }) }));
2850
2868
  };
2851
2869
  const Bar = (props) => {
2852
2870
  return $mol_jsx("span", null, props.icon());
2853
2871
  };
2854
- $mol_assert_fail(() => $mol_jsx(Foo, { id: "/foo" }), 'JSX already has tag with id "/foo/icon"');
2872
+ $mol_assert_fail(() => $mol_jsx(Foo, { id: "foo" }), 'JSX already has tag with id "foo/icon"');
2855
2873
  },
2856
2874
  });
2857
2875
  })($ || ($ = {}));
@@ -2877,9 +2895,9 @@ var $;
2877
2895
  (function ($) {
2878
2896
  $mol_test({
2879
2897
  'Attach to document'() {
2880
- const doc = $mol_dom_parse('<html><body id="/foo"></body></html>');
2881
- $mol_jsx_attach(doc, () => $mol_jsx("body", { id: "/foo" }, "bar"));
2882
- $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">bar</body></html>');
2898
+ const doc = $mol_dom_parse('<html><body id="foo"></body></html>');
2899
+ $mol_jsx_attach(doc, () => $mol_jsx("body", { id: "foo" }, "bar"));
2900
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo">bar</body></html>');
2883
2901
  },
2884
2902
  });
2885
2903
  })($ || ($ = {}));
@@ -3865,10 +3883,10 @@ var $;
3865
3883
  this.childNodes.join('-'));
3866
3884
  }
3867
3885
  }
3868
- const dom = $mol_jsx(Foo, { id: "/foo", title: "bar" },
3886
+ const dom = $mol_jsx(Foo, { id: "foo", title: "bar" },
3869
3887
  "xxx",
3870
3888
  123);
3871
- $mol_assert_equal(dom.outerHTML, '<div id="/foo">bar xxx-123</div>');
3889
+ $mol_assert_equal(dom.outerHTML, '<div id="foo" class="Foo">bar xxx-123</div>');
3872
3890
  },
3873
3891
  'View by element'() {
3874
3892
  let br;
@@ -3876,7 +3894,7 @@ var $;
3876
3894
  class Br extends $mol_jsx_view {
3877
3895
  render() {
3878
3896
  br = this;
3879
- return $mol_jsx("br", { id: "/foo" });
3897
+ return $mol_jsx("br", { id: "foo" });
3880
3898
  }
3881
3899
  }
3882
3900
  class Brr extends $mol_jsx_view {
@@ -3889,7 +3907,7 @@ var $;
3889
3907
  $mol_assert_equal(Brr.of($mol_jsx(Brr, null)), brr);
3890
3908
  },
3891
3909
  async 'Attached view rerender'() {
3892
- const doc = $mol_dom_parse('<html><body id="/foo"></body></html>');
3910
+ const doc = $mol_dom_parse('<html><body id="foo"></body></html>');
3893
3911
  class Title extends $mol_jsx_view {
3894
3912
  value(next = 'foo') { return next; }
3895
3913
  render() {
@@ -3899,13 +3917,13 @@ var $;
3899
3917
  __decorate([
3900
3918
  $mol_mem
3901
3919
  ], Title.prototype, "value", null);
3902
- const dom = $mol_jsx_attach(doc, () => $mol_jsx(Title, { id: "/foo" }));
3920
+ const dom = $mol_jsx_attach(doc, () => $mol_jsx(Title, { id: "foo" }));
3903
3921
  const title = Title.of(dom);
3904
3922
  $mol_assert_equal(title.ownerDocument, doc);
3905
- $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">foo</body></html>');
3923
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo" class="Title">foo</body></html>');
3906
3924
  title.value('bar');
3907
3925
  await $mol_wire_fiber.sync();
3908
- $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="/foo">bar</body></html>');
3926
+ $mol_assert_equal(doc.documentElement.outerHTML, '<html><body id="foo" class="Title">bar</body></html>');
3909
3927
  },
3910
3928
  async 'Nested bound views'($) {
3911
3929
  class Task extends $mol_jsx_view {
@@ -3925,23 +3943,23 @@ var $;
3925
3943
  class App extends $mol_jsx_view {
3926
3944
  title(next = '') { return next; }
3927
3945
  render() {
3928
- return ($mol_jsx(List, null, this.title() && $mol_jsx(Task, { id: "/task", title: next => this.title(next) })));
3946
+ return ($mol_jsx(List, null, this.title() && $mol_jsx(Task, { id: "task", title: next => this.title(next) })));
3929
3947
  }
3930
3948
  }
3931
3949
  __decorate([
3932
3950
  $mol_mem
3933
3951
  ], App.prototype, "title", null);
3934
- const doc = $mol_dom_parse('<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root"></body></html>');
3935
- const root = $.$mol_jsx_attach(doc, () => $mol_jsx(App, { "$": $, id: "/root" }));
3936
- $mol_assert_equal($mol_dom_serialize(doc.documentElement), '<html xmlns="http://www.w3.org/1999/xhtml"><body id="/root" class="list"></body></html>');
3952
+ const doc = $mol_dom_parse('<html xmlns="http://www.w3.org/1999/xhtml"><body id="root"></body></html>');
3953
+ const root = $.$mol_jsx_attach(doc, () => $mol_jsx(App, { "$": $, id: "root" }));
3954
+ $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>');
3937
3955
  App.of(root).title('barbar');
3938
3956
  await $mol_wire_fiber.sync();
3939
3957
  $mol_assert_equal(Task.of(root.firstElementChild).title(), 'barbar');
3940
- $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>');
3958
+ $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>');
3941
3959
  Task.of(root.firstElementChild).title('foofoo');
3942
3960
  await $mol_wire_fiber.sync();
3943
3961
  $mol_assert_equal(App.of(root).title(), 'foofoo');
3944
- $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>');
3962
+ $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>');
3945
3963
  },
3946
3964
  });
3947
3965
  })($ || ($ = {}));