Without React - Githubissues

floer32 commented 3 years ago

Is there a client or usage example of statebus that does not depend on React?

toomim commented 3 years ago

Sure. The core statebus.js doesn't depend on React, Coffeescript, Eval, or anything. If you want you can import it directly and use it like this:

<body></body>
<script src="https://stateb.us/statebus6.js"></script>
<script>
  // Now we have a statebus() constructor.

  // Let's make a bus from it
  bus = statebus()

  // Let's set some state
  bus.save({key: 'body', text: 'hello!'})

  // We can react to changes with a reactive function
  bus(() => {
      var body = bus.fetch('body')
      document.body.innerText = body.text
  })

  // That will update each time the state changes
  setInterval( () => {
      var body = fetch('body')
      body.text += '!'
      bus.save(body)
  }, 1000 )
</script>

This also doesn't give you any networking. You can write that by hand if you want, too. The client.js file just defines some useful helpers on top of this core statebus functionality.

The core statebus.js functionality gives you:

A namespace of state
You can get notified of changes with a callback: bus.fetch(key, cb)
You can define reactive functions that fetch a bunch of keys, and react whenever any key changes:
```
bus( () => {
var a = fetch('a')
if (something)
   var b = fetch('b')
...
})
```
- You can define how state is fetched and saved programmatically with bus(key).to_fetch and bus(key).to_save.

The client.js and server.js files just have example code for how you can use these basic features to synchronize state over a network, into a React UI, and into a database on disk. You don't have to use any of them.

toomim commented 3 years ago

Note that you also don't have to use the reactive functions:

  // We can react to changes with a reactive function
  bus(() => {
      var body = bus.fetch('body')
      document.body.innerText = body.text
  })

This code is equivalent to:

  // We can react to changes with a callback
  bus.fetch('body', (body) => {
      document.body.innerText = body.text
  })

The reactive function form is useful when you are writing a function that depends on multiple resources, with multiple keys. It also cleanly handles state that is being loaded over the network (enabling automatic loading indicators), or via arbitrary logic to compute which keys to load.

But I'm getting the feeling that you want to see what's in the core of statebus, so I thought you might want to see that simple callback form.

floer32 commented 3 years ago

I'm getting the feeling that you want to see what's in the core of statebus, so I thought you might want to see that simple callback form.

Exactly 😉 Thank you for the answers!

floer32 commented 3 years ago

@toomim btw, might have a typo the example above - save() vs. bus.save()

invisible-college / statebus

Without React #46