react-intl-dts's Introduction

Archived Repository

This repository has been archived because it only supports react-intl v2, not v3 or newer.

@bitjourney/react-intl-dts

react-intl-dts is based on i18n-dts. Thank you!

react-intl-dts is a d.ts file generator for react-intl.

With generated d.ts file you can treat FormattedMessage component type-safely!

Installation

NPM

npm install -D @bitjourney/react-intl-dts

Yarn

yarn add -D @bitjourney/react-intl-dts

Configuration

First of all specify the following settings in root package.json.

model: file extension type can be either .json, .ts or .js
outputDir: d.ts file will be emitted in specified directory

"react-intl-dts": {
  "model": "./src/locale/languages/en.json",
  "outputDir": "./typings"
}

Note that when you specify .ts or .js file type as a model, use module.exports to export an object.

module.exports = {
  platform: {
    ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu',
  },
};

And add outputDir dir into filesGlob option in tsconfig.json.

"filesGlob": [
  "typings/*.d.ts",
],

That's it! Now you can use react-intl-dts command which generates corresponding d.ts file.

We recommend to add scripts below into package.json.

"scripts": {
  "react-intl-dts": "react-intl-dts",
  "react-intl-dts:watch": "react-intl-dts -w"
},

Options

Watch mode

You can enable watch mode by adding --watch (shorthand -w) flag.

In the watch mode, react-intl-dts watches update of model file and generates d.ts file when the model is updated.

react-intl-dts --watch

Licence

Copyright 2019 Bit Journey, Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

i18n-dts's license

react-intl-dts is based on i18n-dts.

Copyright 2018 Quipper Limited.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

react-intl-dts's People

Contributors

Watchers

Forkers

pocke

react-intl-dts's Issues

Add comments to disable lint

/* tslint:disable */ and /* eslint-disable */

https://palantir.github.io/tslint/usage/rule-flags/
https://eslint.org/docs/user-guide/configuring

Literals on each line

// before
type MessageType = "foo" | "bar" | "baz"

// after
type MessageType = "foo" |
  "bar" |
  "baz"

Sort types alphabetically

Currently react-intl-dts does not treat order of types.
So it has the same order with the original locale file.

It makes diff messy when the original locale file is re-ordered.

Output formatted type definitions by Prettier or generating AST of TypeScript

Support react-intl v3

React Intl contains type definitions itself since v3. It sounds good, but it is not a good news for react-intl-dts.

Because react-intl-dts need to modify the .d.ts to apply types to FormattedMessage component's key.
It was easy with v2 because we can use react-intl-dts instead of @types/react-intl.
But it has been impossible by including type definition to react-intl.

So we need another solution to apply types, but I have no idea.

Recommend Projects