ui: scratchpad sidebar api

packages/ui-default/components/scratchpad/ScratchpadSidebar.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ScratchpadSidebar({ name }) {
+  const Component = window.Hydro.scratchpad?.[name];
+  const [state, setState] = React.useState(0);
+  if (Component) return <Component />;
+  setTimeout(() => setState(state + 1), 1000);
+  return <div>No registered providers.</div>;
+}

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -16,6 +16,7 @@ import Toolbar, {
 
 const mapStateToProps = (state) => ({
   pretestVisible: state.ui.pretest.visible,
+  sidebarVisible: state.ui.sidebar.visible,
   recordsVisible: state.ui.records.visible,
   isPosting: state.ui.isPosting,
   isRunning: state.pretest.isRunning,
@@ -183,6 +184,16 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
             {i18n('Records')}
           </ToolbarButton>
         )}
+        {/* <ToolbarButton
+          activated={this.props.sidebarVisible}
+          onClick={() => this.props.togglePanel('sidebar')}
+          data-global-hotkey="alt+w"
+          data-tooltip={`${i18n('Toggle Sidebar')} (Alt+L)`}
+        >
+          <Icon name="edit" />
+          {' '}
+          {i18n('Pretest')}
+        </ToolbarButton> */}
       </Toolbar>
     );
   }

packages/ui-default/components/scratchpad/index.jsx

@@ -8,8 +8,9 @@ import ScratchpadToolbar from './ScratchpadToolbarContainer';
 import ScratchpadEditor from './ScratchpadEditorContainer';
 import ScratchpadPretest from './ScratchpadPretestContainer';
 import ScratchpadRecords from './ScratchpadRecordsContainer';
+import ScratchpadSidebar from './ScratchpadSidebar';
 
-function buildNestedPane([a, ...panes]) {
+function buildNestedPane([a, ...panes], mode = 'horizontal') {
   const elements = [
     a,
     ...panes.filter((p) => p.props.visible),
@@ -18,7 +19,7 @@ function buildNestedPane([a, ...panes]) {
   return elements
     .reduce((prev, curr) => (
       <SplitPane
-        split="horizontal"
+        split={mode}
         primary="second"
         defaultSize={curr.props.size}
         key={curr.element.key}
@@ -63,7 +64,15 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadCont
         primary="second"
         onChange={(size) => this.handleChangeSize('main', size)}
       >
-        <Dom className="scratchpad__problem" childDom={$('.problem-content').get(0)} />
+        <SplitPane
+          defaultSize={this.props.ui.sidebar.visible ? this.props.ui.sidebar.size : 0}
+          split="vertical"
+          primary="second"
+          onChange={(size) => this.handleChangeSize('sidebar', size)}
+        >
+          <Dom className="scratchpad__problem" childDom={$('.problem-content').get(0)} />
+          <ScratchpadSidebar name="debug" />
+        </SplitPane>
         {buildNestedPane([
           <SplitPaneFillOverlay key="editor" className="flex-col">
             <ScratchpadToolbar />

packages/ui-default/components/scratchpad/reducers/ui.ts

@@ -11,6 +11,10 @@ export default function reducer(state = {
       : false,
     size: 200,
   },
+  sidebar: {
+    visible: false,
+    size: 100,
+  },
   records: {
     visible: UiContext.canViewRecord && localStorage.getItem('scratchpad/records') === 'true',
     size: 100,

packages/ui-default/modules.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import _ from 'lodash';
+import React from 'react';
 
 import './utils/delay';
 import './utils/emulateAnchorClick';
@@ -23,6 +24,6 @@ import './components/notification';
 import './components/nprogress';
 import './components/monaco/loader';
 
-window.node_modules = { _, $ };
+window.node_modules = { _, $, React };
 window.$ = $;
 window.jQuery = $;