mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 07:11:03 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Formatting yaml, sorting keys and changing indent size.

Browse source
This commit is contained in:
Isaiah 2023-11-27 16:31:02 -05:00
parent 3a99642fd6
commit 3a13b79572
2 changed files with 13 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/tools/yaml-viewer/yaml-models.ts
View file

@ -1,37 +1,24 @@
import { type MaybeRef, get } from '@vueuse/core'; import { type MaybeRef, get } from '@vueuse/core';
import JSON5 from 'json5'; import yaml from "js-yaml";
export { sortObjectKeys, formatYaml }; export { formatYaml };
function sortObjectKeys<T>(obj: T): T {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
if (Array.isArray(obj)) {
return obj.map(sortObjectKeys) as unknown as T;
}
return Object.keys(obj)
.sort((a, b) => a.localeCompare(b))
.reduce((sortedObj, key) => {
sortedObj[key] = sortObjectKeys((obj as Record<string, unknown>)[key]);
return sortedObj;
}, {} as Record<string, unknown>) as T;
}
function formatYaml({ function formatYaml({
rawYaml, rawYaml,
sortKeys = false, sortKeys = false,
stripComments = false, indentSize = 2,
indentSize = 3,
}: { }: {
rawYaml: MaybeRef<string> rawYaml: MaybeRef<string>
sortKeys?: MaybeRef<boolean> sortKeys?: MaybeRef<boolean>
stripComments?: MaybeRef<boolean> stripComments?: MaybeRef<boolean>
indentSize?: MaybeRef<number> indentSize?: MaybeRef<number>
}) { }) {
const parsedObject = JSON5.parse(get(rawYaml)); const parsedYaml = yaml.load(get(rawYaml));
return JSON.stringify(get(sortKeys) ? sortObjectKeys(parsedObject) : parsedObject, null, get(indentSize)); const formattedYAML = yaml.dump(parsedYaml, {
indent: get(indentSize),
sortKeys: get(sortKeys)
});
return formattedYAML
} }

10
src/tools/yaml-viewer/yaml-viewer.vue
View file

@ -11,9 +11,8 @@ const inputElement = ref<HTMLElement>();
const rawYaml = useStorage('yaml-prettify:raw-yaml', ''); const rawYaml = useStorage('yaml-prettify:raw-yaml', '');
const indentSize = useStorage('yaml-prettify:indent-size', 2); const indentSize = useStorage('yaml-prettify:indent-size', 2);
const sortKeys = useStorage('yaml-prettify:sort-keys', false); const sortKeys = useStorage('yaml-prettify:sort-keys', false);
const stripComments = useStorage('yaml-prettify:strip-comments', false);
const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml: rawYaml, indentSize, sortKeys, stripComments }), '')); const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml: rawYaml, indentSize, sortKeys }), ''));
const rawYamlValidation = useValidation({ const rawYamlValidation = useValidation({
source: rawYaml, source: rawYaml,
@ -32,11 +31,8 @@ const rawYamlValidation = useValidation({
<n-form-item label="Sort keys :" label-placement="left" label-width="100"> <n-form-item label="Sort keys :" label-placement="left" label-width="100">
<n-switch v-model:value="sortKeys" /> <n-switch v-model:value="sortKeys" />
</n-form-item> </n-form-item>
<n-form-item label="Strip comments :" label-placement="left" label-width="125">
<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-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
<n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" /> <n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
</n-form-item> </n-form-item>
</div> </div>
</div> </div>
@ -60,7 +56,7 @@ const rawYamlValidation = useValidation({
/> />
</n-form-item> </n-form-item>
<n-form-item label="Prettified version of your YAML"> <n-form-item label="Prettified version of your YAML">
<TextareaCopyable :value="cleanYaml" language="json" :follow-height-of="inputElement" /> <TextareaCopyable :value="cleanYaml" language="yaml" :follow-height-of="inputElement" />
</n-form-item> </n-form-item>
</template> </template>