developit / stockroom Goto Github PK

Willing to work on this, but as you are the author of the code it would be good if you could create a repository against which I could create a PR.

Suppose I have an initial state like:

data: {}

Make an action to return

data: [
	{
	    "userId": 1,
	    "id": 1,
	    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
	    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
	},
	...
]

This will not cause the store to update. In fact no errors are thrown. It just silently fails

Any idea what might be wrong.

This also happens when the initial state is null then it is updated with some data and then set back to null. The last step does not update the store.

Found #9 but its for the reverse and it works. Object to null is not working.

If I get time, I'll make an example repo to better show the issue

Update 1:

Looks like unistore/stockroom is internally using Object.assign or push/shift to set/update the states. This might be the cause of the issue

Update 2:

This issue occurs when using unistore with stockroom. Normally it works as expected

Error: Avatar(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
▶ 17 stack frames were collapsed.
Module../src/index.js
C:/Users/Administrator/react2019ayushi/reactproj/src/index.js:10
7 | import Avatar from './Avatar';
8 |
9 |

10 | ReactDOM.render(, document.getElementById('root'));
11 |
12 |
13 | serviceWorker.unregister();
View compiled

Avatar.js:

import React, { Component } from 'react';
import './Avatar.css';

import Avatarlist from './Avatarlist';
import 'tachyons';

const Avatar = (props) => {

class Avatar extends Component{
    
    constructor(){
        super();
        this.state = {
            name : "Welcome to avatar world"
        }


    }
    namechange(){
        this.setState({
            name : "Subscribe to ayushi"
        })
    }

    render() {
        const avaratlistarray = [
            {
                id:1,
                name:"ayushi",
                work:"web developer"
            },
            {
                id:2,
                name:"ishita",
                work:"front-End developer"
            },
        
        ] 
    
        const arrayavaratcard =  avaratlistarray.map( (avatarcard, i) => {
          return <Avatarlist key={i} id={avaratlistarray[i].name}
                        name={avaratlistarray[i].name}
                        work={avaratlistarray[i].work}/>
     } )
    return (  
    <div className="mainpage">
    <h1>{this.state.name}</h1>
    {arrayavaratcard}
    <button onClick= { () => this.namechange() }> Subscribe </button>
  </div>
  )
}
}

}
export default Avatar;

TypeError
Failed to execute 'postMessage' on 'Window': 2 arguments required, but only 1 present.

is thrown in the normal browsers window context because window.postMessage expects 2 arguments and is called with one here:

The easiest way to fix this, is to add extend the condition to be:
if (typeof postMessage === 'function' && postMessage.length === 1)

I'll probably PR later, but I'm documenting my findings while I'm debugging an other error.

Edit: Example emitting this error: https://codesandbox.io/s/10r1j4z06l

Maybe it's a silly question, but how to use stockroom with redux?

When used with unistore is impossible to delete / remove a nested object or property.
See the following example ( This code only works using unistore without stockroom )

// Store
const state = {
  collections: {
     items: {
        a: { ... },
        b: { ... },
        c: { ... },
     }
    // ...
  }
 // ...
}

// Action
removeItem({ collections }, id) {
      let items = collections.items;
      // Remove item
      if (items[id]) {
        const { [id]: removed, ...rest } = items;
        items = rest;
      }
    return { collections: { ...collections, items } };
},

Unistore only example (working demo)

Love the idea behind stockroom, offers a great way to easily push non-UI work off the UI thread. The one thing stopping me from adopting it however is the lack of proper TypeScript support (package.json does refer to a file, however it does not exist).

I'm going to have a go at creating the necessary definitions. If things go to plan, I should have a PR for it up soon.

I was reading Tavis Ormandy's tweet about Grammarly's chrome extension vulnerability today. It made me think about stockroom since it is using the same postMessage interface. Report can be found here. Other reference that I found useful: this and this

For a reason that I do not know, my store is undefined on "first render".

In that capture of devtools console, I log a property of my store.
It is first undefined then HMR comes and then the property is defined.

import { Component } from 'preact';
import { connect } from 'unistore/preact';

@connect(['toast'])
class Toast extends Component {
  render ({toast}, {}) {
    console.log(toast);
    return (
      <div class="toast-container">
        <div class="toast">
          {/*toast.messages.map((message, index) => (
            <p class="toast--content" key={index}>{message}</p>
          ))*/}
        </div>
      </div>
    )
  }
}

export default Toast;

// store/worker.js
import createStore from 'stockroom/worker';
import idbKeyVal from 'idb-keyval';
import Constants from '../constants';

const store = createStore({
  user: {
    userId: '',
    email: '',
    avatar: ''
  },
  toast: {
    messages: [],
    show: false
  }
});

// globally available actions
store.registerActions(store => ({
  toasting ({toast}, messages) {
    return {
      toast: {
        messages,
        show: true
      }
    };
  }
}));

// index.js
import createStore from 'stockroom';
import storeWorker from 'workerize-loader!./store/worker';
import { Provider, connect } from 'unistore/preact';
import devtools from 'unistore/devtools';

const production = process.env.NODE_ENV === 'production';
const store = production ? createStore(storeWorker()) : devtools(createStore(storeWorker()));

import './style/index.scss';
import App from './components/app';

export default () => (
  <Provider store={store}>
    <App />
  </Provider>
);

I don't have that problem when I only use unistore without stockroom.

I am trying to implement the basic counter using React but getting the below error

invariant.js:42 Uncaught Error: p(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
at invariant (invariant.js:42)
at reconcileChildFibers (react-dom.development.js:7688)
at reconcileChildrenAtExpirationTime (react-dom.development.js:7756)
at reconcileChildren (react-dom.development.js:7747)
at mountIndeterminateComponent (react-dom.development.js:8075)
at beginWork (react-dom.development.js:8221)
at performUnitOfWork (react-dom.development.js:10224)
at workLoop (react-dom.development.js:10288)
at HTMLUnknownElement.callCallback (react-dom.development.js:542)
at Object.invokeGuardedCallbackDev (react-dom.development.js:581)

Hello there, this my first time using web workers and this module, I have a webpack config for bundling to JavaScript files index.js & worker.worker.js.

This is what my webpack config looks like

const { resolve } = require('path')

const entryPath = resolve(`${__dirname}/src`)
const outPath = resolve(`${__dirname}/dist`)

module.exports = {
    entry: resolve(`${entryPath}/index.js`),
    output: {
        path: outPath,
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.worker\.js$/,
                use: { loader: 'worker-loader' }
            },
            {
                test: /\.js$/,
                include: entryPath,
                loader: 'babel-loader',
                query: {
                    presets: [
                        [
                            'env',
                            {
                                targets: {
                                    node: '6.11.2'
                                }
                            }
                        ]
                    ]
                }
            },
        ]
    }
}

In the the two .js files are the demo exmpales from the repo. I am not user what I did wrong or did mis a step.

Thank you

When updating a states property from a primitiv value (e.g. null) null to an object.
The following line tries to access an property on the primitiv value and therefore throws an error.

I probably also PR for this one later.

Edit: It's only null because typeof null === 'object'.

It would be good if stockroom provided a way to insert instance of state manager as an input config.
do you have any plan for it in the roadmap or stockroom is meant to work with unistore?

Hi,
I expect a lot of bug with stockroom (or maybe I using it wrong ?)

I extract a little part of my webapp to inspect it, but I encounter an (other) probleme.
To reproduce the bugs : https://github.com/Buom01/stockroom-bug-demo (created with preact-cli)

the subscribe method

In this case, the "normal" usage, the store have not got the subscribe method defined:

import createStore from 'stockroom/inline'
import StoreWorker from 'workerize-loader!./worker.store'
let store = createStore(new StoreWorker())
console.log(store.subscribe) // undefined, WHY ?

While in the "inline" usage, the method subscribe is defined normally:

import createStore from 'stockroom/inline'
let store = createStore(require('./worker.store').default)
console.log(store.subscribe) // defined as a function

A probleme of shared store in the "inline" mod

Sorry because I can not totally reproduce the bug that I want to resolve due to the probleme with the subscribe method.
The probleme can be showed partially in the demo provided: I add only one document to each store, but in the inline mod, the store are mixed and finally they share their data. Then, they have both the same data while they should be isolated like in the worker mod. (Confirmed in my local project)

Tested in both Chromium(Version 67.0.3396.79 (Build de développement) Fedora Project (64 bits)) and Firefox(61.0) (latest)

Hey,

Simple question here, how can I access to the store in my components ?

In Unistore I would use connect() but here it seems that I have no access to actions because they run in a separate worker.

Thanks.