diff --git a/src/components/Playground/CodeEditor/Editor/hooks.ts b/src/components/Playground/CodeEditor/Editor/hooks.ts index b1f591f..21e47ed 100644 --- a/src/components/Playground/CodeEditor/Editor/hooks.ts +++ b/src/components/Playground/CodeEditor/Editor/hooks.ts @@ -50,6 +50,8 @@ export const useEditor = () => { onWatch(typeHelper) + typeHelper.acquireType(`import React from 'react'`) + editor.onDidChangeModelContent(() => { typeHelper.acquireType(editor.getValue()) }) diff --git a/src/components/Playground/CodeEditor/Editor/index.tsx b/src/components/Playground/CodeEditor/Editor/index.tsx index 6e8e483..7dcedd3 100644 --- a/src/components/Playground/CodeEditor/Editor/index.tsx +++ b/src/components/Playground/CodeEditor/Editor/index.tsx @@ -2,13 +2,13 @@ import { editor, Selection } from 'monaco-editor' import MonacoEditor, { Monaco } from '@monaco-editor/react' import '@/components/Playground/CodeEditor/Editor/editor.scss' import '@/components/Playground/CodeEditor/Editor/loader' -import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared' +import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files' import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks' import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig' interface EditorProps { - tsConfig?: ITsConfig + tsconfig?: ITsconfig files?: IFiles selectedFileName?: string readonly?: boolean @@ -19,7 +19,7 @@ interface EditorProps { } const Editor = ({ - tsConfig, + tsconfig, files = {}, selectedFileName = '', readonly, @@ -43,9 +43,9 @@ const Editor = ({ const handleOnEditorWillMount = (monaco: Monaco) => { monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions) - tsConfig && + tsconfig && monaco.languages.typescript.typescriptDefaults.setCompilerOptions( - tsConfig.compilerOptions + tsconfig.compilerOptions ) files && @@ -93,11 +93,11 @@ const Editor = ({ }, [file.name]) useEffect(() => { - tsConfig && + tsconfig && monacoRef.current?.languages.typescript.typescriptDefaults.setCompilerOptions( - tsConfig.compilerOptions + tsconfig.compilerOptions ) - }, [tsConfig]) + }, [tsconfig]) return ( <> diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx index f8fd51c..aa2cb62 100644 --- a/src/components/Playground/CodeEditor/FileSelector/index.tsx +++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx @@ -88,7 +88,7 @@ const FileSelector = ({ onChange?.(IMPORT_MAP_FILE_NAME) } - const editTsConfig = () => { + const editTsconfig = () => { if (hasEditing) { return } @@ -200,7 +200,7 @@ const FileSelector = ({ )} diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx index 7b1cbb6..f1f30ab 100644 --- a/src/components/Playground/CodeEditor/index.tsx +++ b/src/components/Playground/CodeEditor/index.tsx @@ -1,7 +1,7 @@ import _ from 'lodash' import '@/components/Playground/CodeEditor/code-editor.scss' import FlexBox from '@/components/common/FlexBox' -import { IEditorOptions, IFiles, ITheme, ITsConfig } from '@/components/Playground/shared' +import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared' import { fileNameToLanguage, getFileNameList, @@ -13,7 +13,7 @@ import Editor from '@/components/Playground/CodeEditor/Editor' interface CodeEditorProps { theme?: ITheme - tsConfig?: ITsConfig + tsconfig?: ITsconfig files: IFiles readonly?: boolean readonlyFiles?: string[] @@ -30,7 +30,7 @@ interface CodeEditorProps { const CodeEditor = ({ theme, - tsConfig, + tsconfig, files, readonly, readonlyFiles, @@ -133,7 +133,7 @@ const CodeEditor = ({ onError={handleOnError} /> { +const Playground = ({ initFiles, initImportMapRaw, initTsconfigRaw }: PlaygroundProps) => { const [files, setFiles] = useState(initFiles) const [selectedFileName, setSelectedFileName] = useState(MAIN_FILE_NAME) const [importMapRaw, setImportMapRaw] = useState(initImportMapRaw) const [importMap, setImportMap] = useState() - const [tsConfigRaw, setTsConfigRaw] = useState(initTsConfigRaw) - const [tsConfig, setTsConfig] = useState() + const [tsconfigRaw, setTsconfigRaw] = useState(initTsconfigRaw) + const [tsconfig, setTsconfig] = useState() if (!importMap) { try { @@ -31,11 +31,11 @@ const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: Playground setImportMap({ imports: {} }) } } - if (!tsConfig) { + if (!tsconfig) { try { - setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig) + setTsconfig(JSON.parse(tsconfigRaw) as ITsconfig) } catch (e) { - setTsConfig({ compilerOptions: {} }) + setTsconfig({ compilerOptions: {} }) } } @@ -45,7 +45,7 @@ const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: Playground return } if (fileName === TS_CONFIG_FILE_NAME) { - setTsConfigRaw(content) + setTsconfigRaw(content) return } @@ -64,16 +64,16 @@ const Playground = ({ initFiles, initImportMapRaw, initTsConfigRaw }: Playground useUpdatedEffect(() => { try { - setTsConfig(JSON.parse(tsConfigRaw) as ITsConfig) + setTsconfig(JSON.parse(tsconfigRaw) as ITsconfig) } catch (e) { /* empty */ } - }, [tsConfigRaw]) + }, [tsconfigRaw]) return ( } -export interface ITsConfig { +export interface ITsconfig { compilerOptions: CompilerOptions } diff --git a/src/components/Playground/template/.eslintrc.cjs b/src/components/Playground/template/.eslintrc.cjs deleted file mode 100644 index d6c9537..0000000 --- a/src/components/Playground/template/.eslintrc.cjs +++ /dev/null @@ -1,18 +0,0 @@ -module.exports = { - root: true, - env: { browser: true, es2020: true }, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:react-hooks/recommended', - ], - ignorePatterns: ['dist', '.eslintrc.cjs'], - parser: '@typescript-eslint/parser', - plugins: ['react-refresh'], - rules: { - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, -} diff --git a/src/components/Playground/template/.gitignore b/src/components/Playground/template/.gitignore deleted file mode 100644 index a547bf3..0000000 --- a/src/components/Playground/template/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/src/components/Playground/template/README.md b/src/components/Playground/template/README.md deleted file mode 100644 index 23892a5..0000000 --- a/src/components/Playground/template/README.md +++ /dev/null @@ -1,28 +0,0 @@ -# React + TypeScript + Vite - -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: - -- Configure the top-level `parserOptions` property like this: - -```js - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, -``` - -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list - gitignore diff --git a/src/components/Playground/template/index.html b/src/components/Playground/template/index.html deleted file mode 100644 index e4b78ea..0000000 --- a/src/components/Playground/template/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + React + TS - - -
- - - diff --git a/src/components/Playground/template/package.json b/src/components/Playground/template/package.json deleted file mode 100644 index fdcdf71..0000000 --- a/src/components/Playground/template/package.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "react-playground", - "author": "fewismuch", - "version": "1.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" - }, - "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - }, - "devDependencies": { - "@types/react": "^18.2.15", - "@types/react-dom": "^18.2.7", - "@typescript-eslint/eslint-plugin": "^6.0.0", - "@typescript-eslint/parser": "^6.0.0", - "@vitejs/plugin-react-swc": "^3.3.2", - "eslint": "^8.45.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.3", - "typescript": "^5.0.2", - "vite": "^4.4.5" - } -} diff --git a/src/components/Playground/template/public/vite.svg b/src/components/Playground/template/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/src/components/Playground/template/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Playground/template/src/App.tsx b/src/components/Playground/template/src/App.tsx deleted file mode 100644 index 87189c5..0000000 --- a/src/components/Playground/template/src/App.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useState } from 'react' -import './App.css' - -function App() { - const [count, setCount] = useState(0) - - return ( - <> -

Hello World

-
- -
- - ) -} - -export default App diff --git a/src/components/Playground/template/tsconfig.json b/src/components/Playground/template/tsconfig.json deleted file mode 100644 index a7fc6fb..0000000 --- a/src/components/Playground/template/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] -} diff --git a/src/components/Playground/template/tsconfig.node.json b/src/components/Playground/template/tsconfig.node.json deleted file mode 100644 index 42872c5..0000000 --- a/src/components/Playground/template/tsconfig.node.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "skipLibCheck": true, - "module": "ESNext", - "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/src/components/Playground/template/vite.config.js b/src/components/Playground/template/vite.config.js deleted file mode 100644 index f16716a..0000000 --- a/src/components/Playground/template/vite.config.js +++ /dev/null @@ -1,7 +0,0 @@ -import react from '@vitejs/plugin-react-swc' -import { defineConfig } from 'vite' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react()] -}) diff --git a/src/components/Playground/template/src/App.css b/src/components/Playground/templates/demo/App.css similarity index 100% rename from src/components/Playground/template/src/App.css rename to src/components/Playground/templates/demo/App.css diff --git a/src/components/Playground/templates/demo/App.tsx b/src/components/Playground/templates/demo/App.tsx new file mode 100644 index 0000000..9409963 --- /dev/null +++ b/src/components/Playground/templates/demo/App.tsx @@ -0,0 +1,17 @@ +import { useState } from 'react' +import './App.css' + +const App = () => { + const [count, setCount] = useState(0) + + return ( + <> +

Hello World

+
+ +
+ + ) +} + +export default App diff --git a/src/components/Playground/template/import-map.json b/src/components/Playground/templates/demo/import-map.json similarity index 98% rename from src/components/Playground/template/import-map.json rename to src/components/Playground/templates/demo/import-map.json index fc687e0..7a84fdb 100644 --- a/src/components/Playground/template/import-map.json +++ b/src/components/Playground/templates/demo/import-map.json @@ -3,4 +3,4 @@ "react": "https://esm.sh/react@18.2.0", "react-dom/client": "https://esm.sh/react-dom@18.2.0" } -} +} \ No newline at end of file diff --git a/src/components/Playground/template/src/main.tsx b/src/components/Playground/templates/demo/main.tsx similarity index 71% rename from src/components/Playground/template/src/main.tsx rename to src/components/Playground/templates/demo/main.tsx index ad8ece1..652c259 100644 --- a/src/components/Playground/template/src/main.tsx +++ b/src/components/Playground/templates/demo/main.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client' import App from './App' ReactDOM.createRoot(document.getElementById('root')!).render( - - - + + + ) diff --git a/src/components/Playground/templates/demo/tsconfig.json b/src/components/Playground/templates/demo/tsconfig.json new file mode 100644 index 0000000..26da82b --- /dev/null +++ b/src/components/Playground/templates/demo/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": 7, + "useDefineForClassFields": true, + "module": 99, + "skipLibCheck": true, + "moduleResolution": 2, + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": 4, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "composite": true, + "types": ["node"], + "allowSyntheticDefaultImports": true + } +} \ No newline at end of file diff --git a/src/components/Playground/templates/init/App.tsx b/src/components/Playground/templates/init/App.tsx new file mode 100644 index 0000000..b751878 --- /dev/null +++ b/src/components/Playground/templates/init/App.tsx @@ -0,0 +1,5 @@ +const App = () => { + return <> +} + +export default App diff --git a/src/components/Playground/templates/init/import-map.json b/src/components/Playground/templates/init/import-map.json new file mode 100644 index 0000000..7a84fdb --- /dev/null +++ b/src/components/Playground/templates/init/import-map.json @@ -0,0 +1,6 @@ +{ + "imports": { + "react": "https://esm.sh/react@18.2.0", + "react-dom/client": "https://esm.sh/react-dom@18.2.0" + } +} \ No newline at end of file diff --git a/src/components/Playground/templates/init/main.tsx b/src/components/Playground/templates/init/main.tsx new file mode 100644 index 0000000..652c259 --- /dev/null +++ b/src/components/Playground/templates/init/main.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' + +import App from './App' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +) diff --git a/src/components/Playground/templates/init/tsconfig.json b/src/components/Playground/templates/init/tsconfig.json new file mode 100644 index 0000000..26da82b --- /dev/null +++ b/src/components/Playground/templates/init/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": 7, + "useDefineForClassFields": true, + "module": 99, + "skipLibCheck": true, + "moduleResolution": 2, + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": 4, + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "composite": true, + "types": ["node"], + "allowSyntheticDefaultImports": true + } +} \ No newline at end of file diff --git a/src/pages/OnlineEditor.tsx b/src/pages/OnlineEditor.tsx index a4b6dc0..f3ba8be 100644 --- a/src/pages/OnlineEditor.tsx +++ b/src/pages/OnlineEditor.tsx @@ -1,6 +1,6 @@ import FitFullscreen from '@/components/common/FitFullscreen' import Playground from '@/components/Playground' -import { initFiles, initImportMap, initTsConfig } from '@/components/Playground/files' +import { initFiles, initImportMap, initTsconfig } from '@/components/Playground/files' const OnlineEditor = () => { return ( @@ -9,7 +9,7 @@ const OnlineEditor = () => {