Generate ECMAScript module for contrib (#1624)

* Create separate entry point of copy-tex for webpack

* Update katex.webpack.js comment

* Generate ECMAScript for contrib

* Update dependencies

* Comment out documentations

contrib/copy-tex/README.md

@@ -35,6 +35,12 @@ If you want to build your own custom copy handler based on this one,
 copy the `copy-tex.js` into your codebase and replace the `require`
 statement with `require('katex/contrib/copy-tex/katex2tex.js')`.
 
+<!-- TODO: uncomment when releasing a new version
+ECMAScript module is also available:
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/copy-tex.mjs" integrity="sha384-jLtlhlpasgCe2I4eVNEStxiWP4slZdWUk3E3FgbblMBxLs6YlA/rMNSeiGTRfAQ/" crossorigin="anonymous"></script>
+```` -->
+
 ### Known Issues
 
 This extension has been tested on Chrome, Firefox, Edge, and Safari.

contrib/copy-tex/copy-tex.js

@@ -1,4 +1,3 @@
-import './copy-tex.css';
 import katexReplaceWithTex from './katex2tex';
 
 // Global copy handler to modify behavior on .katex elements.

contrib/copy-tex/copy-tex.webpack.js

@@ -0,0 +1,6 @@
+/**
+ * This is the webpack entry point for KaTeX. As ECMAScript doesn't support
+ * CSS modules natively, a separate entry point is used.
+ */
+import './copy-tex.css';
+import './copy-tex.js';

contrib/mathtex-script-type/README.md

@@ -14,8 +14,6 @@ This extension should be loaded *after* all `script type=math/tex` blocks that y
 ```html
 <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/mathtex-script-type.min.js" integrity="sha384-zWYbd0NBwgTsgIdFKVprSfTh1mbMPe5Hz1X3yY4Sd1h/K1cQoUe36OGwAGz/PcDy"></script>
 ```
-Note that if the URL above contains `...` in-place of a version string, then this script has not yet
-been deployed to the CDN.
 You can download the script and use it locally, or from a local KaTeX installation instead.
 
 For example, in the following simple page, we first load KaTeX as usual.
@@ -34,3 +32,9 @@ After we're done writing `math/tex` scripts, we load this extension.
    </body>
 </html>
 ```
+
+<!-- TODO: uncomment when releasing a new version
+ECMAScript module is also available:
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/mathtex-script-type.mjs" integrity="sha384-En8cse3uW4xErwYkF3uTpWEw4BdLEWrWT2u1BttQuilGrJjAKcpGeC2ihwJ/wRD4" crossorigin="anonymous"></script>
+```` -->

docs/autorender.md

@@ -43,6 +43,19 @@ For example:
 </script>
 ```
 
+<!-- TODO: uncomment when releasing a new version
+ECMAScript module is also available:
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
+<script type="module">
+    import renderMathInElement from "https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.mjs";
+    renderMathInElement(document.body);
+</script>
+```
+
+> You can use [`nomodule` attribute](https://developer.mozilla.org/en/HTML/Element/script#Attributes)
+to provide a fallback for older browsers that do not support ES modules. -->
+
 ## API
 This extension exposes a single function, `window.renderMathInElement`, with
 the following API:

katex.webpack.js

@@ -1,6 +1,7 @@
 /**
- * This is the webpack entry point for KaTeX. As flow[1] and jest[2] doesn't support
- * CSS modules natively, a separate entry point is used and it is not flowtyped.
+ * This is the webpack entry point for KaTeX. As ECMAScript, flow[1] and jest[2]
+ * doesn't support CSS modules natively, a separate entry point is used and
+ * it is not flowtyped.
  *
  * [1] https://gist.github.com/lambdahands/d19e0da96285b749f0ef
  * [2] https://facebook.github.io/jest/docs/en/webpack.html

package.json

@@ -58,6 +58,7 @@
     "query-string": "^6.2.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.0",
+    "rollup-plugin-alias": "^1.4.0",
     "rollup-plugin-babel": "^4.0.2",
     "selenium-webdriver": "^3.6.0",
     "sri-toolbox": "^0.2.0",

rollup.config.js

@@ -1,14 +1,21 @@
 import babel from 'rollup-plugin-babel';
+import alias from 'rollup-plugin-alias';
+
+const {targets} = require('./webpack.common');
 
 process.env.NODE_ENV = 'esm';
 
-export default {
-    input: 'katex.js',
+export default targets.map(({name, entry}) => ({
+    input: entry.replace('.webpack', ''),
     output: {
-        file: 'dist/katex.mjs',
+        file: `dist/${name}.mjs`,
         format: 'es',
     },
     plugins: [
         babel({runtimeHelpers: true}),
+        alias({
+            katex: '../katex.mjs',
+        }),
     ],
-};
+    external: '../katex.mjs',
+}));

webpack.common.js

@@ -27,7 +27,7 @@ const targets /*: Array<Target> */ = [
     },
     {
         name: 'contrib/copy-tex',
-        entry: './contrib/copy-tex/copy-tex.js',
+        entry: './contrib/copy-tex/copy-tex.webpack.js',
     },
     {
         name: 'contrib/mathtex-script-type',

yarn.lock

@@ -7917,6 +7917,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-alias@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-alias/-/rollup-plugin-alias-1.4.0.tgz#120cba7c46621c03138f0ca6fd5dd2ade9872db9"
+  integrity sha512-lB094zdi19FS+1bVarVp9kBN0Zk41PdTGoCk0z8xesKO7RGjOo18cp1hUzEqrOQ4bM9+KLD9nbnu/XUxQm9pbg==
+  dependencies:
+    slash "^1.0.0"
+
 rollup-plugin-babel@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.0.2.tgz#c073eeb0cc246324e6f6feaedbb90093841a138c"