Migrate @fluent/react to TypeScript (#458)

* Migrate @fluent/react to TypeScript

* Fix paths in fluent-gecko

* Return ReactElement from Localized

React typings (wrongly) expect the return type of functional components
to be a ReactElement, thus making () => "Hello" invalid. This is
incorrect; as of React 16, it's possible to return plain strings from
functional components and Component.render(). See DefinitelyTyped#18912
and TypeScript#21699.

To work around this, annotate the return value of Localized to be of
type ReactElement, and whenever a string or null are returned, wrap them
in Fragments.

* Add the build make target

* Fix compat.js make target

* Export props interfaces

* Export MarkupParser type

* Fix return type of withLocalization

* Convert elems keys to lowercase; lookup via Element.localName

* Use Node.nodeName.toLowerCase() for elems lookup

* Add a comment about bundle.getMessage(id)!

* Move src/vendor out of src/

Author: stasm

eslint_src.json

@@ -22,10 +22,6 @@
         "no-unreachable": 1,
         "no-unexpected-multiline": 2,
         "no-sparse-arrays": 2,
-        "complexity": [
-            1,
-            18
-        ],
         "dot-location": [
             2,
             "property"

fluent-bundle/makefile

@@ -23,6 +23,7 @@ test: esm/.compiled
 	    --require esm \
 	    test/**/*_test.js
 
+.PHONY: build
 build: index.js compat.js
 
 index.js: esm/.compiled

fluent-dedent/makefile

@@ -23,6 +23,7 @@ test: esm/.compiled
 	    --require esm \
 	    test/**/*_test.js
 
+.PHONY: build
 build: index.js compat.js
 
 index.js: esm/.compiled

fluent-dom/makefile

@@ -11,6 +11,7 @@ test:
 	    --require ./test/index \
 	    test/**/*_test.js
 
+.PHONY: build
 build: index.js compat.js
 
 index.js: $(SOURCES)

fluent-gecko/makefile

@@ -12,6 +12,7 @@ test:
 	    --require esm \
 	    test/**/*_test.js
 
+.PHONY: build
 build: Fluent.jsm FluentSyntax.jsm Localization.jsm DOMLocalization.jsm l10n.js fluent-react.js
 
 Fluent.jsm: $(SOURCES)
@@ -53,6 +54,7 @@ l10n.js: $(SOURCES)
 	@echo -e " $(OK) $@ built"
 
 fluent-react.js: $(SOURCES)
+	$(MAKE) -sC ../fluent-react compile
 	@rollup $(CURDIR)/src/fluent-react.js \
 	    --config ./vendor_config.js \
 	    --output.intro "/* $(call version,fluent-react) */" \

fluent-gecko/src/fluent-react.js

@@ -1 +1 @@
-export * from "../../fluent-react/src/index.js";
+export * from "../../fluent-react/esm/index.js";

fluent-langneg/makefile

@@ -9,6 +9,7 @@ test:
 	    --require esm \
 	    test/**/*_test.js
 
+.PHONY: build
 build: index.js compat.js
 
 index.js: $(SOURCES)

fluent-react/.esdoc.json

@@ -1,2 +1,3 @@
+esm/
 /index.js
 /compat.js

fluent-react/.gitignore

@@ -1,8 +1,10 @@
 .nyc_output
 coverage
-docs
+esm/.compiled
 examples
+src
 test
 makefile
 babel.config.js
 compat_config.js
+tsconfig.json

fluent-react/.npmignore

@@ -1,34 +1,60 @@
 PACKAGE := @fluent/react
 GLOBAL  := FluentReact
-DEPS    := @fluent/sequence:FluentSequence,cached-iterable:CachedIterable,react:React,prop-types:PropTypes
 
 include ../common.mk
 
-build: index.js compat.js
+lint:
+	@eslint --config $(ROOT)/eslint_ts.json --max-warnings 0 src/*.ts
+	@eslint --config $(ROOT)/eslint_test.json --max-warnings 0 test/
+	@echo -e " $(OK) lint"
+
+.PHONY: compile
+compile: esm/.compiled
+
+esm/.compiled: $(SOURCES)
+	@tsc
+	@touch $@
+	@echo -e " $(OK) esm/ compiled"
 
-test:
+.PHONY: test
+test: esm/.compiled
 	@jest --collect-coverage
 
-index.js: $(SOURCES)
-	@rollup $(CURDIR)/src/index.js \
+.PHONY: build
+build: index.js compat.js
+
+index.js: esm/.compiled
+	@rollup $(CURDIR)/esm/index.js \
 	    --config $(ROOT)/bundle_config.js \
 	    --banner "/* $(PACKAGE)@$(VERSION) */" \
 	    --amd.id $(PACKAGE) \
 	    --name $(GLOBAL) \
-	    --globals $(DEPS) \
+	    --globals @fluent/sequence:FluentSequence,cached-iterable:CachedIterable,react:React,prop-types:PropTypes \
 	    --output.file $@
 	@echo -e " $(OK) $@ built"
 
-compat.js: $(SOURCES)
-	@rollup $(CURDIR)/src/index.js \
+compat.js: esm/.compiled
+	@rollup $(CURDIR)/esm/index.js \
 	    --config $(CURDIR)/compat_config.js \
 	    --banner "/* $(PACKAGE)@$(VERSION) */" \
 	    --amd.id $(PACKAGE) \
 	    --name $(GLOBAL) \
-	    --globals @fluent/sequence/compat:FluentSequence,cached-iterable/compat:CachedIterable,$(DEPS) \
+	    --globals @fluent/sequence/compat:FluentSequence,cached-iterable/compat:CachedIterable,react:React,prop-types:PropTypes \
 	    --output.file $@
 	@echo -e " $(OK) $@ built"
 
-lint: _lint
-html: _html
-clean: _clean
+html:
+	@typedoc src \
+	    --out ../html/react \
+	    --mode file \
+	    --excludeNotExported \
+	    --excludePrivate \
+	    --logger none \
+	    --hideGenerator
+	@echo -e " $(OK) html built"
+
+clean:
+	@rm -f esm/*.js esm/*.d.ts esm/.compiled
+	@rm -f index.js compat.js
+	@rm -rf .nyc_output coverage
+	@echo -e " $(OK) clean"

fluent-react/makefile

@@ -15,11 +15,10 @@
       "email": "[email protected]"
     }
   ],
-  "directories": {
-    "lib": "./src"
-  },
+  "type": "commonjs",
   "main": "./index.js",
-  "module": "./src/index.js",
+  "module": "./esm/index.js",
+  "types": "./esm/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/projectfluent/fluent.js.git"
@@ -47,7 +46,7 @@
   },
   "dependencies": {
     "cached-iterable": "^0.2.1",
-    "@fluent/sequence": "0.4.0",
+    "@fluent/sequence": "0.5.0",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
@@ -58,6 +57,8 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "7.0.0",
     "@fluent/bundle": "^0.15.0",
+    "@types/react": "^16.9.22",
+    "@types/react-dom": "^16.9.5",
     "babel-jest": "^24.8.0",
     "babel-plugin-transform-rename-import": "^2.2.0",
     "jest": "^24.8.0",

fluent-react/package.json

@@ -0,0 +1,15 @@
+declare module "cached-iterable" {
+  export class CachedSyncIterable<T> implements Iterable<T> {
+    static from<U>(iterable: Iterable<U>): CachedSyncIterable<U>;
+    constructor(iterable: Iterable<T>);
+    [Symbol.iterator](): Iterator<T>;
+    touchNext(count: number): IteratorResult<T>;
+  }
+
+  export class CachedAsyncIterable<T> implements AsyncIterable<T> {
+    static from<U>(iterable: Iterable<U>): CachedAsyncIterable<U>;
+    constructor(iterable: Iterable<T>);
+    [Symbol.asyncIterator](): AsyncIterator<T>;
+    touchNext(count: number): Promise<IteratorResult<T>>;
+  }
+}

fluent-react/src/cached-iterable.d.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { ReactLocalization } from "./localization";
+
+export let FluentContext = createContext(new ReactLocalization([], null));

fluent-react/src/context.js

@@ -17,6 +17,7 @@
  * components for more information.
  */
 
-export { default as LocalizationProvider } from "./provider";
-export { default as withLocalization } from "./with_localization";
-export { default as Localized } from "./localized";
+export { MemoLocalizationProvider as LocalizationProvider } from "./provider";
+export { withLocalization, WithLocalizationProps } from "./with_localization";
+export { Localized, LocalizedProps } from "./localized";
+export { MarkupParser } from "./markup";

fluent-react/src/context.ts

@@ -1,6 +1,7 @@
+import { FluentBundle, FluentArgument } from "@fluent/bundle";
 import { mapBundleSync } from "@fluent/sequence";
 import { CachedSyncIterable } from "cached-iterable";
-import createParseMarkup from "./markup";
+import { createParseMarkup, MarkupParser } from "./markup";
 
 /*
  * `ReactLocalization` handles translation formatting and fallback.
@@ -13,23 +14,32 @@ import createParseMarkup from "./markup";
  * The `ReactLocalization` class instances are exposed to `Localized` elements
  * via the `LocalizationProvider` component.
  */
-export default class ReactLocalization {
-  constructor(bundles, parseMarkup = createParseMarkup()) {
+export class ReactLocalization {
+  public bundles: Iterable<FluentBundle>;
+  public parseMarkup: MarkupParser | null;
+
+  constructor(
+    bundles: Iterable<FluentBundle>,
+    parseMarkup: MarkupParser | null = createParseMarkup()
+  ) {
     this.bundles = CachedSyncIterable.from(bundles);
     this.parseMarkup = parseMarkup;
   }
 
-  getBundle(id) {
+  getBundle(id: string): FluentBundle | null {
     return mapBundleSync(this.bundles, id);
   }
 
-  getString(id, args, fallback) {
+  getString(
+    id: string,
+    args?: Record<string, FluentArgument> | null,
+    fallback?: string
+  ): string {
     const bundle = this.getBundle(id);
-
     if (bundle) {
       const msg = bundle.getMessage(id);
       if (msg && msg.value) {
-        let errors = [];
+        let errors: Array<Error> = [];
         let value = bundle.formatPattern(msg.value, args, errors);
         for (let error of errors) {
           this.reportError(error);
@@ -43,7 +53,7 @@ export default class ReactLocalization {
 
   // XXX Control this via a prop passed to the LocalizationProvider.
   // See https://github.com/projectfluent/fluent.js/issues/411.
-  reportError(error) {
+  reportError(error: Error): void {
     /* global console */
     // eslint-disable-next-line no-console
     console.warn(`[@fluent/react] ${error.name}: ${error.message}`);