chore: bump Babel & react-docgen (#4454)

Author: layershifter

.babel-preset.js

@@ -16,10 +16,7 @@ const browsers = [
 ]
 
 const plugins = [
-  ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ['@babel/plugin-proposal-optional-chaining', { loose: true }],
   '@babel/plugin-proposal-export-default-from',
-  '@babel/plugin-proposal-export-namespace-from',
   '@babel/plugin-syntax-dynamic-import',
   [
     '@babel/plugin-transform-runtime',

.circleci/config.yml

@@ -5,9 +5,12 @@ general:
     ignore:
       - gh-pages
 
+orbs:
+  browser-tools: circleci/[email protected]
+
 docker_defaults: &docker_defaults
   docker:
-    - image: circleci/node:16-browsers
+    - image: cimg/node:16.16-browsers
   working_directory: ~/project/semantic-ui-react
 
 environment:
@@ -32,6 +35,7 @@ jobs:
           key: v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - ~/.cache/yarn
+      - browser-tools/install-chrome
       - persist_to_workspace:
           root: ~/
           paths:

gulp/plugins/gulp-component-menu.js renamed to gulp/plugins/gulp-component-menu.mjs

@@ -2,7 +2,7 @@ import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import through from 'through2'
 
-import getComponentInfo from './util/getComponentInfo'
+import getComponentInfo from './util/getComponentInfo.mjs'
 
 const pluginName = 'gulp-component-menu'
 

gulp/plugins/gulp-example-menu.js renamed to gulp/plugins/gulp-example-menu.mjs

@@ -4,7 +4,7 @@ import _ from 'lodash'
 import path from 'path'
 import through from 'through2'
 
-import { parseDocSection } from './util'
+import parseDocSection from './util/parseDocSection.mjs'
 
 const SECTION_ORDER = {
   Types: 1,

gulp/plugins/gulp-example-source.js renamed to gulp/plugins/gulp-example-source.mjs

@@ -2,7 +2,7 @@ import Vinyl from 'vinyl'
 import gutil from 'gulp-util'
 import through from 'through2'
 
-import { getComponentInfo } from './util'
+import getComponentInfo from './util/getComponentInfo.mjs'
 
 const pluginName = 'gulp-react-docgen'
 

gulp/plugins/gulp-react-docgen.js renamed to gulp/plugins/gulp-react-docgen.mjs

@@ -1,13 +1,14 @@
 import _ from 'lodash'
 import path from 'path'
-import { defaultHandlers, parse, resolver } from 'react-docgen'
+import { builtinResolvers, defaultHandlers, parse } from 'react-docgen'
 import fs from 'fs'
 
-import config from '../../../config'
-import parseDefaultValue from './parseDefaultValue'
-import parseDocblock from './parseDocblock'
-import parserCustomHandler from './parserCustomHandler'
-import parseType from './parseType'
+import parseDefaultValue from './parseDefaultValue.mjs'
+import parseDocblock from './parseDocblock.mjs'
+import parserCustomHandler from './parserCustomHandler.mjs'
+import parseType from './parseType.mjs'
+
+const config = (await import('../../../config.js')).default
 
 const getComponentInfo = (filepath) => {
   const absPath = path.resolve(process.cwd(), filepath)
@@ -24,10 +25,11 @@ const getComponentInfo = (filepath) => {
   const componentType = path.basename(path.dirname(dir)).replace(/s$/, '')
 
   // start with react-docgen info
-  const components = parse(contents, resolver.findAllComponentDefinitions, [
-    ...defaultHandlers,
-    parserCustomHandler,
-  ])
+  const resolver = new builtinResolvers.FindAllDefinitionsResolver()
+  const components = parse(contents, {
+    resolver,
+    handlers: [...defaultHandlers, parserCustomHandler],
+  })
 
   if (!components.length) {
     throw new Error(`Could not find a component definition in "${filepath}".`)