TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published


This TypeScript transformer provides "reactive" transforms of TypeScript code. Reactive code is defined with a @reactive decorator, and the code classes, properties, expressions, and functions that are marked as reactive will be transformed to code with classes and properties that can observed and lazily evaluated, and expressions than yield new input-varying values as well. This relies on alkali for variable operations that produce reactively bound variables.


$ npm install ts-transform-reactive

And then put this in your list of before transformers when you compile TS. If you are using webpack/ts-loader, this is a simple addition to your ts-loader config:

// webpack.config.js:
const reactiveTransformer = require('ts-transform-reactive').default
// exports.module.rules[]
      test: /\.ts$/,
      loader: 'ts-loader',
      options: {
          getCustomTransformers: () => ({
              before: [reactiveTransformer()]
          transpileOnly: true


Reactive expressions are defined by importing reactive and marking expressions with a @reactive:

import { reactive } from 'alkali'

class Person {
  name: string
  age: number

This class is now defined reactively. In this case it is an alkali variable, with defined properties:

let p = new Person()
p.name -> a reactive variable that can be bound to elements

We can also define reactive expressions:

let someone = new Person({ name: 'Kris', age: 40})
let birthYear = 2017 - someone.age
birthYear.valueOf() -> 1977
someone.age = 45
birthYear.valueOf() -> 1972

Function and method calls can be written in reactive expressions as well. These calls will be performed lazily/on-demand, and reexecuted as needed. The target function will be called with the values of the variables (not the variables themselves). For example:

let smallest = Math.min(a, b)
// smallest will be a reactive variable, computed from inputs a and b

When using the alkali reactive, to create these variables, they can be bound to DOM elements using alkali constructors or any other alkali target.

import { reactive, Div, Span, Input } from 'alkali'

let a = 1, b = 2, sum = a + b
// create a div with its text bound to the sum
  new Div([
    Input(a), // each input bound to the variable
    Span(sum)])) // will reactively compute sum

And the reactive expressions maintain operator relationships, so alkali's reversible data flow is supported as well:

let a = 2,
  doubleA = react(a * 2)
doubleA = 10 // will flow back through the expression
a.valueOf() -> 5

Package Sidebar


npm i ts-transform-reactive

Weekly Downloads






Last publish


  • kriszyp