better-react-mathjax 2.3.0 → 3.0.0

package/MathJax/MathJax.js

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

package/MathJaxContext/MathJaxContext.d.ts

@@ -1,12 +1,13 @@
 import React, { FC, ReactNode } from "react";
 import type { MathJax2Config, MathJax2Object } from "../MathJax2";
-import type { MathJax3Config, MathJax3Object, OptionList } from "../MathJax3";
+import type { MathJax3Config, MathJax3Object, OptionList as MathJax3OptionList } from "../MathJax3";
+import type { MathJax4Config, MathJax4Object, OptionList as MathJax4OptionList } from "../MathJax4";
 export 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";
     typesettingOptions?: {
         fn: TypesettingFunction;
-        options?: Omit<OptionList, "display">;
+        options?: Omit<MathJax3OptionList | MathJax4OptionList, "display">;
     };
     renderMode?: "pre" | "post";
 }
@@ -16,6 +17,9 @@ export type MathJaxSubscriberProps = ({
 } | {
     version: 3;
     promise: Promise<MathJax3Object>;
+} | {
+    version: 4;
+    promise: Promise<MathJax4Object>;
 }) & MathJaxOverrideableProps;
 export declare const MathJaxBaseContext: React.Context<MathJaxSubscriberProps | undefined>;
 interface MathJaxContextStaticProps extends MathJaxOverrideableProps {
@@ -33,6 +37,10 @@ export type MathJaxContextProps = ({
     config?: MathJax3Config;
     version?: 3;
     onStartup?: (mathJax: MathJax3Object) => void;
+} | {
+    config?: MathJax4Config;
+    version?: 4;
+    onStartup?: (mathJax: MathJax4Object) => void;
 }) & MathJaxContextStaticProps;
 declare const MathJaxContext: FC<MathJaxContextProps>;
 export default MathJaxContext;

package/MathJaxContext/MathJaxContext.js

@@ -1 +1 @@
-"use strict";"use client";var v2Promise,v3Promise,__assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&("get"in o?t.__esModule:!o.writable&&!o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){e[r=void 0===r?n:r]=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||(()=>{var o=function(e){return(o=Object.getOwnPropertyNames||function(e){var t,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&(n[n.length]=t);return n})(e)};return function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n=o(e),r=0;r<n.length;r++)"default"!==n[r]&&__createBinding(t,e,n[r]);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.2/es5/tex-mml-chtml.js",MathJaxContext=function(e){var r=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,o=e.onStartup,i=e.onLoad,a=e.asyncLoad,s=void 0!==a&&a,u=e.onError,a=e.typesettingOptions,c=e.renderMode,c=void 0===c?"post":c,d=e.hideUntilTypeset,e=e.children,h=(0,react_1.useContext)(exports.MathJaxBaseContext);if(void 0!==(null==h?void 0:h.version)&&(null==h?void 0:h.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 l=(0,react_1.useRef)(h),h=(0,react_1.useRef)((null==h?void 0:h.version)||null);if(null===h.current)h.current=t;else if(h.current!==t)throw Error("Cannot change version of MathJax in a MathJaxContext after it has mounted. Reload the page with a new version when this must happen.");var f=n||(2===t?DEFAULT_V2_SRC:DEFAULT_V3_SRC);function v(t,n){r&&(window.MathJax=r);var e=document.createElement("script");e.type="text/javascript",e.src=f,e.async=s,e.addEventListener("load",function(){var e=window.MathJax;o&&o(e),t(e),i&&i()}),e.addEventListener("error",function(e){return n(e)}),document.getElementsByTagName("head")[0].appendChild(e)}return void 0===l.current&&(h={typesettingOptions:a,renderMode:c,hideUntilTypeset:d},2===t?void 0===v2Promise&&("undefined"!=typeof window?(v2Promise=new Promise(v)).catch(function(e){if(!u)throw Error("Failed to download MathJax version 2 from '".concat(f,"' due to: ").concat(JSON.stringify(e)));u(e)}):(v2Promise=Promise.reject()).catch(function(e){})):void 0===v3Promise&&("undefined"!=typeof window?(v3Promise=new Promise(v)).catch(function(e){if(!u)throw Error("Failed to download MathJax version 3 from '".concat(f,"' due to: ").concat(e));u(e)}):(v3Promise=Promise.reject()).catch(function(e){})),l.current=__assign(__assign({},h),2===t?{version:2,promise:v2Promise}:{version:3,promise:v3Promise})),react_1.default.createElement(exports.MathJaxBaseContext.Provider,{value:l.current},e)};exports.default=MathJaxContext;
+"use strict";"use client";var v2Promise,v3Promise,v4Promise,__assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,r){void 0===r&&(r=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&("get"in n?t.__esModule:!n.writable&&!n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,r,n)}:function(e,t,o,r){e[r=void 0===r?o:r]=t[o]}),__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||(()=>{var n=function(e){return(n=Object.getOwnPropertyNames||function(e){var t,o=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&(o[o.length]=t);return o})(e)};return function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o=n(e),r=0;r<o.length;r++)"default"!==o[r]&&__createBinding(t,e,o[r]);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.2/es5/tex-mml-chtml.js",DEFAULT_V4_SRC="https://cdn.jsdelivr.net/npm/mathjax@4.1.0/tex-mml-chtml.js",MathJaxContext=function(e){var r=e.config,t=e.version,t=void 0===t?4:t,o=e.src,o=void 0===o?2===t?DEFAULT_V2_SRC:3===t?DEFAULT_V3_SRC:DEFAULT_V4_SRC:o,n=e.onStartup,i=e.onLoad,a=e.asyncLoad,s=void 0!==a&&a,c=e.onError,a=e.typesettingOptions,d=e.renderMode,d=void 0===d?"post":d,u=e.hideUntilTypeset,e=e.children,h=(0,react_1.useContext)(exports.MathJaxBaseContext);if(void 0!==(null==h?void 0:h.version)&&(null==h?void 0:h.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||void 0!==v4Promise)||3===t&&(void 0!==v2Promise||void 0!==v4Promise)||4===t&&(void 0!==v2Promise||void 0!==v3Promise))throw Error("Cannot use two MathJax versions 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 v=(0,react_1.useRef)(h),h=(0,react_1.useRef)((null==h?void 0:h.version)||null);if(null===h.current)h.current=t;else if(h.current!==t)throw Error("Cannot change version of MathJax in a MathJaxContext after it has mounted. Reload the page with a new version when this must happen.");var l=o||(2===t?DEFAULT_V2_SRC:3===t?DEFAULT_V3_SRC:DEFAULT_V4_SRC);function f(t,o){r&&(window.MathJax=r);var e=document.createElement("script");e.type="text/javascript",e.src=l,e.async=s,e.addEventListener("load",function(){var e=window.MathJax;n&&n(e),t(e),i&&i()}),e.addEventListener("error",function(e){return o(e)}),document.getElementsByTagName("head")[0].appendChild(e)}return void 0===v.current&&(h={typesettingOptions:a,renderMode:d,hideUntilTypeset:u},2===t?void 0===v2Promise&&("undefined"!=typeof window?(v2Promise=new Promise(f)).catch(function(e){if(!c)throw Error("Failed to download MathJax version 2 from '".concat(l,"' due to: ").concat(JSON.stringify(e)));c(e)}):(v2Promise=Promise.reject()).catch(function(e){})):3===t?void 0===v3Promise&&("undefined"!=typeof window?(v3Promise=new Promise(f)).catch(function(e){if(!c)throw Error("Failed to download MathJax version 3 from '".concat(l,"' due to: ").concat(e));c(e)}):(v3Promise=Promise.reject()).catch(function(e){})):void 0===v4Promise&&("undefined"!=typeof window?(v4Promise=new Promise(f)).catch(function(e){if(!c)throw Error("Failed to download MathJax version 4 from '".concat(l,"' due to: ").concat(e));c(e)}):(v4Promise=Promise.reject()).catch(function(e){})),v.current=__assign(__assign({},h),2===t?{version:2,promise:v2Promise}:3===t?{version:3,promise:v3Promise}:{version:4,promise:v4Promise})),react_1.default.createElement(exports.MathJaxBaseContext.Provider,{value:v.current},e)};exports.default=MathJaxContext;

package/README.md

@@ -9,7 +9,7 @@ well as dynamic updates. Simple to use but with many configuration options.
 
 ## Features
 
-* Supports both MathJax version 2 and 3.
+* Supports both MathJax version 2, 3 and 4.
 * 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 6.18 KB and 2.3 KB gzipped in a NextJS project analyzed with their bundle analyzer).
 
@@ -21,8 +21,8 @@ well as dynamic updates. Simple to use but with many configuration options.
 
 * 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`.
-* Either put your math into the DOM with React first and let MathJax typeset afterwards (v. 2 and 3), or typeset with MathJax
-  first and add it to the DOM afterwards (v. 3 only).
+* Either put your math into the DOM with React first and let MathJax typeset afterwards (v. 2, 3 and 4), or typeset with MathJax
+  first and add it to the DOM afterwards (v. 3 and 4 only).
 * Hide your components before they are typeset to avoid flashes of non-typeset content and make the use of MathJax a
   pleasant experience.
 * Complete - no other dependencies related to MathJax are needed to enable the use of MathJax in your React app.
@@ -34,7 +34,7 @@ well as dynamic updates. Simple to use but with many configuration options.
 Add this library manually as a dependency to `package.json`...
 ```
 dependencies: {
-    "better-react-mathjax": "^2.3.0"
+    "better-react-mathjax": "^3.0.0"
 }
 ```
 ... and then run `npm install` **or** let `npm` or `yarn` do it for you, depending on which package manager you have
@@ -91,8 +91,9 @@ text in a long paragraph. If you have a lot of math, try to wrap as much as poss
 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`
+Latex and MathML with [MathJax version 3](https://docs.mathjax.org/en/v3.2/web/components/combined.html#tex-mml-chtml) 
+and the default [MathJax version 4](https://docs.mathjax.org/en/latest/web/components/combined.html#tex-mml-chtml) with 
+HTML output for all three. If you need something else or want to host your own copy of MathJax, read more about the `src`
 attribute of the `MathJaxContext` below.
 
 Note that both `MathJax` and `MathJaxContext` components ship with `"use client"` directives and are thus client 
@@ -100,12 +101,12 @@ components in contexts where this is taken into account.
 
 ## Examples
 
-The first 3 are basic examples with zero configuration standard setup using MathJax version 3 with default MathJax config
+The first 3 are basic examples with zero configuration standard setup using MathJax version 4 with default MathJax config
 and no extra options. Note that sandboxes tend to be slower than use in a real environment.
 
 ### Example 1: Basic example with Latex ####
 
-Standard setup using MathJax version 3 with default MathJax config and no extra options.
+Standard setup using MathJax version 4 with default MathJax config and no extra options.
 ```js
 export default function App() {
 
@@ -122,7 +123,7 @@ Sandbox: https://codesandbox.io/s/better-react-mathjax-basic-example-latex-bj8gd
 
 ### Example 2: Basic example with AsciiMath ####
 
-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) 
+Using AsciiMath with the default version 4 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.
 ```js
@@ -200,7 +201,8 @@ Sandbox link: https://codesandbox.io/s/better-react-mathjax-example-latex-optima
 # TypeScript types #
 This project has both its own types and MathJax types included in the package. For MathJax version 2, a refactored and updated
 version of [`@types/mathjax`](https://www.npmjs.com/package/@types/mathjax) is used whereas for MathJax version 3, this package
-depends on the types from [`mathjax-full`](https://www.npmjs.com/package/mathjax-full). Nonetheless, none of the logic from
+depends on the types from [`mathjax-full`](https://www.npmjs.com/package/mathjax-full). Finally for version 4, the types 
+are taken from [`@mathjax/src`](https://www.npmjs.com/package/@mathjax/src). Nonetheless, none of the logic from
 these are used in this project so after building production code and tree-shaking, these dependencies will not affect the
 size of the final bundle. If you would prefer a separate `@types` package for this project, please make a suggestion about this in an issue on the
 project Github page. Note also that issues with the MathJax 2 types can be addressed and updated within this project whereas
@@ -263,14 +265,14 @@ A source url may contain both some specific file and some query parameters corre
 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).
 
-### `version: 2 | 3 | undefined` ###
+### `version: 2 | 3 | 4 | undefined` ###
 
 MathJax version to use. Must be synced with any `config` passed.
 
-**Default**: `3`
+**Default**: `4`
 
 Version of MathJax to use. If set, make sure that any configuration and url to MathJax uses the same version. If `src`
-is not specified, setting `version`to `2` currently makes use of version 2.7.9 and setting it to `3` uses 3.2.0.
+is not specified, setting `version`to `2` currently makes use of version 2.7.9, setting it to `3` uses 3.2.0 and setting it to `4` uses 4.1.0.
 
 ### `onStartUp: (mathJax: MathJax2Object | MathJax3Object) => void) | undefined` ###
 
@@ -327,7 +329,7 @@ Callback for when the content has been typeset (not only initially).
 ### `text: string | undefined` ###
 
 *Required* and *only* used when `renderMode` is set to `pre`. Should be the math string to convert without any delimiters.
-Requires `typesettingOptions` to be set and version to be `3`. If `renderMode` is `post`, this property is ignored.
+Requires `typesettingOptions` to be set and version to be `3` or `4`. If `renderMode` is `post`, this property is ignored.
 
 **Default**: `undefined`
 
@@ -360,7 +362,8 @@ Sandbox example: https://codesandbox.io/s/better-react-mathjax-custom-example-la
 
 ## MathJax documentation ##
 
-* Version 3: https://docs.mathjax.org/en/latest/
+* Version 4: https://docs.mathjax.org/en/latest/
+* Version 3: https://docs.mathjax.org/en/v3.2/
 * Version 2: https://docs.mathjax.org/en/v2.7-latest/
 
 ## Github ##

package/esm/MathJax/MathJax.js

@@ -1 +1 @@
-"use client";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var n={};for(i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]]);return n};import React,{useContext,useEffect,useLayoutEffect,useRef}from"react";import{MathJaxBaseContext}from"../MathJaxContext";var typesettingFailed=function(e){return"Typesetting failed: ".concat(void 0!==e.message?e.message:JSON.stringify(e))},MathJax=function(e){function r(){var e;"every"===h&&m&&"post"===v&&null!==f.current&&(f.current.style.visibility=null!=(e=null==(e=p.style)?void 0:e.visibility)?e:"visible"),_.current||("first"===h&&null!==f.current&&(f.current.style.visibility="visible"),n&&n(),_.current=!0),o&&o(),b.current=!1}var t=e.inline,i=void 0!==t&&t,t=e.hideUntilTypeset,n=e.onInitTypeset,o=e.onTypeset,s=e.text,u=e.dynamic,a=e.typesettingOptions,l=e.renderMode,c=e.children,p=__rest(e,["inline","hideUntilTypeset","onInitTypeset","onTypeset","text","dynamic","typesettingOptions","renderMode","children"]),y=useRef(""),f=useRef(null),d=useContext(MathJaxBaseContext),h=null!=t?t: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(e=s)&&0<e.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(t){var n;"pre"===v?(n=function(e){y.current=s,t.startup.document.clear(),t.startup.document.updateDocument(),null!==f.current&&(f.current.innerHTML=e.outerHTML),r()},a.fn.endsWith("Promise")?t.startup.promise.then(function(){return t[g.fn](s,__assign(__assign({},(null==g?void 0:g.options)||{}),{display:!i}))}).then(n).catch(function(e){throw r(),Error(typesettingFailed(e))}):t.startup.promise.then(function(){var e=t[g.fn](s,__assign(__assign({},(null==g?void 0:g.options)||{}),{display:!i}));n(e)}).catch(function(e){throw r(),Error(typesettingFailed(e))})):t.startup.promise.then(function(){return t.typesetClear([f.current]),t.typesetPromise([f.current])}).then(r).catch(function(e){throw r(),Error(typesettingFailed(e))})}).catch(function(e){throw r(),Error(typesettingFailed(e))}):d.promise.then(function(e){e.Hub.Queue(["Typeset",e.Hub,f.current]),e.Hub.Queue(r)}).catch(function(e){throw r(),Error(typesettingFailed(e))}))}var e}),React.createElement("span",__assign({},p,{style:__assign(__assign({display:i?"inline":"block"},p.style),{visibility:h?"hidden":null==(e=p.style)?void 0:e.visibility}),ref:f}),c)};export default MathJax;
+"use client";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var n={};for(i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]]);return n};import React,{useContext,useEffect,useLayoutEffect,useRef}from"react";import{MathJaxBaseContext}from"../MathJaxContext";var typesettingFailed=function(e){return"Typesetting failed: ".concat(void 0!==e.message?e.message:JSON.stringify(e))},MathJax=function(e){function r(){var e;"every"===h&&m&&"post"===v&&null!==f.current&&(f.current.style.visibility=null!=(e=null==(e=p.style)?void 0:e.visibility)?e:"visible"),_.current||("first"===h&&null!==f.current&&(f.current.style.visibility="visible"),n&&n(),_.current=!0),o&&o(),b.current=!1}var t=e.inline,i=void 0!==t&&t,t=e.hideUntilTypeset,n=e.onInitTypeset,o=e.onTypeset,s=e.text,u=e.dynamic,a=e.typesettingOptions,l=e.renderMode,c=e.children,p=__rest(e,["inline","hideUntilTypeset","onInitTypeset","onTypeset","text","dynamic","typesettingOptions","renderMode","children"]),y=useRef(""),f=useRef(null),d=useContext(MathJaxBaseContext),h=null!=t?t: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(e=s)&&0<e.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 4, and version 2 is currently in use")}"post"!==v&&s===y.current||b.current||(b.current=!0,3===d.version||4===d.version?d.promise.then(function(t){var n;"pre"===v?(n=function(e){y.current=s,t.startup.document.clear(),t.startup.document.updateDocument(),null!==f.current&&(f.current.innerHTML=e.outerHTML),r()},a.fn.endsWith("Promise")?t.startup.promise.then(function(){return t[g.fn](s,__assign(__assign({},(null==g?void 0:g.options)||{}),{display:!i}))}).then(n).catch(function(e){throw r(),Error(typesettingFailed(e))}):t.startup.promise.then(function(){var e=t[g.fn](s,__assign(__assign({},(null==g?void 0:g.options)||{}),{display:!i}));n(e)}).catch(function(e){throw r(),Error(typesettingFailed(e))})):t.startup.promise.then(function(){return t.typesetClear([f.current]),t.typesetPromise([f.current])}).then(r).catch(function(e){throw r(),Error(typesettingFailed(e))})}).catch(function(e){throw r(),Error(typesettingFailed(e))}):d.promise.then(function(e){e.Hub.Queue(["Typeset",e.Hub,f.current]),e.Hub.Queue(r)}).catch(function(e){throw r(),Error(typesettingFailed(e))}))}var e}),React.createElement("span",__assign({},p,{style:__assign(__assign({display:i?"inline":"block"},p.style),{visibility:h?"hidden":null==(e=p.style)?void 0:e.visibility}),ref:f}),c)};export default MathJax;

package/esm/MathJaxContext/MathJaxContext.js

@@ -1 +1 @@
-"use client";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.2/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.asyncLoad,s=void 0!==i&&i,h=e.onError,i=e.typesettingOptions,d=e.renderMode,d=void 0===d?"post":d,c=e.hideUntilTypeset,e=e.children,u=useContext(MathJaxBaseContext);if(void 0!==(null==u?void 0:u.version)&&(null==u?void 0:u.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 v=useRef(u),u=useRef((null==u?void 0:u.version)||null);if(null===u.current)u.current=t;else if(u.current!==t)throw Error("Cannot change version of MathJax in a MathJaxContext after it has mounted. Reload the page with a new version when this must happen.");var f=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=f,e.async=s,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===v.current&&(u={typesettingOptions:i,renderMode:d,hideUntilTypeset:c},2===t?void 0===v2Promise&&("undefined"!=typeof window?(v2Promise=new Promise(l)).catch(function(e){if(!h)throw Error("Failed to download MathJax version 2 from '".concat(f,"' due to: ").concat(JSON.stringify(e)));h(e)}):(v2Promise=Promise.reject()).catch(function(e){})):void 0===v3Promise&&("undefined"!=typeof window?(v3Promise=new Promise(l)).catch(function(e){if(!h)throw Error("Failed to download MathJax version 3 from '".concat(f,"' due to: ").concat(e));h(e)}):(v3Promise=Promise.reject()).catch(function(e){})),v.current=__assign(__assign({},u),2===t?{version:2,promise:v2Promise}:{version:3,promise:v3Promise})),React.createElement(MathJaxBaseContext.Provider,{value:v.current},e)};export default MathJaxContext;export{MathJaxBaseContext};
+"use client";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 i in t=arguments[o])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};import React,{createContext,useContext,useRef}from"react";var v2Promise,v3Promise,v4Promise,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.2/es5/tex-mml-chtml.js",DEFAULT_V4_SRC="https://cdn.jsdelivr.net/npm/mathjax@4.1.0/tex-mml-chtml.js",MathJaxContext=function(e){var n=e.config,t=e.version,t=void 0===t?4:t,o=e.src,o=void 0===o?2===t?DEFAULT_V2_SRC:3===t?DEFAULT_V3_SRC:DEFAULT_V4_SRC:o,i=e.onStartup,r=e.onLoad,a=e.asyncLoad,s=void 0!==a&&a,d=e.onError,a=e.typesettingOptions,c=e.renderMode,c=void 0===c?"post":c,h=e.hideUntilTypeset,e=e.children,v=useContext(MathJaxBaseContext);if(void 0!==(null==v?void 0:v.version)&&(null==v?void 0:v.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||void 0!==v4Promise)||3===t&&(void 0!==v2Promise||void 0!==v4Promise)||4===t&&(void 0!==v2Promise||void 0!==v3Promise))throw Error("Cannot use two MathJax versions 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(v),v=useRef((null==v?void 0:v.version)||null);if(null===v.current)v.current=t;else if(v.current!==t)throw Error("Cannot change version of MathJax in a MathJaxContext after it has mounted. Reload the page with a new version when this must happen.");var m=o||(2===t?DEFAULT_V2_SRC:3===t?DEFAULT_V3_SRC:DEFAULT_V4_SRC);function f(t,o){n&&(window.MathJax=n);var e=document.createElement("script");e.type="text/javascript",e.src=m,e.async=s,e.addEventListener("load",function(){var e=window.MathJax;i&&i(e),t(e),r&&r()}),e.addEventListener("error",function(e){return o(e)}),document.getElementsByTagName("head")[0].appendChild(e)}return void 0===u.current&&(v={typesettingOptions:a,renderMode:c,hideUntilTypeset:h},2===t?void 0===v2Promise&&("undefined"!=typeof window?(v2Promise=new Promise(f)).catch(function(e){if(!d)throw Error("Failed to download MathJax version 2 from '".concat(m,"' due to: ").concat(JSON.stringify(e)));d(e)}):(v2Promise=Promise.reject()).catch(function(e){})):3===t?void 0===v3Promise&&("undefined"!=typeof window?(v3Promise=new Promise(f)).catch(function(e){if(!d)throw Error("Failed to download MathJax version 3 from '".concat(m,"' due to: ").concat(e));d(e)}):(v3Promise=Promise.reject()).catch(function(e){})):void 0===v4Promise&&("undefined"!=typeof window?(v4Promise=new Promise(f)).catch(function(e){if(!d)throw Error("Failed to download MathJax version 4 from '".concat(m,"' due to: ").concat(e));d(e)}):(v4Promise=Promise.reject()).catch(function(e){})),u.current=__assign(__assign({},v),2===t?{version:2,promise:v2Promise}:3===t?{version:3,promise:v3Promise}:{version:4,promise:v4Promise})),React.createElement(MathJaxBaseContext.Provider,{value:u.current},e)};export default MathJaxContext;export{MathJaxBaseContext};

package/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "better-react-mathjax",
-  "version": "2.3.0",
+  "version": "3.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",
@@ -27,6 +27,7 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "mathjax-full": "^3.2.2"
+    "mathjax-full": "^3.2.2",
+    "@mathjax/src": "^4.0.0"
   }
 }