[WIP] Attempted conversion of i18n package

packages/i18n/package.json

@@ -33,6 +33,7 @@
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
+  "types": "dist-types/index.d.ts",
   "source": "src/index.js",
   "publishConfig": {
     "access": "public"

packages/i18n/src/i18n.js → packages/i18n/src/i18n.ts

@@ -19,12 +19,17 @@
  */
 import Tannin from 'tannin';
 
+/**
+ * Internal dependencies
+ */
+import type { LocaleDataWrapper } from './types';
+
 const TEXT_DOMAIN = 'web-stories';
 
 const tannin = new Tannin({
   [TEXT_DOMAIN]: {
     '': {
-      plural_forms(n) {
+      plural_forms(n: number) {
         return n === 1 ? 0 : 1;
       },
     },
@@ -34,9 +39,9 @@ const tannin = new Tannin({
 /**
  * Merge locale data into the Tannin instance.
  *
- * @param {Object} data Locale data.
+ * @param {LocaleDataWrapper} data Locale data.
  */
-export function setLocaleData(data) {
+export function setLocaleData(data: LocaleDataWrapper) {
   const translations =
     data.locale_data['web-stories'] || data.locale_data.messages;
   tannin.data[TEXT_DOMAIN] = {
@@ -56,7 +61,7 @@ export function setLocaleData(data) {
  * @param {string} [domain] Text domain. Unique identifier for retrieving translated strings.
  * @return {string} Translated text.
  */
-export function __(text, domain = TEXT_DOMAIN) {
+export function __(text: string, domain = TEXT_DOMAIN) {
   return tannin.dcnpgettext(domain, undefined, text);
 }
 
@@ -68,7 +73,7 @@ export function __(text, domain = TEXT_DOMAIN) {
  * @param {string} [domain] Text domain. Unique identifier for retrieving translated strings.
  * @return {string} Translated text.
  */
-export function _x(text, context, domain = TEXT_DOMAIN) {
+export function _x(text: string, context: string, domain = TEXT_DOMAIN) {
   return tannin.dcnpgettext(domain, context, text);
 }
 
@@ -81,7 +86,12 @@ export function _x(text, context, domain = TEXT_DOMAIN) {
  * @param {string} [domain] Text domain. Unique identifier for retrieving translated strings.
  * @return {string} Translated text.
  */
-export function _n(singular, plural, number, domain = TEXT_DOMAIN) {
+export function _n(
+  singular: string,
+  plural: string,
+  number: number,
+  domain = TEXT_DOMAIN
+) {
   return tannin.dcnpgettext(domain, undefined, singular, plural, number);
 }
 
@@ -95,6 +105,12 @@ export function _n(singular, plural, number, domain = TEXT_DOMAIN) {
  * @param {string} [domain] Text domain. Unique identifier for retrieving translated strings.
  * @return {string} Translated text.
  */
-export function _nx(singular, plural, number, context, domain = TEXT_DOMAIN) {
+export function _nx(
+  singular: string,
+  plural: string,
+  number: number,
+  context: string,
+  domain = TEXT_DOMAIN
+) {
   return tannin.dcnpgettext(domain, context, singular, plural, number);
 }

packages/i18n/src/translateToExclusiveList.js → packages/i18n/src/translateToExclusiveList.ts

@@ -27,7 +27,7 @@ import { __ } from './i18n';
  * @param {Array.<string>} options The options that will be joined with the `or` conjunction.
  * @return {string} Localized list items.
  */
-function translateToExclusiveList(options) {
+function translateToExclusiveList(options: Array<string>) {
   switch (options.length) {
     case 0:
       return '';

packages/i18n/src/translateToInclusiveList.js → packages/i18n/src/translateToInclusiveList.ts

@@ -27,7 +27,7 @@ import { __ } from './i18n';
  * @param {Array.<string>} options The options that will be joined with the `and` conjunction.
  * @return {string} Localized list items.
  */
-function translateToInclusiveList(options) {
+function translateToInclusiveList(options: Array<string>) {
   switch (options.length) {
     case 0:
       return '';

packages/i18n/src/translateWithMarkup.js → packages/i18n/src/translateWithMarkup.tsx

@@ -23,6 +23,12 @@ import {
   Fragment,
 } from '@googleforcreators/react';
 import PropTypes from 'prop-types';
+import type React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { Mapping } from './types';
 
 /** @typedef {import('react').ReactNode} ReactNode */
 /** @typedef {import('react').ReactElement} ReactElement */
@@ -52,18 +58,22 @@ const VOID_ELEMENTS = [
  * @param {?Object.<string, ReactElement>} mapping Map of tag names to React components.
  * @return {ReactNode} Transformed node.
  */
-export function transformNode(node, mapping = {}) {
-  const { childNodes, localName, nodeType, textContent } = node;
+export function transformNode(
+  node: ChildNode,
+  mapping: Mapping = {}
+): React.ReactNode {
+  const { firstChild, nodeType, textContent } = node;
   if (Node.TEXT_NODE === nodeType) {
     return textContent;
   }
 
-  const children = node.hasChildNodes()
-    ? [...childNodes].map((child) => transform(child, mapping))
-    : null;
+  const children = node.hasChildNodes() ? transform(firstChild, mapping) : null;
 
-  if (localName in mapping) {
-    return cloneElement(mapping[localName], null, children);
+  if ('localName' in node) {
+    const { localName } = node as Element;
+    if (localName in mapping) {
+      return cloneElement(mapping[localName], undefined, children);
+    }
   }
 
   return createElement(localName, null, children);
@@ -77,17 +87,21 @@ export function transformNode(node, mapping = {}) {
  * @param {?Object.<string, ReactElement>} mapping Map of tag names to React components.
  * @return {ReactNode[]} List of transformed nodes.
  */
-function transform(node, mapping = {}) {
-  const result = [];
-
-  do {
+function transform(node: ChildNode | null, mapping: Mapping = {}) {
+  const result: Array<React.ReactNode> = [];
+  while (node) {
     result.push(transformNode(node, mapping));
     node = node.nextSibling;
-  } while (node !== null);
+  }
 
   return result;
 }
 
+interface TranslateWithMarkupProps {
+  mapping: Mapping;
+  children: string;
+}
+
 /**
  * Component to facilitate translation of strings containing markup.
  *
@@ -99,10 +113,13 @@ function transform(node, mapping = {}) {
  * @see https://github.com/googleforcreators/web-stories-wp/issues/1578
  * @param {Object} props Component props.
  * @param {?Object.<string, ReactElement>} props.mapping Map of tag names to React components.
- * @param {ReactNode[]|string} props.children Children / string to parse.
+ * @param {string} props.children Children / string to parse.
  * @return {ReactNode[]} Transformed children.
  */
-function TranslateWithMarkup({ mapping = {}, children }) {
+function TranslateWithMarkup({
+  mapping = {},
+  children,
+}: TranslateWithMarkupProps) {
   //Ensure all Object keys are lowercase as the DOMParser converts tag names to lowercase.
   mapping = Object.fromEntries(
     Object.entries(mapping).map(([k, v]) => [k.toLowerCase(), v])

packages/i18n/src/types.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * 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
+ *
+ *     https://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.
+ */
+
+type DomainMetadata = {
+  domain: string;
+  lang: string;
+  plural_forms: string | (() => string);
+};
+
+type Translation = [string, string];
+
+type LocaleDomain = Record<string, DomainMetadata | Translation>;
+
+type LocaleData = Record<string, LocaleDomain>;
+
+export type LocaleDataWrapper = {
+  locale_data: LocaleData;
+};
+
+export type Mapping = Record<string, React.ReactElement>;

packages/i18n/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist-types"
+  },
+  "references": [{ "path": "../react" }],
+  "include": ["src/**/*"]
+}