Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@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" + '
Issue 481 - Support arbitrary file extensions in component suites by Marc-Andre-Rivet · Pull Request #1078 · plotly/dash · GitHub
Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@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('^' + ".*" + ' Issue 481 - Support arbitrary file extensions in component suites by Marc-Andre-Rivet · Pull Request #1078 · plotly/dash · GitHub
Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@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('^' + ".*" + ' Issue 481 - Support arbitrary file extensions in component suites by Marc-Andre-Rivet · Pull Request #1078 · plotly/dash · GitHub
Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@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" + ' Issue 481 - Support arbitrary file extensions in component suites by Marc-Andre-Rivet · Pull Request #1078 · plotly/dash · GitHub
Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@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('^' + ".*" + ' Issue 481 - Support arbitrary file extensions in component suites by Marc-Andre-Rivet · Pull Request #1078 · plotly/dash · GitHub
Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@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('^' + ".*" + ' Issue 481 - Support arbitrary file extensions in component suites by Marc-Andre-Rivet · Pull Request #1078 · plotly/dash · GitHub
Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@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); } })(); })(); Issue 481 - Support arbitrary file extensions in component suites by Marc-Andre-Rivet · Pull Request #1078 · plotly/dash · GitHub
Skip to content

Issue 481 - Support arbitrary file extensions in component suites - #1078

Merged
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions
Apr 24, 2020
Merged

Issue 481 - Support arbitrary file extensions in component suites#1078
Marc-Andre-Rivet merged 26 commits into
devfrom
481-arbitrary-extensions

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented Jan 10, 2020

Copy link
Copy Markdown
Contributor

Closes#481

Add arbitrary file support for component suite.

This is being done with the idea of packaging fonts with the components that require them without the need for adding assets or loading everything upfront as base64 inside css files. Images would be handled similarly, also with the file-loader.

Once added, component repos using webpack can use the following loader configuration:

{
test: /\.(woff|woff2|eot|svg|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 0, // no resource gets inlined in the js bundle
esModule: false, // this option is required for file-loader >= 5.0.0
name: '[name].[ext]'
}
}]
}

And include source resources in css files like so:

@font-face {
font-family: 'My-Font';
src: url(./My-Font.ttf) format('truetype');
}

url(./My-Font.ttf) will be resolved to the correct path by the same plugin used for async (https://github.com/plotly/dash/tree/dev/%40plotly/webpack-dash-dynamic-import)

And include the resource in the component's __init__.py (and MANIFEST):

{
'relative_package_path': 'My-Font.ttf',
'external_url': (
'https://unpkg.com/my-dash-components@{}'
'/my_dash_component/My-Font.ttf'
).format(__version__),
'namespace': 'my_dash_component',
'dynamic': True
},

Adding dynamic:True will ensure that the file is only loaded when requested by the css (e.g. async scenarios).

Do note that as implemented, these resources will not be fingerprinted and will default to using eTag for caching purposes.

@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review January 10, 2020 17:37
@Marc-Andre-RivetMarc-Andre-Rivet changed the title 481 arbitrary extensionsIssue 481 - Support arbitrary file extensions in component suiteJan 10, 2020
@Marc-Andre-RivetMarc-Andre-Rivet changed the title Issue 481 - Support arbitrary file extensions in component suiteIssue 481 - Support arbitrary file extensions in component suitesJan 10, 2020
Comment threaddash/dash.py Outdated
@Marc-Andre-RivetMarc-Andre-Rivet added this to the Dash v1.9 milestone Jan 20, 2020
@wbrgss

wbrgss commented Jan 20, 2020

Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Using his branch for my Dash installation (and re-running dash-generate-components, but this step doesn't seem to affect the result) results in my component not being able to load its raw _css_dist files, e.g those enumerated in

_css_dist = [
{
"relative_package_path": "main.css",
"namespace": "my_component"
},
{
"relative_package_path": "style1.css",
"namespace": "my_component"
},
{
"relative_package_path": "style2.css",
"namespace": "my_component"
},
{
"relative_package_path": "etc.css",
"namespace": "my_component"
},
...
]

When switching back to the released Dash 1.8.0, these CSS files are loaded OK. Assets and css-in-js seem to load fine in either changeset.

When testing this branch, I expected everything to be loaded as before, except for my font files. Is it possible I need to modify my webpack config and __init__.py in order to have backwards compatibility with my normal _css_dist files? Even if I'm doing something wrong in my component config, I'm worried about component authors upgrading Dash and seeing a breaking change in that their _css_dist*.css files are no longer appearing.

Comment threadCHANGELOG.md Outdated
Co-Authored-By: Ryan Patrick Kyle <rpkyle@users.noreply.github.com>
@wbrgss

Copy link
Copy Markdown
Contributor

This PR is closer than I thought; I can load custom fonts. The CSS and JS files are being loaded too, but the CSS is not being applied as per #1078 (comment). That is, the rules are not being applied to the elements they select, even though the CSS files are there.

@Marc-Andre-Rivet

Marc-Andre-Rivet commented Apr 9, 2020

Copy link
Copy Markdown
ContributorAuthor

@wbrgss Fixed some issues - can you give it another go?

.css files were loaded as application/octet-stream instead of text/css

extension = os.path.splitext(filename)[1]

if extension not in [".css", ".js", ".map"]:
if extension in [".py", ".pyc", ".json"]:

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.

Pick up everything but the Python artifacts

dash_duo.wait_for_element("#btn").click()
assert dash_duo.wait_for_element("#standard").text == "Standard"

WebDriverWait(dash_duo.driver, 10).until(

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.

Is this better than dash.testing.wait.until? It's barely any more complicated so fine to keep it, just curious if there's a difference.

Regardless, very nice test!

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.

Wasn't aware I could do that. I thought it was either this of dash_duo._wait_for, will keep in mind for the future.

@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.

💃

@Marc-Andre-RivetMarc-Andre-Rivet removed this from the Dash v1.11 milestone Apr 24, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit 680423e into devApr 24, 2020
@alexcjohnson
alexcjohnson deleted the 481-arbitrary-extensions branch July 28, 2021 17:23
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support arbitrary file extensions

5 participants

@Marc-Andre-Rivet@wbrgss@alexcjohnson@rpkyle@chriddyp