How to use the cyclejs.registerCustomElement 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.

ivan-kleshnin / cyclejs-examples / static / 6.1-favs-single / scripts / app.js View on Github

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

var Class = require("classnames");

// COMPONENTS ======================================================================================
var props = {
  src$: null,
  title$: null,
  favorite$: null,
  width$: null };

module.exports = Cycle.registerCustomElement("Picture", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      src$: Props.get("src$").startWith("#").shareReplay(1), // `src$` is exposed so `shareReplay` is required

      title$: Props.get("title$").startWith(""),

      favorite$: Props.get("favorite$").merge(Intent.get("toggle$")).scan(false, function (favorite) {
        return !favorite;
      }).startWith(false),

      width$: Props.get("width$").startWith(100) };
  });

  var View = Cycle.createView(function (Model) {
    return {
      vtree$: Cycle.latest(Model, Object.keys(props), function (item) {

ivan-kleshnin / cyclejs-examples / src / 3.3-slider-multiple / scripts / item.js View on Github

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;

// ELEMENTS ========================================================================================
Cycle.registerCustomElement("item", (DOM, Props) =&gt; {
  let View = Cycle.createView(Model =&gt; {
    let id$ = Model.get("id$");
    let width$ = Model.get("width$");
    return {
      vtree$: Rx.Observable.combineLatest(id$, width$, (id, width) =&gt; {
          return (
            <div width="" style="{{width:" class="item">
              <div>
                <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
              </div>
              <button class="remove">Remove</button>
            </div>
          );
        }
      ),
    };

ivan-kleshnin / cyclejs-examples / src / 3.4-slider-colors / scripts / item.js View on Github

// IMPORTS =========================================================================================
let Cycle = require("cyclejs");
let {Rx, h} = Cycle;

// ELEMENTS ========================================================================================
Cycle.registerCustomElement("item", (DOM, Props) =&gt; {
  let View = Cycle.createView(Model =&gt; {
    let id$ = Model.get("id$");
    let width$ = Model.get("width$");
    let color$ = Model.get("color$");
    return {
      vtree$: Rx.Observable.combineLatest(id$, width$, color$, (id, width, color) =&gt; {
          return (
            <div width="" style="{{width:" class="item">
              <div>
                <input value="{width}/" max="1000" min="200" type="range" class="width-slider">
              </div>
              <div>
                <input value="{color}/" type="text" class="color-input">
              </div>
              <button class="remove">Remove</button>
            </div>

ivan-kleshnin / cyclejs-examples / static / 3.4-slider-colors / scripts / app.js View on Github

},{"cyclejs":"cyclejs","lodash.range":7,"node-uuid":"node-uuid"}],4:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

// ELEMENTS ========================================================================================
Cycle.registerCustomElement("Slider", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      id$: Props.get("id$").shareReplay(1),

      value$: Props.get("value$").merge(Intent.get("changeValue$")).startWith(0),

      color$: Props.get("color$").merge(Intent.get("changeColor$")).startWith("#F00") };
  });

  var View = Cycle.createView(function (Model) {
    var id$ = Model.get("id$");
    var value$ = Model.get("value$");
    var color$ = Model.get("color$");
    return {
      vtree$: value$.combineLatest(id$, color$, function (value, id, color) {
        return h("fieldset", { className: "slider" }, [h("legend", null, ["Slider ", h("small", null, [id])]), h("div", { className: "form-group" }, [h("label", null, ["Amount"]), h("div", { className: "input-group" }, [h("input", { type: "range", value: value, min: "0", max: "100" }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: value, readonly: "1" })])])]), h("div", { className: "form-group" }, [h("div", { className: "input-group" }, [h("div", { style: { backgroundColor: color, width: "100%", height: "10px" } }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: color, readonly: "1" })])])]), h("div", null, [h("button", { className: "btn btn-default remove" }, ["Remove"])])]);

ivan-kleshnin / cyclejs-examples / static / 2.2-hello-footer / scripts / app.js View on Github

},{"../../common/scripts/shims":6,"./intent":3,"./model":4,"./view":5,"cyclejs":"cyclejs"}],2:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

// ELEMENTS ========================================================================================
module.exports = Cycle.registerCustomElement("Footer", function (User) {
  var View = Cycle.createView(function () {
    return {
      vtree$: Rx.Observable["return"](h("div", null, ["=== footer ==="]))
    };
  });

  User.inject(View);
});

},{"cyclejs":"cyclejs"}],3:[function(require,module,exports){
"use strict";

ivan-kleshnin / cyclejs-examples / static / 3.1-slider-intro / scripts / app.js View on Github

},{"cyclejs":"cyclejs"}],4:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

// ELEMENTS ========================================================================================
Cycle.registerCustomElement("Slider", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      value$: Props.get("value$").merge(Intent.get("changeValue$")).startWith(0) };
  });

  var View = Cycle.createView(function (Model) {
    var value$ = Model.get("value$");
    return {
      vtree$: value$.map(function (value) {
        return h("div", { className: "form-group" }, [h("label", null, ["Amount"]), h("div", { className: "input-group" }, [h("input", { type: "range", value: value, placeholder: "Amount" }), h("div", { className: "input-group-addon" }, [h("input", { type: "text", value: value, readonly: "1" })])])]);
      }) };
  });

  var Intent = Cycle.createIntent(function (User) {
    return {
      changeValue$: User.event$("[type=range]", "input").map(function (event) {

ivan-kleshnin / cyclejs-examples / static / 6.2-favs-list / scripts / app.js View on Github

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

var Class = require("classnames");

// COMPONENTS ======================================================================================
var props = {
  src$: null,
  title$: null,
  favorite$: null,
  width$: null };

module.exports = Cycle.registerCustomElement("Picture", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      src$: Props.get("src$").startWith("#").shareReplay(1), // `src$` is exposed so `shareReplay` is required

      title$: Props.get("title$").startWith(""),

      favorite$: Props.get("favorite$").merge(Intent.get("toggle$")).scan(function (favorite) {
        return !favorite;
      })
      //.distinctUntilChanged()
      .startWith(false).shareReplay(1),

      width$: Props.get("width$").startWith(100) };
  });

  var View = Cycle.createView(function (Model) {

ivan-kleshnin / cyclejs-examples / static / 4.2-menu-form / scripts / app.js View on Github

},{"../../common/scripts/shims":3,"./menu":2,"cyclejs":"cyclejs"}],2:[function(require,module,exports){
"use strict";

// IMPORTS =========================================================================================
var Cycle = require("cyclejs");
var Rx = Cycle.Rx;
var h = Cycle.h;

var makeClass = require("classnames");

// COMPONENTS ======================================================================================
module.exports = Cycle.registerCustomElement("Menu", function (User, Props) {
  var Model = Cycle.createModel(function (Intent, Props) {
    return {
      items$: Props.get("items$").startWith([]),
      active$: Props.get("active$").merge(Intent.get("selectOrUnselect$")).startWith([]).scan(function (state, name) {
        if (name) {
          if (state.indexOf(name) == -1) {
            // Select
            return state.concat([name]);
          } else {
            // Unselect
            return state.filter(function (n) {
              return n != name;
            });
          }
        } else {
          // Keep current

staltz / rxmarbles / src / app.js View on Github

var Cycle = require('cyclejs');
var appModel = require('rxmarbles/app-model');
var appView = require('rxmarbles/app-view');
var operatorsMenuLinkComponent = require('rxmarbles/components/operators-menu-link');
var operatorsMenuComponent = require('rxmarbles/components/operators-menu');
var sandboxComponent = require('rxmarbles/components/sandbox/sandbox');
var diagramComponent = require('rxmarbles/components/diagram/diagram');
var marbleComponent = require('rxmarbles/components/marble');
var diagramCompletionComponent = require('rxmarbles/components/diagram-completion');

Cycle.registerCustomElement('x-operators-menu-link', operatorsMenuLinkComponent);
Cycle.registerCustomElement('x-operators-menu', operatorsMenuComponent);
Cycle.registerCustomElement('x-sandbox', sandboxComponent);
Cycle.registerCustomElement('x-marble', marbleComponent);
Cycle.registerCustomElement('x-diagram-completion', diagramCompletionComponent);
Cycle.registerCustomElement('x-diagram', diagramComponent);

Cycle.applyToDOM('.js-appContainer', function app() {
  return appView(appModel());
});

staltz / rxmarbles / src / app.js View on Github

var Cycle = require('cyclejs');
var appModel = require('rxmarbles/app-model');
var appView = require('rxmarbles/app-view');
var operatorsMenuLinkComponent = require('rxmarbles/components/operators-menu-link');
var operatorsMenuComponent = require('rxmarbles/components/operators-menu');
var sandboxComponent = require('rxmarbles/components/sandbox/sandbox');
var diagramComponent = require('rxmarbles/components/diagram/diagram');
var marbleComponent = require('rxmarbles/components/marble');
var diagramCompletionComponent = require('rxmarbles/components/diagram-completion');

Cycle.registerCustomElement('x-operators-menu-link', operatorsMenuLinkComponent);
Cycle.registerCustomElement('x-operators-menu', operatorsMenuComponent);
Cycle.registerCustomElement('x-sandbox', sandboxComponent);
Cycle.registerCustomElement('x-marble', marbleComponent);
Cycle.registerCustomElement('x-diagram-completion', diagramCompletionComponent);
Cycle.registerCustomElement('x-diagram', diagramComponent);

Cycle.applyToDOM('.js-appContainer', function app() {
  return appView(appModel());
});

How to use the cyclejs.registerCustomElement 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.

cyclejs

Package Health Score

Popular cyclejs functions

Similar packages