Skip to content

Commit fd0a723

Browse files
sharevbsharevb
committed
feat(Yaml Viewer): add parsing validation
Add parsing validations Fix CorentinTh#540
1 parent d3b32cc commit fd0a723

File tree

6 files changed

+123
-65
lines changed

6 files changed

+123
-65
lines changed

‎components.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ declare module '@vue/runtime-core' {
126126
MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
127127
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
128128
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
129+
NAlert: typeof import('naive-ui')['NAlert']
129130
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
130131
NCode: typeof import('naive-ui')['NCode']
131132
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
@@ -145,6 +146,7 @@ declare module '@vue/runtime-core' {
145146
NMenu: typeof import('naive-ui')['NMenu']
146147
NScrollbar: typeof import('naive-ui')['NScrollbar']
147148
NSpin: typeof import('naive-ui')['NSpin']
149+
NSwitch: typeof import('naive-ui')['NSwitch']
148150
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
149151
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
150152
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@@ -159,6 +161,7 @@ declare module '@vue/runtime-core' {
159161
RouterLink: typeof import('vue-router')['RouterLink']
160162
RouterView: typeof import('vue-router')['RouterView']
161163
RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
164+
SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
162165
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
163166
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
164167
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"change-case": "^4.1.2",
5252
"colord": "^2.9.3",
5353
"composerize-ts": "^0.6.2",
54+
"composeverter": "^1.7.2",
5455
"country-code-lookup": "^0.1.0",
5556
"cron-validator": "^1.3.1",
5657
"cronstrue": "^2.26.0",

‎pnpm-lock.yaml

Lines changed: 37 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
declare module 'composeverter' {
2+
interface Configuration {
3+
expandVolumes?: boolean;
4+
expandPorts?: boolean;
5+
indent?: number;
6+
}
7+
interface DockerComposeValidatioError {
8+
line?: number;
9+
message: string;
10+
helpLink?: string;
11+
}
12+
export function validateDockerComposeToCommonSpec(content: string): DockerComposeValidatioError[];
13+
export function migrateFromV2xToV3x(content: string, configuration?: Configuration = null): string;
14+
export function migrateFromV3xToV2x(content: string, configuration?: Configuration = null): string;
15+
export function migrateFromV1ToV2x(content: string, configuration?: Configuration = null): string;
16+
export function migrateToCommonSpec(content: string, configuration?: Configuration = null): string;
17+
export function migrateFromV2xToV3x(content: string, configuration?: Configuration = null): string;
18+
export function getDockerComposeSchemaWithoutFormats(): object;
19+
export function yamlParse(content: string): object;
20+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type MaybeRef, get } from '@vueuse/core';
2-
2+
import { yamlParse } from 'composeverter';
33
import yaml from 'yaml';
44

55
export { formatYaml };
@@ -13,7 +13,7 @@ function formatYaml({
1313
sortKeys?: MaybeRef<boolean>
1414
indentSize?: MaybeRef<number>
1515
}) {
16-
const parsedYaml = yaml.parse(get(rawYaml));
16+
const parsedYaml = yamlParse(get(rawYaml));
1717

1818
const formattedYAML = yaml.stringify(parsedYaml, {
1919
sortMapEntries: get(sortKeys),

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

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,80 @@
11
<script setup lang="ts">
2-
import yaml from 'yaml';
32
import { useStorage } from '@vueuse/core';
43
import { formatYaml } from './yaml-models';
5-
import { withDefaultOnError } from '@/utils/defaults';
6-
import { useValidation } from '@/composable/validation';
74
import TextareaCopyable from '@/components/TextareaCopyable.vue';
85
9-
const inputElement = ref<HTMLElement>();
10-
116
const rawYaml = useStorage('yaml-prettify:raw-yaml', '');
127
const indentSize = useStorage('yaml-prettify:indent-size', 2);
138
const sortKeys = useStorage('yaml-prettify:sort-keys', false);
149
15-
const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml, indentSize, sortKeys }), ''));
16-
17-
const rawYamlValidation = useValidation({
18-
source: rawYaml,
19-
rules: [
20-
{
21-
validator: v => v === '' || yaml.parse(v),
22-
message: 'Provided YAML is not valid.',
23-
},
24-
],
10+
const yamlFormattingResult = computed(() => {
11+
try {
12+
return { yaml: formatYaml({ rawYaml, indentSize, sortKeys }), errors: [] };
13+
}
14+
catch (e: any) {
15+
return { yaml: '#see error messages', errors: e.toString().split('\n') };
16+
}
2517
});
18+
const errors = computed(() => yamlFormattingResult.value.errors);
19+
const cleanYaml = computed(() => yamlFormattingResult.value.yaml);
20+
21+
const MONACO_EDITOR_OPTIONS = {
22+
automaticLayout: true,
23+
formatOnType: true,
24+
formatOnPaste: true,
25+
};
2626
</script>
2727

2828
<template>
29-
<div style="flex: 0 0 100%">
30-
<div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
31-
<n-form-item label="Sort keys :" label-placement="left" label-width="100">
32-
<n-switch v-model:value="sortKeys" />
33-
</n-form-item>
34-
<n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
35-
<n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
36-
</n-form-item>
29+
<div max-w-600>
30+
<div style="flex: 0 0 100%">
31+
<div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
32+
<n-form-item label="Sort keys :" label-placement="left" label-width="100">
33+
<n-switch v-model:value="sortKeys" />
34+
</n-form-item>
35+
<n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
36+
<n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
37+
</n-form-item>
38+
</div>
3739
</div>
38-
</div>
3940

40-
<n-form-item
41-
label="Your raw YAML"
42-
:feedback="rawYamlValidation.message"
43-
:validation-status="rawYamlValidation.status"
44-
>
45-
<c-input-text
46-
ref="inputElement"
47-
v-model:value="rawYaml"
48-
placeholder="Paste your raw YAML here..."
49-
rows="20"
50-
multiline
51-
autocomplete="off"
52-
autocorrect="off"
53-
autocapitalize="off"
54-
spellcheck="false"
55-
monospace
56-
/>
57-
</n-form-item>
58-
<n-form-item label="Prettified version of your YAML">
59-
<TextareaCopyable :value="cleanYaml" language="yaml" :follow-height-of="inputElement" />
60-
</n-form-item>
41+
<c-label label="Your raw YAML:">
42+
<div relative w-full>
43+
<c-monaco-editor
44+
v-model:value="rawYaml"
45+
theme="vs-dark"
46+
language="yaml"
47+
height="250px"
48+
:options="MONACO_EDITOR_OPTIONS"
49+
/>
50+
</div>
51+
</c-label>
52+
53+
<div v-if="errors.length > 0">
54+
<n-alert title="The following errors occured" type="error" mt-5>
55+
<ul>
56+
<li v-for="(message, index) of errors" :key="index">
57+
{{ message }}
58+
</li>
59+
</ul>
60+
</n-alert>
61+
</div>
62+
63+
<n-divider />
64+
65+
<n-form-item label="Prettified version of your YAML">
66+
<TextareaCopyable :value="cleanYaml" language="yaml" />
67+
</n-form-item>
68+
</div>
6169
</template>
6270

63-
<style lang="less" scoped>
64-
.result-card {
65-
position: relative;
66-
.copy-button {
71+
<style lang="less" scoped>
72+
.result-card {
73+
position: relative;
74+
.copy-button {
6775
position: absolute;
6876
top: 10px;
6977
right: 10px;
70-
}
71-
}
72-
</style>
78+
}
79+
}
80+
</style>

0 commit comments

Comments
 (0)