From 11c48c4a64ed824455bbe8ca6ca58446c62396ac Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 16 Oct 2024 09:22:16 -0300 Subject: [PATCH] chore: remove config bloat stuff --- package.json | 1 + pnpm-lock.yaml | 156 +++++++++++++-- src/App.tsx | 4 - src/components/Assets/AssetsList.tsx | 5 +- src/components/Config/ConfigCheckbox.tsx | 46 ----- src/components/Config/ConfigDialog.tsx | 182 +----------------- src/components/Config/ConfigGroup.tsx | 18 -- src/components/Config/ConfigInput.tsx | 57 ------ .../Config/Sections/EditorConfig.tsx | 41 +++- src/components/Editor/MonacoEditor.tsx | 5 +- src/components/FileTree/FileTree.tsx | 56 ++++-- src/components/Playground/Playground.tsx | 20 +- src/components/UI/View.tsx | 14 +- src/config/defaultProject.ts | 7 + src/stores/storage/assets.ts | 28 --- src/stores/storage/files.ts | 10 +- src/util/compiler.ts | 6 +- 17 files changed, 277 insertions(+), 379 deletions(-) delete mode 100644 src/components/Config/ConfigCheckbox.tsx delete mode 100644 src/components/Config/ConfigGroup.tsx delete mode 100644 src/components/Config/ConfigInput.tsx diff --git a/package.json b/package.json index 04dc448..95b7342 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "daisyui": "^4.12.13", "magic-string": "^0.30.11", "pako": "^2.1.0", + "query-registry": "^3.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-dropzone": "^14.2.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c0a86fc..0cfe511 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 0.0.38 '@kaplayjs/crew': specifier: ^1.6.1 - version: 1.6.1(@types/node@22.7.5)(typescript@5.6.3) + version: 1.6.1(@types/node@22.7.5)(terser@5.34.1)(typescript@5.6.3) '@monaco-editor/react': specifier: ^4.6.0 version: 4.6.0(monaco-editor@0.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -38,6 +38,9 @@ importers: pako: specifier: ^2.1.0 version: 2.1.0 + query-registry: + specifier: ^3.0.1 + version: 3.0.1 react: specifier: ^18.3.1 version: 18.3.1 @@ -89,7 +92,7 @@ importers: version: 18.3.0 '@vitejs/plugin-react': specifier: ^4.3.2 - version: 4.3.2(vite@5.4.8(@types/node@22.7.5)) + version: 4.3.2(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.4.47) @@ -107,13 +110,13 @@ importers: version: 8.4.47 vite: specifier: ^5.4.8 - version: 5.4.8(@types/node@22.7.5) + version: 5.4.8(@types/node@22.7.5)(terser@5.34.1) vite-plugin-custom-env: specifier: ^1.0.3 version: 1.0.3 vite-plugin-static-copy: specifier: ^1.0.6 - version: 1.0.6(vite@5.4.8(@types/node@22.7.5)) + version: 1.0.6(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)) packages: @@ -459,6 +462,9 @@ packages: resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} engines: {node: '>=6.0.0'} + '@jridgewell/source-map@0.3.6': + resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==} + '@jridgewell/sourcemap-codec@1.5.0': resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==} @@ -900,6 +906,11 @@ packages: peerDependencies: vite: ^4.2.0 || ^5.0.0 + acorn@8.12.1: + resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==} + engines: {node: '>=0.4.0'} + hasBin: true + allotment@1.20.2: resolution: {integrity: sha512-TaCuHfYNcsJS9EPk04M7TlG5Rl3vbAdHeAyrTE9D5vbpzV+wxnRoUrulDbfnzaQcPIZKpHJNixDOoZNuzliKEA==} peerDependencies: @@ -970,6 +981,9 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + buffer-from@1.1.2: + resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} + camelcase-css@2.0.1: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} @@ -1009,6 +1023,9 @@ packages: resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==} engines: {node: '>=18'} + commander@2.20.3: + resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + commander@4.1.1: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} @@ -1051,6 +1068,10 @@ packages: supports-color: optional: true + decode-uri-component@0.4.1: + resolution: {integrity: sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==} + engines: {node: '>=14.16'} + detect-node-es@1.1.0: resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} @@ -1114,6 +1135,10 @@ packages: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} engines: {node: '>=8'} + filter-obj@5.1.0: + resolution: {integrity: sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==} + engines: {node: '>=14.16'} + foreground-child@3.3.0: resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==} engines: {node: '>=14'} @@ -1388,9 +1413,21 @@ packages: prop-types@15.8.1: resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} + query-registry@3.0.1: + resolution: {integrity: sha512-M9RxRITi2mHMVPU5zysNjctUT8bAPx6ltEXo/ir9+qmiM47Y7f0Ir3+OxUO5OjYAWdicBQRew7RtHtqUXydqlg==} + engines: {node: '>=20'} + + query-string@9.1.1: + resolution: {integrity: sha512-MWkCOVIcJP9QSKU52Ngow6bsAWAPlPK2MludXvcrS2bGZSl+T1qX9MZvRIkqUIkGLJquMJHWfsT6eRqUpp4aWg==} + engines: {node: '>=18'} + queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + quick-lru@7.0.0: + resolution: {integrity: sha512-MX8gB7cVYTrYcFfAnfLlhRd0+Toyl8yX8uBx1MrX7K0jegiz9TumwOK27ldXrgDlHRdVi+MqU9Ssw6dr4BNreg==} + engines: {node: '>=18'} + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -1510,6 +1547,17 @@ packages: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} + source-map-support@0.5.21: + resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} + + source-map@0.6.1: + resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} + engines: {node: '>=0.10.0'} + + split-on-first@3.0.0: + resolution: {integrity: sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==} + engines: {node: '>=12'} + state-local@1.0.7: resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==} @@ -1550,6 +1598,11 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + terser@5.34.1: + resolution: {integrity: sha512-FsJZ7iZLd/BXkz+4xrRTGJ26o/6VTjQytUk8b8OxkwcD2I+79VPJlz7qss1+zE7h8GNIScFqXcDyJ/KqBYZFVA==} + engines: {node: '>=10'} + hasBin: true + theme-change@2.5.0: resolution: {integrity: sha512-B/UdsgdHAGhSKHTAQnxg/etN0RaMDpehuJmZIjLMDVJ6DGIliRHGD6pODi1CXLQAN9GV0GSyB3G6yCuK05PkPQ==} @@ -1592,6 +1645,10 @@ packages: peerDependencies: browserslist: '>= 4.21.0' + url-join@5.0.0: + resolution: {integrity: sha512-n2huDr9h9yzd6exQVnH/jU5mr+Pfx08LRXXZhkLLetAMESRj+anQsTAh940iMrIetKAmry9coFuZQ2jY8/p3WA==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + use-callback-ref@1.3.2: resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==} engines: {node: '>=10'} @@ -1626,6 +1683,10 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + validate-npm-package-name@5.0.1: + resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + vite-plugin-custom-env@1.0.3: resolution: {integrity: sha512-ik325Yd4iX1fwVhUsRGTmyH/r0iIQmfeJZiot2uJa/a5z5yaOlOk6TldQmrz8lFaogzn6d3Hc+hdHMq9AqzU5w==} @@ -1687,6 +1748,13 @@ packages: engines: {node: '>= 14'} hasBin: true + zod-package-json@1.0.3: + resolution: {integrity: sha512-Mb6GzuRyUEl8X+6V6xzHbd4XV0au/4gOYrYP+CAfHL32uPmGswES+v2YqonZiW1NZWVA3jkssCKSU2knonm/aQ==} + engines: {node: '>=20'} + + zod@3.23.8: + resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} + zustand@4.5.5: resolution: {integrity: sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==} engines: {node: '>=12.7.0'} @@ -1987,6 +2055,12 @@ snapshots: '@jridgewell/set-array@1.2.1': {} + '@jridgewell/source-map@0.3.6': + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + optional: true + '@jridgewell/sourcemap-codec@1.5.0': {} '@jridgewell/trace-mapping@0.3.25': @@ -1996,10 +2070,10 @@ snapshots: '@juggle/resize-observer@3.4.0': {} - '@kaplayjs/crew@1.6.1(@types/node@22.7.5)(typescript@5.6.3)': + '@kaplayjs/crew@1.6.1(@types/node@22.7.5)(terser@5.34.1)(typescript@5.6.3)': dependencies: typescript: 5.6.3 - vite: 5.4.8(@types/node@22.7.5) + vite: 5.4.8(@types/node@22.7.5)(terser@5.34.1) transitivePeerDependencies: - '@types/node' - less @@ -2383,17 +2457,20 @@ snapshots: '@types/prop-types': 15.7.13 csstype: 3.1.3 - '@vitejs/plugin-react@4.3.2(vite@5.4.8(@types/node@22.7.5))': + '@vitejs/plugin-react@4.3.2(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))': dependencies: '@babel/core': 7.25.7 '@babel/plugin-transform-react-jsx-self': 7.25.7(@babel/core@7.25.7) '@babel/plugin-transform-react-jsx-source': 7.25.7(@babel/core@7.25.7) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.4.8(@types/node@22.7.5) + vite: 5.4.8(@types/node@22.7.5)(terser@5.34.1) transitivePeerDependencies: - supports-color + acorn@8.12.1: + optional: true + allotment@1.20.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: classnames: 2.5.1 @@ -2463,6 +2540,9 @@ snapshots: node-releases: 2.0.18 update-browserslist-db: 1.1.1(browserslist@4.24.0) + buffer-from@1.1.2: + optional: true + camelcase-css@2.0.1: {} caniuse-lite@1.0.30001667: {} @@ -2503,6 +2583,9 @@ snapshots: commander@12.1.0: {} + commander@2.20.3: + optional: true + commander@4.1.1: {} convert-source-map@2.0.0: {} @@ -2539,6 +2622,8 @@ snapshots: dependencies: ms: 2.1.3 + decode-uri-component@0.4.1: {} + detect-node-es@1.1.0: {} didyoumean@1.2.2: {} @@ -2628,6 +2713,8 @@ snapshots: dependencies: to-regex-range: 5.0.1 + filter-obj@5.1.0: {} + foreground-child@3.3.0: dependencies: cross-spawn: 7.0.3 @@ -2856,8 +2943,25 @@ snapshots: object-assign: 4.1.1 react-is: 16.13.1 + query-registry@3.0.1: + dependencies: + query-string: 9.1.1 + quick-lru: 7.0.0 + url-join: 5.0.0 + validate-npm-package-name: 5.0.1 + zod: 3.23.8 + zod-package-json: 1.0.3 + + query-string@9.1.1: + dependencies: + decode-uri-component: 0.4.1 + filter-obj: 5.1.0 + split-on-first: 3.0.0 + queue-microtask@1.2.3: {} + quick-lru@7.0.0: {} + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0 @@ -2988,6 +3092,17 @@ snapshots: source-map-js@1.2.1: {} + source-map-support@0.5.21: + dependencies: + buffer-from: 1.1.2 + source-map: 0.6.1 + optional: true + + source-map@0.6.1: + optional: true + + split-on-first@3.0.0: {} + state-local@1.0.7: {} string-width@4.2.3: @@ -3055,6 +3170,14 @@ snapshots: transitivePeerDependencies: - ts-node + terser@5.34.1: + dependencies: + '@jridgewell/source-map': 0.3.6 + acorn: 8.12.1 + commander: 2.20.3 + source-map-support: 0.5.21 + optional: true + theme-change@2.5.0: {} thenify-all@1.6.0: @@ -3087,6 +3210,8 @@ snapshots: escalade: 3.2.0 picocolors: 1.1.0 + url-join@5.0.0: {} + use-callback-ref@1.3.2(@types/react@18.3.11)(react@18.3.1): dependencies: react: 18.3.1 @@ -3114,17 +3239,19 @@ snapshots: util-deprecate@1.0.2: {} + validate-npm-package-name@5.0.1: {} + vite-plugin-custom-env@1.0.3: {} - vite-plugin-static-copy@1.0.6(vite@5.4.8(@types/node@22.7.5)): + vite-plugin-static-copy@1.0.6(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)): dependencies: chokidar: 3.6.0 fast-glob: 3.3.2 fs-extra: 11.2.0 picocolors: 1.1.0 - vite: 5.4.8(@types/node@22.7.5) + vite: 5.4.8(@types/node@22.7.5)(terser@5.34.1) - vite@5.4.8(@types/node@22.7.5): + vite@5.4.8(@types/node@22.7.5)(terser@5.34.1): dependencies: esbuild: 0.21.5 postcss: 8.4.47 @@ -3132,6 +3259,7 @@ snapshots: optionalDependencies: '@types/node': 22.7.5 fsevents: 2.3.3 + terser: 5.34.1 which@2.0.2: dependencies: @@ -3153,6 +3281,12 @@ snapshots: yaml@2.5.1: {} + zod-package-json@1.0.3: + dependencies: + zod: 3.23.8 + + zod@3.23.8: {} + zustand@4.5.5(@types/react@18.3.11)(react@18.3.1): dependencies: use-sync-external-store: 1.2.2(react@18.3.1) diff --git a/src/App.tsx b/src/App.tsx index fcc0d6d..014190f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,10 +5,6 @@ import "./styles/index.css"; import "./styles/toast.css"; import "./util/hotkeys.js"; -export const dynamicConfig = { - useFile: Boolean(import.meta.env.VITE_USE_FILE), -}; - export const App = () => { return ; }; diff --git a/src/components/Assets/AssetsList.tsx b/src/components/Assets/AssetsList.tsx index c01c240..7ade9e2 100644 --- a/src/components/Assets/AssetsList.tsx +++ b/src/components/Assets/AssetsList.tsx @@ -10,7 +10,7 @@ type Props = Omit & { }; const AssetsList: FC = ({ kind, visibleIcon }) => { - const { assets, orderAssets } = useAssets({ kind }); + const { assets } = useAssets({ kind }); const [ parent, draggableAssets, @@ -25,9 +25,6 @@ const AssetsList: FC = ({ kind, visibleIcon }) => {
    { - orderAssets(draggableAssets.map((asset) => asset.path)); - }} > {draggableAssets.map((resource, i) => ( = ({ configKey, label, defaultValue, tip }) => { - const { kaplayConfig } = useProject((state) => state.project); - const [setValue, setSetValue] = useState( - kaplayConfig[configKey] ?? defaultValue, - ); - - const handleChange = (e: React.ChangeEvent) => { - setSetValue(e.target.checked); - }; - - return ( -
    - -
    - ); -}; - -export default ConfigCheckbox; diff --git a/src/components/Config/ConfigDialog.tsx b/src/components/Config/ConfigDialog.tsx index 415c803..5fbc064 100644 --- a/src/components/Config/ConfigDialog.tsx +++ b/src/components/Config/ConfigDialog.tsx @@ -1,196 +1,19 @@ -import type { KAPLAYOpt } from "kaplay"; -import { useEffect } from "react"; import { Tooltip } from "react-tooltip"; -import { useEditor } from "../../hooks/useEditor"; -import { useProject } from "../../hooks/useProject"; -import { stringToType, type Type } from "../../util/stringToType"; -import ConfigCheckbox from "./ConfigCheckbox"; -import ConfigGroup from "./ConfigGroup"; -import ConfigInput from "./ConfigInput"; import { EditorConfig } from "./Sections/EditorConfig"; const ConfigDialog = () => { - const { - getKAPLAYConfig, - updateKAPLAYConfig, - syncKAPLAYFile, - getProject, - } = useProject(); - const { - update, - } = useEditor(); - - const saveConfig = () => { - const configInputs = document.querySelectorAll(".config-input"); - - configInputs.forEach((input) => { - const key = input.getAttribute("data-set-key") as keyof KAPLAYOpt; - const value = input.getAttribute("data-set-value"); - const type = input.getAttribute("data-set-type") as Type; - - if (key && value) { - updateKAPLAYConfig(key, stringToType(value, type)); - } - }); - - syncKAPLAYFile(); - update(); - }; - - const updateInputs = () => { - const configKeys = Object.keys( - getKAPLAYConfig(), - ) as (keyof KAPLAYOpt)[]; - - configKeys.forEach((key) => { - const value = getKAPLAYConfig()[key]; - const input = document.querySelector( - `[data-set-key="${key}"]`, - ) as HTMLInputElement; - - if (input) { - input.value = value as string; - input.checked = value as boolean; - } - }); - }; - - const handleClose = () => { - updateInputs(); - }; - - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Escape") { - handleClose(); - } - }; - - useEffect(() => { - window.addEventListener("keydown", handleKeyDown); - - return () => { - window.removeEventListener("keydown", handleKeyDown); - }; - }, []); - return (
    -
    -

    KAPLAY Configuration

    -
    -
    - {getProject().mode === "pj" - ? ( - <> - - - - -
    - - - -     - - - -
    - - -     - - - - - - - - ) - : ( - <> - KAPLAY Configuration are disabled in - examples mode. Try Projects (toolbox) {"->"} - {" "} - Create Project - - )} -
    - -
    -
    -
    @@ -200,9 +23,8 @@ const ConfigDialog = () => {
    - +
    ); diff --git a/src/components/Config/ConfigGroup.tsx b/src/components/Config/ConfigGroup.tsx deleted file mode 100644 index 0312224..0000000 --- a/src/components/Config/ConfigGroup.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { type FC, type PropsWithChildren } from "react"; - -type Props = PropsWithChildren<{ - title: string; -}>; - -const ConfigGroup: FC = ({ children, title }) => { - return ( - <> -
    {title.toUpperCase()}
    -
    - {children} -
    - - ); -}; - -export default ConfigGroup; diff --git a/src/components/Config/ConfigInput.tsx b/src/components/Config/ConfigInput.tsx deleted file mode 100644 index 08f7d49..0000000 --- a/src/components/Config/ConfigInput.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import type { KAPLAYOpt } from "kaplay"; -import { type FC, useRef, useState } from "react"; -import { useProject } from "../../hooks/useProject"; - -type Props = { - label: string; - configKey: keyof KAPLAYOpt; - type: "text" | "number"; - placeholder: string; - defaultValue?: string | number; - tip?: string; -}; - -const ConfigInput: FC = ( - { label, configKey, type, placeholder, tip, defaultValue }, -) => { - const inputRef = useRef(null); - const [setValue, setSetValue] = useState(""); - const { kaplayConfig } = useProject((state) => state.project); - - const handleChange = () => { - const value = inputRef.current?.value ?? ""; - const parsedValue = type === "number" ? parseInt(value, 10) : value; - - setSetValue(parsedValue); - }; - - return ( - - ); -}; - -export default ConfigInput; diff --git a/src/components/Config/Sections/EditorConfig.tsx b/src/components/Config/Sections/EditorConfig.tsx index bd60cae..8ad34b9 100644 --- a/src/components/Config/Sections/EditorConfig.tsx +++ b/src/components/Config/Sections/EditorConfig.tsx @@ -1,3 +1,41 @@ +import { type Packument } from "query-registry"; +import { useEffect, useState } from "react"; + +async function getPackageInfo(name: string): Promise { + const endpoint = `https://registry.npmjs.org/${name}`; + const res = await fetch(endpoint); + const data = await res.json(); + return data; +} + +export const VersionSelector = () => { + const [packageInfo, setPackageInfo] = useState( + null, + ); + + useEffect(() => { + async function fetchPackageInfo() { + const info = await getPackageInfo("kaplay"); + setPackageInfo(info); + console.log(info.versions); + } + + fetchPackageInfo(); + }, []); + + return ( + + ); +}; + +// Configurations of the editor export const EditorConfig = () => { const handleDeleteAllData = () => { if (confirm("Are you sure you want to delete all data?")) { @@ -11,7 +49,8 @@ export const EditorConfig = () => {

    Editor Configuration

    -
    + +