Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

typed-dom

Package Overview
Dependencies
Maintainers
1
Versions
350
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

typed-dom - npm Package Compare versions

Comparing version 0.0.273 to 0.0.274

2

package.json
{
"name": "typed-dom",
"version": "0.0.273",
"version": "0.0.274",
"description": "A value-level and type-level DOM builder.",

@@ -5,0 +5,0 @@ "private": false,

52

README.md

@@ -71,7 +71,10 @@ # typed-dom

All the exposed proxy APIs can be redefined as follows:
All the APIs creating an element can be redefined as follows:
```ts
import { API, shadow, html, svg } from 'typed-dom';
import { API, NS, shadow, element } from 'typed-dom';
const html = element<HTMLElementTagNameMap>(document, NS.HTML);
const svg = element<SVGElementTagNameMap>(document, NS.SVG);
const Shadow = API<ShadowHostHTMLElementTagNameMap>(html, shadow);

@@ -174,3 +177,3 @@ const HTML = API<HTMLElementTagNameMap>(html);

Build a typed DOM component with styling.
Build a Typed-DOM component with styling.
APIs replace the `:scope` selector with `:host`, `#<id>`, or `.<generated-id>`.

@@ -191,3 +194,3 @@

Then this component has the following static type generated by type inference.
Then this component has the following readable static type generated by type inference.

@@ -233,4 +236,3 @@ ```ts

You can know the internal structure via the static type which can be used as the visualization.
And you can safely access and manipulate the internal structure using the static type.
Using the static type, you can see the internal structure and can safely access to and manipulate it.

@@ -267,2 +269,4 @@ ```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.
### DOM Components

@@ -291,3 +295,8 @@

}
```
Switch to shadow DOM.
Access to elemets in shadow DOM is transparent.
```ts
class ShadowComponent implements El {

@@ -321,3 +330,4 @@ private readonly dom = Shadow.section({

super(async function* (this: Component) {
while (true) {
for (const child of this.children) {
child.children = child.children.toUpperCase();
yield;

@@ -347,2 +357,3 @@ }

Create a custom API for translation.
Typed-DOM provides `mutate`, `connect`, and `disconnect` events.

@@ -366,3 +377,3 @@ ```ts

const Trans = API<HTMLElementTagNameMap>(html);
const bind = <K extends keyof TransDataMap>(data: TransDataMap[K]) =>
const data = <K extends keyof TransDataMap>(data: TransDataMap[K]) =>
<T extends keyof HTMLElementTagNameMap>(

@@ -382,3 +393,3 @@ html: Factory<HTMLElementTagNameMap>,

const el = Trans.span('Greeting', bind({ name: 'world' }));
const el = Trans.span('Greeting', data({ name: 'world' }));
assert(el.children === 'Hello, world.');

@@ -388,4 +399,27 @@ assert(el.element.textContent === 'Hello, world.');

Or
```ts
const bind = <K extends keyof TransDataMap>(children: K, data: TransDataMap[K]) =>
<T extends keyof HTMLElementTagNameMap>(
html: Factory<HTMLElementTagNameMap>,
tag: T,
_: Attrs,
__: El.Children.Void,
) => {
const el = html(tag);
i18n.init((err, t) =>
el.textContent = err
? '{% Failed to initialize the translator. %}'
: t(children, data) ?? `{% Failed to translate "${children}". %}`);
return el;
};
const el = Trans.span(bind('Greeting', { name: 'world' }));
assert(el.children === undefined);
assert(el.element.textContent === 'Hello, world.');
```
## Dependencies
- unassert (in compiling source code)

40

src/builder.ts

@@ -1,4 +0,4 @@

import { Symbol } from 'spica/global';
import { Symbol, Proxy } from 'spica/global';
import { hasOwnProperty } from 'spica/alias';
import { Elem, El } from './proxy';
import { El, ElementProxy } from './proxy';
import { Factory, TagNameMap, Attrs, shadow, html, svg, define } from './util/dom';

@@ -26,8 +26,2 @@

interface BuilderFunction<M extends TagNameMap, F extends Factory<M>> {
<T extends K<M>, C extends El.Children.Void >(tag: T, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
<T extends K<M>, C extends El.Children.Void >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
<T extends K<M>, C extends El.Children.Text >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
<T extends K<M>, C extends El_Children_Unit >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
<T extends K<M>, C extends El.Children.Array >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
<T extends K<M>, C extends El.Children.Struct>(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
<T extends K<M>, C extends El.Children.Void >(tag: T, attrs: Attrs<E<M[T]>> | undefined, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;

@@ -39,11 +33,11 @@ <T extends K<M>, C extends El.Children.Void >(tag: T, attrs: Attrs<E<M[T]>> | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;

<T extends K<M>, C extends El.Children.Struct>(tag: T, attrs: Attrs<E<M[T]>> | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
<T extends K<M>, C extends El.Children.Void >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
<T extends K<M>, C extends El.Children.Text >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
<T extends K<M>, C extends El_Children_Unit >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
<T extends K<M>, C extends El.Children.Array >(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
<T extends K<M>, C extends El.Children.Struct>(tag: T, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
<T extends K<M>, C extends El.Children.Void >(tag: T, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
}
interface BuilderMethod<M extends TagNameMap, F extends Factory<M>, T extends K<M>> {
<C extends El.Children.Void >( factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
<C extends El.Children.Void >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
<C extends El.Children.Text >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
<C extends El_Children_Unit >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
<C extends El.Children.Array >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
<C extends El.Children.Struct>( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
<C extends El.Children.Void >( attrs: Attrs<E<M[T]>> | undefined, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;

@@ -55,2 +49,8 @@ <C extends El.Children.Void >( attrs: Attrs<E<M[T]>> | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;

<C extends El.Children.Struct>( attrs: Attrs<E<M[T]>> | undefined, children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
<C extends El.Children.Void >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
<C extends El.Children.Text >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Text>;
<C extends El_Children_Unit >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Array>;
<C extends El.Children.Array >( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, Readonly<C>>;
<C extends El.Children.Struct>( children: C, factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, C>;
<C extends El.Children.Void >( factory?: El.Factory<M, F, T, C>): El<T, E<M[T]>, El.Children.Void>;
}

@@ -77,11 +77,12 @@

if (isElChildren(attrs)) return build(void 0, attrs, factory);
attrs ??= {} as typeof attrs;
// Bug: TypeScript
//assert(attrs = attrs as Attrs | undefined);
const el = elem(tag, factory, attrs, children);
return new Elem(tag, el, children, container?.(el));
return new ElementProxy(tag, el, children, container?.(el));
};
}
function elem(tag: keyof M & string, factory: El.Factory<M, F, keyof M & string, El.Children> | undefined, attrs: Attrs, children: El.Children): Element {
function elem(tag: keyof M & string, factory: El.Factory<M, F, keyof M & string, El.Children> | undefined, attrs: Attrs | undefined, children: El.Children): Element {
const el = factory
? define(factory(baseFactory, tag, attrs, children) as unknown as Element, attrs)
? define(factory(baseFactory, tag, attrs ?? {}, children) as unknown as Element, attrs)
: baseFactory(tag, attrs) as unknown as Element;

@@ -95,2 +96,3 @@ if (tag.toLowerCase() !== el.tagName.toLowerCase()) throw new Error(`TypedDOM: Expected tag name is "${tag.toLowerCase()}" but actually "${el.tagName.toLowerCase()}".`);

if (value?.[Symbol.iterator]) return true;
assert(value !== '');
if (!value) return false;

@@ -102,3 +104,3 @@ for (const name in value as Attrs | El.Children.Struct) {

}
return true;
return false;
}

12

src/proxy.ts

@@ -47,3 +47,9 @@ import { Event } from 'spica/global';

//export type Factory<M extends TagNameMap, F extends BaseFactory<M> = BaseFactory<M>, T extends keyof M & string = keyof M & string, C extends El.Children = El.Children> = <U extends T>(baseFactory: F, tag: U, attrs: Attrs, children: C) => M[U];
export type Factory<M extends TagNameMap, F extends BaseFactory<M> = BaseFactory<M>, T extends keyof M & string = keyof M & string, C extends El.Children = El.Children> = (baseFactory: F, tag: T, attrs: Attrs, children: C) => M[T];
export type Factory<
M extends TagNameMap,
F extends BaseFactory<M> = BaseFactory<M>,
T extends keyof M & string = keyof M & string,
C extends El.Children = El.Children,
> =
(baseFactory: F, tag: T, attrs: Attrs, children: C) => M[T];
}

@@ -75,3 +81,3 @@ const enum ElChildType {

export class Elem<
export class ElementProxy<
T extends string = string,

@@ -335,3 +341,3 @@ E extends Element = Element,

function events(child: El): Elem[typeof privates.events] | undefined {
function events(child: El): ElementProxy[typeof privates.events] | undefined {
return child[privates.events] ?? child.element[proxy]?.[privates.events];

@@ -338,0 +344,0 @@ }

55

test/integration/package.ts

@@ -156,3 +156,3 @@ import { API, Shadow, HTML, SVG, El, Attrs, Factory, shadow, html } from '../..';

it('struct empty', function () {
const dom = HTML.div({});
const dom = HTML.div({}, {});
assert.deepStrictEqual(dom.children, {});

@@ -211,3 +211,3 @@ });

it('struct with factory', function () {
const dom = HTML.article({}, (h, tag) =>
const dom = HTML.article({}, {}, (h, tag) =>
h(tag, { id: 'test' }));

@@ -219,5 +219,7 @@ assert(dom.element.id === 'test');

it('attr', function () {
(): void => HTML.div({}).children;
assert.deepStrictEqual(HTML.div({}).children, undefined);
const dom = HTML.div({ id: 'test', class: 'test' });
assert(dom.element.id === 'test');
assert(dom.element.getAttribute('class') === 'test');
assert(dom.element.className === 'test');
assert(dom.children === undefined);

@@ -228,6 +230,7 @@ });

const dom = HTML.div({ id: 'test' }, (h, tag) =>
h(tag, { id: 'id', class: 'test' }));
h(tag, { id: 'id', class: 'test' }, 'test'));
assert(dom.element.id === 'test');
assert(dom.element.className === 'test');
assert(dom.children === undefined);
assert(HTML.div({}, (h, tag) => h(tag, 'test')).element.textContent === 'test');
});

@@ -238,3 +241,3 @@

assert(dom.element.id === 'test');
assert(dom.element.getAttribute('class') === 'test');
assert(dom.element.className === 'test');
assert(dom.children === '');

@@ -246,3 +249,3 @@ });

assert(dom.element.id === 'test');
assert(dom.element.getAttribute('class') === 'test');
assert(dom.element.className === 'test');
assert.deepStrictEqual(dom.children, []);

@@ -254,3 +257,3 @@ });

assert(dom.element.id === 'test');
assert(dom.element.getAttribute('class') === 'test');
assert(dom.element.className === 'test');
assert.deepStrictEqual(dom.children, {});

@@ -332,4 +335,4 @@ });

assert.deepStrictEqual(HTML.p([], () => HTML.p('a').element).children, []);
assert(HTML.p({}, () => HTML.p('a').element).element.childNodes.length === 0);
assert.deepStrictEqual(HTML.p({}, () => HTML.p('a').element).children, {});
assert(HTML.p({}, {}, () => HTML.p('a').element).element.childNodes.length === 0);
assert.deepStrictEqual(HTML.p({}, {}, () => HTML.p('a').element).children, {});
});

@@ -545,7 +548,4 @@

assert(this.children);
this.children = this.children.map(child => {
for (const child of this.children) {
child.children = child.children.toUpperCase();
return child;
});
while (true) {
yield;

@@ -596,3 +596,3 @@ }

const Trans = API<HTMLElementTagNameMap>(html);
const bind = <K extends keyof TransDataMap>(data: TransDataMap[K]) =>
const data = <K extends keyof TransDataMap>(data: TransDataMap[K]) =>
<T extends keyof HTMLElementTagNameMap>(

@@ -612,11 +612,30 @@ html: Factory<HTMLElementTagNameMap>,

const el = Trans.span('Greeting', bind({ name: 'world' }));
const el = Trans.span('Greeting', data({ name: 'world' }));
assert(el.children === 'Hello, world.');
assert(el.element.textContent === 'Hello, world.');
// @ts-expect-error
Trans.span('Greeting', bind({}));
Trans.span('Greeting', data({}));
// @ts-expect-error
Trans.span('', bind({ name: 'world' }));
Trans.span('', data({ name: 'world' }));
// @ts-expect-error
Trans.span(bind({ name: 'world' }));
Trans.span(data({ name: 'world' }));
const bind = <K extends keyof TransDataMap>(children: K, data: TransDataMap[K]) =>
<T extends keyof HTMLElementTagNameMap>(
html: Factory<HTMLElementTagNameMap>,
tag: T,
_: Attrs,
__: El.Children.Void,
) => {
const el = html(tag);
i18n.init((err, t) =>
el.textContent = err
? '{% Failed to initialize the translator. %}'
: t(children, data) ?? `{% Failed to translate "${children}". %}`);
return el;
};
assert(Trans.span(bind('Greeting', { name: 'world' })).children === undefined);
assert(Trans.span({}, bind('Greeting', { name: 'world' })).children === undefined);
assert(Trans.span({}, bind('Greeting', { name: 'world' })).element.textContent === 'Hello, world.');
});

@@ -623,0 +642,0 @@ 

dist/typed-dom.js

Sorry, the diff of this file is too big to display

package-lock.json

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc