From 159ab437136093d2a37f0a20b35bba7bb57f34be Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 12:14:51 +0200 Subject: [PATCH 01/16] Change babel default preset in react app to use babel configuration like in CRA. --- app/react/package.json | 4 +- .../src/server/framework-preset-react.js | 19 +++++--- yarn.lock | 47 +++++++++++++++++++ 3 files changed, 62 insertions(+), 8 deletions(-) diff --git a/app/react/package.json b/app/react/package.json index f24e99e1ed23..96727a089252 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -28,13 +28,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/preset-flow": "^7.0.0", - "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.1.2", "@emotion/styled": "^0.10.6", "@storybook/core": "4.1.0-alpha.7", "@storybook/node-logger": "4.1.0-alpha.7", + "babel-plugin-named-asset-import": "^0.2.3", "babel-plugin-react-docgen": "^2.0.0", + "babel-preset-react-app": "^6.1.0", "common-tags": "^1.8.0", "global": "^4.3.2", "lodash": "^4.17.11", diff --git a/app/react/src/server/framework-preset-react.js b/app/react/src/server/framework-preset-react.js index 63d66fcbb93f..d0f8c34dc7bc 100644 --- a/app/react/src/server/framework-preset-react.js +++ b/app/react/src/server/framework-preset-react.js @@ -1,10 +1,17 @@ -export function babelDefault(config) { +export function babelDefault() { return { - ...config, - presets: [ - ...config.presets, - require.resolve('@babel/preset-react'), - require.resolve('@babel/preset-flow'), + presets: [require.resolve('babel-preset-react-app')], + plugins: [ + [ + require.resolve('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: { + ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', + }, + }, + }, + ], ], }; } diff --git a/yarn.lock b/yarn.lock index fc655dc69fed..357e63002749 100644 --- a/yarn.lock +++ b/yarn.lock @@ -513,6 +513,16 @@ "@babel/helper-replace-supers" "^7.1.0" "@babel/plugin-syntax-class-properties" "^7.0.0" +"@babel/plugin-proposal-decorators@7.1.2": + version "7.1.2" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz#79829bd75fced6581ec6c7ab1930e8d738e892e7" + integrity sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/helper-replace-supers" "^7.1.0" + "@babel/helper-split-export-declaration" "^7.0.0" + "@babel/plugin-syntax-decorators" "^7.1.0" + "@babel/plugin-proposal-export-default-from@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.0.0.tgz#a057bbfd4649facfe39f33a537e18554bdd2b5da" @@ -568,6 +578,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-syntax-decorators@^7.1.0": + version "7.1.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz#2fa7c1a7905a299c9853ebcef340306675f9cbdc" + integrity sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-dynamic-import@7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz#6dfb7d8b6c3be14ce952962f658f3b7eb54c33ee" @@ -3680,6 +3697,11 @@ babel-plugin-named-asset-import@^0.2.2: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.2.2.tgz#af1290f77e073411ef1a12f17fc458f1111122eb" integrity sha512-NtESBqk8LZuNhBd1BMLxDOh0JPytMs88LwAZFmHg1ZyuGrIAO40dw7p624w+flj0uuhfKTNY8tYKsUEAZGRRFA== +babel-plugin-named-asset-import@^0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.2.3.tgz#b40ed50a848e7bb0a2a7e34d990d1f9d46fe9b38" + integrity sha512-9mx2Z9M4EGbutvXxoLV7aUBCY6ps3sqLFl094FeA2tFQzQffIh0XSsmwwQRxiSfpg3rnb5x/o46qRLxS/OzFTg== + babel-plugin-react-docgen@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-2.0.0.tgz#039d90f5a1a37131c8cc3015017eecafa8d78882" @@ -4378,6 +4400,31 @@ babel-preset-react-app@^6.0.0: babel-plugin-macros "2.4.2" babel-plugin-transform-react-remove-prop-types "0.4.18" +babel-preset-react-app@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-6.1.0.tgz#477ae7f8557eb99ce26d179530127913b733310d" + integrity sha512-8PJ4N+acfYsjhDK4gMWkqJMVRMjDKb93D+nz7lWlNe73Jcv38FNu37i5K/dVQnFDdRYHbe1SjII+Y0mCgink9A== + dependencies: + "@babel/core" "7.1.0" + "@babel/plugin-proposal-class-properties" "7.1.0" + "@babel/plugin-proposal-decorators" "7.1.2" + "@babel/plugin-proposal-object-rest-spread" "7.0.0" + "@babel/plugin-syntax-dynamic-import" "7.0.0" + "@babel/plugin-transform-classes" "7.1.0" + "@babel/plugin-transform-destructuring" "7.0.0" + "@babel/plugin-transform-flow-strip-types" "7.0.0" + "@babel/plugin-transform-react-constant-elements" "7.0.0" + "@babel/plugin-transform-react-display-name" "7.0.0" + "@babel/plugin-transform-runtime" "7.1.0" + "@babel/preset-env" "7.1.0" + "@babel/preset-react" "7.0.0" + "@babel/preset-typescript" "7.1.0" + "@babel/runtime" "7.0.0" + babel-loader "8.0.4" + babel-plugin-dynamic-import-node "2.2.0" + babel-plugin-macros "2.4.2" + babel-plugin-transform-react-remove-prop-types "0.4.18" + babel-preset-react-native@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/babel-preset-react-native/-/babel-preset-react-native-4.0.1.tgz#14ff07bdb6c8df9408082c0c18b2ce8e3392e76a" From fb6c71fb9e6992fed52f131a82afcba698abc362 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 12:59:34 +0200 Subject: [PATCH 02/16] Fix options warning --- .../cra-kitchen-sink/.storybook/config.js | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js index 1a0e64de735f..7c6868a0f159 100644 --- a/examples/cra-kitchen-sink/.storybook/config.js +++ b/examples/cra-kitchen-sink/.storybook/config.js @@ -1,18 +1,20 @@ -import { configure } from '@storybook/react'; -import { setOptions } from '@storybook/addon-options'; +import { configure, addDecorator } from '@storybook/react'; +import { withOptions } from '@storybook/addon-options'; -setOptions({ - name: 'CRA Kitchen Sink', - url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink', - goFullScreen: false, - showAddonsPanel: true, - showSearchBox: false, - addonPanelInRight: true, - sortStoriesByKind: false, - hierarchySeparator: /\./, - hierarchyRootSeparator: /\|/, - enableShortcuts: true, -}); +addDecorator( + withOptions({ + name: 'CRA Kitchen Sink', + url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink', + goFullScreen: false, + showAddonsPanel: true, + showSearchBox: false, + addonPanelInRight: true, + sortStoriesByKind: false, + hierarchySeparator: /\./, + hierarchyRootSeparator: /\|/, + enableShortcuts: true, + }) +); function loadStories() { // put welcome screen at the top of the list so it's the first one displayed From 47a9aa32bdf454ce94d1dc926e9a639840c18a90 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 13:00:13 +0200 Subject: [PATCH 03/16] Add dynamic import example --- .../src/stories/dynamic-import.stories.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 examples/cra-kitchen-sink/src/stories/dynamic-import.stories.js diff --git a/examples/cra-kitchen-sink/src/stories/dynamic-import.stories.js b/examples/cra-kitchen-sink/src/stories/dynamic-import.stories.js new file mode 100644 index 000000000000..108e56b2d14b --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/dynamic-import.stories.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { storiesOf, forceReRender } from '@storybook/react'; + +let Component; + +storiesOf('CRA', module).add('Dynamic import', () => { + if (!Component) { + import('@storybook/react/demo').then(({ Button }) => { + Component = Button; + forceReRender(); + }); + + return
Waiting for Dynamic Import
; + } + + return Hello Button; +}); From 36a044649c73aa8b4c8c6a4fec9cac5f484584b4 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 15:44:16 +0200 Subject: [PATCH 04/16] Support svgr --- app/react/package.json | 2 + ...ories.js => cra-dynamic-import.stories.js} | 0 .../src/stories/cra-svgr.stories.js | 5 + yarn.lock | 316 +++++++++++++++++- 4 files changed, 319 insertions(+), 4 deletions(-) rename examples/cra-kitchen-sink/src/stories/{dynamic-import.stories.js => cra-dynamic-import.stories.js} (100%) create mode 100644 examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js diff --git a/app/react/package.json b/app/react/package.json index 96727a089252..75a50a347c0d 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -28,10 +28,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { + "@babel/plugin-transform-react-constant-elements": "^7.0.0", "@babel/runtime": "^7.1.2", "@emotion/styled": "^0.10.6", "@storybook/core": "4.1.0-alpha.7", "@storybook/node-logger": "4.1.0-alpha.7", + "@svgr/webpack": "^4.0.3", "babel-plugin-named-asset-import": "^0.2.3", "babel-plugin-react-docgen": "^2.0.0", "babel-preset-react-app": "^6.1.0", diff --git a/examples/cra-kitchen-sink/src/stories/dynamic-import.stories.js b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js similarity index 100% rename from examples/cra-kitchen-sink/src/stories/dynamic-import.stories.js rename to examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js diff --git a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js new file mode 100644 index 000000000000..69898bb866f3 --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js @@ -0,0 +1,5 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { ReactComponent as Logo } from '../logo.svg'; + +storiesOf('CRA', module).add('Svgr', () => ); diff --git a/yarn.lock b/yarn.lock index 357e63002749..be3f40dfea96 100644 --- a/yarn.lock +++ b/yarn.lock @@ -247,6 +247,26 @@ semver "^5.4.1" source-map "^0.5.0" +"@babel/core@^7.1.5": + version "7.1.6" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.6.tgz#3733cbee4317429bc87c62b29cf8587dba7baeb3" + integrity sha512-Hz6PJT6e44iUNpAn8AoyAs6B3bl60g7MJQaI0rZEar6ECzh6+srYO1xlIdssio34mPaUtAb1y+XlkkSJzok3yw== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/generator" "^7.1.6" + "@babel/helpers" "^7.1.5" + "@babel/parser" "^7.1.6" + "@babel/template" "^7.1.2" + "@babel/traverse" "^7.1.6" + "@babel/types" "^7.1.6" + convert-source-map "^1.1.0" + debug "^4.1.0" + json5 "^2.1.0" + lodash "^4.17.10" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + "@babel/generator@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42" @@ -269,6 +289,17 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/generator@^7.1.6": + version "7.1.6" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.6.tgz#001303cf87a5b9d093494a4bf251d7b5d03d3999" + integrity sha512-brwPBtVvdYdGxtenbQgfCdDPmtkmUBZPjUoK5SXJEBuHaA5BCubh9ly65fzXz7R6o5rA76Rs22ES8Z+HCc0YIQ== + dependencies: + "@babel/types" "^7.1.6" + jsesc "^2.5.1" + lodash "^4.17.10" + source-map "^0.5.0" + trim-right "^1.0.1" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -464,6 +495,15 @@ "@babel/traverse" "^7.1.0" "@babel/types" "^7.1.2" +"@babel/helpers@^7.1.5": + version "7.1.5" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.1.5.tgz#68bfc1895d685f2b8f1995e788dbfe1f6ccb1996" + integrity sha512-2jkcdL02ywNBry1YNFAH/fViq4fXG0vdckHqeJk+75fpQ2OH+Az6076tX/M0835zA45E0Cqa6pV5Kiv9YOqjEg== + dependencies: + "@babel/template" "^7.1.2" + "@babel/traverse" "^7.1.5" + "@babel/types" "^7.1.5" + "@babel/highlight@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5" @@ -492,6 +532,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.3.tgz#2c92469bac2b7fbff810b67fca07bd138b48af77" integrity sha512-gqmspPZOMW3MIRb9HlrnbZHXI1/KHTOroBwN1NcLL6pWxzqzEKGvRTq0W/PxS45OtQGbaFikSQpkS5zbnsQm2w== +"@babel/parser@^7.1.6": + version "7.1.6" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.6.tgz#16e97aca1ec1062324a01c5a6a7d0df8dd189854" + integrity sha512-dWP6LJm9nKT6ALaa+bnL247GHHMWir3vSlZ2+IHgHgktZQx0L3Uvq2uAWcuzIe+fujRsYWBW2q622C5UvGK9iQ== + "@babel/plugin-proposal-async-generator-functions@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce" @@ -672,6 +717,14 @@ "@babel/helper-plugin-utils" "^7.0.0" lodash "^4.17.10" +"@babel/plugin-transform-block-scoping@^7.1.5": + version "7.1.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.1.5.tgz#3e8e0bc9a5104519923302a24f748f72f2f61f37" + integrity sha512-jlYcDrz+5ayWC7mxgpn1Wj8zj0mmjCT2w0mPIMSwO926eXBRxpEgoN/uQVRBfjtr8ayjcmS+xk2G1jaP8JjMJQ== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + lodash "^4.17.10" + "@babel/plugin-transform-classes@7.1.0", "@babel/plugin-transform-classes@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.1.0.tgz#ab3f8a564361800cbc8ab1ca6f21108038432249" @@ -984,6 +1037,53 @@ js-levenshtein "^1.1.3" semver "^5.3.0" +"@babel/preset-env@^7.1.5": + version "7.1.6" + resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.6.tgz#a0bf4b96b6bfcf6e000afc5b72b4abe7cc13ae97" + integrity sha512-YIBfpJNQMBkb6MCkjz/A9J76SNCSuGVamOVBgoUkLzpJD/z8ghHi9I42LQ4pulVX68N/MmImz6ZTixt7Azgexw== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-proposal-async-generator-functions" "^7.1.0" + "@babel/plugin-proposal-json-strings" "^7.0.0" + "@babel/plugin-proposal-object-rest-spread" "^7.0.0" + "@babel/plugin-proposal-optional-catch-binding" "^7.0.0" + "@babel/plugin-proposal-unicode-property-regex" "^7.0.0" + "@babel/plugin-syntax-async-generators" "^7.0.0" + "@babel/plugin-syntax-object-rest-spread" "^7.0.0" + "@babel/plugin-syntax-optional-catch-binding" "^7.0.0" + "@babel/plugin-transform-arrow-functions" "^7.0.0" + "@babel/plugin-transform-async-to-generator" "^7.1.0" + "@babel/plugin-transform-block-scoped-functions" "^7.0.0" + "@babel/plugin-transform-block-scoping" "^7.1.5" + "@babel/plugin-transform-classes" "^7.1.0" + "@babel/plugin-transform-computed-properties" "^7.0.0" + "@babel/plugin-transform-destructuring" "^7.0.0" + "@babel/plugin-transform-dotall-regex" "^7.0.0" + "@babel/plugin-transform-duplicate-keys" "^7.0.0" + "@babel/plugin-transform-exponentiation-operator" "^7.1.0" + "@babel/plugin-transform-for-of" "^7.0.0" + "@babel/plugin-transform-function-name" "^7.1.0" + "@babel/plugin-transform-literals" "^7.0.0" + "@babel/plugin-transform-modules-amd" "^7.1.0" + "@babel/plugin-transform-modules-commonjs" "^7.1.0" + "@babel/plugin-transform-modules-systemjs" "^7.0.0" + "@babel/plugin-transform-modules-umd" "^7.1.0" + "@babel/plugin-transform-new-target" "^7.0.0" + "@babel/plugin-transform-object-super" "^7.1.0" + "@babel/plugin-transform-parameters" "^7.1.0" + "@babel/plugin-transform-regenerator" "^7.0.0" + "@babel/plugin-transform-shorthand-properties" "^7.0.0" + "@babel/plugin-transform-spread" "^7.0.0" + "@babel/plugin-transform-sticky-regex" "^7.0.0" + "@babel/plugin-transform-template-literals" "^7.0.0" + "@babel/plugin-transform-typeof-symbol" "^7.0.0" + "@babel/plugin-transform-unicode-regex" "^7.0.0" + browserslist "^4.1.0" + invariant "^2.2.2" + js-levenshtein "^1.1.3" + semver "^5.3.0" + "@babel/preset-flow@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2" @@ -1088,6 +1188,21 @@ globals "^11.1.0" lodash "^4.17.10" +"@babel/traverse@^7.1.5", "@babel/traverse@^7.1.6": + version "7.1.6" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.6.tgz#c8db9963ab4ce5b894222435482bd8ea854b7b5c" + integrity sha512-CXedit6GpISz3sC2k2FsGCUpOhUqKdyL0lqNrImQojagnUMXf8hex4AxYFRuMkNGcvJX5QAFGzB5WJQmSv8SiQ== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/generator" "^7.1.6" + "@babel/helper-function-name" "^7.1.0" + "@babel/helper-split-export-declaration" "^7.0.0" + "@babel/parser" "^7.1.6" + "@babel/types" "^7.1.6" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.10" + "@babel/types@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757" @@ -1106,6 +1221,15 @@ lodash "^4.17.10" to-fast-properties "^2.0.0" +"@babel/types@^7.1.5", "@babel/types@^7.1.6": + version "7.1.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.6.tgz#0adb330c3a281348a190263aceb540e10f04bcce" + integrity sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w== + dependencies: + esutils "^2.0.2" + lodash "^4.17.10" + to-fast-properties "^2.0.0" + "@csstools/convert-colors@^1.4.0": version "1.4.0" resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" @@ -1979,6 +2103,60 @@ dependencies: babel-runtime "^6.5.0" +"@svgr/babel-plugin-add-jsx-attribute@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.0.0.tgz#5acf239cd2747b1a36ec7e708de05d914cb9b948" + integrity sha512-PDvHV2WhSGCSExp+eIMEKxYd1Q0SBvXLb4gAOXbdh0dswHFFgXWzxGjCmx5aln4qGrhkuN81khzYzR/44DYaMA== + +"@svgr/babel-plugin-remove-jsx-attribute@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.0.3.tgz#32564b5c4d761b51e34492b6a4894196c0f75803" + integrity sha512-fpG7AzzJxz1tc8ITYS1jCAt1cq4ydK2R+sx//BMTJgvOjfk91M5GiqFolP8aYTzLcum92IGNAVFS3zEcucOQEA== + +"@svgr/babel-plugin-remove-jsx-empty-expression@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.0.0.tgz#0b59338c00671cf8137eb823bd84a3efac686502" + integrity sha512-nBGVl6LzXTdk1c6w3rMWcjq3mYGz+syWc5b3CdqAiEeY/nswYDoW/cnGUKKC8ofD6/LaG+G/IUnfv3jKoHz43A== + +"@svgr/babel-plugin-replace-jsx-attribute-value@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.0.0.tgz#91785643540c2300f3d89e515b37af9b5ce4e695" + integrity sha512-ejQqpTfORy6TT5w1x/2IQkscgfbtNFjitcFDu63GRz7qfhVTYhMdiJvJ1+Aw9hmv9bO4tXThGQDr1IF5lIvgew== + +"@svgr/babel-plugin-svg-dynamic-title@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.0.0.tgz#eb8d50b80ba0a26f9b27c7268e2a803d90f1bc9e" + integrity sha512-OE6GT9WRKWqd0Dk6NJ5TYXTF5OxAyn74+c/D+gTLbCXnK2A0luEXuwMbe5zR5Px4A/jow2OeEBboTENl4vtuQg== + +"@svgr/babel-plugin-svg-em-dimensions@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.0.0.tgz#0de3972c46ff1960bed765646037a3a7f9e1da3d" + integrity sha512-QeDRGHXfjYEBTXxV0TsjWmepsL9Up5BOOlMFD557x2JrSiVGUn2myNxHIrHiVW0+nnWnaDcrkjg/jUvbJ5nKCg== + +"@svgr/babel-plugin-transform-react-native-svg@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.0.0.tgz#5e8ecc2a9870ae05fb1e553b1fe9c6b5853a1c66" + integrity sha512-c6eE6ovs14k6dmHKoy26h7iRFhjWNnwYVrDWIPfouVm/gcLIeMw/ME4i91O5LEfaDHs6kTRCcVpbAVbNULZOtw== + +"@svgr/babel-plugin-transform-svg-component@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.0.1.tgz#d134a03abed4648ce5e988507366476b2406d1a8" + integrity sha512-bhJXVIbax1pLTuGITpYX6DilG+j/hWnIjoYliPSKnv0/zLOP3afOpymM47Pa9nvHMFmSACU9WiTEngsi+KuIUQ== + +"@svgr/babel-preset@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.0.3.tgz#e5197564b41974871eddf060519d37ec4a641688" + integrity sha512-v1Up8izWrTd0x2zv7BDhg848PRbozDeRXiimNvBK/hhNyB5SF9MW6IroJgR3lrStayLXLlbRQ+16dsaMtvEVDg== + dependencies: + "@svgr/babel-plugin-add-jsx-attribute" "^4.0.0" + "@svgr/babel-plugin-remove-jsx-attribute" "^4.0.3" + "@svgr/babel-plugin-remove-jsx-empty-expression" "^4.0.0" + "@svgr/babel-plugin-replace-jsx-attribute-value" "^4.0.0" + "@svgr/babel-plugin-svg-dynamic-title" "^4.0.0" + "@svgr/babel-plugin-svg-em-dimensions" "^4.0.0" + "@svgr/babel-plugin-transform-react-native-svg" "^4.0.0" + "@svgr/babel-plugin-transform-svg-component" "^4.0.1" + "@svgr/core@^2.4.1": version "2.4.1" resolved "https://registry.yarnpkg.com/@svgr/core/-/core-2.4.1.tgz#03a407c28c4a1d84305ae95021e8eabfda8fa731" @@ -1992,6 +2170,43 @@ prettier "^1.14.2" svgo "^1.0.5" +"@svgr/core@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.0.3.tgz#1bc50f43ee123e1e9f41a9657ab1cecee1307dac" + integrity sha512-xPYCbunmRRiKrQLpiYYNY47R8Ktodhrm+aPitUKqlRv2+A4vqbtohM7ucJ4SUs5OT3ju4UxOGoS2dtT8Xm9zaw== + dependencies: + "@svgr/plugin-jsx" "^4.0.3" + camelcase "^5.0.0" + cosmiconfig "^5.0.7" + +"@svgr/hast-util-to-babel-ast@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.0.3.tgz#c6a7038e532d944d6d75dc169e9cabfb5d585d76" + integrity sha512-4b4Qx79nTjeKDv0xx0G9fKWsxsMRIOpr2Qz+/Vaw6jwqAPQ0hapQqoEWjjWT5odQmeDrAC95I1EPiOydWdlDUw== + dependencies: + "@babel/types" "^7.1.5" + +"@svgr/plugin-jsx@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.0.3.tgz#91a126548aa006e971114238036e38d534df9ac0" + integrity sha512-yVe9iR2qcXo96udPaPZK+Zd14SXjXg667muUttJro3aE7PRt8mgBhl0O3U14DWtPWsZ4+IdnTJ2YNtSGNTDjjA== + dependencies: + "@babel/core" "^7.1.5" + "@svgr/babel-preset" "^4.0.3" + "@svgr/hast-util-to-babel-ast" "^4.0.3" + rehype-parse "^5.0.0" + unified "^7.0.1" + vfile "^3.0.1" + +"@svgr/plugin-svgo@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.0.3.tgz#a07ea0a736c26fa3a5440fe8e222e2e887764cab" + integrity sha512-MgL1CrlxvNe+1tQjPUc2bIJtsdJOIE5arbHlPgW+XVWGjMZTUcyNNP8R7/IjM2Iyrc98UJY+WYiiWHrinnY9ZQ== + dependencies: + cosmiconfig "^5.0.7" + merge-deep "^3.0.2" + svgo "^1.1.1" + "@svgr/webpack@2.4.1": version "2.4.1" resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-2.4.1.tgz#68bc581ecb4c09fadeb7936bd1afaceb9da960d2" @@ -2004,6 +2219,20 @@ "@svgr/core" "^2.4.1" loader-utils "^1.1.0" +"@svgr/webpack@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.0.3.tgz#318907269dd93d4f911541236948e885df7f058d" + integrity sha512-UziJTvIYp/pznM6bjkeruXr2VgSZt6VuXQvSM2xCBXKu5Roh6+jVU/Ughnl3xO8RM6ZTNoNDthO2y/9+4OrIBQ== + dependencies: + "@babel/core" "^7.1.5" + "@babel/plugin-transform-react-constant-elements" "^7.0.0" + "@babel/preset-env" "^7.1.5" + "@babel/preset-react" "^7.0.0" + "@svgr/core" "^4.0.3" + "@svgr/plugin-jsx" "^4.0.3" + "@svgr/plugin-svgo" "^4.0.3" + loader-utils "^1.1.0" + "@types/acorn@^4.0.3": version "4.0.3" resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.3.tgz#d1f3e738dde52536f9aad3d3380d14e448820afd" @@ -5775,6 +6004,13 @@ callbackify@^1.1.0: resolved "https://registry.yarnpkg.com/callbackify/-/callbackify-1.1.0.tgz#d2a36986d28aa69714526c111209beeb9979d31e" integrity sha1-0qNphtKKppcUUmwREgm+65l50x4= +caller-callsite@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134" + integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ= + dependencies: + callsites "^2.0.0" + caller-path@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f" @@ -5782,6 +6018,13 @@ caller-path@^0.1.0: dependencies: callsites "^0.2.0" +caller-path@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4" + integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ= + dependencies: + caller-callsite "^2.0.0" + callsite@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20" @@ -5909,7 +6152,7 @@ caseless@~0.12.0: resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw= -ccount@^1.0.0: +ccount@^1.0.0, ccount@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.3.tgz#f1cec43f332e2ea5a569fd46f9f5bde4e6102aff" integrity sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw== @@ -6992,6 +7235,16 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.0.2, cosmiconfig@^5.0.5, cosmiconfig@^5.0.6: js-yaml "^3.9.0" parse-json "^4.0.0" +cosmiconfig@^5.0.7: + version "5.0.7" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.7.tgz#39826b292ee0d78eda137dfa3173bd1c21a43b04" + integrity sha512-PcLqxTKiDmNT6pSpy4N6KtuPwb53W+2tzNvwOZw0WH9N6O0vLIBq0x8aj8Oj75ere4YcGi48bDFCL+3fRJdlNA== + dependencies: + import-fresh "^2.0.0" + is-directory "^0.3.1" + js-yaml "^3.9.0" + parse-json "^4.0.0" + crc@3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba" @@ -7505,7 +7758,7 @@ de-indent@^1.0.2: resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0= -debug@*, debug@^4.0.1: +debug@*, debug@^4.0.1, debug@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87" integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg== @@ -10945,6 +11198,17 @@ hasha@^2.2.0: is-stream "^1.0.1" pinkie-promise "^2.0.0" +hast-util-from-parse5@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-4.0.2.tgz#b7164a7ffc88da4f751dc7c2f801ff8d7c143bab" + integrity sha512-I6dtjsGtDqz4fmGSiFClFyiXdKhj5bPceS6intta7k/VDuiKz9P61C6hO6WMiNNmEm1b/EtBH8f+juvz4o0uwQ== + dependencies: + ccount "^1.0.3" + hastscript "^4.0.0" + property-information "^4.0.0" + web-namespaces "^1.1.2" + xtend "^4.0.1" + hast-util-parse-selector@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.0.tgz#2175f18cdd697308fc3431d5c29a9e48dfa4817a" @@ -11482,6 +11746,14 @@ import-cwd@^2.0.0: dependencies: import-from "^2.1.0" +import-fresh@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546" + integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY= + dependencies: + caller-path "^2.0.0" + resolve-from "^3.0.0" + import-from@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1" @@ -16480,7 +16752,7 @@ parse5@4.0.0: resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA== -parse5@5.1.0: +parse5@5.1.0, parse5@^5.0.0: version "5.1.0" resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2" integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ== @@ -19018,6 +19290,15 @@ regjsparser@^0.3.0: dependencies: jsesc "~0.5.0" +rehype-parse@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-5.0.0.tgz#a103e2d9ee1b3a0dba9223e6f73623b8396e3682" + integrity sha512-nv/i5olqfyhxu/LS89zHiMdDiHtRfxsXDAe/cC6covBYIiGVnX2xbU59H23deoeSVgORtaLvHNr6sekldmca6w== + dependencies: + hast-util-from-parse5 "^4.0.0" + parse5 "^5.0.0" + xtend "^4.0.1" + relateurl@0.2.x: version "0.2.7" resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" @@ -21308,7 +21589,7 @@ svg-url-loader@^2.3.2: file-loader "1.1.11" loader-utils "1.1.0" -svgo@^1.0.0, svgo@^1.0.5: +svgo@^1.0.0, svgo@^1.0.5, svgo@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.1.1.tgz#12384b03335bcecd85cfa5f4e3375fed671cb985" integrity sha512-GBkJbnTuFpM4jFbiERHDWhZc/S/kpHToqmZag3aEBjPYK44JAN2QBjvrGIxLOoCyMZjuFQIfTO2eJd8uwLY/9g== @@ -22215,6 +22496,18 @@ unified@^7.0.0: vfile "^3.0.0" x-is-string "^0.1.0" +unified@^7.0.1: + version "7.0.2" + resolved "https://registry.yarnpkg.com/unified/-/unified-7.0.2.tgz#16aa2748a7c936b80846cc69c580cd5ebd844532" + integrity sha512-H7HiczCdNcPrqy4meJPtlJSch9+hm6GXLQ9FFLOUiFI1DIUbjvBhMKJtQ7YCaBhEPVXZwwqNyiot9xBUEtmlbg== + dependencies: + bail "^1.0.0" + extend "^3.0.0" + is-plain-obj "^1.1.0" + trough "^1.0.0" + vfile "^3.0.0" + x-is-string "^0.1.0" + union-value@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4" @@ -22634,6 +22927,16 @@ vfile@^3.0.0: unist-util-stringify-position "^1.0.0" vfile-message "^1.0.0" +vfile@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/vfile/-/vfile-3.0.1.tgz#47331d2abe3282424f4a4bb6acd20a44c4121803" + integrity sha512-y7Y3gH9BsUSdD4KzHsuMaCzRjglXN0W2EcMf0gpvu6+SbsGhMje7xDc8AEoeXy6mIwCKMI6BkjMsRjzQbhMEjQ== + dependencies: + is-buffer "^2.0.0" + replace-ext "1.0.0" + unist-util-stringify-position "^1.0.0" + vfile-message "^1.0.0" + vhost@~3.0.1: version "3.0.2" resolved "https://registry.yarnpkg.com/vhost/-/vhost-3.0.2.tgz#2fb1decd4c466aa88b0f9341af33dc1aff2478d5" @@ -22805,6 +23108,11 @@ wcwidth@^1.0.0, wcwidth@^1.0.1: dependencies: defaults "^1.0.3" +web-namespaces@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4" + integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg== + webdriver-js-extender@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz#57d7a93c00db4cc8d556e4d3db4b5db0a80c3bb7" From bccb39d9a312d5e4efd8d84ec36ce3d8d1a4d4e9 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 16:22:33 +0200 Subject: [PATCH 05/16] Use "babel-plugin-dynamic-import-node" for tests --- .babelrc.js | 2 +- .../__snapshots__/cra-dynamic-import.stories.storyshot | 7 +++++++ package.json | 1 + yarn.lock | 2 +- 4 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot diff --git a/.babelrc.js b/.babelrc.js index 8db0608b032f..97f74e90d298 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -14,7 +14,7 @@ module.exports = { ], env: { test: { - plugins: ['babel-plugin-require-context-hook'], + plugins: ['babel-plugin-require-context-hook', 'babel-plugin-dynamic-import-node'], }, }, overrides: [ diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot new file mode 100644 index 000000000000..92268dda996f --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots CRA Dynamic import 1`] = ` +
+ Waiting for Dynamic Import +
+`; diff --git a/package.json b/package.json index 4932902d6e21..d14926f59d06 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "babel-plugin-emotion": "^9.2.11", "babel-plugin-macros": "^2.4.2", "babel-plugin-require-context-hook": "^1.0.0", + "babel-plugin-dynamic-import-node": "^2.2.0", "babel-preset-vue": "^2.0.2", "chalk": "^2.4.1", "codecov": "^3.1.0", diff --git a/yarn.lock b/yarn.lock index be3f40dfea96..5a4d5a7c513e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3755,7 +3755,7 @@ babel-plugin-debug-macros@^0.2.0-beta.6: dependencies: semver "^5.3.0" -babel-plugin-dynamic-import-node@2.2.0: +babel-plugin-dynamic-import-node@2.2.0, babel-plugin-dynamic-import-node@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.2.0.tgz#c0adfb07d95f4a4495e9aaac6ec386c4d7c2524e" integrity sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA== From be70a9ecc67fcd373be397d08c6d14d5d73cb789 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 20:35:35 +0200 Subject: [PATCH 06/16] Fix some warnings + separate stories --- .../src/stories/App.stories.js | 7 ++ .../src/stories/Lifecycle.stories.js | 5 ++ .../__snapshots__/App.stories.storyshot | 29 ++++++++ .../__snapshots__/Lifecycle.stories.storyshot | 7 ++ .../__snapshots__/index.stories.storyshot | 65 ----------------- .../long-description.stories.storyshot | 18 +++++ .../src/stories/index.stories.js | 71 ++++++++----------- .../src/stories/long-description.stories.js | 9 +++ 8 files changed, 103 insertions(+), 108 deletions(-) create mode 100644 examples/cra-kitchen-sink/src/stories/App.stories.js create mode 100644 examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js create mode 100644 examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot create mode 100644 examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot create mode 100644 examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot create mode 100644 examples/cra-kitchen-sink/src/stories/long-description.stories.js diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js new file mode 100644 index 000000000000..0129759479c5 --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/App.stories.js @@ -0,0 +1,7 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +// eslint-disable-next-line import/extensions,import/no-unresolved +import App from 'App'; + +storiesOf('App', module).add('full app', () => ); diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js new file mode 100644 index 000000000000..701812e1e03c --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js @@ -0,0 +1,5 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import LifecycleLogger from '../components/LifecycleLogger'; + +storiesOf('Lifecycle', module).add('logging', () => ); diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot new file mode 100644 index 000000000000..e80329a49dc2 --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots App full app 1`] = ` +
+
+ +

+ Welcome to React +

+
+

+ To get started, edit + + src/App.js + + and save to reload. +

+
+`; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot new file mode 100644 index 000000000000..b53b1b408776 --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Lifecycle logging 1`] = ` +
+ Lifecycle methods are logged to the console +
+`; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot index 2706c8490337..7aca90b808da 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot @@ -1,33 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots App full app 1`] = ` -
-
- -

- Welcome to React -

-
-

- To get started, edit - - src/App.js - - and save to reload. -

-
-`; - exports[`Storyshots Button addons composition 1`] = ` .emotion-4 { display: -webkit-box; @@ -168,13 +140,6 @@ exports[`Storyshots Button addons composition 1`] = ` > -
- -
@@ -445,13 +410,6 @@ exports[`Storyshots Button with new info 1`] = ` >
-
- -
@@ -768,26 +726,3 @@ exports[`Storyshots Button with text 1`] = ` Hello Button `; - -exports[`Storyshots Lifecycle logging 1`] = ` -
- Lifecycle methods are logged to the console -
-`; - -exports[`Storyshots Some really long story kind description with text 1`] = ` -
-
- -
-
-`; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot new file mode 100644 index 000000000000..08c35849a01a --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Some really long story kind description with text 1`] = ` +
+
+ +
+
+`; diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js index 361d6aca77fa..550b203013c0 100644 --- a/examples/cra-kitchen-sink/src/stories/index.stories.js +++ b/examples/cra-kitchen-sink/src/stories/index.stories.js @@ -1,17 +1,11 @@ import React from 'react'; - import { storiesOf } from '@storybook/react'; -import { setOptions } from '@storybook/addon-options'; import { action } from '@storybook/addon-actions'; import { withNotes } from '@storybook/addon-notes'; -import centered from '@storybook/addon-centered'; import { withInfo } from '@storybook/addon-info'; import { Button } from '@storybook/react/demo'; -// eslint-disable-next-line import/extensions,import/no-unresolved -import App from 'App'; import Container from './Container'; -import LifecycleLogger from '../components/LifecycleLogger'; const InfoButton = () => ( ( storiesOf('Button', module) .addDecorator(withNotes) - .add('with text', () => ( - - )) - .add('with some emoji', () => ( - - )) + .add('with text', () => , { + options: { selectedAddonPanel: 'storybook/actions/actions-panel' }, + }) .add( - 'with notes', + 'with some emoji', () => ( - ), - { notes: 'A very simple button' } + { + options: { selectedAddonPanel: 'storybook/actions/actions-panel' }, + } ) + .add('with notes', () => , { + notes: 'A very simple button', + options: { selectedAddonPanel: 'storybook/notes/panel' }, + }) .add( 'with new info', withInfo( 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' )(context => ( - {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })} click the label in top right for info about "{context.story}" - )) + )), + { + options: { selectedAddonPanel: 'storybook/info/info-panel' }, + } ) .add( 'addons composition', - withInfo('see Notes panel for composition info')( - withNotes('Composition: Info(Notes())')(context => ( -
- {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })} - click the label in top right for info about "{context.story}" -
- )) - ) + withInfo('see Notes panel for composition info')(context => ( +
+ click the label in top right for info about "{context.story}" +
+ )), + { + notes: 'Composition: Info(Notes())', + options: { selectedAddonPanel: 'storybook/notes/panel' }, + } ); - -storiesOf('App', module).add('full app', () => ); - -storiesOf('Some really long story kind description', module) - .addDecorator(centered) - .add('with text', () => ); - -storiesOf('Lifecycle', module).add('logging', () => ); diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js new file mode 100644 index 000000000000..fb111e7c954c --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import centered from '@storybook/addon-centered'; +import { Button } from '@storybook/react/demo'; + +storiesOf('Some really long story kind description', module) + .addDecorator(centered) + .add('with text', () => ); From 78bc9d77705f10f927b561e47f9b781e60a64805 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 20:39:22 +0200 Subject: [PATCH 07/16] Delete index.js --- .../cra-kitchen-sink/src/stories/index.js | 352 ------------------ 1 file changed, 352 deletions(-) delete mode 100644 examples/cra-kitchen-sink/src/stories/index.js diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js deleted file mode 100644 index fa4cf2534100..000000000000 --- a/examples/cra-kitchen-sink/src/stories/index.js +++ /dev/null @@ -1,352 +0,0 @@ -// import React from 'react'; -// import PropTypes from 'prop-types'; -// import EventEmiter from 'eventemitter3'; - -// import { storiesOf } from '@storybook/react'; -// import { setOptions } from '@storybook/addon-options'; -// import { action } from '@storybook/addon-actions'; -// import { withNotes, WithNotes } from '@storybook/addon-notes'; -// import { LinkTo, linkTo, hrefTo } from '@storybook/addon-links'; -// import WithEvents from '@storybook/addon-events'; -// import { -// withKnobs, -// text, -// number, -// boolean, -// color, -// select, -// array, -// date, -// button, -// object, -// } from '@storybook/addon-knobs/react'; -// import centered from '@storybook/addon-centered'; -// import { withInfo } from '@storybook/addon-info'; - -// import { Button, Welcome } from '@storybook/react/demo'; - -// import App from '../App'; -// import Logger from './Logger'; -// import Container from './Container'; -// import DocgenButton from '../components/DocgenButton'; -// import FlowTypeButton from '../components/FlowTypeButton'; -// import ImportedPropsButton from '../components/ImportedPropsButton'; - -// const EVENTS = { -// TEST_EVENT_1: 'test-event-1', -// TEST_EVENT_2: 'test-event-2', -// TEST_EVENT_3: 'test-event-3', -// TEST_EVENT_4: 'test-event-4', -// }; - -// const emiter = new EventEmiter(); -// const emit = emiter.emit.bind(emiter); - -// storiesOf('Welcome', module).add('to Storybook', () => ); - -// const InfoButton = () => ( -// -// {' '} -// Show Info{' '} -// -// ); - -// class AsyncItemLoader extends React.Component { -// constructor() { -// super(); -// this.state = { items: [] }; -// } - -// loadItems() { -// setTimeout(() => this.setState({ items: ['pencil', 'pen', 'eraser'] }), 1500); -// } - -// render() { -// button('Load the items', () => this.loadItems()); -// return this.props.children(this.state.items); -// } -// } -// AsyncItemLoader.propTypes = { children: PropTypes.func.isRequired }; - -// storiesOf('Button', module) -// .addDecorator(withKnobs) -// .add('with text', () => ( -// -// )) -// .add('with some emoji', () => ( -// -// )) -// .add('with notes', () => ( -// -// -// -// )) -// .add('with knobs', () => { -// setOptions({ selectedAddonPanel: 'storybooks/storybook-addon-knobs' }); -// const name = text('Name', 'Storyteller'); -// const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }); -// const fruits = { -// apple: 'Apple', -// banana: 'Banana', -// cherry: 'Cherry', -// }; -// const fruit = select('Fruit', fruits, 'apple'); -// const dollars = number('Dollars', 12.5); - -// // NOTE: color picker is currently broken -// const backgroundColor = color('background', '#ffff00'); -// const items = array('Items', ['Laptop', 'Book', 'Whiskey']); -// const otherStyles = object('Styles', { -// border: '3px solid #ff00ff', -// padding: '10px', -// }); -// const nice = boolean('Nice', true); -// const children = object('Children', [ -// { -// name: 'Jane', -// age: 13, -// }, -// { -// name: 'John', -// age: 8, -// }, -// ]); - -// // NOTE: put this last because it currently breaks everything after it :D -// const birthday = date('Birthday', new Date('Jan 20 2017')); - -// const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}.`; -// const style = { backgroundColor, ...otherStyles }; -// const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'; -// const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }; - -// return ( -//
-//

{intro}

-//

My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}

-//

I have {children.length} children:

-//
    -// {children.map(child => ( -//
  1. -// {child.name}, {child.age} years old -//
    2. -// ))} -//
-//

My wallet contains: ${dollars.toFixed(2)}

-//

In my backpack, I have:

-//
    {items.map(item =>
  • {item}
    • )}
-//

{salutation}

-//
-//

PS. My shirt pocket contains:

-// -// {loadedItems => { -// if (!loadedItems.length) return
  • No items!
    • ; -// return
      {loadedItems.map(i =>
    • {i}
      • )}
    ; -// }} -//     -//
    -// ); -// }) -// .add( -// 'with new info', -// withInfo( -// 'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.' -// )(context => ( -// -// {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })} -// click the label in top right for info about "{context.story}" -// -// )) -// ) -// .add( -// 'addons composition', -// withInfo('see Notes panel for composition info')( -// withNotes('Composition: Info(Notes())')(context => ( -//
    -// {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })} -// click the label in top right for info about "{context.story}" -//
    -// )) -// ) -// ); - -// storiesOf('AddonLink.Link', module) -// .add('First', () => Go to Second) -// .add('Second', () => Go to First); - -// storiesOf('AddonLink.Button', module) -// .add('First', () => ( -// -// )) -// .add('Second', () => ( -// -// )); - -// storiesOf('AddonLink.Select', module) -// .add('Index', () => ( -// -// )) -// .add('First', () => Go back) -// .add('Second', () => Go back) -// .add('Third', () => Go back); - -// storiesOf('AddonLink.Href', module).add('log', () => { -// hrefTo('AddonLink.Href', 'log').then(action('URL of this story')); - -// return See action logger; -// }); - -// storiesOf('App', module).add('full app', () => ); - -// storiesOf('Some really long story kind description', module) -// .addDecorator(centered) -// .add('with text', () => ); - -// storiesOf('WithEvents', module) -// .addDecorator(getStory => ( -// -// {getStory()} -// -// )) -// .add('Logger', () => ); - -// storiesOf('withNotes', module) -// .add('with some text', withNotes('Hello guys')(() =>
    Hello guys
    )) -// .add('with some emoji', withNotes('My notes on emojies')(() =>

    🤔😳😯😮

    )) -// .add( -// 'with a button and some emoji', -// withNotes('My notes on a button with emojies')(() => ( -// -// )) -// ) -// .add('with old API', () => ( -// -// -// -// )); - -// storiesOf('component.base.Link', module) -// .addDecorator(withKnobs) -// .add('first', () => {text('firstLink', 'first link')}) -// .add('second', () => {text('secondLink', 'second link')}); - -// storiesOf('component.base.Span', module) -// .add('first', () => first span) -// .add('second', () => second span); - -// storiesOf('component.common.Div', module) -// .add('first', () =>
    first div
    ) -// .add('second', () =>
    second div
    ); - -// storiesOf('component.common.Table', module) -// .add('first', () => ( -// -// -// -// -//
    first table
    -// )) -// .add('second', () => ( -// -// -// -// -//
    first table
    -// )); - -// storiesOf('component.Button', module) -// .add('first', () => ) -// .add('second', () => ); - -// // Atomic - -// storiesOf('Cells/Molecules.Atoms/simple', module) -// .addDecorator(withKnobs) -// .add('with text', () => ) -// .add('with some emoji', () => ); - -// storiesOf('Cells/Molecules/Atoms.more', module) -// .add('with text2', () => ) -// .add('with some emoji2', () => ); - -// storiesOf('Cells/Molecules', module) -// .add('with text', () => ) -// .add('with some emoji', () => ); - -// storiesOf('Cells.Molecules.Atoms', module) -// .add('with text2', () => ) -// .add('with some emoji2', () => ); From 4544359ec7ce416d580cb2329b2b651d860c5e63 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Fri, 23 Nov 2018 21:03:11 +0200 Subject: [PATCH 08/16] Use CRA's fileTransformer to import svgs --- examples/cra-kitchen-sink/jest.config.js | 10 ++++++++++ .../src/stories/__snapshots__/App.stories.storyshot | 2 +- .../__snapshots__/cra-dynamic-import.stories.storyshot | 6 ++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/examples/cra-kitchen-sink/jest.config.js b/examples/cra-kitchen-sink/jest.config.js index 50cc5a0e3654..b1ffc36fb83f 100644 --- a/examples/cra-kitchen-sink/jest.config.js +++ b/examples/cra-kitchen-sink/jest.config.js @@ -3,5 +3,15 @@ const config = require('../../jest.config'); module.exports = { ...config, roots: [__dirname], + moduleNameMapper: { + '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': + '/__mocks__/fileMock.js', + '\\.(css|scss)$': '/__mocks__/styleMock.js', + '\\.(md)$': '/__mocks__/htmlMock.js', + }, + transform: { + ...config.transform, + '^.+\\.svg$': '/node_modules/react-scripts/config/jest/fileTransform.js', + }, moduleDirectories: ['/node_modules', 'src'], }; diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot index e80329a49dc2..400883b6416f 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot @@ -10,7 +10,7 @@ exports[`Storyshots App full app 1`] = `

    Welcome to React diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot index 92268dda996f..0b6f8f75b672 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot @@ -5,3 +5,9 @@ exports[`Storyshots CRA Dynamic import 1`] = ` Waiting for Dynamic Import

    `; + +exports[`Storyshots CRA Svgr 1`] = ` + + logo.svg + +`; From ef18eb08fce6acc254bf51a3b0e8ef14cc40e6f0 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 12:27:42 +0200 Subject: [PATCH 09/16] Fallback to regular `react-scripts` in case it fails on a custom --- app/react/src/server/cra-config.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.js index 958b369e01c7..c0ced8bbd431 100644 --- a/app/react/src/server/cra-config.js +++ b/app/react/src/server/cra-config.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ import fs from 'fs'; import path from 'path'; import semver from 'semver'; @@ -20,12 +21,22 @@ export function getReactScriptsPath({ noCache } = {}) { return reactScriptsPath; } -export function isReactScriptsInstalled(requiredVersion = '2.0.0') { +function getReactScriptsVersion() { try { // eslint-disable-next-line global-require, import/no-dynamic-require - const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json')); - if (semver.lt(reactScriptsJson.version, requiredVersion)) return false; - return true; + const { version } = require(path.join(getReactScriptsPath(), 'package.json')); + return version; + } catch { + // eslint-disable-next-line global-require + const { version } = require('react-scripts/package.json'); + return version; + } +} + +export function isReactScriptsInstalled(requiredVersion = '2.0.0') { + try { + const version = getReactScriptsVersion(); + return !semver.lt(version, requiredVersion); } catch (e) { return false; } From 55946c4dae617cb1f7b2f42e9fe4a9b46ba177b0 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 12:29:01 +0200 Subject: [PATCH 10/16] Move svgr and dynamic-imports to cra setup --- app/react/package.json | 4 +- .../src/server/framework-preset-cra-rules.js | 13 ------ app/react/src/server/framework-preset-cra.js | 37 ++++++++++++++++ .../src/server/framework-preset-react.js | 19 +++----- app/react/src/server/options.js | 2 +- yarn.lock | 44 +------------------ 6 files changed, 48 insertions(+), 71 deletions(-) delete mode 100644 app/react/src/server/framework-preset-cra-rules.js create mode 100644 app/react/src/server/framework-preset-cra.js diff --git a/app/react/package.json b/app/react/package.json index 75a50a347c0d..e4712440f32c 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -28,7 +28,10 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { + "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-transform-react-constant-elements": "^7.0.0", + "@babel/preset-flow": "^7.0.0", + "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.1.2", "@emotion/styled": "^0.10.6", "@storybook/core": "4.1.0-alpha.7", @@ -36,7 +39,6 @@ "@svgr/webpack": "^4.0.3", "babel-plugin-named-asset-import": "^0.2.3", "babel-plugin-react-docgen": "^2.0.0", - "babel-preset-react-app": "^6.1.0", "common-tags": "^1.8.0", "global": "^4.3.2", "lodash": "^4.17.11", diff --git a/app/react/src/server/framework-preset-cra-rules.js b/app/react/src/server/framework-preset-cra-rules.js deleted file mode 100644 index 96ffc15ccdb1..000000000000 --- a/app/react/src/server/framework-preset-cra-rules.js +++ /dev/null @@ -1,13 +0,0 @@ -import { logger } from '@storybook/node-logger'; -import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config'; - -export function webpackFinal(config) { - if (!isReactScriptsInstalled()) { - logger.info('=> Using base config because react-scripts is not installed.'); - return config; - } - - logger.info('=> Loading create-react-app config.'); - - return applyCRAWebpackConfig(config); -} diff --git a/app/react/src/server/framework-preset-cra.js b/app/react/src/server/framework-preset-cra.js new file mode 100644 index 000000000000..8e3240ef6131 --- /dev/null +++ b/app/react/src/server/framework-preset-cra.js @@ -0,0 +1,37 @@ +import { logger } from '@storybook/node-logger'; +import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config'; + +export function webpackFinal(config) { + if (!isReactScriptsInstalled()) { + logger.info('=> Using base config because react-scripts is not installed.'); + return config; + } + + logger.info('=> Loading create-react-app config.'); + + return applyCRAWebpackConfig(config); +} + +export function babelDefault(config) { + if (!isReactScriptsInstalled()) { + return config; + } + + return { + ...config, + plugins: [ + ...config.plugins, + require.resolve('@babel/plugin-syntax-dynamic-import'), + [ + require.resolve('babel-plugin-named-asset-import'), + { + loaderMap: { + svg: { + ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', + }, + }, + }, + ], + ], + }; +} diff --git a/app/react/src/server/framework-preset-react.js b/app/react/src/server/framework-preset-react.js index d0f8c34dc7bc..63d66fcbb93f 100644 --- a/app/react/src/server/framework-preset-react.js +++ b/app/react/src/server/framework-preset-react.js @@ -1,17 +1,10 @@ -export function babelDefault() { +export function babelDefault(config) { return { - presets: [require.resolve('babel-preset-react-app')], - plugins: [ - [ - require.resolve('babel-plugin-named-asset-import'), - { - loaderMap: { - svg: { - ReactComponent: '@svgr/webpack?-prettier,-svgo![path]', - }, - }, - }, - ], + ...config, + presets: [ + ...config.presets, + require.resolve('@babel/preset-react'), + require.resolve('@babel/preset-flow'), ], }; } diff --git a/app/react/src/server/options.js b/app/react/src/server/options.js index c668093f84c1..44448a9a5857 100644 --- a/app/react/src/server/options.js +++ b/app/react/src/server/options.js @@ -6,6 +6,6 @@ export default { frameworkPresets: [ require.resolve('./framework-preset-react.js'), require.resolve('./framework-preset-react-docgen.js'), - require.resolve('./framework-preset-cra-rules.js'), + require.resolve('./framework-preset-cra.js'), ], }; diff --git a/yarn.lock b/yarn.lock index 039aa316e6f3..03b96d7e81e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -558,16 +558,6 @@ "@babel/helper-replace-supers" "^7.1.0" "@babel/plugin-syntax-class-properties" "^7.0.0" -"@babel/plugin-proposal-decorators@7.1.2": - version "7.1.2" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz#79829bd75fced6581ec6c7ab1930e8d738e892e7" - integrity sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q== - dependencies: - "@babel/helper-plugin-utils" "^7.0.0" - "@babel/helper-replace-supers" "^7.1.0" - "@babel/helper-split-export-declaration" "^7.0.0" - "@babel/plugin-syntax-decorators" "^7.1.0" - "@babel/plugin-proposal-export-default-from@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.0.0.tgz#a057bbfd4649facfe39f33a537e18554bdd2b5da" @@ -623,14 +613,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-syntax-decorators@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz#2fa7c1a7905a299c9853ebcef340306675f9cbdc" - integrity sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ== - dependencies: - "@babel/helper-plugin-utils" "^7.0.0" - -"@babel/plugin-syntax-dynamic-import@7.0.0": +"@babel/plugin-syntax-dynamic-import@7.0.0", "@babel/plugin-syntax-dynamic-import@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz#6dfb7d8b6c3be14ce952962f658f3b7eb54c33ee" integrity sha512-Gt9xNyRrCHCiyX/ZxDGOcBnlJl0I3IWicpZRC4CdC0P5a/I07Ya2OAMEBU+J7GmRFVmIetqEYRko6QYRuKOESw== @@ -4629,31 +4612,6 @@ babel-preset-react-app@^6.0.0: babel-plugin-macros "2.4.2" babel-plugin-transform-react-remove-prop-types "0.4.18" -babel-preset-react-app@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-6.1.0.tgz#477ae7f8557eb99ce26d179530127913b733310d" - integrity sha512-8PJ4N+acfYsjhDK4gMWkqJMVRMjDKb93D+nz7lWlNe73Jcv38FNu37i5K/dVQnFDdRYHbe1SjII+Y0mCgink9A== - dependencies: - "@babel/core" "7.1.0" - "@babel/plugin-proposal-class-properties" "7.1.0" - "@babel/plugin-proposal-decorators" "7.1.2" - "@babel/plugin-proposal-object-rest-spread" "7.0.0" - "@babel/plugin-syntax-dynamic-import" "7.0.0" - "@babel/plugin-transform-classes" "7.1.0" - "@babel/plugin-transform-destructuring" "7.0.0" - "@babel/plugin-transform-flow-strip-types" "7.0.0" - "@babel/plugin-transform-react-constant-elements" "7.0.0" - "@babel/plugin-transform-react-display-name" "7.0.0" - "@babel/plugin-transform-runtime" "7.1.0" - "@babel/preset-env" "7.1.0" - "@babel/preset-react" "7.0.0" - "@babel/preset-typescript" "7.1.0" - "@babel/runtime" "7.0.0" - babel-loader "8.0.4" - babel-plugin-dynamic-import-node "2.2.0" - babel-plugin-macros "2.4.2" - babel-plugin-transform-react-remove-prop-types "0.4.18" - babel-preset-react-native@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/babel-preset-react-native/-/babel-preset-react-native-4.0.1.tgz#14ff07bdb6c8df9408082c0c18b2ce8e3392e76a" From 842dcc72b6a5a29eaff4bb86afd71e20ea871f44 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 14:28:11 +0200 Subject: [PATCH 11/16] Refactor fallback in CRA preset a bit --- app/react/src/server/cra-config.js | 48 ++++++++++++++++-------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.js index c0ced8bbd431..403ece7a536a 100644 --- a/app/react/src/server/cra-config.js +++ b/app/react/src/server/cra-config.js @@ -1,4 +1,3 @@ -/* eslint-disable import/no-extraneous-dependencies */ import fs from 'fs'; import path from 'path'; import semver from 'semver'; @@ -11,31 +10,36 @@ const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass']; const typeScriptExtensions = ['.ts', '.tsx']; let reactScriptsPath; + export function getReactScriptsPath({ noCache } = {}) { if (reactScriptsPath && !noCache) return reactScriptsPath; - const appDirectory = fs.realpathSync(process.cwd()); - const reactScriptsScriptPath = fs.realpathSync( - path.join(appDirectory, '/node_modules/.bin/react-scripts') - ); - reactScriptsPath = path.join(reactScriptsScriptPath, '../..'); - return reactScriptsPath; -} -function getReactScriptsVersion() { try { - // eslint-disable-next-line global-require, import/no-dynamic-require - const { version } = require(path.join(getReactScriptsPath(), 'package.json')); - return version; + const appDirectory = fs.realpathSync(process.cwd()); + const reactScriptsScriptPath = fs.realpathSync( + path.join(appDirectory, '/node_modules/.bin/react-scripts') + ); + + reactScriptsPath = path.join(reactScriptsScriptPath, '../..'); + const scriptsPkgJson = path.join(reactScriptsPath, 'package.json'); + + // eslint-disable-next-line import/no-dynamic-require,global-require + require(scriptsPkgJson); } catch { - // eslint-disable-next-line global-require - const { version } = require('react-scripts/package.json'); - return version; + reactScriptsPath = 'react-scripts'; + const scriptsPkgJson = path.join(reactScriptsPath, 'package.json'); + + // eslint-disable-next-line import/no-dynamic-require,global-require + require(scriptsPkgJson); } + + return reactScriptsPath; } export function isReactScriptsInstalled(requiredVersion = '2.0.0') { try { - const version = getReactScriptsVersion(); + // eslint-disable-next-line import/no-dynamic-require,global-require + const { version } = require(path.join(getReactScriptsPath(), 'package.json')); return !semver.lt(version, requiredVersion); } catch (e) { return false; @@ -68,13 +72,13 @@ const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions)); const getTypeScriptRules = getRules(typeScriptExtensions); export function getCraWebpackConfig(mode) { - if (mode === 'production') { - // eslint-disable-next-line global-require, import/no-dynamic-require - return require(path.join(getReactScriptsPath(), 'config/webpack.config.prod')); - } + const craWebpackConfig = + mode === 'production' ? 'config/webpack.config.prod' : 'config/webpack.config.dev'; + + const pathToWebpackConfig = path.join(getReactScriptsPath(), craWebpackConfig); - // eslint-disable-next-line global-require, import/no-dynamic-require - return require(path.join(getReactScriptsPath(), 'config/webpack.config.dev')); + // eslint-disable-next-line import/no-dynamic-require,global-require + return require(pathToWebpackConfig); } export function applyCRAWebpackConfig(baseConfig) { From 012bfa736481f076e8b40c07838c4757c8648f5b Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 20:04:37 +0200 Subject: [PATCH 12/16] Use "fs" to check if the r-s/pkg.json exists --- app/react/src/server/cra-config.js | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.js index 403ece7a536a..d5875e26ca92 100644 --- a/app/react/src/server/cra-config.js +++ b/app/react/src/server/cra-config.js @@ -14,23 +14,16 @@ let reactScriptsPath; export function getReactScriptsPath({ noCache } = {}) { if (reactScriptsPath && !noCache) return reactScriptsPath; - try { - const appDirectory = fs.realpathSync(process.cwd()); - const reactScriptsScriptPath = fs.realpathSync( - path.join(appDirectory, '/node_modules/.bin/react-scripts') - ); + const appDirectory = fs.realpathSync(process.cwd()); + const reactScriptsScriptPath = fs.realpathSync( + path.join(appDirectory, '/node_modules/.bin/react-scripts') + ); - reactScriptsPath = path.join(reactScriptsScriptPath, '../..'); - const scriptsPkgJson = path.join(reactScriptsPath, 'package.json'); + reactScriptsPath = path.join(reactScriptsScriptPath, '../..'); + const scriptsPkgJson = path.join(reactScriptsPath, 'package.json'); - // eslint-disable-next-line import/no-dynamic-require,global-require - require(scriptsPkgJson); - } catch { + if (!fs.existsSync(scriptsPkgJson)) { reactScriptsPath = 'react-scripts'; - const scriptsPkgJson = path.join(reactScriptsPath, 'package.json'); - - // eslint-disable-next-line import/no-dynamic-require,global-require - require(scriptsPkgJson); } return reactScriptsPath; @@ -39,8 +32,8 @@ export function getReactScriptsPath({ noCache } = {}) { export function isReactScriptsInstalled(requiredVersion = '2.0.0') { try { // eslint-disable-next-line import/no-dynamic-require,global-require - const { version } = require(path.join(getReactScriptsPath(), 'package.json')); - return !semver.lt(version, requiredVersion); + const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json')); + return !semver.lt(reactScriptsJson.version, requiredVersion); } catch (e) { return false; } From 328a1eb96afeb0f12cfadf3f2964ab8dd51fb765 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 20:28:01 +0200 Subject: [PATCH 13/16] Support CRA's new format of webpack.config --- app/react/src/server/cra-config.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.js index d5875e26ca92..d67b6fffda8b 100644 --- a/app/react/src/server/cra-config.js +++ b/app/react/src/server/cra-config.js @@ -65,13 +65,25 @@ const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions)); const getTypeScriptRules = getRules(typeScriptExtensions); export function getCraWebpackConfig(mode) { + const pathToReactScripts = getReactScriptsPath(); + const craWebpackConfig = mode === 'production' ? 'config/webpack.config.prod' : 'config/webpack.config.dev'; - const pathToWebpackConfig = path.join(getReactScriptsPath(), craWebpackConfig); + let pathToWebpackConfig = require.resolve(path.join(pathToReactScripts, craWebpackConfig)); + + if (!fs.existsSync(pathToWebpackConfig)) { + pathToWebpackConfig = path.join(pathToReactScripts, 'config/webpack.config'); + } // eslint-disable-next-line import/no-dynamic-require,global-require - return require(pathToWebpackConfig); + const webpackConfig = require(pathToWebpackConfig); + + if (typeof webpackConfig === 'function') { + return webpackConfig(mode); + } + + return webpackConfig; } export function applyCRAWebpackConfig(baseConfig) { From a452c860aab291cd4b9c28ca69bf96a58880b04c Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 20:35:15 +0200 Subject: [PATCH 14/16] Move test + try to fix --- app/react/src/server/{__tests__ => }/cra-config.test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) rename app/react/src/server/{__tests__ => }/cra-config.test.js (93%) diff --git a/app/react/src/server/__tests__/cra-config.test.js b/app/react/src/server/cra-config.test.js similarity index 93% rename from app/react/src/server/__tests__/cra-config.test.js rename to app/react/src/server/cra-config.test.js index f48f38426d50..bf99c6aa361b 100644 --- a/app/react/src/server/__tests__/cra-config.test.js +++ b/app/react/src/server/cra-config.test.js @@ -1,8 +1,9 @@ import fs from 'fs'; -import { getReactScriptsPath } from '../cra-config'; +import { getReactScriptsPath } from './cra-config'; jest.mock('fs', () => ({ realpathSync: jest.fn(), + existsSync: () => true, })); jest.mock('mini-css-extract-plugin', () => {}); From c8cf219e434f4f7e31646c702cbf1feff020baa2 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 21:13:13 +0200 Subject: [PATCH 15/16] Bring back babel-preset-react-app --- app/react/package.json | 2 +- app/react/src/server/framework-preset-cra.js | 3 +- yarn.lock | 44 +++++++++++++++++++- 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/app/react/package.json b/app/react/package.json index e4712440f32c..7d7ea1dcdc22 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -28,7 +28,6 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-transform-react-constant-elements": "^7.0.0", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", @@ -39,6 +38,7 @@ "@svgr/webpack": "^4.0.3", "babel-plugin-named-asset-import": "^0.2.3", "babel-plugin-react-docgen": "^2.0.0", + "babel-preset-react-app": "^6.1.0", "common-tags": "^1.8.0", "global": "^4.3.2", "lodash": "^4.17.11", diff --git a/app/react/src/server/framework-preset-cra.js b/app/react/src/server/framework-preset-cra.js index 8e3240ef6131..c86bdf2e74a1 100644 --- a/app/react/src/server/framework-preset-cra.js +++ b/app/react/src/server/framework-preset-cra.js @@ -19,9 +19,8 @@ export function babelDefault(config) { return { ...config, + presets: [require.resolve('babel-preset-react-app')], plugins: [ - ...config.plugins, - require.resolve('@babel/plugin-syntax-dynamic-import'), [ require.resolve('babel-plugin-named-asset-import'), { diff --git a/yarn.lock b/yarn.lock index 7457d8bf58f8..8357a88f6dc0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -558,6 +558,16 @@ "@babel/helper-replace-supers" "^7.1.0" "@babel/plugin-syntax-class-properties" "^7.0.0" +"@babel/plugin-proposal-decorators@7.1.2": + version "7.1.2" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz#79829bd75fced6581ec6c7ab1930e8d738e892e7" + integrity sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/helper-replace-supers" "^7.1.0" + "@babel/helper-split-export-declaration" "^7.0.0" + "@babel/plugin-syntax-decorators" "^7.1.0" + "@babel/plugin-proposal-export-default-from@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.0.0.tgz#a057bbfd4649facfe39f33a537e18554bdd2b5da" @@ -613,7 +623,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-syntax-dynamic-import@7.0.0", "@babel/plugin-syntax-dynamic-import@^7.0.0": +"@babel/plugin-syntax-decorators@^7.1.0": + version "7.1.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz#2fa7c1a7905a299c9853ebcef340306675f9cbdc" + integrity sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + +"@babel/plugin-syntax-dynamic-import@7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz#6dfb7d8b6c3be14ce952962f658f3b7eb54c33ee" integrity sha512-Gt9xNyRrCHCiyX/ZxDGOcBnlJl0I3IWicpZRC4CdC0P5a/I07Ya2OAMEBU+J7GmRFVmIetqEYRko6QYRuKOESw== @@ -4612,6 +4629,31 @@ babel-preset-react-app@^6.0.0: babel-plugin-macros "2.4.2" babel-plugin-transform-react-remove-prop-types "0.4.18" +babel-preset-react-app@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-6.1.0.tgz#477ae7f8557eb99ce26d179530127913b733310d" + integrity sha512-8PJ4N+acfYsjhDK4gMWkqJMVRMjDKb93D+nz7lWlNe73Jcv38FNu37i5K/dVQnFDdRYHbe1SjII+Y0mCgink9A== + dependencies: + "@babel/core" "7.1.0" + "@babel/plugin-proposal-class-properties" "7.1.0" + "@babel/plugin-proposal-decorators" "7.1.2" + "@babel/plugin-proposal-object-rest-spread" "7.0.0" + "@babel/plugin-syntax-dynamic-import" "7.0.0" + "@babel/plugin-transform-classes" "7.1.0" + "@babel/plugin-transform-destructuring" "7.0.0" + "@babel/plugin-transform-flow-strip-types" "7.0.0" + "@babel/plugin-transform-react-constant-elements" "7.0.0" + "@babel/plugin-transform-react-display-name" "7.0.0" + "@babel/plugin-transform-runtime" "7.1.0" + "@babel/preset-env" "7.1.0" + "@babel/preset-react" "7.0.0" + "@babel/preset-typescript" "7.1.0" + "@babel/runtime" "7.0.0" + babel-loader "8.0.4" + babel-plugin-dynamic-import-node "2.2.0" + babel-plugin-macros "2.4.2" + babel-plugin-transform-react-remove-prop-types "0.4.18" + babel-preset-react-native@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/babel-preset-react-native/-/babel-preset-react-native-4.0.1.tgz#14ff07bdb6c8df9408082c0c18b2ce8e3392e76a" From c331ec816055a50437839b52ad0a7da240c3dd07 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Sat, 24 Nov 2018 21:18:11 +0200 Subject: [PATCH 16/16] Set docgen to the end --- app/react/src/server/options.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/react/src/server/options.js b/app/react/src/server/options.js index 44448a9a5857..a14cc3f4a67b 100644 --- a/app/react/src/server/options.js +++ b/app/react/src/server/options.js @@ -5,7 +5,7 @@ export default { defaultConfigName: 'create-react-app', frameworkPresets: [ require.resolve('./framework-preset-react.js'), - require.resolve('./framework-preset-react-docgen.js'), require.resolve('./framework-preset-cra.js'), + require.resolve('./framework-preset-react-docgen.js'), ], };