Merge pull request #16 from ericmorand/issue_15

Resolve issue #15

Author: ericmorand

.editorconfig

@@ -14,7 +14,7 @@ indent_style = space
 indent_size = 4
 
 # Indentation override for all JS under lib directory
-[*.js]
+[*.ts]
 indent_size = 2
 
 # Matches the exact files either package.json or .travis.yml

.gitignore

@@ -3,3 +3,4 @@ npm-debug.log*
 node_modules/
 coverage
 .nyc_output
+package-lock.json

.nycrc

@@ -4,7 +4,7 @@
     "branches": 100,
     "functions": 100,
     "extension": [
-      ".js"
+      ".ts"
     ],
     "include": "src",
     "reporter": [

.travis.yml

@@ -1,14 +1,12 @@
 language: node_js
 node_js:
-  - 6
-  - 7
-  - 8
-  - 9
   - 10
+  - 11
+  - 12
 jobs:
   include:
     - stage: cover
-      node_js: 10
+      node_js: 13
       script:
         - npm run cover
         - npm run coverage

README.md

@@ -4,6 +4,12 @@
 
 Rebase your HTML assets relatively to the source file they were imported from.
 
+## Installation
+
+```bash
+npm install html-source-map-rebase
+```
+
 ## Example
 
 Consider the following Twig sources:
@@ -34,93 +40,36 @@ By rebasing the assets relatively to the file they were imported from, the resul
 html-source-map-rebase uses the mapping provided by source maps to resolve the original file the assets where imported from. That's why it *needs* a source map to perform its magic. Any tool able to generate a source map from a source file is appropriate. Here is how one could use [Twing](https://www.npmjs.com/package/twing) and html-source-map-rebase together to render an HTML document and rebase its assets.
 
 ``` javascript
-const {TwingEnvironment, TwingLoaderFilesystem} = require('twing');
-const Readable = require('stream').Readable;
-const through = require('through2');
-const Rebaser = require('html-source-map-rebase');
+import {TwingEnvironment, TwingLoaderFilesystem} from "twing";
+import {createRebaser} from "html-source-map-rebase";
 
-let loader = new TwingLoaderFilesystem('src');
-let twing = new TwingEnvironment(loader, {
+const loader = new TwingLoaderFilesystem('src');
+const environment = new TwingEnvironment(loader, {
   source_map: true
 });
 
-let html = twing.render('index.twig');
-
-let rebaser = new Rebaser({
-  map: twing.getSourceMap()
-});
-
-let data = '';
-let stream = new Readable({
-    encoding: 'utf8'
-});
-
-stream
-  .pipe(rebaser)
-  .pipe(through(function (chunk, enc, cb) {
-    data += chunk;
-
-    cb();
-  }))
-  .on('finish', function () {
-    console.log(data); // data contains the rendered HTML with rebased assets
-  })
-;
-
-stream.push(html);
-stream.push(null);
+return environment.render('index.twig')
+    .then((html) => {
+        const map = environment.getSourceMap();
+        const rebaser = createRebaser(Buffer.from(map));
+    
+        return rebaser.rebase(html);
+    })
+    .then((result) => {
+        // result.data contains the HTML markup with rebased assets
+        // result.map contains the source map
+    });
 ```
 
 ## API
 
-`let Rebaser = require('html-source-map-rebase')`
-
-### rebaser = new Rebaser(opts={})
-
-Return an object transform stream `rebaser` that expects entry filenames.
-
-Optionally pass in some opts:
-
-* opts.map:
-  
-    The belonging source map in the form of a JSON string. Defaults to `null`. Note that this module basically does nothing without a source map.
-
-* opts.rebase:
-    
-    Handles when the rebaser encounters an asset that may need rebasing.
-  
-    * Type: `Function`
-    * Default: `undefined`
-    * Signature:
-        * `url (Url)` - the [Url](https://nodejs.org/api/url.html) of the asset that may need rebasing.
-        * `source (String)` - the path of the file the asset was imported from.
-        * `done (Function)` - a callback function to invoke on completion. Accepts either `false`, `null`, `undefined` or an [Url](https://nodejs.org/api/url.html) as parameter. When called with `false`, the asset will not be rebased. When called with either `null` or `undefined`, the asset will be rebased using the [default rebasing logic](#rebasing-logic). When called with an Url, the asset will be rebased to that Url.
-
-## <a name="rebasing-logic"></a>Rebasing logic
-
-When html-source-map-rebase encounters an asset that may need rebasing, it first checks if it is a remote or a local asset. In the former case, the asset is not rebased at all. In the latter case, the asset is rebased be appending the asset path to the path of the source it's coming from.
-
-For example, a `foo/bar.png` asset coming from `/lorem/ipsum/index.twig` would be rebased to `/lorem/ipsum/foo/bar.png`.
-
-## Events
-
-In addition to the usual events emitted by node.js streams, html-source-map-rebase emits the following events:
-
-### rebaser.on('rebase', function(url) {})
-
-Every time an asset is rebased, this event fires with the rebased [Url](https://nodejs.org/api/url.html).
-
-## Installation
-
-```bash
-npm install html-source-map-rebase
-```
+Read the [documentation](https://nightlycommit.github.io/html-source-map-rebase) for more information.
 
 ## Contributing
 
 * Fork the main repository
 * Code
-* Implement tests using [node-tap](https://github.com/tapjs/node-tap)
+* Implement tests using [tape](https://www.npmjs.com/package/tape)
 * Issue a pull request keeping in mind that all pull requests must reference an issue in the issue queue
 
 ## License

docs/.nojekyll

@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.

docs/assets/highlight.css

@@ -0,0 +1,99 @@
+:root {
+    --light-hl-0: #800000;
+    --dark-hl-0: #808080;
+    --light-hl-1: #800000;
+    --dark-hl-1: #569CD6;
+    --light-hl-2: #000000;
+    --dark-hl-2: #D4D4D4;
+    --light-hl-3: #E50000;
+    --dark-hl-3: #9CDCFE;
+    --light-hl-4: #0000FF;
+    --dark-hl-4: #CE9178;
+    --light-hl-5: #0000FF;
+    --dark-hl-5: #569CD6;
+    --light-hl-6: #0070C1;
+    --dark-hl-6: #4FC1FF;
+    --light-hl-7: #795E26;
+    --dark-hl-7: #DCDCAA;
+    --light-hl-8: #A31515;
+    --dark-hl-8: #CE9178;
+    --light-hl-9: #001080;
+    --dark-hl-9: #9CDCFE;
+    --light-hl-10: #008000;
+    --dark-hl-10: #6A9955;
+    --light-code-background: #FFFFFF;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --code-background: var(--dark-code-background);
+} }
+
+:root[data-theme='light'] {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --code-background: var(--light-code-background);
+}
+
+:root[data-theme='dark'] {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+pre, code { background: var(--code-background); }