fix: correct parser mapping

ntnyq · Mar 26, 2024 · b7172c1 · b7172c1
1 parent 6d1f26c
commit b7172c1
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 36 deletions.
diff --git 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 = `<span style="font-weight: bold; color: red;">❌ Error</span>: ${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
@@ -18,6 +18,11 @@ const languages = ref<Language[]>([
     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<Language[]>([
     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<Language[]>([
     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
@@ -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
@@ -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
@@ -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 = {}) => {