reactive-tsx
Convert TypeScript TSX to nice JavaScript.
Features
- No Virtual DOM
- No special template language, by using TSX
- Readable output code
Setup
Create using the template by degit.
npx degit diontools/reactive-tsx/template new-app-dir cd new-app-dirnpm installnpm start -- --open
Manual Setup
Install libraries.
npm i reactive-tsx@latest typescript@4
Add getCustomTransformers
to ts-loader options
of webpack.config.js.
const ReactiveTsxTransformer = default rules: test: /\.tsx?$/ loader: 'ts-loader' exclude: /node_modules/ options: before:
Functions
Component
type
Component
is a simple function type that returns a JSX element.
Component
has one parameter. Type of this one can be specified with type argument. Default type is below.
Component<>
run
function
run
is function to start the app.
rundocument.body, App,
This arguments specifies a destination node, component and props of component.
This function returns the function to remove a node that has been added.
destroy // remove appended nodes
reactive
function
reactive
function creates a reactive object (Reactive<T>
). This object has value
property and subscribe
method and calls the callback function registered by subscribe
every time the value is changed.
count.subscribeconsole.logcount.valuecount.value = 1count.value = 2
The above code will be logged as 0, 1, 2. This object is used to reflect value changes to the DOM.
example:
// In a Component functionreturn
This will be transformed to the following JavaScript.
const count = ;const div1 = ; const text2 = ; unsubscribes; div1;return div1;
At this point, element$
= document.createElement
, text$
= document.createTextNode
.
reactiveArray
function
reactiveArray
function creates a reactive array object (ReactiveArray<T>
). This object is a pseudo-array to monitor the changes of the array. In particular, map
method is transformed to efficiently update the DOM.
return
The above code will be transformed into the following JavaScript.
const items = ;const div1 = ; ;return div1;
mapArray$
function listen
to items
, and reflect to the DOM.
combine
function
combine
function creates a new Reactive<T>
by combining multiple Reactive<T>
.
example:
This will be transformed to the following JavaScript.
const count = ;const doubled = ;const powered = ;
combineReactive$
function subscribe
from multiple Reactive<T>
and update the newly created Reactive<T>
to reflect the changes.
Lifecycle events
onCreate
, onDestroy
event.
return
const div1 = ; { }div1;unsubscribes;return div1;
mono Mode
If you import "reactive-tsx/mono"
instead of "reactive-tsx"
, utility functions such as reactive
and element$
will be embedded.