Move getLayout to dash_component_api

Author: T4rk1n

components/dash-core-components/src/components/Tabs.react.js

@@ -153,7 +153,7 @@ export default class Tabs extends Component {
         }
         const children = this.parseChildrenToArray();
         if (children && children.length) {
-            const firstChildren = window.dash_clientside.get_layout([
+            const firstChildren = window.dash_component_api.getLayout([
                 ...children[0].props.componentPath,
                 'props',
                 'value',
@@ -193,7 +193,7 @@ export default class Tabs extends Component {
                 let childProps;
 
                 if (React.isValidElement(child)) {
-                    childProps = window.dash_clientside.get_layout([
+                    childProps = window.dash_component_api.getLayout([
                         ...child.props.componentPath,
                         'props',
                     ]);

dash/dash-renderer/src/dashApi.ts

@@ -1,6 +1,34 @@
+import {path} from 'ramda';
 import {DashContext, useDashContext} from './wrapper/DashContext';
+import {getPath} from './actions/paths';
+import {getStores} from './utils/stores';
+
+/**
+ * Get the dash props from a component path or id.
+ *
+ * @param componentPathOrId The path or the id of the component to get the props of.
+ * @param propPath Additional key to get the property instead of plain props.
+ * @returns
+ */
+function getLayout(componentPathOrId: string[] | string): any {
+    const ds = getStores();
+    for (let y = 0; y < ds.length; y++) {
+        const {paths, layout} = ds[y].getState();
+        let componentPath;
+        if (!Array.isArray(componentPathOrId)) {
+            componentPath = getPath(paths, componentPathOrId);
+        } else {
+            componentPath = componentPathOrId;
+        }
+        const props = path(componentPath, layout);
+        if (props !== undefined) {
+            return props;
+        }
+    }
+}
 
 (window as any).dash_component_api = {
     DashContext,
-    useDashContext
+    useDashContext,
+    getLayout
 };

dash/dash-renderer/src/utils/clientsideFunctions.ts

@@ -1,13 +1,6 @@
-import {path} from 'ramda';
-
 import {updateProps, notifyObservers} from '../actions/index';
 import {getPath} from '../actions/paths';
-
-function getStores() {
-    const stores = ((window as any).dash_stores =
-        (window as any).dash_stores || []);
-    return stores;
-}
+import {getStores} from './stores';
 
 /**
  * Set the props of a dash component by id or path.
@@ -63,32 +56,7 @@ const clean_url = (url: string, fallback = 'about:blank') => {
     return url;
 };
 
-/**
- * Get the dash props from a component path or id.
- *
- * @param componentPathOrId The path or the id of the component to get the props of.
- * @param propPath Additional key to get the property instead of plain props.
- * @returns
- */
-function get_layout(componentPathOrId: string[] | string): any {
-    const ds = getStores();
-    for (let y = 0; y < ds.length; y++) {
-        const {paths, layout} = ds[y].getState();
-        let componentPath;
-        if (!Array.isArray(componentPathOrId)) {
-            componentPath = getPath(paths, componentPathOrId);
-        } else {
-            componentPath = componentPathOrId;
-        }
-        const props = path(componentPath, layout);
-        if (props !== undefined) {
-            return props;
-        }
-    }
-}
-
 const dc = ((window as any).dash_clientside =
     (window as any).dash_clientside || {});
 dc['set_props'] = set_props;
 dc['clean_url'] = dc['clean_url'] === undefined ? clean_url : dc['clean_url'];
-dc['get_layout'] = get_layout;

dash/dash-renderer/src/utils/stores.ts

@@ -0,0 +1,5 @@
+export function getStores() {
+    const stores = ((window as any).dash_stores =
+        (window as any).dash_stores || []);
+    return stores;
+}