1. Advisor
  2. cyclejs
  3. functions
  4. cyclejs.createStream
View all cyclejs analysis

How to use the cyclejs.createStream function in cyclejs

To help you get started, we’ve selected a few cyclejs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ivan-kleshnin / cyclejs-examples / frontend / 1.3-hello-nodes / scripts / app.js View on Github external
let interaction$ = createStream(vtree$ => {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] <- INTENT =========================================================================
let changeName$ = createStream(interaction$ => {
  return interaction$.choose("[name=name]", "input").map(event => event.target.value);
});

// [INTENT] <- MODEL ===============================================================================
let name$ = createStream((changeName$, input$) => {
  return input$.merge(changeName$).startWith("");
});

// [MODEL] <- VIEW =================================================================================
let vtree$ = createStream(name$ => {
  return name$.map(name => {
    return (
      <div>
        <div class="form-group">
          <label>Name:</label>
          <input type="text" class="form-control">
        </div>
        <hr>
        <h1>Hello {name}!</h1>
      </div>
    );
  });
});

// DATA-SINK =======================================================================================
name$.subscribe(name =&gt; {
github ivan-kleshnin / cyclejs-examples / frontend / 1.3-hello-nodes / scripts / app.js View on Github external
let {Rx, h, createStream, render} = require("cyclejs");

// DATA-SOURCE =====================================================================================
let input$ = Rx.Observable.fromPromise(
  new Promise((resolve, reject) =&gt; {
    resolve("CycleJS");
  })
);

// INTERACTION =====================================================================================
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] &lt;- INTENT =========================================================================
let changeName$ = createStream(interaction$ =&gt; {
  return interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);
});

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = createStream((changeName$, input$) =&gt; {
  return input$.merge(changeName$).startWith("");
});

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = createStream(name$ =&gt; {
  return name$.map(name =&gt; {
    return (
      <div>
        <div class="form-group">
          <label>Name:</label>
          <input type="text" class="form-control"></div></div>
github ivan-kleshnin / cyclejs-examples / frontend / 1.3-hello-nodes / scripts / app.js View on Github external
resolve("CycleJS");
  })
);

// INTERACTION =====================================================================================
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] &lt;- INTENT =========================================================================
let changeName$ = createStream(interaction$ =&gt; {
  return interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);
});

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = createStream((changeName$, input$) =&gt; {
  return input$.merge(changeName$).startWith("");
});

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = createStream(name$ =&gt; {
  return name$.map(name =&gt; {
    return (
      <div>
        <div class="form-group">
          <label>Name:</label>
          <input type="text" class="form-control">
        </div>
        <hr>
        <h1>Hello {name}!</h1>
      </div>
    );
github ivan-kleshnin / cyclejs-examples / frontend / 1.2-hello-streams / scripts / app.js View on Github external
// IMPORTS =========================================================================================
require("../../common/scripts/polyfills");
let {Rx, h, createStream, render} = require("cyclejs");

// INTERACTION =====================================================================================
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] &lt;- INTENT =========================================================================
let changeName$ = createStream(interaction$ =&gt; {
  return interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);
});

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = createStream(changeName$ =&gt; {
  return changeName$.startWith("");
});

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = createStream(name$ =&gt; {
  return name$.map(name =&gt; {
github ivan-kleshnin / cyclejs-examples / frontend / 1.2-hello-streams / scripts / app.js View on Github external
// IMPORTS =========================================================================================
require("../../common/scripts/polyfills");
let {Rx, h, createStream, render} = require("cyclejs");

// INTERACTION =====================================================================================
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] &lt;- INTENT =========================================================================
let changeName$ = createStream(interaction$ =&gt; {
  return interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);
});

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = createStream(changeName$ =&gt; {
  return changeName$.startWith("");
});

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = createStream(name$ =&gt; {
  return name$.map(name =&gt; {
    return (
      <div>
        <div class="form-group">
          <label>Name:</label>
          <input type="text" class="form-control">
        </div>
        <hr>
        <h1>Hello {name}!</h1>
      </div>
    );
github ivan-kleshnin / cyclejs-examples / frontend / 1.1-hello-cycle / scripts / app.js View on Github external
// IMPORTS =========================================================================================
require("../../common/scripts/polyfills");
let {Rx, h, createStream, render} = require("cyclejs");

// INTERACTIONS ====================================================================================
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTIONS] &lt;- INTENT ========================================================================
let changeName$ = interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = changeName$.startWith("");

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = name$.map(name =&gt; {
  return (
    <div>
      <div class="form-group">
        <label>Name:</label>
        <input type="text" class="form-control"></div></div>
github ivan-kleshnin / cyclejs-examples / frontend / 1.3-hello-nodes / scripts / app.js View on Github external
// IMPORTS =========================================================================================
require("../../common/scripts/polyfills");
let {Rx, h, createStream, render} = require("cyclejs");

// DATA-SOURCE =====================================================================================
let input$ = Rx.Observable.fromPromise(
  new Promise((resolve, reject) =&gt; {
    resolve("CycleJS");
  })
);

// INTERACTION =====================================================================================
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] &lt;- INTENT =========================================================================
let changeName$ = createStream(interaction$ =&gt; {
  return interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);
});

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = createStream((changeName$, input$) =&gt; {
  return input$.merge(changeName$).startWith("");
});

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = createStream(name$ =&gt; {
  return name$.map(name =&gt; {
github ivan-kleshnin / cyclejs-examples / frontend / 1.2-hello-streams / scripts / app.js View on Github external
// IMPORTS =========================================================================================
require("../../common/scripts/polyfills");
let {Rx, h, createStream, render} = require("cyclejs");

// INTERACTION =====================================================================================
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] &lt;- INTENT =========================================================================
let changeName$ = createStream(interaction$ =&gt; {
  return interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);
});

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = createStream(changeName$ =&gt; {
  return changeName$.startWith("");
});

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = createStream(name$ =&gt; {
  return name$.map(name =&gt; {
    return (
      <div>
        <div class="form-group">
          <label>Name:</label>
          <input type="text" class="form-control"></div></div>
github ivan-kleshnin / cyclejs-examples / frontend / 1.2-hello-streams / scripts / app.js View on Github external
let interaction$ = createStream(vtree$ =&gt; {
  return render(vtree$, "main").interaction$;
});

// [INTERACTION] &lt;- INTENT =========================================================================
let changeName$ = createStream(interaction$ =&gt; {
  return interaction$.choose("[name=name]", "input").map(event =&gt; event.target.value);
});

// [INTENT] &lt;- MODEL ===============================================================================
let name$ = createStream(changeName$ =&gt; {
  return changeName$.startWith("");
});

// [MODEL] &lt;- VIEW =================================================================================
let vtree$ = createStream(name$ =&gt; {
  return name$.map(name =&gt; {
    return (
      <div>
        <div class="form-group">
          <label>Name:</label>
          <input type="text" class="form-control">
        </div>
        <hr>
        <h1>Hello {name}!</h1>
      </div>
    );
  });
});

// CYCLE ===========================================================================================
interaction$.inject(vtree$);
github erykpiast / autocompleted-select / src / js / create-streams-group.js View on Github external
streams = mapValues(streams, (streamFn) => ({
        deps: getParametersNames(streamFn),
        stream: createStream(streamFn)
    }));

cyclejs

A fully reactive JavaScript framework for Human-Computer Interaction

GitHub
MIT
Latest version published 9 years ago

Package Health Score

59 / 100
Full package analysis

Popular cyclejs functions

Similar packages