diff --git a/.gitignore b/.gitignore
index 5e4ec80d..65fd71b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
node_modules
+/dist
*.js
*.d.ts
*.map
-*.tsbuildinfo
\ No newline at end of file
+*.tsbuildinfo
+!src/jsx/*.d.ts
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
index 119eca24..0e65c595 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,4 +1,4 @@
**/**
-!readme.md
-!src/**/*.js
-!src/**/*.d.ts
\ No newline at end of file
+!dist/*.?(js|d.ts)
+!README.md
+!src/**/*.?(js|d.ts)
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8b4b7f9c..3c6beaf7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,7 +10,8 @@
"**/*?.js": {
"when": "$(basename).tsx"
},
- "**/*.d.ts": true,
+ "*/*.d.ts": true,
+ "src/jsx/*.d.ts": false,
"**/*.map": true,
"**/*.tsbuildinfo": true
},
diff --git a/readme.md b/README.md
similarity index 94%
rename from readme.md
rename to README.md
index 20ce5c66..0d1b7f69 100644
--- a/readme.md
+++ b/README.md
@@ -79,6 +79,19 @@ However, the following piece of code will **NOT** compile:
; // => Error: Property 'foo' does not exist on type 'HtmlAnchorTag'
```
+## Supported environments
+
+Typed HTML supports both NodeJS and (since 2.0) the browser.
+
+For use in the browser, either load typed-html as a module, or use a bundler like webpack or rollup to bundle the package for you.
+
+```ts
+// Direct ES import:
+import * as elements from './node_modules/typed-html/dist/elements.js';
+// OR, when using a bundler like rollup or webpack
+import * as elements from 'typed-html';
+```
+
## Supported scenarios
All template scenarios are supported with plain TypeScript.
diff --git a/package.json b/package.json
index e3ac1ec2..c2a32aeb 100644
--- a/package.json
+++ b/package.json
@@ -4,13 +4,14 @@
"description": "TypeSafe HTML templates using TypeScript. No need to learn a template library.",
"main": "src/elements.js",
"typings": "src/elements.d.ts",
+ "module": "dist/elements.js",
"repository": {
"type": "git",
"url": "https://github.com/nicojs/typed-html"
},
"scripts": {
- "prebuild": "rimraf \"+(test|src)/**/*.+(js|map|tsbuildinfo|d.ts)\" dist",
- "build": "tsc -b",
+ "prebuild": "rimraf \"+(test|src)/*.+(js|map|tsbuildinfo|d.ts)\" dist",
+ "build": "tsc -b && tsc -p src --outDir dist --module esnext --target esnext",
"pretest": "npm run build",
"test": "mocha",
"preversion": "npm test",
diff --git a/src/elements.tsx b/src/elements.tsx
index fc6acd8f..3aebca89 100644
--- a/src/elements.tsx
+++ b/src/elements.tsx
@@ -1,8 +1,6 @@
-///
-///
-///
-
-import * as os from 'os';
+///
+///
+///
type AttributeValue = number | string | Date | boolean;
@@ -79,8 +77,8 @@ const attributesToString = (attributes: Attributes | undefined): string => {
const contentsToString = (contents: any[] | undefined) => {
if (contents) {
return contents
- .map(elements => Array.isArray(elements) ? elements.join(os.EOL) : elements)
- .join(os.EOL);
+ .map(elements => Array.isArray(elements) ? elements.join('\n') : elements)
+ .join('\n');
} else {
return '';
}
diff --git a/src/jsx/element-types.ts b/src/jsx/element-types.d.ts
similarity index 71%
rename from src/jsx/element-types.ts
rename to src/jsx/element-types.d.ts
index d688fdff..7f41dc5a 100644
--- a/src/jsx/element-types.ts
+++ b/src/jsx/element-types.d.ts
@@ -1,7 +1,4 @@
declare namespace JSX {
-
- // Source: https://dev.w3.org/html5/html-author/#the-elements
-
interface HtmlTag {
accesskey?: string;
class?: string;
@@ -18,7 +15,6 @@ declare namespace JSX {
title?: string;
translate?: string | boolean;
}
-
interface HtmlAnchorTag extends HtmlTag {
href?: string;
target?: string;
@@ -29,8 +25,6 @@ declare namespace JSX {
hreflang?: string;
type?: string;
}
-
-
interface HtmlAreaTag extends HtmlTag {
alt?: string;
coords?: string;
@@ -43,7 +37,6 @@ declare namespace JSX {
hreflang?: string;
type?: string;
}
-
interface HtmlAudioTag extends HtmlTag {
src?: string;
autobuffer?: string;
@@ -51,7 +44,6 @@ declare namespace JSX {
loop?: string;
controls?: string;
}
-
interface BaseTag extends HtmlTag {
href?: string;
target?: string;
@@ -59,10 +51,8 @@ declare namespace JSX {
interface HtmlQuoteTag extends HtmlTag {
cite?: string;
}
-
interface HtmlBodyTag extends HtmlTag {
}
-
interface HtmlButtonTag extends HtmlTag {
action?: string;
autofocus?: string;
@@ -76,56 +66,65 @@ declare namespace JSX {
type?: string;
value?: string;
}
-
interface HtmlDataListTag extends HtmlTag {
}
-
interface HtmlCanvasTag extends HtmlTag {
width?: string;
height?: string;
}
-
interface HtmlTableColTag extends HtmlTag {
span?: string;
}
-
interface HtmlTableSectionTag extends HtmlTag {
}
-
interface HtmlTableRowTag extends HtmlTag {
}
-
interface DataTag extends HtmlTag {
value?: string;
}
interface HtmlEmbedTag extends HtmlTag {
- src?: string; type?: string; width?: string; height?: string;
+ src?: string;
+ type?: string;
+ width?: string;
+ height?: string;
[anything: string]: string | boolean | undefined;
}
-
interface HtmlFieldSetTag extends HtmlTag {
disabled?: string;
form?: string;
name?: string;
}
-
interface HtmlFormTag extends HtmlTag {
acceptCharset?: string;
- action?: string; autocomplete?: string; enctype?: string; method?: string; name?: string; novalidate?: string | boolean; target?: string;
+ action?: string;
+ autocomplete?: string;
+ enctype?: string;
+ method?: string;
+ name?: string;
+ novalidate?: string | boolean;
+ target?: string;
}
-
interface HtmlHtmlTag extends HtmlTag {
manifest?: string;
}
-
interface HtmlIFrameTag extends HtmlTag {
- src?: string; srcdoc?: string; name?: string; sandbox?: string; seamless?: string; width?: string; height?: string;
+ src?: string;
+ srcdoc?: string;
+ name?: string;
+ sandbox?: string;
+ seamless?: string;
+ width?: string;
+ height?: string;
}
-
interface HtmlImageTag extends HtmlTag {
- alt?: string; src?: string; crossorigin?: string; usemap?: string; ismap?: string; width?: string; height?: string;
+ alt?: string;
+ src?: string;
+ crossorigin?: string;
+ usemap?: string;
+ ismap?: string;
+ width?: string;
+ height?: string;
}
-
interface HtmlInputTag extends HtmlTag {
accept?: string;
action?: string;
@@ -157,24 +156,25 @@ declare namespace JSX {
value?: string;
width?: string;
}
-
interface HtmlModTag extends HtmlTag {
cite?: string;
datetime?: string | Date;
}
-
interface KeygenTag extends HtmlTag {
- autofocus?: string; challenge?: string; disabled?: string; form?: string; keytype?: string; name?: string;
+ autofocus?: string;
+ challenge?: string;
+ disabled?: string;
+ form?: string;
+ keytype?: string;
+ name?: string;
}
-
interface HtmlLabelTag extends HtmlTag {
- form?: string; for?: string;
+ form?: string;
+ for?: string;
}
-
interface HtmlLITag extends HtmlTag {
value?: string | number;
}
-
interface HtmlLinkTag extends HtmlTag {
href?: string;
crossorigin?: string;
@@ -185,18 +185,15 @@ declare namespace JSX {
sizes?: string;
integrity?: string;
}
-
interface HtmlMapTag extends HtmlTag {
name?: string;
}
-
interface HtmlMetaTag extends HtmlTag {
name?: string;
httpEquiv?: string;
content?: string;
charset?: string;
}
-
interface HtmlMeterTag extends HtmlTag {
value?: string | number;
min?: string | number;
@@ -205,35 +202,42 @@ declare namespace JSX {
high?: string | number;
optimum?: string | number;
}
-
interface HtmlObjectTag extends HtmlTag {
- data?: string; type?: string; name?: string; usemap?: string; form?: string; width?: string; height?: string;
+ data?: string;
+ type?: string;
+ name?: string;
+ usemap?: string;
+ form?: string;
+ width?: string;
+ height?: string;
}
-
interface HtmlOListTag extends HtmlTag {
- reversed?: string; start?: string | number;
+ reversed?: string;
+ start?: string | number;
}
-
interface HtmlOptgroupTag extends HtmlTag {
- disabled?: string; label?: string;
+ disabled?: string;
+ label?: string;
}
-
interface HtmlOptionTag extends HtmlTag {
- disabled?: string; label?: string; selected?: string; value?: string;
+ disabled?: string;
+ label?: string;
+ selected?: string;
+ value?: string;
}
-
interface HtmlOutputTag extends HtmlTag {
- for?: string; form?: string; name?: string;
+ for?: string;
+ form?: string;
+ name?: string;
}
-
interface HtmlParamTag extends HtmlTag {
- name?: string; value?: string;
+ name?: string;
+ value?: string;
}
-
interface HtmlProgressTag extends HtmlTag {
- value?: string | number; max?: string | number;
+ value?: string | number;
+ max?: string | number;
}
-
interface HtmlCommandTag extends HtmlTag {
type?: string;
label?: string;
@@ -243,18 +247,15 @@ declare namespace JSX {
radiogroup?: string;
default?: string;
}
-
- interface HtmlLegendTag extends HtmlTag { }
-
+ interface HtmlLegendTag extends HtmlTag {
+ }
interface HtmlBrowserButtonTag extends HtmlTag {
type?: string;
}
-
interface HtmlMenuTag extends HtmlTag {
type?: string;
label?: string;
}
-
interface HtmlScriptTag extends HtmlTag {
src?: string;
type?: string;
@@ -265,46 +266,67 @@ declare namespace JSX {
integrity?: string;
text?: string;
}
-
interface HtmlDetailsTag extends HtmlTag {
open?: string;
}
-
interface HtmlSelectTag extends HtmlTag {
- autofocus?: string; disabled?: string; form?: string; multiple?: string; name?: string; required?: string; size?: string;
+ autofocus?: string;
+ disabled?: string;
+ form?: string;
+ multiple?: string;
+ name?: string;
+ required?: string;
+ size?: string;
}
-
interface HtmlSourceTag extends HtmlTag {
- src?: string; type?: string; media?: string;
+ src?: string;
+ type?: string;
+ media?: string;
}
-
interface HtmlStyleTag extends HtmlTag {
- media?: string; type?: string; disabled?: string; scoped?: string;
+ media?: string;
+ type?: string;
+ disabled?: string;
+ scoped?: string;
}
-
interface HtmlTableTag extends HtmlTag {
}
-
interface HtmlTableDataCellTag extends HtmlTag {
- colspan?: string | number; rowspan?: string | number; headers?: string;
+ colspan?: string | number;
+ rowspan?: string | number;
+ headers?: string;
}
-
interface HtmlTextAreaTag extends HtmlTag {
- autofocus?: string; cols?: string; dirname?: string; disabled?: string; form?: string; maxlength?: string; minlength?: string; name?: string; placeholder?: string; readonly?: string; required?: string; rows?: string; wrap?: string;
+ autofocus?: string;
+ cols?: string;
+ dirname?: string;
+ disabled?: string;
+ form?: string;
+ maxlength?: string;
+ minlength?: string;
+ name?: string;
+ placeholder?: string;
+ readonly?: string;
+ required?: string;
+ rows?: string;
+ wrap?: string;
}
-
interface HtmlTableHeaderCellTag extends HtmlTag {
- colspan?: string | number; rowspan?: string | number; headers?: string; scope?: string;
+ colspan?: string | number;
+ rowspan?: string | number;
+ headers?: string;
+ scope?: string;
}
-
interface HtmlTimeTag extends HtmlTag {
datetime?: string | Date;
}
-
interface HtmlTrackTag extends HtmlTag {
- default?: string; kind?: string; label?: string; src?: string; srclang?: string;
+ default?: string;
+ kind?: string;
+ label?: string;
+ src?: string;
+ srclang?: string;
}
-
interface HtmlVideoTag extends HtmlTag {
src?: string;
poster?: string;
@@ -316,3 +338,4 @@ declare namespace JSX {
height?: string;
}
}
+//# sourceMappingURL=element-types.d.ts.map
\ No newline at end of file
diff --git a/src/jsx/events.ts b/src/jsx/events.d.ts
similarity index 78%
rename from src/jsx/events.ts
rename to src/jsx/events.d.ts
index 4537ac40..ff44838d 100644
--- a/src/jsx/events.ts
+++ b/src/jsx/events.d.ts
@@ -1,8 +1,4 @@
declare namespace JSX {
-
- // http://htmlcss.wikia.com/wiki/HTML5_Event_Attributes
-
- // Only used in the
element to specify events triggered for a window object.
interface HtmlBodyTag {
onafterprint?: string;
onbeforeprint?: string;
@@ -23,9 +19,7 @@ declare namespace JSX {
onstorage?: string;
onundo?: string;
onunload?: string;
-
}
-
interface HtmlTag {
oncontextmenu?: string;
onkeydown?: string;
@@ -48,8 +42,6 @@ declare namespace JSX {
onmousewheel?: string;
onscroll?: string;
}
-
- // Applies to all HTML5 elements, but is most common in