eggheadio-projects/cyclejs-fundamentals: null

# cyclejs-fundamentals

Plunker example for cycleJS

SystemJS.config({
  map: {
    'app': './src',
    'xstream': 'https://unpkg.com/xstream@10.9.0/',
    'symbol-observable': 'https://unpkg.com/symbol-observable@1.0.4/lib/index.js',
  },
  packages:{
    app:{
      main: 'main'
    },
    xstream:{
      main: 'dist/xstream.js'
    }
  },
});

<!DOCTYPE html>
<html>

  <head>
    <script src="https://unpkg.com/systemjs/dist/system.js"></script>
    <script src="typescript-config.js"></script>
    <script src="app-config.js"></script>
    
  </head>

  <body>
    <div id="app"></div>
    
    <script>
      System.import('app')
        .catch(console.error.bind(console));
    </script>
  </body>

</html>

import xs from 'xstream'
import fromEvent from 'xstream/extra/fromEvent'

function main(sources) {
    const click$ = sources.DOM;
    return {
        DOM: click$.startWith(null).map(() => 
            xs.periodic(1000)                       
             .fold(prev => prev + 1, 0)
          ).flatten()
           .map(i => `Seconds elapsed: ${i}`),
        log: xs.periodic(2000)                       
           .fold(prev => prev + 1, 0)
    } 
}

// source = input (read) effect
// sink = output (write) effect

function domDriver(text$) {
   text$.subscribe({
    next: str => {
        const elem = document.querySelector('#app');
        elem.textContent = str;
     }})  
     const domSource = fromEvent(document, 'click');
     return domSource;
}

function logDriver(msg$) {
    msg$.subscribe({ next: msg => { console.log(msg); }})
}

// fakeA = ...
// b = f(fakeA)
// a = g(b)
// fakeA.behaveLike(a)


function run(mainFn, drivers) {
    const fakeDOMSink = xs.create();
    const domSource = domDriver(fakeDOMSink);
    const sinks = mainFn({DOM: domSource});
    fakeDOMSink.imitate(sinks.DOM)
    
    
   /* Object.keys(drivers).forEach(key => {
        if (sinks[key]) {
            drivers[key](sinks[key]);
        }
    });*/
}

run(main, {
    DOM: domDriver,
    log: logDriver,
    
});

SystemJS.config({
  packages: {
    "ts": {
      "main": "lib/plugin.js"
    },
    "typescript": {
      "main": "lib/typescript.js",
      "meta": {
        "lib/typescript.js": {
          "exports": "ts"
        }
      }
    }
  },
  map: {
    "ts": "https://unpkg.com/plugin-typescript@7.1.0/",
    "typescript": "https://unpkg.com/typescript@2.4.2/"
  },
  transpiler: 'ts'
});