@coriolis/coriolis-svelte

    1.0.0-alpha2 • Public • Published

    Coriolis wrapper for Svelte

    Svelte is a great UI tool. combined with coriolis it provides a powerfull set for building great apps

    Install

    npm install --save @coriolis/coriolis-svelte

    Usage

    In your UI entry point Entry.svelte:

    <script context="module">
      import { withProjection, createDispatch, createStoreAPIProvider } from '@coriolis/coriolis-svelte'
     
      const {
        setStoreAPI,
        shareStoreAPI
      } = createStoreAPIProvider()
     
      export { setStoreAPI }
    </script>
    <script>
      import { lastPayloadOfType } from '@coriolis/parametered-projection'
      import { message } from '../projections/message'
     
      shareStoreAPI()
     
      const message$ = withProjection(lastPayloadOfType('message'))
      const dispatchMessage = createDispatch((message) => ({ type: 'message', payload: message }))
    </script>
     
    <h1>{$message$}</h1>
     
    <input type="text" on:change={(event) => dispatchMessage(event.target.value)}>
     

    Then you can build your Coriolis event store:

    import { createStore } from '@coriolis/coriolis'
    import Entry, { setStoreAPI } from 'Entry.svelte'
     
    const uiEffect = ({ dispatchEvent, withProjection }) => {
      setStoreAPI({ dispatchEvent, withProjection })
     
      const app = new Entry({
        target: document.body,
      })
     
      return () => {
        app.$destroy()
      }
    }
     
    createStore(uiEffect)

    This example is not the most useful code sample, but you should give a try to both Coriolis and Svelte projects

    Install

    npm i @coriolis/coriolis-svelte

    DownloadsWeekly Downloads

    4

    Version

    1.0.0-alpha2

    License

    GPL-3.0

    Unpacked Size

    43.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar