better-react-mathjax 1.0.3 → 2.0.0

package/MathJax3.d.ts

@@ -0,0 +1,5 @@
+export {
+    MathJaxConfig as MathJax3Config,
+    MathJaxObject as MathJax3Object
+} from "mathjax-full/js/components/startup"
+export { OptionList } from "mathjax-full/js/util/Options"

package/{MathJaxContext.d.ts → MathJaxContext/MathJaxContext.d.ts}

@@ -1,8 +1,6 @@
 import React, { FC } from "react";
-import type { MathJax2Config, MathJax2Object } from "./MathJax2";
-import type { MathJaxObject as MathJax3Object, MathJaxConfig as MathJax3Config } from "mathjax-full/js/components/startup";
-import type { OptionList } from "mathjax-full/js/util/Options";
-export type { MathJax3Object, MathJax3Config, OptionList };
+import type { MathJax2Config, MathJax2Object } from "../MathJax2";
+import type { MathJax3Config, MathJax3Object, OptionList } from "../MathJax3";
 export declare type TypesettingFunction = "tex2chtml" | "tex2chtmlPromise" | "tex2svg" | "tex2svgPromise" | "tex2mml" | "tex2mmlPromise" | "mathml2chtml" | "mathml2chtmlPromise" | "mathml2svg" | "mathml2svgPromise" | "mathml2mml" | "mathml2mmlPromise" | "asciimath2chtml" | "asciimath2chtmlPromise" | "asciimath2svg" | "asciimath2svgPromise" | "asciimath2mml" | "asciimath2mmlPromise";
 export interface MathJaxOverrideableProps {
     hideUntilTypeset?: "first" | "every";
@@ -19,13 +17,7 @@ export declare type MathJaxSubscriberProps = ({
     version: 3;
     promise: Promise<MathJax3Object>;
 }) & MathJaxOverrideableProps;
-export declare const MathJaxBaseContext: React.Context<({
-    version: 2;
-    promise: Promise<MathJax2Object>;
-} & MathJaxOverrideableProps) | ({
-    version: 3;
-    promise: Promise<MathJax3Object>;
-} & MathJaxOverrideableProps) | undefined>;
+export declare const MathJaxBaseContext: React.Context<MathJaxSubscriberProps | undefined>;
 interface MathJaxContextStaticProps extends MathJaxOverrideableProps {
     src?: string;
     onLoad?: () => void;

package/MathJaxContext/MathJaxContext.js

@@ -0,0 +1 @@
+"use strict";var v2Promise,v3Promise,__assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,o){void 0===o&&(o=n);var r=Object.getOwnPropertyDescriptor(t,n);r&&("get"in r?t.__esModule:!r.writable&&!r.configurable)||(r={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,o,r)}:function(e,t,n,o){e[o=void 0===o?n:o]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},react_1=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.MathJaxBaseContext=void 0,__importStar(require("react"))),DEFAULT_V2_SRC=(exports.MathJaxBaseContext=(0,react_1.createContext)(void 0),"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML"),DEFAULT_V3_SRC="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js",MathJaxContext=function(e){var o=e.config,t=e.version,t=void 0===t?3:t,n=e.src,n=void 0===n?2===t?DEFAULT_V2_SRC:DEFAULT_V3_SRC:n,r=e.onStartup,a=e.onLoad,i=e.onError,s=e.typesettingOptions,u=e.renderMode,u=void 0===u?"post":u,c=e.hideUntilTypeset,e=e.children,d=(0,react_1.useContext)(exports.MathJaxBaseContext);if(void 0!==(null==d?void 0:d.version)&&(null==d?void 0:d.version)!==t)throw Error("Cannot nest MathJaxContexts with different versions. MathJaxContexts should not be nested at all but if they are, they cannot have different versions. Stick with one version of MathJax in your app and avoid using more than one MathJaxContext.");if(2===t&&void 0!==v3Promise||3===t&&void 0!==v2Promise)throw Error("Cannot use MathJax versions 2 and 3 simultaneously in the same app due to how MathJax is set up in the browser; either you have multiple MathJaxContexts with different versions or you have mounted and unmounted MathJaxContexts with different versions. Please stick with one version of MathJax in your app. File an issue in the project Github page if you need this feature.");var h=(0,react_1.useRef)(d),d=(0,react_1.useRef)((null==d?void 0:d.version)||null);if(null===d.current)d.current=t;else if(d.current!==t)throw Error("Cannot change version of MathJax in a MathJaxContext after component has mounted. Either reload the page with a new setting when this should happen or use multiple, non-nested, MathJaxContexts in your app.");var l=n||(2===t?DEFAULT_V2_SRC:DEFAULT_V3_SRC);function f(t,n){o&&(window.MathJax=o);var e=document.createElement("script");e.type="text/javascript",e.src=l,e.async=!1,e.addEventListener("load",function(){var e=window.MathJax;r&&r(e),t(e),a&&a()}),e.addEventListener("error",function(e){return n(e)}),document.getElementsByTagName("head")[0].appendChild(e)}return void 0===h.current&&(d={typesettingOptions:s,renderMode:u,hideUntilTypeset:c},2===t?void 0===v2Promise&&("undefined"!=typeof window?(v2Promise=new Promise(f)).catch(function(e){if(!i)throw Error("Failed to download MathJax version 2 from '".concat(l,"' due to: ").concat(e));i(e)}):(v2Promise=Promise.reject()).catch(function(e){})):void 0===v3Promise&&("undefined"!=typeof window?(v3Promise=new Promise(f)).catch(function(e){if(!i)throw Error("Failed to download MathJax version 3 from '".concat(l,"' due to: ").concat(e));i(e)}):(v3Promise=Promise.reject()).catch(function(e){})),h.current=__assign(__assign({},d),2===t?{version:2,promise:v2Promise}:{version:3,promise:v3Promise})),react_1.default.createElement(exports.MathJaxBaseContext.Provider,{value:h.current},e)};exports.default=MathJaxContext;

package/MathJaxContext/index.d.ts

@@ -0,0 +1 @@
+export { default, default as MathJaxContext, MathJaxOverrideableProps, MathJaxContextProps, MathJaxBaseContext, MathJaxSubscriberProps } from "./MathJaxContext";

package/MathJaxContext/index.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}},MathJaxContext_1=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.MathJaxBaseContext=exports.MathJaxContext=exports.default=void 0,require("./MathJaxContext"));Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return __importDefault(MathJaxContext_1).default}}),Object.defineProperty(exports,"MathJaxContext",{enumerable:!0,get:function(){return __importDefault(MathJaxContext_1).default}}),Object.defineProperty(exports,"MathJaxBaseContext",{enumerable:!0,get:function(){return MathJaxContext_1.MathJaxBaseContext}});

package/MathJaxContext/package.json

@@ -0,0 +1,5 @@
+{
+    "sideEffects": false,
+    "module": "../esm/MathJaxContext/index.js",
+    "typings": "./index.d.ts"
+}

package/README.md

@@ -1,6 +1,4 @@
 
-<!-- prettier-ignore-start -->
-
 # A simple React component for MathJax #
 
 #### Note: The full documentation is available at https://github.com/fast-reflexes/better-react-mathjax ####
@@ -9,23 +7,17 @@ Up-to-date component for using MathJax in latest React (using functional compone
 React a pleasant experience without flashes of non-typeset content, both with respect to initial rendering as
 well as dynamic updates. Simple to use but with many configuration options.
 
-## Basic workflow ##
-
-`better-react-mathjax` introduces two React components - `MathJaxContext` and `MathJax`. For MathJax to work with React,
-wrap the outermost component containing math (or the entire app) in a `MathJaxContext` component. Then simply use `MathJax` components at
-different levels for the actual math. In the typical case, the content of a `MathJax` component can be everything from a
-subtree of the DOM to a portion of text in a long paragraph. The `MathJaxContext` is responsible for downloading MathJax
-and providing it to all wrapped `MathJax` components that typeset math.
-
-### Features ###
+## Features
 
 * Supports both MathJax version 2 and 3.
 * Supports local copy of MathJax or copy supplied via CDN.
-* Small imprint on production bundle with dependencies only for types (image shows a size of 7.32 KB and 2.37 KB gzipped in a NextJS project analyzed with their bundle analyzer).
+* Small imprint on production bundle with dependencies only for types (image shows a size of 6.18 KB and 2.3 KB gzipped in a NextJS project analyzed with their bundle analyzer).
 
+<br/>
 <p align="center" width="100%">
-  <img align="center" src="https://github.com/fast-reflexes/better-react-mathjax/blob/master/bundle_imprint.png" width="75%">
+  <img align="center" src="https://github.com/fast-reflexes/better-react-mathjax/blob/master/images/bundle_imprint.png" width="75%">
 </p>
+<br/>
 
 * Built in a modular fashion on top of MathJax with direct access to MathJax via the MathJax configuration.
 * Use MathJax functionality either through the `MathJax` component or by yourself through the `MathJaxBaseContext`.
@@ -33,25 +25,77 @@ and providing it to all wrapped `MathJax` components that typeset math.
   first and add it to the DOM afterwards (v. 3 only).
 * Hide your components before they are typeset to avoid flashes of non-typeset content and make the use of MathJax a
   pleasant experience.
-  
-### Installation ###
+* Complete - no other dependencies related to MathJax are needed to enable the use of MathJax in your React app.
 
-Add this library manually as a dependency to `package.json`...
+## Basic workflow
 
-    dependencies: {
-        "better-react-mathjax": "^1.0.3"
-    }
+### Installation
 
-... and then run `npm install` **or** let `npm` or `yarn` do it for you, depending on which package manager you have 
+Add this library manually as a dependency to `package.json`...
+```
+dependencies: {
+    "better-react-mathjax": "^2.0.0"
+}
+```
+... and then run `npm install` **or** let `npm` or `yarn` do it for you, depending on which package manager you have
 chosen to use:
-    
-    # npm
-    npm install better-react-mathjax
-
-    # yarn
-    yarn add better-react-mathjax
-
-## Examples ##
+```shell
+# npm
+npm install better-react-mathjax
+
+# yarn
+yarn add better-react-mathjax
+```
+
+### Usage
+
+`better-react-mathjax` introduces two React components - `MathJaxContext` and `MathJax`. For MathJax to work with React:
+
+1. Wrap your entire app in a `MathJaxContext` component (***only use one in your app***).
+```js
+const App = () => {
+
+   return (
+       <MathJaxContext>
+           <!-- APP CONTENT -->
+       </MathJaxContext>
+   )
+}
+```
+2. Then simply use `MathJax` components at different levels for the actual math. 
+```js
+const Component = () => {
+
+   return (
+       <div>
+           <MathJax>{ /* math content */ }</MathJax>
+           <h3>This is a header</h3>
+           <MathJax>
+               <div>
+                   <h4>This is a subheader</h4>
+                   <span>{ /* math content */ }</span>
+                   <h4>This is a second subheader</h4>
+                   <span>{ /* math content */ }</span>
+                   ...
+               </div>
+           </MathJax>
+           <p>
+               This is text which involves math <MathJax>{ /* math content */ }</MathJax> inside the paragraph.
+           </p>
+       </div>
+   )
+}
+```
+In the typical case, the content of a `MathJax` component can be everything from a subtree of the DOM to a portion of 
+text in a long paragraph. If you have a lot of math, try to wrap as much as possible in the same `MathJax` component.
+The `MathJaxContext` is responsible for downloading MathJax and providing it to all wrapped `MathJax` components that 
+typeset math. By default, `MathJaxContext` imports MathJax from a CDN which allows for use of Latex, AsciiMath and MathML 
+with [MathJax version 2](https://docs.mathjax.org/en/v2.7-latest/config-files.html#the-tex-mml-am-chtml-configuration-file) and 
+Latex and MathML with the default [MathJax version 3](https://docs.mathjax.org/en/latest/web/components/combined.html#tex-mml-chtml) with 
+HTML output for both. If you need something else or want to host your own copy of MathJax, read more about the `src`
+attribute of the `MathJaxContext` below.
+
+## Examples
 
 The first 3 are basic examples with zero configuration standard setup using MathJax version 3 with default MathJax config
 and no extra options. Note that sandboxes tend to be slower than use in a real environment.
@@ -59,36 +103,39 @@ and no extra options. Note that sandboxes tend to be slower than use in a real e
 ### Example 1: Basic example with Latex ####
 
 Standard setup using MathJax version 3 with default MathJax config and no extra options.
-
-    export default function App() {
+```js
+export default function App() {
+
+    return (
+        <MathJaxContext>
+              <h2>Basic MathJax example with Latex</h2>
+              <MathJax>{"\\(\\frac{10}{4x} \\approx 2^{12}\\)"}</MathJax>
+        </MathJaxContext>
+    );
     
-        return (
-            <MathJaxContext>
-                  <h2>Basic MathJax example with Latex</h2>
-                  <MathJax>{"\\(\\frac{10}{4x} \\approx 2^{12}\\)"}</MathJax>
-            </MathJaxContext>
-        );
-
+}
+```
 Sandbox: https://codesandbox.io/s/better-react-mathjax-basic-example-latex-bj8gd
 
 ### Example 2: Basic example with AsciiMath ####
 
-Using AsciiMath requires importing a specific loader (see the [MathJax documentation](http://docs.mathjax.org/en/latest/input/asciimath.html) for further information).
-AsciiMath uses the same display mode on the entire page, which is display math by default. 
+Using AsciiMath with the default version 3 import requires adding an extra loader (see the [MathJax documentation](http://docs.mathjax.org/en/latest/input/asciimath.html) 
+for further information). AsciiMath uses the same display mode on the entire page, which is display math by default. 
 It can be changed to inline math by adding `asciimath: { displaystyle: false }` to the input config.
-
-    export default function App() {
-        const config = {
-            loader: { load: ["input/asciimath"] }
-        };
-        
-        return (
-            <MathJaxContext config={config}>
-                <h2>Basic MathJax example with AsciiMath</h2>
-                <MathJax>{"`frac(10)(4x) approx 2^(12)`"}</MathJax>
-            </MathJaxContext>
-        );
-    }
+```js
+export default function App() {
+    const config = {
+        loader: { load: ["input/asciimath"] }
+    };
+    
+    return (
+        <MathJaxContext config={config}>
+            <h2>Basic MathJax example with AsciiMath</h2>
+            <MathJax>{"`frac(10)(4x) approx 2^(12)`"}</MathJax>
+        </MathJaxContext>
+    );
+}
+```
 
 Sandbox: https://codesandbox.io/s/better-react-mathjax-basic-example-asciimath-ddy4r
 
@@ -96,34 +143,34 @@ Sandbox: https://codesandbox.io/s/better-react-mathjax-basic-example-asciimath-d
 
 MathML is supported natively by a few but far from all browsers. It might be problematic to use with Typescript (no types for
 MathML included in this package).
-
-    export default function App() {
-        return (
-            <MathJaxContext>
-                <h2>Basic MathJax example with MathML</h2>
-                <MathJax>
-                    <math>
+```js
+export default function App() {
+    return (
+        <MathJaxContext>
+            <h2>Basic MathJax example with MathML</h2>
+            <MathJax>
+                <math>
+                    <mrow>
                         <mrow>
-                            <mrow>
-                                <mfrac>
-                                    <mn>10</mn>
-                                    <mi>4x</mi>
-                                </mfrac>
-                            </mrow>
-                            <mo>&asymp;</mo>
-                            <mrow>
-                                <msup>
-                                    <mn>2</mn>
-                                    <mn>12</mn>
-                                </msup>
-                            </mrow>
+                            <mfrac>
+                                <mn>10</mn>
+                                <mi>4x</mi>
+                            </mfrac>
                         </mrow>
-                    </math>
-                </MathJax>
-            </MathJaxContext>
-        );
-    }
-
+                        <mo>&asymp;</mo>
+                        <mrow>
+                            <msup>
+                                <mn>2</mn>
+                                <mn>12</mn>
+                            </msup>
+                        </mrow>
+                    </mrow>
+                </math>
+            </MathJax>
+        </MathJaxContext>
+    );
+}
+```
 Sandbox: https://codesandbox.io/s/better-react-mathjax-basic-example-mathml-20vv6
 
 ### Example 4: Elaborate example with Latex ###
@@ -133,11 +180,18 @@ Sandbox: https://codesandbox.io/s/better-react-mathjax-example-latex-3vsr5
 Sandbox: https://codesandbox.io/s/better-react-mathjax-example-asciimath-p0uf1
 
 ### Example 6: Elaborate example with MathML ###
-Sandbox link: https://codesandbox.io/s/better-react-mathjax-example-mathml-nprxz
 
 Make sure to study the comments in this file as MathML processing is a little bit different from Latex and AsciiMath.
 
+Sandbox link: https://codesandbox.io/s/better-react-mathjax-example-mathml-nprxz
+
 ### Example 7: Elaborate example with optimal settings for dynamic updates with Latex ###
+
+This example shows a configuration that in some particular cases has proven to result in a very smooth experience with
+no flashes of non-typeset content. **It is by no means recommended as a first attempt and can be tried if you 
+experience problems with flashes of non-typeset content, long waiting times or other undesired behaviour**. Especially for
+those using MathJax version 2, some of the configuration options can be used as an inspiration.
+
 Sandbox link: https://codesandbox.io/s/better-react-mathjax-example-latex-optimal-8nn9n
 
 # TypeScript types #
@@ -196,7 +250,6 @@ MathJax configuration object. Make sure it corresponds to the version used. More
 
 The location of MathJax.
 
-
 **Default**: `undefined` (default CDN `https://cdnjs.cloudflare.com` is used)
 
 Local or remote url to fetch MathJax from. More information about hosting your own copy of MathJax can be found
@@ -205,11 +258,14 @@ Local or remote url to fetch MathJax from. More information about hosting your o
 
 A source url may contain both some specific file and some query parameters corresponding to a configuration which, in turn, governs
 which additional assets MathJax fetches. The default sources used when this property is omitted are the same as those 
-listed in the [MathJax instruction](https://www.mathjax.org/#gettingstarted) (however from a different CDN). These correspond 
-to some typical and broad use of MathJax. If you have a use case where you, using standalone MathJax, would have to use a different
-source url, then you have to manually supply such a url (local or remote) here. This, in analogy to how you would modify 
-the script import to adjust to your needs in a plain HTML environment with direct use of MathJax. Read more about different
-configurations [here](https://docs.mathjax.org/en/latest/web/components/combined.html) (for MathJax 3) and 
+listed in the [MathJax instruction](https://www.mathjax.org/#gettingstarted) (however from a different CDN). This means
+that for version 2, the fetched resource (`MathJax.js?config=TeX-MML-AM_CHTML`) includes support for Latex, MML
+and AsciiMath with HTML output by default, and for version 3, the fetched resource (`tex-mml-chtml.js`) supports
+MML and Latex with HTML output. These correspond to some typical and broad use of MathJax in the browser. If you have a 
+use case where you, using standalone MathJax, would have to use a different source url, then you have to manually supply 
+such a url (local or remote) here. This, in analogy to how you would modify the script import to adjust to your needs in 
+a plain HTML environment with direct use of MathJax. Read more about different configurations 
+[here](https://docs.mathjax.org/en/latest/web/components/combined.html) (for MathJax 3) and 
 [here](https://docs.mathjax.org/en/v2.7-latest/config-files.html#common-configurations) (for MathJax 2).
 
 ### `version: 2 | 3 | undefined` ###
@@ -290,20 +346,20 @@ as this functionality is used by the `MathJax` component itself.***
 ## Custom use of MathJax directly ##
 You can use the underlying MathJax object directly (not through the `MathJax` component) if you want as well. The
 following snippet illustrates how to use `MathJaxBaseContext` to accomplish this.
-
-    // undefined or MathJaxSubscriberProps with properties version, hideUntilTypeset, renderMode, typesettingOptions and promise
-    const mjContext = useContext(MathJaxBaseContext)
-    if(mjContext)
-      mjContext.promise.then(mathJaxObject => { // do work with the MathJax object here })
-
+```js
+// undefined or MathJaxSubscriberProps with properties version, hideUntilTypeset, renderMode, typesettingOptions and promise
+const mjContext = useContext(MathJaxBaseContext)
+if(mjContext)
+  mjContext.promise.then(mathJaxObject => { /* do work with the MathJax object here */ })
+```
 This requires only a `MathJaxContext`, supplying the `MathJaxBaseContext`, to be in the hierarchy. The object passed from the `promise` property is the MathJax
 object for the version in use.
 
 Sandbox example: https://codesandbox.io/s/better-react-mathjax-custom-example-latex-e5kym
 
 ## MathJax documentation ##
-* Version 3: https://docs.mathjax.org/en/latest/
 
+* Version 3: https://docs.mathjax.org/en/latest/
 * Version 2: https://docs.mathjax.org/en/v2.7-latest/
 
 ## Github ##
@@ -326,10 +382,38 @@ Read full documentation, file problems or contribute on Github: https://github.c
   * Added installation instructions.
   * Added information about AsciiMath display mode.
   * Corrected typo in API documentation on `version` property.
+* v. 2.0.0
+  * **Breaking change**: can no longer use  MathJax versions 2 and 3 side by side in different
+    `MathJaxContext`s. This did typically not work as intended before either and even though this change is
+    breaking, it should not affect many users, if any. Docs have been updated and `MathJaxContext` now throws an error
+    if it has been initialized with one version and another `MathJaxContext` (later or simultaneous) has a different
+    value on the `version` prop.
+  * Added support for hot reload by always setting `dynamic` to `true` when `dynamic` is not explicitly set to `false`
+    and `process.env.NODE_ENV` is not `production`.
+  * Honoring possible style settings of `style.visibility` in `MathJax` component when visibility is not controlled
+    by the component itself.
+  * Corrected sandbox example with AsciiMath where Latex default delimiter was used instead of AsciiMath delimiter
+    (still worked because Latex is loaded by default as well).
+  * Improved documentation with clarifications:
+    * The entire app should be wrapped in the only `MathJaxContext` that should exist in a project.
+    * How to deal with the situation when you have a lot of math on your page.
+    * The features available with the default imports from CDN.
+    * Difference between inline and display math.
+  * Added Q & A section to documentation.
+  * Changed all checks for undefined to use `typeof X === "undefined"` instead of `X === undefined`.
+  * Added support for esm modules as well as the previous cjs modules.
+  * Added language tags on code samples
+
+## Migration guides
+
+* v1 to v2: 
+  * Remove all simultaneous use of MathJax version 2 and 3 in the same app and use only one version of MathJax
+    per loaded page. This means that even if you unmount the `MathJaxContext` and then remount it, it must have the
+    same version both times. If you load a new page context (e.g. not just change page in a SPA (single-page application))
+    the version can be determined anew. If you need to use both versions side by side, file an issue on the project 
+    Github page.
 
 ## License
 
 This project is licensed under the terms of the
 [MIT license](https://github.com/fast-reflexes/better-react-mathjax/blob/master/LICENSE).
-
-<!-- prettier-ignore-end -->

package/esm/MathJax/MathJax.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},__rest=this&&this.__rest||function(t,e){var n={};for(i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]]);return n};import React,{useContext,useEffect,useLayoutEffect,useRef}from"react";import{MathJaxBaseContext}from"../MathJaxContext";var typesettingFailed=function(t){return"Typesetting failed: ".concat(void 0!==t.message?t.message:t.toString())},MathJax=function(t){function r(){var t;"every"===h&&m&&"post"===v&&null!==f.current&&(f.current.style.visibility=null!=(t=null==(t=p.style)?void 0:t.visibility)?t:"visible"),_.current||("first"===h&&null!==f.current&&(f.current.style.visibility="visible"),n&&n(),_.current=!0),o&&o(),b.current=!1}var e=t.inline,i=void 0!==e&&e,e=t.hideUntilTypeset,n=t.onInitTypeset,o=t.onTypeset,s=t.text,u=t.dynamic,a=t.typesettingOptions,l=t.renderMode,c=t.children,p=__rest(t,["inline","hideUntilTypeset","onInitTypeset","onTypeset","text","dynamic","typesettingOptions","renderMode","children"]),y=useRef(""),f=useRef(null),d=useContext(MathJaxBaseContext),h=null!=e?e:null==d?void 0:d.hideUntilTypeset,v=null!=l?l:null==d?void 0:d.renderMode,g=null!=a?a:null==d?void 0:d.typesettingOptions,m=!1!==u&&(u||"production"!==process.env.NODE_ENV),_=useRef(!1),b=useRef(!1);return!b.current&&null!==f.current&&m&&"every"===h&&"post"===v&&(f.current.style.visibility="hidden"),("undefined"!=typeof window?useLayoutEffect:useEffect)(function(){if((m||!_.current)&&null!==f.current){if(!d)throw Error("MathJax was not loaded, did you use the MathJax component outside of a MathJaxContext?");if("pre"===v){if(!("string"==typeof(t=s)&&0<t.length))throw Error("Render mode 'pre' requires text prop to be set and non-empty, which was currently \"".concat(s,'"'));if(!a||!a.fn)throw Error("Render mode 'pre' requires 'typesettingOptions' prop with 'fn' property to be set on MathJax element or in the MathJaxContext");if(2===d.version)throw Error("Render mode 'pre' only available with MathJax 3, and version 2 is currently in use")}"post"!==v&&s===y.current||b.current||(b.current=!0,3===d.version?d.promise.then(function(e){var n;"pre"===v?(n=function(t){y.current=s,e.startup.document.clear(),e.startup.document.updateDocument(),null!==f.current&&(f.current.innerHTML=t.outerHTML),r()},a.fn.endsWith("Promise")?e.startup.promise.then(function(){return e[g.fn](s,__assign(__assign({},(null==g?void 0:g.options)||{}),{display:!i}))}).then(n).catch(function(t){throw r(),Error(typesettingFailed(t))}):e.startup.promise.then(function(){var t=e[g.fn](s,__assign(__assign({},(null==g?void 0:g.options)||{}),{display:!i}));n(t)}).catch(function(t){throw r(),Error(typesettingFailed(t))})):e.startup.promise.then(function(){return e.typesetClear([f.current]),e.typesetPromise([f.current])}).then(r).catch(function(t){throw r(),Error(typesettingFailed(t))})}).catch(function(t){throw r(),Error(typesettingFailed(t))}):d.promise.then(function(t){t.Hub.Queue(["Typeset",t.Hub,f.current]),t.Hub.Queue(r)}).catch(function(t){throw r(),Error(typesettingFailed(t))}))}var t}),React.createElement("span",__assign({},p,{style:__assign(__assign({display:i?"inline":"block"},p.style),{visibility:h?"hidden":null==(t=p.style)?void 0:t.visibility}),ref:f}),c)};export default MathJax;

package/esm/MathJax/index.js

@@ -0,0 +1 @@
+export{default as MathJax,default}from"./MathJax";

package/esm/MathJaxContext/MathJaxContext.js

@@ -0,0 +1 @@
+var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,o=1,n=arguments.length;o<n;o++)for(var a in t=arguments[o])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)};import React,{createContext,useContext,useRef}from"react";var v2Promise,v3Promise,MathJaxBaseContext=createContext(void 0),DEFAULT_V2_SRC="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML",DEFAULT_V3_SRC="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js",MathJaxContext=function(e){var n=e.config,t=e.version,t=void 0===t?3:t,o=e.src,o=void 0===o?2===t?DEFAULT_V2_SRC:DEFAULT_V3_SRC:o,a=e.onStartup,r=e.onLoad,i=e.onError,s=e.typesettingOptions,h=e.renderMode,h=void 0===h?"post":h,d=e.hideUntilTypeset,e=e.children,c=useContext(MathJaxBaseContext);if(void 0!==(null==c?void 0:c.version)&&(null==c?void 0:c.version)!==t)throw Error("Cannot nest MathJaxContexts with different versions. MathJaxContexts should not be nested at all but if they are, they cannot have different versions. Stick with one version of MathJax in your app and avoid using more than one MathJaxContext.");if(2===t&&void 0!==v3Promise||3===t&&void 0!==v2Promise)throw Error("Cannot use MathJax versions 2 and 3 simultaneously in the same app due to how MathJax is set up in the browser; either you have multiple MathJaxContexts with different versions or you have mounted and unmounted MathJaxContexts with different versions. Please stick with one version of MathJax in your app. File an issue in the project Github page if you need this feature.");var u=useRef(c),c=useRef((null==c?void 0:c.version)||null);if(null===c.current)c.current=t;else if(c.current!==t)throw Error("Cannot change version of MathJax in a MathJaxContext after component has mounted. Either reload the page with a new setting when this should happen or use multiple, non-nested, MathJaxContexts in your app.");var v=o||(2===t?DEFAULT_V2_SRC:DEFAULT_V3_SRC);function l(t,o){n&&(window.MathJax=n);var e=document.createElement("script");e.type="text/javascript",e.src=v,e.async=!1,e.addEventListener("load",function(){var e=window.MathJax;a&&a(e),t(e),r&&r()}),e.addEventListener("error",function(e){return o(e)}),document.getElementsByTagName("head")[0].appendChild(e)}return void 0===u.current&&(c={typesettingOptions:s,renderMode:h,hideUntilTypeset:d},2===t?void 0===v2Promise&&("undefined"!=typeof window?(v2Promise=new Promise(l)).catch(function(e){if(!i)throw Error("Failed to download MathJax version 2 from '".concat(v,"' due to: ").concat(e));i(e)}):(v2Promise=Promise.reject()).catch(function(e){})):void 0===v3Promise&&("undefined"!=typeof window?(v3Promise=new Promise(l)).catch(function(e){if(!i)throw Error("Failed to download MathJax version 3 from '".concat(v,"' due to: ").concat(e));i(e)}):(v3Promise=Promise.reject()).catch(function(e){})),u.current=__assign(__assign({},c),2===t?{version:2,promise:v2Promise}:{version:3,promise:v3Promise})),React.createElement(MathJaxBaseContext.Provider,{value:u.current},e)};export default MathJaxContext;export{MathJaxBaseContext};

package/esm/MathJaxContext/index.js

@@ -0,0 +1 @@
+export{default,default as MathJaxContext,MathJaxBaseContext}from"./MathJaxContext";

package/esm/index.js

@@ -0,0 +1 @@
+export{default as MathJax}from"./MathJax";export{default as MathJaxContext,MathJaxBaseContext}from"./MathJaxContext";

package/index.d.ts

@@ -1,3 +1,4 @@
 export { default as MathJax, MathJaxProps } from "./MathJax";
-export { default as MathJaxContext, MathJaxContextProps, MathJaxBaseContext, MathJaxSubscriberProps, MathJax3Object, MathJax3Config, OptionList } from "./MathJaxContext";
+export { default as MathJaxContext, MathJaxContextProps, MathJaxBaseContext, MathJaxSubscriberProps } from "./MathJaxContext";
 export { MathJax2Config, MathJax2Object } from "./MathJax2";
+export { MathJax3Object, MathJax3Config, OptionList } from "./MathJax3";

package/index.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MathJaxBaseContext=exports.MathJaxContext=exports.MathJax=void 0;var MathJax_1=require("./MathJax");Object.defineProperty(exports,"MathJax",{enumerable:!0,get:function(){return __importDefault(MathJax_1).default}});var MathJaxContext_1=require("./MathJaxContext");Object.defineProperty(exports,"MathJaxContext",{enumerable:!0,get:function(){return __importDefault(MathJaxContext_1).default}}),Object.defineProperty(exports,"MathJaxBaseContext",{enumerable:!0,get:function(){return MathJaxContext_1.MathJaxBaseContext}});
+"use strict";var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}},MathJax_1=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.MathJaxBaseContext=exports.MathJaxContext=exports.MathJax=void 0,require("./MathJax")),MathJaxContext_1=(Object.defineProperty(exports,"MathJax",{enumerable:!0,get:function(){return __importDefault(MathJax_1).default}}),require("./MathJaxContext"));Object.defineProperty(exports,"MathJaxContext",{enumerable:!0,get:function(){return __importDefault(MathJaxContext_1).default}}),Object.defineProperty(exports,"MathJaxBaseContext",{enumerable:!0,get:function(){return MathJaxContext_1.MathJaxBaseContext}});

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "better-react-mathjax",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "Up-to-date component for using MathJax in latest React (using functional components and hooks API). Focuses on being versatile and making the use of MathJax in React a pleasant experience without flashes of non-typeset content, both with respect to initial rendering as well as dynamic updates. Simple to use but with many configuration options.",
   "main": "index.js",
+  "module": "esm/index.js",
   "types": "index.d.ts",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fast-reflexes/better-react-mathjax.git"

package/MathJax.js

@@ -1 +0,0 @@
-"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,n){e[n=void 0===n?r:n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(r[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var n=0,i=Object.getOwnPropertySymbols(e);n<i.length;n++)t.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(r[i[n]]=e[i[n]]);return r};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__importStar(require("react")),MathJaxContext_1=require("./MathJaxContext"),typesettingFailed=function(e){return"Typesetting failed: "+(void 0!==e.message?e.message:e.toString())},MathJax=function(e){function n(){"every"===h&&u&&"post"===y&&null!==d.current&&(d.current.style.visibility="visible"),v.current||("first"===h&&null!==d.current&&(d.current.style.visibility="visible"),o&&o(),v.current=!0),s&&s(),g.current=!1}var t=e.inline,i=void 0!==t&&t,r=e.hideUntilTypeset,o=e.onInitTypeset,s=e.onTypeset,a=e.text,u=e.dynamic,c=e.typesettingOptions,l=e.renderMode,t=e.children,e=__rest(e,["inline","hideUntilTypeset","onInitTypeset","onTypeset","text","dynamic","typesettingOptions","renderMode","children"]),p=react_1.useRef(""),d=react_1.useRef(null),f=react_1.useContext(MathJaxContext_1.MathJaxBaseContext),h=void 0===r?null==f?void 0:f.hideUntilTypeset:r,y=void 0===l?null==f?void 0:f.renderMode:l,_=void 0===c?null==f?void 0:f.typesettingOptions:c,v=react_1.useRef(!1),g=react_1.useRef(!1);return!g.current&&null!==d.current&&u&&"every"===h&&"post"===y&&(d.current.style.visibility="hidden"),("undefined"!=typeof window?react_1.useLayoutEffect:react_1.useEffect)(function(){if((u||!v.current)&&null!==d.current){if(!f)throw Error("MathJax was not loaded, did you use the MathJax component outside of a MathJaxContext?");if("pre"===y){if(!("string"==typeof(e=a)&&0<e.length))throw Error("Render mode 'pre' requires text prop to be set and non-empty, which was currently \""+a+'"');if(!c||!c.fn)throw Error("Render mode 'pre' requires 'typesettingOptions' prop with 'fn' property to be set on MathJax element or in the MathJaxContext");if(2===f.version)throw Error("Render mode 'pre' only available with MathJax 3, and version 2 is currently in use")}"post"!==y&&a===p.current||g.current||(g.current=!0,3===f.version?f.promise.then(function(t){var r;"pre"===y?(r=function(e){p.current=a,t.startup.document.clear(),t.startup.document.updateDocument(),null!==d.current&&(d.current.innerHTML=e.outerHTML),n()},c.fn.endsWith("Promise")?t.startup.promise.then(function(){return t[_.fn](a,__assign(__assign({},(null==_?void 0:_.options)||{}),{display:!i}))}).then(r).catch(function(e){throw n(),Error(typesettingFailed(e))}):t.startup.promise.then(function(){var e=t[_.fn](a,__assign(__assign({},(null==_?void 0:_.options)||{}),{display:!i}));r(e)}).catch(function(e){throw n(),Error(typesettingFailed(e))})):t.startup.promise.then(function(){return t.typesetClear([d.current]),t.typesetPromise([d.current])}).then(n).catch(function(e){throw n(),Error(typesettingFailed(e))})}).catch(function(e){throw n(),Error(typesettingFailed(e))}):f.promise.then(function(e){e.Hub.Queue(["Typeset",e.Hub,d.current]),e.Hub.Queue(n)}).catch(function(e){throw n(),Error(typesettingFailed(e))}))}var e}),react_1.default.createElement("span",__assign({},e,{style:__assign(__assign({display:i?"inline":"block"},e.style),{visibility:h?"hidden":void 0}),ref:d}),t)};exports.default=MathJax;

package/MathJax2.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});

package/MathJaxContext.js

@@ -1 +0,0 @@
-"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[r]}})}:function(e,t,r,n){e[n=void 0===n?r:n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MathJaxBaseContext=void 0;var react_1=__importStar(require("react"));exports.MathJaxBaseContext=react_1.createContext(void 0);var v2Promise,v3Promise,DEFAULT_V2_SRC="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML",DEFAULT_V3_SRC="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js",MathJaxContext=function(e){var n=e.config,t=e.version,o=void 0===t?3:t,r=e.src,i=void 0===r?2===o?DEFAULT_V2_SRC:DEFAULT_V3_SRC:r,a=e.onStartup,s=e.onLoad,d=e.onError,u=e.typesettingOptions,c=e.renderMode,l=void 0===c?"post":c,t=e.hideUntilTypeset,r=e.children,c=react_1.useContext(exports.MathJaxBaseContext);if(void 0!==(null==c?void 0:c.version)&&(null==c?void 0:c.version)!==o)throw Error("Cannot nest MathJaxContexts with different versions. MathJaxContexts should not be nested at all but if they are, they inherit several properties. If you need different versions, then use multiple, non-nested, MathJaxContexts in your app.");e=react_1.useRef(c),c=react_1.useRef((null==c?void 0:c.version)||null);if(null===c.current)c.current=o;else if(c.current!==o)throw Error("Cannot change version of MathJax in a MathJaxContext after component has mounted. Either reload the page with a new setting when this should happen or use multiple, non-nested, MathJaxContexts in your app.");var h=i||(2===o?DEFAULT_V2_SRC:DEFAULT_V3_SRC);function f(t,r){n&&(window.MathJax=n);var e=document.createElement("script");e.type="text/javascript",e.src=i||(2===o?DEFAULT_V2_SRC:DEFAULT_V3_SRC),e.async=!1,e.addEventListener("load",function(){var e=window.MathJax;a&&a(e),t(e),s&&s()}),e.addEventListener("error",function(e){return r(e)}),document.getElementsByTagName("head")[0].appendChild(e)}return void 0===e.current&&(t={typesettingOptions:u,renderMode:l,hideUntilTypeset:t},2===o?void 0===v2Promise&&("undefined"!=typeof window?(v2Promise=new Promise(f)).catch(function(e){if(!d)throw Error("Failed to download MathJax version 2 from '"+h+"' due to: "+e);d(e)}):(v2Promise=Promise.reject()).catch(function(e){})):void 0===v3Promise&&("undefined"!=typeof window?(v3Promise=new Promise(f)).catch(function(e){if(!d)throw Error("Failed to download MathJax version 3 from '"+h+"' due to: "+e);d(e)}):(v3Promise=Promise.reject()).catch(function(e){})),e.current=__assign(__assign({},t),2===o?{version:2,promise:v2Promise}:{version:3,promise:v3Promise})),react_1.default.createElement(exports.MathJaxBaseContext.Provider,{value:e.current},r)};exports.default=MathJaxContext;