From b7172c1a7acb4ac294fa0e9343379f7da4352259 Mon Sep 17 00:00:00 2001 From: ntnyq Date: Tue, 26 Mar 2024 17:00:50 +0800 Subject: [PATCH] fix: correct parser mapping --- components/ActionBar.vue | 24 +++++++++++++++++------- components/LanguageSelect.vue | 25 +++++++++++++++++++++++++ constants/parsers.ts | 35 ++++++++++++++++++++++++++--------- stores/editor.ts | 35 +++++++++++++++-------------------- utils/format.ts | 2 ++ 5 files changed, 85 insertions(+), 36 deletions(-) diff --git a/components/ActionBar.vue b/components/ActionBar.vue index 360e836..c09ab76 100644 --- a/components/ActionBar.vue +++ b/components/ActionBar.vue @@ -6,9 +6,19 @@ import { useEditorStore } from '@/stores/editor' const editorStore = useEditorStore() -const toast = (msg: string) => { +interface ToastOptions { + isError?: boolean +} + +const toast = (msg: string, options: ToastOptions = {}) => { destroyAllToasts() - createToast(msg, { timeout: 2e3 }) + if (options.isError) { + const msgNode = document.createElement('div') + msgNode.innerHTML = `❌ Error: ${msg}` + createToast(msgNode, { timeout: 2e3 }) + } else { + createToast(msg, { timeout: 2e3 }) + } } const handleFormat = async () => { @@ -18,21 +28,21 @@ const handleFormat = async () => { try { await editorStore.formatCode() toast('Format Success') - } catch { - toast('Ops, something happened') + } catch (err: unknown) { + toast((err as Error)?.message || 'Unknown error', { isError: true }) } } const copyResult = () => { - if (!editorStore.sourceCode) { + if (!editorStore.resultCode) { return toast('Nothing to copy') } const isSuccess = copy(editorStore.resultCode) - isSuccess ? toast('Copied to clipboard') : toast('Failed to copy to clipboard') + isSuccess ? toast('Copied to clipboard') : toast('Failed to copy to clipboard', { isError: true }) } const clearCode = () => { - if (!editorStore.sourceCode) { + if (!editorStore.sourceCode && !editorStore.resultCode) { return toast('Nothing to clear') } diff --git a/components/LanguageSelect.vue b/components/LanguageSelect.vue index b24edec..49e3cc2 100644 --- a/components/LanguageSelect.vue +++ b/components/LanguageSelect.vue @@ -18,6 +18,11 @@ const languages = ref([ label: 'JavaScript', icon: 'i-vscode-icons:file-type-js-official', }, + { + id: 'json', + label: 'JSON', + icon: 'i-vscode-icons:file-type-json', + }, { id: 'typescript', label: 'TypeScript', @@ -33,11 +38,26 @@ const languages = ref([ label: 'HTML', icon: 'i-vscode-icons:file-type-html', }, + { + id: 'angular', + label: 'Angular', + icon: 'i-vscode-icons:file-type-angular', + }, { id: 'css', label: 'CSS', icon: 'i-vscode-icons:file-type-css', }, + { + id: 'less', + label: 'Less', + icon: 'i-vscode-icons:file-type-less', + }, + { + id: 'scss', + label: 'SCSS', + icon: 'i-vscode-icons:file-type-scss', + }, { id: 'yaml', label: 'YAML', @@ -48,6 +68,11 @@ const languages = ref([ label: 'Markdown', icon: 'i-vscode-icons:file-type-markdown', }, + { + id: 'mdx', + label: 'MDX', + icon: 'i-vscode-icons:file-type-mdx', + }, ]) const currentLanguage = computed(() => { return languages.value.find(lang => lang.id === editorStore.activeLanguage) diff --git a/constants/parsers.ts b/constants/parsers.ts index 6227c4a..a14346d 100644 --- a/constants/parsers.ts +++ b/constants/parsers.ts @@ -6,18 +6,35 @@ * @file Language to parser map */ +/** + * language => parser + */ export const PARSERS_MAP = { + // plugin babel + javascript: 'babel', + json: 'json', + json5: 'json5', + jsonc: 'jsonc', + + // plugin markdown + mdx: 'mdx', + remark: 'remark', + markdown: 'markdown', + + // plugin typescript + typescript: 'typescript', + + // plugin postCSS css: 'css', - flow: 'flow', + less: 'less', + sass: 'scss', + scss: 'scss', + + // plugin HTML html: 'html', - javascript: 'babel', - js: 'babel', - json: 'babel', - less: 'css', - sass: 'css', - scss: 'css', vue: 'vue', - ts: 'typescript', - typescript: 'typescript', + angular: 'angular', + + // plugin yaml yaml: 'yaml', } diff --git a/stores/editor.ts b/stores/editor.ts index 5a34533..ae63405 100644 --- a/stores/editor.ts +++ b/stores/editor.ts @@ -21,26 +21,21 @@ export const useEditorStore = defineStore('editor', () => { const formatCost = ref(0) const formatCode = async () => { - try { - formatStartTime.value = Date.now() - - const parser = PARSERS_MAP[activeLanguage.value as keyof typeof PARSERS_MAP] - if (!parser) return - - const result = await format(sourceCode.value, { - plugins, - parser, - }) - - resultCode.value = result - } catch (err) { - console.log(err) - } finally { - formatEndTime.value = Date.now() - formatCost.value = formatEndTime.value - formatStartTime.value - formatStartTime.value = 0 - formatEndTime.value = 0 - } + formatStartTime.value = Date.now() + + const parser = PARSERS_MAP[activeLanguage.value as keyof typeof PARSERS_MAP] + if (!parser) return + + const result = await format(sourceCode.value, { + plugins, + parser: activeLanguage.value, + }) + + resultCode.value = result + formatEndTime.value = Date.now() + formatCost.value = formatEndTime.value - formatStartTime.value + formatStartTime.value = 0 + formatEndTime.value = 0 } const clearCode = () => { diff --git a/utils/format.ts b/utils/format.ts index f7e0852..9185818 100644 --- a/utils/format.ts +++ b/utils/format.ts @@ -9,6 +9,7 @@ import pluginMarkdown from 'prettier/plugins/markdown' import pluginHtml from 'prettier/plugins/html' import pluginTypeScript from 'prettier/plugins/typescript' import pluginYaml from 'prettier/plugins/yaml' +import pluginPostCSS from 'prettier/plugins/postcss' import type { Options, Plugin } from 'prettier' export const plugins: Plugin[] = [ @@ -18,6 +19,7 @@ export const plugins: Plugin[] = [ pluginHtml, pluginTypeScript, pluginYaml, + pluginPostCSS, ] export const format = (source: string, options: Options = {}) => {