feat(browser): support browsers as well as node

.gitignore

@@ -1,5 +1,7 @@
 node_modules
+/dist
 *.js
 *.d.ts
 *.map
-*.tsbuildinfo
+*.tsbuildinfo
+!src/jsx/*.d.ts

.npmignore

@@ -1,4 +1,4 @@
 **/**
-!readme.md
-!src/**/*.js
-!src/**/*.d.ts
+!dist/*.?(js|d.ts)
+!README.md
+!src/**/*.?(js|d.ts)

.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
  },

readme.md → README.md

@@ -79,6 +79,19 @@ However, the following piece of code will **NOT** compile:
 <a foo="bar"></a>; // => 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.

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",

src/elements.tsx

@@ -1,8 +1,6 @@
-/// <reference path="./jsx/element-types.ts" />
-/// <reference path="./jsx/events.ts" />
-/// <reference path="./jsx/intrinsic-elements.ts" />
-
-import * as os from 'os';
+/// <reference path="./jsx/element-types.d.ts" />
+/// <reference path="./jsx/events.d.ts" />
+/// <reference path="./jsx/intrinsic-elements.d.ts" />
 
 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 '';
  }