♻️ Port src/core/dom/jsx to TypeScript (#37563)

- Port DOM JSX libraries to TypeScript. - Move to `src/core/dom/jsx` directory and add `OWNERS`
ampproject · Feb 7, 2022 · ab769cd · ab769cd
1 parent 04d031e
commit ab769cd
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 95 deletions.
diff --git a/build-system/babel-plugins/babel-plugin-jsx-style-object/index.js b/build-system/babel-plugins/babel-plugin-jsx-style-object/index.js
@@ -11,7 +11,7 @@
 const {addNamed} = require('@babel/helper-module-imports');
 
 const baseModule = 'core/dom/jsx';
-const helperModule = '#core/dom/jsx-style-property-string';
+const helperModule = '#core/dom/jsx/style-property-string';
 const helperFnName = 'jsxStylePropertyString';
 
 // All values from here, converted to dash-case:

diff --git a/...abel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/dimensional/output.mjs b/...abel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/dimensional/output.mjs
@@ -1,47 +1,47 @@
-import { jsxStylePropertyString as _jsxStylePropertyString44 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString43 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString42 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString41 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString40 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString39 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString38 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString37 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString36 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString35 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString34 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString33 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString32 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString31 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString30 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString29 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString28 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString27 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString26 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString25 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString24 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString23 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString22 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString21 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString20 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString19 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString18 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString17 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString16 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString15 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString14 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString13 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString12 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString11 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString10 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString9 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString8 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString7 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString6 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString5 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString4 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString3 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString2 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString } from "#core/dom/jsx-style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString44 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString43 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString42 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString41 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString40 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString39 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString38 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString37 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString36 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString35 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString34 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString33 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString32 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString31 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString30 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString29 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString28 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString27 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString26 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString25 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString24 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString23 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString22 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString21 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString20 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString19 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString18 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString17 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString16 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString15 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString14 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString13 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString12 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString11 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString10 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString9 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString8 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString7 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString6 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString5 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString4 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString3 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString2 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString } from "#core/dom/jsx/style-property-string";
 import * as jsx from 'ANYWHERE_LEADING_TO/core/dom/jsx';
 
 const dimensional = () => <div style={"width:100px;" + _jsxStylePropertyString("height", height, true)} />;

diff --git a/...abel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/transformed/output.mjs b/...abel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/transformed/output.mjs
@@ -1,5 +1,5 @@
-import { jsxStylePropertyString as _jsxStylePropertyString2 } from "#core/dom/jsx-style-property-string";
-import { jsxStylePropertyString as _jsxStylePropertyString } from "#core/dom/jsx-style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString2 } from "#core/dom/jsx/style-property-string";
+import { jsxStylePropertyString as _jsxStylePropertyString } from "#core/dom/jsx/style-property-string";
 import * as jsx from 'ANYWHERE_LEADING_TO/core/dom/jsx';
 
 const randomObjectExpressionsAreUnmodified = () => ({

diff --git a/src/core/dom/jsx-style-property-string.js b/src/core/dom/jsx-style-property-string.js
diff --git a/src/core/dom/jsx/OWNERS b/src/core/dom/jsx/OWNERS
@@ -0,0 +1,14 @@
+// For an explanation of the OWNERS rules and syntax, see:
+// https://github.com/ampproject/amp-github-apps/blob/main/owners/OWNERS.example
+
+{
+  rules: [
+    {
+      owners: [
+        {name: 'ampproject/wg-components'},
+        {name: 'ampproject/wg-stories'},
+        {name: 'alanorozco', notify: true},
+      ],
+    },
+  ],
+}
diff --git a/src/core/dom/jsx.js → src/core/dom/jsx/index.ts b/src/core/dom/jsx.js → src/core/dom/jsx/index.ts
@@ -31,64 +31,60 @@
  */
 import {devAssert} from '#core/assert';
 
-/**
- * @typedef {Node|Object|string|number|bigint|boolean|null|undefined}
- */
-let DomJsxChildDef;
+type Tag = string | ((props: Props) => Element);
+type Props = {[string: string]: any} | null | undefined;
+type Child =
+  | Child[]
+  | Node
+  | Object
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined;
 
-/**
- * @param {Element} parent
- * @param {DomJsxChildDef|Array<DomJsxChildDef>} child
- */
-function appendChild(parent, child) {
+function appendChild(parent: Element, child: Child) {
   if (!!child === child || child == null) {
     return;
   }
   if (Array.isArray(child)) {
-    const children = /** @type {Array<DomJsxChildDef>} */ (child);
-    children.forEach((child) => {
+    child.forEach((child) => {
       appendChild(parent, child);
     });
     return;
   }
-  const maybeNode = /** @type {Node} */ (child);
+  const maybeNode = child as Node;
   parent.appendChild(
     maybeNode.nodeType ? maybeNode : self.document.createTextNode(String(child))
   );
 }
 
-/**
- * @param {Element} element
- * @param {string} name
- * @param {*} value
- */
-function setAttribute(element, name, value) {
+function setAttribute(element: Element, name: string, value: any) {
   if (value === false || value == null) {
     return;
   }
   if (typeof value === 'function' && name[0] === 'o' && name[1] === 'n') {
-    const eventName = name.toLowerCase().substr(2);
+    const eventName = name.toLowerCase().substring(2);
     element.addEventListener(eventName, value);
     return;
   }
   element.setAttribute(name, value === true ? '' : String(value));
 }
 
-/**
- * @param {string | (function(*): Element)} tag
- * @param {Object<string, *>} props
- * @param {...*} children
- * @return {Element}
- */
-export function createElement(tag, props, ...children) {
+export function createElement(
+  tag: Tag,
+  props: Props,
+  ...children: Child[]
+): Element {
   if (typeof tag !== 'string') {
     return tag({...props, children});
   }
   // We expect all SVG-related tags to have `xmlns` set during build time.
   // See babel-plugin-dom-jsx-svg-namespace
-  const xmlns = props?.['xmlns'];
+  const xmlns = props?.xmlns;
   if (xmlns) {
-    delete props['xmlns'];
+    delete props.xmlns;
   }
   const element = xmlns
     ? self.document.createElementNS(xmlns, tag)
@@ -102,9 +98,6 @@ export function createElement(tag, props, ...children) {
   return element;
 }
 
-/**
- * @return {null}
- */
 export function Fragment() {
   devAssert(
     null,

diff --git a/src/core/dom/jsx/style-property-string.ts b/src/core/dom/jsx/style-property-string.ts
@@ -0,0 +1,16 @@
+/**
+ * Output helper for babel-plugin-jsx-style-object.
+ * You should not use this directly.
+ */
+export function jsxStylePropertyString(
+  property: string,
+  value: any,
+  isDimensional?: boolean
+) {
+  if (value == null || value === '') {
+    return '';
+  }
+  const withUnit =
+    isDimensional && typeof value === 'number' ? `${value}px` : value;
+  return `${property}:${withUnit};`;
+}
diff --git a/test/unit/core/dom/test-jsx-style-property-string.js b/test/unit/core/dom/test-jsx-style-property-string.js
@@ -1,4 +1,4 @@
-import {jsxStylePropertyString} from '#core/dom/jsx-style-property-string';
+import {jsxStylePropertyString} from '#core/dom/jsx/style-property-string';
 
 describes.sandboxed('jsxStylePropertyString', {}, () => {
   it('returns empty string with nullish', () => {