Wondering what’s next for npm?Check out our public roadmap! »

    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


    npm i ts-transform-reactive

    DownloadsWeekly Downloads






    Last publish


    • avatar