Rxclass

A set of stateful data classes with reactive properties

• Reactive data class: base class with reactive properties
• Persistent data class: a class that persists it's own state to localstorage
• Debounced data class: a class where properties are set after a delay
• Input data class: a class to input a value with validation
• Rest data class: a class that handles rest requests

npm install rxclass
# or 
yarn add rxclass

Reactive data class

Create a data class

import  { RxClass } from "rxclass";

export default class ReactiveConf extends RxClass {
  constructor() {
    const state = {
      prop1: true,
      prop2: "foo",
      prop3: 45,
      prop4: {
        subprop1: "bar"
      }
    };
    super(state);
  }
}

Usage

Initialize and set a property value

const reactiveConf = new ReactiveConf();
// set a new value for a prop
reactiveConf.prop1.value = false;

All the state properties are reactive. Usage in a Vuejs component:

<template>
  <!-- this prop is reactive -->
  <div>{{ reactiveConf.prop1.value }}</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import reactiveConf from "@/conf";

export default defineComponent({
  setup() {
    return {
      reactiveConf,
    };
  }
});
</script>

Callback

Add a callback when a prop is modified:

import { RxParam } from "rxclass";
import { RxClass } from "rxclass";

export default class ReactiveConf extends RxClass {
  constructor() {
    const state = {
      prop5: {
        value: "val",
        callback: (v: string) => console.log("Prop 5 changed to", v)
      } as RxParam
    };
    super(state);
  }
}

The callback will be executed each time the property is changed

Persistent data class

All the store data will be automatically persisted to localstorage

import { RxStorage } from "rxclass";

export default class User extends RxStorage {
  public name: string;

  constructor(name: string) {
    // persistent state
    const store = {
      isLoggedIn: false
    }
    const key = "user";
    // provide a storage key for the class instance
    super(key, store);
    this.name = name;
  }
}

Read a store property:

const user = User("anonymous");
const isLoggedIn = user.store.isLoggedIn.value;

Mutate a store property:

user.store.isLoggedIn.value = true;

Input data class

A class to input a value with validation

<template>
  <div>
    <h1>RxInput</h1>
    value : {{ name.inputValue.value }}
    <p>Name: <input type="text" v-model="name.inputValue.value" /></p>
    <div v-if="name.isValid.value === true">Valid</div>
    <div v-else-if="name.isValid.value === false">Invalid</div>
    <div v-else>Null</div>
    <div v-if="isFormValid === true">Form is valid</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { RxInput } from "rxclass";

export default defineComponent({
  setup() {
    const name = new RxInput<string>({
      id: "name",
      value: "",
      validator: (v: string): boolean => {
        if (v.length >= 3) {
          return true;
        }
        return false;
      },
    });

    const isFormValid = name.isValid;

    return {
      name,
      isFormValid,
    };
  },
});
</script>

Debounced data class

A class where properties are set after a delay. Form example:

<template>
  <p>Name: <input type="text" v-model="form.debounced.name.value" /></p>
  <div v-if="form.nameIsValid.value === true">Valid</div>
  <div v-else-if="form.nameIsValid.value === false">Invalid</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { RxDebounced } from "rxclass";

export default defineComponent({
  setup() {
    const form = new RxDebounced(
      // debounced props
      {
        name: {
          value: "",
          callback: (v: string) => {
            if (v.length >= 3) {
              form.nameIsValid.value = true;
            } else {
              form.nameIsValid.value = false;
            }
          },
        },
      },
      // regular ephemeral state
      {
        nameIsValid: null, // tristate: null, false or true
      }
    );

    return {
      form,
    };
  },
});
</script>

Rest data class

A class with rest network methods to manipulate data

import { RxRest } from "rxclass";

export default class ReactiveDataModel extends RxRest {
  constructor() {
    const serverUrl = "http://localhost:8000"
    super(serverUrl)
  }
}

const dataManager = new ReactiveDataModel()
// get array data
const data = await dataManager.fetchGetArray<Array<Record<string, any>>>("/some/endpoint")
// the data is now available in a reactive prop
console.log(dataManager.arrayDataset)

// get object data
const data2 = dataManager.fetchGetObject("/some/endpoint")
// the data is now available in a reactive prop
console.log(dataManager.objectDataset)

Examples

Examples