feat(marshaller): init feature

playground/docs.tsx

@@ -135,8 +135,7 @@ const Docs: React.FC<PropTypes> = props => {
   const diff7 = React.useMemo(() => differ.diff(before7, after7), [differ, before7, after7]);
 
   const openInPlayground = (l: unknown, r: unknown) => {
-    updateInitialValues(JSON.stringify(l, null, 2), JSON.stringify(r, null, 2));
-    props.onSwitch();
+    updateInitialValues('playground', JSON.stringify(l, null, 2), JSON.stringify(r, null, 2));
   };
 
   const viewerCommonProps: Partial<ViewerProps> = {

playground/generated-code.tsx

@@ -16,7 +16,9 @@ const GeneratedCode: React.FC<PropTypes> = ({ code }) => {
   }, [code]);
 
   return (
-    <pre className="language-tsx" dangerouslySetInnerHTML={{ __html: html }} />
+    <div className="generated-code">
+      <pre className="language-tsx" dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
   );
 };
 

playground/index.tsx

@@ -3,16 +3,23 @@ import ReactDOM from 'react-dom';
 
 import Playground from './playground';
 import Docs from './docs';
+import MarshallerTest from './marshaller-test';
 
 import '../src/viewer.less';
 import './index.less';
+import { updateInitialValues, useInitialValues } from './initial-values';
 
 const Index: React.FC = () => {
-  const [usePlayground, setUsePlayground] = React.useState(true);
+  const { page } = useInitialValues();
 
-  return usePlayground
-    ? <Playground onSwitch={() => setUsePlayground(false)} />
-    : <Docs onSwitch={() => setUsePlayground(true)} />;
+  switch (page) {
+    case 'marshaller-test':
+      return <MarshallerTest />;
+    case 'docs':
+      return <Docs onSwitch={() => updateInitialValues('playground', '', '')} />;
+    default:
+      return <Playground onSwitch={() => updateInitialValues('docs', '', '')} />;
+  }
 };
 
 ReactDOM.render(<React.StrictMode><Index /></React.StrictMode>, document.getElementById('root'));

playground/initial-values.ts

@@ -4,6 +4,7 @@ const getValue = () => {
   const hash = window.location.hash ? window.location.hash.slice(1) : '';
   const query = new URLSearchParams(hash);
   return {
+    page: query.get('page') || 'playground',
     l: query.get('l') || '',
     r: query.get('r') || '',
   };
@@ -15,22 +16,26 @@ export const useInitialValues = () => {
   React.useEffect(() => {
     const hashChange = () => {
       const newValue = getValue();
-      if (initialValues.l !== newValue.l || initialValues.r !== newValue.r) {
-        setInitialValues(newValue);
+      for (const key in newValue) {
+        if (initialValues[key] !== newValue[key]) {
+          setInitialValues(newValue);
+          break;
+        }
       }
     };
     window.addEventListener('hashchange', hashChange);
     return () => {
       window.removeEventListener('hashchange', hashChange);
     };
-  }, []);
+  }, [initialValues]);
 
   return initialValues;
 };
 
-export const updateInitialValues = (l: string, r: string) => {
+export const updateInitialValues = (page: string, l: string, r: string) => {
   const hash = window.location.hash ? window.location.hash.slice(1) : '';
   const query = new URLSearchParams(hash);
+  query.set('page', page);
   query.set('l', l);
   query.set('r', r);
   window.location.hash = query.toString();