Comments (9)
The following snippet illustrated the way I do it.
Works like a charm, but it's far from ideal -- I am guessing :)
In any case, MutationObserver
is the way to do it in my case, however since this is not supported by legacy systems, one has to deal with the DOM events too.
Perhaps, "this" could point somewhere :)
import throttle from 'throttleit';
let observer;
function loaded () {
setTimeout(() => {
const myEvent = new CustomEvent('webpackReady');
window.dispatchEvent(myEvent);
window.webpackIsLoaded = true;
}, 500);
// Just once, please
observer.disconnect();
}
function init () {
const target = document.head;
const debouncer = throttle(loaded, 50);
let isTriggered = false;
observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (isTriggered) {
return;
}
if (mutation.addedNodes.length) {
isTriggered = true;
debouncer();
}
});
});
const config = { characterData: true, childList: true };
observer.observe(target, config);
}
if (window.ENV.environment === 'local' && window.MutationObserver) {
init();
} else {
window.webpackIsLoaded = true;
}
from style-loader.
+1
from style-loader.
π
from style-loader.
+1
from style-loader.
Any possibility that this gets done?
from style-loader.
I did it a while back using MutationObserver
.
Nothing fancy, but I'd definitely prefer it would be provided "natively".
from style-loader.
@phaistonian can you propose a way to do/add it in style-loader
or even better send a PR π ?
from style-loader.
Adds CSS to the DOM by injecting a <style> tag
This feature, regardless of it's utility doesn't belong in style-loader
. IMO if the functionality is that useful, a new loader should be created to accomplish this task and then chain them.
from style-loader.
Yeah, a separate loader would work better.
from style-loader.
Related Issues (20)
- Style-loader duplicates insert function HOT 3
- HMR does not work with webpack 5 HOT 3
- Changes to `insert` module file do not trigger cache invalidation HOT 4
- i can't download the module HOT 1
- HMR does not work HOT 1
- What style-loaders expects as input? HOT 5
- Is there a injectType=lazyStyleTag .use() & .unuse() equivalent when using css-loader + mini-css-extract-plugin HOT 11
- Add support for using lazyStyleTag use() from a JavaScript module (injecting into multiple shadow DOMs) HOT 21
- why style-loader is pitch loaderοΌ HOT 2
- Support asset-modules instead of file-loader HOT 3
- Webpack "lazyStyleTag" configuration won't copy fonts after upgrade to Angular 13 HOT 18
- Noop in environment without DOM api HOT 1
- Can not export selectors from `@import url(...)` HOT 2
- Get CSS properties / variables from JavaScript HOT 3
- Vulnerable dependencies (indirect security issues) HOT 1
- webpack 5 is returning a object instead URL HOT 2
- Promotion of unsafe code HOT 1
- Excessive whitespace and line breaks in code generated by style-loader HOT 1
- loaderContext.utils is "undefined", Causes a report that the "contextify" attribute cannot be read from "undefined". HOT 10
- CSS Module is not working. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from style-loader.