ractive and typescript

[evs-chris]

For quite some time, ractive has supported extending with a class e.g.

import { InitOpts, Ractive } from 'ractive';

class Foo extends Ractive {
  constructor(opts?: InitOpts) { super(opts); }

  someMethod() { console.log('some method here'); }
}

Ractive.extendWith(Foo, {
  template: 'template <button on-click="@.someMethod()">here</button>'
});

The ractive node module also has a built-in binary that can pre-parse templates with a special mode that takes scriptless templates and kicks them out as a js module. With this and an extension set, you can pre-process your template files into simple modules that can be imported into a ts component definition to get type checks everywhere but in the template expressions.

<!-- mytemplate.ractive.html -->
template <button on-click="@.someMethod()">here</button>

ractive component -i mytemplate.ractive.html -o mytemplate.ts -ae -u

Then the component above becomes:

import { InitOpts, Ractive } from 'ractive';
import { template, css } from './mytemplate';

class Foo extends Ractive {
  constructor(opts?: InitOpts) { super(opts); }

  someMethod() { console.log('some method here'); }
}

Ractive.extendWith(Foo, {
  template, css
});

The ractive bin also supports processing all of the templates that it finds in a directory using -id rather than -i and you can use the output extension option -oe to specify that the resulting files should be named with a non-.js extension. There's also an -od complement to -o. All of the options are documented in the ractive bin, so you can ractive help component for more info.

There's also a handy rollup wrapper for the ractive bin in rollup-plugin-ractive-bin that will handle all of that for you, and as of 2.0.0-alpha-3, it works nicely with typescript, as it has grown the option to write its output into another directory that you can add to your tsconfig aliases.