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',
    'Cycle': 'https://unpkg.com/@cycle/run@3.1.0/lib/index.js',
  },
  packages:{
    app:{
      main: 'main'
    },
    xstream:{
      main: 'dist/xstream.js'
    },
    run:{
      main: 'dist/cycle-run.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'
import { run } from 'Cycle'

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 fakeSinks = {};
    Object.keys(drivers).forEach(key => {
       fakeSinks[key] = xs.create(); 
    });
    
    const sources = {};
    Object.keys(drivers).forEach(key => {
        sources[key] = drivers[key](fakeSinks[key]);
    });
    
    const sinks = mainFn(sources);
    
    Object.keys(sinks).forEach(key => {
        fakeSinks[key].imitate(sinks[key]);
    });
    
    //const fakeDOMSink = xs.create();
    //const domSource = domDriver(fakeDOMSink);
    //const sinks = mainFn({DOM: domSource});
    //fakeDOMSink.imitate(sinks.DOM)
    
}

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

// Cycle.run
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'
});