fix(browser-repl): forward ref on the themed shell component (#2070)

Author: gribnoysup

packages/browser-repl/src/components/shell.tsx

@@ -462,10 +462,11 @@ export class _Shell extends Component<ShellProps, ShellState> {
 
 type DefaultProps = keyof (typeof _Shell)['defaultProps'];
 
-export const Shell = function ShellWithDarkMode(
-  props: Omit<ShellProps, DefaultProps | 'darkMode'> &
+export const Shell = React.forwardRef<
+  _Shell,
+  Omit<ShellProps, DefaultProps | 'darkMode'> &
     Partial<Pick<ShellProps, DefaultProps>>
-) {
+>(function ShellWithDarkMode(props, ref) {
   const darkMode = useDarkMode();
-  return <_Shell darkMode={darkMode} {...props}></_Shell>;
-};
+  return <_Shell darkMode={darkMode} ref={ref} {...props}></_Shell>;
+});

packages/browser-repl/src/index.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Shell } from './index';
+import { expect } from '../testing/chai';
+import { mount } from '../testing/enzyme';
+
+describe('Shell', function () {
+  it('should provide access to ref', function () {
+    const ref = React.createRef<any>();
+    mount(<Shell ref={ref} runtime={{} as any}></Shell>);
+    expect(ref.current).to.have.property('state');
+    expect(ref.current).to.have.property('props');
+    expect(ref.current).to.have.property('editor');
+  });
+});