diff --git a/.eslintrc.js b/.eslintrc.js index 302ac58..c4c9d03 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,37 +1,37 @@ module.exports = { root: true, - parser: '@typescript-eslint/parser', + parser: "@typescript-eslint/parser", parserOptions: { - project: 'tsconfig.json', - sourceType: 'module', + project: "tsconfig.json", + sourceType: "module", ecmaFeatures: { jsx: true } }, settings: { react: { - version: 'detect' + version: "detect" } }, extends: [ - 'plugin:react/recommended', - 'plugin:@typescript-eslint/recommended', - 'prettier', - 'prettier/@typescript-eslint' + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "prettier", + "prettier/@typescript-eslint" ], - plugins: ['react', 'react-hooks', '@typescript-eslint'], + plugins: ["react", "react-hooks", "@typescript-eslint"], rules: { - '@typescript-eslint/explicit-function-return-type': 'off', - '@typescript-eslint/explicit-member-accessibility': 'off', - 'react-hooks/exhaustive-deps': 'warn', - 'react-hooks/rules-of-hooks': 'error' + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-member-accessibility": "off", + "react-hooks/exhaustive-deps": "warn", + "react-hooks/rules-of-hooks": "error" }, overrides: [ { - files: ['*.js'], + files: ["*.js"], rules: { - '@typescript-eslint/no-var-requires': 'off' + "@typescript-eslint/no-var-requires": "off" } } ] -} +}; diff --git a/.travis.yml b/.travis.yml index d4924f3..6c2bdec 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,5 +2,5 @@ language: node_js notifications: email: false script: - - npm t + - npm run test - $(npm bin)/codecov diff --git a/examples/basic-usage/src/index.js b/examples/basic-usage/src/index.js index e24647f..bb4a3cf 100644 --- a/examples/basic-usage/src/index.js +++ b/examples/basic-usage/src/index.js @@ -1,5 +1,5 @@ -import C from 'react-fiber-traverse' -import React from 'react' -import ReactDOM from 'react-dom' +import C from "react-fiber-traverse"; +import React from "react"; +import ReactDOM from "react-dom"; -ReactDOM.render(, document.getElementById('root')) +ReactDOM.render(, document.getElementById("root")); diff --git a/index.js b/index.js index c61747a..a8eefcd 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ -'use strict' +"use strict"; -if (process.env.NODE_ENV === 'production') { - module.exports = require('./react-fiber-traverse.cjs.production.js') +if (process.env.NODE_ENV === "production") { + module.exports = require("./react-fiber-traverse.cjs.production.js"); } else { - module.exports = require('./react-fiber-traverse.cjs.development.js') + module.exports = require("./react-fiber-traverse.cjs.development.js"); } diff --git a/package.json b/package.json index 7b4ca41..99f6486 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bundle": "rollup -c", "changelog": "github_changelog_generator --no-issues --header-label \"# Changelog\" --future-release v$npm_package_version", "check:format": "prettier --list-different \"**/*.{js,ts,tsx}\"", + "fix:format": "prettier --write \"**/*.{js,ts,tsx}\"", "check:types": "tsc --noEmit", "clean": "run-p clean:*", "clean:compiled": "del compiled", diff --git a/rollup.config.js b/rollup.config.js index 85b8d5d..b3e065f 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,72 +1,72 @@ -import babel from 'rollup-plugin-babel' -import commonjs from 'rollup-plugin-commonjs' -import nodeResolve from 'rollup-plugin-node-resolve' -import replace from 'rollup-plugin-replace' -import { sizeSnapshot } from 'rollup-plugin-size-snapshot' -import sourcemaps from 'rollup-plugin-sourcemaps' -import { terser } from 'rollup-plugin-terser' -import pkg from './package.json' +import babel from "rollup-plugin-babel"; +import commonjs from "rollup-plugin-commonjs"; +import nodeResolve from "rollup-plugin-node-resolve"; +import replace from "rollup-plugin-replace"; +import { sizeSnapshot } from "rollup-plugin-size-snapshot"; +import sourcemaps from "rollup-plugin-sourcemaps"; +import { terser } from "rollup-plugin-terser"; +import pkg from "./package.json"; -const CJS_DEV = 'CJS_DEV' -const CJS_PROD = 'CJS_PROD' -const ES = 'ES' -const UMD_DEV = 'UMD_DEV' -const UMD_PROD = 'UMD_PROD' +const CJS_DEV = "CJS_DEV"; +const CJS_PROD = "CJS_PROD"; +const ES = "ES"; +const UMD_DEV = "UMD_DEV"; +const UMD_PROD = "UMD_PROD"; -const input = './compiled/index.js' +const input = "./compiled/index.js"; const getGlobals = bundleType => { const baseGlobals = { - 'react-dom': 'ReactDOM', - react: 'React' - } + "react-dom": "ReactDOM", + react: "React" + }; switch (bundleType) { case UMD_DEV: - return { ...baseGlobals, 'prop-types': 'PropTypes' } + return { ...baseGlobals, "prop-types": "PropTypes" }; case UMD_PROD: - return baseGlobals + return baseGlobals; default: - return {} + return {}; } -} +}; const getExternal = bundleType => { - const peerDependencies = Object.keys(pkg.peerDependencies) - const dependencies = Object.keys(pkg.dependencies) + const peerDependencies = Object.keys(pkg.peerDependencies); + const dependencies = Object.keys(pkg.dependencies); // Hat-tip: https://github.com/rollup/rollup-plugin-babel/issues/148#issuecomment-399696316. const makeExternalPredicate = externals => { if (externals.length === 0) { - return () => false + return () => false; } - const pattern = new RegExp(`^(${externals.join('|')})($|/)`) - return id => pattern.test(id) - } + const pattern = new RegExp(`^(${externals.join("|")})($|/)`); + return id => pattern.test(id); + }; switch (bundleType) { case CJS_DEV: case CJS_PROD: case ES: - return makeExternalPredicate([...peerDependencies, ...dependencies]) + return makeExternalPredicate([...peerDependencies, ...dependencies]); case UMD_DEV: - return makeExternalPredicate([...peerDependencies, 'prop-types']) + return makeExternalPredicate([...peerDependencies, "prop-types"]); default: - return makeExternalPredicate(peerDependencies) + return makeExternalPredicate(peerDependencies); } -} +}; const isProduction = bundleType => - bundleType === CJS_PROD || bundleType === UMD_PROD + bundleType === CJS_PROD || bundleType === UMD_PROD; const getBabelConfig = bundleType => { const options = { babelrc: false, - exclude: 'node_modules/**', - presets: [['@babel/env', { loose: true, modules: false }], '@babel/react'], - plugins: ['@babel/transform-runtime'], + exclude: "node_modules/**", + presets: [["@babel/env", { loose: true, modules: false }], "@babel/react"], + plugins: ["@babel/transform-runtime"], runtimeHelpers: true - } + }; switch (bundleType) { case ES: @@ -74,53 +74,53 @@ const getBabelConfig = bundleType => { ...options, plugins: [ ...options.plugins, - ['transform-react-remove-prop-types', { mode: 'wrap' }] + ["transform-react-remove-prop-types", { mode: "wrap" }] ] - } + }; case UMD_PROD: case CJS_PROD: return { ...options, plugins: [ ...options.plugins, - ['transform-react-remove-prop-types', { removeImport: true }] + ["transform-react-remove-prop-types", { removeImport: true }] ] - } + }; default: - return options + return options; } -} +}; const getPlugins = bundleType => [ nodeResolve(), commonjs({ - include: 'node_modules/**', + include: "node_modules/**", namedExports: { - 'node_modules/prop-types/index.js': [ - 'any', - 'array', - 'arrayOf', - 'bool', - 'element', - 'exact', - 'func', - 'instanceOf', - 'node', - 'number', - 'object', - 'objectOf', - 'oneOf', - 'oneOfType', - 'shape', - 'string', - 'symbol' + "node_modules/prop-types/index.js": [ + "any", + "array", + "arrayOf", + "bool", + "element", + "exact", + "func", + "instanceOf", + "node", + "number", + "object", + "objectOf", + "oneOf", + "oneOfType", + "shape", + "string", + "symbol" ] } }), babel(getBabelConfig(bundleType)), replace({ - 'process.env.NODE_ENV': JSON.stringify( - isProduction(bundleType) ? 'production' : 'development' + "process.env.NODE_ENV": JSON.stringify( + isProduction(bundleType) ? "production" : "development" ) }), sourcemaps(), @@ -137,46 +137,46 @@ const getPlugins = bundleType => [ ecma: 5, toplevel: false }) -] +]; const getCjsConfig = bundleType => ({ input, external: getExternal(bundleType), output: { file: `dist/react-fiber-traverse.cjs.${ - isProduction(bundleType) ? 'production' : 'development' + isProduction(bundleType) ? "production" : "development" }.js`, - format: 'cjs', + format: "cjs", sourcemap: true }, plugins: getPlugins(bundleType) -}) +}); const getEsConfig = () => ({ input, external: getExternal(ES), output: { file: pkg.module, - format: 'es', + format: "es", sourcemap: true }, plugins: getPlugins(ES) -}) +}); const getUmdConfig = bundleType => ({ input, external: getExternal(bundleType), output: { file: `dist/react-fiber-traverse.umd.${ - isProduction(bundleType) ? 'production' : 'development' + isProduction(bundleType) ? "production" : "development" }.js`, - format: 'umd', + format: "umd", globals: getGlobals(bundleType), - name: 'reactFiberTraverse', + name: "reactFiberTraverse", sourcemap: true }, plugins: getPlugins(bundleType) -}) +}); export default [ getCjsConfig(CJS_DEV), @@ -184,4 +184,4 @@ export default [ getEsConfig(), getUmdConfig(UMD_DEV), getUmdConfig(UMD_PROD) -] +]; diff --git a/scripts/jest/config.cjs.js b/scripts/jest/config.cjs.js index 7e600c0..e08d85f 100644 --- a/scripts/jest/config.cjs.js +++ b/scripts/jest/config.cjs.js @@ -1,8 +1,8 @@ -const srcConfig = require('./config.src') +const srcConfig = require("./config.src"); module.exports = Object.assign({}, srcConfig, { collectCoverage: false, moduleNameMapper: { - '^../src$': `/dist/index.js` + "^../src$": `/dist/index.js` } -}) +}); diff --git a/scripts/jest/config.es.js b/scripts/jest/config.es.js index dd4fb0c..1a63dbf 100644 --- a/scripts/jest/config.es.js +++ b/scripts/jest/config.es.js @@ -1,8 +1,8 @@ -const srcConfig = require('./config.src') +const srcConfig = require("./config.src"); module.exports = Object.assign({}, srcConfig, { collectCoverage: false, moduleNameMapper: { - '^../src$': `/dist/react-fiber-traverse.esm.js` + "^../src$": `/dist/react-fiber-traverse.esm.js` } -}) +}); diff --git a/scripts/jest/config.src.js b/scripts/jest/config.src.js index 917cf28..979de45 100644 --- a/scripts/jest/config.src.js +++ b/scripts/jest/config.src.js @@ -1,12 +1,12 @@ module.exports = { collectCoverage: true, - collectCoverageFrom: ['src/*.{ts,tsx}'], - moduleFileExtensions: ['ts', 'tsx', 'js', 'json'], - preset: 'ts-jest', + collectCoverageFrom: ["src/*.{ts,tsx}"], + moduleFileExtensions: ["ts", "tsx", "js", "json"], + preset: "ts-jest", rootDir: process.cwd(), - roots: ['/test'], - setupFiles: ['/scripts/jest/setupEnvironment.ts'], - setupFilesAfterEnv: ['/scripts/jest/setupJest.ts'], - testMatch: ['/test/*.spec.ts?(x)'], - transform: { '^.+\\.(js|tsx?)$': 'ts-jest' } -} + roots: ["/test"], + setupFiles: ["/scripts/jest/setupEnvironment.ts"], + setupFilesAfterEnv: ["/scripts/jest/setupJest.ts"], + testMatch: ["/test/*.spec.ts?(x)"], + transform: { "^.+\\.(js|tsx?)$": "ts-jest" } +}; diff --git a/scripts/jest/config.umd.js b/scripts/jest/config.umd.js index 8ef0454..db90a54 100644 --- a/scripts/jest/config.umd.js +++ b/scripts/jest/config.umd.js @@ -1,8 +1,8 @@ -const srcConfig = require('./config.src') +const srcConfig = require("./config.src"); module.exports = Object.assign({}, srcConfig, { collectCoverage: false, moduleNameMapper: { - '^../src$': `/dist/react-fiber-traverse.umd.development.js` + "^../src$": `/dist/react-fiber-traverse.umd.development.js` } -}) +}); diff --git a/scripts/jest/config.umdprod.js b/scripts/jest/config.umdprod.js index bd670a2..a304b86 100644 --- a/scripts/jest/config.umdprod.js +++ b/scripts/jest/config.umdprod.js @@ -1,8 +1,8 @@ -const srcConfig = require('./config.src') +const srcConfig = require("./config.src"); module.exports = Object.assign({}, srcConfig, { collectCoverage: false, moduleNameMapper: { - '^../src$': `/dist/react-fiber-traverse.umd.production.js` + "^../src$": `/dist/react-fiber-traverse.umd.production.js` } -}) +}); diff --git a/scripts/jest/setupEnvironment.ts b/scripts/jest/setupEnvironment.ts index 3d6cd1d..6f413a4 100644 --- a/scripts/jest/setupEnvironment.ts +++ b/scripts/jest/setupEnvironment.ts @@ -1,4 +1,4 @@ -import { configure } from 'enzyme' -import Adapter from 'enzyme-adapter-react-16' +import { configure } from "enzyme"; +import Adapter from "enzyme-adapter-react-16"; -configure({ adapter: new Adapter() }) +configure({ adapter: new Adapter() }); diff --git a/scripts/jest/setupJest.ts b/scripts/jest/setupJest.ts index 2e21244..ec8fc51 100644 --- a/scripts/jest/setupJest.ts +++ b/scripts/jest/setupJest.ts @@ -1,4 +1,4 @@ -import { createPrettyHtmlMatchers } from 'jest-prettyhtml-matchers' +import { createPrettyHtmlMatchers } from "jest-prettyhtml-matchers"; expect.extend( createPrettyHtmlMatchers({ @@ -6,4 +6,4 @@ expect.extend( sortAttributes: true, wrapAttributes: true }) -) +); diff --git a/src/findNode.ts b/src/findNode.ts index d5faf48..86e36d9 100644 --- a/src/findNode.ts +++ b/src/findNode.ts @@ -48,7 +48,10 @@ function findNodeByComponent( } } { - const returnVal = findNodeByComponent(node.sibling, expectedClassOrFunction); + const returnVal = findNodeByComponent( + node.sibling, + expectedClassOrFunction + ); if (returnVal !== null) { return returnVal; } @@ -76,7 +79,10 @@ function findNodeByComponentRef( } } { - const returnVal = findNodeByComponentRef(node.sibling, expectedClassInstance); + const returnVal = findNodeByComponentRef( + node.sibling, + expectedClassInstance + ); if (returnVal !== null) { return returnVal; } diff --git a/src/mocked-types/index.ts b/src/mocked-types/index.ts index 8b9e584..8d779fe 100644 --- a/src/mocked-types/index.ts +++ b/src/mocked-types/index.ts @@ -1,6 +1,10 @@ import * as React from "react"; -export type FiberNode = FiberNodeForComponentClass | FiberNodeForFunctionComponent | FiberNodeForInstrinsicElement | FiberNodeForTextNode; +export type FiberNode = + | FiberNodeForComponentClass + | FiberNodeForFunctionComponent + | FiberNodeForInstrinsicElement + | FiberNodeForTextNode; export interface FiberNodeForFunctionComponent { child: FiberNode | null; @@ -52,4 +56,6 @@ export interface FiberNodeForTextNode { stateNode: Text; } -export type FiberNodeisHTMLLike = FiberNodeForInstrinsicElement | FiberNodeForTextNode; \ No newline at end of file +export type FiberNodeisHTMLLike = + | FiberNodeForInstrinsicElement + | FiberNodeForTextNode; diff --git a/src/traverse.ts b/src/traverse.ts index eed4ec6..78c6c0a 100644 --- a/src/traverse.ts +++ b/src/traverse.ts @@ -16,7 +16,7 @@ function* traverseGenerator( node: FiberNode, { order = ["self", "child", "sibling"] - }: { order?: Array<"self"|"child"|"sibling"> } = {} + }: { order?: Array<"self" | "child" | "sibling"> } = {} ): IterableIterator { let skipChild = false, skipSibling = false; @@ -52,7 +52,9 @@ function* traverseGenerator( }; // For each item mentioned in order, find generator functions to run - const orderedGenerators = order.map((step) => traverseMap[step]).filter(tmp => tmp!==undefined); + const orderedGenerators = order + .map(step => traverseMap[step]) + .filter(tmp => tmp !== undefined); // Now run each generator till end for (const eachGen of orderedGenerators) { diff --git a/src/utils.ts b/src/utils.ts index b0cacee..e6d943b 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -28,7 +28,9 @@ function isNodeComponentClass( return isNodeNotHtmlLike(node) && node.stateNode instanceof React.Component; } -function isConstructorHtmlLike(ctr: React.ElementType): ctr is Exclude { +function isConstructorHtmlLike( + ctr: React.ElementType +): ctr is Exclude { if (typeof ctr === "string" || ctr === null) { return true; } diff --git a/test/example.spec.tsx b/test/example.spec.tsx index 034c43a..8f3bc4c 100644 --- a/test/example.spec.tsx +++ b/test/example.spec.tsx @@ -17,7 +17,7 @@ describe("Component", () => { it("should render correctly", () => { const rootRef = React.createRef(); - rootRef.current && rootRef.current + rootRef.current && rootRef.current; wrapper = mount(, { attachTo: container }); expect(wrapper.html()).toMatchSnapshot(); diff --git a/test/findNodeByName-scoped.spec.tsx b/test/findNodeByName-scoped.spec.tsx index dab620b..d2bd912 100644 --- a/test/findNodeByName-scoped.spec.tsx +++ b/test/findNodeByName-scoped.spec.tsx @@ -85,7 +85,7 @@ describe("findNodeByComponentName", () => { const rootNode = mountAndGetRootNode(WrappedC, container); const foundFnDepth1 = findNodeByComponentName(rootNode, FnDepth1.name); - const foundInner = findNodeByComponentName(foundFnDepth1, 'someName'); + const foundInner = findNodeByComponentName(foundFnDepth1, "someName"); expect(foundInner).toBeFalsy(); expect(foundInner).toBe(null); @@ -96,7 +96,12 @@ describe("findNodeByComponentName", () => { return ; } function Fn2() { - return
Fn2 here
; + return ( +
+ Fn2 here + +
+ ); } function Fn3() { return
Fn3 here
; diff --git a/test/sample-components/depth-1-fn-simple.tsx b/test/sample-components/depth-1-fn-simple.tsx index 55dda54..677d651 100644 --- a/test/sample-components/depth-1-fn-simple.tsx +++ b/test/sample-components/depth-1-fn-simple.tsx @@ -1,5 +1,5 @@ function FnDepth1() { - return null; + return null; } export default FnDepth1; diff --git a/test/traverseGenerator-basic.spec.tsx b/test/traverseGenerator-basic.spec.tsx index a4f9baa..a0abb2e 100644 --- a/test/traverseGenerator-basic.spec.tsx +++ b/test/traverseGenerator-basic.spec.tsx @@ -13,7 +13,7 @@ import { mountAndGetRootNode } from "./utils/mountInEnzyme"; import CDepth1 from "./sample-components/depth-1-simple"; import CDepth2 from "./sample-components/depth-2-simple"; import CDepth5 from "./sample-components/depth-5-simple"; -import FnDepth1 from './sample-components/depth-1-fn-simple'; +import FnDepth1 from "./sample-components/depth-1-fn-simple"; describe("traverseGenerator", () => { let container: HTMLDivElement; diff --git a/test/utils/createComponent.tsx b/test/utils/createComponent.tsx index d37e9e0..b63df28 100644 --- a/test/utils/createComponent.tsx +++ b/test/utils/createComponent.tsx @@ -9,7 +9,7 @@ function createFunctionComponent(name?: string): React.FunctionComponent { if (props.children !== undefined) { return {props.children}; } else { - return null + return null; } }; @@ -31,7 +31,7 @@ function createClassComponent(name?: string): React.ComponentClass { if (this.props.children !== undefined) { return this.props.children; } else { - return null + return null; } } }; @@ -113,7 +113,7 @@ function createClassComponents( return returnArr; } - + // Handle other invalid inputs throw new TypeError("Input is not valid"); } diff --git a/test/utils/getWrappedComponent.tsx b/test/utils/getWrappedComponent.tsx index 74eb0db..bb17052 100644 --- a/test/utils/getWrappedComponent.tsx +++ b/test/utils/getWrappedComponent.tsx @@ -9,4 +9,4 @@ function getWrappedComponent(SomeComponent: React.ElementType) { return WrappedC; } -export default getWrappedComponent; \ No newline at end of file +export default getWrappedComponent; diff --git a/test/utils/mountInEnzyme.tsx b/test/utils/mountInEnzyme.tsx index 641d026..38b4fad 100644 --- a/test/utils/mountInEnzyme.tsx +++ b/test/utils/mountInEnzyme.tsx @@ -1,9 +1,7 @@ import * as React from "react"; import { mount } from "enzyme"; import { FiberNode, FiberNodeForComponentClass } from "../../src/mocked-types"; -import { - isConstructorFunctionComponent -} from "../../src/utils"; +import { isConstructorFunctionComponent } from "../../src/utils"; import getWrappedComponent from "./getWrappedComponent"; export class RootNodeNotFoundError extends Error {