pulse-framework / pulse Goto Github PK

I just updated to Pulse 2.2 and there is an issue with Vue js integration. It fais with

data() {
   return {
       ...this.mapData({
           something: 'test/me', 
       });
   }
}

Expected Behavior

It should run just fine.

Current Behavior

The app fails and throws error:

[Vue warn]: Error in data(): "TypeError: this.mapData is not a function"

Extra Information

N/A

Environment Information

• Operating System: Windows 10 x64 Pro
• Browser Version (If applicable): Brave
• Pulse Version: 2.2.0
• Framework/Framework Version (If applicable): 2.6.11

Expected Behavior

Pulse should generate and provided type declarations on build to the npm package.

Current Behavior

ERROR: Could not find a declaration file for module 'pulse-framework'. '/Users/tim/Documents/(redacted)/node_modules/pulse-framework/dist/pulse.js' implicitly has an 'any' type.

Extra Information

Information can be found at http://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

Basically when you build for npm you should also generate type declarations for use in TypeScript.

This can be done using tsc --declaration and providing the declarations location in your package.json as types

Environment Information

• Pulse Version: 2.2.5

After finishing a small version of my project, I wanted to test it out and try deploying it, however, whiles trying to build my react app, Pulse caused an issue.

The React app uses create-react-app.

Expected Behavior

The app correctly being built.

Current Behavior

./node_modules/pulse-framework/dist/pulse.min.js TypeError: /Users/andreas/Documents/node_modules/pulse-framework/dist/pulse.min.js: Duplicate declaration "e"

The above error pops up in the terminal when running the build command.

Extra Information

Steps for Reacration of problem:

• Create a create-react-app (Typical React Application)
• Install pulse-framework in it
• Create an instance of pulse (create an instance of pulse and use it somewhere in the application)
• Attempt to build (npm run build which uses the react-scripts)

Environment Information

• Operating System: OSX/10.14.3
• Pulse Version: 1.11.4
• Framework/Framework Version (If applicable): Latest version of React

We have no way of knowing what or how to contribute to the current version of pulse as it is listed nowhere on the repo.

Expected Behavior

People to have a clear cut way of figuring out how to contribute to the framework

Current Behavior

There is no documentation showing how to contribute

When building react for production you don't necessarily have _reactInternalInstance all the time. There is an alternative of using config.framework = "react" but that's not documented anywhere. Please document. 🙂

Expected Behavior

To be documented...

Current Behavior

Not documented at all.

When using v4's new actions, using onCatch, undo or batch from the given props will cause a crash

I've created an State of type Date but when I ran MY_STATE.set(new Date()) it was saved as an empty object {}

Expected Behavior

The state must be saved as Date type

Current Behavior

The state is being saved as an empty object

Environment Information

• Operating System: Windows 10
• Pulse Version: 3.4.0
• Framework/Framework Version (If applicable): [email protected]

This is a known bug, although it is not urgent because you do not need to use the subgroup "data" is it only mirrors the data properties on the root of the collection object.

As it stands it's useful to know what is data and what isn't. To differentiate between groups, filters and routes, but the values will always remain the defaults for now.

mapData uses the root anyway, so this does not affect how the component sees your data, just how you choose to interact with it directly. to mutate data use collection.someData = newValue

Pulse has its own reactivity system. It maps the dependencies for each Vue component and updates the necessary components on change. This means that you can just use $collection.thing directly on the template and it is completely reactive. While this is awesome, there's an issue with computed methods and the way Vue caches them.

Vue is similar to Pulse in that it reads the dependencies and creates a cached value, then when one of the dependencies changes, the computed function / getter is re-run. The same goes for filters in Pulse. However Vue's computed system doesn't recognise the Pulse collections as a reactive dependency, thus computed properties do not re-render. We need to find a way to force Vue to update a specific computed property, shouldn't be hard :)

Instead of returning any, take in a generic and set the return type to that

Would be nice to have a custom console logger built in.

So say I wanted to log something I could do collectionName.log('stauts (info, success, error)', 'some other data', { data }, even more ${data}) and this would show something like this.

Would be much cleaner than

It would also be nice if you were able to define the styles of this console log say in the base collection or something like that.

When trying to remove data from a group collection.remove(id, 'group') just does not work

When importing an object which has a deep nested object with arrays as values into the data attribute of a collection, it throws an error.

Expected Behavior

The object should have peen imported properly and not have thrown an error when trying to spread it into a pulse collection data attribute.

Current Behavior

throws this error:

pulse.esm.min.js:1056 Uncaught TypeError: Cannot read property 'locations' of undefined
    at t.value (pulse.esm.min.js:1056)
    at t.value (pulse.esm.min.js:1084)
    at Object.set (pulse.esm.min.js:678)
    at e (pulse.esm.min.js:769)
    at e (pulse.esm.min.js:780)
    at t.value (pulse.esm.min.js:781)
    at eval (pulse.esm.min.js:548)
    at Array.forEach (<anonymous>)
    at t.value (pulse.esm.min.js:547)
    at new t (pulse.esm.min.js:466)

and does not let vue render at all.

Extra Information

Link to example
Please check above for an example on the structure and source of the issue.

Environment Information

• Operating System: Windows 10 x64 November 2019 Update (H219)
• Browser Version (If applicable): Edge (chromium), Firefox Quantum, and Google Chrome
• Pulse Version: latest (2.0.3)
• Framework/Framework Version (If applicable): vue

This is a question, and not a report / issue.
The SSR feature of NextJS with Pulse doesn't have a lot of examples, so I'm asking the question here.

I've set some state inside getServerSideProps and used preserveServerState on my const data = {props: {}}.

Expected Behavior

I'd expect the state to be 'magically' set on the client (through preserveServerState), from the state that was set on the server.

Current Behavior

The state on the client isn't set, but I do get my PULSE_DATA with the state into the page's props, but am I supposed to set my client state from the result of those props?
It seems counter intuitive, to set state twice... But I'm sure it's just me not figuring it out correctly.

Extra Information

Am I doing something wrong, or is my result the expected behavior, and am I just supposed to set state on client, from the props returned from getServerSideProps?

Environment Information

• Operating System: Windows/10 && Mac OS Big Sur/11.1
• Browser Version (If applicable): Chrome/88.0.4324.192
• Pulse Version: 3.5.2
• Framework/Framework Version (If applicable): NextJS - 3.5.4

When I tried to integrate pulse framework into an example react-native project I get an error that the storage is missing. This is misleading with the documentation from the README.md Local storage is the default and you don't need to define a storage object for it to work..

Expected Behavior

The pulse setup works without defining a new storage.

Current Behavior

You have to define a simple storage object to make it work, otherwise you get the following error:


this._global.storage.get is not a function. ‘(In this._global_storage.get(‘_’)’, ‘this._global.storage.get’ is undefined)



initStorage - Collection.js:132:33


Extra Information

To fix the error you have to define a storage with those functions when creating the library.



pulse = new Pulse.Library({
  storage: {
    async: true,
    store: {},
    get: function(key) {
      return this.store[key];
    },
    set: function(key, value) {
      this.store[key] = value.toString();
    },
    clear: function() {
      this.store = {};
    },
    remove: function(key) {
      delete this.store[key];
    }
  },
  collections: {
    channels: {},
    posts: {}
  }
});

Environment Information

react-native-cli: 2.0.1
react: 16.8.3
react-native: 0.59.8
pulse-framework: 1.9.4

Steps to reproduce

• react-native init AwesomeProject
• cd AwesomeProject
• npm install
• npm i pulse-framework --save

• Add vanilla pulse setup to App.js
• react-native run-ios

I'll add Jest and create some unit tests

This is a weird issue to replicate, the quick fix is to use $collections.filters.thing instead of $collections.thing.

The collection class prepares the namespace (for data, groups, actions and filters) before init, as to prevent this from happening, but thing is undefined when Vue creates the components, even though devtools shows it as defined before Vue initiates.

thing should be accessible from both the $collection object, and the $collection.filters object. This function takes care of ensuring it is defined before runtime.

  // reserves the namespace on the component instance before runtime
  prepareNamespace() {
    // settings here..
    Object.keys(this._public).forEach(category => {
      if (['data', 'actions', 'groups', 'filters'].includes(category)) {
        Object.keys(this._public[category]).forEach(item => {
          if (this.validateNamespace(this._public, item))
            this._public[item] = this._public[category][item];
        });
      }
    });
  }

This feels like it'll take some digging, here are some facts that puzzle me.

• Every collection is init before Vue starts, Pulse.js constructor loops this.initCollections() which has prepareNamespace().
• $collection.filters.thing works but $collection.thing doesn't, but prepareNamespace() should solve this
• After at least one re-render it works fine, so usually it errors in the console as undefined then a second later the data populates.

Expected Behavior

Integrate with github project

Is it possible to open a github project to help you as best as we can with focus cards on specific issue or feature needed ?

Expected Behavior

Importing Pulse

Current Behavior

When importing (not initializing, just importing!) this error will print out:

You may need an appropriate loader to handle this file type.
|           let parsed = JSON.parse(res);
|           return resolve(parsed);
|         } catch {
|           resolve(null);
|         }

Extra Information

This is probably a problem with my configuration. If any additional infos/files are needed, tell me.

Environment Information

• Operating System: Windows 10 LTSC/10.0.17763 Build 17763
• Pulse Version: 1.9.4
• Framework/Framework Version (If applicable): Vue, project initiated with vue-cli and webpack preset