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

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

    0.0.4 • Public • Published

    ts-transform-reactive

    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.

    Installation

    $ 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
          }
        }
    

    Usage

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

    import { reactive } from 'alkali'
    
    @reactive
    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})
    @reactive
    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:

    @reactive
    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'
    
    @reactive
    let a = 1, b = 2, sum = a + b
    // create a div with its text bound to the sum
    parent.appendChild(
      new Div([
        Input(a), // each input bound to the variable
        Input(b),
        Span(sum)])) // will reactively compute sum
    

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

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

    Install

    npm i ts-transform-reactive

    DownloadsWeekly Downloads

    6

    Version

    0.0.4

    License

    MIT

    Last publish

    Collaborators

    • avatar