typed-dom - npm Package Compare versions

Comparing version 0.0.277 to 0.0.278

dom.test.ts

@@ -21,7 +21,7 @@ import { shadow, frag, html, svg, text, define, defrag } from './dom';
       assert(shadow(html('section', 'a'), { mode: 'closed' }, [html('slot')]).host.innerHTML === 'a');
-      assert(shadow(shadow('section').host));
-      assert(shadow(shadow('section', { mode: 'open' }).host));
-      assert(shadow(shadow('section', { mode: 'closed' }).host));
-      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host, { mode: 'closed' }));
-      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host, { mode: 'open' }));
+      assert(shadow(shadow('section').host as HTMLElement));
+      assert(shadow(shadow('section', { mode: 'open' }).host as HTMLElement));
+      assert(shadow(shadow('section', { mode: 'closed' }).host as HTMLElement));
+      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host as HTMLElement, { mode: 'closed' }));
+      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host as HTMLElement, { mode: 'open' }));
     });
@@ -28,0 +28,0 @@

dom.ts

@@ -58,8 +58,8 @@ import { Symbol, document } from 'spica/global';
 
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, children?: Children, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, children?: Children, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit | Factory<M> | Children, children?: Factory<M> | Children, factory: Factory<M> = html as unknown as Factory<M>): ShadowRoot {
-  if (typeof el === 'string') return shadow(factory(el) as unknown as Element, opts as ShadowRootInit, children as Children, factory);
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, opts?: ShadowRootInit, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, opts?: ShadowRootInit, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, opts?: ShadowRootInit | Factory<M> | Children, children?: Factory<M> | Children, factory: Factory<M> = html as unknown as Factory<M>): ShadowRoot {
+  if (typeof el === 'string') return shadow(factory(el) as Extract<M[keyof M & string], Element>, opts as ShadowRootInit, children as Children, factory);
   if (typeof opts === 'function') return shadow(el, void 0, children as Children, opts);
@@ -66,0 +66,0 @@ if (typeof children === 'function') return shadow(el, opts as ShadowRootInit, void 0, children);

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.277",
+  "version": "0.0.278",
   "description": "A value-level and type-level DOM builder.",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -71,3 +71,3 @@ # typed-dom
 
-All the APIs creating an element can be redefined as follows:
+All the APIs creating an element can be recreated as follows:
 
@@ -85,5 +85,11 @@ ```ts
 
+A closed shadow DOM API can be created as follows:
+
+```ts
+const Shadow = API<ShadowHostHTMLElementTagNameMap>(html, el => shadow(el, { mode: 'closed' }));
+```
+
 #### Extend APIs
 
-Custom elements can be defined by extending `ShadowHostHTMLElementTagNameMap`, `HTMLElementTagNameMap`, or `SVGElementTagNameMap` interface.
+Custom elements can be created by extending `ShadowHostHTMLElementTagNameMap`, `HTMLElementTagNameMap`, or `SVGElementTagNameMap` interface.
 
@@ -109,3 +115,3 @@ ```ts
 However, since scoped custom elements don't inherit global custom elements you shouldn't extend the built-in interfaces such as HTMLElementTagNameMap.
-Instead, you should define new interfaces and new APIs to define custom elements.
+Instead, you should create new interfaces and new APIs to define custom elements.
 
@@ -268,3 +274,3 @@ ```ts
 
-Typed-DOM supports custom elements but they are unrecommended since most of customizations can be implemented by customizing proxies or APIs instead of elements.
+Typed-DOM supports custom elements but they are unrecommended since most of purposes of customizations can be realized by customizing proxies or APIs instead of elements.
 
@@ -351,11 +357,11 @@ ### DOM Components
 
-### Translation
+### i18n
 
-Create a custom API for translation.
+Create a helper function of APIs for i18n.
 Typed-DOM provides `mutate`, `connect`, and `disconnect` events.
 
 ```ts
-import { API, El, html } from 'typed-dom';
+import { HTML, El, html } from 'typed-dom';
 
-const i18n = i18next.createInstance({
+const translator = i18next.createInstance({
   lng: 'en',
@@ -373,3 +379,3 @@ resources: {
 }
-const Trans = API<HTMLElementTagNameMap>(html);
+
 function data
@@ -382,3 +388,3 @@ <K extends keyof TransDataMap>
       onmutate: ev =>
-        void i18n.init((err, t) =>
+        void translator.init((err, t) =>
           ev.currentTarget.textContent = err
@@ -390,3 +396,3 @@ ? '{% Failed to initialize the translator. %}'
 
-const el = Trans.span('Greeting', data({ name: 'world' }));
+const el = HTML.span('Greeting', data({ name: 'world' }));
 assert(el.children === 'Hello, world.');
@@ -399,9 +405,9 @@ assert(el.element.textContent === 'Hello, world.');
 ```ts
-function bind
+function intl
   <K extends keyof TransDataMap>
   (children: K, data: TransDataMap[K])
-  : El.Factory<HTMLElementTagNameMap, void> {
+  : El.Factory<HTMLElementTagNameMap, El.Children.Void> {
   return (html, tag) => {
     const el = html(tag);
-    i18n.init((err, t) =>
+    translator.init((err, t) =>
       el.textContent = err
@@ -414,3 +420,3 @@ ? '{% Failed to initialize the translator. %}'
 
-const el = Trans.span(bind('Greeting', { name: 'world' }));
+const el = HTML.span(intl('Greeting', { name: 'world' }));
 assert(el.children === undefined);
@@ -417,0 +423,0 @@ assert(el.element.textContent === 'Hello, world.');

src/builder.ts

@@ -8,7 +8,6 @@ import { Symbol, Proxy } from 'spica/global';
   <M extends TagNameMap> =
-  BuilderFunction<M> &
-  { readonly [P in K<M>]: BuilderMethod<M, P>; };
+  BuilderFunction<M> & { readonly [P in K<M>]: BuilderMethod<M, P>; };
 export function API
   <M extends TagNameMap>
-  (baseFactory: Factory<M>, container?: <E extends Element>(el: E) => ShadowRoot)
+  (baseFactory: Factory<M>, container?: (el: E<M[K<M>]>) => ShadowRoot)
   : API<M> {
@@ -25,3 +24,3 @@ return new Proxy<API<M>>((() => 0) as any, handle(baseFactory, container));
 type El_Children_Unit = readonly [];
-export type ElFactory<
+type ElFactory<
   M extends TagNameMap,
@@ -67,3 +66,3 @@ T extends keyof M & string = keyof M & string,
   <M extends TagNameMap>
-  (baseFactory: Factory<M>, container?: <E extends Element>(el: E) => ShadowRoot,
+  (baseFactory: Factory<M>, container?: (el: Element) => ShadowRoot,
 ): ProxyHandler<API<M>> {
@@ -70,0 +69,0 @@ return {

src/util/dom.test.ts

@@ -21,7 +21,7 @@ import { shadow, frag, html, svg, text, define, defrag } from './dom';
       assert(shadow(html('section', 'a'), { mode: 'closed' }, [html('slot')]).host.innerHTML === 'a');
-      assert(shadow(shadow('section').host));
-      assert(shadow(shadow('section', { mode: 'open' }).host));
-      assert(shadow(shadow('section', { mode: 'closed' }).host));
-      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host, { mode: 'closed' }));
-      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host, { mode: 'open' }));
+      assert(shadow(shadow('section').host as HTMLElement));
+      assert(shadow(shadow('section', { mode: 'open' }).host as HTMLElement));
+      assert(shadow(shadow('section', { mode: 'closed' }).host as HTMLElement));
+      assert.throws(() => shadow(shadow('section', { mode: 'open' }).host as HTMLElement, { mode: 'closed' }));
+      assert.throws(() => shadow(shadow('section', { mode: 'closed' }).host as HTMLElement, { mode: 'open' }));
     });
@@ -28,0 +28,0 @@

src/util/dom.ts

@@ -58,8 +58,8 @@ import { Symbol, document } from 'spica/global';
 
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, children?: Children, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit, children?: Children, factory?: Factory<M>): ShadowRoot;
-export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Element, opts?: ShadowRootInit | Factory<M> | Children, children?: Factory<M> | Children, factory: Factory<M> = html as unknown as Factory<M>): ShadowRoot {
-  if (typeof el === 'string') return shadow(factory(el) as unknown as Element, opts as ShadowRootInit, children as Children, factory);
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, opts?: ShadowRootInit, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, opts?: ShadowRootInit, children?: Children, factory?: Factory<M>): ShadowRoot;
+export function shadow<M extends ShadowHostHTMLElementTagNameMap>(el: keyof M & string | Extract<M[keyof M & string], Element>, opts?: ShadowRootInit | Factory<M> | Children, children?: Factory<M> | Children, factory: Factory<M> = html as unknown as Factory<M>): ShadowRoot {
+  if (typeof el === 'string') return shadow(factory(el) as Extract<M[keyof M & string], Element>, opts as ShadowRootInit, children as Children, factory);
   if (typeof opts === 'function') return shadow(el, void 0, children as Children, opts);
@@ -66,0 +66,0 @@ if (typeof children === 'function') return shadow(el, opts as ShadowRootInit, void 0, children);

test/integration/package.ts

@@ -1,2 +0,2 @@
-import { API, Shadow, HTML, SVG, El, Attrs, shadow, html } from '../..';
+import { Shadow, HTML, SVG, El, Attrs, shadow, html } from '../..';
 import { Coroutine } from 'spica/coroutine';
@@ -573,3 +573,3 @@ import { Sequence } from 'spica/sequence';
     it('translate', function () {
-      const i18n = i18next.createInstance({
+      const translator = i18next.createInstance({
         lng: 'en',
@@ -587,3 +587,3 @@ resources: {
       }
-      const Trans = API<HTMLElementTagNameMap>(html);
+
       function data
@@ -596,3 +596,3 @@ <K extends keyof TransDataMap>
             onmutate: ev =>
-              void i18n.init((err, t) =>
+              void translator.init((err, t) =>
                 ev.currentTarget.textContent = err
@@ -604,19 +604,19 @@ ? '{% Failed to initialize the translator. %}'
 
-      const el = Trans.span('Greeting', data({ name: 'world' }));
+      const el = HTML.span('Greeting', data({ name: 'world' }));
       assert(el.children === 'Hello, world.');
       assert(el.element.textContent === 'Hello, world.');
       // @ts-expect-error
-      () => Trans.span('Greeting', data({}));
+      () => HTML.span('Greeting', data({}));
       // @ts-expect-error
-      () => Trans.span('', data({ name: 'world' }));
+      () => HTML.span('', data({ name: 'world' }));
       // @ts-expect-error
-      () => Trans.span(data({ name: 'world' }));
+      () => HTML.span(data({ name: 'world' }));
 
-      function bind
+      function intl
         <K extends keyof TransDataMap>
         (children: K, data: TransDataMap[K])
-        : El.Factory<HTMLElementTagNameMap, void> {
+        : El.Factory<HTMLElementTagNameMap, El.Children.Void> {
         return (html, tag) => {
           const el = html(tag);
-          i18n.init((err, t) =>
+          translator.init((err, t) =>
             el.textContent = err
@@ -629,10 +629,12 @@ ? '{% Failed to initialize the translator. %}'
 
-      assert(Trans.span(bind('Greeting', { name: 'world' })).children === undefined);
-      assert(Trans.span(bind('Greeting', { name: 'world' })).element.textContent === 'Hello, world.');
-      assert(Trans.span({}, bind('Greeting', { name: 'world' })).children === undefined);
-      assert(Trans.span({}, bind('Greeting', { name: 'world' })).element.textContent === 'Hello, world.');
+      assert(HTML.span(intl('Greeting', { name: 'world' })).children === undefined);
+      assert(HTML.span(intl('Greeting', { name: 'world' })).element.textContent === 'Hello, world.');
+      assert(HTML.span({}, intl('Greeting', { name: 'world' })).children === undefined);
+      assert(HTML.span({}, intl('Greeting', { name: 'world' })).element.textContent === 'Hello, world.');
       // @ts-expect-error
-      () => Trans.span(bind('Greeting', {}));
+      () => HTML.span(intl('Greeting', {}));
       // @ts-expect-error
-      () => Trans.span(bind('', { name: 'world' }));
+      () => HTML.span(intl('', { name: 'world' }));
+      // @ts-expect-error
+      () => HTML.span('', intl('Greeting', { name: 'world' }));
     });
@@ -639,0 +641,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

678545

increased by0.1%

Number of lines in readme file

419

increased by1.45%

No dependency changes