.prettierrc

@@ -1,6 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "useTabs": false
-}

eslint.config.js

@@ -3,8 +3,6 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
-import eslintConfigPrettier from 'eslint-config-prettier'
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 
 export default tseslint.config(
   { ignores: ['dist'] },
@@ -27,6 +25,4 @@ export default tseslint.config(
       ],
     },
   },
-  eslintConfigPrettier,
-  eslintPluginPrettierRecommended,
 )

package.json

@@ -32,12 +32,9 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.13.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.13",
     "globals": "^15.11.0",
-    "monaco-editor": "^0.52.2",
     "sass-embedded": "^1.80.4",
     "sharp": "^0.33.5",
     "typescript": "~5.6.2",

pnpm-lock.yaml

@@ -13,7 +13,7 @@ importers:
         version: 5.1.1
       '@monaco-editor/react':
         specifier: ^4.6.0
-        version: 4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@uidotdev/usehooks':
         specifier: ^2.4.1
         version: 2.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -69,12 +69,6 @@ importers:
       eslint:
         specifier: ^9.13.0
         version: 9.13.0
-      eslint-config-prettier:
-        specifier: ^10.0.1
-        version: 10.0.1(eslint@9.13.0)
-      eslint-plugin-prettier:
-        specifier: ^5.2.2
-        version: 5.2.2(eslint-config-prettier@10.0.1(eslint@9.13.0))(eslint@9.13.0)(prettier@3.4.2)
       eslint-plugin-react-hooks:
         specifier: ^5.0.0
         version: 5.0.0(eslint@9.13.0)
@@ -84,9 +78,6 @@ importers:
       globals:
         specifier: ^15.11.0
         version: 15.11.0
-      monaco-editor:
-        specifier: ^0.52.2
-        version: 0.52.2
       sass-embedded:
         specifier: ^1.80.4
         version: 1.80.4
@@ -452,10 +443,6 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@pkgr/core@0.1.1':
-    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-
   '@rollup/rollup-android-arm-eabi@4.24.0':
     resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==}
     cpu: [arm]
@@ -818,26 +805,6 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-config-prettier@10.0.1:
-    resolution: {integrity: sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
-
-  eslint-plugin-prettier@5.2.2:
-    resolution: {integrity: sha512-1yI3/hf35wmlq66C8yOyrujQnel+v5l1Vop5Cl2I6ylyNTT1JbuUUnV3/41PzwTzcyDp/oF0jWE3HXvcH5AQOQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      '@types/eslint': '>=8.0.0'
-      eslint: '>=8.0.0'
-      eslint-config-prettier: '*'
-      prettier: '>=3.0.0'
-    peerDependenciesMeta:
-      '@types/eslint':
-        optional: true
-      eslint-config-prettier:
-        optional: true
-
   eslint-plugin-react-hooks@5.0.0:
     resolution: {integrity: sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==}
     engines: {node: '>=10'}
@@ -894,9 +861,6 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-diff@1.3.0:
-    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
-
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -1064,8 +1028,8 @@ packages:
   moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
 
-  monaco-editor@0.52.2:
+  monaco-editor@0.52.0:
-    resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
+    resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==}
 
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -1130,15 +1094,6 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-linter-helpers@1.0.0:
-    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
-    engines: {node: '>=6.0.0'}
-
-  prettier@3.4.2:
-    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
-    engines: {node: '>=14'}
-    hasBin: true
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -1375,10 +1330,6 @@ packages:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
-  synckit@0.9.2:
-    resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -1704,15 +1655,15 @@ snapshots:
   '@img/sharp-win32-x64@0.33.5':
     optional: true
 
-  '@monaco-editor/loader@1.4.0(monaco-editor@0.52.2)':
+  '@monaco-editor/loader@1.4.0(monaco-editor@0.52.0)':
     dependencies:
-      monaco-editor: 0.52.2
+      monaco-editor: 0.52.0
       state-local: 1.0.7
 
-  '@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@monaco-editor/react@4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2)
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.0)
-      monaco-editor: 0.52.2
+      monaco-editor: 0.52.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
@@ -1728,8 +1679,6 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
-  '@pkgr/core@0.1.1': {}
-
   '@rollup/rollup-android-arm-eabi@4.24.0':
     optional: true
 
@@ -2068,19 +2017,6 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-prettier@10.0.1(eslint@9.13.0):
-    dependencies:
-      eslint: 9.13.0
-
-  eslint-plugin-prettier@5.2.2(eslint-config-prettier@10.0.1(eslint@9.13.0))(eslint@9.13.0)(prettier@3.4.2):
-    dependencies:
-      eslint: 9.13.0
-      prettier: 3.4.2
-      prettier-linter-helpers: 1.0.0
-      synckit: 0.9.2
-    optionalDependencies:
-      eslint-config-prettier: 10.0.1(eslint@9.13.0)
-
   eslint-plugin-react-hooks@5.0.0(eslint@9.13.0):
     dependencies:
       eslint: 9.13.0
@@ -2158,8 +2094,6 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-diff@1.3.0: {}
-
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2298,7 +2232,7 @@ snapshots:
 
   moment@2.30.1: {}
 
-  monaco-editor@0.52.2: {}
+  monaco-editor@0.52.0: {}
 
   ms@2.1.3: {}
 
@@ -2355,12 +2289,6 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-linter-helpers@1.0.0:
-    dependencies:
-      fast-diff: 1.3.0
-
-  prettier@3.4.2: {}
-
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -2590,11 +2518,6 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  synckit@0.9.2:
-    dependencies:
-      '@pkgr/core': 0.1.1
-      tslib: 2.8.0
-
   text-table@0.2.0: {}
 
   to-regex-range@5.0.1:

src/App/AppLayout/index.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import { FC, ReactNode } from "react";
 
 import style from './style.module.scss'
 
@@ -6,6 +6,7 @@ interface AppLayoutProp {
   children?: ReactNode
 }
 
-export const AppLayout: FC<AppLayoutProp> = ({ children }) => (
+export const AppLayout: FC<AppLayoutProp> = ({ children }) =>
-  <div className={style.container}>{children}</div>
+  <div className={style.container}>
-)
+    {children}
+  </div>

src/App/index.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react'
+import { FC } from "react";
-import { AppLayout } from './AppLayout'
+import { AppLayout } from "./AppLayout";
-import { Editor } from '../Editor'
+import { Editor } from "../Editor";
-import { TransformGrid } from '../TransformGrid'
+import { TransformGrid } from "../TransformGrid";
 
-export const App: FC = () => (
+export const App: FC = () =>
   <AppLayout>
     <Editor />
     <TransformGrid />
   </AppLayout>
-)
+  

src/Components/Button.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const Button = styled.button`
   border: none;

src/Components/Input.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const Input = styled.input`
   background-color: transparent;
@@ -12,7 +12,7 @@ export const Input = styled.input`
   
   width: 24px;
 
-  &[type='checkbox'] {
+  &[type=checkbox] {
     width: auto;
   }
 

src/Components/TextArea.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const TextArea = styled.textarea`
   border: none;

src/Editor/index.tsx

@@ -1,16 +1,15 @@
-import { createRef, FC, useEffect, useRef } from 'react'
+import { createRef, FC, useEffect, useRef } from "react";
-import { Editor as MonacoEditor } from '@monaco-editor/react'
+import { Editor as MonacoEditor } from "@monaco-editor/react";
-import { useRecoilState } from 'recoil'
+import { useRecoilState } from "recoil";
-import { EditorValueState } from '../GlobalStates/EditorValueState'
+import { EditorValueState } from "../GlobalStates/EditorValueState";
-import { motion } from 'framer-motion'
+import { motion } from "framer-motion";
-import { VERSION } from '../version'
+import { VERSION } from "../version";
-import { editor } from 'monaco-editor'
 
-import style from './style.module.scss'
+import style from "./style.module.scss";
 
 export const Editor: FC = () => {
   const [value, setValue] = useRecoilState(EditorValueState)
-  const ref = useRef<editor.IStandaloneCodeEditor>()
+  const ref = useRef<any>()
   const containerRef = createRef<HTMLDivElement>()
 
   useEffect(() => {
@@ -21,11 +20,11 @@ export const Editor: FC = () => {
         const rect = containerRef.current?.getBoundingClientRect()
         ref.current?.layout({
           width: rect?.width ?? 0,
-          height: rect?.height ?? 0,
+          height: rect?.height ?? 0
         })
       })
     })
-  }, [containerRef])
+  }, [])
 
   return (
     <motion.div
@@ -33,37 +32,33 @@ export const Editor: FC = () => {
       ref={containerRef}
       transition={{ delay: 1.5 }}
       initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
+      animate={{ opacity: 1 }}>
-    >
       <MonacoEditor
         loading={<></>}
         value={value}
         language="yaml"
-        onMount={(v) => (ref.current = v)}
+        onMount={(v) => ref.current = v}
         onChange={(v) => setValue(v ?? '')}
         options={{
           automaticLayout: true,
           lineNumbersMinChars: 3,
           minimap: { enabled: false },
-          theme: 'vs-dark',
+          theme: "vs-dark",
           fontSize: 24,
           fontFamily: 'JetBrains Mono Variable',
           fontLigatures: true,
-          wordWrap: 'on',
+          wordWrap: "on",
           mouseWheelZoom: true,
           smoothScrolling: true,
           cursorSmoothCaretAnimation: 'on',
           cursorBlinking: 'smooth',
-          cursorStyle: 'line',
+          cursorStyle: 'line'
         }}
-        theme="vs-dark"
+        theme="vs-dark" />
-      />
 
       <div className={style.credit}>
         <div className={style.creditstr}>
-          <p>
+          <p><b>The PTOOLS</b></p>
-            <b>The PTOOLS</b>
-          </p>
           <p>v2-{VERSION}</p>
           <p>&copy; Minhyeok Park</p>
         </div>

src/GlobalStates/EditorValueState.ts

@@ -1,12 +1,8 @@
-import { atom } from 'recoil'
+import { atom } from "recoil";
 
 export const EditorValueState = atom({
   key: 'editor_value',
-  default: JSON.stringify(
+  default: JSON.stringify({
-    {
+    Hello: 'world!'
-      Hello: 'world!',
+  }, null, 2)
-    },
-    null,
-    2,
-  ),
 })

src/LandingAnimation/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState } from "react";
 import { AnimatePresence, motion, TargetAndTransition } from 'framer-motion'
 
 import style from './style.module.scss'
@@ -7,7 +7,7 @@ import Suika from '../Assets/favicon.webp'
 export const LandingAnimation: FC = () => {
   const [isVisible, setVisible] = useState(true)
   const exitAnimation: TargetAndTransition = {
-    opacity: 0,
+    opacity: 0
   }
 
   useEffect(() => {

src/TransformGrid/index.tsx

@@ -1,21 +1,22 @@
-import { FC } from 'react'
+import { FC } from "react";
-import { motion } from 'framer-motion'
+import { motion } from "framer-motion";
 
 import style from './style.module.scss'
-import { TransformGridItem } from '../TransformGridItem'
+import { TransformGridItem } from "../TransformGridItem";
-import { transforms, wrapTransform } from '../Transforms/Transform'
+import { transforms, wrapTransform } from "../Transforms/Transform";
 
-export const TransformGrid: FC = () => (
+export const TransformGrid: FC = () =>
   <ul className={style.grid}>
-    {transforms.map((transform, i) => (
+    {transforms.map((transform, i) =>
       <motion.li
         key={i}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
-        transition={{ delay: i * 0.1 + 1.5 }}
+        transition={{ delay: i * 0.1 + 1.5 }} >
-      >
+
-        <TransformGridItem transform={wrapTransform(transform)} />
+        <TransformGridItem
+          transform={wrapTransform(transform)}/>
+
       </motion.li>
-    ))}
+    )}
   </ul>
-)

src/TransformGridItem/index.tsx

@@ -1,25 +1,22 @@
-// src/components/TransformGridItem.tsx
+import { ChangeEvent, FC, useEffect, useState } from "react";
-
-import { ChangeEvent, FC, useEffect, useState } from 'react'
 import style from './style.module.scss'
-import { Button } from '../Components/Button'
+import { Button } from "../Components/Button";
-import { Input } from '../Components/Input'
+import { Input } from "../Components/Input";
-// Remove TextArea import as it's no longer used
+import { TextArea } from "../Components/TextArea";
-import clsx from 'clsx'
+import clsx from "clsx";
-import { useRecoilState } from 'recoil'
+import { useRecoilState } from "recoil";
-import { EditorValueState } from '../GlobalStates/EditorValueState'
+import { EditorValueState } from "../GlobalStates/EditorValueState";
 import {
   TransformCheckboxOption,
   TransformIntboxOption,
   TransformRadioOption,
   TransformTextboxOption,
   WrappedTransform,
-  WrappedTransformResult,
+  WrappedTransformResult
-} from '../Transforms/Transform'
+} from "../Transforms/Transform";
-import { useLocalStorage } from '@uidotdev/usehooks'
+import { useLocalStorage } from "@uidotdev/usehooks";
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, motion } from "framer-motion";
 import { Tooltip } from 'react-tooltip'
-import { TextArea } from '../Components/TextArea'
 
 interface TransformGridItemProp {
   transform: WrappedTransform
@@ -28,13 +25,10 @@ interface TransformGridItemProp {
 export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const [value, setValue] = useRecoilState(EditorValueState)
   const [options, setOptions] = useState(transform.options)
-  const [closedToggle, setClosedToggle] = useLocalStorage(
+  const [closedToggle, setClosedToggle] = useLocalStorage(`transform_closed__${transform.name}`, false)
-    `transform_closed__${transform.name}`,
-    false,
-  )
   const [result, setResult] = useState<WrappedTransformResult>({
     error: false,
-    value: '',
+    value: ''
   })
   
   const previewDisabled = value.length > 30000
@@ -47,64 +41,59 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
         setResult(result)
         return result
       })
-      .catch((error) => {
-        setResult({ error: true, value: error.toString() })
-        return { error: true, value: error.toString() }
-      })
   
-  // Trigger transform when value, option or closed state changes
+  // trigger transform when value, option or closed state changed
   useEffect(() => {
-    if (previewDisabled) return
+    if (previewDisabled)
+      return
 
-    transform
+    triggerTransform()
-      .fn(value, options)
+  }, [value, options, closed])
-      .then(setResult.bind(this))
-      .catch((error) => setResult({ error: true, value: error.toString() }))
-  }, [value, options, closed, previewDisabled, transform])
 
-  // Reset error state when options change
+  // reset error state when option changed
   useEffect(() => {
-    if (!previewDisabled) return
+    if (!previewDisabled)
+      return
 
     setResult({
       error: false,
-      value: '',
+      value: ''
     })
-  }, [options, previewDisabled])
+  }, [options])
 
-  // Force disable preview when value is longer than 30,000 chars
+  // forcely disable preview when value is longer than 30,000 chars
   useEffect(() => {
     if (previewDisabled) {
       setResult({
         error: false,
-        value: '',
+        value: ''
       })
       return
     }
 
-    transform
+    triggerTransform()
-      .fn(value, options)
+  }, [value])
-      .then(setResult.bind(this))
-      .catch((error) => setResult({ error: true, value: error.toString() }))
-  }, [value, previewDisabled, transform, options])
 
   const onCheckboxOptionChanged =
     (option: TransformCheckboxOption) =>
     (event: ChangeEvent<HTMLInputElement>) => {
+    
     options.set(option.key, {
       ...option,
-        value: event.target.checked,
+      value: event.target.checked
     })
 
     setOptions(new Map(options))
   }
 
+  
   const onTextboxOptionChanged =
     (option: TransformTextboxOption) =>
     (event: ChangeEvent<HTMLInputElement>) => {
+    
     options.set(option.key, {
       ...option,
-        value: event.target.value,
+      value: event.target.value
     })
 
     setOptions(new Map(options))
@@ -113,9 +102,10 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const onIntboxOptionChanged =
     (option: TransformIntboxOption) =>
     (event: ChangeEvent<HTMLInputElement>) => {
+    
     options.set(option.key, {
       ...option,
-        value: parseInt(event.target.value),
+      value: parseInt(event.target.value)
     })
 
     setOptions(new Map(options))
@@ -124,24 +114,28 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
   const onRadioOptionChanged =
     (option: TransformRadioOption) =>
     (event: ChangeEvent<HTMLInputElement>) => {
+    
     options.set(option.key, {
       ...option,
-        value: event.target.value,
+      value: event.target.value
     })
 
     setOptions(new Map(options))
   }
 
   const onForwardButtonPressed = async () => {
-    const result = await triggerTransform()
+    const result =
+      await triggerTransform()
 
-    if (result.error) return
+    if (result.error)
+      return
 
     setValue(result.value)
   }
 
   const onLabelClicked = async () => {
-    if (previewDisabled) return
+    if (previewDisabled)
+      return
     
     setClosedToggle(!closed)
   }
@@ -150,23 +144,22 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
     <div className={clsx(style.item, closed && style.closed)}>
       <div className={style.toolbar}>
         <div data-tooltip-id={`${transform.name}-tooltip`}>
-          <Button disabled={result.error} onClick={onForwardButtonPressed}>
+          <Button
+            disabled={result.error}
+            onClick={onForwardButtonPressed}>
+
             &lt;&lt;&lt;
           </Button>
         </div>
 
-        <Tooltip
+        <Tooltip className={style.error} id={`${transform.name}-tooltip`} place="bottom">
-          className={style.error}
-          id={`${transform.name}-tooltip`}
-          place="bottom"
-        >
           {previewDisabled && result.error && result.value}
         </Tooltip>
         
         <h2
           onClick={onLabelClicked}
-          className={clsx(style.name, previewDisabled && style.previewDisabled)}
+          className={clsx(style.name, previewDisabled && style.previewDisabled)}>
-        >
+
           {transform.name}
         </h2>
         
@@ -180,10 +173,8 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                 <Input
                   checked={option.value}
                   onChange={onCheckboxOptionChanged(option)}
-                  type="checkbox"
+                  type="checkbox" />
-                />
+              </label>))}
-              </label>
-            ))}
           
           {[...options.values()]
             ?.filter((v) => v.type === 'TEXTBOX')
@@ -194,10 +185,9 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                 <Input
                   value={option.value}
                   onChange={onTextboxOptionChanged(option)}
-                  type="text"
+                  type="text" />
-                />
+              </label>))}
-              </label>
+
-            ))}
               
           {[...options.values()]
             ?.filter((v) => v.type === 'INTBOX')
@@ -209,10 +199,9 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                   min={1}
                   value={option.value}
                   onChange={onIntboxOptionChanged(option)}
-                  type="number"
+                  type="number" />
-                />
+              </label>))}
-              </label>
+
-            ))}
               
           {[...options.values()]
             ?.filter((v) => v.type === 'RADIO')
@@ -220,8 +209,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
               <div
                 key={i}
                 onChange={onRadioOptionChanged(option)}
-                className={style.optionItem}
+                className={style.optionItem}>
-              >
                 {option.radios.map((radio, i2) => (
                   <label key={i2}>
                     <p>{radio.label ?? radio.value}:</p>
@@ -231,31 +219,28 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
                       name={option.key}
                       defaultChecked={radio.value === option.value}
                       value={radio.value}
-                      type="radio"
+                      type="radio" />
-                    />
                   </label>
                 ))}
-              </div>
+
-            ))}
+              </div>))}
         </div>
       </div>
 
       <AnimatePresence>
-        {!closed && (
+        {!closed &&
           <motion.div
             initial={{ height: 0 }}
             animate={{ height: 200 }}
             exit={{ height: 0 }}
-            className={style.output}
+            className={style.output}>
-          >
             <TextArea
               readOnly
               value={result.value}
               placeholder="(empty)"
-              className={clsx(result.error && style.error)}
+              className={clsx(result.error && style.error)} />
-            />
           </motion.div>
-        )}
+        }
       </AnimatePresence>
     </div>
   )

src/Transforms/Base64Transforms.ts

@@ -1,11 +1,11 @@
-import { Transform } from './Transform'
+import { Transform } from "./Transform";
 
 export const Base64DecodeTransform: Transform = {
   name: 'base64d',
-  fn: async (v) => atob(v),
+  fn: async (v) => atob(v)
 }
 
 export const Base64EncodeTransform: Transform = {
   name: 'base64e',
-  fn: async (v) => btoa(v),
+  fn: async (v) => btoa(v)
 }

src/Transforms/DatetimeTransforms.ts

@@ -1,6 +1,6 @@
-import { Transform } from './Transform'
+import { Transform } from "./Transform";
 import { strptime } from 'strtime'
-import moment from 'moment'
+import moment from "moment";
 
 export const DatetimeTransform: Transform = {
   name: 'datetime',
@@ -20,28 +20,31 @@ export const DatetimeTransform: Transform = {
         
         throw new Error('Unknown Format')
       })
-      .map((date) =>
+      .map((date) => JSON.stringify({
-        JSON.stringify({
         year: date.getFullYear(),
         month: date.getMonth() + 1,
         date: date.getDate(),
         hour: date.getHours(),
         minute: date.getMinutes(),
         second: date.getSeconds(),
-          milli: date.getMilliseconds(),
+        milli: date.getMilliseconds()
-        }),
+      }))
-      )
       .join('\n')
 
-    return [expression, samples, parsedSamples].join('\n\n')
+    return [
+      expression,
+      samples,
+      parsedSamples
+    ].join('\n\n')
   },
 
-  options: [
+  options: [{
-    {
     type: 'RADIO',
     key: 'f',
     value: 'c',
-      radios: [{ value: 'c' }, { value: 'java' }],
+    radios: [
-    },
+      { value: 'c' },
-  ],
+      { value: 'java' }
+    ]
+  }]
 }

src/Transforms/GzipCompressTransform.ts

@@ -1,82 +0,0 @@
-// GzipCompressTransform.ts
-import { Transform } from './Transform'
-
-/**
- * Compresses a string using Gzip and encodes the result in Base64.
- * @param input - The input string to compress.
- * @returns A promise that resolves to the Base64-encoded compressed string.
- */
-const compressGzip = async (input: string): Promise<string> => {
-  // Check if CompressionStream is supported
-  if (typeof CompressionStream === 'undefined') {
-    throw new Error(
-      'CompressionStream API is not supported in this environment.',
-    )
-  }
-
-  // Encode the input string to a Uint8Array
-  const encoder = new TextEncoder()
-  const encoded = encoder.encode(input)
-
-  // Create a ReadableStream from the encoded data
-  const readable = new ReadableStream<Uint8Array>({
-    start(controller) {
-      controller.enqueue(encoded)
-      controller.close()
-    },
-  })
-
-  // Create a CompressionStream for Gzip
-  const compressionStream = new CompressionStream('gzip')
-
-  // Pipe the readable stream through the compression stream
-  const compressedStream = readable.pipeThrough(compressionStream)
-
-  // Collect the compressed chunks
-  const reader = compressedStream.getReader()
-  const chunks: Uint8Array[] = []
-  let done = false
-
-  while (!done) {
-    const { value, done: doneReading } = await reader.read()
-    if (value) {
-      chunks.push(value)
-    }
-    done = doneReading
-  }
-
-  // Concatenate all chunks into a single Uint8Array
-  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0)
-  const compressedData = new Uint8Array(totalLength)
-  let offset = 0
-  for (const chunk of chunks) {
-    compressedData.set(chunk, offset)
-    offset += chunk.length
-  }
-
-  // Convert the compressed data to a Base64 string
-  const base64String = arrayBufferToBase64(compressedData)
-
-  return base64String
-}
-
-/**
- * Converts a Uint8Array to a Base64-encoded string.
- * @param buffer - The Uint8Array to convert.
- * @returns The Base64-encoded string.
- */
-const arrayBufferToBase64 = (buffer: Uint8Array): string => {
-  let binary = ''
-  for (let i = 0; i < buffer.length; i++) {
-    binary += String.fromCharCode(buffer[i])
-  }
-  return btoa(binary)
-}
-
-export const GzipCompressTransform: Transform = {
-  name: 'gzipc', // Unique identifier for the transform
-
-  fn: (v: string) => compressGzip(v),
-
-  options: [], // Add any options if needed
-}

src/Transforms/GzipTransform.ts

@@ -1,4 +1,4 @@
-import { Transform } from './Transform'
+import { Transform } from "./Transform"
 
 const decompressGzip = async (base64: string) => {
   const byteCharacters = atob(base64)
@@ -7,9 +7,10 @@ const decompressGzip = async (base64: string) => {
   for (let i = 0; i < byteCharacters.length; i++)
     byteNumbers[i] = byteCharacters.charCodeAt(i)
 
-  const decompressedStream = new Blob([new Uint8Array(byteNumbers)])
+  const decompressedStream =
+    new Blob([new Uint8Array(byteNumbers)])
       .stream()
-    .pipeThrough(new DecompressionStream('gzip'))
+      .pipeThrough(new DecompressionStream("gzip"))
 
   return await new Response(decompressedStream).text()
 }
@@ -17,5 +18,6 @@ const decompressGzip = async (base64: string) => {
 export const GzipDecompressTransform: Transform = {
   name: 'gzipd',
   
-  fn: (v) => decompressGzip(v),
+  fn: (v) => decompressGzip(v)
 }
+

src/Transforms/JSONTransforms.ts

@@ -1,50 +1,39 @@
 import JSON5 from 'json5'
-import { Transform } from './Transform'
+import { Transform } from "./Transform";
 
 export const JSONBeautifyTransform: Transform = {
   name: 'jsonbtf',
 
   fn: async (v, o) =>
     o.get('multiline')?.value === true
-      ? JSON.stringify(
+      ? JSON.stringify(JSON5.parse(v), null, o.get('tab')?.value as number ?? 2)
-          JSON5.parse(v),
+      : v.split('\n').map((v2) => JSON.stringify(JSON5.parse(v2), null, o.get('tab')?.value as number ?? 2)).join('\n'),
-          null,
-          (o.get('tab')?.value as number) ?? 2,
-        )
-      : v
-          .split('\n')
-          .map((v2) =>
-            JSON.stringify(
-              JSON5.parse(v2),
-              null,
-              (o.get('tab')?.value as number) ?? 2,
-            ),
-          )
-          .join('\n'),
 
   options: [
     {
       type: 'CHECKBOX',
-      key: 'multiline',
+      key: 'multiline'
     },
     {
       type: 'INTBOX',
       key: 'tab',
-      value: 2,
+      value: 2
-    },
+    }
-  ],
+  ]
 }
 
 export const JSONSimplifyTransform: Transform = {
   name: 'jsonsmp',
   
-  fn: async (v) => JSON.stringify(JSON5.parse(v)),
+  fn: async (v) =>
+    JSON.stringify(JSON5.parse(v))
 }
 
 export const JSONEscapeTransform: Transform = {
   name: 'jsonesc',
 
-  fn: async (v) => JSON.stringify(v),
+  fn: async (v) =>
+    JSON.stringify(v)
 }
 
 export const JSONUnescapeTransform: Transform = {
@@ -53,8 +42,9 @@ export const JSONUnescapeTransform: Transform = {
   fn: async (v) => {
     const result = JSON5.parse(v)
 
-    if (typeof result !== 'string') throw new Error('Not JSON escaped')
+    if (typeof result !== 'string')
+      throw new Error('Not JSON escaped')
 
     return result
-  },
+  } 
 }

src/Transforms/RegexpTransform.ts

@@ -1,4 +1,4 @@
-import { Transform } from './Transform'
+import { Transform } from "./Transform";
 
 export const RegexpTransform: Transform = {
   name: 'regexp',
@@ -8,9 +8,14 @@ export const RegexpTransform: Transform = {
 
     const parsedSamples = samples
       .split('\n')
-      .map((sample) => JSON.stringify(regexp.exec(sample)?.groups))
+      .map((sample) =>
+        JSON.stringify(regexp.exec(sample)?.groups))
       .join('\n')
 
-    return [expression, samples, parsedSamples].join('\n\n')
+    return [
-  },
+      expression,
+      samples,
+      parsedSamples
+    ].join('\n\n')
+  }
 }

src/Transforms/Transform.ts

@@ -1,46 +1,38 @@
-import {
+import { Base64DecodeTransform, Base64EncodeTransform } from "./Base64Transforms"
-  Base64DecodeTransform,
+import { DatetimeTransform } from "./DatetimeTransforms"
-  Base64EncodeTransform,
+import { GzipDecompressTransform } from "./GzipTransform"
-} from './Base64Transforms'
+import { JSONBeautifyTransform, JSONEscapeTransform, JSONSimplifyTransform, JSONUnescapeTransform } from "./JSONTransforms"
-import { DatetimeTransform } from './DatetimeTransforms'
+import { RegexpTransform } from "./RegexpTransform"
-import { GzipCompressTransform } from './GzipCompressTransform'
+import { URIDecodeTransform, URIEncodeTransform } from "./URITransforms"
-import { GzipDecompressTransform } from './GzipTransform'
+import { JSON2YAMLTransform, YAML2JSONTransform } from "./YAMLTransforms"
-import {
-  JSONBeautifyTransform,
-  JSONEscapeTransform,
-  JSONSimplifyTransform,
-  JSONUnescapeTransform,
-} from './JSONTransforms'
-import { RegexpTransform } from './RegexpTransform'
-import { URIDecodeTransform, URIEncodeTransform } from './URITransforms'
-import { JSON2YAMLTransform, YAML2JSONTransform } from './YAMLTransforms'
 
 export interface TransformCheckboxOption {
-  type: 'CHECKBOX'
+  type: 'CHECKBOX',
-  key: string
+  key: string,
-  label?: string
+  label?: string,
   value?: boolean
 }
 
+
 export interface TransformTextboxOption {
-  type: 'TEXTBOX'
+  type: 'TEXTBOX',
-  key: string
+  key: string,
-  label?: string
+  label?: string,
   value?: string
 }
 
 export interface TransformIntboxOption {
-  type: 'INTBOX'
+  type: 'INTBOX',
-  key: string
+  key: string,
-  label?: string
+  label?: string,
   value?: number
 }
 
 export interface TransformRadioOption {
-  type: 'RADIO'
+  type: 'RADIO',
-  key: string
+  key: string,
-  label?: string
+  label?: string,
-  value?: string
+  value?: string,
   radios: {
     label?: string
     value: string
@@ -48,10 +40,8 @@ export interface TransformRadioOption {
 }
 
 export type TransformOption = 
-  | TransformCheckboxOption
+  TransformCheckboxOption | TransformTextboxOption |
-  | TransformTextboxOption
+  TransformIntboxOption | TransformRadioOption
-  | TransformIntboxOption
-  | TransformRadioOption
 
 export interface Transform {
   name: string
@@ -65,12 +55,10 @@ export interface WrappedTransformResult {
 }
 
 export interface WrappedTransform extends Omit<Transform, 'fn' | 'options'> {
-  wrapped: true
+  wrapped: true,
 
-  fn: (
+  fn: (value: string, options: Map<string, TransformOption>) =>
-    value: string,
+    Promise<WrappedTransformResult>,
-    options: Map<string, TransformOption>,
-  ) => Promise<WrappedTransformResult>
 
   options: Map<string, TransformOption>
 }
@@ -79,15 +67,16 @@ export const wrapTransform = (transform: Transform): WrappedTransform => ({
   ...transform,
 
   fn: async (...args) =>
-    await transform
+    await transform.fn(...args)
-      .fn(...args)
+      .then((value) =>
-      .then((value) => ({ error: false, value: value.toString() }))
+        ({ error: false, value: value.toString() }))
-      .catch((error) => ({ error: true, value: error.toString() })),
+      .catch((error) =>
+        ({ error: true, value: error.toString() })),
 
   options: new Map<string, TransformOption>(
-    (transform.options ?? []).map((v) => [v.key, v]),
+    (transform.options ?? []).map((v) => [v.key, v])
   ),
-  wrapped: true,
+  wrapped: true
 })
 
 export const transforms: Transform[] = [
@@ -103,6 +92,5 @@ export const transforms: Transform[] = [
   JSONUnescapeTransform,
   JSON2YAMLTransform,
   YAML2JSONTransform,
-  GzipCompressTransform,
+  GzipDecompressTransform
-  GzipDecompressTransform,
 ]

src/Transforms/URITransforms.ts

@@ -1,29 +1,29 @@
-import { Transform } from './Transform'
+import { Transform } from "./Transform";
 
 export const URIDecodeTransform: Transform = {
   name: 'urid',
 
   fn: async (v, o) =>
-    o.get('cmp')?.value === true ? decodeURIComponent(v) : decodeURI(v),
+    o.get('cmp')?.value === true
+      ? decodeURIComponent(v)
+      : decodeURI(v),
 
-  options: [
+  options: [{
-    {
     type: 'CHECKBOX',
-      key: 'cmp',
+    key: 'cmp'
-    },
+  }]
-  ],
 }
 
 export const URIEncodeTransform: Transform = {
   name: 'urie',
   
   fn: async (v, o) =>
-    o.get('cmp')?.value === true ? encodeURIComponent(v) : encodeURI(v),
+    o.get('cmp')?.value === true
+      ? encodeURIComponent(v)
+      : encodeURI(v),
 
-  options: [
+  options: [{
-    {
     type: 'CHECKBOX',
-      key: 'cmp',
+    key: 'cmp'
-    },
+  }]
-  ],
 }

src/Transforms/YAMLTransforms.ts

@@ -1,15 +1,17 @@
-import { Transform } from './Transform'
+import { Transform } from "./Transform";
 import YAML from 'yaml'
 import JSON5 from 'json5'
 
 export const YAML2JSONTransform: Transform = {
   name: 'yaml2json',
 
-  fn: async (v) => JSON.stringify(YAML.parse(v)),
+  fn: async (v) =>
+    JSON.stringify(YAML.parse(v))
 }
 
 export const JSON2YAMLTransform: Transform = {
   name: 'json2yaml',
 
-  fn: async (v) => YAML.stringify(JSON5.parse(v)),
+  fn: async (v) =>
+    YAML.stringify(JSON5.parse(v))
 }

src/main.css

@@ -21,8 +21,3 @@ input[type=number] {
   appearance: textfield;
   -moz-appearance: textfield;
 }
-
-*::selection {
-  color: #212121;
-  background-color: #ff1696;
-}

src/vite-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="vite/client" />
 
 module 'strtime' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  function strptime (string, string): Date
-  function strptime(string, string): Date
 }

vite.config.ts

@@ -7,8 +7,8 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        api: 'modern-compiler', // or "modern"
+        api: 'modern-compiler' // or "modern"
-      },
+      }
-    },
+    }
-  },
+  }
 })