Merge branch 'plotly:dev' into dev

Author: CNFeffery

.husky/pre-commit

@@ -1,3 +1,4 @@
-npm run lint && \
-(cd components/dash-core-components && npm run lint) && \
-(cd components/dash-table && npm run lint)
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc.js

@@ -0,0 +1,82 @@
+// .lintstagedrc.js
+const path = require("path");
+const fs = require('fs')
+
+// Helper to resolve path to venv executables
+const venvBin = (command) => {
+    let bin = "bin";
+    if (process.platform == "win32") {
+        bin = "Scripts";
+    }
+    if (fs.existsSync("venv")) {
+        return path.join("venv", bin, command);
+    }
+    if (fs.existsSync(".venv")) {
+        return path.join(".venv", bin, command);
+    }
+}
+
+module.exports = {
+    // Python checks (run from root, using root venv)
+    "*.py": (filenames) => [
+        `${venvBin("python")} -m pylint --rcfile=.pylintrc ${filenames.join(
+            " "
+        )}`, // Add your pylintrc if you have one
+        `${venvBin("flake8")} ${filenames.join(" ")}`,
+        `${venvBin("black")} --check ${filenames.join(" ")}`,
+    ],
+
+    // ESLint and Prettier for 'components/dash-core-components'
+    "components/dash-core-components/**/*.{js,jsx,ts,tsx}": (filenames) => {
+        const relativeFilePaths = filenames.map((f) =>
+            path.relative(path.join("components", "dash-core-components"), f)
+        );
+        return [
+            `cd components/dash-core-components && npx eslint --no-error-on-unmatched-pattern ${relativeFilePaths.join(
+                " "
+            )}`,
+            `cd components/dash-core-components && npx prettier --check ${relativeFilePaths.join(
+                " "
+            )}`,
+        ];
+    },
+
+    "components/dash-html-components/**/*.{js,jsx,ts,tsx}": (filenames) => {
+        const relativeFilePaths = filenames.map((f) =>
+            path.relative(path.join("components", "dash-html-components"), f)
+        );
+        return [
+            `cd components/dash-html-components && npx eslint --no-error-on-unmatched-pattern ${relativeFilePaths.join(
+                " "
+            )}`,
+        ];
+    },
+
+    "components/dash-table/**/*.{js,jsx,ts,tsx}": (filenames) => {
+        const relativeFilePaths = filenames.map((f) =>
+            path.relative(path.join("components", "dash-table"), f)
+        );
+        return [
+            `cd components/dash-table && npx eslint --no-error-on-unmatched-pattern ${relativeFilePaths.join(
+                " "
+            )}`,
+            `cd components/dash-table && npx prettier --check ${relativeFilePaths.join(
+                " "
+            )}`,
+        ];
+    },
+
+    "dash/dash-renderer/**/*.{js,jsx,ts,tsx}": (filenames) => {
+        const relativeFilePaths = filenames.map((f) =>
+            path.relative(path.join("dash", "dash-renderer"), f)
+        );
+        return [
+            `cd dash/dash-renderer && npx eslint --no-error-on-unmatched-pattern ${relativeFilePaths.join(
+                " "
+            )}`,
+            `cd dash/dash-renderer && npx prettier --check ${relativeFilePaths.join(
+                " "
+            )}`,
+        ];
+    },
+};

@plotly/dash-test-components/src/components/ExternalComponent.js

@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 
-const ExternalComponent = ({ id, text, input_id, extra_component }) => {
+const ExternalComponent = ({ id, text, input_id, extra_component, extra_component_temp }) => {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
-
     return (
         <div id={id}>
             {text && <ExternalWrapper
@@ -18,13 +17,15 @@ const ExternalComponent = ({ id, text, input_id, extra_component }) => {
                         id: input_id
                     }
                 }}
-                componentPath={[...ctx.componentPath, 'external']}
+                componentPath={[JSON.stringify(ctx.componentPath), 'text']}
+                temp={true}
             />}
             {
                 extra_component &&
                 <ExternalWrapper
                     component={extra_component}
-                    componentPath={[...ctx.componentPath, 'extra']}
+                    componentPath={[...ctx.componentPath, 'props', 'extra_component']}
+                    temp={extra_component_temp}
             />}
         </div>
     )
@@ -39,6 +40,7 @@ ExternalComponent.propTypes = {
         namespace: PropTypes.string,
         props: PropTypes.object, 
     }),
+    extra_component_temp: PropTypes.bool,
 };
 
 export default ExternalComponent;

CHANGELOG.md

@@ -9,6 +9,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#3279](https://github.com/plotly/dash/pull/3279) Fix an issue where persisted values were incorrectly pruned when updated via callback. Now, callback returned values are correctly stored in the persistence storage. Fix [#2678](https://github.com/plotly/dash/issues/2678)
 - [#3298](https://github.com/plotly/dash/pull/3298) Fix dev_only resources filtering.
 - [#3315](https://github.com/plotly/dash/pull/3315) Fix pages module is package check.
+- [#3319](https://github.com/plotly/dash/pull/3319) Fix issue where `ExternalWrapper` would remove props from the parent component, now there is a `temp` that is passed to check if it should be removed on unmount.
 
 ## Added
 - [#3294](https://github.com/plotly/dash/pull/3294) Added the ability to pass `allow_optional` to Input and State to allow callbacks to work even if these components are not in the dash layout.

dash/dash-renderer/src/wrapper/ExternalWrapper.tsx

@@ -13,12 +13,13 @@ import {
 type Props = {
     component: DashComponent;
     componentPath: DashLayoutPath;
+    temp?: boolean; // If true, the component will be removed on unmount.
 };
 
 /**
  * For rendering components that are out of the regular layout tree.
  */
-function ExternalWrapper({component, componentPath}: Props) {
+function ExternalWrapper({component, componentPath, temp = false}: Props) {
     const dispatch: any = useDispatch();
     const [inserted, setInserted] = useState(false);
 
@@ -33,7 +34,9 @@ function ExternalWrapper({component, componentPath}: Props) {
         );
         setInserted(true);
         return () => {
-            dispatch(removeComponent({componentPath}));
+            if (temp) {
+                dispatch(removeComponent({componentPath}));
+            }
         };
     }, []);