From 7888c38c7c452980b851e74998224acda93a9b66 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 8 Jul 2020 18:18:57 +0200 Subject: [PATCH] chore: use Babel plugins to annotate pure calls --- .../package.json | 3 +- .../src/EventListener.ts | 18 +-- .../fluentui/react-component-ref/package.json | 1 - .../fluentui/react-component-ref/src/Ref.tsx | 12 +- .../react-component-ref/src/RefFindNode.tsx | 15 +-- .../react-component-ref/src/RefForward.tsx | 16 +-- .../fluentui/react-component-ref/src/index.ts | 5 +- .../react-component-ref/src/isRefObject.ts | 6 - .../fluentui/react-component-ref/src/types.ts | 18 --- .../src/{handleRef.ts => utils.ts} | 16 +++ .../src/utils/commonPropTypes.ts | 113 ++++++++++++------ .../react-northstar/src/utils/index.ts | 9 +- .../react-northstar/src/utils/whatInput.ts | 13 -- scripts/babel/index.js | 11 ++ scripts/package.json | 2 + yarn.lock | 18 +++ 16 files changed, 132 insertions(+), 144 deletions(-) delete mode 100644 packages/fluentui/react-component-ref/src/isRefObject.ts delete mode 100644 packages/fluentui/react-component-ref/src/types.ts rename packages/fluentui/react-component-ref/src/{handleRef.ts => utils.ts} (60%) diff --git a/packages/fluentui/react-component-event-listener/package.json b/packages/fluentui/react-component-event-listener/package.json index 67371219c8a7c4..d6ba37dfa395d4 100644 --- a/packages/fluentui/react-component-event-listener/package.json +++ b/packages/fluentui/react-component-event-listener/package.json @@ -5,8 +5,7 @@ "author": "Oleksandr Fediashov ", "bugs": "https://github.com/microsoft/fluentui/issues", "dependencies": { - "@babel/runtime": "^7.10.4", - "prop-types": "^15.7.2" + "@babel/runtime": "^7.10.4" }, "devDependencies": { "@fluentui/eslint-plugin": "^0.51.0", diff --git a/packages/fluentui/react-component-event-listener/src/EventListener.ts b/packages/fluentui/react-component-event-listener/src/EventListener.ts index a1d02ee7f60201..28e4d581ddd88e 100644 --- a/packages/fluentui/react-component-event-listener/src/EventListener.ts +++ b/packages/fluentui/react-component-event-listener/src/EventListener.ts @@ -1,7 +1,5 @@ -import * as PropTypes from 'prop-types'; - import { useEventListener } from './useEventListener'; -import { EventListenerOptions, EventTypes, Target, TargetRef } from './types'; +import { EventListenerOptions, EventTypes } from './types'; export function EventListener(props: EventListenerOptions) { useEventListener(props); @@ -9,20 +7,6 @@ export function EventListener(props: EventListenerOptions< return null; } -EventListener.displayName = 'EventListener'; -// TODO: use Babel plugin for this -EventListener.propTypes = - process.env.NODE_ENV !== 'production' - ? { - capture: PropTypes.bool, - listener: PropTypes.func.isRequired, - target: PropTypes.object as PropTypes.Validator, - targetRef: PropTypes.shape({ - current: PropTypes.object, - }) as PropTypes.Validator, - type: PropTypes.string.isRequired as PropTypes.Validator, - } - : {}; EventListener.defaultProps = { capture: false, }; diff --git a/packages/fluentui/react-component-ref/package.json b/packages/fluentui/react-component-ref/package.json index af006c8845b9fa..4ce16b603ef45e 100644 --- a/packages/fluentui/react-component-ref/package.json +++ b/packages/fluentui/react-component-ref/package.json @@ -6,7 +6,6 @@ "bugs": "https://github.com/microsoft/fluentui/issues", "dependencies": { "@babel/runtime": "^7.10.4", - "prop-types": "^15.7.2", "react-is": "^16.6.3" }, "devDependencies": { diff --git a/packages/fluentui/react-component-ref/src/Ref.tsx b/packages/fluentui/react-component-ref/src/Ref.tsx index 701166d1ae6a65..9b6b7ef575f018 100644 --- a/packages/fluentui/react-component-ref/src/Ref.tsx +++ b/packages/fluentui/react-component-ref/src/Ref.tsx @@ -1,10 +1,9 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; import * as ReactIs from 'react-is'; import { RefFindNode } from './RefFindNode'; import { RefForward } from './RefForward'; -import { RefProps, refPropType } from './types'; +import { RefProps } from './utils'; export const Ref: React.FunctionComponent = props => { const { children, innerRef, ...rest } = props; @@ -15,12 +14,3 @@ export const Ref: React.FunctionComponent = props => { return {childWithProps}; }; - -Ref.displayName = 'Ref'; -// TODO: use Babel plugin for this -if (process.env.NODE_ENV !== 'production') { - Ref.propTypes = { - children: PropTypes.element.isRequired, - innerRef: refPropType.isRequired, - }; -} diff --git a/packages/fluentui/react-component-ref/src/RefFindNode.tsx b/packages/fluentui/react-component-ref/src/RefFindNode.tsx index 6b4de23638bf7e..60373364b4205e 100644 --- a/packages/fluentui/react-component-ref/src/RefFindNode.tsx +++ b/packages/fluentui/react-component-ref/src/RefFindNode.tsx @@ -1,22 +1,9 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { handleRef } from './handleRef'; -import { RefProps, refPropType } from './types'; +import { handleRef, RefProps } from './utils'; export class RefFindNode extends React.Component { - static displayName = 'RefFindNode'; - - // TODO: use Babel plugin for this - static propTypes = - process.env.NODE_ENV !== 'production' - ? { - children: PropTypes.element.isRequired, - innerRef: refPropType.isRequired, - } - : {}; - prevNode: Node | null = null; componentDidMount() { diff --git a/packages/fluentui/react-component-ref/src/RefForward.tsx b/packages/fluentui/react-component-ref/src/RefForward.tsx index f606981903d044..146c6a0ca56b2b 100644 --- a/packages/fluentui/react-component-ref/src/RefForward.tsx +++ b/packages/fluentui/react-component-ref/src/RefForward.tsx @@ -1,21 +1,7 @@ -import * as PropTypes from 'prop-types'; import * as React from 'react'; - -import { handleRef } from './handleRef'; -import { RefProps, refPropType } from './types'; +import { handleRef, RefProps } from './utils'; export class RefForward extends React.Component { - static displayName = 'RefForward'; - - // TODO: use Babel plugin for this - static propTypes = - process.env.NODE_ENV !== 'production' - ? { - children: PropTypes.element.isRequired, - innerRef: refPropType.isRequired, - } - : {}; - currentNode: Node | null = null; handleRefOverride = (node: HTMLElement) => { diff --git a/packages/fluentui/react-component-ref/src/index.ts b/packages/fluentui/react-component-ref/src/index.ts index ef2214cb108b5c..7e5655e2c05c1f 100644 --- a/packages/fluentui/react-component-ref/src/index.ts +++ b/packages/fluentui/react-component-ref/src/index.ts @@ -1,8 +1,5 @@ -export { handleRef } from './handleRef'; -export { isRefObject } from './isRefObject'; - export { Ref } from './Ref'; export { RefFindNode } from './RefFindNode'; export { RefForward } from './RefForward'; -export * from './types'; +export * from './utils'; diff --git a/packages/fluentui/react-component-ref/src/isRefObject.ts b/packages/fluentui/react-component-ref/src/isRefObject.ts deleted file mode 100644 index e55477c7c6c567..00000000000000 --- a/packages/fluentui/react-component-ref/src/isRefObject.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as React from 'react'; - -/** Checks that the passed object is a valid React ref object. */ -export const isRefObject = (ref: any): ref is React.RefObject => - // https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665 - ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current'); diff --git a/packages/fluentui/react-component-ref/src/types.ts b/packages/fluentui/react-component-ref/src/types.ts deleted file mode 100644 index f75a2a5aad4009..00000000000000 --- a/packages/fluentui/react-component-ref/src/types.ts +++ /dev/null @@ -1,18 +0,0 @@ -import * as PropTypes from 'prop-types'; -import * as React from 'react'; - -export interface RefProps { - children: React.ReactElement; - - /** - * Called when a child component will be mounted or updated. - * - * @param node - Referred node. - */ - innerRef: React.Ref; -} - -/** A checker that matches the React.Ref type. */ -export const refPropType = PropTypes.oneOfType([PropTypes.func, PropTypes.object]) as PropTypes.Requireable< - React.Ref ->; diff --git a/packages/fluentui/react-component-ref/src/handleRef.ts b/packages/fluentui/react-component-ref/src/utils.ts similarity index 60% rename from packages/fluentui/react-component-ref/src/handleRef.ts rename to packages/fluentui/react-component-ref/src/utils.ts index ccb7273b871bd3..7ce468ff1ba5d2 100644 --- a/packages/fluentui/react-component-ref/src/handleRef.ts +++ b/packages/fluentui/react-component-ref/src/utils.ts @@ -1,5 +1,16 @@ import * as React from 'react'; +export interface RefProps { + children: React.ReactElement; + + /** + * Called when a child component will be mounted or updated. + * + * @param node - Referred node. + */ + innerRef: React.Ref; +} + /** * The function that correctly handles passing refs. * @@ -26,3 +37,8 @@ export const handleRef = (ref: React.Ref | undefined, node: N) => { (ref as React.MutableRefObject).current = node; } }; + +/** Checks that the passed object is a valid React ref object. */ +export const isRefObject = (ref: any): ref is React.RefObject => + // https://github.com/facebook/react/blob/v16.8.2/packages/react-reconciler/src/ReactFiberCommitWork.js#L665 + ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current'); diff --git a/packages/fluentui/react-northstar/src/utils/commonPropTypes.ts b/packages/fluentui/react-northstar/src/utils/commonPropTypes.ts index c8d21a2c406f72..179f90b418d473 100644 --- a/packages/fluentui/react-northstar/src/utils/commonPropTypes.ts +++ b/packages/fluentui/react-northstar/src/utils/commonPropTypes.ts @@ -1,5 +1,46 @@ +import { ComponentSlotStyle, ComponentVariablesInput } from '@fluentui/styles'; +import { ComponentDesignProp } from '@fluentui/react-bindings'; import * as customPropTypes from '@fluentui/react-proptypes'; import * as PropTypes from 'prop-types'; +import * as React from 'react'; + +import { ReactChildren } from '../types'; + +export interface StyledComponentProps

{ + /** Additional CSS styles to apply to the component instance. */ + styles?: ComponentSlotStyle; + + /** Override for theme site variables to allow modifications of component styling via themes. */ + variables?: ComponentVariablesInput; +} + +export interface UIComponentProps

extends StyledComponentProps { + /** Additional CSS class name(s) to apply. */ + className?: string; + design?: ComponentDesignProp; +} + +export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest'; + +export type AlignValue = 'start' | 'end' | 'center' | 'justify'; + +export interface ColorComponentProps { + /** A component can have a color. */ + color?: TColor; +} + +export interface ContentComponentProps { + /** Shorthand for primary content. */ + content?: TContent; +} + +export interface ChildrenComponentProps { + /** + * Content for childrenApi + * @docSiteIgnore + */ + children?: TChildren; +} export interface CreateCommonConfig { accessibility?: boolean; @@ -11,39 +52,41 @@ export interface CreateCommonConfig { styled?: boolean; } -export const createCommon = (config: CreateCommonConfig = {}) => { - const { - accessibility = true, - as = true, - children = 'node', - className = true, - color = false, - content = 'node', - styled = true, - } = config; - return { - ...(accessibility && { - accessibility: customPropTypes.accessibility, - }), - ...(as && { - as: PropTypes.elementType, - }), - ...(children && { - children: children === 'element' ? PropTypes.element : PropTypes.node, - }), - ...(className && { - className: PropTypes.string, - }), - ...(color && { - color: PropTypes.string, - }), - ...(content && { - content: content === 'shorthand' ? customPropTypes.itemShorthand : customPropTypes.nodeContent, - }), - ...(styled && { - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - design: customPropTypes.design, - }), - }; +export const commonPropTypes = { + createCommon: (config: CreateCommonConfig = {}) => { + const { + accessibility = true, + as = true, + children = 'node', + className = true, + color = false, + content = 'node', + styled = true, + } = config; + return { + ...(accessibility && { + accessibility: customPropTypes.accessibility, + }), + ...(as && { + as: PropTypes.elementType, + }), + ...(children && { + children: children === 'element' ? PropTypes.element : PropTypes.node, + }), + ...(className && { + className: PropTypes.string, + }), + ...(color && { + color: PropTypes.string, + }), + ...(content && { + content: content === 'shorthand' ? customPropTypes.itemShorthand : customPropTypes.nodeContent, + }), + ...(styled && { + styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + design: customPropTypes.design, + }), + }; + }, }; diff --git a/packages/fluentui/react-northstar/src/utils/index.ts b/packages/fluentui/react-northstar/src/utils/index.ts index 8740e35879680a..7e0d3dd0a798dd 100644 --- a/packages/fluentui/react-northstar/src/utils/index.ts +++ b/packages/fluentui/react-northstar/src/utils/index.ts @@ -19,12 +19,5 @@ export { createComponent } from './createComponent'; export { getKindProp } from './getKindProp'; export * from './whatInput'; -export * from './commonPropInterfaces'; export { screenReaderContainerStyles } from './accessibility/Styles/accessibilityStyles'; -// work around api-extractor limitation -import { CreateCommonConfig as CreateCommonConfigLocal, createCommon as createCommonLocal } from './commonPropTypes'; - -export module commonPropTypes { - export type CreateCommonConfig = CreateCommonConfigLocal; - export const createCommon = createCommonLocal; -} +export * from './commonPropTypes'; diff --git a/packages/fluentui/react-northstar/src/utils/whatInput.ts b/packages/fluentui/react-northstar/src/utils/whatInput.ts index 070ab1e3fc6c57..33e0cab974a18a 100644 --- a/packages/fluentui/react-northstar/src/utils/whatInput.ts +++ b/packages/fluentui/react-northstar/src/utils/whatInput.ts @@ -10,14 +10,6 @@ import { isBrowser } from './isBrowser'; // last used input type let currentInput = 'initial'; -// check for sessionStorage support -// then check for session variables and use if available -try { - if (window.sessionStorage.getItem('what-input')) { - currentInput = window.sessionStorage.getItem('what-input'); - } -} catch (e) {} - // event buffer timer let eventTimer = null; @@ -130,11 +122,6 @@ const setInput = event => { if (currentInput !== value && shouldUpdate) { currentInput = value; - - try { - window.sessionStorage.setItem('what-input', currentInput); - } catch (e) {} - doUpdate(event.view.document); } } diff --git a/scripts/babel/index.js b/scripts/babel/index.js index 336ac703fdd3fe..a9891e8ad9ce1d 100644 --- a/scripts/babel/index.js +++ b/scripts/babel/index.js @@ -38,6 +38,17 @@ module.exports = api => { '@babel/plugin-syntax-dynamic-import', ['@babel/plugin-transform-runtime', { useESModules }], + useESModules && 'babel-plugin-iife-wrap-react-components', + useESModules && [ + 'babel-plugin-annotate-pure-imports', + { + imports: { + '@fluentui/react-bindings': 'compose', + '@fluentui/react-context-selector': 'createContext', + '../utils/createSvgIcon': ['createSvgIcon'], + }, + }, + ], isDistBundle && 'lodash', ].filter(Boolean); diff --git a/scripts/package.json b/scripts/package.json index a4585c34356751..e9b3ee57df2b76 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -61,7 +61,9 @@ "autoprefixer": "^9.7.6", "babel-jest": "^24.5.0", "babel-loader": "^8.0.6", + "babel-plugin-annotate-pure-imports": "^1.0.0-1", "babel-plugin-lodash": "^3.3.4", + "babel-plugin-iife-wrap-react-components": "^1.0.0-5", "beachball": "^1.31.2", "chalk": "^2.1.0", "circular-dependency-plugin": "^5.0.2", diff --git a/yarn.lock b/yarn.lock index 1fcee6a47a82d0..068d1b2c8ab8b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5225,6 +5225,15 @@ babel-plugin-add-react-displayname@^0.0.5: resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5" integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U= +babel-plugin-annotate-pure-imports@^1.0.0-1: + version "1.0.0-1" + resolved "https://registry.yarnpkg.com/babel-plugin-annotate-pure-imports/-/babel-plugin-annotate-pure-imports-1.0.0-1.tgz#b0b5c5c5040a81de2fffba2ca095384d80e6b40c" + integrity sha512-BJk9paXY1qh7amBLwWfhWbvxFWsUCmiz6NSnpTbP5T4EAM0PwvCr6U5bz+0NbCADphziPMVgbt/M+/06oV+1GA== + dependencies: + "@babel/core" "^7.10.4" + "@babel/helper-annotate-as-pure" "^7.10.4" + "@babel/types" "^7.10.4" + babel-plugin-apply-mdx-type-prop@^1.5.5: version "1.5.5" resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.5.5.tgz#b5f6333b445f1ec189949225f9309d67c24cf167" @@ -5263,6 +5272,15 @@ babel-plugin-extract-import-names@^1.5.5: dependencies: "@babel/helper-plugin-utils" "7.8.0" +babel-plugin-iife-wrap-react-components@^1.0.0-5: + version "1.0.0-5" + resolved "https://registry.yarnpkg.com/babel-plugin-iife-wrap-react-components/-/babel-plugin-iife-wrap-react-components-1.0.0-5.tgz#bd0eceee22b889a3366dbf1058b455abfbbbf23c" + integrity sha512-N91+hcZ98cm7AhqqC9zTwRCwziqEcljgXNuZXWeHRicDKeFASbzbyG5TuSGdgiRYm4oO0TLEEXWx2dxMNoXzaw== + dependencies: + "@babel/core" "^7.10.4" + "@babel/helper-annotate-as-pure" "^7.10.4" + "@babel/types" "^7.10.4" + babel-plugin-istanbul@^5.1.0: version "5.1.4" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.4.tgz#841d16b9a58eeb407a0ddce622ba02fe87a752ba"