From 471d0889c937176943f92d14644af57e3328cdc7 Mon Sep 17 00:00:00 2001 From: Antonino Porcino Date: Tue, 4 Oct 2016 15:08:57 +0200 Subject: [PATCH] update documentation --- README.md | 104 ++++++++++++++++++++++++++---------------------------- 1 file changed, 50 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index c52a853..ae2b901 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Use Muut's [Riot.js](https://muut.com/riotjs/) minimalistic framework from TypeS - [Installation](#install) - [How to write elements](#howtowrite) -- [How to correctly reference in markup](#howtoreference) +- [Writing a basic element](#basic) - [The @template decorator](#template) - [Lifecycle events shortcuts](#lifecycle) - [How to create elements programmatically](#creating) @@ -15,25 +15,52 @@ Use Muut's [Riot.js](https://muut.com/riotjs/) minimalistic framework from TypeS - [Examples](#examples) - [A timer-based counter element](#timer_example) - [Precompiled tags](#precompiled) -- [Running the tests](#repoexample) -- [Known issues](#knownissues) - [Contributing](#contributing) - [Changelog](#changelog) # Installation -Install via bower: +Install via `npm`: ``` -bower install --save riot-ts +npm install --save riot-typescript ``` -This will also install `riot.js`. +## Use as a ` + + +``` +Somewhere in your TypeScript files add the references: +```ts +/// +/// +``` +- RiotTS can be referenced with the global name `Riot` +- riot can be referenced with the global name `riot` + +## Use as a module + +In your TypeScript files: +```ts +import * as Riot from "riot-typescript"; +``` +When mounting you will also need to reference to `riot` (for `riot.mount`): + +Put a declaration somewhere: +```ts +declare module "riot/riot+compiler"; +``` +and then import riot: +``` +import * as riot from "riot/riot+compiler"; +... +riot.mount("*"); +``` # How to write elements @@ -46,7 +73,7 @@ In brief: - Write elements as TypeScript classes - Extend the `Riot.Element` class -- Use `@template` to define the template string or load it from URL +- Use `@Riot.template` to define the template string or load it from URL - create instances of the element programmatically with `className.createElement()`. A class-element: @@ -56,29 +83,12 @@ A class-element: - can use TypeScript Mixins - `options` are passed to the class constructor -# How to correctly reference in markup - -In the `head` section of your main .html file: - -```HTML - - - - - - - - - - - - -``` +# Writing a basic element In your element TypeScript code (e.g. `elements/my-element.ts`): ```TypeScript -@template("my-element.html") +@Riot.template("my-element.html") class MyElement extends Riot.Element { // ... @@ -98,17 +108,13 @@ In `elements/my-element.html`: In your main application file: ```TypeScript -/// - -//... - riot.mount('*'); ``` # The @template decorator ``` -@template(param) +@Riot.template(param) ``` Sets the template for the element. The template parameter can be either: @@ -120,7 +126,7 @@ Sets the template for the element. The template parameter can be either: Example of an element ``: ```TypeScript -@template("
hello
") +@Riot.template("
hello
") class MyHello extends Riot.Element { } @@ -129,7 +135,7 @@ class MyHello extends Riot.Element or ```TypeScript -@template("elements/my-hello.html") +@Riot.template("elements/my-hello.html") class MyHello extends Riot.Element { } @@ -146,7 +152,7 @@ See how to setup [a grunt task that does this](#precompiled). Precompiled files can also be set to index tags by their tag names rather than their path, making it possible to use a shorter syntax: ```TypeScript -@template("my-hello") +@Riot.template("my-hello") // instead of @template("elements/my-hello.html") ``` @@ -164,7 +170,7 @@ Note: names ending in "-ed" have been choosen to not clash with already methods Example: ```TypeScript -@template("") +@Riot.template("") class MyEl extends Riot.Element { constructor(opts) { super(); @@ -244,7 +250,7 @@ riot.route.stop(); ### A timer-based counter element ```TypeScript -@template(` +@Riot.template(`
timer: { time }
@@ -361,19 +367,6 @@ instead of: ``` Note: Tags defined by tag name rather than path cannot work if precompiled tags are turned off. -# Running the tests - -To run the "Test" project containing the Jasmine specs: - -- clone this repo `nippur72/RiotTS` -- go to the `Test` directory -- run `bower update` -- Open the solution in Visual Studio and run the "Test" project. - -# Known issues - -- none (at the moment) - # Contributing Contributions are welcome. @@ -381,6 +374,9 @@ Contributions are welcome. If you find bugs or want to improve it, just send a pull request. # Change log +- v1.0.7 + - BREAKING CHANGE: ship as `npm` package (`bower` is no longer supported). The way files are loaded is + changed please check again the docs. `@template` is now available as `@Riot.template`. - v0.0.22 - removed the need for registration, `.register` and `.registerAll` are now removed from the API - v0.0.21