Update docs

readme.md

@@ -21,6 +21,9 @@ Use this plugin for remark 13+.
 
 ## Install
 
+This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
+Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
+
 [npm][]:
 
 ```sh
@@ -44,46 +47,51 @@ A :i[lovely] language know as :abbr[HTML]{title="HyperText Markup Language"}.
 :::
 ```
 
-And our script, `example.js`, looks as follows:
+And our module, `example.js`, looks as follows:
 
 ```js
-var vfile = require('to-vfile')
+import {readSync} from 'to-vfile'
-var report = require('vfile-reporter')
+import {reporter} from 'vfile-reporter'
-var unified = require('unified')
+import {unified} from 'unified'
-var parse = require('remark-parse')
+import remarkParse from 'remark-parse'
-var directive = require('remark-directive')
+import remarkDirective from 'remark-directive'
-var remark2rehype = require('remark-rehype')
+import remarkRehype from 'remark-rehype'
-var format = require('rehype-format')
+import rehypeFormat from 'rehype-format'
-var stringify = require('rehype-stringify')
+import rehypeStringify from 'rehype-stringify'
-var visit = require('unist-util-visit')
+import {visit} from 'unist-util-visit'
-var h = require('hastscript')
+import {h} from 'hastscript'
+
+const file = readSync('example.md')
 
 unified()
-  .use(parse)
+  .use(remarkParse)
-  .use(directive)
+  .use(remarkDirective)
-  .use(htmlDirectives)
+  .use(customPlugin)
-  .use(remark2rehype)
+  .use(remarkRehype)
-  .use(format)
+  .use(rehypeFormat)
-  .use(stringify)
+  .use(rehypeStringify)
-  .process(vfile.readSync('example.md'), function (err, file) {
+  .process(file)
-    console.error(report(err || file))
+  .then((file) => {
+    console.error(reporter(file))
     console.log(String(file))
   })
 
 // This plugin is just an example! You can handle directives however you please!
-function htmlDirectives() {
+function customPlugin() {
-  return transform
+  return (tree) => {
+    visit(tree, (node) => {
+      if (
+        node.type === 'textDirective' ||
+        node.type === 'leafDirective' ||
+        node.type === 'containerDirective'
+      ) {
+        const data = node.data || (node.data = {})
+        const hast = h(node.name, node.attributes)
 
-  function transform(tree) {
+        data.hName = hast.tagName
-    visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], ondirective)
+        data.hProperties = hast.properties
-  }
+      }
-
+    })
-  function ondirective(node) {
-    var data = node.data || (node.data = {})
-    var hast = h(node.name, node.attributes)
-
-    data.hName = hast.tagName
-    data.hProperties = hast.properties
   }
 }
 ```
@@ -105,7 +113,10 @@ example.md: no issues found
 
 ## API
 
-### `remark().use(directive)`
+This package exports no identifiers.
+The default export is `remarkDirective`.
+
+### `unified().use(remarkDirective)`
 
 Configures remark so that it can parse and serialize directives.
 Doesn’t handle the directives: [create your own plugin][create-plugin] to do