/vite-plugin-ftl

vite FreeMarker fluent.js support

Primary LanguageTypeScript

vite-plugin-fluent-js-ftl

vite FreeMarker support

How to use

  • No Java required
  • The installation depends on npm i --save @fluent/bundle -D
  • Install npm i --save-dev vite-plugin-fluent-js-ftl
  • Configure in vite.config.ts
import { defineConfig } from 'vite'
import ftl from 'vite-plugin-fluent-js-ftl'

export default defineConfig({
  // ...
  plugins: [
    ftl(),
  ],
})

The converted js module

The converted js module like this.

declare module '*.ftl' {
    import { FluentResource } from '@fluent/bundle'
    const rsrs: FluentResource // it is actually just serialized
    const data: unknown
    export { data, rsrs }
    export default { data, rsrs }
}

AutoLoadData

If you need to separate the template from the data, you can enable the autoLoadData option and it will load the data according to the following rules.

path/to/template.ftl # template file
path/to/template.ftl.json # template data file

demo

import { FluentBundle } from '@fluent/bundle'
import { rsrs, data } from '@template/template.ftl'

const translations = new FluentBundle('en')
translations.addResource(rsrs)

let html
const htmlMessage = translations.getMessage('html')
if (htmlMessage.value) {
  html = translations.formatPattern(htmlMessage.value, data)
  // html now is rendered `html` message from template.ftl
  // <html>....
}

Options

interface Options {
  autoLoadData?: boolean
}