recyclex.js

A reactive cycle manager.

• Responsive property and lifecycle management
• Rxjs based

Install

npm install recyclex.js --save

Usage

import { defineComponent, blueprint, defineContext, IComponentInstance } from 'recyclex.js';

const MyContext = defineContext<number>('MyContext');

const MyComponent = defineComponent({
  defaultProps: { text: '' },
  setup(ctx) {
    ctx.createContext(MyContext, 42);

    ctx.P.text$.subscribe(text => {
      console.log('Text updated:', text);
    });

    return ctx
      .select([ctx.P.text$])
      .pipe(
        map(([text]) => [
          blueprint(ChildComponent, { text: text + '_1' }, 'child1'),
          blueprint(ChildComponent, { text: text + '_2' }, 'child2'),
          blueprint(ChildComponent, { text: text + '_3' }, 'child3'),
        ])
      );
  },
});

const ChildComponent = defineComponent({
  defaultProps: { text: '' },
  setup(ctx) {
    ctx.P.text$.subscribe(text => {
      console.log('Child text:', text);
    });
  },
});

const instance = MyComponent.create('root', { text: 'Hello' });
instance.update({ text: 'World' });
instance.dispose();

API

defineComponent

import { defineComponent } from 'recyclex.js';

const MyComponent = defineComponent({
  defaultProps: { text: '' },
  setup(ctx) {
    // setup logic
  },
});

blueprint

import { blueprint } from 'recyclex.js';

const bp = blueprint(MyComponent, { text: 'Hello' }, 'myKey');

defineContext

import { defineContext } from 'recyclex.js';

const MyContext = defineContext<number>('MyContext');