Index: src/index.tsx
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>import {createRoot} from 'react-dom/client';\nimport {ThemeProvider} from '@gravity-ui/uikit';\n\nimport {App} from './app';\n\nimport './index.css';\nimport '@doc-tools/transform/dist/js/yfm.js';\n\nconst container = document.getElementById('app');\nconst root = createRoot(container as HTMLElement);\n\nroot.render(\n  <ThemeProvider theme=\"light\"> \n    <App />\n  </ThemeProvider>\n);\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/index.tsx b/src/index.tsx
--- a/src/index.tsx	(revision 89401577079019e3b615d79ddb7c0a5286fcf604)
+++ b/src/index.tsx	(date 1695299638761)
@@ -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};
Index: scripts/dev.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>const {promises: {writeFile, mkdir, rm}} = require('fs');\nconst path = require('path');\n\nconst esbuild = require('esbuild');\n\nconst configs = require('./configs.js');\nconst {generateHTML} = require('../src/index.html.js');\n\n(async () => {\n    const outdir = 'www';\n\n    try {\n        await rm(outdir, {recursive: true});\n    } catch (e) {\n        if (e instanceof Error && e.code !== 'ENOENT') {\n            throw new Error('failed to build dev');\n        }\n    }\n\n    await mkdir (outdir, {recursive: true});\n\n    const html = generateHTML({\n        env: 'development',\n        csspath: path.join('/', 'index.css'),\n    });\n\n    await writeFile(path.join(outdir, 'index.html'), html);\n\n    let ctx;\n\n    ctx = await esbuild.context(configs.ts({\n        entryPoints: ['src/index.tsx'],\n        outdir,\n    }));\n\n    let { host, port } = await ctx.serve({\n        servedir: outdir,\n    });\n\n    console.log(`http://${host}:${port}`);\n})();\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/scripts/dev.js b/scripts/dev.js
--- a/scripts/dev.js	(revision 89401577079019e3b615d79ddb7c0a5286fcf604)
+++ b/scripts/dev.js	(date 1695299694166)
@@ -29,7 +29,7 @@
     let ctx;
 
     ctx = await esbuild.context(configs.ts({
-        entryPoints: ['src/index.tsx'],
+        entryPoints: ['src/pages.tsx'],
         outdir,
     }));
 
Index: .gitignore
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>node_modules/\nwww/\nbundle/\n\ntsconfig.tsbuildinfo
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/.gitignore b/.gitignore
--- a/.gitignore	(revision 89401577079019e3b615d79ddb7c0a5286fcf604)
+++ b/.gitignore	(date 1695299831031)
@@ -2,4 +2,6 @@
 www/
 bundle/
 
+.idea
+
 tsconfig.tsbuildinfo
\ No newline at end of file
Index: scripts/bundle.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>const {promises: {writeFile, mkdir, rm}} = require('fs');\nconst path = require('path');\n\nconst esbuild = require('esbuild');\n\nconst configs = require('./configs.js');\n\nconst {dependencies, peerDependencies, devDependencies} = require(\"../package.json\");\n\nconst external = [\n    ...Object.keys(peerDependencies ?? {}),\n    ...Object.keys(devDependencies ?? {}),\n    ...Object.keys(dependencies ?? {}),\n];\n\n(async () => {\n    const outdir = 'bundle';\n\n    try {\n        await rm(outdir, {recursive: true});\n    } catch (e) {\n        if (e instanceof Error && e.code !== 'ENOENT') {\n            throw new Error('failed to build pages');\n        }\n    }\n\n    await mkdir(outdir, {recursive: true});\n\n    await esbuild.build({\n        ...configs.ts({\n            entryPoints: ['src/app.tsx'],\n            outfile: path.join(outdir, 'index.js'),\n        }),\n        target: 'es2020',\n        external,\n        format: 'cjs',\n        banner: {js: '/* eslint-disable */'},\n    });\n})();\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/scripts/bundle.js b/scripts/bundle.js
--- a/scripts/bundle.js	(revision 89401577079019e3b615d79ddb7c0a5286fcf604)
+++ b/scripts/bundle.js	(date 1695299694168)
@@ -28,7 +28,7 @@
 
     await esbuild.build({
         ...configs.ts({
-            entryPoints: ['src/app.tsx'],
+            entryPoints: ['src/index.tsx'],
             outfile: path.join(outdir, 'index.js'),
         }),
         target: 'es2020',
Index: src/app.tsx
===================================================================
diff --git a/src/app.tsx b/src/app.tsx
deleted file mode 100644
--- a/src/app.tsx	(revision 89401577079019e3b615d79ddb7c0a5286fcf604)
+++ /dev/null	(revision 89401577079019e3b615d79ddb7c0a5286fcf604)
@@ -1,118 +0,0 @@
-import {useCallback, useState, useEffect}  from 'react';
-import {Container, Row, Col} from '@gravity-ui/uikit';
-
-import {CallOut} from './callout';
-import {InputArea} from './input-area';
-import {OutputArea} from './output-area';
-
-import {useTabs} from './useTabs';
-import {generateMD, generateHTML, generateTokens} from './generators';
-import persistRestore from './persistRestore';
-
-import './styles.css';
-
-(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};
Index: scripts/pages.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
<+>const {promises: {writeFile, mkdir, rm}} = require('fs');\nconst path = require('path');\n\nconst esbuild = require('esbuild');\n\nconst configs = require('./configs.js');\nconst {generateHTML} = require('../src/index.html.js');\n\n(async () => {\n    const outdir = 'docs';\n    const projectName = 'playground';\n    \n    try {\n        await rm(outdir, {recursive: true});\n    } catch (e) {\n        if (e instanceof Error && e.code !== 'ENOENT') {\n            throw new Error('failed to build pages');\n        }\n    }\n\n    await mkdir(outdir, {recursive: true});\n\n    const html = generateHTML({\n        env: 'production',\n        csspath: path.join('/', projectName, 'index.css')});\n\n    await writeFile(path.join(outdir, 'index.html'), html);\n\n    await esbuild.build(configs.ts({\n        entryPoints: ['src/index.tsx'],\n        outfile: path.join(outdir, 'index.js'),\n    }));\n})();\n
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/scripts/pages.js b/scripts/pages.js
--- a/scripts/pages.js	(revision 89401577079019e3b615d79ddb7c0a5286fcf604)
+++ b/scripts/pages.js	(date 1695299694164)
@@ -27,7 +27,7 @@
     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'),
     }));
 })();
