Use latest babel plugins, and use Annotation and All Resolver on website (#774)

Author: danez

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "engines": {
     "node": ">=14.17.0",
-    "pnpm": "7.30.5"
+    "pnpm": ">=7.30.3"
   },
   "scripts": {
     "build": "nx run-many --target=build --exclude='@react-docgen-internal/*'",

packages/website/src/components/Select.tsx

@@ -78,7 +78,7 @@ export function Select({
                         ? 'bg-primary-50 text-primary-600 dark:bg-primary-500/10'
                         : 'text-gray-800 dark:text-gray-100',
                       'relative cursor-pointer whitespace-nowrap py-1.5',
-                      'transition-colors ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9',
+                      'transition-colors ltr:pl-3 ltr:pr-9 rtl:pl-9 rtl:pr-3',
                     )
                   }
                 >

packages/website/src/components/playground/Panel.tsx

@@ -1,17 +1,13 @@
-import type { RefObject } from 'react';
 import { useCallback } from 'react';
 import { useTheme } from 'next-themes';
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import type { EditorMode } from './Playground';
 import { EditorView } from '@codemirror/view';
 
 interface PanelProps {
   codeSample?: string;
-  mode?: EditorMode;
   onChange?: (value: string) => void;
   readOnly?: boolean;
-  ref?: RefObject<unknown>;
   value: string;
 }
 

packages/website/src/components/playground/Playground.tsx

@@ -1,66 +1,66 @@
-import type { RefObject } from 'react';
-import { Component, createRef } from 'react';
+import { Component } from 'react';
 import Panel from './Panel';
 import OptionPanel, { Language } from './OptionPanel';
 import type { Config } from 'react-docgen';
-import { parse } from 'react-docgen';
+import { parse, builtinResolvers } from 'react-docgen';
 
 const defaultPlugins = [
   'jsx',
-  'asyncGenerators',
-  'bigInt',
-  'classProperties',
-  'classPrivateProperties',
-  'classPrivateMethods',
-  ['decorators', { decoratorsBeforeExport: false }],
+  'asyncDoExpressions',
+  'decimal',
+  'decorators',
+  'decoratorAutoAccessors',
+  'destructuringPrivate',
   'doExpressions',
-  'dynamicImport',
+  'explicitResourceManagement',
   'exportDefaultFrom',
-  'exportNamespaceFrom',
   'functionBind',
   'functionSent',
-  'importMeta',
-  'logicalAssignment',
-  'nullishCoalescingOperator',
-  'numericSeparator',
-  'objectRestSpread',
-  'optionalCatchBinding',
-  'optionalChaining',
+  'importAssertions',
+  'importReflection',
+  'moduleBlocks',
+  'partialApplication',
   ['pipelineOperator', { proposal: 'minimal' }],
+  'recordAndTuple',
+  'regexpUnicodeSets',
   'throwExpressions',
-  'topLevelAwait',
 ];
 
 interface PlaygroundProps {
   initialContent: string;
+  initialLanguage: Language;
 }
 
 export type EditorMode = 'application/json' | 'text/jsx' | 'text/plain';
 
 interface PlaygroundState {
   value: string;
-  mode: EditorMode;
   content: string;
   language: Language;
   options: Config;
 }
 
-export default class App extends Component<PlaygroundProps, PlaygroundState> {
-  private _jsonRef: RefObject<unknown>;
+const {
+  ChainResolver,
+  FindAllDefinitionsResolver,
+  FindAnnotatedDefinitionsResolver,
+} = builtinResolvers;
+
+const resolver = new ChainResolver(
+  [new FindAnnotatedDefinitionsResolver(), new FindAllDefinitionsResolver()],
+  { chainingLogic: ChainResolver.Logic.ALL },
+);
 
+export default class App extends Component<PlaygroundProps, PlaygroundState> {
   constructor(props: PlaygroundProps) {
     super(props);
-    this._jsonRef = createRef();
 
-    const initialLanguage = Language.TYPESCRIPT;
-
-    const options = this.buildOptions(initialLanguage);
+    const options = this.buildOptions(props.initialLanguage);
 
     this.state = {
       value: this.compile(props.initialContent, options),
-      mode: 'application/json',
       content: props.initialContent,
-      language: initialLanguage,
+      language: props.initialLanguage,
       options,
     };
   }
@@ -71,19 +71,18 @@ export default class App extends Component<PlaygroundProps, PlaygroundState> {
 
   handleChange = (value: string) => {
     let result;
-    let mode: EditorMode = 'text/plain';
 
     try {
       result = this.compile(value, this.state.options);
-      mode = 'application/json';
     } catch (err) {
       result = String(err);
     }
-    this.setState({ value: result, mode, content: value });
+    this.setState({ value: result, content: value });
   };
 
   buildOptions(language: Language): Config {
     const options: Config = {
+      resolver,
       babelOptions: {
         babelrc: false,
         babelrcRoots: false,
@@ -132,12 +131,7 @@ export default class App extends Component<PlaygroundProps, PlaygroundState> {
             />
           </div>
           <div className="h-full w-1/2 flex-auto self-auto overflow-hidden">
-            <Panel
-              readOnly={true}
-              ref={this._jsonRef}
-              value={this.state.value}
-              mode={this.state.mode}
-            />
+            <Panel readOnly={true} value={this.state.value} />
           </div>
         </div>
       </>

packages/website/src/components/playground/index.ts

@@ -0,0 +1,11 @@
+export { default as Playground } from './Playground';
+export { Language } from './OptionPanel';
+import js from './samples/javascript';
+import ts from './samples/typescript';
+import flow from './samples/flow';
+
+export const samples = {
+  flow,
+  js,
+  ts,
+};

packages/website/src/components/playground/samples/flow.ts

@@ -0,0 +1,11 @@
+export default `interface Props {
+  /** The name to greet */
+  name: string
+}
+
+/**
+ * Hello world component
+ */
+const MyComponent = ({name = 'world'}: Props) => {
+  return <div />;
+}`;

packages/website/src/components/playground/samples/typescript.ts

@@ -0,0 +1,11 @@
+export default `interface Props {
+  /** The name to greet */
+  name: string
+}
+
+/**
+ * Hello world component
+ */
+const MyComponent = ({name = 'world'}: Props) => {
+  return <div />;
+}`;

packages/website/src/pages/playground.mdx

@@ -1,4 +1,3 @@
-import Playground from '../components/playground/Playground';
-import javaScriptSample from '../components/playground/samples/javascript';
+import { Language, Playground, samples } from '../components/playground';
 
-<Playground initialContent={javaScriptSample} />
+<Playground initialContent={samples.ts} initialLanguage={Language.TYPESCRIPT} />

packages/website/tsconfig.json

@@ -10,8 +10,7 @@
     "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
     "isolatedModules": true,
     "jsx": "preserve"
   },