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

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mjclawar@utyf@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
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;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Add optional React 16 support by mjclawar · Pull Request #45 · plotly/dash-renderer · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mjclawar@utyf@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add optional React 16 support by mjclawar · Pull Request #45 · plotly/dash-renderer · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mjclawar@utyf@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add optional React 16 support by mjclawar · Pull Request #45 · plotly/dash-renderer · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mjclawar@utyf@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Add optional React 16 support by mjclawar · Pull Request #45 · plotly/dash-renderer · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mjclawar@utyf@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add optional React 16 support by mjclawar · Pull Request #45 · plotly/dash-renderer · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mjclawar@utyf@chriddyp
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Add optional React 16 support by mjclawar · Pull Request #45 · plotly/dash-renderer · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

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

Add optional React 16 support - #45

Merged
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master
Mar 29, 2018
Merged

Add optional React 16 support#45
chriddyp merged 10 commits into
plotly:masterfrom
mjclawar:master

Conversation

@mjclawar

Copy link
Copy Markdown
Contributor

Description

This adds optional React 16 support by allowing the developer to modify the React version served using, e.g.:

importdash_rendererdash_renderer.REACT_VERSION='16.2.0'

The default REACT_VERSION remains 15.4.2

Other changes

  • Updated .eslintignore to ignore all minified react bundles (versus just 15.4.2)
  • Bumped version to 0.12.0

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

The mechanism of choosing version is not clear.
When you execute import dash_renderer file dash_renderer/__init__.py is executed and version is set to '15.4.2'.
If you set REACT_VERSION to '16.2.0' later on the next line, this has no effect.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@utyf You're totally right. I just realized this last night. I'm going to close this PR for now. There's another (ugly) monkeypatch example in this PR: plotly/dash-core-components#160

@utyf

utyf commented Feb 14, 2018

Copy link
Copy Markdown

maybe we need to do something like this:

def_set_react_version(react_version):
assertreact_versionin_REACT_VERSION_TYPES# Dash renderer's dependencies get loaded in a special order by the server:# React bundles first, the renderer bundle at the very end.setattr(_this_module, '_js_dist_dependencies', [{
'external_url': _REACT_VERSION_TO_URLS[react_version]['external_url'],
'relative_package_path': _REACT_VERSION_TO_URLS[react_version]['relative_package_path'],
'namespace': 'dash_renderer'
}])
setattr(_this_module, '_js_dist', [{
'relative_package_path': 'bundle.js',
"external_url": (
'https://unpkg.com/dash-renderer@{}''/dash_renderer/bundle.js'
).format(__version__),
'namespace': 'dash_renderer'
}])
_set_react_version('15.4.2')

and then, in the code:

importdash_rendererdash_renderer._set_react_version('16.2.0')

…eact version from a dash application. Adds test for scripts versions served by Dash. Updates CHANGELOG to reflect new usage
@mjclawar

Copy link
Copy Markdown
ContributorAuthor

That works. Adding and reopening with that. From the updated CHANGELOG:

Allows user to now choose between '15.4.2' and '16.2.0' for React versions

importdash_renderer# Set the react version before setting up the Dash applicationdash_renderer._set_react_version('16.2.0')
app=dash.Dash(...)

All previous tests still pass. Added another test to make sure that this actually updates the React version for a dash.Dash application initialized afterdash_renderer._set_react_version has been called

Thanks, @utyf !

@mjclawarmjclawar reopened this Feb 17, 2018
@chriddyp

Copy link
Copy Markdown
Member

This looks good to me! Thank you very much for adding the test. Anything else you would like to add @mjclawar before I merge?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp no I think this covers everything as long as you are OK with the dash_renderer._set_react_version method!

Probably also will want to bump the default minimum React version to 15.6 soon to at least warn other dash component authors about PropTypes before ideally moving entirely to 16. Not sure if you want a more rigorous roadmap about updating dash-renderer React versions.

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp anything else you need to see on this?

@utyf

utyf commented Mar 21, 2018

Copy link
Copy Markdown

Any news on the topic?

@mjclawar

Copy link
Copy Markdown
ContributorAuthor

@chriddyp Checking in to see if you want anything else here to accept the PR.

We're looking forward to using React 16 for all our Dash applications!

@chriddyp

Copy link
Copy Markdown
Member

Sorry for the delay on this one! This looks good to me, I'll merge now and press a new release 🍻

@chriddyp
chriddyp merged commit f63e9d0 into plotly:masterMar 29, 2018
@chriddyp

Copy link
Copy Markdown
Member

just published: pip install dash-renderer==0.12.0

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@mjclawar@utyf@chriddyp