From f8d01fa2d98331c1c78e7d06391ebbfcaa8ad456 Mon Sep 17 00:00:00 2001 From: Grant Wong <2908767+dddlr@users.noreply.github.com> Date: Tue, 24 Oct 2023 13:15:13 +1100 Subject: [PATCH] Delete flow types (#1536) * Delete flow types * Add changeset * Remove flow from github workflows * Fix prettier * Remove flowconfig --- .changeset/purple-wolves-draw.md | 6 + .eslintrc.js | 18 +- .flowconfig | 29 - .github/workflows/build.yml | 3 - .github/workflows/test.yml | 3 - flow-typed/npm/jest_v26.x.x.js | 1190 ----------------- flow-typed/tokens.js | 13 - package.json | 6 +- packages/jest/src/index.js.flow | 19 - packages/jest/src/matchers.js.flow | 17 - packages/jest/src/types.js.flow | 24 - .../class-names/__tests__/types.test.js.flow | 35 - packages/react/src/class-names/index.js.flow | 53 - packages/react/src/css-map/index.js.flow | 125 -- packages/react/src/css-map/pseudos.js.flow | 57 - .../src/css/__tests__/types.test.js.flow | 42 - packages/react/src/css/index.js.flow | 36 - packages/react/src/index.js.flow | 13 - .../keyframes/__tests__/types.test.js.flow | 31 - packages/react/src/keyframes/index.js.flow | 48 - packages/react/src/runtime.js.flow | 7 - packages/react/src/runtime/ac.js.flow | 56 - packages/react/src/runtime/ax.js.flow | 27 - packages/react/src/runtime/cache.js.flow | 18 - .../src/runtime/css-custom-property.js.flow | 19 - .../react/src/runtime/dev-warnings.js.flow | 7 - packages/react/src/runtime/index.js.flow | 11 - .../src/runtime/is-server-environment.js.flow | 19 - packages/react/src/runtime/sheet.js.flow | 36 - .../react/src/runtime/style-cache.js.flow | 19 - packages/react/src/runtime/style.js.flow | 16 - packages/react/src/runtime/types.js.flow | 23 - .../src/styled/__tests__/types.test.js.flow | 84 -- packages/react/src/styled/index.js.flow | 66 - packages/react/src/types.js.flow | 31 - packages/react/src/utils/error.js.flow | 7 - scripts/flow-types.sh | 152 --- yarn.lock | 49 +- 38 files changed, 14 insertions(+), 2401 deletions(-) create mode 100644 .changeset/purple-wolves-draw.md delete mode 100644 .flowconfig delete mode 100644 flow-typed/npm/jest_v26.x.x.js delete mode 100644 flow-typed/tokens.js delete mode 100644 packages/jest/src/index.js.flow delete mode 100644 packages/jest/src/matchers.js.flow delete mode 100644 packages/jest/src/types.js.flow delete mode 100644 packages/react/src/class-names/__tests__/types.test.js.flow delete mode 100644 packages/react/src/class-names/index.js.flow delete mode 100644 packages/react/src/css-map/index.js.flow delete mode 100644 packages/react/src/css-map/pseudos.js.flow delete mode 100644 packages/react/src/css/__tests__/types.test.js.flow delete mode 100644 packages/react/src/css/index.js.flow delete mode 100644 packages/react/src/index.js.flow delete mode 100644 packages/react/src/keyframes/__tests__/types.test.js.flow delete mode 100644 packages/react/src/keyframes/index.js.flow delete mode 100644 packages/react/src/runtime.js.flow delete mode 100644 packages/react/src/runtime/ac.js.flow delete mode 100644 packages/react/src/runtime/ax.js.flow delete mode 100644 packages/react/src/runtime/cache.js.flow delete mode 100644 packages/react/src/runtime/css-custom-property.js.flow delete mode 100644 packages/react/src/runtime/dev-warnings.js.flow delete mode 100644 packages/react/src/runtime/index.js.flow delete mode 100644 packages/react/src/runtime/is-server-environment.js.flow delete mode 100644 packages/react/src/runtime/sheet.js.flow delete mode 100644 packages/react/src/runtime/style-cache.js.flow delete mode 100644 packages/react/src/runtime/style.js.flow delete mode 100644 packages/react/src/runtime/types.js.flow delete mode 100644 packages/react/src/styled/__tests__/types.test.js.flow delete mode 100644 packages/react/src/styled/index.js.flow delete mode 100644 packages/react/src/types.js.flow delete mode 100644 packages/react/src/utils/error.js.flow delete mode 100755 scripts/flow-types.sh diff --git a/.changeset/purple-wolves-draw.md b/.changeset/purple-wolves-draw.md new file mode 100644 index 000000000..d751f4e75 --- /dev/null +++ b/.changeset/purple-wolves-draw.md @@ -0,0 +1,6 @@ +--- +'@compiled/react': minor +'@compiled/jest': minor +--- + +Remove Flow types as they are increasingly difficult to maintain diff --git a/.eslintrc.js b/.eslintrc.js index caea6bbae..171f9dd4d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,14 +1,6 @@ module.exports = { root: true, - ignorePatterns: [ - 'dist', - 'build', - 'flow-typed', - '*.d.ts', - 'babel-cjs.js', - 'babel-esm.js', - 'storybook-static', - ], + ignorePatterns: ['dist', 'build', '*.d.ts', 'babel-cjs.js', 'babel-esm.js', 'storybook-static'], overrides: [ { files: ['*.{js,jsx,ts,tsx}'], @@ -96,14 +88,6 @@ module.exports = { ], }, }, - { - files: ['*.js.flow'], - extends: ['plugin:flowtype/recommended'], - plugins: ['flowtype'], - rules: { - 'flowtype/generic-spacing': 'off', - }, - }, { files: ['*.json'], plugins: ['json-files'], diff --git a/.flowconfig b/.flowconfig deleted file mode 100644 index 0e3c8322a..000000000 --- a/.flowconfig +++ /dev/null @@ -1,29 +0,0 @@ -[ignore] - -[include] -packages/.*/*.js.flow - -[libs] - -[declarations] -/flow_typed/.* -.*/node_modules/.* - -[lints] -deprecated-utility=warn -unnecessary-optional-chain=warn -implicit-inexact-object=error -untyped-type-import=error - -[options] -exact_by_default=true - -[strict] -deprecated-type -deprecated-utility -nonstrict-import -sketchy-null -unclear-type -unsafe-getters-setters -untyped-import -untyped-type-import diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 9c8a24358..2ac52ef85 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -51,6 +51,3 @@ jobs: - name: Build webpack extracted example run: yarn build:webpack:extract - - - name: Compare committed flow types to generated - run: yarn flow-types compare diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index c11eee094..d63154dae 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -60,9 +60,6 @@ jobs: - name: Build source for remainder tests run: yarn build - - name: Run flow types validation - run: yarn flow-types validate - - name: Run import test run: yarn test:imports diff --git a/flow-typed/npm/jest_v26.x.x.js b/flow-typed/npm/jest_v26.x.x.js deleted file mode 100644 index 103e6e214..000000000 --- a/flow-typed/npm/jest_v26.x.x.js +++ /dev/null @@ -1,1190 +0,0 @@ -// flow-typed signature: ec1949e99980c0b12113832818d455c9 -// flow-typed version: 644a595e77/jest_v26.x.x/flow_>=v0.134.x - -type JestMockFn, TReturn> = { - (...args: TArguments): TReturn, - /** - * An object for introspecting mock calls - */ - mock: { - /** - * An array that represents all calls that have been made into this mock - * function. Each call is represented by an array of arguments that were - * passed during the call. - */ - calls: Array, - /** - * An array that contains all the object instances that have been - * instantiated from this mock function. - */ - instances: Array, - /** - * An array that contains all the object results that have been - * returned by this mock function call - */ - results: Array<{ - isThrow: boolean, - value: TReturn, - ... - }>, - ... - }, - /** - * Resets all information stored in the mockFn.mock.calls and - * mockFn.mock.instances arrays. Often this is useful when you want to clean - * up a mock's usage data between two assertions. - */ - mockClear(): void, - /** - * Resets all information stored in the mock. This is useful when you want to - * completely restore a mock back to its initial state. - */ - mockReset(): void, - /** - * Removes the mock and restores the initial implementation. This is useful - * when you want to mock functions in certain test cases and restore the - * original implementation in others. Beware that mockFn.mockRestore only - * works when mock was created with jest.spyOn. Thus you have to take care of - * restoration yourself when manually assigning jest.fn(). - */ - mockRestore(): void, - /** - * Accepts a function that should be used as the implementation of the mock. - * The mock itself will still record all calls that go into and instances - * that come from itself -- the only difference is that the implementation - * will also be executed when the mock is called. - */ - mockImplementation(fn: (...args: TArguments) => TReturn): JestMockFn, - /** - * Accepts a function that will be used as an implementation of the mock for - * one call to the mocked function. Can be chained so that multiple function - * calls produce different results. - */ - mockImplementationOnce(fn: (...args: TArguments) => TReturn): JestMockFn, - /** - * Accepts a string to use in test result output in place of "jest.fn()" to - * indicate which mock function is being referenced. - */ - mockName(name: string): JestMockFn, - /** - * Just a simple sugar function for returning `this` - */ - mockReturnThis(): void, - /** - * Accepts a value that will be returned whenever the mock function is called. - */ - mockReturnValue(value: TReturn): JestMockFn, - /** - * Sugar for only returning a value once inside your mock - */ - mockReturnValueOnce(value: TReturn): JestMockFn, - /** - * Sugar for jest.fn().mockImplementation(() => Promise.resolve(value)) - */ - mockResolvedValue(value: TReturn): JestMockFn>, - /** - * Sugar for jest.fn().mockImplementationOnce(() => Promise.resolve(value)) - */ - mockResolvedValueOnce(value: TReturn): JestMockFn>, - /** - * Sugar for jest.fn().mockImplementation(() => Promise.reject(value)) - */ - mockRejectedValue(value: TReturn): JestMockFn>, - /** - * Sugar for jest.fn().mockImplementationOnce(() => Promise.reject(value)) - */ - mockRejectedValueOnce(value: TReturn): JestMockFn>, - ... -}; - -type JestAsymmetricEqualityType = { - /** - * A custom Jasmine equality tester - */ - asymmetricMatch(value: mixed): boolean, - ... -}; - -type JestCallsType = { - allArgs(): mixed, - all(): mixed, - any(): boolean, - count(): number, - first(): mixed, - mostRecent(): mixed, - reset(): void, - ... -}; - -type JestClockType = { - install(): void, - mockDate(date: Date): void, - tick(milliseconds?: number): void, - uninstall(): void, - ... -}; - -type JestMatcherResult = { - message?: string | (() => string), - pass: boolean, - ... -}; - -type JestMatcher = ( - received: any, - ...actual: Array -) => JestMatcherResult | Promise; - -type JestPromiseType = { - /** - * Use rejects to unwrap the reason of a rejected promise so any other - * matcher can be chained. If the promise is fulfilled the assertion fails. - */ - rejects: JestExpectType, - /** - * Use resolves to unwrap the value of a fulfilled promise so any other - * matcher can be chained. If the promise is rejected the assertion fails. - */ - resolves: JestExpectType, - ... -}; - -/** - * Jest allows functions and classes to be used as test names in test() and - * describe() - */ -type JestTestName = string | Function; - -/** - * Plugin: jest-styled-components - */ - -type JestStyledComponentsMatcherValue = - | string - | JestAsymmetricEqualityType - | RegExp - | typeof undefined; - -type JestStyledComponentsMatcherOptions = { - media?: string, - modifier?: string, - supports?: string, - ... -}; - -type JestStyledComponentsMatchersType = { - toHaveStyleRule( - property: string, - value: JestStyledComponentsMatcherValue, - options?: JestStyledComponentsMatcherOptions - ): void, - ... -}; - -/** - * Plugin: jest-enzyme - */ -type EnzymeMatchersType = { - // 5.x - toBeEmpty(): void, - toBePresent(): void, - // 6.x - toBeChecked(): void, - toBeDisabled(): void, - toBeEmptyRender(): void, - toContainMatchingElement(selector: string): void, - toContainMatchingElements(n: number, selector: string): void, - toContainExactlyOneMatchingElement(selector: string): void, - toContainReact(element: React$Element): void, - toExist(): void, - toHaveClassName(className: string): void, - toHaveHTML(html: string): void, - toHaveProp: ((propKey: string, propValue?: any) => void) & ((props: { ... }) => void), - toHaveRef(refName: string): void, - toHaveState: ((stateKey: string, stateValue?: any) => void) & ((state: { ... }) => void), - toHaveStyle: ((styleKey: string, styleValue?: any) => void) & ((style: { ... }) => void), - toHaveTagName(tagName: string): void, - toHaveText(text: string): void, - toHaveValue(value: any): void, - toIncludeText(text: string): void, - toMatchElement( - element: React$Element, - options?: {| ignoreProps?: boolean, verbose?: boolean |} - ): void, - toMatchSelector(selector: string): void, - // 7.x - toHaveDisplayName(name: string): void, - ... -}; - -// DOM testing library extensions (jest-dom) -// https://github.com/testing-library/jest-dom -type DomTestingLibraryType = { - /** - * @deprecated - */ - toBeInTheDOM(container?: HTMLElement): void, - - // 4.x - toBeInTheDocument(): void, - toBeVisible(): void, - toBeEmpty(): void, - toBeDisabled(): void, - toBeEnabled(): void, - toBeInvalid(): void, - toBeRequired(): void, - toBeValid(): void, - toContainElement(element: HTMLElement | null): void, - toContainHTML(htmlText: string): void, - toHaveAttribute(attr: string, value?: any): void, - toHaveClass(...classNames: string[]): void, - toHaveFocus(): void, - toHaveFormValues(expectedValues: { [name: string]: any, ... }): void, - toHaveStyle(css: string | { [name: string]: any, ... }): void, - toHaveTextContent(text: string | RegExp, options?: {| normalizeWhitespace: boolean |}): void, - toHaveValue(value?: string | string[] | number): void, - - // 5.x - toHaveDisplayValue(value: string | string[]): void, - toBeChecked(): void, - toBeEmptyDOMElement(): void, - toBePartiallyChecked(): void, - toHaveDescription(text: string | RegExp): void, - ... -}; - -// Jest JQuery Matchers: https://github.com/unindented/custom-jquery-matchers -type JestJQueryMatchersType = { - toExist(): void, - toHaveLength(len: number): void, - toHaveId(id: string): void, - toHaveClass(className: string): void, - toHaveTag(tag: string): void, - toHaveAttr(key: string, val?: any): void, - toHaveProp(key: string, val?: any): void, - toHaveText(text: string | RegExp): void, - toHaveData(key: string, val?: any): void, - toHaveValue(val: any): void, - toHaveCss(css: { [key: string]: any, ... }): void, - toBeChecked(): void, - toBeDisabled(): void, - toBeEmpty(): void, - toBeHidden(): void, - toBeSelected(): void, - toBeVisible(): void, - toBeFocused(): void, - toBeInDom(): void, - toBeMatchedBy(sel: string): void, - toHaveDescendant(sel: string): void, - toHaveDescendantWithText(sel: string, text: string | RegExp): void, - ... -}; - -// Jest Extended Matchers: https://github.com/jest-community/jest-extended -type JestExtendedMatchersType = { - /** - * Note: Currently unimplemented - * Passing assertion - * - * @param {String} message - */ - // pass(message: string): void; - - /** - * Note: Currently unimplemented - * Failing assertion - * - * @param {String} message - */ - // fail(message: string): void; - - /** - * Use .toBeEmpty when checking if a String '', Array [] or Object {} is empty. - */ - toBeEmpty(): void, - /** - * Use .toBeOneOf when checking if a value is a member of a given Array. - * @param {Array.<*>} members - */ - toBeOneOf(members: any[]): void, - /** - * Use `.toBeNil` when checking a value is `null` or `undefined`. - */ - toBeNil(): void, - /** - * Use `.toSatisfy` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean`. - * @param {Function} predicate - */ - toSatisfy(predicate: (n: any) => boolean): void, - /** - * Use `.toBeArray` when checking if a value is an `Array`. - */ - toBeArray(): void, - /** - * Use `.toBeArrayOfSize` when checking if a value is an `Array` of size x. - * @param {Number} x - */ - toBeArrayOfSize(x: number): void, - /** - * Use `.toIncludeAllMembers` when checking if an `Array` contains all of the same members of a given set. - * @param {Array.<*>} members - */ - toIncludeAllMembers(members: any[]): void, - /** - * Use `.toIncludeAnyMembers` when checking if an `Array` contains any of the members of a given set. - * @param {Array.<*>} members - */ - toIncludeAnyMembers(members: any[]): void, - /** - * Use `.toSatisfyAll` when you want to use a custom matcher by supplying a predicate function that returns a `Boolean` for all values in an array. - * @param {Function} predicate - */ - toSatisfyAll(predicate: (n: any) => boolean): void, - /** - * Use `.toBeBoolean` when checking if a value is a `Boolean`. - */ - toBeBoolean(): void, - /** - * Use `.toBeTrue` when checking a value is equal (===) to `true`. - */ - toBeTrue(): void, - /** - * Use `.toBeFalse` when checking a value is equal (===) to `false`. - */ - toBeFalse(): void, - /** - * Use .toBeDate when checking if a value is a Date. - */ - toBeDate(): void, - /** - * Use `.toBeFunction` when checking if a value is a `Function`. - */ - toBeFunction(): void, - /** - * Use `.toHaveBeenCalledBefore` when checking if a `Mock` was called before another `Mock`. - * - * Note: Required Jest version >22 - * Note: Your mock functions will have to be asynchronous to cause the timestamps inside of Jest to occur in a differentJS event loop, otherwise the mock timestamps will all be the same - * - * @param {Mock} mock - */ - toHaveBeenCalledBefore(mock: JestMockFn): void, - /** - * Use `.toBeNumber` when checking if a value is a `Number`. - */ - toBeNumber(): void, - /** - * Use `.toBeNaN` when checking a value is `NaN`. - */ - toBeNaN(): void, - /** - * Use `.toBeFinite` when checking if a value is a `Number`, not `NaN` or `Infinity`. - */ - toBeFinite(): void, - /** - * Use `.toBePositive` when checking if a value is a positive `Number`. - */ - toBePositive(): void, - /** - * Use `.toBeNegative` when checking if a value is a negative `Number`. - */ - toBeNegative(): void, - /** - * Use `.toBeEven` when checking if a value is an even `Number`. - */ - toBeEven(): void, - /** - * Use `.toBeOdd` when checking if a value is an odd `Number`. - */ - toBeOdd(): void, - /** - * Use `.toBeWithin` when checking if a number is in between the given bounds of: start (inclusive) and end (exclusive). - * - * @param {Number} start - * @param {Number} end - */ - toBeWithin(start: number, end: number): void, - /** - * Use `.toBeObject` when checking if a value is an `Object`. - */ - toBeObject(): void, - /** - * Use `.toContainKey` when checking if an object contains the provided key. - * - * @param {String} key - */ - toContainKey(key: string): void, - /** - * Use `.toContainKeys` when checking if an object has all of the provided keys. - * - * @param {Array.} keys - */ - toContainKeys(keys: string[]): void, - /** - * Use `.toContainAllKeys` when checking if an object only contains all of the provided keys. - * - * @param {Array.} keys - */ - toContainAllKeys(keys: string[]): void, - /** - * Use `.toContainAnyKeys` when checking if an object contains at least one of the provided keys. - * - * @param {Array.} keys - */ - toContainAnyKeys(keys: string[]): void, - /** - * Use `.toContainValue` when checking if an object contains the provided value. - * - * @param {*} value - */ - toContainValue(value: any): void, - /** - * Use `.toContainValues` when checking if an object contains all of the provided values. - * - * @param {Array.<*>} values - */ - toContainValues(values: any[]): void, - /** - * Use `.toContainAllValues` when checking if an object only contains all of the provided values. - * - * @param {Array.<*>} values - */ - toContainAllValues(values: any[]): void, - /** - * Use `.toContainAnyValues` when checking if an object contains at least one of the provided values. - * - * @param {Array.<*>} values - */ - toContainAnyValues(values: any[]): void, - /** - * Use `.toContainEntry` when checking if an object contains the provided entry. - * - * @param {Array.} entry - */ - toContainEntry(entry: [string, string]): void, - /** - * Use `.toContainEntries` when checking if an object contains all of the provided entries. - * - * @param {Array.>} entries - */ - toContainEntries(entries: [string, string][]): void, - /** - * Use `.toContainAllEntries` when checking if an object only contains all of the provided entries. - * - * @param {Array.>} entries - */ - toContainAllEntries(entries: [string, string][]): void, - /** - * Use `.toContainAnyEntries` when checking if an object contains at least one of the provided entries. - * - * @param {Array.>} entries - */ - toContainAnyEntries(entries: [string, string][]): void, - /** - * Use `.toBeExtensible` when checking if an object is extensible. - */ - toBeExtensible(): void, - /** - * Use `.toBeFrozen` when checking if an object is frozen. - */ - toBeFrozen(): void, - /** - * Use `.toBeSealed` when checking if an object is sealed. - */ - toBeSealed(): void, - /** - * Use `.toBeString` when checking if a value is a `String`. - */ - toBeString(): void, - /** - * Use `.toEqualCaseInsensitive` when checking if a string is equal (===) to another ignoring the casing of both strings. - * - * @param {String} string - */ - toEqualCaseInsensitive(string: string): void, - /** - * Use `.toStartWith` when checking if a `String` starts with a given `String` prefix. - * - * @param {String} prefix - */ - toStartWith(prefix: string): void, - /** - * Use `.toEndWith` when checking if a `String` ends with a given `String` suffix. - * - * @param {String} suffix - */ - toEndWith(suffix: string): void, - /** - * Use `.toInclude` when checking if a `String` includes the given `String` substring. - * - * @param {String} substring - */ - toInclude(substring: string): void, - /** - * Use `.toIncludeRepeated` when checking if a `String` includes the given `String` substring the correct number of times. - * - * @param {String} substring - * @param {Number} times - */ - toIncludeRepeated(substring: string, times: number): void, - /** - * Use `.toIncludeMultiple` when checking if a `String` includes all of the given substrings. - * - * @param {Array.} substring - */ - toIncludeMultiple(substring: string[]): void, - ... -}; - -// Diffing snapshot utility for Jest (snapshot-diff) -// https://github.com/jest-community/snapshot-diff -type SnapshotDiffType = { - /** - * Compare the difference between the actual in the `expect()` - * vs the object inside `valueB` with some extra options. - */ - toMatchDiffSnapshot( - valueB: any, - options?: {| - expand?: boolean, - colors?: boolean, - contextLines?: number, - stablePatchmarks?: boolean, - aAnnotation?: string, - bAnnotation?: string, - |}, - testName?: string - ): void, - ... -}; - -interface JestExpectType { - not: JestExpectType & - EnzymeMatchersType & - DomTestingLibraryType & - JestJQueryMatchersType & - JestStyledComponentsMatchersType & - JestExtendedMatchersType & - SnapshotDiffType; - /** - * If you have a mock function, you can use .lastCalledWith to test what - * arguments it was last called with. - */ - lastCalledWith(...args: Array): void; - /** - * toBe just checks that a value is what you expect. It uses === to check - * strict equality. - */ - toBe(value: any): void; - /** - * Use .toBeCalledWith to ensure that a mock function was called with - * specific arguments. - */ - toBeCalledWith(...args: Array): void; - /** - * Using exact equality with floating point numbers is a bad idea. Rounding - * means that intuitive things fail. - */ - toBeCloseTo(num: number, delta: any): void; - /** - * Use .toBeDefined to check that a variable is not undefined. - */ - toBeDefined(): void; - /** - * Use .toBeFalsy when you don't care what a value is, you just want to - * ensure a value is false in a boolean context. - */ - toBeFalsy(): void; - /** - * To compare floating point numbers, you can use toBeGreaterThan. - */ - toBeGreaterThan(number: number): void; - /** - * To compare floating point numbers, you can use toBeGreaterThanOrEqual. - */ - toBeGreaterThanOrEqual(number: number): void; - /** - * To compare floating point numbers, you can use toBeLessThan. - */ - toBeLessThan(number: number): void; - /** - * To compare floating point numbers, you can use toBeLessThanOrEqual. - */ - toBeLessThanOrEqual(number: number): void; - /** - * Use .toBeInstanceOf(Class) to check that an object is an instance of a - * class. - */ - toBeInstanceOf(cls: Class<*>): void; - /** - * .toBeNull() is the same as .toBe(null) but the error messages are a bit - * nicer. - */ - toBeNull(): void; - /** - * Use .toBeTruthy when you don't care what a value is, you just want to - * ensure a value is true in a boolean context. - */ - toBeTruthy(): void; - /** - * Use .toBeUndefined to check that a variable is undefined. - */ - toBeUndefined(): void; - /** - * Use .toContain when you want to check that an item is in a list. For - * testing the items in the list, this uses ===, a strict equality check. - */ - toContain(item: any): void; - /** - * Use .toContainEqual when you want to check that an item is in a list. For - * testing the items in the list, this matcher recursively checks the - * equality of all fields, rather than checking for object identity. - */ - toContainEqual(item: any): void; - /** - * Use .toEqual when you want to check that two objects have the same value. - * This matcher recursively checks the equality of all fields, rather than - * checking for object identity. - */ - toEqual(value: any): void; - /** - * Use .toHaveBeenCalled to ensure that a mock function got called. - */ - toHaveBeenCalled(): void; - toBeCalled(): void; - /** - * Use .toHaveBeenCalledTimes to ensure that a mock function got called exact - * number of times. - */ - toHaveBeenCalledTimes(number: number): void; - toBeCalledTimes(number: number): void; - /** - * - */ - toHaveBeenNthCalledWith(nthCall: number, ...args: Array): void; - nthCalledWith(nthCall: number, ...args: Array): void; - /** - * - */ - toHaveReturned(): void; - toReturn(): void; - /** - * - */ - toHaveReturnedTimes(number: number): void; - toReturnTimes(number: number): void; - /** - * - */ - toHaveReturnedWith(value: any): void; - toReturnWith(value: any): void; - /** - * - */ - toHaveLastReturnedWith(value: any): void; - lastReturnedWith(value: any): void; - /** - * - */ - toHaveNthReturnedWith(nthCall: number, value: any): void; - nthReturnedWith(nthCall: number, value: any): void; - /** - * Use .toHaveBeenCalledWith to ensure that a mock function was called with - * specific arguments. - */ - toHaveBeenCalledWith(...args: Array): void; - toBeCalledWith(...args: Array): void; - /** - * Use .toHaveBeenLastCalledWith to ensure that a mock function was last called - * with specific arguments. - */ - toHaveBeenLastCalledWith(...args: Array): void; - lastCalledWith(...args: Array): void; - /** - * Check that an object has a .length property and it is set to a certain - * numeric value. - */ - toHaveLength(number: number): void; - /** - * - */ - toHaveProperty(propPath: string | $ReadOnlyArray, value?: any): void; - /** - * Use .toMatch to check that a string matches a regular expression or string. - */ - toMatch(regexpOrString: RegExp | string): void; - /** - * Use .toMatchObject to check that a javascript object matches a subset of the properties of an object. - */ - toMatchObject(object: Object | Array): void; - /** - * Use .toStrictEqual to check that a javascript object matches a subset of the properties of an object. - */ - toStrictEqual(value: any): void; - /** - * This ensures that an Object matches the most recent snapshot. - */ - toMatchSnapshot(propertyMatchers?: any, name?: string): void; - /** - * This ensures that an Object matches the most recent snapshot. - */ - toMatchSnapshot(name: string): void; - - toMatchInlineSnapshot(snapshot?: string): void; - toMatchInlineSnapshot(propertyMatchers?: any, snapshot?: string): void; - /** - * Use .toThrow to test that a function throws when it is called. - * If you want to test that a specific error gets thrown, you can provide an - * argument to toThrow. The argument can be a string for the error message, - * a class for the error, or a regex that should match the error. - * - * Alias: .toThrowError - */ - toThrow(message?: string | Error | Class | RegExp): void; - toThrowError(message?: string | Error | Class | RegExp): void; - /** - * Use .toThrowErrorMatchingSnapshot to test that a function throws a error - * matching the most recent snapshot when it is called. - */ - toThrowErrorMatchingSnapshot(): void; - toThrowErrorMatchingInlineSnapshot(snapshot?: string): void; -} - -type JestObjectType = { - /** - * Disables automatic mocking in the module loader. - * - * After this method is called, all `require()`s will return the real - * versions of each module (rather than a mocked version). - */ - disableAutomock(): JestObjectType, - /** - * An un-hoisted version of disableAutomock - */ - autoMockOff(): JestObjectType, - /** - * Enables automatic mocking in the module loader. - */ - enableAutomock(): JestObjectType, - /** - * An un-hoisted version of enableAutomock - */ - autoMockOn(): JestObjectType, - /** - * Clears the mock.calls and mock.instances properties of all mocks. - * Equivalent to calling .mockClear() on every mocked function. - */ - clearAllMocks(): JestObjectType, - /** - * Resets the state of all mocks. Equivalent to calling .mockReset() on every - * mocked function. - */ - resetAllMocks(): JestObjectType, - /** - * Restores all mocks back to their original value. - */ - restoreAllMocks(): JestObjectType, - /** - * Removes any pending timers from the timer system. - */ - clearAllTimers(): void, - /** - * Returns the number of fake timers still left to run. - */ - getTimerCount(): number, - /** - * Set the current system time used by fake timers. - * Simulates a user changing the system clock while your program is running. - * It affects the current time but it does not in itself cause - * e.g. timers to fire; they will fire exactly as they would have done - * without the call to jest.setSystemTime(). - */ - setSystemTime(now?: number | Date): void, - /** - * The same as `mock` but not moved to the top of the expectation by - * babel-jest. - */ - doMock(moduleName: string, moduleFactory?: any): JestObjectType, - /** - * The same as `unmock` but not moved to the top of the expectation by - * babel-jest. - */ - dontMock(moduleName: string): JestObjectType, - /** - * Returns a new, unused mock function. Optionally takes a mock - * implementation. - */ - fn, TReturn>( - implementation?: (...args: TArguments) => TReturn - ): JestMockFn, - /** - * Determines if the given function is a mocked function. - */ - isMockFunction(fn: Function): boolean, - /** - * Alias of `createMockFromModule`. - */ - genMockFromModule(moduleName: string): any, - /** - * Given the name of a module, use the automatic mocking system to generate a - * mocked version of the module for you. - */ - createMockFromModule(moduleName: string): any, - /** - * Mocks a module with an auto-mocked version when it is being required. - * - * The second argument can be used to specify an explicit module factory that - * is being run instead of using Jest's automocking feature. - * - * The third argument can be used to create virtual mocks -- mocks of modules - * that don't exist anywhere in the system. - */ - mock(moduleName: string, moduleFactory?: any, options?: Object): JestObjectType, - /** - * Returns the actual module instead of a mock, bypassing all checks on - * whether the module should receive a mock implementation or not. - */ - requireActual(m: $Flow$ModuleRef | string): T, - /** - * Returns a mock module instead of the actual module, bypassing all checks - * on whether the module should be required normally or not. - */ - requireMock(moduleName: string): any, - /** - * Resets the module registry - the cache of all required modules. This is - * useful to isolate modules where local state might conflict between tests. - */ - resetModules(): JestObjectType, - /** - * Creates a sandbox registry for the modules that are loaded inside the - * callback function. This is useful to isolate specific modules for every - * test so that local module state doesn't conflict between tests. - */ - isolateModules(fn: () => void): JestObjectType, - /** - * Exhausts the micro-task queue (usually interfaced in node via - * process.nextTick). - */ - runAllTicks(): void, - /** - * Exhausts the macro-task queue (i.e., all tasks queued by setTimeout(), - * setInterval(), and setImmediate()). - */ - runAllTimers(): void, - /** - * Exhausts all tasks queued by setImmediate(). - */ - runAllImmediates(): void, - /** - * Executes only the macro task queue (i.e. all tasks queued by setTimeout() - * or setInterval() and setImmediate()). - */ - advanceTimersByTime(msToRun: number): void, - /** - * Executes only the macro task queue (i.e. all tasks queued by setTimeout() - * or setInterval() and setImmediate()). - * - * Renamed to `advanceTimersByTime`. - */ - runTimersToTime(msToRun: number): void, - /** - * Executes only the macro-tasks that are currently pending (i.e., only the - * tasks that have been queued by setTimeout() or setInterval() up to this - * point) - */ - runOnlyPendingTimers(): void, - /** - * Explicitly supplies the mock object that the module system should return - * for the specified module. Note: It is recommended to use jest.mock() - * instead. - */ - setMock(moduleName: string, moduleExports: any): JestObjectType, - /** - * Indicates that the module system should never return a mocked version of - * the specified module from require() (e.g. that it should always return the - * real module). - */ - unmock(moduleName: string): JestObjectType, - /** - * Instructs Jest to use fake versions of the standard timer functions - * (setTimeout, setInterval, clearTimeout, clearInterval, nextTick, - * setImmediate and clearImmediate). - */ - useFakeTimers(mode?: 'modern' | 'legacy'): JestObjectType, - /** - * Instructs Jest to use the real versions of the standard timer functions. - */ - useRealTimers(): JestObjectType, - /** - * Creates a mock function similar to jest.fn but also tracks calls to - * object[methodName]. - */ - spyOn(object: Object, methodName: string, accessType?: 'get' | 'set'): JestMockFn, - /** - * Set the default timeout interval for tests and before/after hooks in milliseconds. - * Note: The default timeout interval is 5 seconds if this method is not called. - */ - setTimeout(timeout: number): JestObjectType, - ... -}; - -type JestSpyType = { calls: JestCallsType, ... }; - -type JestDoneFn = {| - (error?: Error): void, - fail: (error: Error) => void, -|}; - -/** Runs this function after every test inside this context */ -declare function afterEach(fn: (done: JestDoneFn) => ?Promise, timeout?: number): void; -/** Runs this function before every test inside this context */ -declare function beforeEach(fn: (done: JestDoneFn) => ?Promise, timeout?: number): void; -/** Runs this function after all tests have finished inside this context */ -declare function afterAll(fn: (done: JestDoneFn) => ?Promise, timeout?: number): void; -/** Runs this function before any tests have started inside this context */ -declare function beforeAll(fn: (done: JestDoneFn) => ?Promise, timeout?: number): void; - -/** A context for grouping tests together */ -declare var describe: { - /** - * Creates a block that groups together several related tests in one "test suite" - */ - (name: JestTestName, fn: () => void): void, - /** - * Only run this describe block - */ - only(name: JestTestName, fn: () => void): void, - /** - * Skip running this describe block - */ - skip(name: JestTestName, fn: () => void): void, - /** - * each runs this test against array of argument arrays per each run - * - * @param {table} table of Test - */ - each( - ...table: Array | mixed> | [Array, string] - ): (name: JestTestName, fn?: (...args: Array) => ?Promise, timeout?: number) => void, - ... -}; - -/** An individual test unit */ -declare var it: { - /** - * An individual test unit - * - * @param {JestTestName} Name of Test - * @param {Function} Test - * @param {number} Timeout for the test, in milliseconds. - */ - (name: JestTestName, fn?: (done: JestDoneFn) => ?Promise, timeout?: number): void, - /** - * Only run this test - * - * @param {JestTestName} Name of Test - * @param {Function} Test - * @param {number} Timeout for the test, in milliseconds. - */ - only: {| - (name: JestTestName, fn?: (done: JestDoneFn) => ?Promise, timeout?: number): void, - each( - ...table: Array | mixed> | [Array, string] - ): ( - name: JestTestName, - fn?: (...args: Array) => ?Promise, - timeout?: number - ) => void, - |}, - /** - * Skip running this test - * - * @param {JestTestName} Name of Test - * @param {Function} Test - * @param {number} Timeout for the test, in milliseconds. - */ - skip: {| - (name: JestTestName, fn?: (done: JestDoneFn) => ?Promise, timeout?: number): void, - each( - ...table: Array | mixed> | [Array, string] - ): ( - name: JestTestName, - fn?: (...args: Array) => ?Promise, - timeout?: number - ) => void, - |}, - /** - * Highlight planned tests in the summary output - * - * @param {String} Name of Test to do - */ - todo(name: string): void, - /** - * Run the test concurrently - * - * @param {JestTestName} Name of Test - * @param {Function} Test - * @param {number} Timeout for the test, in milliseconds. - */ - concurrent( - name: JestTestName, - fn?: (done: JestDoneFn) => ?Promise, - timeout?: number - ): void, - /** - * each runs this test against array of argument arrays per each run - * - * @param {table} table of Test - */ - each( - ...table: Array | mixed> | [Array, string] - ): (name: JestTestName, fn?: (...args: Array) => ?Promise, timeout?: number) => void, - ... -}; - -declare function fit( - name: JestTestName, - fn: (done: JestDoneFn) => ?Promise, - timeout?: number -): void; -/** An individual test unit */ -declare var test: typeof it; -/** A disabled group of tests */ -declare var xdescribe: typeof describe; -/** A focused group of tests */ -declare var fdescribe: typeof describe; -/** A disabled individual test */ -declare var xit: typeof it; -/** A disabled individual test */ -declare var xtest: typeof it; - -type JestPrettyFormatColors = { - comment: { - close: string, - open: string, - ... - }, - content: { - close: string, - open: string, - ... - }, - prop: { - close: string, - open: string, - ... - }, - tag: { - close: string, - open: string, - ... - }, - value: { - close: string, - open: string, - ... - }, - ... -}; - -type JestPrettyFormatIndent = (string) => string; -type JestPrettyFormatRefs = Array; -type JestPrettyFormatPrint = (any) => string; -type JestPrettyFormatStringOrNull = string | null; - -type JestPrettyFormatOptions = {| - callToJSON: boolean, - edgeSpacing: string, - escapeRegex: boolean, - highlight: boolean, - indent: number, - maxDepth: number, - min: boolean, - plugins: JestPrettyFormatPlugins, - printFunctionName: boolean, - spacing: string, - theme: {| - comment: string, - content: string, - prop: string, - tag: string, - value: string, - |}, -|}; - -type JestPrettyFormatPlugin = { - print: ( - val: any, - serialize: JestPrettyFormatPrint, - indent: JestPrettyFormatIndent, - opts: JestPrettyFormatOptions, - colors: JestPrettyFormatColors - ) => string, - test: (any) => boolean, - ... -}; - -type JestPrettyFormatPlugins = Array; - -/** The expect function is used every time you want to test a value */ -declare var expect: { - /** The object that you want to make assertions against */ - ( - value: any - ): JestExpectType & - JestPromiseType & - EnzymeMatchersType & - DomTestingLibraryType & - JestJQueryMatchersType & - JestStyledComponentsMatchersType & - JestExtendedMatchersType & - SnapshotDiffType, - /** Add additional Jasmine matchers to Jest's roster */ - extend(matchers: { [name: string]: JestMatcher, ... }): void, - /** Add a module that formats application-specific data structures. */ - addSnapshotSerializer(pluginModule: JestPrettyFormatPlugin): void, - assertions(expectedAssertions: number): void, - hasAssertions(): void, - any(value: mixed): JestAsymmetricEqualityType, - anything(): any, - arrayContaining(value: Array): Array, - objectContaining(value: Object): Object, - /** Matches any received string that contains the exact expected string. */ - stringContaining(value: string): string, - stringMatching(value: string | RegExp): string, - not: { - arrayContaining: (value: $ReadOnlyArray) => Array, - objectContaining: (value: { ... }) => Object, - stringContaining: (value: string) => string, - stringMatching: (value: string | RegExp) => string, - ... - }, - ... -}; - -// TODO handle return type -// http://jasmine.github.io/2.4/introduction.html#section-Spies -declare function spyOn(value: mixed, method: string): Object; - -/** Holds all functions related to manipulating test runner */ -declare var jest: JestObjectType; - -/** - * The global Jasmine object, this is generally not exposed as the public API, - * using features inside here could break in later versions of Jest. - */ -declare var jasmine: { - DEFAULT_TIMEOUT_INTERVAL: number, - any(value: mixed): JestAsymmetricEqualityType, - anything(): any, - arrayContaining(value: Array): Array, - clock(): JestClockType, - createSpy(name: string): JestSpyType, - createSpyObj( - baseName: string, - methodNames: Array - ): { [methodName: string]: JestSpyType, ... }, - objectContaining(value: Object): Object, - stringMatching(value: string): string, - ... -}; diff --git a/flow-typed/tokens.js b/flow-typed/tokens.js deleted file mode 100644 index 0140481aa..000000000 --- a/flow-typed/tokens.js +++ /dev/null @@ -1,13 +0,0 @@ -declare var layers: { - modal: () => number, -}; - -declare type Tokens = typeof tokens; -declare type CSSTokenMap = { - 'elevation.surface': 'var(--ds-surface)', -}; -declare var tokens: { - +'elevation.surface': '--ds-surface', -}; -declare type CSSToken = $ElementType>; -declare function token>(path: T, fallback?: string): $ElementType; diff --git a/package.json b/package.json index 45ff9fcd4..87792a9bd 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ ], "scripts": { "benchmark": "jest --config benchmark.config.json", - "build": "yarn build:babel-fixture && yarn build:browser && yarn build:cjs && yarn build:esm && yarn flow-types build && yarn postbuild", + "build": "yarn build:babel-fixture && yarn build:browser && yarn build:cjs && yarn build:esm && yarn postbuild", "postbuild": "scripts/postbuild.sh", "build:babel-fixture": "yarn workspace @compiled/babel-component-fixture build && yarn workspace @compiled/babel-component-extracted-fixture build", "build:browser": "ttsc --build packages/tsconfig.browser.json", @@ -29,7 +29,6 @@ "clean:node-modules": "rm -rf node_modules/.cache", "clean:parcel-cache": "rm -rf .parcel-cache/", "clean:ts-cache": "find . -name \"*.tsbuildinfo\" -type f -delete", - "flow-types": "scripts/flow-types.sh", "postinstall": "scripts/postinstall.sh", "lint": "eslint --config .eslintrc.js --ext js,json,jsx,ts,tsx .", "lint:fix": "yarn lint -- --fix", @@ -87,13 +86,10 @@ "@typescript-eslint/parser": "^5.59.8", "babel-loader": "^9.1.2", "eslint": "^8.44.0", - "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.27.5", "eslint-plugin-json-files": "^2.2.0", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", - "flow-bin": "^0.183.0", - "flowgen": "^1.21.0", "husky": "^4.3.8", "jest": "^29.4.3", "jest-environment-jsdom": "^29.4.3", diff --git a/packages/jest/src/index.js.flow b/packages/jest/src/index.js.flow deleted file mode 100644 index 5a9126214..000000000 --- a/packages/jest/src/index.js.flow +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { MatchFilter } from './types'; -declare module 'global' { - declare interface jest$Matchers { - toHaveCompiledCss( - properties: { - [key: string]: string, - }, - matchFilter?: MatchFilter - ): R; - toHaveCompiledCss(property: string, value: string, matchFilter?: MatchFilter): R; - } -} -declare export { toHaveCompiledCss } from './matchers'; diff --git a/packages/jest/src/matchers.js.flow b/packages/jest/src/matchers.js.flow deleted file mode 100644 index 485f85952..000000000 --- a/packages/jest/src/matchers.js.flow +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Flowtype definitions for matchers - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { MatchFilter } from './types'; -declare type Arg = [ - { - [key: string]: string, - }, - MatchFilter | void -]; -declare export function toHaveCompiledCss( - element: HTMLElement, - ...args: [Arg | string, string, MatchFilter | void] -): JestMatcherResult; diff --git a/packages/jest/src/types.js.flow b/packages/jest/src/types.js.flow deleted file mode 100644 index cad7999c6..000000000 --- a/packages/jest/src/types.js.flow +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Flowtype definitions for types - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { Pseudos } from 'csstype'; -/** - * {} is used to enabled the compiler to not reduce Target down to a string. - * This keeps both Pseduos intellisense working as well as then allowing us to define anything. - * See: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-460346421 - */ -declare type AnyTarget = { - ...string, - ...{ - _?: empty, - ... - }, -}; -declare type Target = Pseudos | AnyTarget; -export interface MatchFilter { - target?: Target; - media?: string; -} diff --git a/packages/react/src/class-names/__tests__/types.test.js.flow b/packages/react/src/class-names/__tests__/types.test.js.flow deleted file mode 100644 index 1e3675836..000000000 --- a/packages/react/src/class-names/__tests__/types.test.js.flow +++ /dev/null @@ -1,35 +0,0 @@ -// @flow strict-local -import React, { type Node } from 'react'; -import { ClassNames, type CssType } from '@compiled/react'; - -// Object call expression -({ children }: { children: Node }): React$Element => ( - {({ css }) => {children}} -); - -// Tagged template expression -({ children }: { children: Node }): React$Element => ( - - {({ css }) => ( - - {children} - - )} - -); - -// Array -({ children }: { children: Node }): React$Element => { - return ( - - {({ css }) => ( - []))}> - {children} - - )} - - ); -}; diff --git a/packages/react/src/class-names/index.js.flow b/packages/react/src/class-names/index.js.flow deleted file mode 100644 index 8a7be024e..000000000 --- a/packages/react/src/class-names/index.js.flow +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { Node } from 'react'; -import type { CssType, CssFunction } from '../types'; -export type ObjectInterpolation = CssType | CssType[]; -export type TemplateStringsInterpolation = CssFunction | CssFunction[]; -declare interface CssSignature { - (...interpolations: ObjectInterpolation[]): string; - ( - template: $ReadOnlyArray, - ...interpolations: TemplateStringsInterpolation[] - ): string; -} -export interface ClassNamesProps { - children: (opts: { - css: CssSignature, - style: $Shape, - ... - }) => Node; -} -/** - * ## Class names - * - * Use a component where styles are not necessarily used on a JSX element. - * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names). - * - * ### Style with objects - * @example ``` - * - * {({ css, style }) => children({ className: css({ fontSize: 12 }) })} - * - * ``` - * - * ### Style with template literals - * @example ``` - * - * {({ css, style }) => children({ className: css`font-size: 12px;` })} - * - * ``` - * - * ### Compose styles with arrays - * @example ``` - * - * {({ css, style }) => - * children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })} - * - * ``` - */ -declare export function ClassNames(x: ClassNamesProps): React$Node; diff --git a/packages/react/src/css-map/index.js.flow b/packages/react/src/css-map/index.js.flow deleted file mode 100644 index 597642e55..000000000 --- a/packages/react/src/css-map/index.js.flow +++ /dev/null @@ -1,125 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { Properties, AtRules } from 'csstype'; -import type { Pseudos } from './pseudos'; -/** - * These are all the CSS props that will exist. - * Only 'string' and 'number' are valid CSS values. - * @example ``` - * const style: CssProps = { - * color: 'red', - * margin: 10, - * }; - * ``` - */ -declare type CssProps = $ReadOnly>; -declare type AllPseudos = $ObjMapi< - { [k: Pseudos]: any }, - (key) => { ...CssProps, ...AllPseudos } ->; -declare type AtRuleSecondHalf = string; -declare type WhitelistedAtRule = $ObjMapi< - { [k: AtRules]: any }, - (atRuleFirstHalf) => $ObjMapi< - { [k: AtRuleSecondHalf]: any }, - (atRuleSecondHalf) => { - ...CssProps, - ...AllPseudos, - ...WhitelistedAtRule, - } - > ->; -declare type WhitelistedSelector = { ...AllPseudos, ...WhitelistedAtRule }; -declare type ExtendedSelector = { - ...{ - [key: string]: CssProps | ExtendedSelector, - }, - ...{ - /** - * Using `selectors` is not valid here - you cannot nest a `selectors` object - * inside another `selectors` object. - */ - selectors?: empty, - ... - }, -}; -declare type ExtendedSelectors = { - /** - * Provides a way to use selectors that have not been explicitly whitelisted - * in cssMap. - * - * This does not provide any type-checking for the selectors (thus allowing - * more expressive selectors), though this is more flexible and allows - * nesting selectors in other selectors. - * - * A selector defined both outside of the `selectors` object and - * inside the `selectors` object is a runtime error. - * - * Note that you cannot nest a `selectors` object inside another - * `selectors` object. - * - * Only use if absolutely necessary. - * @example ``` - * const myMap = cssMap({ - * danger: { - * color: 'red', - * '@media': { - * '(min-width: 100px)': { - * font-size: '1.5em', - * }, - * }, - * '&:hover': { - * color: 'pink', - * }, - * selectors: { - * '&:not(:active)': { - * backgroundColor: 'yellow', - * } - * }, - * }, - * success: { - * color: 'green', - * '@media': { - * '(min-width: 100px)': { - * font-size: '1.3em', - * }, - * }, - * '&:hover': { - * color: '#8f8', - * }, - * selectors: { - * '&:not(:active)': { - * backgroundColor: 'white', - * } - * }, - * }, - * }); - * ``` - */ - selectors?: ExtendedSelector, - ... -}; -declare type Variants = { - [key: VariantName]: { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors }, -}; -declare type ReturnType = { [key: VariantName]: CssProps }; -/** - * ## cssMap - * - * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs. - * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap). - * @example ``` - * const borderStyleMap = cssMap({ - * none: { borderStyle: 'none' }, - * solid: { borderStyle: 'solid' }, - * }); - * const Component = ({ borderStyle }) =>
- * - * - * ``` - */ -declare export default function cssMap(_styles: Variants): $ReadOnly>; diff --git a/packages/react/src/css-map/pseudos.js.flow b/packages/react/src/css-map/pseudos.js.flow deleted file mode 100644 index 252b77828..000000000 --- a/packages/react/src/css-map/pseudos.js.flow +++ /dev/null @@ -1,57 +0,0 @@ -/** - * Flowtype definitions for pseudos - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -export type Pseudos = - | '&::after' - | '&::backdrop' - | '&::before' - | '&::cue' - | '&::cue-region' - | '&::first-letter' - | '&::first-line' - | '&::grammar-error' - | '&::marker' - | '&::placeholder' - | '&::selection' - | '&::spelling-error' - | '&::target-text' - | '&::view-transition' - | '&:active' - | '&:autofill' - | '&:blank' - | '&:checked' - | '&:default' - | '&:defined' - | '&:disabled' - | '&:empty' - | '&:enabled' - | '&:first' - | '&:focus' - | '&:focus-visible' - | '&:focus-within' - | '&:fullscreen' - | '&:hover' - | '&:in-range' - | '&:indeterminate' - | '&:invalid' - | '&:left' - | '&:link' - | '&:local-link' - | '&:optional' - | '&:out-of-range' - | '&:paused' - | '&:picture-in-picture' - | '&:placeholder-shown' - | '&:playing' - | '&:read-only' - | '&:read-write' - | '&:required' - | '&:right' - | '&:target' - | '&:user-invalid' - | '&:user-valid' - | '&:valid' - | '&:visited'; diff --git a/packages/react/src/css/__tests__/types.test.js.flow b/packages/react/src/css/__tests__/types.test.js.flow deleted file mode 100644 index 64b8ff3de..000000000 --- a/packages/react/src/css/__tests__/types.test.js.flow +++ /dev/null @@ -1,42 +0,0 @@ -// @flow strict-local -import React from 'react'; -import { css } from '@compiled/react'; - -// Tagged template expression -(): React$Element<'div'> => { - const styles = css` - color: red; - `; - return
red text
; -}; - -// Object call expression -(): React$Element<'div'> => { - const styles = css({ color: 'red' }); - return
red text
; -}; - -// Object call with function call -(): React$Element<'div'> => { - const styles = css({ - backgroundColor: token('elevation.surface', 'white'), - zIndex: layers.modal(), - }); - return
red text
; -}; - -// Media query selector -css({ - /* Style only for Google Chrome */ - '@media screen and (-webkit-min-device-pixel-ratio: 0)': { - wordBreak: 'break-word', - }, - /* Style only for Safari */ - '@media screen and (-webkit-transition)': { - wordBreak: 'break-word', - }, - /* Style only for Mozilla Firefox */ - '@-moz-document url-prefix()': { - overflowWrap: 'anywhere', - }, -}); diff --git a/packages/react/src/css/index.js.flow b/packages/react/src/css/index.js.flow deleted file mode 100644 index dbb8e2707..000000000 --- a/packages/react/src/css/index.js.flow +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { CSSProps, CssObject, CssFunction } from '../types'; -/** - * ## CSS - * - * Define styles that are statically typed and useable with other Compiled APIs. - * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css). - * - * ### Style with objects - * @example ``` - * const redText = css({ - * color: 'red', - * }); - * - *
- * ``` - * - * ### Style with template literals - * @example ``` - * const redText = css` - * color: red; - * `; - * - *
- * ``` - */ -declare export default function css( - styles: $ReadOnlyArray, - ...interpolations: CssFunction[] -): CSSProps; -declare export default function css(styles: CssObject | CssObject[]): CSSProps; diff --git a/packages/react/src/index.js.flow b/packages/react/src/index.js.flow deleted file mode 100644 index 06aab68db..000000000 --- a/packages/react/src/index.js.flow +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { CssFunction, CSSProps, CssType } from './types'; -export type { CSSProps, CssFunction, CssType }; -declare export { keyframes } from './keyframes'; -declare export { styled } from './styled'; -declare export { ClassNames } from './class-names'; -declare export { default as css } from './css'; -declare export { default as cssMap } from './css-map'; diff --git a/packages/react/src/keyframes/__tests__/types.test.js.flow b/packages/react/src/keyframes/__tests__/types.test.js.flow deleted file mode 100644 index dc44b994d..000000000 --- a/packages/react/src/keyframes/__tests__/types.test.js.flow +++ /dev/null @@ -1,31 +0,0 @@ -// @flow strict-local -import React from 'react'; -import { css, ClassNames, styled, keyframes } from '@compiled/react'; - -// Tagged template expression -(): React$Element<'div'> => { - const fadeOut = keyframes` - from { opacity: 1; } - to { opacity: 0; } - `; - return
hello world
; -}; - -// Object call expression -(): React$Element<'div'> => { - const fadeOut = keyframes({ - from: { - opacity: 1, - }, - to: { - opacity: 0, - }, - }); - return
hello world
; -}; - -// String call expression -(): React$Element<'div'> => { - const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }'); - return
hello world
; -}; diff --git a/packages/react/src/keyframes/index.js.flow b/packages/react/src/keyframes/index.js.flow deleted file mode 100644 index 2566f3a12..000000000 --- a/packages/react/src/keyframes/index.js.flow +++ /dev/null @@ -1,48 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { BasicTemplateInterpolations, CSSProps } from '../types'; -export type KeyframeSteps = string | { [key: string]: CSSProps }; -/** - * ## Keyframes - * - * Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation). - * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-keyframes). - * - * ### Style with objects - * @example ``` - * const fadeOut = keyframes({ - * from: { - * opacity: 1, - * }, - * to: { - * opacity: 0, - * }, - * }); - * - *
- * ``` - * - * ### Style with template literals - * @example ``` - * const fadeOut = keyframes` - * from { - * opacity: 1; - * } - * - * to { - * opacity: 0; - * } - * `; - * - *
- * ``` - */ -declare export function keyframes(steps: KeyframeSteps): string; -declare export function keyframes( - strings: $ReadOnlyArray, - ...interpolations: BasicTemplateInterpolations[] -): string; diff --git a/packages/react/src/runtime.js.flow b/packages/react/src/runtime.js.flow deleted file mode 100644 index d7a7cb691..000000000 --- a/packages/react/src/runtime.js.flow +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Flowtype definitions for runtime - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -declare export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index'; diff --git a/packages/react/src/runtime/ac.js.flow b/packages/react/src/runtime/ac.js.flow deleted file mode 100644 index dbc9f3889..000000000 --- a/packages/react/src/runtime/ac.js.flow +++ /dev/null @@ -1,56 +0,0 @@ -/** - * Flowtype definitions for ac - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -/** - * Memoize the result of ac so if it is called with the same args, it returns immediately. - * Also, to prevent useless React rerenders - */ -declare var cache: Map; -/** - * `ac` returns an instance of AtomicGroups. The instance holds the knowledge of Atomic Group so we can chain `ac`. - * e.g.
- */ -declare class AtomicGroups { - values: Map; - constructor(values: Map): this; - toString(): string; -} -/** - * Joins classes together and ensures atomic declarations of a single group exist. - * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore), - * where both `group` and `value` are hashes **four characters long**. - * Class names can be of any length, - * this function can take both atomic declarations and class names. - * - * Input: - * - * ``` - * ax(['_aaaabbbb', '_aaaacccc']) - * ``` - * - * Output: - * - * ``` - * '_aaaacccc' - * ``` - * @param classes - */ -declare export function ac( - classNames: (AtomicGroups | string | void | false)[] -): AtomicGroups | void; -declare export function memoizedAc( - classNames: (AtomicGroups | string | void | false)[] -): AtomicGroups | void; -declare var _default: typeof ac; -declare export default typeof _default; -/** - * Provide an opportunity to clear the cache to prevent memory leak. - */ -declare export function clearCache(): void; -/** - * Expose cache - */ -declare export function getCache(): typeof cache; diff --git a/packages/react/src/runtime/ax.js.flow b/packages/react/src/runtime/ax.js.flow deleted file mode 100644 index 8a5b32161..000000000 --- a/packages/react/src/runtime/ax.js.flow +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Flowtype definitions for ax - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -/** - * Joins classes together and ensures atomic declarations of a single group exist. - * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore), - * where both `group` and `value` are hashes **four characters long**. - * Class names can be of any length, - * this function can take both atomic declarations and class names. - * - * Input: - * - * ``` - * ax(['_aaaabbbb', '_aaaacccc']) - * ``` - * - * Output: - * - * ``` - * '_aaaacccc' - * ``` - * @param classes - */ -declare export default function ax(classNames: (string | void | false)[]): string | void; diff --git a/packages/react/src/runtime/cache.js.flow b/packages/react/src/runtime/cache.js.flow deleted file mode 100644 index 8ce5b389c..000000000 --- a/packages/react/src/runtime/cache.js.flow +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Flowtype definitions for cache - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -/** - * Returns `true` when caching should be disabled, else `false`. - * - * Any code within this check will be removed in the output bundles: - * - * ```js - * if (isCacheDisabled()) { - * // This code will be removed from the output bundles - * } - * ``` - */ -declare export var isCacheDisabled: () => boolean; diff --git a/packages/react/src/runtime/css-custom-property.js.flow b/packages/react/src/runtime/css-custom-property.js.flow deleted file mode 100644 index aa4b6b71f..000000000 --- a/packages/react/src/runtime/css-custom-property.js.flow +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Flowtype definitions for css-custom-property - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -/** - * Returns a CSS custom property value with an optional suffix & prefix. - * Prefix will only be added if there is a suffix. - * If the value is undefined a fallback value will be returned to prevent children inheriting parent values. - * @param value - * @param suffix - * @param prefix - */ -declare export default function cssCustomPropertyValue( - value: string | number | null | void, - suffix?: string | void | null, - prefix?: string | void | null -): string | number; diff --git a/packages/react/src/runtime/dev-warnings.js.flow b/packages/react/src/runtime/dev-warnings.js.flow deleted file mode 100644 index 84e18be81..000000000 --- a/packages/react/src/runtime/dev-warnings.js.flow +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Flowtype definitions for dev-warnings - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -declare export var analyzeCssInDev: (sheet: string) => void; diff --git a/packages/react/src/runtime/index.js.flow b/packages/react/src/runtime/index.js.flow deleted file mode 100644 index 1c322365b..000000000 --- a/packages/react/src/runtime/index.js.flow +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -declare export { default as CS } from './style'; -declare export { default as CC } from './style-cache'; -declare export { default as ax } from './ax'; -declare export { default as ac, clearCache as clearAcCache } from './ac'; -declare export { default as ix } from './css-custom-property'; diff --git a/packages/react/src/runtime/is-server-environment.js.flow b/packages/react/src/runtime/is-server-environment.js.flow deleted file mode 100644 index 29da330df..000000000 --- a/packages/react/src/runtime/is-server-environment.js.flow +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Flowtype definitions for is-server-environment - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -/** - * Returns `true` when inside a node environment, - * else `false`. - * - * When using this it will remove any node code from the browser bundle - for example: - * - * ```js - * if (isServerEnvironment()) { - * // This code will be removed from the browser bundle - * } - * ``` - */ -declare export var isServerEnvironment: () => boolean; diff --git a/packages/react/src/runtime/sheet.js.flow b/packages/react/src/runtime/sheet.js.flow deleted file mode 100644 index c64f388c3..000000000 --- a/packages/react/src/runtime/sheet.js.flow +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Flowtype definitions for sheet - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { Bucket, StyleSheetOpts } from './types'; -/** - * Ordered style buckets using their short psuedo name. - * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`. - */ -declare export var styleBucketOrdering: Bucket[]; -/** - * Gets the bucket depending on the sheet. - * This function makes assumptions as to the form of the input class name. - * - * Input: - * - * ``` - * "._a1234567:hover{ color: red; }" - * ``` - * - * Output: - * - * ``` - * "h" - * ``` - * @param sheet styles for which we are getting the bucket - */ -declare export var getStyleBucketName: (sheet: string) => Bucket; -/** - * Used to move styles to the head of the application during runtime. - * @param css string - * @param opts StyleSheetOpts - */ -declare export default function insertRule(css: string, opts: StyleSheetOpts): void; diff --git a/packages/react/src/runtime/style-cache.js.flow b/packages/react/src/runtime/style-cache.js.flow deleted file mode 100644 index 14b00d5da..000000000 --- a/packages/react/src/runtime/style-cache.js.flow +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Flowtype definitions for style-cache - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { ProviderComponent, UseCacheHook } from './types'; -/** - * Hook using the cache created on the server or client. - */ -declare export var useCache: UseCacheHook; -/** - * On the server this ensures the minimal amount of styles will be rendered - * safely using React Context. - * - * On the browser this turns into a fragment with no React Context. - */ -declare var StyleCacheProvider: ProviderComponent; -declare export default typeof StyleCacheProvider; diff --git a/packages/react/src/runtime/style.js.flow b/packages/react/src/runtime/style.js.flow deleted file mode 100644 index 29b064872..000000000 --- a/packages/react/src/runtime/style.js.flow +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Flowtype definitions for style - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { StyleSheetOpts } from './types'; -declare type StyleProps = { - /** - * CSS Rules. - * Ensure each rule is a separate element in the array. - */ - children: string[], - ... -} & StyleSheetOpts; -declare export default function Style(props: StyleProps): React$Node | null; diff --git a/packages/react/src/runtime/types.js.flow b/packages/react/src/runtime/types.js.flow deleted file mode 100644 index 4f7403e10..000000000 --- a/packages/react/src/runtime/types.js.flow +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Flowtype definitions for types - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -export interface StyleSheetOpts { - /** - * Used to set a nonce on the style element. - * This is needed when using a strict CSP and should be a random hash generated every server load. - * Check out https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src for more information. - */ - nonce?: string; -} -/** - * Buckets under which we will group our stylesheets - */ -export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm'; -export type UseCacheHook = () => { [key: string]: true }; -export type ProviderComponent = (props: { - children: React$Node[] | React$Node, - ... -}) => React$Node; diff --git a/packages/react/src/styled/__tests__/types.test.js.flow b/packages/react/src/styled/__tests__/types.test.js.flow deleted file mode 100644 index 045c2aef4..000000000 --- a/packages/react/src/styled/__tests__/types.test.js.flow +++ /dev/null @@ -1,84 +0,0 @@ -// @flow strict-local -import React, { type Node, type Element } from 'react'; -import { styled, type CssType } from '@compiled/react'; - -// Tagged template expression -() => { - const StyledComponent = styled.div` - font-size: 12px; - `; - return red text; -}; - -// Tagged template expression with conditional -() => { - const StyledComponent = styled.div` - font-size: ${({ big }) => (big ? big : 12)}px; - `; - return red text; -}; - -// Object call expression -() => { - const StyledComponent = styled.div<{ big: number, children: Node }>({ - fontSize: (props: { big: number, children: Node }): number => (props.big == 5 ? 50 : 10), - }); - - return red text; -}; - -// Object call expression with no props -() => { - const StyledComponent = styled.div({ - wordBreak: 'break-word', - position: 'relative', - left: `${2 - 2}px`, - }); - - return red text; -}; - -// Object call expression with conditional -() => { - const StyledComponent = styled.div<{ big: number, children: Node }>({ - fontSize: ({ big }) => `${big ? 50 : 12}px`, - width: ({ big }) => (big ? 500 : 120), - }); - - return red text; -}; - -// Object call expression with logical operator expression -() => { - // Type defined as constant so we test the type without sketchy null check errors - const StyledComponent = styled.div<{ big?: 5000, children: Node }>( - { - fontSize: ({ big }) => `${big || 50}px`, - width: ({ big }) => big && 500, - }, - ({ big }) => big && { height: '100px' } - ); - - return red text; -}; - -// Array -() => { - const styles: CssType<{ fontSize: number, children: Node }>[] = [{ fontSize: '12px' }]; - const StyledComponent = styled.div(styles); - return red text; -}; - -// Multiple arguments -() => { - const StyledComponent = styled.div({ fontSize: 12 }, `font-size: 12px`); - return red text; -}; - -// Dynamic function calls -() => { - const StyledComponent = styled.div({ - backgroundColor: token('elevation.surface', 'black'), - zIndex: layers.modal(), - }); -}; diff --git a/packages/react/src/styled/index.js.flow b/packages/react/src/styled/index.js.flow deleted file mode 100644 index 01ae9219d..000000000 --- a/packages/react/src/styled/index.js.flow +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Flowtype definitions for index - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import type { ComponentType } from 'react'; -import type { CssType, CssFunction } from '../types'; -/** - * Extra props added to the output Styled Component. - */ -export type StyledProps = { - as?: $Keys<$JSXIntrinsics>, -}; -export type ObjectInterpolation = CssType | CssType[]; -export type TemplateStringsInterpolation = CssFunction | CssFunction[]; -export interface StyledComponent { - ( - ...css: ObjectInterpolation[] - ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>; - ( - template: $ReadOnlyArray, - ...interpolations: TemplateStringsInterpolation[] - ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>; -} -export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, (Tag) => StyledComponent>; -export type CreateStyledComponent = { - (Component: ComponentType): StyledComponent, - ... -} & StyledComponentMap; -/** - * ## Styled component - * - * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support. - * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled). - * - * ### Style with objects - * @example ``` - * styled.div({ - * fontSize: 12, - * }); - * ``` - * - * ### Style with template literals - * @example ``` - * styled.div` - * font-size: 12px - * `; - * ``` - * - * ### Compose styles with arrays - * @example ``` - * import type { css } from '@compiled/react'; - * - * styled.div([ - * { fontSize: 12 }, - * css`font-size: 12px;` - * ]); - * - * styled.div( - * { fontSize: 12 }, - * css`font-size: 12px` - * ); - * ``` - */ -declare export var styled: CreateStyledComponent; diff --git a/packages/react/src/types.js.flow b/packages/react/src/types.js.flow deleted file mode 100644 index 60e09e539..000000000 --- a/packages/react/src/types.js.flow +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Flowtype definitions for types - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -import * as CSS from 'csstype'; -/** - * Typing for the interpolations. - */ -export type BasicTemplateInterpolations = string | number; -export interface FunctionInterpolation { - (props: TProps): CssFunction; -} -/** - * Possible types for a CSS value - */ -export type CssType = CssObject | FunctionInterpolation | string; -/** - * These are all the CSS props that will exist. - */ -export type CSSProps = $ReadOnly>>; -export type CssObject = $ReadOnly<{ - ...CSSProps, - [key: string]: CssFunction, -}>; -export type CssFunction = - | CssType - | BasicTemplateInterpolations - | boolean - | void; diff --git a/packages/react/src/utils/error.js.flow b/packages/react/src/utils/error.js.flow deleted file mode 100644 index 740206b65..000000000 --- a/packages/react/src/utils/error.js.flow +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Flowtype definitions for error - * Generated by Flowgen from a Typescript Definition - * Flowgen v1.21.0 - * @flow - */ -declare export var createSetupError: () => Error; diff --git a/scripts/flow-types.sh b/scripts/flow-types.sh deleted file mode 100755 index 21600afbc..000000000 --- a/scripts/flow-types.sh +++ /dev/null @@ -1,152 +0,0 @@ -#!/usr/bin/env bash -PACKAGES=({packages/react,packages/jest}) - -generate() { - echo "Generating flow types with flowgen" - find "${PACKAGES[@]}" -type f -path '*/dist/*' -name '*.d.ts' \ - -not -path '*/cjs/*' \ - -not -path '*/browser/*' \ - -not -path '*/__tests__/*' \ - -not -path '*/__perf__/*' \ - -not -path '*/__fixtures__/*' \ - -not -path 'packages/react/*/jsx/jsx-local-namespace.*' \ - -not -path 'packages/react/*/jsx/jsx-runtime.*' \ - -not -path 'packages/react/*/jsx/jsx-dev-runtime.*' \ - -print0 | while read -rd $'\0' file; do - flowFilename=${file%.*.*}.js.flow - flowgen --add-flow-header "$file" -o "$flowFilename" - if [ ! -f "$flowFilename" ]; then - echo "Type '$flowFilename' was not generated" - exit 1 - fi - - # Copy to type directory - newFile=$(echo "$flowFilename" | sed -E 's/dist\/(esm\/)?/src\//g') - mkdir -p "$(dirname "$newFile")" - mv "$flowFilename" "$newFile" - done - - echo "Patching types" - find "${PACKAGES[@]}" -type f -path '*/src/*' -name '*.js.flow' \ - -not -path '*/__tests__/*' \ - -not -path '*/__perf__/*' \ - -not -path '*/__fixtures__/*' \ - -not -path '*/node_modules/*' \ - -not -path 'packages/react/*/jsx/jsx-local-namespace.*' \ - -not -path 'packages/react/*/jsx/jsx-runtime.*' \ - -not -path 'packages/react/*/jsx/jsx-dev-runtime.*' \ - -print0 | while read -rd $'\0' file; do - - # Change import to import type (bug in flowgen) - sed -i.bak -E 's/import \{/import type {/g' "$file" && rm "$file.bak" - - # Define TemplateStringsArray type - sed -i.bak -E 's/TemplateStringsArray/$ReadOnlyArray/g' "$file" && rm "$file.bak" - - # Use readonly array to handle flow strict mode - sed -i.bak -E 's/css: CssObject \| CssObject\[\],/css: CssObject \| \$ReadOnlyArray>,/g' "$file" && rm "$file.bak" - - # Replace Readonly with $ReadOnly - sed -i.bak -E 's/Readonly/mixed/g' "$file" && rm "$file.bak" - - # Rename CSSProperties to matching flow type - sed -i.bak -E 's/, CSSProperties }/ }/g' "$file" && rm "$file.bak" - sed -i.bak -E 's/CSSProperties/$Shape/g' "$file" && rm "$file.bak" - - # Rename jest.CustomMatcherResult type to existing flow type - sed -i.bak -E 's/jest.CustomMatcherResult/JestMatcherResult/g' "$file" && rm "$file.bak" - - # Refactor interface to object type to allow spreading - sed -i.bak -E 's/export interface StyledProps \{/export type StyledProps = \{/g' "$file" && rm "$file.bak" - - # Fix records to object type. `s` flag and `-0777` makes perl - # match multiline. - # - # Assumes that the first argument to Record does not contain - # commas (otherwise this hacky script will break...) - perl -i.bak -0777 -pe 's/Record<(.+?),(.+?)>;/{[key: $1]: $2}/gs' "$file" && rm "$file.bak" - - # Change spread to allow correct type matching in flow - sed -i.bak -E 's/\[key: string\]: CssFunction,/...CSSProps,\n[key: string]: CssFunction,/g' "$file" && rm "$file.bak" - sed -i.bak -E '/\| CSSProps/d' "$file" && rm "$file.bak" - - # Remove any lines containing the jsx local namespace - sed -i.bak -E '/declare type jsx/d' "$file" && rm "$file.bak" - sed -i.bak -E '/declare export var jsx/d' "$file" && rm "$file.bak" - sed -i.bak -E '/CompiledJSX/d' "$file" && rm "$file.bak" - sed -i.bak -E '/import type \{ createElement }/d' "$file" && rm "$file.bak" - - # Refactor to flow style handling of default generic types - awk -v RS='' '{gsub(/CssFunction[^\S|]*\|[^\S|]*CssFunction\[\]/, "CssFunction<> | CssFunction<>[]"); print}' "$file" >"$file.tmp" && - mv "$file.tmp" "$file" - done - - echo "Running Prettier" - for package in "${PACKAGES[@]}"; do - npx pretty-quick - done -} - -validate() { - # Make sure to always stop the flow background process - trap "flow stop &> /dev/null" EXIT - echo "Validating with flow" - flow -} - -compare() { - # Run generate pipeline - generate - - # Check if working copy has any changes in flow types - for package in "${PACKAGES[@]}"; do - git add "$package" - done - - changed_types=$(git diff --name-only HEAD | grep .js.flow) - if [ -n "$changed_types" ]; then - echo - echo "Out of sync flow types have been detected. Make sure to run 'yarn flow-types generate' and commit changes." - echo "Any bugs in these types should be resolved by updating the 'generate' function in 'scripts/flow-types.sh'" - echo - echo "The following flow types are out of sync:" - echo "$changed_types" - git diff HEAD - exit 1 - else - echo "Flow types are in sync" - fi -} - -build() { - echo "Copying flow types to dist" - find "${PACKAGES[@]}" -type f -path '*/src/*' -name '*.js.flow' -not -path '*/node_modules/*' -not -path '*/__tests__/*' -print0 | while read -rd $'\0' file; do - esmDirname=$(dirname "$file" | sed 's/\/src/\/dist\/esm/g') - if [ -d "$esmDirname" ]; then - cp "$file" "$(echo "$file" | sed -E 's/src\//dist\/esm\//g')" - cp "$file" "$(echo "$file" | sed -E 's/src\//dist\/cjs\//g')" - cp "$file" "$(echo "$file" | sed -E 's/src\//dist\/browser\//g')" - else - cp "$file" "$(echo "$file" | sed -E 's/src\//dist\//g')" - fi - done -} - -if [ "$1" == "generate" ]; then - generate -elif [ "$1" == "validate" ]; then - validate -elif [ "$1" == "compare" ]; then - compare -elif [ "$1" == "build" ]; then - build -else - echo "usage: $0 " - exit 1 -fi diff --git a/yarn.lock b/yarn.lock index ece0d372c..f7fdfafb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -38,7 +38,7 @@ dependencies: "@babel/highlight" "^7.10.4" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.21.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3": +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.21.4", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3": version "7.22.13" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e" integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w== @@ -365,7 +365,7 @@ "@babel/traverse" "^7.21.5" "@babel/types" "^7.21.5" -"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7", "@babel/highlight@^7.22.13": +"@babel/highlight@^7.10.4", "@babel/highlight@^7.22.13": version "7.22.13" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.13.tgz#9cda839e5d3be9ca9e8c26b6dd69e7548f0cbf16" integrity sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ== @@ -6660,7 +6660,7 @@ commander@^4.0.1, commander@^4.1.1: resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== -commander@^6.1.0, commander@^6.2.1: +commander@^6.2.1: version "6.2.1" resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== @@ -8242,14 +8242,6 @@ eslint-module-utils@^2.7.4: dependencies: debug "^3.2.7" -eslint-plugin-flowtype@^8.0.3: - version "8.0.3" - resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz#e1557e37118f24734aa3122e7536a038d34a4912" - integrity sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ== - dependencies: - lodash "^4.17.21" - string-natural-compare "^3.0.1" - eslint-plugin-import@^2.27.5: version "2.27.5" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65" @@ -8971,30 +8963,11 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469" integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA== -flow-bin@^0.183.0: - version "0.183.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.183.0.tgz#17f37c94edd04b705a897b5890dd6cdc02e0c94e" - integrity sha512-7IJHUnMPYgNEZU8t9M4vJII/G+fJft9C/INm2+HRSXx5KDF2j+vD2iap6+Yg2FWgXTnNLUvk7kr1QdO5Fk/8/Q== - flow-parser@0.*: version "0.149.0" resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.149.0.tgz#6e5749ad832ba211968429accdb6a3858706e4f8" integrity sha512-ruUVkZuM9oFQjhSsLO/OJYRYpGnuXJpTnIZmgzna6DyLFb3CLpeO27oJbWyeXaa830hmKf0JRzpcdFsFS8lmpg== -flowgen@^1.21.0: - version "1.21.0" - resolved "https://registry.yarnpkg.com/flowgen/-/flowgen-1.21.0.tgz#f7ecb693892c4bd069492dbf77db561bbb451aa9" - integrity sha512-pFNFFyMLRmW6njhOIm5TrbGUDTv64aujmys2KrkRE2NYD8sXwJUyicQRwU5SPRBRJnFSD/FNlnHo2NnHI5eJSw== - dependencies: - "@babel/code-frame" "^7.16.7" - "@babel/highlight" "^7.16.7" - commander "^6.1.0" - lodash "^4.17.20" - prettier "^2.5.1" - shelljs "^0.8.4" - typescript "~4.4.4" - typescript-compiler "^1.4.1-2" - flush-write-stream@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -14815,7 +14788,7 @@ prepend-http@^1.0.0: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18" integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w== -prettier@^2.5.1, prettier@^2.7.1, prettier@^2.8.8: +prettier@^2.7.1, prettier@^2.8.8: version "2.8.8" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== @@ -16222,7 +16195,7 @@ shell-quote@^1.6.1: resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123" integrity sha1-qkDtrBcERbmkMeF7tiwLiBucQSM= -shelljs@^0.8.3, shelljs@^0.8.4: +shelljs@^0.8.3: version "0.8.4" resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2" integrity sha1-3naE/ut2f4cWsyYHiooAh1iQ48I= @@ -16718,11 +16691,6 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -string-natural-compare@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" - integrity sha1-ekLVhHRFSWN1no6LeuY9ccHn/fQ= - "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" @@ -17621,12 +17589,7 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript-compiler@^1.4.1-2: - version "1.4.1-2" - resolved "https://registry.yarnpkg.com/typescript-compiler/-/typescript-compiler-1.4.1-2.tgz#ba4f7db22d91534a1929d90009dce161eb72fd3f" - integrity sha1-uk99si2RU0oZKdkACdzhYety/T8= - -typescript@^3.7.0, typescript@^4.9.5, typescript@~4.4.4: +typescript@^3.7.0, typescript@^4.9.5: version "4.9.5" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==