Component as props - #1965

Merged
T4rk1n merged 33 commits into
devfrom
component-as-props
Jun 2, 2022
Merged

Component as props#1965
T4rk1n merged 33 commits into
devfrom
component-as-props

Conversation

@T4rk1n

@T4rk1nT4rk1n commented Mar 11, 2022

Copy link
Copy Markdown
Contributor

Add component as prop support.

Contributor Checklist

  • I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

optionals

  • I have added entry in the CHANGELOG.md
  • If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows
    • this GitHub #PR number updates the dash docs
    • here is the show and tell thread in Plotly Dash community

@T4rk1n
T4rk1nforce-pushed the component-as-props branch from 652f6e5 to eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson mentioned this pull request Apr 7, 2022
Closed
@T4rk1n
T4rk1nforce-pushed the component-as-props branch 2 times, most recently from 8f4373f to 3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson mentioned this pull request Apr 22, 2022
Closed
@T4rk1n
T4rk1nforce-pushed the component-as-props branch from b3f688d to dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson reviewed Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js Outdated
alexcjohnson
alexcjohnson reviewed Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js Outdated
alexcjohnson
alexcjohnson reviewed Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py Outdated
alexcjohnson
alexcjohnson reviewed Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py Outdated
alexcjohnson
alexcjohnson reviewed Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js Outdated
@T4rk1n
T4rk1nforce-pushed the component-as-props branch from 7ad588b to 63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed the component-as-props branch from d79efe1 to 3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed the component-as-props branch from 75bded4 to 642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed the component-as-props branch from c34cb38 to 854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson reviewed May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py Outdated
alexcjohnson
alexcjohnson reviewed May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py Outdated
alexcjohnson
alexcjohnson reviewed Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py Outdated

@classmethod
def _get_base_nodes(cls):
if not cls._base_nodes:

@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?

@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.

@T4rk1nT4rk1nJun 2, 2022

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.

@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?

@T4rk1nT4rk1nJun 2, 2022

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.

alexcjohnson
alexcjohnson approved these changes Jun 1, 2022
View reviewed changes

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃

@T4rk1n
T4rk1nforce-pushed the component-as-props branch from 100da72 to 5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed the component-as-props branch from 5beab83 to ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n merged commit 467d4ca into devJun 2, 2022
@T4rk1n
T4rk1n deleted the component-as-props branch June 2, 2022 17:25
@etpinardetpinard mentioned this pull request Jun 28, 2023
Open
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson
, '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
Component as props - #1965
Merged
T4rk1n merged 33 commits into
devfrom 
component-as-props
Jun 2, 2022
Merged
Component as props#1965
T4rk1n merged 33 commits into
devfrom 
component-as-props
Conversation
@T4rk1n
@T4rk1nT4rk1n
commented
Mar 11, 2022

Copy link


Copy Markdown

Contributor
Add component as prop support.
Contributor Checklist
  •  I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
optionals
  •  I have added entry in the CHANGELOG.md
  •  If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

    •  this GitHub #PR number updates the dash docs
    •  here is the show and tell thread in Plotly Dash community
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
652f6e5 to
eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 7, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
2 times, most recently
from
8f4373f to
3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 22, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
b3f688d to
dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js
Outdated

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
7ad588b to
63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
d79efe1 to
3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
75bded4 to
642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
c34cb38 to
854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson
reviewed
May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated


 @classmethod
 def _get_base_nodes(cls):
 if not cls._base_nodes:
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.
@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.
alexcjohnson
alexcjohnson
approved these changes
Jun 1, 2022
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
100da72 to
5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
5beab83 to
ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n
merged commit 467d4ca
into
devJun 2, 2022
@T4rk1n
T4rk1n
deleted the

component-as-props

branch
June 2, 2022 17:25
@etpinardetpinard
mentioned this pull request
Jun 28, 2023

Open

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson

, '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
Component as props - #1965
Merged
T4rk1n merged 33 commits into
devfrom 
component-as-props
Jun 2, 2022
Merged
Component as props#1965
T4rk1n merged 33 commits into
devfrom 
component-as-props
Conversation
@T4rk1n
@T4rk1nT4rk1n
commented
Mar 11, 2022

Copy link


Copy Markdown

Contributor
Add component as prop support.
Contributor Checklist
  •  I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
optionals
  •  I have added entry in the CHANGELOG.md
  •  If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

    •  this GitHub #PR number updates the dash docs
    •  here is the show and tell thread in Plotly Dash community
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
652f6e5 to
eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 7, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
2 times, most recently
from
8f4373f to
3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 22, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
b3f688d to
dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js
Outdated

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
7ad588b to
63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
d79efe1 to
3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
75bded4 to
642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
c34cb38 to
854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson
reviewed
May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated


 @classmethod
 def _get_base_nodes(cls):
 if not cls._base_nodes:
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.
@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.
alexcjohnson
alexcjohnson
approved these changes
Jun 1, 2022
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
100da72 to
5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
5beab83 to
ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n
merged commit 467d4ca
into
devJun 2, 2022
@T4rk1n
T4rk1n
deleted the

component-as-props

branch
June 2, 2022 17:25
@etpinardetpinard
mentioned this pull request
Jun 28, 2023

Open

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson

, '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
Component as props - #1965
Merged
T4rk1n merged 33 commits into
devfrom 
component-as-props
Jun 2, 2022
Merged
Component as props#1965
T4rk1n merged 33 commits into
devfrom 
component-as-props
Conversation
@T4rk1n
@T4rk1nT4rk1n
commented
Mar 11, 2022

Copy link


Copy Markdown

Contributor
Add component as prop support.
Contributor Checklist
  •  I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
optionals
  •  I have added entry in the CHANGELOG.md
  •  If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

    •  this GitHub #PR number updates the dash docs
    •  here is the show and tell thread in Plotly Dash community
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
652f6e5 to
eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 7, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
2 times, most recently
from
8f4373f to
3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 22, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
b3f688d to
dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js
Outdated

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
7ad588b to
63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
d79efe1 to
3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
75bded4 to
642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
c34cb38 to
854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson
reviewed
May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated


 @classmethod
 def _get_base_nodes(cls):
 if not cls._base_nodes:
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.
@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.
alexcjohnson
alexcjohnson
approved these changes
Jun 1, 2022
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
100da72 to
5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
5beab83 to
ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n
merged commit 467d4ca
into
devJun 2, 2022
@T4rk1n
T4rk1n
deleted the

component-as-props

branch
June 2, 2022 17:25
@etpinardetpinard
mentioned this pull request
Jun 28, 2023

Open

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson

, '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
Component as props - #1965
Merged
T4rk1n merged 33 commits into
devfrom 
component-as-props
Jun 2, 2022
Merged
Component as props#1965
T4rk1n merged 33 commits into
devfrom 
component-as-props
Conversation
@T4rk1n
@T4rk1nT4rk1n
commented
Mar 11, 2022

Copy link


Copy Markdown

Contributor
Add component as prop support.
Contributor Checklist
  •  I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
optionals
  •  I have added entry in the CHANGELOG.md
  •  If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

    •  this GitHub #PR number updates the dash docs
    •  here is the show and tell thread in Plotly Dash community
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
652f6e5 to
eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 7, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
2 times, most recently
from
8f4373f to
3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 22, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
b3f688d to
dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js
Outdated

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
7ad588b to
63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
d79efe1 to
3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
75bded4 to
642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
c34cb38 to
854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson
reviewed
May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated


 @classmethod
 def _get_base_nodes(cls):
 if not cls._base_nodes:
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.
@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.
alexcjohnson
alexcjohnson
approved these changes
Jun 1, 2022
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
100da72 to
5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
5beab83 to
ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n
merged commit 467d4ca
into
devJun 2, 2022
@T4rk1n
T4rk1n
deleted the

component-as-props

branch
June 2, 2022 17:25
@etpinardetpinard
mentioned this pull request
Jun 28, 2023

Open

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson

, '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
Component as props - #1965
Merged
T4rk1n merged 33 commits into
devfrom 
component-as-props
Jun 2, 2022
Merged
Component as props#1965
T4rk1n merged 33 commits into
devfrom 
component-as-props
Conversation
@T4rk1n
@T4rk1nT4rk1n
commented
Mar 11, 2022

Copy link


Copy Markdown

Contributor
Add component as prop support.
Contributor Checklist
  •  I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
optionals
  •  I have added entry in the CHANGELOG.md
  •  If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

    •  this GitHub #PR number updates the dash docs
    •  here is the show and tell thread in Plotly Dash community
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
652f6e5 to
eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 7, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
2 times, most recently
from
8f4373f to
3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 22, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
b3f688d to
dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js
Outdated

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
7ad588b to
63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
d79efe1 to
3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
75bded4 to
642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
c34cb38 to
854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson
reviewed
May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated


 @classmethod
 def _get_base_nodes(cls):
 if not cls._base_nodes:
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.
@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.
alexcjohnson
alexcjohnson
approved these changes
Jun 1, 2022
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
100da72 to
5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
5beab83 to
ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n
merged commit 467d4ca
into
devJun 2, 2022
@T4rk1n
T4rk1n
deleted the

component-as-props

branch
June 2, 2022 17:25
@etpinardetpinard
mentioned this pull request
Jun 28, 2023

Open

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson

, '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
Component as props - #1965
Merged
T4rk1n merged 33 commits into
devfrom 
component-as-props
Jun 2, 2022
Merged
Component as props#1965
T4rk1n merged 33 commits into
devfrom 
component-as-props
Conversation
@T4rk1n
@T4rk1nT4rk1n
commented
Mar 11, 2022

Copy link


Copy Markdown

Contributor
Add component as prop support.
Contributor Checklist
  •  I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
optionals
  •  I have added entry in the CHANGELOG.md
  •  If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

    •  this GitHub #PR number updates the dash docs
    •  here is the show and tell thread in Plotly Dash community
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
652f6e5 to
eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 7, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
2 times, most recently
from
8f4373f to
3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 22, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
b3f688d to
dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js
Outdated

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
7ad588b to
63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
d79efe1 to
3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
75bded4 to
642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
c34cb38 to
854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson
reviewed
May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated


 @classmethod
 def _get_base_nodes(cls):
 if not cls._base_nodes:
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.
@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.
alexcjohnson
alexcjohnson
approved these changes
Jun 1, 2022
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
100da72 to
5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
5beab83 to
ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n
merged commit 467d4ca
into
devJun 2, 2022
@T4rk1n
T4rk1n
deleted the

component-as-props

branch
June 2, 2022 17:25
@etpinardetpinard
mentioned this pull request
Jun 28, 2023

Open

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson

, '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
Component as props - #1965
Merged
T4rk1n merged 33 commits into
devfrom 
component-as-props
Jun 2, 2022
Merged
Component as props#1965
T4rk1n merged 33 commits into
devfrom 
component-as-props
Conversation
@T4rk1n
@T4rk1nT4rk1n
commented
Mar 11, 2022

Copy link


Copy Markdown

Contributor
Add component as prop support.
Contributor Checklist
  •  I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR
optionals
  •  I have added entry in the CHANGELOG.md
  •  If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows

    •  this GitHub #PR number updates the dash docs
    •  here is the show and tell thread in Plotly Dash community
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
652f6e5 to
eab4b27CompareMarch 14, 2022 14:00
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 7, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
2 times, most recently
from
8f4373f to
3905100CompareApril 20, 2022 18:23
@alexcjohnsonalexcjohnson
mentioned this pull request
Apr 22, 2022
 Closed

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
b3f688d to
dce32fdCompareApril 25, 2022 18:09
alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threadcomponents/dash-core-components/src/components/Checklist.react.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment thread@plotly/dash-test-components/src/components/ComponentAsProp.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 27, 2022
View reviewed changes
Comment threaddash/dash-renderer/src/actions/utils.js
Outdated

@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
7ad588b to
63f7312CompareApril 29, 2022 20:48
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
d79efe1 to
3a26a40CompareMay 2, 2022 19:38
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
75bded4 to
642fbeaCompareMay 2, 2022 20:46
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
c34cb38 to
854446cCompareMay 2, 2022 21:48
alexcjohnson
alexcjohnson
reviewed
May 25, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated

alexcjohnson
alexcjohnson
reviewed
May 26, 2022
View reviewed changes
Comment threadtests/unit/development/test_collect_nodes.py
Outdated

alexcjohnson
alexcjohnson
reviewed
Jun 1, 2022
View reviewed changes
Comment threaddash/development/base_component.py
Outdated


 @classmethod
 def _get_base_nodes(cls):
 if not cls._base_nodes:
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if a component has lots of props but none of them accept components, will we run this iteration every time one of them is instantiated? If so, can we avoid that? Moving + ["children"] in here would be one way perhaps?
@alexcjohnsonalexcjohnsonJun 1, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh sorry, it's only iterating over _children_props - so the problem only comes if there are lots of nested props and no base props. Still would be best to avoid.
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move that to the generator.
@alexcjohnsonalexcjohnsonJun 2, 2022

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Seems like the way you implemented this is compatible with the old generated components, how hard would it be to add a test to explicitly verify that? ie include a component in the tests that doesn't auto-generate but instead uses the old generator output?
@T4rk1nT4rk1nJun 2, 2022

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a legacy test from the old standard component output.
alexcjohnson
alexcjohnson
approved these changes
Jun 1, 2022
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Add a changelog entry and consider my minor perf comment and I think we're ready to go! 💃
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
100da72 to
5beab83CompareJune 2, 2022 16:44
@T4rk1n
T4rk1nforce-pushed
the
component-as-props
branch
from
5beab83 to
ebc309aCompareJune 2, 2022 17:08
@T4rk1n
T4rk1n
merged commit 467d4ca
into
devJun 2, 2022
@T4rk1n
T4rk1n
deleted the

component-as-props

branch
June 2, 2022 17:25
@etpinardetpinard
mentioned this pull request
Jun 28, 2023

Open

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@T4rk1n@alexcjohnson