Provide smaller browser version of entities (#359)

Browser version leverages textarea to decode html entities.
The trick is took here #29

The size of browser bundle is down from 75906 to 47170 parsed
and from 25446 to 13775 gzipped. Significant for browser libs right?

Browser bundle is distributed with package.json field. Modern bundlers
are able to consume it.

```
"browser": {
  "./dist/cjs/index.js": "./dist/cjs/index.browser.js",
  "./dist/esm/index.js": "./dist/esm/index.browser.js"
},
```

Test is currently should be tested manually by test-browser script.

Author: TrySound

.gitignore

@@ -19,3 +19,4 @@ temp
 tmp
 TODO.md
 dist
+/index.html

lib/common/entities.browser.js

@@ -0,0 +1,7 @@
+var textarea;
+
+export function decodeEntity(name) {
+  textarea = textarea || document.createElement('textarea');
+  textarea.innerHTML = '&' + name;
+  return textarea.value;
+}

lib/common/entities.js

@@ -4,7 +4,7 @@
 //
 
 /*eslint quotes:0*/
-export default {
+var entities = {
   "Aacute":"\u00C1",
   "aacute":"\u00E1",
   "Abreve":"\u0102",
@@ -2131,3 +2131,19 @@ export default {
   "zwj":"\u200D",
   "zwnj":"\u200C"
 };
+
+var hasOwn = Object.prototype.hasOwnProperty;
+
+function has(object, key) {
+  return object
+    ? hasOwn.call(object, key)
+    : false;
+}
+
+export function decodeEntity(name) {
+  if (has(entities, name)) {
+    return entities[name]
+  } else {
+    return name;
+  }
+}

lib/common/utils.js

@@ -1,4 +1,4 @@
-import entities from './entities';
+import { decodeEntity } from './entities';
 
 /**
  * Utility functions
@@ -85,9 +85,10 @@ var DIGITAL_ENTITY_TEST_RE = /^#((?:x[a-f0-9]{1,8}|[0-9]{1,8}))/i;
 
 function replaceEntityPattern(match, name) {
   var code = 0;
+  var decoded = decodeEntity(name);
 
-  if (has(entities, name)) {
-    return entities[name];
+  if (name !== decoded) {
+    return decoded;
   } else if (name.charCodeAt(0) === 0x23/* # */ && DIGITAL_ENTITY_TEST_RE.test(name)) {
     code = name[1].toLowerCase() === 'x' ?
       parseInt(name.slice(2), 16)

lib/rules_inline/entity.js

@@ -1,7 +1,7 @@
 // Process html entity - {, ¯, ", ...
 
-import entities from '../common/entities';
-import { has, isValidEntityCode, fromCodePoint } from '../common/utils';
+import { decodeEntity } from '../common/entities';
+import { isValidEntityCode, fromCodePoint } from '../common/utils';
 
 
 var DIGITAL_RE = /^&#((?:x[a-f0-9]{1,8}|[0-9]{1,8}));/i;
@@ -29,8 +29,9 @@ export default function entity(state, silent) {
     } else {
       match = state.src.slice(pos).match(NAMED_RE);
       if (match) {
-        if (has(entities, match[1])) {
-          if (!silent) { state.pending += entities[match[1]]; }
+        var decoded = decodeEntity(match[1]);
+        if (match[1] !== decoded) {
+          if (!silent) { state.pending += decoded; }
           state.pos += match[0].length;
           return true;
         }

package.json

@@ -52,11 +52,16 @@
   "bin": "./bin/remarkable.js",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
+  "browser": {
+    "./dist/cjs/index.js": "./dist/cjs/index.browser.js",
+    "./dist/esm/index.js": "./dist/esm/index.browser.js"
+  },
   "engines": {
     "node": ">= 0.10.0"
   },
   "scripts": {
     "build": "make rollup",
+    "test-browser": "yarn build && node -r esm ./test/test-browser.js && serve .",
     "test": "make test",
     "test-ci": " nyc mocha -r esm -R spec --bail",
     "coverage": "yarn add coveralls@2 && nyc report --reporter=text-lcov | coveralls",
@@ -84,7 +89,8 @@
     "rollup": "^1.16.7",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.1.1"
+    "rollup-plugin-terser": "^5.1.1",
+    "serve": "^11.1.0"
   },
   "keywords": [
     "commonmark",

rollup.config.js

@@ -14,12 +14,30 @@ export default [
     plugins: [json()]
   },
 
+  {
+    input: './lib/index.js',
+    output: { file: 'dist/cjs/index.browser.js', format: 'cjs' },
+    external,
+    plugins: [
+      nodeResolve({ extensions: ['.browser.js', '.js'] })
+    ]
+  },
+
   {
     input: ['./lib/index.js', './lib/linkify.js'],
     output: { dir: 'dist/esm', format: 'esm' },
     external
   },
 
+  {
+    input: './lib/index.js',
+    output: { file: 'dist/esm/index.browser.js', format: 'esm' },
+    external,
+    plugins: [
+      nodeResolve({ extensions: ['.browser.js', '.js'] })
+    ]
+  },
+
   {
     input: './lib/umd.js',
     output: { file: 'dist/remarkable.js', format: 'umd', name },

test/test-browser.js

@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+
+const readFixture = file =>
+  JSON.stringify(fs.readFileSync(file, 'utf-8'));
+
+const readFixtureDir = dir =>
+  fs.readdirSync(dir).map(file => [JSON.stringify(file), readFixture(path.join(dir, file))]);
+
+const content = `
+<script type="module">
+  import RemarkableWithMap from './dist/esm/index.js';
+  import RemarkableWithTextarea from './dist/esm/index.browser.js';
+
+  const markdownWithMap = new RemarkableWithMap('commonmark');
+  const markdownWithTextarea = new RemarkableWithMap('commonmark');
+
+  const runTests = (name, input) => {
+    input = input.replace(/→/g, '\\t');
+    input.replace(/^\\.\\n([\\s\\S]*?)^\\.\\n([\\s\\S]*?)^\\.$/gm, function(__, md, html, offset, orig) {
+      const result1 = html === markdownWithMap.render(md);
+      const result2 = html === markdownWithTextarea.render(md);
+      console.log(
+        '%c %s %s %s',
+        result1 === result2 ? 'color: green' : 'color: red',
+        name,
+        result1,
+        result2
+      );
+    });
+  };
+
+  runTests('test/fixtures/commonmark/good.txt', ${readFixture('test/fixtures/commonmark/good.txt')});
+  ${readFixtureDir('test/fixtures/remarkable')
+    .map(([name, fixture]) => `runTests(${name}, ${fixture});`)
+    .join('\n')}
+</script>
+`
+
+fs.writeFileSync('index.html', content)