Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Josh Duff
@TehShrike
The way that ASR integrates with every other library is by way of a custom adapter/renderer for each library: https://github.com/TehShrike/abstract-state-router#current-renderer-implementations
If you use ASR, it's relatively easy to hook up your state solution of choice to every component that gets mounted automatically by ASR when the route changes
GavinRay97
@GavinRay97
So say with Vue, for example, the main.js typically looks something like this:
import Vue from 'vue';
import App from './App';

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  data: { someGlobalStorePackageOrObject }
});
Josh Duff
@TehShrike
Handling any state library could be tricky, you'd have to define a common language that would let the components communicate out
GavinRay97
@GavinRay97
import createStateRouter from 'abstract-state-router';
import Vue from 'vue';
import App from './App';

const VueInstance = new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  data: { someGlobalStorePackageOrObject }
});
const stateRouter = createStateRouter(makeRenderer, VueInstance)
?
TehShrike/abstract-state-router#114
Josh Duff
@TehShrike
I don't think that pull request is going to go anywhere :-x
GavinRay97
@GavinRay97
I saw this PR, curious if "Root element can be a function" means I can pass In an instance of a Vue object.
Oh, lmao :joy:
I have written this:
The interesting bit is the /src/store folder
Josh Duff
@TehShrike
import createStateRouter from 'abstract-state-router'
import makeVueStateRenderer from 'vue-state-renderer'
import hookUpStoreToAllRenderedStates from 'library-that-you-could-make'
import reduxOrWhateverAdapter from 'adapter-library-for-library-that-you-could-make'

import App from './App'


const renderer = hookUpStoreToAllRenderedStates(makeVueStateRenderer(), reduxOrWhateverAdapter())
const stateRouter = createStateRouter(renderer)

stateRouter.add({
    name: 'app',
    route: 'app',
    template: App
})
I kind of doubt there will ever be a Vue renderer for ASR, since Vue has what looks like a solid nested routing library already. There might be call for it, though.
Someone using ASR on an existing app could decide they want to start transitioning to Vue, and they could have ASR mount some Vue states or some Svelte or Riot states, or whatever they were transitioning away from
GavinRay97
@GavinRay97
vue-state-renderer
library-that-you-could-make
-adapter-library-for-library-that-you-could-make
=/
Josh Duff
@TehShrike
But you can imagine any view/templating library in there for that example - all renderers expose the same API
GavinRay97
@GavinRay97
Speaking purely theoretically, is it possible to make a framework agnostic state-management library?
Josh Duff
@TehShrike
I think it would be difficult, because the main differentiator for state libraries isn't how they push data to the components, but how you send state changes to them
with some libraries, you mutate magic objects directly, and the state library watches for changes
GavinRay97
@GavinRay97
You couldn't use some sort of global event bus?
or something built in to HTML5
Josh Duff
@TehShrike
with others, you call dispatch actions with objects representing the state change
well, I like to use a global event bus a lot of the time https://github.com/TehShrike/mannish
but usually if you're hooking up to a state library you want the components to interact with it directly
GavinRay97
@GavinRay97

For example:
store.js

import {fetchJSON, mutateArray} from './utils';
export default {
  fetchJSON: fetchJSON,
  mutateArray: mutateArray,
  syntaxHighlight: syntaxHighlight,
    todoStore:{
      todos: ['Example 1', 'Example 2', 'Example 3'],
      users: [],
    },
}

utils.js

const fetchJSON = async(url) => { return ( await fetch(url).then(r => r.json() ) )}
const mutateArray = async(storeVar, array) => { return array.map(item => storeVar.push(item)) }
export { fetchJSON, mutateArray}

Todo.vue

<template>
  <div>
    <h1 id="title">Global Store State</h1>
    <pre id="highlight-code" v-html="formattedStore" />
    <div id="list-container">
    <div class='list animated tada'>
      <h1>
        To-do List
      </h1>
      <ul v-if="todoStore.todos && todoStore.todos.length">
        <li v-for="(todo, index) in todoStore.todos" @click="emitEvent('removeTodo', index)">
          <a href='#'>
            <i class='icon ion-android-done'></i>
          </a>
          {{todo}}
        </li>
      </ul>
     </div>
     <div class="webflow-style-input">
         <input  placeholder="Add todo's here" v-model="todoInput"></input>
         <button @click="emitEvent('addTodo')"><i class="icon ion-android-arrow-forward"></i></button>
       </div>
   </div>
  </div>
</template>

<script>
import todoController from '../store/controllers/todoController';
export default {
  name: 'Todo',
  store: ['todoStore'],
  events: todoController.events,
  methods: todoController.methods,
  computed: {
    formattedStore() {
      return this.$store.syntaxHighlight(JSON.stringify(this.$store, undefined, 4));
    }
  },
  created() {
    this.fetchUsers();
  }
}
</script>

todoController.js

export default {
  events: {
    addTodo: function() {
      this.todoStore.todos.push(this.todoInput)
      this.todoInput = ''
    },
    removeTodo: function(index) {
      this.todoStore.todos.splice(index, 1)
    },
    setUsers: function(userList) {
      this.$store.mutateArray(this.todoStore.users, userList);
    }
  },
 methods: {
    emitEvent: function(eventName, payload) {
      this.$events.emit(eventName, payload)
    },
    fetchUsers: async function() {
      this.emitEvent('setUsers', await this.$store.fetchJSON('http://jsonplaceholder.typicode.com/users'))
    }
  }
}
todoapp1.png
todoapp3.PNG
There is no generic Global Event Bus implementation I could subscribe to via any framework?
I'm just trying to figure out conceptually if the concept of an agnostic global state management library is feasible.
Josh Duff
@TehShrike
well, most things that claim the name "framework" will bring their own
GavinRay97
@GavinRay97
Sorry if this is a lot.
Josh Duff
@TehShrike
I like to keep global state separate from my view implementation as much as is practical, which is why I usually use that mediator to separate the view and my global state
Does Mannish meet your idea of a global event bus?
GavinRay97
@GavinRay97
Yeah but Redux is overly-verbose and difficult for beginners to learn, MobX is awesome with injected decorators for an observer/observable pattern but needs a binding package for every framework, and Kea.js is alrightish but still is React-centric. Also MobX is React-centric.
Let me look at that Mannish repo really quick, thank you.
Okay so, again I apologize as I'm not nearly as seasoned as you @TehShrike
Theoretically, you could use Mannish within your UI framework, and provide it functions/data for context?
Josh Duff
@TehShrike
if your component has a mediator instance it can access, it can do stuff like mediator.call('http', { type: 'GET', url: 'google.com' }) or mediator.call('dispatch', ADD_TODO_ACTION, { name: 'gotta keep on keepin on' })
and you can put whatever XHR/state library you want on the other side of that to handle those actions
GavinRay97
@GavinRay97
Ohhhhh
Yeah, that makes sense.
Still left with the problem of a state-management library that's framework agnostic though.
Which seems like it's not possible?
Due to binding
Josh Duff
@TehShrike
well, first step - and I have no idea how possible this is - come up with your ideal way for components/templates to communicate with a state management library
GavinRay97
@GavinRay97
An agnostic global event bus and pub-sub implementation
Josh Duff
@TehShrike
then, figure out how you could translate between that API, and a Mobx/Redux/whatever backend