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 index 9337d335b31c..85cda949e591 100644 --- 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/build-system/babel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/dimensional/output.mjs b/build-system/babel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/dimensional/output.mjs index e6a90e59d602..7f891887d13b 100644 --- a/build-system/babel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/dimensional/output.mjs +++ b/build-system/babel-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 = () =>
; diff --git a/build-system/babel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/transformed/output.mjs b/build-system/babel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/transformed/output.mjs index a3a36b27f9dc..0af9fc73dbce 100644 --- a/build-system/babel-plugins/babel-plugin-jsx-style-object/test/fixtures/transform/transformed/output.mjs +++ b/build-system/babel-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 deleted file mode 100644 index 805e109c76a5..000000000000 --- a/src/core/dom/jsx-style-property-string.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Output helper for babel-plugin-jsx-style-object. - * You should not use this directly. - * @param {string} property - * @param {*} value - * @param {string=} opt_isDimensional - * @return {string} - */ -export function jsxStylePropertyString(property, value, opt_isDimensional) { - if (value == null || value === '') { - return ''; - } - const withUnit = - opt_isDimensional && typeof value === 'number' ? `${value}px` : value; - return `${property}:${withUnit};`; -} diff --git a/src/core/dom/jsx/OWNERS b/src/core/dom/jsx/OWNERS new file mode 100644 index 000000000000..92f8c3d51604 --- /dev/null +++ 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 b/src/core/dom/jsx/index.ts similarity index 73% rename from src/core/dom/jsx.js rename to src/core/dom/jsx/index.ts index e319ce9a8e3f..2fe59d234bd4 100644 --- a/src/core/dom/jsx.js +++ b/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} 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} */ (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} 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 new file mode 100644 index 000000000000..df39f49c401f --- /dev/null +++ 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 index 0eb74308516a..c51a4815d297 100644 --- 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', () => {