Templates for Internalization (messages, formatting)

[jozef-slezak]

Goal: Refactor existing internalization code from ts.factory*() to templates

Background: we believe it is more intuitive to extend and maintain the codegen functionality using templates (rather then typescript factories). Typescript factory code builds AST using code but it tends to be hard to read once you get to bigger code snippet. We have tried different approach: we parse source file (template) as an AST and then apply refactoring rules like here https://github.com/iteria-app/lowcode/blob/master/packages/react-lowcode/src/codegen/generation/generators/template/template-resolver.ts

How to do that?

• keep existing interfaces / API
• introduce new implementation of the API using templates + refactoring rules
• check that existing jest test are still green (after switching implementation)

The template source file:

1. template should be normal normal working code
2. refactoring rules should inline function from the template to the target/generated code
3. template should look like this:

different templates for: react-intl or standard browser Intl:

export formatNumberPlaceholder() {
   return usage of react-intl format
}

export formatDatePlaceholder(todo params) {
   return usage of react-intl format
}

export formatTimePlaceholder(todo params) {
   return usage of react-intl format
}

Different template for react-intl or react-i18n

//react-intl.ts
export function T(messageID, defaultMessage) {
   const intl = useIntl()
   return intl.formatMessage(messageID, defaultMessage)
}

//similarly react-i18n.ts


// dummy-intl.ts
// this function will be replaced by `intl.`
export function T(messageID, defaultMessage) {
  return defaultMessage || messageID // default dummy implementation (without any framework )
}

export TranslatePlaceholder // TODO react tag code, params messageID
   return <FormattedMessage ... tag="span" />
}

What to do?

Checklist:

• Extract interface/API from existing implementation

  lowcode/packages/react-lowcode/src/codegen/generation/react-components/react-intl/intl-formatter.ts

  Line 9 in bcc30b1

  export default class ReactIntlFormatter {

• Introduce new implementation with the same API => copy&paste class with method declarations from

  lowcode/packages/react-lowcode/src/codegen/generation/react-components/react-intl/intl-formatter.ts

  Line 9 in bcc30b1

  export default class ReactIntlFormatter {

  - inspire by the links in the "Background:" (see at the beginning of this issue)
• Switch the implementation https://github.com/iteria-app/lowcode/search?q=ReactIntlFormatter
• Run all test (before you start to implement and everytime you change anything)