developit / developit/unistore

Preact components fail to update when loading Preact as UMD external dep and Unistore as a part of the bundle

Open
#59 8 comments 0 reactions 0 assignees View on GitHub
needs-reivew
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.