From 815286e8a86b22ecc497f954704c9c9a07c2740b Mon Sep 17 00:00:00 2001 From: mattcompiles Date: Thu, 14 May 2020 15:44:46 +1000 Subject: [PATCH] fix: Update to prettier v2 (#155) --- README.md | 2 +- bin/cli.js | 22 ++--- cypress/integration/editor.js | 2 +- cypress/integration/snippets.js | 2 +- cypress/integration/toolbar.js | 6 +- cypress/integration/urlHandling.js | 2 +- cypress/projects/basic/components.js | 6 +- cypress/projects/basic/playroom.config.js | 2 +- cypress/projects/basic/snippets.js | 10 +-- cypress/support/commands.js | 2 +- cypress/support/index.js | 5 +- cypress/support/utils.js | 45 +++++----- .../braid-design-system/playroom.config.js | 38 ++++---- .../braid-design-system/playroom/snippets.js | 8 +- examples/material-ui/playroom.config.js | 2 +- .../office-ui-fabric-react/playroom.config.js | 50 +++++------ .../office-ui-fabric-react/themes/index.ts | 7 +- examples/reakit/playroom.config.js | 2 +- examples/seek-style-guide/playroom.config.js | 14 +-- examples/typescript/components/Bar/Bar.tsx | 2 +- examples/typescript/components/Foo/Foo.tsx | 2 +- examples/typescript/playroom.config.js | 18 ++-- examples/typescript/snippets/index.ts | 26 +++--- lib/getStaticTypes.js | 16 ++-- lib/index.js | 6 +- lib/makeDefaultWebpackConfig.js | 16 ++-- lib/makeWebpackConfig.js | 74 ++++++++-------- lib/provideDefaultConfig.js | 2 +- lib/start.js | 2 +- package.json | 4 +- scripts/postCommitStatus.js | 4 +- src/Playroom/Button/Button.tsx | 2 +- src/Playroom/CatchErrors/CatchErrors.js | 8 +- src/Playroom/CodeEditor/CodeEditor.tsx | 20 ++--- src/Playroom/Frame.js | 2 +- src/Playroom/Frames/Frames.tsx | 6 +- src/Playroom/Frames/Iframe.tsx | 6 +- src/Playroom/FramesPanel/FramesPanel.tsx | 23 ++--- src/Playroom/Heading/Heading.tsx | 6 +- src/Playroom/Inline/Inline.tsx | 2 +- src/Playroom/Playroom.tsx | 18 ++-- src/Playroom/Preview.tsx | 2 +- src/Playroom/PreviewPanel/ThemeSelector.tsx | 6 +- src/Playroom/RenderCode/RenderCode.js | 4 +- .../Snippets/SearchField/SearchField.tsx | 2 +- src/Playroom/Snippets/Snippets.tsx | 10 +-- src/Playroom/SplashScreen/SplashScreen.tsx | 4 +- src/Playroom/Stack/Stack.tsx | 2 +- src/Playroom/StatusMessage/StatusMessage.tsx | 4 +- src/Playroom/Text/Text.tsx | 6 +- src/Playroom/Toolbar/Toolbar.tsx | 42 ++++----- src/Playroom/ToolbarItem/ToolbarItem.tsx | 10 +-- src/Playroom/ToolbarPanel/ToolbarPanel.tsx | 4 +- src/Playroom/WindowPortal/index.tsx | 8 +- src/Playroom/icons/ChevronIcon.tsx | 2 +- src/StoreContext/StoreContext.tsx | 86 +++++++++---------- src/frame.js | 2 +- src/index.js | 2 +- src/preview.js | 2 +- src/utils/compileJsx.ts | 2 +- src/utils/componentsToHints.ts | 14 +-- src/utils/cursor.spec.ts | 12 +-- src/utils/cursor.ts | 6 +- src/utils/formatting.spec.ts | 24 +++--- src/utils/formatting.ts | 34 ++++---- src/utils/usePreviewUrl.ts | 2 +- utils/index.js | 6 +- yarn.lock | 13 ++- 68 files changed, 406 insertions(+), 397 deletions(-) diff --git a/README.md b/README.md index ede60ce1..c1fb1dc5 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ module.exports = { baseUrl: '/playroom/', webpackConfig: () => ({ // Custom webpack config goes here... - }) + }), }; ``` diff --git a/bin/cli.js b/bin/cli.js index 2a1d0ef6..daf1a382 100755 --- a/bin/cli.js +++ b/bin/cli.js @@ -11,7 +11,7 @@ const showUsage = () => { { header: 'playroom', content: - 'Code-oriented component design tool.\n\nUsage: playroom [options...]' + 'Code-oriented component design tool.\n\nUsage: playroom [options...]', }, { header: 'Commands', @@ -19,10 +19,10 @@ const showUsage = () => { { name: 'start', summary: 'Start a local playroom.' }, { name: 'build', - summary: 'Build a playroom for production.' + summary: 'Build a playroom for production.', }, - { name: 'help', summary: 'Show this usage guide.' } - ] + { name: 'help', summary: 'Show this usage guide.' }, + ], }, { header: 'Options', @@ -30,10 +30,10 @@ const showUsage = () => { { name: 'config', typeLabel: '{underline path}', - description: 'Path to a config file.' - } - ] - } + description: 'Path to a config file.', + }, + ], + }, ]) ); }; @@ -43,7 +43,7 @@ const showUsage = () => { const args = commandLineArgs([ { name: 'command', defaultOption: true, defaultValue: 'start' }, { name: 'config' }, - { name: 'help', type: Boolean } + { name: 'help', type: Boolean }, ]); if (args.command === 'help' || args.help) { @@ -66,11 +66,11 @@ const showUsage = () => { const playroom = lib({ cwd: path.dirname(configPath), - ...config + ...config, }); if (playroom.hasOwnProperty(args.command)) { - playroom[args.command](err => { + playroom[args.command]((err) => { if (err) { console.error(err); process.exit(1); diff --git a/cypress/integration/editor.js b/cypress/integration/editor.js index 83a23192..563b35cc 100644 --- a/cypress/integration/editor.js +++ b/cypress/integration/editor.js @@ -3,7 +3,7 @@ import { typeCode, assertFirstFrameContains, assertCodePaneContains, - assertCodePaneLineCount + assertCodePaneLineCount, } from '../support/utils'; describe('Editor', () => { diff --git a/cypress/integration/snippets.js b/cypress/integration/snippets.js index 626e65ee..93498b73 100644 --- a/cypress/integration/snippets.js +++ b/cypress/integration/snippets.js @@ -9,7 +9,7 @@ import { toggleSnippets, assertSnippetCount, assertSnippetsListIsVisible, - mouseOverSnippet + mouseOverSnippet, } from '../support/utils'; describe('Snippets', () => { diff --git a/cypress/integration/toolbar.js b/cypress/integration/toolbar.js index 1840cb4d..f7dd3f74 100644 --- a/cypress/integration/toolbar.js +++ b/cypress/integration/toolbar.js @@ -4,7 +4,7 @@ import { assertPreviewContains, typeCode, gotoPreview, - visit + visit, } from '../support/utils'; describe('Toolbar', () => { @@ -33,8 +33,8 @@ describe('Toolbar', () => { ); cy.document() - .then(doc => { - cy.stub(doc, 'execCommand', args => { + .then((doc) => { + cy.stub(doc, 'execCommand', (args) => { if (args === 'copy') { copySpy(); return true; diff --git a/cypress/integration/urlHandling.js b/cypress/integration/urlHandling.js index cd3786fe..ad037076 100644 --- a/cypress/integration/urlHandling.js +++ b/cypress/integration/urlHandling.js @@ -2,7 +2,7 @@ import { assertFirstFrameContains, assertCodePaneContains, assertFramesMatch, - visit + visit, } from '../support/utils'; describe('URL handling', () => { diff --git a/cypress/projects/basic/components.js b/cypress/projects/basic/components.js index 978d92df..2188e9d8 100644 --- a/cypress/projects/basic/components.js +++ b/cypress/projects/basic/components.js @@ -1,17 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; -const withPropTypes = component => { +const withPropTypes = (component) => { component.propTypes = { color: PropTypes.oneOf(['red', 'blue']), - children: PropTypes.node + children: PropTypes.node, }; return component; }; const parent = { border: '1px solid currentColor', - padding: '10px 10px 10px 15px' + padding: '10px 10px 10px 15px', }; export const Foo = withPropTypes(({ color = 'black', children }) => ( diff --git a/cypress/projects/basic/playroom.config.js b/cypress/projects/basic/playroom.config.js index 1922e85b..c010ce0a 100644 --- a/cypress/projects/basic/playroom.config.js +++ b/cypress/projects/basic/playroom.config.js @@ -2,5 +2,5 @@ module.exports = { components: './components', snippets: './snippets', outputPath: './dist', - openBrowser: false + openBrowser: false, }; diff --git a/cypress/projects/basic/snippets.js b/cypress/projects/basic/snippets.js index 4beadaf9..51dcb7ab 100644 --- a/cypress/projects/basic/snippets.js +++ b/cypress/projects/basic/snippets.js @@ -2,21 +2,21 @@ export default [ { group: 'Foo', name: 'Default', - code: 'Foo' + code: 'Foo', }, { group: 'Foo', name: 'Red', - code: 'Red Foo' + code: 'Red Foo', }, { group: 'Bar', name: 'Default', - code: 'Bar' + code: 'Bar', }, { group: 'Bar', name: 'Blue', - code: 'Blue Bar' - } + code: 'Blue Bar', + }, ]; diff --git a/cypress/support/commands.js b/cypress/support/commands.js index febddcd6..51d9ec46 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -2,7 +2,7 @@ Cypress.Commands.add( 'getFromPreviewFrame', { prevSubject: 'element' }, ($iframe, selector) => - new Promise(resolve => { + new Promise((resolve) => { $iframe.on('load', () => { resolve($iframe.contents().find(selector)); }); diff --git a/cypress/support/index.js b/cypress/support/index.js index 868b3bf5..1207eb6e 100644 --- a/cypress/support/index.js +++ b/cypress/support/index.js @@ -4,14 +4,15 @@ const { getFirstFrame } = require('./utils'); beforeEach(() => { cy.visit('http://localhost:9000') .window() - .then(win => { + .then((win) => { const { storageKey } = win.__playroomConfig__; indexedDB.deleteDatabase(storageKey); }) .reload() .then(() => getFirstFrame().then( - $iframe => new Cypress.Promise(resolve => $iframe.on('load', resolve)) + ($iframe) => + new Cypress.Promise((resolve) => $iframe.on('load', resolve)) ) ); }); diff --git a/cypress/support/utils.js b/cypress/support/utils.js index 0719f192..df701c51 100644 --- a/cypress/support/utils.js +++ b/cypress/support/utils.js @@ -8,17 +8,18 @@ export const getPreviewFrameNames = () => cy.get('[data-testid="frameName"]'); export const getFirstFrame = () => getPreviewFrames().first(); -export const visit = url => +export const visit = (url) => cy .visit(url) .reload() .then(() => { getFirstFrame().then( - $iframe => new Cypress.Promise(resolve => $iframe.on('load', resolve)) + ($iframe) => + new Cypress.Promise((resolve) => $iframe.on('load', resolve)) ); }); -export const typeCode = code => +export const typeCode = (code) => getCodeEditor() .focused() .type(code, { force: true, delay: 200 }) @@ -30,27 +31,27 @@ export const formatCode = () => .type(`${navigator.platform.match('Mac') ? '{cmd}' : '{ctrl}'}s`) .wait(WAIT_FOR_FRAME_TO_RENDER); -export const selectWidthPreferenceByIndex = index => +export const selectWidthPreferenceByIndex = (index) => cy .get('[data-testid="toggleFrames"]') - .then(el => el.get(0).click()) + .then((el) => el.get(0).click()) .get('[data-testid="widthsPreferences"] label') .eq(index) - .then(el => el.get(0).click()); + .then((el) => el.get(0).click()); export const togglePreviewPanel = () => - cy.get('[data-testid="togglePreview"]').then(el => el.get(0).click()); + cy.get('[data-testid="togglePreview"]').then((el) => el.get(0).click()); export const gotoPreview = () => { togglePreviewPanel() .get('[data-testid="view-prototype"]') - .then(el => cy.visit(el.get(0).href)); + .then((el) => cy.visit(el.get(0).href)); }; export const toggleSnippets = () => cy.get('[data-testid="toggleSnippets"]').click(); -export const filterSnippets = search => +export const filterSnippets = (search) => cy .get('[data-testid="filterSnippets"]') .type(search, { force: true }) @@ -61,29 +62,29 @@ export const assertSnippetsListIsVisible = () => const getSnippets = () => cy.get('[data-testid="snippet-list"] li'); -export const selectSnippetByIndex = index => getSnippets().eq(index); +export const selectSnippetByIndex = (index) => getSnippets().eq(index); -export const mouseOverSnippet = index => +export const mouseOverSnippet = (index) => selectSnippetByIndex(index) .trigger('mousemove', { force: true }) // force stops cypress scrolling the panel out of the editor .wait(WAIT_FOR_FRAME_TO_RENDER); -export const assertSnippetCount = count => +export const assertSnippetCount = (count) => getSnippets().should('have.length', count); -export const assertFirstFrameContains = text => { - getFirstFrame().then($el => +export const assertFirstFrameContains = (text) => { + getFirstFrame().then(($el) => cy .wrap($el.contents().find('body')) .wait(WAIT_FOR_FRAME_TO_RENDER) - .then(el => { + .then((el) => { expect(el.get(0).innerText).to.eq(text); }) ); }; -export const assertCodePaneContains = text => { - getCodeEditor().then($el => { +export const assertCodePaneContains = (text) => { + getCodeEditor().then(($el) => { const code = $el.get(0).innerText; // removes code mirrors invisible last line character placeholder // which is inserted to preserve prettiers new line at end of string. @@ -91,21 +92,21 @@ export const assertCodePaneContains = text => { }); }; -export const assertCodePaneLineCount = lines => { +export const assertCodePaneLineCount = (lines) => { getCodeEditor().within(() => cy.get('.CodeMirror-line').should('have.length', lines) ); }; -export const assertFramesMatch = matches => +export const assertFramesMatch = (matches) => getPreviewFrameNames() .should('have.length', matches.length) - .then(frames => { + .then((frames) => { const frameNames = frames.map((_, el) => el.innerText).toArray(); return expect(frameNames).to.deep.equal(matches); }); -export const assertPreviewContains = text => - cy.get('body').then(el => { +export const assertPreviewContains = (text) => + cy.get('body').then((el) => { expect(el.get(0).innerText).to.eq(text); }); diff --git a/examples/braid-design-system/playroom.config.js b/examples/braid-design-system/playroom.config.js index a8b9a365..699f0514 100644 --- a/examples/braid-design-system/playroom.config.js +++ b/examples/braid-design-system/playroom.config.js @@ -41,9 +41,9 @@ module.exports = { use: { loader: 'babel-loader', options: { - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } + presets: ['@babel/preset-env', '@babel/preset-react'], + }, + }, }, { test: /(?!\.css)\.js$/, @@ -52,40 +52,40 @@ module.exports = { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], - plugins: ['@babel/plugin-proposal-class-properties'] - } - } + plugins: ['@babel/plugin-proposal-class-properties'], + }, + }, }, { test: /\.css\.js$/, include: braidDir, use: [ { - loader: 'style-loader' + loader: 'style-loader', }, { loader: 'css-loader', options: { modules: { mode: 'local', - localIdentName: '[name]__[local]___[hash:base64:7]' + localIdentName: '[name]__[local]___[hash:base64:7]', }, - importLoaders: 2 - } + importLoaders: 2, + }, }, { - loader: 'css-in-js-loader' + loader: 'css-in-js-loader', }, { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], - plugins: ['@babel/plugin-proposal-class-properties'] - } - } - ] - } - ] - } - }) + plugins: ['@babel/plugin-proposal-class-properties'], + }, + }, + ], + }, + ], + }, + }), }; diff --git a/examples/braid-design-system/playroom/snippets.js b/examples/braid-design-system/playroom/snippets.js index 271b8b3a..4f7c9626 100644 --- a/examples/braid-design-system/playroom/snippets.js +++ b/examples/braid-design-system/playroom/snippets.js @@ -6,20 +6,20 @@ export default [ name: 'Default', code: dedent` Text - ` + `, }, { group: 'Checkbox', name: 'Unchecked', code: dedent` {}} /> - ` + `, }, { group: 'Checkbox', name: 'Checked', code: dedent` {}} /> - ` - } + `, + }, ]; diff --git a/examples/material-ui/playroom.config.js b/examples/material-ui/playroom.config.js index 0e5831fa..249e2b0a 100644 --- a/examples/material-ui/playroom.config.js +++ b/examples/material-ui/playroom.config.js @@ -9,5 +9,5 @@ module.exports = { - ` + `, }; diff --git a/examples/office-ui-fabric-react/playroom.config.js b/examples/office-ui-fabric-react/playroom.config.js index 146c0141..b5463ec3 100644 --- a/examples/office-ui-fabric-react/playroom.config.js +++ b/examples/office-ui-fabric-react/playroom.config.js @@ -19,7 +19,7 @@ module.exports = { typeScriptFiles: [ './components/**/*.{ts,tsx}', './themes/**/*.{ts,tsx}', - '!**/node_modules' + '!**/node_modules', ], webpackConfig: () => ({ module: { @@ -31,9 +31,9 @@ module.exports = { use: { loader: 'babel-loader', options: { - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } + presets: ['@babel/preset-env', '@babel/preset-react'], + }, + }, }, { test: /(?!\.css)\.js$/, @@ -42,38 +42,38 @@ module.exports = { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], - plugins: ['@babel/plugin-proposal-class-properties'] - } - } + plugins: ['@babel/plugin-proposal-class-properties'], + }, + }, }, { test: /\.css\.js$/, include: fabricDir, use: [ { - loader: 'style-loader' + loader: 'style-loader', }, { loader: 'css-loader', options: { modules: { mode: 'local', - localIdentName: '[name]__[local]___[hash:base64:7]' + localIdentName: '[name]__[local]___[hash:base64:7]', }, - importLoaders: 2 - } + importLoaders: 2, + }, }, { - loader: 'css-in-js-loader' + loader: 'css-in-js-loader', }, { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], - plugins: ['@babel/plugin-proposal-class-properties'] - } - } - ] + plugins: ['@babel/plugin-proposal-class-properties'], + }, + }, + ], }, { test: /\.tsx?$/, @@ -84,15 +84,15 @@ module.exports = { presets: [ '@babel/preset-env', '@babel/preset-typescript', - '@babel/preset-react' - ] - } - } - } - ] + '@babel/preset-react', + ], + }, + }, + }, + ], }, resolve: { - extensions: ['.js', '.ts', '.tsx'] - } - }) + extensions: ['.js', '.ts', '.tsx'], + }, + }), }; diff --git a/examples/office-ui-fabric-react/themes/index.ts b/examples/office-ui-fabric-react/themes/index.ts index 5677ec6d..f6e9339a 100644 --- a/examples/office-ui-fabric-react/themes/index.ts +++ b/examples/office-ui-fabric-react/themes/index.ts @@ -1,6 +1,7 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. +// eslint-disable-next-line @typescript-eslint/no-var-requires const styling = require('@uifabric/styling'); styling.loadTheme({ @@ -26,8 +27,8 @@ styling.loadTheme({ neutralPrimary: '#333333', neutralDark: '#272727', black: '#1d1d1d', - white: '#ffffff' - } + white: '#ffffff', + }, }); module.exports = { @@ -41,5 +42,5 @@ module.exports = { neutralPrimary: styling.neutralPrimary, neutralDark: styling.neutralDark, black: styling.black, - white: styling.white + white: styling.white, }; diff --git a/examples/reakit/playroom.config.js b/examples/reakit/playroom.config.js index 9f058870..cf2de732 100644 --- a/examples/reakit/playroom.config.js +++ b/examples/reakit/playroom.config.js @@ -9,5 +9,5 @@ module.exports = { - ` + `, }; diff --git a/examples/seek-style-guide/playroom.config.js b/examples/seek-style-guide/playroom.config.js index 4c604031..f75b5204 100644 --- a/examples/seek-style-guide/playroom.config.js +++ b/examples/seek-style-guide/playroom.config.js @@ -40,11 +40,11 @@ module.exports = { use: { loader: 'babel-loader', options: { - presets: ['@babel/preset-env', '@babel/preset-react'] - } - } - } - ] - } - }) + presets: ['@babel/preset-env', '@babel/preset-react'], + }, + }, + }, + ], + }, + }), }; diff --git a/examples/typescript/components/Bar/Bar.tsx b/examples/typescript/components/Bar/Bar.tsx index e9246d95..4a18e787 100644 --- a/examples/typescript/components/Bar/Bar.tsx +++ b/examples/typescript/components/Bar/Bar.tsx @@ -7,7 +7,7 @@ interface Props { const parent = { border: '1px solid currentColor', - padding: '10px 10px 10px 15px' + padding: '10px 10px 10px 15px', }; export default class Bar extends Component { diff --git a/examples/typescript/components/Foo/Foo.tsx b/examples/typescript/components/Foo/Foo.tsx index e77d623a..46b4cefb 100644 --- a/examples/typescript/components/Foo/Foo.tsx +++ b/examples/typescript/components/Foo/Foo.tsx @@ -6,7 +6,7 @@ interface Props { } const parent = { border: '1px solid currentColor', - padding: '10px 10px 10px 15px' + padding: '10px 10px 10px 15px', }; export default class Foo extends Component { diff --git a/examples/typescript/playroom.config.js b/examples/typescript/playroom.config.js index 03f5a3b6..31a19d60 100644 --- a/examples/typescript/playroom.config.js +++ b/examples/typescript/playroom.config.js @@ -15,15 +15,15 @@ module.exports = { presets: [ '@babel/preset-env', '@babel/preset-typescript', - '@babel/preset-react' - ] - } - } - } - ] + '@babel/preset-react', + ], + }, + }, + }, + ], }, resolve: { - extensions: ['.js', '.ts', '.tsx'] - } - }) + extensions: ['.js', '.ts', '.tsx'], + }, + }), }; diff --git a/examples/typescript/snippets/index.ts b/examples/typescript/snippets/index.ts index b9977c5e..39ec0730 100644 --- a/examples/typescript/snippets/index.ts +++ b/examples/typescript/snippets/index.ts @@ -6,7 +6,7 @@ export default [ name: 'Default', code: dedent` - ` + `, }, { group: 'Foo', @@ -15,7 +15,7 @@ export default [ Hello - ` + `, }, { group: 'Foo', @@ -24,7 +24,7 @@ export default [ The - ` + `, }, { group: 'Foo', @@ -33,7 +33,7 @@ export default [ Quick - ` + `, }, { group: 'Foo', @@ -42,7 +42,7 @@ export default [ Brown - ` + `, }, { group: 'Foo', @@ -51,7 +51,7 @@ export default [ Fox - ` + `, }, { group: 'Foo', @@ -60,7 +60,7 @@ export default [ Jumps - ` + `, }, { group: 'Foo', @@ -69,7 +69,7 @@ export default [ Over - ` + `, }, { group: 'Foo', @@ -78,7 +78,7 @@ export default [ Lazy - ` + `, }, { group: 'Foo', @@ -87,14 +87,14 @@ export default [ Dog - ` + `, }, { group: 'Bar', name: 'Default', code: dedent` - ` + `, }, { group: 'Bar', @@ -103,6 +103,6 @@ export default [ Hello - ` - } + `, + }, ]; diff --git a/lib/getStaticTypes.js b/lib/getStaticTypes.js index 8c2ef343..2ec7f03c 100644 --- a/lib/getStaticTypes.js +++ b/lib/getStaticTypes.js @@ -5,19 +5,19 @@ const mapValues = require('lodash/mapValues'); const omit = require('lodash/omit'); const stringRegex = /^"(.*)"$/; -const parsePropTypeName = propTypeName => { +const parsePropTypeName = (propTypeName) => { return propTypeName .split(' | ') - .filter(x => stringRegex.test(x)) - .map(x => x.replace(stringRegex, '$1')); + .filter((x) => stringRegex.test(x)) + .map((x) => x.replace(stringRegex, '$1')); }; -const filterProps = props => omit(props, 'className', 'children'); +const filterProps = (props) => omit(props, 'className', 'children'); -module.exports = async playroomConfig => { +module.exports = async (playroomConfig) => { const { cwd, - typeScriptFiles = ['**/*.{ts,tsx}', '!**/node_modules'] + typeScriptFiles = ['**/*.{ts,tsx}', '!**/node_modules'], } = playroomConfig; const tsConfigPath = await findUp('tsconfig.json', { cwd }); @@ -33,8 +33,8 @@ module.exports = async playroomConfig => { const files = await fastGlob(typeScriptFiles, { cwd, absolute: true }); const types = parse(files); const typesByDisplayName = keyBy(types, 'displayName'); - const parsedTypes = mapValues(typesByDisplayName, component => - mapValues(filterProps(component.props || {}), prop => + const parsedTypes = mapValues(typesByDisplayName, (component) => + mapValues(filterProps(component.props || {}), (prop) => parsePropTypeName(prop.type.name) ) ); diff --git a/lib/index.js b/lib/index.js index 6d9c8341..eab07cd4 100644 --- a/lib/index.js +++ b/lib/index.js @@ -2,11 +2,11 @@ const start = require('./start'); const build = require('./build'); const provideDefaultConfig = require('./provideDefaultConfig'); -module.exports = userConfig => { +module.exports = (userConfig) => { const config = provideDefaultConfig(userConfig); return { - start: callback => start(config, callback), - build: callback => build(config, callback) + start: (callback) => start(config, callback), + build: (callback) => build(config, callback), }; }; diff --git a/lib/makeDefaultWebpackConfig.js b/lib/makeDefaultWebpackConfig.js index 5b988bce..a65d9f50 100644 --- a/lib/makeDefaultWebpackConfig.js +++ b/lib/makeDefaultWebpackConfig.js @@ -1,4 +1,4 @@ -module.exports = playroomConfig => ({ +module.exports = (playroomConfig) => ({ module: { rules: [ { @@ -10,11 +10,11 @@ module.exports = playroomConfig => ({ options: { presets: [ require.resolve('@babel/preset-env'), - require.resolve('@babel/preset-react') - ] - } - } - } - ] - } + require.resolve('@babel/preset-react'), + ], + }, + }, + }, + ], + }, }); diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js index 120fe386..cf12ca6d 100644 --- a/lib/makeWebpackConfig.js +++ b/lib/makeWebpackConfig.js @@ -9,11 +9,11 @@ const makeDefaultWebpackConfig = require('./makeDefaultWebpackConfig'); const playroomPath = path.resolve(__dirname, '..'); const includePaths = [ path.resolve(playroomPath, 'lib'), - path.resolve(playroomPath, 'src') + path.resolve(playroomPath, 'src'), ]; module.exports = async (playroomConfig, options) => { - const relativeResolve = requirePath => + const relativeResolve = (requirePath) => require.resolve(requirePath, { paths: [playroomConfig.cwd] }); const staticTypes = await getStaticTypes(playroomConfig); @@ -22,7 +22,7 @@ module.exports = async (playroomConfig, options) => { ? [] : [ `webpack-dev-server/client?http://localhost:${playroomConfig.port}`, - 'webpack/hot/dev-server' + 'webpack/hot/dev-server', ]; const ourConfig = { @@ -30,12 +30,12 @@ module.exports = async (playroomConfig, options) => { entry: { index: [...devServerEntries, require.resolve('../src/index.js')], frame: [...devServerEntries, require.resolve('../src/frame.js')], - preview: [...devServerEntries, require.resolve('../src/preview.js')] + preview: [...devServerEntries, require.resolve('../src/preview.js')], }, output: { filename: '[name].[hash].js', path: path.resolve(playroomConfig.cwd, playroomConfig.outputPath), - publicPath: playroomConfig.baseUrl + publicPath: playroomConfig.baseUrl, }, resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'], @@ -51,8 +51,8 @@ module.exports = async (playroomConfig, options) => { : require.resolve('./defaultModules/themes'), __PLAYROOM_ALIAS__FRAME_COMPONENT__: playroomConfig.frameComponent ? relativeResolve(playroomConfig.frameComponent) - : require.resolve('./defaultModules/FrameComponent') - } + : require.resolve('./defaultModules/FrameComponent'), + }, }, module: { // This option fixes https://github.com/prettier/prettier/issues/4959 @@ -68,17 +68,17 @@ module.exports = async (playroomConfig, options) => { presets: [ require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react'), - require.resolve('@babel/preset-typescript') + require.resolve('@babel/preset-typescript'), ], plugins: [ require.resolve('@babel/plugin-proposal-class-properties'), require.resolve('@babel/plugin-proposal-optional-chaining'), require.resolve( '@babel/plugin-proposal-nullish-coalescing-operator' - ) - ] - } - } + ), + ], + }, + }, }, { test: /\.js$/, @@ -88,13 +88,13 @@ module.exports = async (playroomConfig, options) => { options: { presets: [ require.resolve('@babel/preset-env'), - require.resolve('@babel/preset-react') + require.resolve('@babel/preset-react'), ], plugins: [ - require.resolve('@babel/plugin-proposal-class-properties') - ] - } - } + require.resolve('@babel/plugin-proposal-class-properties'), + ], + }, + }, }, { test: /\.less$/, @@ -106,38 +106,38 @@ module.exports = async (playroomConfig, options) => { options: { modules: { mode: 'local', - localIdentName: '[name]__[local]--[hash:base64:5]' - } - } + localIdentName: '[name]__[local]--[hash:base64:5]', + }, + }, }, { loader: require.resolve('postcss-loader'), options: { - plugins: () => [require('autoprefixer')()] - } + plugins: () => [require('autoprefixer')()], + }, }, - require.resolve('less-loader') - ] + require.resolve('less-loader'), + ], }, { test: /\.css$/, include: path.dirname(require.resolve('codemirror/package.json')), - use: [require.resolve('style-loader'), require.resolve('css-loader')] - } - ] + use: [require.resolve('style-loader'), require.resolve('css-loader')], + }, + ], }, optimization: { splitChunks: { - chunks: 'all' + chunks: 'all', }, runtimeChunk: { - name: 'runtime' - } + name: 'runtime', + }, }, plugins: [ new webpack.DefinePlugin({ __PLAYROOM_GLOBAL__CONFIG__: JSON.stringify(playroomConfig), - __PLAYROOM_GLOBAL__STATIC_TYPES__: JSON.stringify(staticTypes) + __PLAYROOM_GLOBAL__STATIC_TYPES__: JSON.stringify(staticTypes), }), new HtmlWebpackPlugin({ title: playroomConfig.title @@ -146,28 +146,28 @@ module.exports = async (playroomConfig, options) => { chunksSortMode: 'none', chunks: ['index'], filename: 'index.html', - base: playroomConfig.baseUrl + base: playroomConfig.baseUrl, }), new HtmlWebpackPlugin({ title: 'Playroom Frame', chunksSortMode: 'none', chunks: ['frame'], - filename: 'frame.html' + filename: 'frame.html', }), new HtmlWebpackPlugin({ title: 'Playroom Preview', chunksSortMode: 'none', chunks: ['preview'], - filename: 'preview/index.html' + filename: 'preview/index.html', }), ...(options.production ? [] : [ new webpack.HotModuleReplacementPlugin(), - new FriendlyErrorsWebpackPlugin() - ]) + new FriendlyErrorsWebpackPlugin(), + ]), ], - devtool: options.production ? 'none' : 'eval-source-map' + devtool: options.production ? 'none' : 'eval-source-map', }; const theirConfig = playroomConfig.webpackConfig diff --git a/lib/provideDefaultConfig.js b/lib/provideDefaultConfig.js index 34cfb43f..bfc6a068 100644 --- a/lib/provideDefaultConfig.js +++ b/lib/provideDefaultConfig.js @@ -17,5 +17,5 @@ module.exports = ({ storageKey, ...restConfig }) => ({ openBrowser: true, storageKey: storageKey || generateStorageKey(), baseUrl: '', - ...restConfig + ...restConfig, }); diff --git a/lib/start.js b/lib/start.js index b9aa672c..7517dffe 100644 --- a/lib/start.js +++ b/lib/start.js @@ -16,7 +16,7 @@ module.exports = async (config, callback) => { clientLogLevel: 'none', compress: true, inline: true, - watchOptions: { ignored: /node_modules/ } + watchOptions: { ignored: /node_modules/ }, }; const compiler = webpack(webpackConfig); diff --git a/package.json b/package.json index fc9728d6..eefc47bb 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "@types/dedent": "^0.7.0", "@types/lodash": "^4.14.149", "@types/lz-string": "^1.3.33", - "@types/prettier": "^1.19.0", + "@types/prettier": "^2.0.0", "@types/react": "^16.9.19", "@types/react-dom": "^16.9.5", "autoprefixer": "^9.7.4", @@ -101,7 +101,7 @@ "open": "^7.0.0", "parse-prop-types": "^0.3.0", "postcss-loader": "^3.0.0", - "prettier": "^1.19.1", + "prettier": "^2.0.5", "prop-types": "^15.7.2", "query-string": "^6.10.1", "re-resizable": "^6.1.1", diff --git a/scripts/postCommitStatus.js b/scripts/postCommitStatus.js index 2681c740..1878bf76 100644 --- a/scripts/postCommitStatus.js +++ b/scripts/postCommitStatus.js @@ -13,7 +13,7 @@ const { Octokit } = require('@octokit/rest'); const octokit = new Octokit({ - auth: GITHUB_TOKEN + auth: GITHUB_TOKEN, }); await octokit.repos.createStatus({ @@ -23,7 +23,7 @@ state: 'success', context: 'Preview Site', target_url: `https://playroom--${GITHUB_SHA}.surge.sh`, - description: 'The preview for this PR has been successfully deployed' + description: 'The preview for this PR has been successfully deployed', }); console.log('Successfully posted commit status to GitHub'); diff --git a/src/Playroom/Button/Button.tsx b/src/Playroom/Button/Button.tsx index 55acb42d..bd87d650 100644 --- a/src/Playroom/Button/Button.tsx +++ b/src/Playroom/Button/Button.tsx @@ -30,7 +30,7 @@ export const Button = ({ }: Props) => ( diff --git a/src/Playroom/CatchErrors/CatchErrors.js b/src/Playroom/CatchErrors/CatchErrors.js index dffaa2a4..962ac257 100644 --- a/src/Playroom/CatchErrors/CatchErrors.js +++ b/src/Playroom/CatchErrors/CatchErrors.js @@ -8,13 +8,13 @@ import styles from './CatchErrors.less'; export default class CatchErrors extends Component { static propTypes = { code: PropTypes.string.isRequired, - children: PropTypes.node.isRequired + children: PropTypes.node.isRequired, }; state = { error: null, invalidCode: null, - info: null + info: null, }; componentDidCatch(error, info) { @@ -33,8 +33,8 @@ export default class CatchErrors extends Component { // Ensure the stack only contains user-provided components const componentStack = info.componentStack .split('\n') - .filter(line => /RenderCode/.test(line)) - .map(line => line.replace(/ \(created by .*/g, '')); + .filter((line) => /RenderCode/.test(line)) + .map((line) => line.replace(/ \(created by .*/g, '')); // Ignore the RenderCode container component const lines = componentStack.slice(0, componentStack.length - 1); diff --git a/src/Playroom/CodeEditor/CodeEditor.tsx b/src/Playroom/CodeEditor/CodeEditor.tsx index f1ed7c3e..f86fa433 100644 --- a/src/Playroom/CodeEditor/CodeEditor.tsx +++ b/src/Playroom/CodeEditor/CodeEditor.tsx @@ -103,7 +103,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => { ); const [debouncedChange] = useDebouncedCallback( - newCode => onChange(newCode), + (newCode) => onChange(newCode), 100 ); @@ -130,12 +130,12 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => { e.preventDefault(); const { code: formattedCode, cursor: formattedCursor } = format({ code: editorInstanceRef.current.getValue(), - cursor: editorInstanceRef.current.getCursor() + cursor: editorInstanceRef.current.getCursor(), }); dispatch({ type: 'updateCode', - payload: { code: formattedCode, cursor: formattedCursor } + payload: { code: formattedCode, cursor: formattedCursor }, }); editorInstanceRef.current.setValue(formattedCode); editorInstanceRef.current.setCursor(formattedCursor); @@ -203,7 +203,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => { editorInstanceRef.current.scrollIntoView( { line: highlightLineNumber, - ch: 0 + ch: 0, }, 200 ); @@ -219,7 +219,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => { return ( { + editorDidMount={(editorInstance) => { editorInstanceRef.current = editorInstance; validateCode(editorInstance, code); setCursorPosition(cursorPosition); @@ -230,14 +230,14 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => { debouncedChange(newCode); } }} - onCursorActivity={editor => { + onCursorActivity={(editor) => { setTimeout(() => { if (!editor.somethingSelected() && editor.hasFocus()) { const { line, ch } = editor.getCursor(); dispatch({ type: 'updateCursorPosition', - payload: { position: { line, ch }, code: editor.getValue() } + payload: { position: { line, ch }, code: editor.getValue() }, }); } }); @@ -252,7 +252,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => { hintOptions: { schemaInfo: hints }, viewportMargin: 50, extraKeys: { - Tab: cm => { + Tab: (cm) => { if (cm.somethingSelected()) { // @ts-ignore cm.indentSelection('add'); @@ -266,8 +266,8 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => { "'<'": completeAfter, "'/'": completeIfAfterLt, "' '": completeIfInTag, - "'='": completeIfInTag - } + "'='": completeIfInTag, + }, }} /> ); diff --git a/src/Playroom/Frame.js b/src/Playroom/Frame.js index b43408b8..6c34c355 100644 --- a/src/Playroom/Frame.js +++ b/src/Playroom/Frame.js @@ -11,7 +11,7 @@ export default class Frame extends Component { this.state = { themeName, - code + code, }; } diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx index 655e9173..308c351a 100644 --- a/src/Playroom/Frames/Frames.tsx +++ b/src/Playroom/Frames/Frames.tsx @@ -20,8 +20,8 @@ const playroomConfig = (window.__playroomConfig__ = __PLAYROOM_GLOBAL__CONFIG__) export default function Frame({ code, themes, widths }: FrameProps) { const scrollingPanelRef = useRef(null); - const frames = flatMap(widths, width => - themes.map(theme => ({ theme, width })) + const frames = flatMap(widths, (width) => + themes.map((theme) => ({ theme, width })) ); let renderCode = code; @@ -34,7 +34,7 @@ export default function Frame({ code, themes, widths }: FrameProps) { return (
- {frames.map(frame => ( + {frames.map((frame) => (
diff --git a/src/Playroom/FramesPanel/FramesPanel.tsx b/src/Playroom/FramesPanel/FramesPanel.tsx index 227ac6a8..7c3625ab 100644 --- a/src/Playroom/FramesPanel/FramesPanel.tsx +++ b/src/Playroom/FramesPanel/FramesPanel.tsx @@ -49,7 +49,7 @@ function FrameOption