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