The ultimate guide to loading multiple YAML files simultaneously in JavaScript

Question

The ultimate guide to loading multiple YAML files simultaneously in JavaScript

A Ruby script was created to split a large YAML file named travel.yaml, which includes a list of country keys and information, into individual files for each country.

data = YAML.load(File.read('./src/constants/travel.yaml'))

data.fetch('countries').each do |key, value|
  File.open("./src/constants/countries/#{key}.yaml", 'w') { |file| file.write({ key => value }.to_yaml) }
end

The format of each individual file would resemble:

---
BA:
  sources:
    domestic:
    - Wearing masks and social distancing (a minimum of 2 metres) are [mandatory in
      all public places](https://www.oecd.org/south-east-europe/COVID-19-Crisis-in-Bosnia-and-Herzegovina.pdf).
    inbound:
    - The BiH Council of Ministers has announced that it will allow entry to the citizens
      of Croatia, Serbia, and Montenegro as of June 1, 2020. There is [still a ban
      to entry for non-resident foreign nationals.](https://ba.usembassy.gov/covid-19-information/)
    visa_quarantine:
    - Both the Republika Srpska and the Federation have [abolished self-isolation
      measures for people entering BiH.](https://ba.usembassy.gov/covid-19-information/).
  travel:
    domestic: partial
    inbound: partial
    inbound_allowed:
    - HR
    - RS
    - ME

Prior to splitting travel.yaml, it was consumed like this:

import TravelDefaults from '@/constants/travel.yaml';

export const Travel = TravelDefaults;

const { countries, checked_on } = Travel;

Now, the goal is to load all the separate YAML files simultaneously and consume them collectively (without individual imports). How can this be achieved in VUE using TypeScript?

javascript typescript vue.js yaml

Answer 1

Answer №1

const yaml = require('js-yaml');
const mergeYaml = require('merge-yaml');
const fs = require('fs');

const travelMerger = () => {
  const basePath = './src/constants/';

  const countryFiles = fs.readdirSync(`${basePath}countries/`);

  const filesWithDir = countryFiles.map((file) => `${basePath}countries/${file}`);

  const countriesYaml = mergeYaml(filesWithDir);

  const yamlStr = yaml.safeDump(countriesYaml);

  fs.writeFileSync(`${basePath}travelMerged.yaml`, yamlStr, 'utf8');
};

module.exports = travelMerger;

Although this code works perfectly fine, it is not compatible with Vue when using TypeScript.

Answer 2

const yaml = require('js-yaml');
const mergeYaml = require('merge-yaml');
const fs = require('fs');

const travelMerger = () => {
  const basePath = './src/constants/';

  const countryFiles = fs.readdirSync(`${basePath}countries/`);

  const filesWithDir = countryFiles.map((file) => `${basePath}countries/${file}`);

  const countriesYaml = mergeYaml(filesWithDir);

  const yamlStr = yaml.safeDump(countriesYaml);

  fs.writeFileSync(`${basePath}travelMerged.yaml`, yamlStr, 'utf8');
};

module.exports = travelMerger;

Although this code works perfectly fine, it is not compatible with Vue when using TypeScript.

Answer 3

Answer №2

If you're looking for a solution that is static at compile-time, you can achieve it by utilizing webpack's require.context feature (docs) along with a yaml loader.

Illustration

Using the vue-cli-plugin-yaml.

In this scenario, suppose your yml files are stored in src/constants/countries/*.yml, you can utilize the below code snippet to access each JS object from the yaml files through a computed method named countries:

<template>
  <div id="app">
    <div
      v-for="country in countries"
      :key="country.key"
      class="country"
    >
      <h1>{{country.key}}</h1>
      <hr />
      <h2>{{country.sources.domestic[0]}}</h2>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default class App extends Vue {
  get countries () {
    const requireContext = require.context(
      './constants/countries',
      true,
      /(.*)\.yml/
    )
    return requireContext.keys().map((fileName) => {
      const key: string = fileName.split('.')[1].replace('/', '')
      return {
        key: key,
        ...requireContext(fileName)[key]
      }
    })
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
.country{
  border:1px solid black;
  margin:20px;
}
</style>

illustrative example featuring dummy files

Answer 4

If you're looking for a solution that is static at compile-time, you can achieve it by utilizing webpack's require.context feature (docs) along with a yaml loader.

Illustration

Using the vue-cli-plugin-yaml.

In this scenario, suppose your yml files are stored in src/constants/countries/*.yml, you can utilize the below code snippet to access each JS object from the yaml files through a computed method named countries:

<template>
  <div id="app">
    <div
      v-for="country in countries"
      :key="country.key"
      class="country"
    >
      <h1>{{country.key}}</h1>
      <hr />
      <h2>{{country.sources.domestic[0]}}</h2>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-property-decorator'
export default class App extends Vue {
  get countries () {
    const requireContext = require.context(
      './constants/countries',
      true,
      /(.*)\.yml/
    )
    return requireContext.keys().map((fileName) => {
      const key: string = fileName.split('.')[1].replace('/', '')
      return {
        key: key,
        ...requireContext(fileName)[key]
      }
    })
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
.country{
  border:1px solid black;
  margin:20px;
}
</style>

illustrative example featuring dummy files

The ultimate guide to loading multiple YAML files simultaneously in JavaScript

Answer №1

Answer №2

Illustration

Similar questions

Implementing GetServerSideProps with Next-Auth: Error message - Trying to destructure property 'nextauth' from 'req.query' which is undefined

How to Enhance Angular ui-router nested views with Resolve?

Guide to Displaying HTTP POST Request Response on Pug Template

What is the best way to activate a click event in Vue.js?

Managing touchEvents in Vue: A comprehensive guide

How to modify the color of a div element with jQuery?

Troubleshooting: ReactJS CSS Class Issue

Exploring Typescript: Uncovering the Secrets of the navigator.connection Property

Issue with CSRF Token discrepancy between cookies and HTML

When it comes to TypeScript, it feels like my interface can accept anything I throw at it, and it struggles to grasp how I've implemented and imported redux-toolkit and styled components

The results from utilizing Mongoose's text search feature are inaccurate and not matching the expected

utilizing regular expressions to retrieve data

Challenges in managing click events

Sending data to child components in Ionic

What will be the quickest and most reliable trigger - matchMedia, window.resize, orientationchange, or perhaps both combined?

Ways to access a nested property within an array

Show or hide a specific element based on the property assigned to a user's role

Another project cannot import the library that was constructed

Exploring the world of unit testing in aws-cdk using TypeScript

Utilizing Vue's data binding feature with an array