developit / developit/unistore
Preact components fail to update when loading Preact as UMD external dep and Unistore as a part of the bundle
- Dominant language
- JavaScript
- Stars
- 2.8k
- Forks
- 134
- PR merge metrics
- No merged PRs in 30d
Description
First off, thanks, your stuff kicks some serious ass! 👍🏻
Now to the issue -
I've been using Preact lately to build all sorts of widgets, they're not parts of the same app, and completely unrelated to each other, however, several widgets can be loaded on the same page. To avoid including Preact in each widget's bundle I opted to use UMD build from unpkg. The approach worked great until yesterday, when I tried to implement Unistore. I loaded react as a UMD module, and bundled Unistore with the app.
Preact component fails to get updated when Unistore updates state. Here's sample code, I removed all parts of actual app to make sure it doesn't work because I've done something stupid. I couldn't reproduce on CodeSandbox, it errors out with `DependencyNotFoundError` - https://codesandbox.io/s/qzn378wx06
The build happens via rollup.
The issue doesn't arise if both Preact/Unistore are loaded as UMD or bundled.
Here's the screencast: http://recordit.co/OShYYc3DSm
And here's the code:
main.js
```js
let { h, render, Component } = preact;
import createStore from 'unistore'
import { Provider, connect } from 'unistore/preact'
const initialState = {
dateFilterExpanded: false,
}
export const store = createStore(initialState)
let actions = store => ({
toggleCb: ({dateFilterExpanded}, event) => { console.log(dateFilterExpanded, event); return { dateFilterExpanded: ! dateFilterExpanded } },
changeCb: (state, event) => { console.log(event); store.setState({ [event.target.name]: event.target.value }) }
});
@connect(Object.keys(initialState), actions)
export class App extends Component {
render({dateFilterExpanded, changeCb, toggleCb}, state) {
return I will not change { `dateFilterExpanded: ${dateFilterExpanded}`}
}
}
const initWidget = (selector = 'body', props = {}) => {
render( , document.querySelector( selector ) )
}
initWidget('#attribution-totals-widget')
```
index.html
```html
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.