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

typed-html

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

typed-html - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

src/jsx/element-types.d.ts

2

package.json
{
"name": "typed-html",
"version": "0.2.0",
"version": "0.3.0",
"description": "",

@@ -5,0 +5,0 @@ "main": "src/elements.js",

[![Build Status](https://travis-ci.org/nicojs/typed-html.svg?branch=master)](https://travis-ci.org/nicojs/typed-html)
# Typed html
# Typed HTML
Html templates have never been this easy. Type safe using plain TypeScript with a minimal runtime footprint.
HTML templates have never been this easy. Type safe using plain TypeScript with a minimal runtime footprint.
No need to learn a template language, if you know TypeScript, you're set.

@@ -11,16 +12,21 @@ This:

// example.tsx
const items = ['item', 'item2'];
function handleClick(event: MouseEvent) { }
const item = 'item';
const icon = 'icon-add';
<ul>
{items.map(i => <li>{i}</li>)}
const ul = <ul>
<li>{item}</li>
</ul>;
<button onClick={click}>
typeof ul; // string
const button = <button onclick="handleClick">
<i class={icon}></i>
</button>
</button>;
typeof button; // string
console.log(ul);
console.log(button);
```
Becomes:
Prints:

@@ -32,3 +38,3 @@ ```html

</ul>
<button on-click="handleClick">
<button onclick="handleClick">
<i class="icon-add"></i>

@@ -58,2 +64,5 @@ </button>

Although we're configuring the compiler to use [React](https://facebook.github.io/react), this is not used at all.
Instead, we redirect all jsx element to typed-html's `elements.createElement`.
Now create a \*.ts**x** file. For example: `example.tsx` with the following content:

@@ -66,5 +75,5 @@

const w = 'world';
const strongTag = <p>Hello <strong>{w}</strong></p>;
const helloWorld = <p>Hello <strong>{w}</strong></p>;
typeof strongTag; // => Just a string of course
typeof helloWorld; // => Just a string of course
```

@@ -106,2 +115,44 @@

## Supported elements
All html5 elements and attributes are supported, except for the [svg](https://www.w3.org/TR/SVG/.
* Supported html elements: https://dev.w3.org/html5/html-author/#the-elements
* Supported html events: http://htmlcss.wikia.com/wiki/HTML5_Event_Attributes
Missing an element? Please create an issue or a PR to add it. It's easy to add.
### Add custom elements
You can add custom elements by adding them to the [intrinsic elements](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements) yourself:
```typescript
// MyCustomElements.d.ts
declare namespace JSX {
interface CustomElement {
customAttribute?: string;
}
interface IntrinsicElements {
myCustomElement: CustomElement;
}
}
```
Now you can use it:
```typescript
// UseCustomElement.ts
import * as elements from 'typed-html';
const myElement = <myCustomElement customAttribute="customValue"></myCustomElement>
console.log(myElement);
```
This prints:
```html
<my-custom-element custom-attribute="customValue"></my-custom-element>
```
## How it works

@@ -108,0 +159,0 @@

@@ -1,3 +0,2 @@

/// <reference path="./jsx/attributes.d.ts" />
/// <reference path="./jsx/css.d.ts" />
/// <reference path="./jsx/element-types.d.ts" />
/// <reference path="./jsx/events.d.ts" />

@@ -27,8 +26,17 @@ /// <reference path="./jsx/intrinsic-elements.d.ts" />

};
var escapeAttrNodeValue = function (value) {
return value.replace(/(&)|(")|(\u00A0)/g, function (_, amp, quote) {
if (amp)
return '&amp;';
if (quote)
return '&quot;';
return '&nbsp;';
});
};
var attributeValueToString = function (val) {
if (typeof val === 'function') {
return val.name;
if (val instanceof Date) {
return val.toISOString();
}
else {
return val.toString();
return escapeAttrNodeValue(val.toString());
}

@@ -35,0 +43,0 @@ };

declare namespace JSX {
// http://htmlcss.wikia.com/wiki/HTML5_Event_Attributes
interface EventHandler<E extends Event> {
(event: E): void;
// Only used in the <body> element to specify events triggered for a window object.
interface HtmlBodyElement {
onafterprint?: string;
onbeforeprint?: string;
onbeforeonload?: string;
onblur?: string;
onerror?: string;
onfocus?: string;
onhaschange?: string;
onload?: string;
onmessage?: string;
onoffline?: string;
ononline?: string;
onpagehide?: string;
onpageshow?: string;
onpopstate?: string;
onredo?: string;
onresize?: string;
onstorage?: string;
onundo?: string;
onunload?: string;
}
interface HtmlElement {
oncontextmenu?: string;
onkeydown?: string;
onkeypress?: string;
onkeyup?: string;
onclick?: string;
ondblclick?: string;
ondrag?: string;
ondragend?: string;
ondragenter?: string;
ondragleave?: string;
ondragover?: string;
ondragstart?: string;
ondrop?: string;
onmousedown?: string;
onmousemove?: string;
onmouseout?: string;
onmouseover?: string;
onmouseup?: string;
onmousewheel?: string;
onscroll?: string;
}
type FocusEventHandler<T> = EventHandler<FocusEvent>;
type ClipboardEventHandler<T> = EventHandler<ClipboardEvent>;
type CompositionEventHandler<T> = EventHandler<CompositionEvent>;
type FormEventHandler<T> = EventHandler<Event>;
type KeyboardEventHandler<T> = EventHandler<KeyboardEvent>;
type DragEventHandler<T> = EventHandler<DragEvent>;
type MouseEventHandler<T> = EventHandler<MouseEvent>;
type TouchEventHandler<T> = EventHandler<TouchEvent>;
type TransitionEventHandler<T> = EventHandler<TransitionEvent>;
type AnimationEventHandler<T> = EventHandler<AnimationEvent>;
type WheelEventHandler<T> = EventHandler<WheelEvent>;
type ChangeEventHandler<T> = EventHandler<Event>;
// Applies to all HTML5 elements, but is most common in <audio>, <embed />, <img />, <object>, and <video>.
interface FormEvents {
onblur?: string;
onchange?: string;
onfocus?: string;
onformchange?: string;
onforminput?: string;
oninput?: string;
oninvalid?: string;
onselect?: string;
onsubmit?: string;
}
interface HtmlInputElement extends FormEvents {
}
interface DomAttributes<T> {
// Clipboard Events
onCopy?: ClipboardEventHandler<T>;
onCopyCapture?: ClipboardEventHandler<T>;
onCut?: ClipboardEventHandler<T>;
onCutCapture?: ClipboardEventHandler<T>;
onPaste?: ClipboardEventHandler<T>;
onPasteCapture?: ClipboardEventHandler<T>;
interface HtmlFieldSetElement extends FormEvents {
}
// Composition Events
onCompositionEnd?: CompositionEventHandler<T>;
onCompositionEndCapture?: CompositionEventHandler<T>;
onCompositionStart?: CompositionEventHandler<T>;
onCompositionStartCapture?: CompositionEventHandler<T>;
onCompositionUpdate?: CompositionEventHandler<T>;
onCompositionUpdateCapture?: CompositionEventHandler<T>;
interface HtmlFormElement extends FormEvents {
}
// Focus Events
onFocus?: FocusEventHandler<T>;
onFocusCapture?: FocusEventHandler<T>;
onBlur?: FocusEventHandler<T>;
onBlurCapture?: FocusEventHandler<T>;
// Form Events
onChange?: FormEventHandler<T>;
onChangeCapture?: FormEventHandler<T>;
onInput?: FormEventHandler<T>;
onInputCapture?: FormEventHandler<T>;
onReset?: FormEventHandler<T>;
onResetCapture?: FormEventHandler<T>;
onSubmit?: FormEventHandler<T>;
onSubmitCapture?: FormEventHandler<T>;
// Keyboard Events
onKeyDown?: KeyboardEventHandler<T>;
onKeyDownCapture?: KeyboardEventHandler<T>;
onKeyPress?: KeyboardEventHandler<T>;
onKeyPressCapture?: KeyboardEventHandler<T>;
onKeyUp?: KeyboardEventHandler<T>;
onKeyUpCapture?: KeyboardEventHandler<T>;
// MouseEvents
onClick?: MouseEventHandler<T>;
onClickCapture?: MouseEventHandler<T>;
onContextMenu?: MouseEventHandler<T>;
onContextMenuCapture?: MouseEventHandler<T>;
onDoubleClick?: MouseEventHandler<T>;
onDoubleClickCapture?: MouseEventHandler<T>;
onDrag?: DragEventHandler<T>;
onDragCapture?: DragEventHandler<T>;
onDragEnd?: DragEventHandler<T>;
onDragEndCapture?: DragEventHandler<T>;
onDragEnter?: DragEventHandler<T>;
onDragEnterCapture?: DragEventHandler<T>;
onDragExit?: DragEventHandler<T>;
onDragExitCapture?: DragEventHandler<T>;
onDragLeave?: DragEventHandler<T>;
onDragLeaveCapture?: DragEventHandler<T>;
onDragOver?: DragEventHandler<T>;
onDragOverCapture?: DragEventHandler<T>;
onDragStart?: DragEventHandler<T>;
onDragStartCapture?: DragEventHandler<T>;
onDrop?: DragEventHandler<T>;
onDropCapture?: DragEventHandler<T>;
onMouseDown?: MouseEventHandler<T>;
onMouseDownCapture?: MouseEventHandler<T>;
onMouseEnter?: MouseEventHandler<T>;
onMouseLeave?: MouseEventHandler<T>;
onMouseMove?: MouseEventHandler<T>;
onMouseMoveCapture?: MouseEventHandler<T>;
onMouseOut?: MouseEventHandler<T>;
onMouseOutCapture?: MouseEventHandler<T>;
onMouseOver?: MouseEventHandler<T>;
onMouseOverCapture?: MouseEventHandler<T>;
onMouseUp?: MouseEventHandler<T>;
onMouseUpCapture?: MouseEventHandler<T>;
// Touch Events
onTouchCancel?: TouchEventHandler<T>;
onTouchCancelCapture?: TouchEventHandler<T>;
onTouchEnd?: TouchEventHandler<T>;
onTouchEndCapture?: TouchEventHandler<T>;
onTouchMove?: TouchEventHandler<T>;
onTouchMoveCapture?: TouchEventHandler<T>;
onTouchStart?: TouchEventHandler<T>;
onTouchStartCapture?: TouchEventHandler<T>;
// Wheel Events
onWheel?: WheelEventHandler<T>;
onWheelCapture?: WheelEventHandler<T>;
// Animation Events
onAnimationStart?: AnimationEventHandler<T>;
onAnimationStartCapture?: AnimationEventHandler<T>;
onAnimationEnd?: AnimationEventHandler<T>;
onAnimationEndCapture?: AnimationEventHandler<T>;
onAnimationIteration?: AnimationEventHandler<T>;
onAnimationIterationCapture?: AnimationEventHandler<T>;
// Transition Events
onTransitionEnd?: TransitionEventHandler<T>;
onTransitionEndCapture?: TransitionEventHandler<T>;
// Applies to all HTML5 elements, but is most common in <audio>, <embed />, <img />, <object>, and <video>.
interface MediaEvents {
onabort?: string;
oncanplay?: string;
oncanplaythrough?: string;
ondurationchange?: string;
onemptied?: string;
onended?: string;
onerror?: string;
onloadeddata?: string;
onloadedmetadata?: string;
onloadstart?: string;
onpause?: string;
onplay?: string;
onplaying?: string;
onprogress?: string;
onratechange?: string;
onreadystatechange?: string;
onseeked?: string;
onseeking?: string;
onstalled?: string;
onsuspend?: string;
ontimeupdate?: string;
onvolumechange?: string;
onwaiting?: string;
}
interface HtmlAudioElement extends MediaEvents { }
interface HtmlEmbedElement extends MediaEvents { }
interface HtmlImageElement extends MediaEvents { }
interface HtmlObjectElement extends MediaEvents { }
interface HtmlVideoElement extends MediaEvents { }
}

@@ -5,123 +5,115 @@ declare namespace JSX {

interface HtmlProps<T> extends HtmlAttributes<T> {
}
interface ChangeTargetHtmlProps<T extends HTMLElement> extends ChangeTargetHtmlAttributes<T> {
}
interface IntrinsicElements {
a: HtmlProps<HTMLAnchorElement>;
abbr: HtmlProps<HTMLElement>;
address: HtmlProps<HTMLElement>;
area: HtmlProps<HTMLAreaElement>;
article: HtmlProps<HTMLElement>;
aside: HtmlProps<HTMLElement>;
audio: HtmlProps<HTMLAudioElement>;
b: HtmlProps<HTMLElement>;
base: HtmlProps<HTMLBaseElement>;
bdi: HtmlProps<HTMLElement>;
bdo: HtmlProps<HTMLElement>;
big: HtmlProps<HTMLElement>;
blockquote: HtmlProps<HTMLElement>;
body: HtmlProps<HTMLBodyElement>;
br: HtmlProps<HTMLBRElement>;
button: HtmlProps<HTMLButtonElement>;
canvas: HtmlProps<HTMLCanvasElement>;
caption: HtmlProps<HTMLElement>;
cite: HtmlProps<HTMLElement>;
code: HtmlProps<HTMLElement>;
col: HtmlProps<HTMLTableColElement>;
colgroup: HtmlProps<HTMLTableColElement>;
data: HtmlProps<HTMLElement>;
datalist: HtmlProps<HTMLDataListElement>;
dd: HtmlProps<HTMLElement>;
del: HtmlProps<HTMLElement>;
details: HtmlProps<HTMLElement>;
dfn: HtmlProps<HTMLElement>;
dialog: HtmlProps<HTMLElement>;
div: HtmlProps<HTMLDivElement>;
dl: HtmlProps<HTMLDListElement>;
dt: HtmlProps<HTMLElement>;
em: HtmlProps<HTMLElement>;
embed: HtmlProps<HTMLEmbedElement>;
fieldset: HtmlProps<HTMLFieldSetElement>;
figcaption: HtmlProps<HTMLElement>;
figure: HtmlProps<HTMLElement>;
footer: HtmlProps<HTMLElement>;
form: HtmlProps<HTMLFormElement>;
h1: HtmlProps<HTMLHeadingElement>;
h2: HtmlProps<HTMLHeadingElement>;
h3: HtmlProps<HTMLHeadingElement>;
h4: HtmlProps<HTMLHeadingElement>;
h5: HtmlProps<HTMLHeadingElement>;
h6: HtmlProps<HTMLHeadingElement>;
head: HtmlProps<HTMLHeadElement>;
header: HtmlProps<HTMLElement>;
hgroup: HtmlProps<HTMLElement>;
hr: HtmlProps<HTMLHRElement>;
html: HtmlProps<HTMLHtmlElement>;
i: HtmlProps<HTMLElement>;
iframe: HtmlProps<HTMLIFrameElement>;
img: HtmlProps<HTMLImageElement>;
input: ChangeTargetHtmlProps<HTMLInputElement>;
ins: HtmlProps<HTMLModElement>;
kbd: HtmlProps<HTMLElement>;
keygen: HtmlProps<HTMLElement>;
label: HtmlProps<HTMLLabelElement>;
legend: HtmlProps<HTMLLegendElement>;
li: HtmlProps<HTMLLIElement>;
link: HtmlProps<HTMLLinkElement>;
main: HtmlProps<HTMLElement>;
map: HtmlProps<HTMLMapElement>;
mark: HtmlProps<HTMLElement>;
menu: HtmlProps<HTMLElement>;
menuitem: HtmlProps<HTMLElement>;
meta: HtmlProps<HTMLMetaElement>;
meter: HtmlProps<HTMLElement>;
nav: HtmlProps<HTMLElement>;
noindex: HtmlProps<HTMLElement>;
noscript: HtmlProps<HTMLElement>;
object: HtmlProps<HTMLObjectElement>;
ol: HtmlProps<HTMLOListElement>;
optgroup: HtmlProps<HTMLOptGroupElement>;
option: HtmlProps<HTMLOptionElement>;
output: HtmlProps<HTMLElement>;
p: HtmlProps<HTMLParagraphElement>;
param: HtmlProps<HTMLParamElement>;
picture: HtmlProps<HTMLElement>;
pre: HtmlProps<HTMLPreElement>;
progress: HtmlProps<HTMLProgressElement>;
q: HtmlProps<HTMLQuoteElement>;
rp: HtmlProps<HTMLElement>;
rt: HtmlProps<HTMLElement>;
ruby: HtmlProps<HTMLElement>;
s: HtmlProps<HTMLElement>;
samp: HtmlProps<HTMLElement>;
script: HtmlProps<HTMLElement>;
section: HtmlProps<HTMLElement>;
select: ChangeTargetHtmlProps<HTMLSelectElement>;
small: HtmlProps<HTMLElement>;
source: HtmlProps<HTMLSourceElement>;
span: HtmlProps<HTMLSpanElement>;
strong: HtmlProps<HTMLElement>;
style: HtmlProps<HTMLStyleElement>;
sub: HtmlProps<HTMLElement>;
summary: HtmlProps<HTMLElement>;
sup: HtmlProps<HTMLElement>;
table: HtmlProps<HTMLTableElement>;
tbody: HtmlProps<HTMLTableSectionElement>;
td: HtmlProps<HTMLTableDataCellElement>;
textarea: ChangeTargetHtmlProps<HTMLTextAreaElement>;
tfoot: HtmlProps<HTMLTableSectionElement>;
th: HtmlProps<HTMLTableHeaderCellElement>;
thead: HtmlProps<HTMLTableSectionElement>;
time: HtmlProps<HTMLElement>;
title: HtmlProps<HTMLTitleElement>;
tr: HtmlProps<HTMLTableRowElement>;
track: HtmlProps<HTMLTrackElement>;
u: HtmlProps<HTMLElement>;
ul: HtmlProps<HTMLUListElement>;
"var": HtmlProps<HTMLElement>;
video: HtmlProps<HTMLVideoElement>;
wbr: HtmlProps<HTMLElement>;
a: HtmlAnchorElement;
abbr: HtmlElement;
address: HtmlElement;
area: HtmlAreaElement;
article: HtmlElement;
aside: HtmlElement;
audio: HtmlAudioElement;
b: HtmlElement;
bb: HtmlBrowserButtonElement;
base: BaseElement;
bdi: HtmlElement;
bdo: HtmlElement;
blockquote: HtmlQuoteElement;
body: HtmlBodyElement;
br: HtmlElement;
button: HtmlButtonElement;
canvas: HtmlCanvasElement;
caption: HtmlElement;
cite: HtmlElement;
code: HtmlElement;
col: HtmlTableColElement;
colgroup: HtmlTableColElement;
commands: HtmlCommandElement;
data: DataElement;
datalist: HtmlDataListElement;
dd: HtmlElement;
del: HtmlModElement;
details: HtmlDetailsElement;
dfn: HtmlElement;
div: HtmlElement;
dl: HtmlElement;
dt: HtmlElement;
em: HtmlElement;
embed: HtmlEmbedElement;
fieldset: HtmlFieldSetElement;
figcaption: HtmlElement;
figure: HtmlElement;
footer: HtmlElement;
form: HtmlFormElement;
h1: HtmlElement;
h2: HtmlElement;
h3: HtmlElement;
h4: HtmlElement;
h5: HtmlElement;
h6: HtmlElement;
head: HtmlElement;
header: HtmlElement;
hr: HtmlElement;
html: HTMLElement;
i: HtmlElement;
iframe: HtmlIFrameElement;
img: HtmlImageElement;
input: HtmlInputElement;
ins: HtmlModElement;
kbd: HtmlElement;
keygen: KeygenElement;
label: HtmlLabelElement;
legend: HtmlLegendElement;
li: HtmlLIElement ;
link: HtmlLinkElement;
main: HtmlElement;
map: HtmlMapElement;
mark: HtmlElement;
menu: HtmlMenuElement;
meta: HtmlMetaElement;
meter: HtmlMeterElement;
nav: HtmlElement;
noscript: HtmlElement;
object: HtmlObjectElement;
ol: HtmlOListElement ;
optgroup: HtmlOptgroupElement;
option: HtmlOptionElement;
output: HtmlOutputElement;
p: HtmlElement;
param: HtmlParamElement;
pre: HtmlElement;
progress: HtmlProgressElement;
q: HtmlQuoteElement;
rb: HtmlElement;
rp: HtmlElement;
rt: HtmlElement;
rtc: HtmlElement;
ruby: HtmlElement;
s: HtmlElement;
samp: HtmlElement;
script: HtmlScriptElement;
section: HtmlElement;
select: HtmlSelectElement;
small: HtmlElement;
source: HtmlSourceElement;
span: HtmlElement;
strong: HtmlElement;
style: HtmlStyleElement;
sub: HtmlElement;
sup: HtmlElement;
table: HtmlTableElement;
tbody: HtmlElement;
td: HtmlTableDataCellElement ;
template: HtmlElement;
textarea: HtmlTextAreaElement;
tfoot: HtmlTableSectionElement;
th: HtmlTableHeaderCellElement;
thead: HtmlTableSectionElement;
time: HtmlTimeElement;
title: HtmlElement;
tr: HtmlTableRowElement;
track: HtmlTrackElement;
u: HtmlElement;
ul: HtmlElement;
var: HtmlElement;
video: HtmlVideoElement
wbr: HtmlElement;

@@ -128,0 +120,0 @@ // SVG

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc