feat(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1 #3568

greg-in-a-box · 2024-06-24T18:15:50Z

Before | After

tjuanitas

took a quick scan for now

.flowconfig

package.json

tjuanitas · 2024-07-02T19:25:58Z

package.json

-        "webpack-bundle-analyzer": "^3.6.0",
-        "webpack-cli": "^3.3.10",
-        "webpack-dev-server": "^3.10.1",
+        "webpack": "^5.92.0",


can we check the bundle sizes between webpack 4 and webpack 5?

updated description with images

src/components/breadcrumb/README.md

scripts/styleguide.setup.js

src/components/menu/SelectMenuLinkItem.md

tjuanitas

few more questions but looks fine to me

tjuanitas · 2024-07-08T22:34:33Z

scripts/webpack.config.js

-                    discardComments: { removeAll: true },
-                    parser: safeParser,
-                },
+                ignoreOrder: true,


i have a feeling our CSS throughout the repo isn't structured consistently to be able to use this setting. is this needed?

this comes up if we dont

tjuanitas · 2024-07-08T22:36:06Z

scripts/webpack.config.js

+                // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
+                // `...`,


i don't quite understand this comment. when do we uncomment this line?

tjuanitas · 2024-07-08T22:39:54Z

src/components/menu/Menu.md

@@ -28,7 +27,7 @@ const MenuSectionHeader = require('box-ui-elements/es/components/menu')
  <MenuSeparator />
  <MenuSectionHeader>Menu Section</MenuSectionHeader>
  <MenuLinkItem>
-    <Link href="/#">Awesome Link</Link>


nit: looks like you can keep this as <Link />s in this file and SelectMenuLinkItem.md

tjuanitas · 2024-07-08T22:40:56Z

src/elements/README.md

@@ -13,7 +13,7 @@ The `messages` property is a map of message keys and translated strings. All the
 If you are using the CDNs, the i18n messages are included in the bundle.

 Example of using the `language` and `messages` properties:
-```jsx
+```jsx static


qq: what's this change do?

prevents react-styleguidist from rendering the code, this is presenting the code as an example not meant to be rendered

tjuanitas · 2024-07-08T22:52:53Z

package.json

-        "webpack-bundle-analyzer": "^3.6.0",
-        "webpack-cli": "^3.3.10",
-        "webpack-dev-server": "^3.10.1",
+        "webpack": "^5.92.0",


from the screenshot, the elements are almost doubling in size. was that expected? iirc dev console assets sizes after the webpack 4 upgrade were reduced so i'm curious what's happening here

benjamin-shen · 2024-07-09T16:11:12Z

src/components/menu/SelectMenuLinkItem.md

+The `<MenuLinkItem>` component is required to wrap anchor tags since there are special ARIA rules for those.
+The `<SelectMenuLinkItem>` component is for items that can be selected with a checkmark.
+
+Following the following standards: [WAI-ARIA Menu](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)


this is a broken link. maybe https://www.w3.org/TR/wai-aria-1.1/#menu?

oh I literally copy paste from this file

box-ui-elements/src/components/menu/Menu.md

Line 10 in f5d4955

Following the following standards: [WAI-ARIA Menu](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)

.
Good catch, ill update both places.

src/components/slide-carousel/README.md

benjamin-shen

Approved, thank you! I left a few comments, but they are not blocking.

benjamin-shen · 2024-07-09T21:29:05Z

src/components/menu/Menu.md

 The `<MenuLinkItem>` component is required to wrap anchor tags since there are special ARIA rules for those.
 The `<SelectMenuLinkItem>` component is for items that can be selected with a checkmark.


Why are these docs and code snippet duplicated across Menu.md and SelectMenuLinkItem.md? Would it be better to show at least one example of MenuLinkItem?

benjamin-shen · 2024-07-09T21:30:32Z

src/components/menu/Menu.md

+  <SelectMenuLinkItem isSelected>
+    <Link href="#">View Profile</Link>
+  </SelectMenuLinkItem>
+  <SelectMenuLinkItem>
+    <Link href="#">Awesome Link</Link>
+  </SelectMenuLinkItem>


nit: the tab spacing is not consistent here compared to other md files. It seems like there is a preference for 4 space tabs

benjamin-shen · 2024-07-09T21:31:19Z

src/components/menu/SelectMenuLinkItem.md

+The `<SelectMenuLinkItem>` component is for items that can be selected with a checkmark.
+
+Following the following standards: [WAI-ARIA Menu](https://www.w3.org/TR/wai-aria-1.1/#menu)
+
 ### Examples

 ```


nit across this entire pr:

Suggested change

```

```js

…idist 12.0.1 (box#3568) * chore(webpack): Upgrade webpack to 5 * chore(webpack): update stylegudist and resolve import and state issue * chore(webpack): fix chromatic-deploy and flow error * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback * chore(webpack): feedback --------- Co-authored-by: Jerry Jiang <[email protected]>

chore(webpack): Upgrade webpack to 5

90bc804

tjiang-box force-pushed the webpack5 branch from e7f5d49 to 1bfe089 Compare June 25, 2024 14:11

chore(webpack): update stylegudist and resolve import and state issue

ea45227

tjiang-box force-pushed the webpack5 branch from 1bfe089 to ea45227 Compare June 28, 2024 18:06

tjiang-box marked this pull request as ready for review July 2, 2024 16:49

tjiang-box requested review from a team as code owners July 2, 2024 16:49

tjiang-box changed the title ~~Webpack5~~ chore(webpack): update to webpack 5 and most updated styleguidist Jul 2, 2024

tjiang-box changed the title ~~chore(webpack): update to webpack 5 and most updated styleguidist~~ chore(webpack): upgrade to webpack 5 and most updated styleguidist Jul 2, 2024

tjiang-box changed the title ~~chore(webpack): upgrade to webpack 5 and most updated styleguidist~~ chore(webpack): upgrade to webpack 5 and react-styleguidist 12.0.1 Jul 2, 2024

greg-in-a-box changed the title ~~chore(webpack): upgrade to webpack 5 and react-styleguidist 12.0.1~~ chore(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1 Jul 2, 2024

greg-in-a-box changed the title ~~chore(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1~~ feat(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1 Jul 2, 2024

tjuanitas reviewed Jul 2, 2024

View reviewed changes

scripts/styleguide.setup.js Outdated Show resolved Hide resolved

tjuanitas reviewed Jul 2, 2024

View reviewed changes

src/components/menu/SelectMenuLinkItem.md Show resolved Hide resolved

chore(webpack): fix chromatic-deploy and flow error

5441fdc

tjiang-box force-pushed the webpack5 branch from 91d5e94 to 5441fdc Compare July 2, 2024 20:24

greg-in-a-box added 4 commits July 2, 2024 16:49

chore(webpack): feedback

8dfc5c9

chore(webpack): feedback

8d5c5f3

chore(webpack): feedback

62ed190

chore(webpack): feedback

74691d5

tjiang-box previously approved these changes Jul 8, 2024

View reviewed changes

tjuanitas reviewed Jul 8, 2024

View reviewed changes

chore(webpack): feedback

03b0fe3

greg-in-a-box dismissed tjiang-box’s stale review via 03b0fe3 July 9, 2024 00:38

tjuanitas previously approved these changes Jul 9, 2024

View reviewed changes

benjamin-shen reviewed Jul 9, 2024

View reviewed changes

chore(webpack): feedback

01043a2

greg-in-a-box dismissed tjuanitas’s stale review via 01043a2 July 9, 2024 17:28

chore(webpack): feedback

cd93363

benjamin-shen approved these changes Jul 9, 2024

View reviewed changes

greg-in-a-box merged commit a812294 into box:master Jul 10, 2024
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1 #3568

feat(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1 #3568

greg-in-a-box commented Jun 24, 2024 •

edited

Loading

tjuanitas left a comment

tjuanitas Jul 2, 2024

greg-in-a-box Jul 2, 2024

tjuanitas left a comment

tjuanitas Jul 8, 2024 •

edited

Loading

greg-in-a-box Jul 9, 2024

tjuanitas Jul 8, 2024

greg-in-a-box Jul 9, 2024

tjuanitas Jul 8, 2024

greg-in-a-box Jul 9, 2024

tjuanitas Jul 8, 2024

greg-in-a-box Jul 8, 2024

tjuanitas Jul 8, 2024

benjamin-shen Jul 9, 2024

tjiang-box Jul 9, 2024

benjamin-shen left a comment •

edited

Loading

benjamin-shen Jul 9, 2024

benjamin-shen Jul 9, 2024 •

edited

Loading

benjamin-shen Jul 9, 2024

		// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
		// `...`,

		The `<MenuLinkItem>` component is required to wrap anchor tags since there are special ARIA rules for those.
		The `<SelectMenuLinkItem>` component is for items that can be selected with a checkmark.

feat(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1 #3568

feat(webpack): BREAKING CHANGE Upgrade to webpack 5 and react-styleguidist 12.0.1 #3568

Conversation

greg-in-a-box commented Jun 24, 2024 • edited Loading

Before | After

tjuanitas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tjuanitas left a comment

Choose a reason for hiding this comment

tjuanitas Jul 8, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benjamin-shen left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benjamin-shen Jul 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greg-in-a-box commented Jun 24, 2024 •

edited

Loading

tjuanitas Jul 8, 2024 •

edited

Loading

benjamin-shen left a comment •

edited

Loading

benjamin-shen Jul 9, 2024 •

edited

Loading