https://github.com/kriszyp/alkali-ts

Example of using Alkali with TypeScript
https://github.com/kriszyp/alkali-ts

Last synced: 14 days ago
JSON representation

Example of using Alkali with TypeScript

• Host: GitHub
• URL: https://github.com/kriszyp/alkali-ts
• Owner: kriszyp
• Created: 2016-12-01T15:44:55.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-21T04:32:56.000Z (almost 8 years ago)
• Last Synced: 2024-10-24T02:57:01.989Z (2 months ago)
• Language: TypeScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
This project is used starting point/boilerplate for using Alkali with TypeScript. One of the most exciting integrations is reactive properties. You can define a class with reactive properties like:

```

import 'reflect-metadata'

import { Variable, reactive, Div } from 'alkali'

class MyClass extends Variable {

  @reactive

  name: string

  @reactive

  age: number

}

```

And then use reactive properties directly in element constructors:

```

let test = Div('.test', document.createTextNode('hi'))

document.body.appendChild(new Div([

  Div(['Name:', mc.name]),

  Div(['Age:', mc.age])

]))

```

And then any assignments to the reactive properties cause reactive updates in the UI!

```

mc.name = 'New Name'

mc.age = 23

```

This is because the property values themselves (as returned by the getters) are self-contained reactive values. So we can also do:

```

let name = mc.name

mc.name = 'John'

name.valueOf() -> 'John'

name.put('World')

'Hi, ' + mc.name -> 'Hi, World'

```

The `index.ts` shows more examples of usage.

### Installation

`npm install`

`npm run build`

### Babel

FYI, the same `reactive` decorators can be used with the [Alkali babel plugin](https://github.com/kriszyp/babel-plugin-transform-alkali)