This commit is contained in:
parent
05ff8493e4
commit
2fc8269442
@ -2,5 +2,6 @@
|
|||||||
"semi": false,
|
"semi": false,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"useTabs": false
|
"useTabs": false,
|
||||||
|
"trailingComma": "none"
|
||||||
}
|
}
|
||||||
|
@ -13,20 +13,20 @@ export default tseslint.config(
|
|||||||
files: ['**/*.{ts,tsx}'],
|
files: ['**/*.{ts,tsx}'],
|
||||||
languageOptions: {
|
languageOptions: {
|
||||||
ecmaVersion: 2020,
|
ecmaVersion: 2020,
|
||||||
globals: globals.browser,
|
globals: globals.browser
|
||||||
},
|
},
|
||||||
plugins: {
|
plugins: {
|
||||||
'react-hooks': reactHooks,
|
'react-hooks': reactHooks,
|
||||||
'react-refresh': reactRefresh,
|
'react-refresh': reactRefresh
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
...reactHooks.configs.recommended.rules,
|
...reactHooks.configs.recommended.rules,
|
||||||
'react-refresh/only-export-components': [
|
'react-refresh/only-export-components': [
|
||||||
'warn',
|
'warn',
|
||||||
{ allowConstantExport: true },
|
{ allowConstantExport: true }
|
||||||
],
|
]
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
eslintConfigPrettier,
|
eslintConfigPrettier,
|
||||||
eslintPluginPrettierRecommended,
|
eslintPluginPrettierRecommended
|
||||||
)
|
)
|
||||||
|
@ -21,7 +21,7 @@ export const Editor: FC = () => {
|
|||||||
const rect = containerRef.current?.getBoundingClientRect()
|
const rect = containerRef.current?.getBoundingClientRect()
|
||||||
ref.current?.layout({
|
ref.current?.layout({
|
||||||
width: rect?.width ?? 0,
|
width: rect?.width ?? 0,
|
||||||
height: rect?.height ?? 0,
|
height: rect?.height ?? 0
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@ -54,7 +54,7 @@ export const Editor: FC = () => {
|
|||||||
smoothScrolling: true,
|
smoothScrolling: true,
|
||||||
cursorSmoothCaretAnimation: 'on',
|
cursorSmoothCaretAnimation: 'on',
|
||||||
cursorBlinking: 'smooth',
|
cursorBlinking: 'smooth',
|
||||||
cursorStyle: 'line',
|
cursorStyle: 'line'
|
||||||
}}
|
}}
|
||||||
theme="vs-dark"
|
theme="vs-dark"
|
||||||
/>
|
/>
|
||||||
|
@ -4,9 +4,9 @@ export const EditorValueState = atom({
|
|||||||
key: 'editor_value',
|
key: 'editor_value',
|
||||||
default: JSON.stringify(
|
default: JSON.stringify(
|
||||||
{
|
{
|
||||||
Hello: 'world!',
|
Hello: 'world!'
|
||||||
},
|
},
|
||||||
null,
|
null,
|
||||||
2,
|
2
|
||||||
),
|
)
|
||||||
})
|
})
|
||||||
|
@ -7,7 +7,7 @@ import Suika from '../Assets/favicon.webp'
|
|||||||
export const LandingAnimation: FC = () => {
|
export const LandingAnimation: FC = () => {
|
||||||
const [isVisible, setVisible] = useState(true)
|
const [isVisible, setVisible] = useState(true)
|
||||||
const exitAnimation: TargetAndTransition = {
|
const exitAnimation: TargetAndTransition = {
|
||||||
opacity: 0,
|
opacity: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -14,7 +14,7 @@ import {
|
|||||||
TransformRadioOption,
|
TransformRadioOption,
|
||||||
TransformTextboxOption,
|
TransformTextboxOption,
|
||||||
WrappedTransform,
|
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'
|
||||||
@ -30,11 +30,11 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
|||||||
const [options, setOptions] = useState(transform.options)
|
const [options, setOptions] = useState(transform.options)
|
||||||
const [closedToggle, setClosedToggle] = useLocalStorage(
|
const [closedToggle, setClosedToggle] = useLocalStorage(
|
||||||
`transform_closed__${transform.name}`,
|
`transform_closed__${transform.name}`,
|
||||||
false,
|
false
|
||||||
)
|
)
|
||||||
const [result, setResult] = useState<WrappedTransformResult>({
|
const [result, setResult] = useState<WrappedTransformResult>({
|
||||||
error: false,
|
error: false,
|
||||||
value: '',
|
value: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const previewDisabled = value.length > 30000
|
const previewDisabled = value.length > 30000
|
||||||
@ -68,7 +68,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
|||||||
|
|
||||||
setResult({
|
setResult({
|
||||||
error: false,
|
error: false,
|
||||||
value: '',
|
value: ''
|
||||||
})
|
})
|
||||||
}, [options, previewDisabled])
|
}, [options, previewDisabled])
|
||||||
|
|
||||||
@ -77,7 +77,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
|||||||
if (previewDisabled) {
|
if (previewDisabled) {
|
||||||
setResult({
|
setResult({
|
||||||
error: false,
|
error: false,
|
||||||
value: '',
|
value: ''
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -93,7 +93,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
|||||||
(event: ChangeEvent<HTMLInputElement>) => {
|
(event: ChangeEvent<HTMLInputElement>) => {
|
||||||
options.set(option.key, {
|
options.set(option.key, {
|
||||||
...option,
|
...option,
|
||||||
value: event.target.checked,
|
value: event.target.checked
|
||||||
})
|
})
|
||||||
|
|
||||||
setOptions(new Map(options))
|
setOptions(new Map(options))
|
||||||
@ -104,7 +104,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
|||||||
(event: ChangeEvent<HTMLInputElement>) => {
|
(event: ChangeEvent<HTMLInputElement>) => {
|
||||||
options.set(option.key, {
|
options.set(option.key, {
|
||||||
...option,
|
...option,
|
||||||
value: event.target.value,
|
value: event.target.value
|
||||||
})
|
})
|
||||||
|
|
||||||
setOptions(new Map(options))
|
setOptions(new Map(options))
|
||||||
@ -115,7 +115,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
|||||||
(event: ChangeEvent<HTMLInputElement>) => {
|
(event: ChangeEvent<HTMLInputElement>) => {
|
||||||
options.set(option.key, {
|
options.set(option.key, {
|
||||||
...option,
|
...option,
|
||||||
value: parseInt(event.target.value),
|
value: parseInt(event.target.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
setOptions(new Map(options))
|
setOptions(new Map(options))
|
||||||
@ -126,7 +126,7 @@ export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
|||||||
(event: ChangeEvent<HTMLInputElement>) => {
|
(event: ChangeEvent<HTMLInputElement>) => {
|
||||||
options.set(option.key, {
|
options.set(option.key, {
|
||||||
...option,
|
...option,
|
||||||
value: event.target.value,
|
value: event.target.value
|
||||||
})
|
})
|
||||||
|
|
||||||
setOptions(new Map(options))
|
setOptions(new Map(options))
|
||||||
|
@ -2,10 +2,10 @@ import { Transform } from './Transform'
|
|||||||
|
|
||||||
export const Base64DecodeTransform: Transform = {
|
export const Base64DecodeTransform: Transform = {
|
||||||
name: 'base64d',
|
name: 'base64d',
|
||||||
fn: async (v) => atob(v),
|
fn: async (v) => atob(v)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Base64EncodeTransform: Transform = {
|
export const Base64EncodeTransform: Transform = {
|
||||||
name: 'base64e',
|
name: 'base64e',
|
||||||
fn: async (v) => btoa(v),
|
fn: async (v) => btoa(v)
|
||||||
}
|
}
|
||||||
|
@ -28,8 +28,8 @@ export const DatetimeTransform: Transform = {
|
|||||||
hour: date.getHours(),
|
hour: date.getHours(),
|
||||||
minute: date.getMinutes(),
|
minute: date.getMinutes(),
|
||||||
second: date.getSeconds(),
|
second: date.getSeconds(),
|
||||||
milli: date.getMilliseconds(),
|
milli: date.getMilliseconds()
|
||||||
}),
|
})
|
||||||
)
|
)
|
||||||
.join('\n')
|
.join('\n')
|
||||||
|
|
||||||
@ -41,7 +41,7 @@ export const DatetimeTransform: Transform = {
|
|||||||
type: 'RADIO',
|
type: 'RADIO',
|
||||||
key: 'f',
|
key: 'f',
|
||||||
value: 'c',
|
value: 'c',
|
||||||
radios: [{ value: 'c' }, { value: 'java' }],
|
radios: [{ value: 'c' }, { value: 'java' }]
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,7 @@ const compressGzip = async (input: string): Promise<string> => {
|
|||||||
// Check if CompressionStream is supported
|
// Check if CompressionStream is supported
|
||||||
if (typeof CompressionStream === 'undefined') {
|
if (typeof CompressionStream === 'undefined') {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
'CompressionStream API is not supported in this environment.',
|
'CompressionStream API is not supported in this environment.'
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,7 +23,7 @@ const compressGzip = async (input: string): Promise<string> => {
|
|||||||
start(controller) {
|
start(controller) {
|
||||||
controller.enqueue(encoded)
|
controller.enqueue(encoded)
|
||||||
controller.close()
|
controller.close()
|
||||||
},
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Create a CompressionStream for Gzip
|
// Create a CompressionStream for Gzip
|
||||||
@ -78,5 +78,5 @@ export const GzipCompressTransform: Transform = {
|
|||||||
|
|
||||||
fn: (v: string) => compressGzip(v),
|
fn: (v: string) => compressGzip(v),
|
||||||
|
|
||||||
options: [], // Add any options if needed
|
options: [] // Add any options if needed
|
||||||
}
|
}
|
||||||
|
@ -17,5 +17,5 @@ const decompressGzip = async (base64: string) => {
|
|||||||
export const GzipDecompressTransform: Transform = {
|
export const GzipDecompressTransform: Transform = {
|
||||||
name: 'gzipd',
|
name: 'gzipd',
|
||||||
|
|
||||||
fn: (v) => decompressGzip(v),
|
fn: (v) => decompressGzip(v)
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ export const JSONBeautifyTransform: Transform = {
|
|||||||
? JSON.stringify(
|
? JSON.stringify(
|
||||||
JSON5.parse(v),
|
JSON5.parse(v),
|
||||||
null,
|
null,
|
||||||
(o.get('tab')?.value as number) ?? 2,
|
(o.get('tab')?.value as number) ?? 2
|
||||||
)
|
)
|
||||||
: v
|
: v
|
||||||
.split('\n')
|
.split('\n')
|
||||||
@ -17,34 +17,34 @@ export const JSONBeautifyTransform: Transform = {
|
|||||||
JSON.stringify(
|
JSON.stringify(
|
||||||
JSON5.parse(v2),
|
JSON5.parse(v2),
|
||||||
null,
|
null,
|
||||||
(o.get('tab')?.value as number) ?? 2,
|
(o.get('tab')?.value as number) ?? 2
|
||||||
),
|
)
|
||||||
)
|
)
|
||||||
.join('\n'),
|
.join('\n'),
|
||||||
|
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
type: 'CHECKBOX',
|
type: 'CHECKBOX',
|
||||||
key: 'multiline',
|
key: 'multiline'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'INTBOX',
|
type: 'INTBOX',
|
||||||
key: 'tab',
|
key: 'tab',
|
||||||
value: 2,
|
value: 2
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
export const JSONSimplifyTransform: Transform = {
|
export const JSONSimplifyTransform: Transform = {
|
||||||
name: 'jsonsmp',
|
name: 'jsonsmp',
|
||||||
|
|
||||||
fn: async (v) => JSON.stringify(JSON5.parse(v)),
|
fn: async (v) => JSON.stringify(JSON5.parse(v))
|
||||||
}
|
}
|
||||||
|
|
||||||
export const JSONEscapeTransform: Transform = {
|
export const JSONEscapeTransform: Transform = {
|
||||||
name: 'jsonesc',
|
name: 'jsonesc',
|
||||||
|
|
||||||
fn: async (v) => JSON.stringify(v),
|
fn: async (v) => JSON.stringify(v)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const JSONUnescapeTransform: Transform = {
|
export const JSONUnescapeTransform: Transform = {
|
||||||
@ -56,5 +56,5 @@ export const JSONUnescapeTransform: Transform = {
|
|||||||
if (typeof result !== 'string') throw new Error('Not JSON escaped')
|
if (typeof result !== 'string') throw new Error('Not JSON escaped')
|
||||||
|
|
||||||
return result
|
return result
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,5 +12,5 @@ export const RegexpTransform: Transform = {
|
|||||||
.join('\n')
|
.join('\n')
|
||||||
|
|
||||||
return [expression, samples, parsedSamples].join('\n\n')
|
return [expression, samples, parsedSamples].join('\n\n')
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import {
|
import {
|
||||||
Base64DecodeTransform,
|
Base64DecodeTransform,
|
||||||
Base64EncodeTransform,
|
Base64EncodeTransform
|
||||||
} from './Base64Transforms'
|
} from './Base64Transforms'
|
||||||
import { DatetimeTransform } from './DatetimeTransforms'
|
import { DatetimeTransform } from './DatetimeTransforms'
|
||||||
import { GzipCompressTransform } from './GzipCompressTransform'
|
import { GzipCompressTransform } from './GzipCompressTransform'
|
||||||
@ -9,7 +9,7 @@ import {
|
|||||||
JSONBeautifyTransform,
|
JSONBeautifyTransform,
|
||||||
JSONEscapeTransform,
|
JSONEscapeTransform,
|
||||||
JSONSimplifyTransform,
|
JSONSimplifyTransform,
|
||||||
JSONUnescapeTransform,
|
JSONUnescapeTransform
|
||||||
} from './JSONTransforms'
|
} from './JSONTransforms'
|
||||||
import { RegexpTransform } from './RegexpTransform'
|
import { RegexpTransform } from './RegexpTransform'
|
||||||
import { URIDecodeTransform, URIEncodeTransform } from './URITransforms'
|
import { URIDecodeTransform, URIEncodeTransform } from './URITransforms'
|
||||||
@ -69,7 +69,7 @@ export interface WrappedTransform extends Omit<Transform, 'fn' | 'options'> {
|
|||||||
|
|
||||||
fn: (
|
fn: (
|
||||||
value: string,
|
value: string,
|
||||||
options: Map<string, TransformOption>,
|
options: Map<string, TransformOption>
|
||||||
) => Promise<WrappedTransformResult>
|
) => Promise<WrappedTransformResult>
|
||||||
|
|
||||||
options: Map<string, TransformOption>
|
options: Map<string, TransformOption>
|
||||||
@ -85,9 +85,9 @@ export const wrapTransform = (transform: Transform): WrappedTransform => ({
|
|||||||
.catch((error) => ({ error: true, value: error.toString() })),
|
.catch((error) => ({ error: true, value: error.toString() })),
|
||||||
|
|
||||||
options: new Map<string, TransformOption>(
|
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[] = [
|
export const transforms: Transform[] = [
|
||||||
@ -104,5 +104,5 @@ export const transforms: Transform[] = [
|
|||||||
JSON2YAMLTransform,
|
JSON2YAMLTransform,
|
||||||
YAML2JSONTransform,
|
YAML2JSONTransform,
|
||||||
GzipCompressTransform,
|
GzipCompressTransform,
|
||||||
GzipDecompressTransform,
|
GzipDecompressTransform
|
||||||
]
|
]
|
||||||
|
@ -9,9 +9,9 @@ export const URIDecodeTransform: Transform = {
|
|||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
type: 'CHECKBOX',
|
type: 'CHECKBOX',
|
||||||
key: 'cmp',
|
key: 'cmp'
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
export const URIEncodeTransform: Transform = {
|
export const URIEncodeTransform: Transform = {
|
||||||
@ -23,7 +23,7 @@ export const URIEncodeTransform: Transform = {
|
|||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
type: 'CHECKBOX',
|
type: 'CHECKBOX',
|
||||||
key: 'cmp',
|
key: 'cmp'
|
||||||
},
|
}
|
||||||
],
|
]
|
||||||
}
|
}
|
||||||
|
@ -5,11 +5,11 @@ import JSON5 from 'json5'
|
|||||||
export const YAML2JSONTransform: Transform = {
|
export const YAML2JSONTransform: Transform = {
|
||||||
name: 'yaml2json',
|
name: 'yaml2json',
|
||||||
|
|
||||||
fn: async (v) => JSON.stringify(YAML.parse(v)),
|
fn: async (v) => JSON.stringify(YAML.parse(v))
|
||||||
}
|
}
|
||||||
|
|
||||||
export const JSON2YAMLTransform: Transform = {
|
export const JSON2YAMLTransform: Transform = {
|
||||||
name: 'json2yaml',
|
name: 'json2yaml',
|
||||||
|
|
||||||
fn: async (v) => YAML.stringify(JSON5.parse(v)),
|
fn: async (v) => YAML.stringify(JSON5.parse(v))
|
||||||
}
|
}
|
||||||
|
@ -19,5 +19,5 @@ createRoot(document.getElementById('root')!).render(
|
|||||||
|
|
||||||
<LandingAnimation />
|
<LandingAnimation />
|
||||||
</RecoilRoot>
|
</RecoilRoot>
|
||||||
</StrictMode>,
|
</StrictMode>
|
||||||
)
|
)
|
||||||
|
@ -7,8 +7,8 @@ export default defineConfig({
|
|||||||
css: {
|
css: {
|
||||||
preprocessorOptions: {
|
preprocessorOptions: {
|
||||||
scss: {
|
scss: {
|
||||||
api: 'modern-compiler', // or "modern"
|
api: 'modern-compiler' // or "modern"
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in New Issue
Block a user