') + ')', '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('^' + ".*" + ', '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" + ', '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('^' + ".*" + ', '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); } })(); })(); Add unminified components bundle support. by T4rk1n · Pull Request #369 · plotly/dash · GitHub
Skip to content

Add unminified components bundle support. - #369

Merged
T4rk1n merged 13 commits into
masterfrom
serve-unminified
Sep 21, 2018
Merged

Add unminified components bundle support.#369
T4rk1n merged 13 commits into
masterfrom
serve-unminified

Conversation

@T4rk1n

@T4rk1nT4rk1n commented Sep 6, 2018•
edited by rmarren1
Loading

Copy link
Copy Markdown
Contributor

Add support for serving unminified component bundles. Resolves#313.

Enable with:

app=dash.Dash(__name__, dev_tools_serve_dev_bundles=True)

The components libs needs a new key in the their _js_dist: dev_package_path.

  • dash-html-components
  • dash-core-components
  • dash-renderer

This was referenced Sep 6, 2018
Merged
Merged
@rmarren1

rmarren1 commented Sep 7, 2018

Copy link
Copy Markdown
Contributor

This looks great! I think we should actually turn this feature on when a user is in a global "dev" mode, where they would also turn on the Dash Dev Tools features. I think an argument to dash.Dash is the most intuitive way to turn such a thing on.

I don't have a method in Dev Tools just yet. Maybe we should change serve_dash_bundles to something more general like use_dev_tools, then I can piggy back off this flag in the Dev Tools PR and turn those on when it is true.

@T4rk1n

T4rk1n commented Sep 7, 2018

Copy link
Copy Markdown
ContributorAuthor

@rmarren1 So you want to combine the flag to serve the dev bundle and activate the devtools ? It make sense because the stacktraces will be much better with dev bundles.

I think we should call the keyword argument enable_dev_tools or just dev_tools.

@rmarren1

rmarren1 commented Sep 7, 2018

Copy link
Copy Markdown
Contributor

Yeah either of those sound good. Yeah the stack traces are generally unreadable for the production bundles, so Dev tools should definitely depend on them

@chriddyp

chriddyp commented Sep 7, 2018

Copy link
Copy Markdown
Member

I think an argument to dash.Dash is the most intuitive way to turn such a thing on.

One issue with this is that users will accidentally deploy with dev_tools turned on. I'd also like for this to become the default behaviour for dash. So, I think we should introduce a second set of config parameters in the run_server call that turn on all dev_tools-like things. Users shouldn't be doing run_server in production as they should be running it with gunicorn. We could even move towards renaming run_server to like run_dev_server or something.

For some more context, see the debug, dev, production section in this issue: #312

@T4rk1n

T4rk1n commented Sep 7, 2018

Copy link
Copy Markdown
ContributorAuthor

For the same reason @chriddyp mentionned, I don't really like the argument in the constructor for this (and hot-reload). I think these arguments could very well be in run_server since that the most likely place it gonna be used and have them default to true.

@T4rk1n

T4rk1n commented Sep 7, 2018

Copy link
Copy Markdown
ContributorAuthor

@chriddyp I made the change to run_server, please review.

@rmarren1

rmarren1 commented Sep 7, 2018

Copy link
Copy Markdown
Contributor

💃 looks good to me!

@T4rk1nT4rk1n mentioned this pull request Sep 7, 2018
Merged
@ned2

ned2 commented Sep 8, 2018

Copy link
Copy Markdown
Contributor

I like the approach of pushing dev mode activation away from Dash's constructor. I also think it's important that we don't bake dev-mode specific setup logic into run_server because users should still be able to conveniently run in dev mode using a WSGI server like gunicorn etc. This enables development/debugging in an environment that is closer to production for those people not using the built-in development server.

What about having a separate Dash method like activate_dev_mode or something that does all the relevant setup (I guess currently just setting _serve_dev_bundle to True, but I can imagine the setup might grow over time) and which run_server can call? Then this could be manually invoked for those wanting dev mode on gunicorn etc?

If we wanted to do that, this could be a separate PR though.

@T4rk1nT4rk1n mentioned this pull request Sep 12, 2018
Closed
@chriddypchriddyp mentioned this pull request Sep 12, 2018
Closed
@T4rk1nT4rk1n mentioned this pull request Sep 13, 2018
Merged
@T4rk1n
T4rk1nforce-pushed the serve-unminified branch 3 times, most recently from 625db7a to 7b3d319CompareSeptember 17, 2018 15:30
@T4rk1n

T4rk1n commented Sep 17, 2018

Copy link
Copy Markdown
ContributorAuthor

@chriddyp@rmarren1@ned2

I changed the naming of the dev tools variables, please review.

Also I used _config.get_config in lieu of with_defaults, this allow for setting the dev tools variables from environ, can use them to have different run configs without changing the code.

@T4rk1n
T4rk1nforce-pushed the serve-unminified branch 2 times, most recently from a1cf21e to b5fe3c8CompareSeptember 20, 2018 16:30
@T4rk1n

T4rk1n commented Sep 20, 2018•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

I released the component suites bundles, when I tried to load them from unpkg it failed because of the name change from bundle.js to lib_name.min.js

Fix:

  • dash-core-components
  • dash-html-components
  • dash-renderer

This was referenced Sep 20, 2018
Merged
Merged
Merged
chriddyp
chriddyp reviewed Sep 20, 2018
View reviewed changes
Comment threaddash/dash.py Outdated
served by wsgi and you want to activate the dev tools, you can call
this method out of `__main__`.

:param debug: If false no tools will be activated.

@chriddypchriddypSep 20, 2018

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Should we add If True, then all of the other dev tool settings will be True unless specifically overridden.

chriddyp
chriddyp approved these changes Sep 20, 2018
View reviewed changes

@chriddypchriddyp left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Looks good to me, thanks for your patience on this one!

@T4rk1n
T4rk1n merged commit f94991b into masterSep 21, 2018
@T4rk1n
T4rk1n deleted the serve-unminified branch February 1, 2019 02:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chriddypchriddypchriddyp approved these changes
@rmarren1rmarren1Awaiting requested review from rmarren1

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@T4rk1n@rmarren1@chriddyp@ned2