This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92

Closed
T4rk1n wants to merge 7 commits into from
Closed

Component as props support. #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9a1db90
Component as props support.
T4rk1n Oct 26, 2018
6a1355a
Wrap in NotifyObservers after hydrating.
T4rk1n Oct 26, 2018
199fcb3
Hydrate list of components prop.
T4rk1n Oct 29, 2018
8f9346f
:camel: + :nail_care: -> TreeContainer.
T4rk1n Oct 29, 2018
03fb402
set dash version==0.28.5
T4rk1n Oct 29, 2018
916e4c6
Fix mixed component, other types in list.
T4rk1n Oct 29, 2018
d7aedc5
Add component as prop integration test.
T4rk1n Oct 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion dev-requirements.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz
137 changes: 72 additions & 65 deletions src/TreeContainer.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
shouldComponentUpdate(nextProps) {
return nextProps.layout !== this.props.layout;
}

render() {
return render(this.props.layout);
function isComponent(c) {
switch (R.type(c)) {
case 'Array':
return R.any(isComponent)(c);
case 'Object':
return (
c.hasOwnProperty('namespace') &&
c.hasOwnProperty('props') &&
c.hasOwnProperty('type')
);
default:
return false;
}
}

TreeContainer.propTypes = {
layout: PropTypes.object,
};

function render(component) {
if (
R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
) {
return component;
}
function hydrateProps(props) {
const replace = {};
Object.entries(props)
.filter(([_, v]) => isComponent(v))
.forEach(([k, v]) => {
if (R.type(v) === 'Array') {
// TODO add key ?.
replace[k] = v.map(c => {
if (!isComponent(c)) {
return c;
}
const newProps = hydrateProps(c.props);
return hydrateComponent(
c.type,
c.namespace,
newProps
);
});
} else {
const newProps = hydrateProps(v.props);
replace[k] = hydrateComponent(
v.type,
v.namespace,
newProps
);
}
});
return R.merge(props, replace);
}

// Create list of child elements
let children;
function hydrateComponent(
component_name,
namespace,
props,
) {
const element = Registry.resolve(component_name, namespace);

const componentProps = R.propOr({}, 'props', component);
const component = React.createElement(
element,
props
);

if (
!R.has('props', component) ||
!R.has('children', component.props) ||
typeof component.props.children === 'undefined'
) {
// No children
children = [];
} else if (
R.contains(R.type(component.props.children), [
'String',
'Number',
'Null',
'Boolean',
])
) {
children = [component.props.children];
} else {
// One or multiple objects
// Recursively render the tree
// TODO - I think we should pass in `key` here.
children = (Array.isArray(componentProps.children)
? componentProps.children
: [componentProps.children]
).map(render);
}
// eslint-disable-next-line
return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

if (!component.type) {
/* eslint-disable no-console */
console.error(R.type(component), component);
/* eslint-enable no-console */
throw new Error('component.type is undefined');
}
if (!component.namespace) {
/* eslint-disable no-console */
console.error(R.type(component), component);
/* eslint-enable no-console */
throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
shouldComponentUpdate(nextProps) {
return nextProps.layout !== this.props.layout;
}
const element = Registry.resolve(component.type, component.namespace);

const parent = React.createElement(
element,
R.omit(['children'], component.props),
...children
);
render() {
const { layout } = this.props;
if (
R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
) {
return layout;
}

return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
return hydrateComponent(
layout.type,
layout.namespace,
hydrateProps(layout.props)
);
}
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz
View file
Open in desktop
Binary file not shown.
75 changes: 52 additions & 23 deletions tests/test_render.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
def setUp(self):
pass

def wait_for_element_by_css_selector(self, selector):
start_time = time.time()
exception = Exception('Time ran out, {} not found'.format(selector))
while time.time() < start_time + 20:
try:
return self.driver.find_element_by_css_selector(selector)
except Exception as e:
exception = e
pass
time.sleep(0.25)
raise exception
return WebDriverWait(self.driver, TIMEOUT).until(
EC.presence_of_element_located((By.CSS_SELECTOR, selector))
)

def wait_for_text_to_equal(self, selector, assertion_text):
start_time = time.time()
exception = Exception('Time ran out, {} on {} not found'.format(
assertion_text, selector))
while time.time() < start_time + 20:
el = self.wait_for_element_by_css_selector(selector)
try:
return self.assertEqual(el.text, assertion_text)
except Exception as e:
exception = e
pass
time.sleep(0.25)

raise exception
return WebDriverWait(self.driver, TIMEOUT).until(
EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
assertion_text)
)

def request_queue_assertions(
self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
self.assertTrue(timestamp_2.value > timestamp_1.value)
self.assertEqual(call_count.value, 4)
self.percy_snapshot('button-2 click again')

def test_component_as_props(self):
app = dash.Dash(__name__)
app.layout = html.Div([
html.Button('button', id='mod-btn'),
component_props.ComponentProps(
id='c-props',
component_props=html.Div('Component as prop'),
comp_array=[
html.Div([html.Div('1'), html.Div('2'), 3]),
html.Div('4')
]
),
html.Div(id='output')
])

@app.callback(Output('c-props', 'component_props'),
[Input('mod-btn', 'n_clicks')])
def on_clicks(n_clicks):
if n_clicks is None:
raise PreventUpdate

return html.H2('New component from a callback')

self.startServer(app)

self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
for i in range(1, 3):
self.wait_for_text_to_equal(
'#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
str(i)
)
self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

self.wait_for_element_by_css_selector('#mod-btn').click()
self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92
 Closed

T4rk1n
wants to merge
7
commits into

from

 Closed


Component as props support.
#92
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9a1db90

Component as props support.


T4rk1n Oct 26, 2018
6a1355a

Wrap in NotifyObservers after hydrating.


T4rk1n Oct 26, 2018
199fcb3

Hydrate list of components prop.


T4rk1n Oct 29, 2018
8f9346f

:camel: + :nail_care: -> TreeContainer.


T4rk1n Oct 29, 2018
03fb402

set dash version==0.28.5


T4rk1n Oct 29, 2018
916e4c6

Fix mixed component, other types in list.


T4rk1n Oct 29, 2018
d7aedc5

Add component as prop integration test.


T4rk1n Oct 30, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 2 additions & 1 deletion
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz

137 changes: 72 additions & 65 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }

 render() {
 return render(this.props.layout);
function isComponent(c) {
 switch (R.type(c)) {
 case 'Array':
 return R.any(isComponent)(c);
 case 'Object':
 return (
 c.hasOwnProperty('namespace') &&
 c.hasOwnProperty('props') &&
 c.hasOwnProperty('type')
 );
 default:
 return false;
 }
}

TreeContainer.propTypes = {
 layout: PropTypes.object,
};

function render(component) {
 if (
 R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return component;
 }
function hydrateProps(props) {
 const replace = {};
 Object.entries(props)
 .filter(([_, v]) => isComponent(v))
 .forEach(([k, v]) => {
 if (R.type(v) === 'Array') {
 // TODO add key ?.
 replace[k] = v.map(c => {
 if (!isComponent(c)) {
 return c;
 }
 const newProps = hydrateProps(c.props);
 return hydrateComponent(
 c.type,
 c.namespace,
 newProps
 );
 });
 } else {
 const newProps = hydrateProps(v.props);
 replace[k] = hydrateComponent(
 v.type,
 v.namespace,
 newProps
 );
 }
 });
 return R.merge(props, replace);
}

 // Create list of child elements
 let children;
function hydrateComponent(
 component_name,
 namespace,
 props,
) {
 const element = Registry.resolve(component_name, namespace);

 const componentProps = R.propOr({}, 'props', component);
 const component = React.createElement(
 element,
 props
 );

 if (
 !R.has('props', component) ||
 !R.has('children', component.props) ||
 typeof component.props.children === 'undefined'
 ) {
 // No children
 children = [];
 } else if (
 R.contains(R.type(component.props.children), [
 'String',
 'Number',
 'Null',
 'Boolean',
 ])
 ) {
 children = [component.props.children];
 } else {
 // One or multiple objects
 // Recursively render the tree
 // TODO - I think we should pass in `key` here.
 children = (Array.isArray(componentProps.children)
 ? componentProps.children
 : [componentProps.children]
 ).map(render);
 }
 // eslint-disable-next-line
 return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

 if (!component.type) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.type is undefined');
 }
 if (!component.namespace) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }
 const element = Registry.resolve(component.type, component.namespace);

 const parent = React.createElement(
 element,
 R.omit(['children'], component.props),
 ...children
 );
 render() {
 const { layout } = this.props;
 if (
 R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return layout;
 }

 return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
 return hydrateComponent(
 layout.type,
 layout.namespace,
 hydrateProps(layout.props)
 );
 }
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz

View file


Open in desktop


Binary file not shown.


75 changes: 52 additions & 23 deletions
tests/test_render.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
 def setUp(self):
 pass

 def wait_for_element_by_css_selector(self, selector):
 start_time = time.time()
 exception = Exception('Time ran out, {} not found'.format(selector))
 while time.time() < start_time + 20:
 try:
 return self.driver.find_element_by_css_selector(selector)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)
 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.presence_of_element_located((By.CSS_SELECTOR, selector))
 )

 def wait_for_text_to_equal(self, selector, assertion_text):
 start_time = time.time()
 exception = Exception('Time ran out, {} on {} not found'.format(
 assertion_text, selector))
 while time.time() < start_time + 20:
 el = self.wait_for_element_by_css_selector(selector)
 try:
 return self.assertEqual(el.text, assertion_text)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)

 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
 assertion_text)
 )

 def request_queue_assertions(
 self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
 self.assertTrue(timestamp_2.value > timestamp_1.value)
 self.assertEqual(call_count.value, 4)
 self.percy_snapshot('button-2 click again')

 def test_component_as_props(self):
 app = dash.Dash(__name__)
 app.layout = html.Div([
 html.Button('button', id='mod-btn'),
 component_props.ComponentProps(
 id='c-props',
 component_props=html.Div('Component as prop'),
 comp_array=[
 html.Div([html.Div('1'), html.Div('2'), 3]),
 html.Div('4')
 ]
 ),
 html.Div(id='output')
 ])

 @app.callback(Output('c-props', 'component_props'),
 [Input('mod-btn', 'n_clicks')])
 def on_clicks(n_clicks):
 if n_clicks is None:
 raise PreventUpdate

 return html.H2('New component from a callback')

 self.startServer(app)

 self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
 for i in range(1, 3):
 self.wait_for_text_to_equal(
 '#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
 str(i)
 )
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

 self.wait_for_element_by_css_selector('#mod-btn').click()
 self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92
 Closed

T4rk1n
wants to merge
7
commits into

from

 Closed


Component as props support.
#92
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9a1db90

Component as props support.


T4rk1n Oct 26, 2018
6a1355a

Wrap in NotifyObservers after hydrating.


T4rk1n Oct 26, 2018
199fcb3

Hydrate list of components prop.


T4rk1n Oct 29, 2018
8f9346f

:camel: + :nail_care: -> TreeContainer.


T4rk1n Oct 29, 2018
03fb402

set dash version==0.28.5


T4rk1n Oct 29, 2018
916e4c6

Fix mixed component, other types in list.


T4rk1n Oct 29, 2018
d7aedc5

Add component as prop integration test.


T4rk1n Oct 30, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 2 additions & 1 deletion
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz

137 changes: 72 additions & 65 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }

 render() {
 return render(this.props.layout);
function isComponent(c) {
 switch (R.type(c)) {
 case 'Array':
 return R.any(isComponent)(c);
 case 'Object':
 return (
 c.hasOwnProperty('namespace') &&
 c.hasOwnProperty('props') &&
 c.hasOwnProperty('type')
 );
 default:
 return false;
 }
}

TreeContainer.propTypes = {
 layout: PropTypes.object,
};

function render(component) {
 if (
 R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return component;
 }
function hydrateProps(props) {
 const replace = {};
 Object.entries(props)
 .filter(([_, v]) => isComponent(v))
 .forEach(([k, v]) => {
 if (R.type(v) === 'Array') {
 // TODO add key ?.
 replace[k] = v.map(c => {
 if (!isComponent(c)) {
 return c;
 }
 const newProps = hydrateProps(c.props);
 return hydrateComponent(
 c.type,
 c.namespace,
 newProps
 );
 });
 } else {
 const newProps = hydrateProps(v.props);
 replace[k] = hydrateComponent(
 v.type,
 v.namespace,
 newProps
 );
 }
 });
 return R.merge(props, replace);
}

 // Create list of child elements
 let children;
function hydrateComponent(
 component_name,
 namespace,
 props,
) {
 const element = Registry.resolve(component_name, namespace);

 const componentProps = R.propOr({}, 'props', component);
 const component = React.createElement(
 element,
 props
 );

 if (
 !R.has('props', component) ||
 !R.has('children', component.props) ||
 typeof component.props.children === 'undefined'
 ) {
 // No children
 children = [];
 } else if (
 R.contains(R.type(component.props.children), [
 'String',
 'Number',
 'Null',
 'Boolean',
 ])
 ) {
 children = [component.props.children];
 } else {
 // One or multiple objects
 // Recursively render the tree
 // TODO - I think we should pass in `key` here.
 children = (Array.isArray(componentProps.children)
 ? componentProps.children
 : [componentProps.children]
 ).map(render);
 }
 // eslint-disable-next-line
 return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

 if (!component.type) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.type is undefined');
 }
 if (!component.namespace) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }
 const element = Registry.resolve(component.type, component.namespace);

 const parent = React.createElement(
 element,
 R.omit(['children'], component.props),
 ...children
 );
 render() {
 const { layout } = this.props;
 if (
 R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return layout;
 }

 return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
 return hydrateComponent(
 layout.type,
 layout.namespace,
 hydrateProps(layout.props)
 );
 }
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz

View file


Open in desktop


Binary file not shown.


75 changes: 52 additions & 23 deletions
tests/test_render.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
 def setUp(self):
 pass

 def wait_for_element_by_css_selector(self, selector):
 start_time = time.time()
 exception = Exception('Time ran out, {} not found'.format(selector))
 while time.time() < start_time + 20:
 try:
 return self.driver.find_element_by_css_selector(selector)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)
 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.presence_of_element_located((By.CSS_SELECTOR, selector))
 )

 def wait_for_text_to_equal(self, selector, assertion_text):
 start_time = time.time()
 exception = Exception('Time ran out, {} on {} not found'.format(
 assertion_text, selector))
 while time.time() < start_time + 20:
 el = self.wait_for_element_by_css_selector(selector)
 try:
 return self.assertEqual(el.text, assertion_text)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)

 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
 assertion_text)
 )

 def request_queue_assertions(
 self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
 self.assertTrue(timestamp_2.value > timestamp_1.value)
 self.assertEqual(call_count.value, 4)
 self.percy_snapshot('button-2 click again')

 def test_component_as_props(self):
 app = dash.Dash(__name__)
 app.layout = html.Div([
 html.Button('button', id='mod-btn'),
 component_props.ComponentProps(
 id='c-props',
 component_props=html.Div('Component as prop'),
 comp_array=[
 html.Div([html.Div('1'), html.Div('2'), 3]),
 html.Div('4')
 ]
 ),
 html.Div(id='output')
 ])

 @app.callback(Output('c-props', 'component_props'),
 [Input('mod-btn', 'n_clicks')])
 def on_clicks(n_clicks):
 if n_clicks is None:
 raise PreventUpdate

 return html.H2('New component from a callback')

 self.startServer(app)

 self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
 for i in range(1, 3):
 self.wait_for_text_to_equal(
 '#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
 str(i)
 )
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

 self.wait_for_element_by_css_selector('#mod-btn').click()
 self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92
 Closed

T4rk1n
wants to merge
7
commits into

from

 Closed


Component as props support.
#92
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9a1db90

Component as props support.


T4rk1n Oct 26, 2018
6a1355a

Wrap in NotifyObservers after hydrating.


T4rk1n Oct 26, 2018
199fcb3

Hydrate list of components prop.


T4rk1n Oct 29, 2018
8f9346f

:camel: + :nail_care: -> TreeContainer.


T4rk1n Oct 29, 2018
03fb402

set dash version==0.28.5


T4rk1n Oct 29, 2018
916e4c6

Fix mixed component, other types in list.


T4rk1n Oct 29, 2018
d7aedc5

Add component as prop integration test.


T4rk1n Oct 30, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 2 additions & 1 deletion
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz

137 changes: 72 additions & 65 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }

 render() {
 return render(this.props.layout);
function isComponent(c) {
 switch (R.type(c)) {
 case 'Array':
 return R.any(isComponent)(c);
 case 'Object':
 return (
 c.hasOwnProperty('namespace') &&
 c.hasOwnProperty('props') &&
 c.hasOwnProperty('type')
 );
 default:
 return false;
 }
}

TreeContainer.propTypes = {
 layout: PropTypes.object,
};

function render(component) {
 if (
 R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return component;
 }
function hydrateProps(props) {
 const replace = {};
 Object.entries(props)
 .filter(([_, v]) => isComponent(v))
 .forEach(([k, v]) => {
 if (R.type(v) === 'Array') {
 // TODO add key ?.
 replace[k] = v.map(c => {
 if (!isComponent(c)) {
 return c;
 }
 const newProps = hydrateProps(c.props);
 return hydrateComponent(
 c.type,
 c.namespace,
 newProps
 );
 });
 } else {
 const newProps = hydrateProps(v.props);
 replace[k] = hydrateComponent(
 v.type,
 v.namespace,
 newProps
 );
 }
 });
 return R.merge(props, replace);
}

 // Create list of child elements
 let children;
function hydrateComponent(
 component_name,
 namespace,
 props,
) {
 const element = Registry.resolve(component_name, namespace);

 const componentProps = R.propOr({}, 'props', component);
 const component = React.createElement(
 element,
 props
 );

 if (
 !R.has('props', component) ||
 !R.has('children', component.props) ||
 typeof component.props.children === 'undefined'
 ) {
 // No children
 children = [];
 } else if (
 R.contains(R.type(component.props.children), [
 'String',
 'Number',
 'Null',
 'Boolean',
 ])
 ) {
 children = [component.props.children];
 } else {
 // One or multiple objects
 // Recursively render the tree
 // TODO - I think we should pass in `key` here.
 children = (Array.isArray(componentProps.children)
 ? componentProps.children
 : [componentProps.children]
 ).map(render);
 }
 // eslint-disable-next-line
 return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

 if (!component.type) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.type is undefined');
 }
 if (!component.namespace) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }
 const element = Registry.resolve(component.type, component.namespace);

 const parent = React.createElement(
 element,
 R.omit(['children'], component.props),
 ...children
 );
 render() {
 const { layout } = this.props;
 if (
 R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return layout;
 }

 return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
 return hydrateComponent(
 layout.type,
 layout.namespace,
 hydrateProps(layout.props)
 );
 }
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz

View file


Open in desktop


Binary file not shown.


75 changes: 52 additions & 23 deletions
tests/test_render.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
 def setUp(self):
 pass

 def wait_for_element_by_css_selector(self, selector):
 start_time = time.time()
 exception = Exception('Time ran out, {} not found'.format(selector))
 while time.time() < start_time + 20:
 try:
 return self.driver.find_element_by_css_selector(selector)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)
 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.presence_of_element_located((By.CSS_SELECTOR, selector))
 )

 def wait_for_text_to_equal(self, selector, assertion_text):
 start_time = time.time()
 exception = Exception('Time ran out, {} on {} not found'.format(
 assertion_text, selector))
 while time.time() < start_time + 20:
 el = self.wait_for_element_by_css_selector(selector)
 try:
 return self.assertEqual(el.text, assertion_text)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)

 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
 assertion_text)
 )

 def request_queue_assertions(
 self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
 self.assertTrue(timestamp_2.value > timestamp_1.value)
 self.assertEqual(call_count.value, 4)
 self.percy_snapshot('button-2 click again')

 def test_component_as_props(self):
 app = dash.Dash(__name__)
 app.layout = html.Div([
 html.Button('button', id='mod-btn'),
 component_props.ComponentProps(
 id='c-props',
 component_props=html.Div('Component as prop'),
 comp_array=[
 html.Div([html.Div('1'), html.Div('2'), 3]),
 html.Div('4')
 ]
 ),
 html.Div(id='output')
 ])

 @app.callback(Output('c-props', 'component_props'),
 [Input('mod-btn', 'n_clicks')])
 def on_clicks(n_clicks):
 if n_clicks is None:
 raise PreventUpdate

 return html.H2('New component from a callback')

 self.startServer(app)

 self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
 for i in range(1, 3):
 self.wait_for_text_to_equal(
 '#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
 str(i)
 )
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

 self.wait_for_element_by_css_selector('#mod-btn').click()
 self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92
 Closed

T4rk1n
wants to merge
7
commits into

from

 Closed


Component as props support.
#92
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9a1db90

Component as props support.


T4rk1n Oct 26, 2018
6a1355a

Wrap in NotifyObservers after hydrating.


T4rk1n Oct 26, 2018
199fcb3

Hydrate list of components prop.


T4rk1n Oct 29, 2018
8f9346f

:camel: + :nail_care: -> TreeContainer.


T4rk1n Oct 29, 2018
03fb402

set dash version==0.28.5


T4rk1n Oct 29, 2018
916e4c6

Fix mixed component, other types in list.


T4rk1n Oct 29, 2018
d7aedc5

Add component as prop integration test.


T4rk1n Oct 30, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 2 additions & 1 deletion
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz

137 changes: 72 additions & 65 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }

 render() {
 return render(this.props.layout);
function isComponent(c) {
 switch (R.type(c)) {
 case 'Array':
 return R.any(isComponent)(c);
 case 'Object':
 return (
 c.hasOwnProperty('namespace') &&
 c.hasOwnProperty('props') &&
 c.hasOwnProperty('type')
 );
 default:
 return false;
 }
}

TreeContainer.propTypes = {
 layout: PropTypes.object,
};

function render(component) {
 if (
 R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return component;
 }
function hydrateProps(props) {
 const replace = {};
 Object.entries(props)
 .filter(([_, v]) => isComponent(v))
 .forEach(([k, v]) => {
 if (R.type(v) === 'Array') {
 // TODO add key ?.
 replace[k] = v.map(c => {
 if (!isComponent(c)) {
 return c;
 }
 const newProps = hydrateProps(c.props);
 return hydrateComponent(
 c.type,
 c.namespace,
 newProps
 );
 });
 } else {
 const newProps = hydrateProps(v.props);
 replace[k] = hydrateComponent(
 v.type,
 v.namespace,
 newProps
 );
 }
 });
 return R.merge(props, replace);
}

 // Create list of child elements
 let children;
function hydrateComponent(
 component_name,
 namespace,
 props,
) {
 const element = Registry.resolve(component_name, namespace);

 const componentProps = R.propOr({}, 'props', component);
 const component = React.createElement(
 element,
 props
 );

 if (
 !R.has('props', component) ||
 !R.has('children', component.props) ||
 typeof component.props.children === 'undefined'
 ) {
 // No children
 children = [];
 } else if (
 R.contains(R.type(component.props.children), [
 'String',
 'Number',
 'Null',
 'Boolean',
 ])
 ) {
 children = [component.props.children];
 } else {
 // One or multiple objects
 // Recursively render the tree
 // TODO - I think we should pass in `key` here.
 children = (Array.isArray(componentProps.children)
 ? componentProps.children
 : [componentProps.children]
 ).map(render);
 }
 // eslint-disable-next-line
 return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

 if (!component.type) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.type is undefined');
 }
 if (!component.namespace) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }
 const element = Registry.resolve(component.type, component.namespace);

 const parent = React.createElement(
 element,
 R.omit(['children'], component.props),
 ...children
 );
 render() {
 const { layout } = this.props;
 if (
 R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return layout;
 }

 return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
 return hydrateComponent(
 layout.type,
 layout.namespace,
 hydrateProps(layout.props)
 );
 }
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz

View file


Open in desktop


Binary file not shown.


75 changes: 52 additions & 23 deletions
tests/test_render.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
 def setUp(self):
 pass

 def wait_for_element_by_css_selector(self, selector):
 start_time = time.time()
 exception = Exception('Time ran out, {} not found'.format(selector))
 while time.time() < start_time + 20:
 try:
 return self.driver.find_element_by_css_selector(selector)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)
 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.presence_of_element_located((By.CSS_SELECTOR, selector))
 )

 def wait_for_text_to_equal(self, selector, assertion_text):
 start_time = time.time()
 exception = Exception('Time ran out, {} on {} not found'.format(
 assertion_text, selector))
 while time.time() < start_time + 20:
 el = self.wait_for_element_by_css_selector(selector)
 try:
 return self.assertEqual(el.text, assertion_text)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)

 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
 assertion_text)
 )

 def request_queue_assertions(
 self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
 self.assertTrue(timestamp_2.value > timestamp_1.value)
 self.assertEqual(call_count.value, 4)
 self.percy_snapshot('button-2 click again')

 def test_component_as_props(self):
 app = dash.Dash(__name__)
 app.layout = html.Div([
 html.Button('button', id='mod-btn'),
 component_props.ComponentProps(
 id='c-props',
 component_props=html.Div('Component as prop'),
 comp_array=[
 html.Div([html.Div('1'), html.Div('2'), 3]),
 html.Div('4')
 ]
 ),
 html.Div(id='output')
 ])

 @app.callback(Output('c-props', 'component_props'),
 [Input('mod-btn', 'n_clicks')])
 def on_clicks(n_clicks):
 if n_clicks is None:
 raise PreventUpdate

 return html.H2('New component from a callback')

 self.startServer(app)

 self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
 for i in range(1, 3):
 self.wait_for_text_to_equal(
 '#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
 str(i)
 )
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

 self.wait_for_element_by_css_selector('#mod-btn').click()
 self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92
 Closed

T4rk1n
wants to merge
7
commits into

from

 Closed


Component as props support.
#92
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9a1db90

Component as props support.


T4rk1n Oct 26, 2018
6a1355a

Wrap in NotifyObservers after hydrating.


T4rk1n Oct 26, 2018
199fcb3

Hydrate list of components prop.


T4rk1n Oct 29, 2018
8f9346f

:camel: + :nail_care: -> TreeContainer.


T4rk1n Oct 29, 2018
03fb402

set dash version==0.28.5


T4rk1n Oct 29, 2018
916e4c6

Fix mixed component, other types in list.


T4rk1n Oct 29, 2018
d7aedc5

Add component as prop integration test.


T4rk1n Oct 30, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 2 additions & 1 deletion
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz

137 changes: 72 additions & 65 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }

 render() {
 return render(this.props.layout);
function isComponent(c) {
 switch (R.type(c)) {
 case 'Array':
 return R.any(isComponent)(c);
 case 'Object':
 return (
 c.hasOwnProperty('namespace') &&
 c.hasOwnProperty('props') &&
 c.hasOwnProperty('type')
 );
 default:
 return false;
 }
}

TreeContainer.propTypes = {
 layout: PropTypes.object,
};

function render(component) {
 if (
 R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return component;
 }
function hydrateProps(props) {
 const replace = {};
 Object.entries(props)
 .filter(([_, v]) => isComponent(v))
 .forEach(([k, v]) => {
 if (R.type(v) === 'Array') {
 // TODO add key ?.
 replace[k] = v.map(c => {
 if (!isComponent(c)) {
 return c;
 }
 const newProps = hydrateProps(c.props);
 return hydrateComponent(
 c.type,
 c.namespace,
 newProps
 );
 });
 } else {
 const newProps = hydrateProps(v.props);
 replace[k] = hydrateComponent(
 v.type,
 v.namespace,
 newProps
 );
 }
 });
 return R.merge(props, replace);
}

 // Create list of child elements
 let children;
function hydrateComponent(
 component_name,
 namespace,
 props,
) {
 const element = Registry.resolve(component_name, namespace);

 const componentProps = R.propOr({}, 'props', component);
 const component = React.createElement(
 element,
 props
 );

 if (
 !R.has('props', component) ||
 !R.has('children', component.props) ||
 typeof component.props.children === 'undefined'
 ) {
 // No children
 children = [];
 } else if (
 R.contains(R.type(component.props.children), [
 'String',
 'Number',
 'Null',
 'Boolean',
 ])
 ) {
 children = [component.props.children];
 } else {
 // One or multiple objects
 // Recursively render the tree
 // TODO - I think we should pass in `key` here.
 children = (Array.isArray(componentProps.children)
 ? componentProps.children
 : [componentProps.children]
 ).map(render);
 }
 // eslint-disable-next-line
 return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

 if (!component.type) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.type is undefined');
 }
 if (!component.namespace) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }
 const element = Registry.resolve(component.type, component.namespace);

 const parent = React.createElement(
 element,
 R.omit(['children'], component.props),
 ...children
 );
 render() {
 const { layout } = this.props;
 if (
 R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return layout;
 }

 return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
 return hydrateComponent(
 layout.type,
 layout.namespace,
 hydrateProps(layout.props)
 );
 }
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz

View file


Open in desktop


Binary file not shown.


75 changes: 52 additions & 23 deletions
tests/test_render.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
 def setUp(self):
 pass

 def wait_for_element_by_css_selector(self, selector):
 start_time = time.time()
 exception = Exception('Time ran out, {} not found'.format(selector))
 while time.time() < start_time + 20:
 try:
 return self.driver.find_element_by_css_selector(selector)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)
 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.presence_of_element_located((By.CSS_SELECTOR, selector))
 )

 def wait_for_text_to_equal(self, selector, assertion_text):
 start_time = time.time()
 exception = Exception('Time ran out, {} on {} not found'.format(
 assertion_text, selector))
 while time.time() < start_time + 20:
 el = self.wait_for_element_by_css_selector(selector)
 try:
 return self.assertEqual(el.text, assertion_text)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)

 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
 assertion_text)
 )

 def request_queue_assertions(
 self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
 self.assertTrue(timestamp_2.value > timestamp_1.value)
 self.assertEqual(call_count.value, 4)
 self.percy_snapshot('button-2 click again')

 def test_component_as_props(self):
 app = dash.Dash(__name__)
 app.layout = html.Div([
 html.Button('button', id='mod-btn'),
 component_props.ComponentProps(
 id='c-props',
 component_props=html.Div('Component as prop'),
 comp_array=[
 html.Div([html.Div('1'), html.Div('2'), 3]),
 html.Div('4')
 ]
 ),
 html.Div(id='output')
 ])

 @app.callback(Output('c-props', 'component_props'),
 [Input('mod-btn', 'n_clicks')])
 def on_clicks(n_clicks):
 if n_clicks is None:
 raise PreventUpdate

 return html.H2('New component from a callback')

 self.startServer(app)

 self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
 for i in range(1, 3):
 self.wait_for_text_to_equal(
 '#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
 str(i)
 )
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

 self.wait_for_element_by_css_selector('#mod-btn').click()
 self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92
 Closed

T4rk1n
wants to merge
7
commits into

from

 Closed


Component as props support.
#92
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9a1db90

Component as props support.


T4rk1n Oct 26, 2018
6a1355a

Wrap in NotifyObservers after hydrating.


T4rk1n Oct 26, 2018
199fcb3

Hydrate list of components prop.


T4rk1n Oct 29, 2018
8f9346f

:camel: + :nail_care: -> TreeContainer.


T4rk1n Oct 29, 2018
03fb402

set dash version==0.28.5


T4rk1n Oct 29, 2018
916e4c6

Fix mixed component, other types in list.


T4rk1n Oct 29, 2018
d7aedc5

Add component as prop integration test.


T4rk1n Oct 30, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 2 additions & 1 deletion
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz

137 changes: 72 additions & 65 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }

 render() {
 return render(this.props.layout);
function isComponent(c) {
 switch (R.type(c)) {
 case 'Array':
 return R.any(isComponent)(c);
 case 'Object':
 return (
 c.hasOwnProperty('namespace') &&
 c.hasOwnProperty('props') &&
 c.hasOwnProperty('type')
 );
 default:
 return false;
 }
}

TreeContainer.propTypes = {
 layout: PropTypes.object,
};

function render(component) {
 if (
 R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return component;
 }
function hydrateProps(props) {
 const replace = {};
 Object.entries(props)
 .filter(([_, v]) => isComponent(v))
 .forEach(([k, v]) => {
 if (R.type(v) === 'Array') {
 // TODO add key ?.
 replace[k] = v.map(c => {
 if (!isComponent(c)) {
 return c;
 }
 const newProps = hydrateProps(c.props);
 return hydrateComponent(
 c.type,
 c.namespace,
 newProps
 );
 });
 } else {
 const newProps = hydrateProps(v.props);
 replace[k] = hydrateComponent(
 v.type,
 v.namespace,
 newProps
 );
 }
 });
 return R.merge(props, replace);
}

 // Create list of child elements
 let children;
function hydrateComponent(
 component_name,
 namespace,
 props,
) {
 const element = Registry.resolve(component_name, namespace);

 const componentProps = R.propOr({}, 'props', component);
 const component = React.createElement(
 element,
 props
 );

 if (
 !R.has('props', component) ||
 !R.has('children', component.props) ||
 typeof component.props.children === 'undefined'
 ) {
 // No children
 children = [];
 } else if (
 R.contains(R.type(component.props.children), [
 'String',
 'Number',
 'Null',
 'Boolean',
 ])
 ) {
 children = [component.props.children];
 } else {
 // One or multiple objects
 // Recursively render the tree
 // TODO - I think we should pass in `key` here.
 children = (Array.isArray(componentProps.children)
 ? componentProps.children
 : [componentProps.children]
 ).map(render);
 }
 // eslint-disable-next-line
 return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

 if (!component.type) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.type is undefined');
 }
 if (!component.namespace) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }
 const element = Registry.resolve(component.type, component.namespace);

 const parent = React.createElement(
 element,
 R.omit(['children'], component.props),
 ...children
 );
 render() {
 const { layout } = this.props;
 if (
 R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return layout;
 }

 return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
 return hydrateComponent(
 layout.type,
 layout.namespace,
 hydrateProps(layout.props)
 );
 }
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz

View file


Open in desktop


Binary file not shown.


75 changes: 52 additions & 23 deletions
tests/test_render.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
 def setUp(self):
 pass

 def wait_for_element_by_css_selector(self, selector):
 start_time = time.time()
 exception = Exception('Time ran out, {} not found'.format(selector))
 while time.time() < start_time + 20:
 try:
 return self.driver.find_element_by_css_selector(selector)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)
 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.presence_of_element_located((By.CSS_SELECTOR, selector))
 )

 def wait_for_text_to_equal(self, selector, assertion_text):
 start_time = time.time()
 exception = Exception('Time ran out, {} on {} not found'.format(
 assertion_text, selector))
 while time.time() < start_time + 20:
 el = self.wait_for_element_by_css_selector(selector)
 try:
 return self.assertEqual(el.text, assertion_text)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)

 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
 assertion_text)
 )

 def request_queue_assertions(
 self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
 self.assertTrue(timestamp_2.value > timestamp_1.value)
 self.assertEqual(call_count.value, 4)
 self.percy_snapshot('button-2 click again')

 def test_component_as_props(self):
 app = dash.Dash(__name__)
 app.layout = html.Div([
 html.Button('button', id='mod-btn'),
 component_props.ComponentProps(
 id='c-props',
 component_props=html.Div('Component as prop'),
 comp_array=[
 html.Div([html.Div('1'), html.Div('2'), 3]),
 html.Div('4')
 ]
 ),
 html.Div(id='output')
 ])

 @app.callback(Output('c-props', 'component_props'),
 [Input('mod-btn', 'n_clicks')])
 def on_clicks(n_clicks):
 if n_clicks is None:
 raise PreventUpdate

 return html.H2('New component from a callback')

 self.startServer(app)

 self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
 for i in range(1, 3):
 self.wait_for_text_to_equal(
 '#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
 str(i)
 )
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

 self.wait_for_element_by_css_selector('#mod-btn').click()
 self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Component as props support.#92
 Closed

T4rk1n
wants to merge
7
commits into

from

 Closed


Component as props support.
#92
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


7 commits


Select commit
Hold shift + click to select a range
9a1db90

Component as props support.


T4rk1n Oct 26, 2018
6a1355a

Wrap in NotifyObservers after hydrating.


T4rk1n Oct 26, 2018
199fcb3

Hydrate list of components prop.


T4rk1n Oct 29, 2018
8f9346f

:camel: + :nail_care: -> TreeContainer.


T4rk1n Oct 29, 2018
03fb402

set dash version==0.28.5


T4rk1n Oct 29, 2018
916e4c6

Fix mixed component, other types in list.


T4rk1n Oct 29, 2018
d7aedc5

Add component as prop integration test.


T4rk1n Oct 30, 2018

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


3 changes: 2 additions & 1 deletion
dev-requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
dash_core_components==0.33.0
dash_html_components==0.11.0rc5
dash==0.28.0
dash==0.28.5
percy
selenium
mock
six
tests/requirements/component_props-0.0.1.tar.gz

137 changes: 72 additions & 65 deletions
src/TreeContainer.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -6,81 +6,88 @@ import PropTypes from 'prop-types';
import Registry from './registry';
import NotifyObservers from './components/core/NotifyObservers.react';

export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }

 render() {
 return render(this.props.layout);
function isComponent(c) {
 switch (R.type(c)) {
 case 'Array':
 return R.any(isComponent)(c);
 case 'Object':
 return (
 c.hasOwnProperty('namespace') &&
 c.hasOwnProperty('props') &&
 c.hasOwnProperty('type')
 );
 default:
 return false;
 }
}

TreeContainer.propTypes = {
 layout: PropTypes.object,
};

function render(component) {
 if (
 R.contains(R.type(component), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return component;
 }
function hydrateProps(props) {
 const replace = {};
 Object.entries(props)
 .filter(([_, v]) => isComponent(v))
 .forEach(([k, v]) => {
 if (R.type(v) === 'Array') {
 // TODO add key ?.
 replace[k] = v.map(c => {
 if (!isComponent(c)) {
 return c;
 }
 const newProps = hydrateProps(c.props);
 return hydrateComponent(
 c.type,
 c.namespace,
 newProps
 );
 });
 } else {
 const newProps = hydrateProps(v.props);
 replace[k] = hydrateComponent(
 v.type,
 v.namespace,
 newProps
 );
 }
 });
 return R.merge(props, replace);
}

 // Create list of child elements
 let children;
function hydrateComponent(
 component_name,
 namespace,
 props,
) {
 const element = Registry.resolve(component_name, namespace);

 const componentProps = R.propOr({}, 'props', component);
 const component = React.createElement(
 element,
 props
 );

 if (
 !R.has('props', component) ||
 !R.has('children', component.props) ||
 typeof component.props.children === 'undefined'
 ) {
 // No children
 children = [];
 } else if (
 R.contains(R.type(component.props.children), [
 'String',
 'Number',
 'Null',
 'Boolean',
 ])
 ) {
 children = [component.props.children];
 } else {
 // One or multiple objects
 // Recursively render the tree
 // TODO - I think we should pass in `key` here.
 children = (Array.isArray(componentProps.children)
 ? componentProps.children
 : [componentProps.children]
 ).map(render);
 }
 // eslint-disable-next-line
 return <NotifyObservers id={props.id}>{component}</NotifyObservers>;
}

 if (!component.type) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.type is undefined');
 }
 if (!component.namespace) {
 /* eslint-disable no-console */
 console.error(R.type(component), component);
 /* eslint-enable no-console */
 throw new Error('component.namespace is undefined');
export default class TreeContainer extends Component {
 shouldComponentUpdate(nextProps) {
 return nextProps.layout !== this.props.layout;
 }
 const element = Registry.resolve(component.type, component.namespace);

 const parent = React.createElement(
 element,
 R.omit(['children'], component.props),
 ...children
 );
 render() {
 const { layout } = this.props;
 if (
 R.contains(R.type(layout), ['String', 'Number', 'Null', 'Boolean'])
 ) {
 return layout;
 }

 return <NotifyObservers id={componentProps.id}>{parent}</NotifyObservers>;
 return hydrateComponent(
 layout.type,
 layout.namespace,
 hydrateProps(layout.props)
 );
 }
}

render.propTypes = {
children: PropTypes.object,
TreeContainer.propTypes = {
layout: PropTypes.object,
};
Binary file addedtests/requirements/component_props-0.0.1.tar.gz

View file


Open in desktop


Binary file not shown.


75 changes: 52 additions & 23 deletions
tests/test_render.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,6 +4,11 @@
from dash.development.base_component import Component
import dash_html_components as html
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

from .IntegrationTests import IntegrationTests
from .utils import assert_clean_console, wait_for
from multiprocessing import Value
Expand All@@ -12,38 +17,25 @@
import itertools
import json
import unittest
import component_props

TIMEOUT = 20


class Tests(IntegrationTests):
 def setUp(self):
 pass

 def wait_for_element_by_css_selector(self, selector):
 start_time = time.time()
 exception = Exception('Time ran out, {} not found'.format(selector))
 while time.time() < start_time + 20:
 try:
 return self.driver.find_element_by_css_selector(selector)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)
 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.presence_of_element_located((By.CSS_SELECTOR, selector))
 )

 def wait_for_text_to_equal(self, selector, assertion_text):
 start_time = time.time()
 exception = Exception('Time ran out, {} on {} not found'.format(
 assertion_text, selector))
 while time.time() < start_time + 20:
 el = self.wait_for_element_by_css_selector(selector)
 try:
 return self.assertEqual(el.text, assertion_text)
 except Exception as e:
 exception = e
 pass
 time.sleep(0.25)

 raise exception
 return WebDriverWait(self.driver, TIMEOUT).until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, selector),
 assertion_text)
 )

 def request_queue_assertions(
 self, check_rejected=True, expected_length=None):
Expand DownExpand Up@@ -1866,3 +1858,40 @@ def update_output(*args):
 self.assertTrue(timestamp_2.value > timestamp_1.value)
 self.assertEqual(call_count.value, 4)
 self.percy_snapshot('button-2 click again')

 def test_component_as_props(self):
 app = dash.Dash(__name__)
 app.layout = html.Div([
 html.Button('button', id='mod-btn'),
 component_props.ComponentProps(
 id='c-props',
 component_props=html.Div('Component as prop'),
 comp_array=[
 html.Div([html.Div('1'), html.Div('2'), 3]),
 html.Div('4')
 ]
 ),
 html.Div(id='output')
 ])

 @app.callback(Output('c-props', 'component_props'),
 [Input('mod-btn', 'n_clicks')])
 def on_clicks(n_clicks):
 if n_clicks is None:
 raise PreventUpdate

 return html.H2('New component from a callback')

 self.startServer(app)

 self.wait_for_text_to_equal('#c-props > div:nth-child(1)', 'Component as prop')
 for i in range(1, 3):
 self.wait_for_text_to_equal(
 '#c-props > div:nth-child(2) > div:nth-child(1) > div:nth-child({})'.format(i),
 str(i)
 )
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(1)', '3')
 self.wait_for_text_to_equal('#c-props > div:nth-child(2) > div:nth-child(2)', '4')

 self.wait_for_element_by_css_selector('#mod-btn').click()
 self.wait_for_text_to_equal('#c-props > h2', 'New component from a callback')