feat(yaml-viewer):-add-parsing-validation

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 20
-          # cache: 'pnpm'
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm i

package.json

@@ -59,7 +59,7 @@
     "cidr-tools": "^7.0.4",
     "colord": "^2.9.3",
     "composerize": "^1.6.12",
-    "composeverter": "^1.6.2",
+    "composeverter": "^1.7.2",
     "country-code-lookup": "^0.1.0",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",

src/tools/yaml-viewer/composeverter.d.ts

@@ -0,0 +1,20 @@
+declare module 'composeverter' {
+    interface Configuration {
+      expandVolumes?: boolean;
+      expandPorts?: boolean;
+      indent?: number;
+    }
+    interface DockerComposeValidatioError {
+      line?: number;
+      message: string;
+      helpLink?: string;
+    }
+    export function validateDockerComposeToCommonSpec(content: string): DockerComposeValidatioError[];
+    export function migrateFromV2xToV3x(content: string, configuration?: Configuration = null): string;
+    export function migrateFromV3xToV2x(content: string, configuration?: Configuration = null): string;
+    export function migrateFromV1ToV2x(content: string, configuration?: Configuration = null): string;
+    export function migrateToCommonSpec(content: string, configuration?: Configuration = null): string;
+    export function migrateFromV2xToV3x(content: string, configuration?: Configuration = null): string;
+    export function getDockerComposeSchemaWithoutFormats(): object;
+    export function yamlParse(content: string): object;
+  }

src/tools/yaml-viewer/yaml-models.ts

@@ -1,5 +1,5 @@
 import { type MaybeRef, get } from '@vueuse/core';
-
+import { yamlParse } from 'composeverter';
 import yaml from 'yaml';
 
 export { formatYaml };
@@ -13,7 +13,7 @@ function formatYaml({
   sortKeys?: MaybeRef<boolean>
   indentSize?: MaybeRef<number>
 }) {
-  const parsedYaml = yaml.parse(get(rawYaml));
+  const parsedYaml = yamlParse(get(rawYaml));
 
   const formattedYAML = yaml.stringify(parsedYaml, {
     sortMapEntries: get(sortKeys),

src/tools/yaml-viewer/yaml-viewer.vue

@@ -1,72 +1,80 @@
 <script setup lang="ts">
-import yaml from 'yaml';
 import { useStorage } from '@vueuse/core';
 import { formatYaml } from './yaml-models';
-import { withDefaultOnError } from '@/utils/defaults';
-import { useValidation } from '@/composable/validation';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 
-const inputElement = ref<HTMLElement>();
-
 const rawYaml = useStorage('yaml-prettify:raw-yaml', '');
 const indentSize = useStorage('yaml-prettify:indent-size', 2);
 const sortKeys = useStorage('yaml-prettify:sort-keys', false);
 
-const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml, indentSize, sortKeys }), ''));
-
-const rawYamlValidation = useValidation({
-  source: rawYaml,
-  rules: [
-    {
-      validator: v => v === '' || yaml.parse(v),
-      message: 'Provided YAML is not valid.',
-    },
-  ],
+const yamlFormattingResult = computed(() => {
+  try {
+    return { yaml: formatYaml({ rawYaml, indentSize, sortKeys }), errors: [] };
+  }
+  catch (e: any) {
+    return { yaml: '#see error messages', errors: e.toString().split('\n') };
+  }
 });
+const errors = computed(() => yamlFormattingResult.value.errors);
+const cleanYaml = computed(() => yamlFormattingResult.value.yaml);
+
+const MONACO_EDITOR_OPTIONS = {
+  automaticLayout: true,
+  formatOnType: true,
+  formatOnPaste: true,
+};
 </script>
 
 <template>
-  <div style="flex: 0 0 100%">
-    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
-      <n-form-item label="Sort keys :" label-placement="left" label-width="100">
-        <n-switch v-model:value="sortKeys" />
-      </n-form-item>
-      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
-        <n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
-      </n-form-item>
+  <div max-w-600>
+    <div style="flex: 0 0 100%">
+      <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
+        <n-form-item label="Sort keys :" label-placement="left" label-width="100">
+          <n-switch v-model:value="sortKeys" />
+        </n-form-item>
+        <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+          <n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
+        </n-form-item>
+      </div>
     </div>
-  </div>
 
-  <n-form-item
-    label="Your raw YAML"
-    :feedback="rawYamlValidation.message"
-    :validation-status="rawYamlValidation.status"
-  >
-    <c-input-text
-      ref="inputElement"
-      v-model:value="rawYaml"
-      placeholder="Paste your raw YAML here..."
-      rows="20"
-      multiline
-      autocomplete="off"
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
-      monospace
-    />
-  </n-form-item>
-  <n-form-item label="Prettified version of your YAML">
-    <TextareaCopyable :value="cleanYaml" language="yaml" :follow-height-of="inputElement" />
-  </n-form-item>
+    <c-label label="Your raw YAML:">
+      <div relative w-full>
+        <c-monaco-editor
+          v-model:value="rawYaml"
+          theme="vs-dark"
+          language="yaml"
+          height="250px"
+          :options="MONACO_EDITOR_OPTIONS"
+        />
+      </div>
+    </c-label>
+
+    <div v-if="errors.length > 0">
+      <n-alert title="The following errors occured" type="error" mt-5>
+        <ul>
+          <li v-for="(message, index) of errors" :key="index">
+            {{ message }}
+          </li>
+        </ul>
+      </n-alert>
+    </div>
+
+    <n-divider />
+
+    <n-form-item label="Prettified version of your YAML">
+      <TextareaCopyable :value="cleanYaml" language="yaml" />
+    </n-form-item>
+  </div>
 </template>
 
-<style lang="less" scoped>
-.result-card {
-  position: relative;
-  .copy-button {
+  <style lang="less" scoped>
+    .result-card {
+    position: relative;
+    .copy-button {
     position: absolute;
     top: 10px;
     right: 10px;
-  }
-}
-</style>
+    }
+    }
+  </style>