0.0.0 • Published 3 years ago
@telehub/tele v0.0.0
Project Overview
Example
Here is a short example to illustrate interactive components:
const { Component, useState, mount, xml } = tele;
class Counter extends Component {
static template = xml`
<button t-on-click="() => state.value = state.value + props.increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
state = useState({ value: 0 });
}
class Root extends Component {
static template = xml`
<span>Hello Tele</span>
<Counter increment="2"/>`;
static components = { Counter };
}
mount(Root, document.body);
Note that the counter component is made reactive with the useState
hook.
Also, all examples here uses the xml
helper to define inline templates.
But this is not mandatory, many applications will load templates separately.
More interesting examples can be found on the playground application.
Documentation
Learning Tele
Are you new to Tele? This is the place to start!
Reference
- Overview
- App
- Component
- Component Lifecycle
- Concurrency Model
- Dev mode
- Dynamic sub components
- Environment
- Error Handling
- Event Handling
- Form Input Bindings
- Fragments
- Hooks
- Loading Templates
- Mounting a component
- Portal
- Precompiling templates
- Props
- Props Validation
- Reactivity
- Rendering SVG
- Refs
- Slots
- Sub components
- Sub templates
- Templates (Qweb)
- Translations
- Utils
Other Topics
- Notes On Tele Architecture
- Comparison with React/Vue
- Why did Tele build Tele?
- Changelog (from tele 1.x to 2.x)
- Notes on compiled templates
Installing Tele
Tele is available on npm
and can be installed with the following command:
npm install @tele-studio/tele
If you want to use a simple <script>
tag, the last release can be downloaded here:
0.0.0
3 years ago