feat!: change export path

test

scripts/bundle.js

@@ -28,7 +28,7 @@ const external = [
 
     await esbuild.build({
         ...configs.ts({
-            entryPoints: ['src/app.tsx'],
+            entryPoints: ['src/index.tsx'],
             outfile: path.join(outdir, 'index.js'),
         }),
         target: 'es2020',

scripts/dev.js

@@ -21,15 +21,16 @@ const {generateHTML} = require('../src/index.html.js');
 
     const html = generateHTML({
         env: 'development',
-        csspath: path.join('/', 'index.css'),
+        jspath: 'pages.js',
+        csspath: 'pages.css',
     });
 
     await writeFile(path.join(outdir, 'index.html'), html);
 
     let ctx;
 
     ctx = await esbuild.context(configs.ts({
-        entryPoints: ['src/index.tsx'],
+        entryPoints: ['src/pages.tsx'],
         outdir,
     }));
 

scripts/pages.js

@@ -27,7 +27,7 @@ const {generateHTML} = require('../src/index.html.js');
     await writeFile(path.join(outdir, 'index.html'), html);
 
     await esbuild.build(configs.ts({
-        entryPoints: ['src/index.tsx'],
+        entryPoints: ['src/pages.tsx'],
         outfile: path.join(outdir, 'index.js'),
     }));
 })();

src/callout.tsx

@@ -1,4 +1,4 @@
-import {Card, Text, Row, Col} from '@gravity-ui/uikit';
+import {Card, Row, Col} from '@gravity-ui/uikit';
 
 function CallOut() {
   return (<Row space={4}>

src/index.tsx

@@ -1,16 +1,118 @@
-import {createRoot} from 'react-dom/client';
-import {ThemeProvider} from '@gravity-ui/uikit';
+import {useCallback, useState, useEffect}  from 'react';
+import {Container, Row, Col} from '@gravity-ui/uikit';
 
-import {App} from './app';
+import {CallOut} from './callout';
+import {InputArea} from './input-area';
+import {OutputArea} from './output-area';
 
-import './index.css';
-import '@doc-tools/transform/dist/js/yfm.js';
+import {useTabs} from './useTabs';
+import {generateMD, generateHTML, generateTokens} from './generators';
+import persistRestore from './persistRestore';
 
-const container = document.getElementById('app');
-const root = createRoot(container as HTMLElement);
+import './styles.css';
 
-root.render(
-  <ThemeProvider theme="light"> 
-    <App />
-  </ThemeProvider>
-);
+(window as any).MonacoEnvironment = {
+    getWorker: (_, label: string) => {
+        if (label === 'json') {
+            return new Worker(
+                new URL('monaco-editor/esm/vs/language/json/json.worker?worker', 'monaco-worker'),
+            );
+        }
+        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker?worker', 'monaco-worker'));
+    },
+};
+
+const App = () => {
+    return(<>
+        <Container>
+            <CallOut />
+            <Playground persistRestore={true} />
+        </Container>
+    </>)
+};
+
+export type PlaygroundProperties = {
+    content?: string;
+    persistRestore?: boolean;
+}
+
+function Playground(props: PlaygroundProperties) {
+    const persist = useCallback(persistRestore.persist, []);
+    const restore = useCallback(persistRestore.restore, []);
+    const content = props?.persistRestore ? restore() : props?.content
+    const [input, setInput] = useState(content ?? '');
+    const [generated, setGenerated] = useState(input);
+
+    const generate = useCallback((active: string) => {
+        if (active === 'markdown') {
+            setGenerated(generateMD(input));
+        } else if (active === 'html') {
+            setGenerated(generateHTML(input));
+        } else if (active === 'tokens') {
+            setGenerated(generateTokens(input));
+        } else if (active === 'preview') {
+            setGenerated(generateHTML(input));
+        } else {
+            setGenerated(input);
+        }
+    }, [input]);
+
+    const [
+        inputItems,
+        inputActive,
+        handleSetInputAreaTabActive
+    ] = useTabs({
+        items: [ { id: 'input', title: 'input' } ],
+        initial: 'input',
+    });
+
+    const [
+        outputItems,
+        outputActive,
+        handleSetOutputAreaTabActive
+    ] = useTabs({
+        items: [
+            { id: 'preview', title: 'html preview' },
+            { id: 'html', title: 'html' },
+            { id: 'markdown', title: 'markdown' },
+            { id: 'tokens', title: 'tokens' },
+        ],
+        initial: 'preview',
+        onSetActive: generate,
+    });
+
+    const handleInputChange = (input?: string) => {
+        setInput(input || '');
+    };
+
+    useEffect(() => {
+        generate(outputActive);
+
+        if (props?.persistRestore) {
+            persist(input);
+        }
+    }, [input]);
+
+    return (
+        <Row space={6} className="diplodoc-playground">
+            <Col s="12"/>
+            <InputArea
+                handleSelectTab={handleSetInputAreaTabActive}
+                handleInputChange={handleInputChange}
+                input={input}
+
+                tabActive={inputActive}
+                tabItems={inputItems}
+            />
+            <OutputArea
+                handleSelectTab={handleSetOutputAreaTabActive}
+                tabItems={outputItems}
+                tabActive={outputActive}
+                output={generated}
+            />
+        </Row>
+    );
+}
+
+export {App, Playground};
+export default {App, Playground};

src/pages.tsx

@@ -0,0 +1,16 @@
+import {createRoot} from 'react-dom/client';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import {App} from './index';
+
+import './index.css';
+import '@doc-tools/transform/dist/js/yfm.js';
+
+const container = document.getElementById('app');
+const root = createRoot(container as HTMLElement);
+
+root.render(
+    <ThemeProvider theme="light">
+            <App />
+    </ThemeProvider>
+);

src/persistRestore.ts

@@ -1,11 +1,9 @@
-import {useCallback} from 'react';
-
 function persist(input: string) {
   try {
     const current = new URL(location.toString());
     current.searchParams.set('input', encodeURI(input) ?? '');
 
-    history.pushState(null, null, current);
+    history.pushState(null, '', current);
   } catch (err) {
     console.error(err);
   }