feat(browser): support browsers as well as node (#8)

feat(browser): support browsers as well as node

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';
```

BREAKING CHANGE: emitted new lines in strings are no longer platform dependent. `\n` is now always used.

Author: nicojs

.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 renamed to 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 '';
     }