airbnb · darthmaim · Dec 22, 2024
diff --git a/packages/visx-annotation/src/components/Annotation.tsx b/packages/visx-annotation/src/components/Annotation.tsx
@@ -7,7 +7,8 @@ export type AnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy
   children: React.ReactNode;
 };
 
-export default function Annotation({ x, y, dx, dy, children }: AnnotationProps) {
+export default Annotation;
+function Annotation({ x, y, dx, dy, children }: AnnotationProps) {
   const value = useMemo(() => ({ x, y, dx, dy }), [x, y, dx, dy]);
   return <AnnotationContext.Provider value={value}>{children}</AnnotationContext.Provider>;
 }
diff --git a/packages/visx-annotation/src/components/CircleSubject.tsx b/packages/visx-annotation/src/components/CircleSubject.tsx
@@ -12,7 +12,8 @@ export type CircleSubjectProps = Pick<AnnotationContextType, 'x' | 'y'> & {
   radius?: number;
 };
 
-export default function CircleSubject({
+export default CircleSubject;
+function CircleSubject({
   className,
   x: propsX,
   y: propsY,

diff --git a/packages/visx-annotation/src/components/Connector.tsx b/packages/visx-annotation/src/components/Connector.tsx
@@ -17,7 +17,8 @@ export type ConnectorProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'
   pathProps?: React.SVGProps<SVGPathElement>;
 };
 
-export default function Connector({
+export default Connector;
+function Connector({
   className,
   x: propsX,
   y: propsY,

diff --git a/packages/visx-annotation/src/components/EditableAnnotation.tsx b/packages/visx-annotation/src/components/EditableAnnotation.tsx
@@ -44,7 +44,8 @@ const defaultDragHandleProps = {
   strokeWidth: 2,
 };
 
-export default function EditableAnnotation({
+export default EditableAnnotation;
+function EditableAnnotation({
   canEditLabel = true,
   canEditSubject = true,
   children,

diff --git a/packages/visx-annotation/src/components/HtmlLabel.tsx b/packages/visx-annotation/src/components/HtmlLabel.tsx
@@ -24,7 +24,8 @@ export type HtmlLabelProps = Pick<
   /** Optional styles to apply to the HTML container. */
   containerStyle?: React.CSSProperties;
 };
-export default function HtmlLabel({
+export default HtmlLabel;
+function HtmlLabel({
   anchorLineStroke = '#222',
   children,
   className,

diff --git a/packages/visx-annotation/src/components/Label.tsx b/packages/visx-annotation/src/components/Label.tsx
@@ -69,7 +69,8 @@ function getCompletePadding(padding: LabelProps['backgroundPadding']) {
   return { ...DEFAULT_PADDING, ...padding };
 }
 
-export default function Label({
+export default Label;
+function Label({
   anchorLineStroke = '#222',
   backgroundFill = '#eaeaea',
   backgroundPadding,

diff --git a/packages/visx-annotation/src/components/LabelAnchorLine.tsx b/packages/visx-annotation/src/components/LabelAnchorLine.tsx
@@ -10,7 +10,8 @@ interface AnchorLineProps {
   height: number;
 }
 
-export default function AnchorLine({
+export default AnchorLine;
+function AnchorLine({
   anchorLineOrientation,
   anchorLineStroke,
   verticalAnchor,

diff --git a/packages/visx-annotation/src/components/LineSubject.tsx b/packages/visx-annotation/src/components/LineSubject.tsx
@@ -21,7 +21,8 @@ export type LineSubjectProps = {
   max: number;
 };
 
-export default function LineSubject({
+export default LineSubject;
+function LineSubject({
   className,
   x: propsX,
   y: propsY,

diff --git a/packages/visx-demo/next.config.js b/packages/visx-demo/next.config.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-undef */
 const path = require('path');
+const ReactDocgenTypescriptPlugin = require('react-docgen-typescript-plugin').default;
 
 const isProd = process.env.NODE_ENV === 'production';
 
@@ -22,27 +23,33 @@ const nextConfig = {
     const babelConfig = config.module.rules[1];
     babelConfig.include.push(/visx-.*\/src/);
 
-    config.module.rules.push({
-      test: /\.tsx?$/,
-      use: [
-        {
-          loader: 'react-docgen-typescript-loader',
-          options: {
-            // display types from outside a component's source even tho
-            // we hide these with the propFilter below, if we don't do
-            // this the component's own props become `any`
-            tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
-            // filter props like React.HTMLProps/React.SVGProps
-            propFilter(prop) {
-              if (prop.parent) {
-                return !prop.parent.fileName.includes('node_modules');
-              }
-              return true;
-            },
-          },
-        },
-      ],
-    });
+    config.plugins.push(
+      new ReactDocgenTypescriptPlugin({
+        tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
+      }),
+    );
+
+    // config.module.rules.push({
+    //   test: /\.tsx?$/,
+    //   use: [
+    //     {
+    //       loader: 'react-docgen-typescript-loader',
+    //       options: {
+    //         // display types from outside a component's source even tho
+    //         // we hide these with the propFilter below, if we don't do
+    //         // this the component's own props become `any`
+    //         tsconfigPath: path.resolve(__dirname, './tsconfig.json'),
+    //         // filter props like React.HTMLProps/React.SVGProps
+    //         propFilter(prop) {
+    //           if (prop.parent) {
+    //             return !prop.parent.fileName.includes('node_modules');
+    //           }
+    //           return true;
+    //         },
+    //       },
+    //     },
+    //   ],
+    // });
 
     return config;
   },

diff --git a/packages/visx-demo/package.json b/packages/visx-demo/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "NODE_OPTIONS=--openssl-legacy-provider next build && NODE_OPTIONS=--openssl-legacy-provider next export",
     "deploy": "rm -rf out && yarn build && cd out && touch .nojekyll && git init && git add . && git commit -m \"Deploy commit\" && git remote add origin [email protected]:airbnb/visx.git && git push -f origin master:gh-pages",
-    "dev": "NODE_OPTIONS=--openssl-legacy-provider next",
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider NEXT_PRIVATE_LOCAL_WEBPACK=1 next",
     "happo": "happo",
     "happo-ci-github-actions": "NODE_OPTIONS=--openssl-legacy-provider happo-ci-github-actions",
     "preview": "yarn build && cd ./out && npx serve",
@@ -86,13 +86,14 @@
     "prismjs": "^1.19.0",
     "raw-loader": "^4.0.0",
     "react": "^19.0.0",
-    "react-docgen-typescript-loader": "3.7.2",
+    "react-docgen-typescript-plugin": "^1.0.8",
     "react-dom": "^19.0.0",
     "react-github-button": "^0.1.10",
     "react-markdown": "^4.3.1",
     "react-tilt": "^0.1.4",
     "recompose": "^0.26.0",
-    "topojson-client": "^3.0.0"
+    "topojson-client": "^3.0.0",
+    "webpack": "^5.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/visx-demo/src/components/ApiTable.tsx b/packages/visx-demo/src/components/ApiTable.tsx
@@ -10,7 +10,8 @@ type Props = {
 const alphaSort = (a: PropInfo, b: PropInfo) => a.name.localeCompare(b.name);
 
 /** Renders a list of props for the passed docgenInfo */
-export default function ApiTable({ docgenInfo }: Props) {
+export default ApiTable;
+function ApiTable({ docgenInfo }: Props) {
   const { displayName = '' } = docgenInfo;
   const anchorId = displayName;
 

diff --git a/packages/visx-demo/src/components/Codeblock.tsx b/packages/visx-demo/src/components/Codeblock.tsx
@@ -16,7 +16,8 @@ function Lines({ lines }: { lines: number[] }) {
   );
 }
 
-export default function ({ children }: { children: string }) {
+export default ;
+function ({ children }: { children: string }) {
   const match = children.match(/\n(?!$)/g);
   const linesNum = match ? match.length + 1 : 1;
   const lines: number[] = new Array(linesNum + 1).fill(1);

diff --git a/packages/visx-demo/src/components/DocPage.tsx b/packages/visx-demo/src/components/DocPage.tsx
@@ -15,7 +15,8 @@ type Props = {
   readme: string;
 };
 
-export default function DocPage({ components, examples, visxPackage, readme }: Props) {
+export default DocPage;
+function DocPage({ components, examples, visxPackage, readme }: Props) {
   return (
     <Page wrapper={false} title={`@visx/${visxPackage} documentation`}>
       <div className="doc-container">

diff --git a/packages/visx-demo/src/components/Gallery/AnnotationTile.tsx b/packages/visx-demo/src/components/Gallery/AnnotationTile.tsx
@@ -15,7 +15,8 @@ const exampleProps = { compact: true };
 const exampleRenderer: React.FC<AnnotationProps> = (props) =>
   props.width > 0 && props.height > 0 ? <Annotation {...props} /> : null;
 
-export default function AnnotationTile() {
+export default AnnotationTile;
+function AnnotationTile() {
   return (
     <GalleryTile<AnnotationProps>
       title="Annotation"

diff --git a/packages/visx-demo/src/components/Gallery/AreaTile.tsx b/packages/visx-demo/src/components/Gallery/AreaTile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-area/package.json';
 const tileStyles = { background };
 const detailsStyles = { color: accentColor };
 
-export default function AreaTile() {
+export default AreaTile;
+function AreaTile() {
   return (
     <GalleryTile<AreaProps>
       title="AreaClosed"

diff --git a/packages/visx-demo/src/components/Gallery/AxisTile.tsx b/packages/visx-demo/src/components/Gallery/AxisTile.tsx
@@ -9,7 +9,8 @@ const tileStyles = { backgroundColor };
 const detailsStyles = { color: labelColor };
 const exampleProps = { showControls: false };
 
-export default function AxisTile() {
+export default AxisTile;
+function AxisTile() {
   return (
     <GalleryTile<AxisProps>
       title="Axes & scales"

diff --git a/packages/visx-demo/src/components/Gallery/BarGroupHorizontalTile.tsx b/packages/visx-demo/src/components/Gallery/BarGroupHorizontalTile.tsx
@@ -12,7 +12,8 @@ const tileStyles = { background };
 const detailsStyles = { color: green };
 const exampleProps = { margin: { top: 20, bottom: 70, left: 50, right: 20 } };
 
-export default function BarGroupHorizontalTile() {
+export default BarGroupHorizontalTile;
+function BarGroupHorizontalTile() {
   return (
     <GalleryTile<BarGroupHorizontalProps>
       title="Bar Group Horizontal"

diff --git a/packages/visx-demo/src/components/Gallery/BarGroupTile.tsx b/packages/visx-demo/src/components/Gallery/BarGroupTile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-bargroup/package.js
 const tileStyles = { background };
 const detailsStyles = { color: green };
 
-export default function BarGroupTile() {
+export default BarGroupTile;
+function BarGroupTile() {
   return (
     <GalleryTile<BarGroupProps>
       title="Bar Group"

diff --git a/packages/visx-demo/src/components/Gallery/BarStackHorizontalTile.tsx b/packages/visx-demo/src/components/Gallery/BarStackHorizontalTile.tsx
@@ -11,7 +11,8 @@ export { default as packageJson } from '../../sandboxes/visx-barstack-horizontal
 const tileStyles = { background };
 const detailsStyles = { color: purple3, zIndex: 1 };
 
-export default function BarStackHorizontalTile() {
+export default BarStackHorizontalTile;
+function BarStackHorizontalTile() {
   return (
     <GalleryTile<BarStackHorizontalProps>
       title="Bar Stack Horizontal"

diff --git a/packages/visx-demo/src/components/Gallery/BarStackTile.tsx b/packages/visx-demo/src/components/Gallery/BarStackTile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-barstack/package.js
 const tileStyles = { background };
 const detailsStyles = { color: purple3, zIndex: 1 };
 
-export default function BarStackTile() {
+export default BarStackTile;
+function BarStackTile() {
   return (
     <GalleryTile<BarStackProps>
       title="Bar Stack"

diff --git a/packages/visx-demo/src/components/Gallery/BarsTile.tsx b/packages/visx-demo/src/components/Gallery/BarsTile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-bars/package.json';
 const tileStyles = { background: '#5290e7' };
 const detailsStyles = { color: 'rgba(25, 231, 217, 1)' };
 
-export default function BarsTile() {
+export default BarsTile;
+function BarsTile() {
   return (
     <GalleryTile<BarsProps>
       title="Bars"

diff --git a/packages/visx-demo/src/components/Gallery/BrushTile.tsx b/packages/visx-demo/src/components/Gallery/BrushTile.tsx
@@ -9,7 +9,8 @@ const tileStyles = { border: `1px solid ${accentColor}` };
 const detailsStyles = { color: background };
 const exampleProps = { compact: true, margin: { top: 10, left: 50, bottom: 60, right: 20 } };
 
-export default function BrushTile() {
+export default BrushTile;
+function BrushTile() {
   return (
     <GalleryTile<BrushProps>
       title="Brush"

diff --git a/packages/visx-demo/src/components/Gallery/ChordTile.tsx b/packages/visx-demo/src/components/Gallery/ChordTile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-chord/package.json'
 const tileStyles = { background: '#e4e3d8' };
 const detailsStyles = { color: '#111' };
 
-export default function ChordTile() {
+export default ChordTile;
+function ChordTile() {
   return (
     <GalleryTile<ChordProps>
       title="Chord"

diff --git a/packages/visx-demo/src/components/Gallery/CurvesTile.tsx b/packages/visx-demo/src/components/Gallery/CurvesTile.tsx
@@ -9,7 +9,8 @@ const tileStyles = { border: '1px solid lightgray' };
 const detailsStyles = { color: '#222' };
 const exampleProps = { showControls: false };
 
-export default function CurvesTile() {
+export default CurvesTile;
+function CurvesTile() {
   return (
     <GalleryTile<CurveProps>
       title="Curves"

diff --git a/packages/visx-demo/src/components/Gallery/DelaunayTriangulationTile.tsx b/packages/visx-demo/src/components/Gallery/DelaunayTriangulationTile.tsx
@@ -12,7 +12,8 @@ const tileStyles = {
 };
 const detailsStyles = { background: 'white', color: '#5B247A', borderRadius: '0 0 14px 14px' };
 
-export default function DelaunayTriangulationTile() {
+export default DelaunayTriangulationTile;
+function DelaunayTriangulationTile() {
   return (
     <GalleryTile<DelaunayTriangulationProps>
       title="Delaunay Triangulation"

diff --git a/packages/visx-demo/src/components/Gallery/DelaunayVoronoiTile.tsx b/packages/visx-demo/src/components/Gallery/DelaunayVoronoiTile.tsx
@@ -12,7 +12,8 @@ const tileStyles = {
 };
 const detailsStyles = { background: 'white', color: '#eb6d88', borderRadius: '0 0 14px 14px' };
 
-export default function DelaunayTile() {
+export default DelaunayTile;
+function DelaunayTile() {
   return (
     <GalleryTile<VoronoiProps>
       title="Voronoi Overlay"

diff --git a/packages/visx-demo/src/components/Gallery/DendrogramsTile.tsx b/packages/visx-demo/src/components/Gallery/DendrogramsTile.tsx
@@ -9,7 +9,8 @@ const tileStyles = { background };
 const detailsStyles = { color: green };
 const exampleProps = { margin: { top: 40, left: 0, right: 0, bottom: 90 } };
 
-export default function DendrogramsTile() {
+export default DendrogramsTile;
+function DendrogramsTile() {
   return (
     <GalleryTile<DendrogramProps>
       title="Dendrograms"

diff --git a/packages/visx-demo/src/components/Gallery/DotsTile.tsx b/packages/visx-demo/src/components/Gallery/DotsTile.tsx
@@ -9,7 +9,8 @@ const tileStyles = { background: '#fd6e7f' };
 const detailsStyles = { color: '#f6c431' };
 const exampleProps = { showControls: false };
 
-export default function DotsTile() {
+export default DotsTile;
+function DotsTile() {
   return (
     <GalleryTile<DotsProps>
       title="Dots"

diff --git a/packages/visx-demo/src/components/Gallery/DragIITile.tsx b/packages/visx-demo/src/components/Gallery/DragIITile.tsx
@@ -10,7 +10,8 @@ const tileStyles = { background: '#04002b', borderRadius: 14 };
 const detailsStyles = { color: '#ff614e', zIndex: 1 };
 const exampleProps = { data: drawData };
 
-export default function DragIITile() {
+export default DragIITile;
+function DragIITile() {
   return (
     <GalleryTile<DragIIProps>
       title="Drag ii"

diff --git a/packages/visx-demo/src/components/Gallery/DragITile.tsx b/packages/visx-demo/src/components/Gallery/DragITile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-drag-i/package.json
 const tileStyles = { background: '#c4c3cb', borderRadius: 14 };
 const detailsStyles = { color: '#6437d6', zIndex: 1 };
 
-export default function DragITile() {
+export default DragITile;
+function DragITile() {
   return (
     <GalleryTile<DragIProps>
       title="Drag i"

diff --git a/packages/visx-demo/src/components/Gallery/GeoAlbersUsaTile.tsx b/packages/visx-demo/src/components/Gallery/GeoAlbersUsaTile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-geo-albers-usa/pack
 const tileStyles = { background };
 const detailsStyles = { color: colors[1] };
 
-export default function GeoAlbersUsaTile() {
+export default GeoAlbersUsaTile;
+function GeoAlbersUsaTile() {
   return (
     <GalleryTile<GeoAlbersUsaProps>
       title="AlbersUsa"

diff --git a/packages/visx-demo/src/components/Gallery/GeoCustomTile.tsx b/packages/visx-demo/src/components/Gallery/GeoCustomTile.tsx
@@ -9,7 +9,8 @@ const tileStyles = { background };
 const detailsStyles = { color: '#019ece' };
 const exampleProps = { events: false };
 
-export default function GeoCustomTile() {
+export default GeoCustomTile;
+function GeoCustomTile() {
   return (
     <GalleryTile<GeoCustomProps>
       title="Custom Projection"

diff --git a/packages/visx-demo/src/components/Gallery/GeoMercatorTile.tsx b/packages/visx-demo/src/components/Gallery/GeoMercatorTile.tsx
@@ -8,7 +8,8 @@ export { default as packageJson } from '../../sandboxes/visx-geo-mercator/packag
 const tileStyles = { background };
 const detailsStyles = { color: '#f63a48' };
 
-export default function GeoMercatorTile() {
+export default GeoMercatorTile;
+function GeoMercatorTile() {
   return (
     <GalleryTile<GeoMercatorProps>
       title="Mercator"