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 \n \n \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( - - - -); +(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(<> + + + + + ) +}; + +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 ( + + + + + + ); +} + +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(<> - - - - - ) -}; - -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 ( - - - - - - ); -} - -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'), })); })();