Merge branch 'plotly:dev' into debug_env

Author: PGrawe

@plotly/dash-generator-test-component-typescript/generator.test.ts

@@ -12,11 +12,8 @@ function getMetadata() {
                 '""', // reserved keywords
                 path.join(__dirname, 'src', 'components')
             ],
-            // To debug `meta-ts.js` using pycharm debugger:
-            //  comment `env` and add `MODULES_PATH=./node_modules`
-            //  in the run config environment variables.
             {
-                env: {MODULES_PATH: path.resolve(__dirname, './node_modules')},
+                env: {MODULES_PATH: path.resolve(__dirname, './node_modules'), ...process.env},
                 cwd: __dirname
             }
         );
@@ -245,4 +242,9 @@ describe('Test Typescript component metadata generation', () => {
             expect(R.path(['StandardComponent'], metadata)).toBeDefined();
         });
     });
+    describe('Test namespace props', () => {
+        test('Component with picked boolean prop', () => {
+            expect(R.path(['WrappedHTML', "props", "autoFocus", "type", "name"], metadata)).toBe("bool");
+        })
+    })
 });

@plotly/dash-generator-test-component-typescript/src/components/WrappedHTML.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {WrappedHTMLProps} from '../props';
+
+/**
+ * Component docstring
+ */
+const WrappedHTML = (props: WrappedHTMLProps) => {
+    return null;
+};
+
+export default WrappedHTML;

@plotly/dash-generator-test-component-typescript/src/index.ts

@@ -2,10 +2,12 @@ import TypeScriptComponent from './components/TypeScriptComponent';
 import TypeScriptClassComponent from './components/TypeScriptClassComponent';
 import MemoTypeScriptComponent from './components/MemoTypeScriptComponent';
 import StandardComponent from './components/StandardComponent.react';
+import WrappedHTML from './components/WrappedHTML';
 
 export {
     TypeScriptComponent,
     TypeScriptClassComponent,
     MemoTypeScriptComponent,
-    StandardComponent
+    StandardComponent,
+    WrappedHTML,
 };

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -36,3 +36,8 @@ export type TypescriptComponentProps = {
     className?: string;
     style?: any;
 };
+
+export type WrappedHTMLProps = {
+    children?: React.ReactNode;
+    id?: string;
+} & Pick<React.ButtonHTMLAttributes<any>, 'autoFocus'>

CHANGELOG.md

@@ -2,6 +2,14 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+### Fixed
+
+- [#2043](https://github.com/plotly/dash/pull/2043) Fix bug 
+[#2003](https://github.com/plotly/dash/issues/2003) in which 
+`dangerously_allow_html=True` + `mathjax=True` works in some cases, and in some cases not.
+
 ## [2.4.1] - 2022-05-11
 
 ### Fixed

components/dash-core-components/src/fragments/Markdown.react.js

@@ -108,6 +108,20 @@ export default class DashMarkdown extends Component {
                     )}
                 />
             ),
+            dashMathjax: props => (
+                <Math tex={props.value} inline={props.inline} />
+            ),
+        };
+
+        const regexMath = value => {
+            const newValue = value.replace(
+                /(\${1,2})((?:\\.|[^$])+)\1/g,
+                function (m, tag, src) {
+                    const inline = tag.length === 1 || src.indexOf('\n') === -1;
+                    return `<dashMathjax value='${src}' inline='${inline}'/>`;
+                }
+            );
+            return newValue;
         };
 
         return (
@@ -151,7 +165,11 @@ export default class DashMarkdown extends Component {
                                 props.value
                             ) : (
                                 <JsxParser
-                                    jsx={props.value}
+                                    jsx={
+                                        mathjax
+                                            ? regexMath(props.value)
+                                            : props.value
+                                    }
                                     components={componentTransforms}
                                     renderInWrapper={false}
                                 />

components/dash-core-components/tests/integration/markdown/test_markdown.py

@@ -388,3 +388,43 @@ def test_mkdw009_target_blank_links(dash_dcc):
     dash_dcc.find_element("a").click()
 
     until(lambda: len(dash_dcc.driver.window_handles) == 2, timeout=1)
+
+
+def test_mkdw010_mathjax_with_html(dash_dcc):
+
+    app = Dash(__name__)
+
+    CONTENT = [
+        """
+    <details>
+        <summary>Topic</summary>
+        Some details
+    </details>
+
+    $E = mc^2$
+    """,
+        """
+    <p>Some paragraph</p>
+
+    $E = mc^2$
+    """,
+        """
+    <p>Some paragraph</p>
+    $E = mc^2$
+    """,
+        """
+    <p>Some paragraph</p> $E = mc^2$
+    """,
+        """
+    <p>Some paragraph with $E = mc^2$ inline math</p>
+    """,
+    ]
+
+    app.layout = html.Div(
+        [dcc.Markdown(c, dangerously_allow_html=True, mathjax=True) for c in CONTENT]
+    )
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_element(".MathJax")
+    assert len(dash_dcc.find_elements((".MathJax"))) == len(CONTENT)

dash/_callback_context.py

@@ -127,7 +127,7 @@ def args_grouping(self):
         args_grouping is a dict of the inputs used with flexible callback signatures. The keys are the variable names
         and the values are dictionaries containing:
         - “id”: (string or dict) the component id. If it’s a pattern matching id, it will be a dict.
-        - “id_str”: (str) for pattern matching ids, it’s the strigified dict id with no white spaces.
+        - “id_str”: (str) for pattern matching ids, it’s the stringified dict id with no white spaces.
         - “property”: (str) The component property used in the callback.
         - “value”: the value of the component property at the time the callback was fired.
         - “triggered”: (bool)Whether this input triggered the callback.

dash/extract-meta.js

@@ -37,7 +37,7 @@ if (!src.length) {
 }
 
 if (fs.existsSync('tsconfig.json')) {
-    tsconfig = JSON.parse(fs.readFileSync('tsconfig.json'));
+    tsconfig = JSON.parse(fs.readFileSync('tsconfig.json')).compilerOptions;
 }
 
 let failedBuild = false;
@@ -180,7 +180,7 @@ function gatherComponents(sources, components = {}) {
         return components;
     }
 
-    const program = ts.createProgram(filepaths, tsconfig);
+    const program = ts.createProgram(filepaths, {...tsconfig, esModuleInterop: true});
     const checker = program.getTypeChecker();
 
     const coerceValue = t => {