Comments (13)
Nice, I had to update moduleGetConstructor
to include .default(element)
to get it working.
thanks for the help! I think it's working now 🎉
moduleGetConstructor: (module) => {
return (element) => {
return new module.default(element);
};
}
from conditioner.
Fantastic! :) If you want you can close the issue 👍
from conditioner.
Sorry I'm late to the party.
I wanted to share how I've been handling a similar situation with a "pjax" library of my own.
I have all my modules in a modules
folder. There is an index.js
file that configures conditioner
and exports a hydrate
and an unmount
function that I call on every page transition. I looks a bit like this:
import * as conditioner from 'conditioner-core'
let boundModules = []
// Webpack
conditioner.addPlugin({
moduleSetName: name => name,
moduleGetConstructor: module => module.default,
moduleImport: name => import(`./${name}`)
})
// other plugins here, removed for brevity
export function hydrate () {
boundModules = conditioner.hydrate(document.documentElement)
}
export function unmount () {
boundModules.forEach(x => x.unmount())
}
Thank you @rikschennink for such an amazing library.
from conditioner.
This is the default set up.
export default (slider) => {
// Init Slider
return () => {
// Destroy slider
}
}
You could do this:
class ExampleModule {
constructor() {
this.init();
}
init(slider) {
// Init Slider
}
destroy() {
// Destroy Slider
}
}
export default (slider) => {
// Init Slider
const _myModule = new ExampleModule();
return () => {
// Destroy slider
_myModule.destroy();
}
}
Or override the moduleGetConstructor
and moduleGetDestructor
hooks.
from conditioner.
@rikschennink Thanks for that.
How would I call the destroy()
/ init()
method on pageleave/enter? I don't see any example of that in the docs.
from conditioner.
The hydrate
method returns an array of modules. You can call destroy
on each module when the page is unloaded.
from conditioner.
Sorry for the back and forth, and I appreciate you helping me out with this!
on init I do:
init(){
this.hydrate = conditioner.hydrate(DOM);
}
then on destroy, this.hydrate returns an array of modules. do I have to loop over them all and call the destroy method for each?
Is there a way to check if these module are on the new page, without using the hydrate method again? I'm trying not to reimport the JS just reuse the module.
destroy() {
console.log(this.hydrate);
// returns [{module}, {module}, {module}]
this.hydrate.forEach(module => {
module.destroy()
});
}
in the case above, the module.destroy()
doesn't do anything
from conditioner.
The destroy method returns an empty function. Where do I set that?
ƒ () {}
from conditioner.
Should use unmount
instead => https://codepen.io/rikschennink/pen/bzzbJN?editors=1010
I'll look into this when I have some time
from conditioner.
Okay thanks for the help.
Could you point me in the right direction with overriding the moduleGetConstructor
and moduleGetDestructor
hooks to accept a Class
module?
Would love to not have to have to call this at the bottom of each module:
export default (element) => {
const _myModule = new Slider();
_myModule.init(element);
return () => {
_myModule.destroy(element)
}
}
from conditioner.
I think something like this, you'd have to set some debug statements to be sure.
conditioner.addPlugin({
moduleGetConstructor: module => {
return new module.default();
},
moduleGetDestructor: instance => {
instance.destroy();
}
});
from conditioner.
module
returns undefined
in moduleGetConstructor
for some reason.
This is the class:
class ExampleModule {
constructor() {}
init() {}
destroy() {}
}
export default ExampleModule;
from conditioner.
It took a couple tries but I got a working example: https://codepen.io/rikschennink/pen/wNOvJB?editors=1010
from conditioner.
Related Issues (20)
- .getModule() and .getModules() doesn't include a search on the target node HOT 3
- .sync() doesn't publish a load event when all modules that are available are also loaded HOT 3
- Look into running condition parsing (or other non ui code) in webworkers HOT 1
- optimize parsing of single monitor conditions HOT 1
- Have execute method return a promise? HOT 1
- Add version number in minified version HOT 3
- Media monitor and <=IE9 HOT 7
- Event Monitor
- Support for SystemJS? HOT 2
- 'unload' handler is not called HOT 5
- ".is" clean up HOT 1
- ".on" cleanup HOT 1
- JSON check in _getModuleControllersByElement() fails due to re-use of RegExp instance with global flag HOT 1
- Value of data-initialized is incorrect after calling Condtioner.load() on a node with active modules
- bower version is 1.2.0 instead of 1.2.2 HOT 2
- Webpack setup example HOT 17
- Example for loading different multiple modules on a single node HOT 2
- Loading AMD module with webpack HOT 1
- How to get exported value from module? HOT 2
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 conditioner.