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

Is there a way to create a "navigate to" button directly from the text within a <p> element?

Having trouble with your React/TypeScript/Redux/Thunk action not dispatching and the state remaining unchanged?

React - Can you explain the purpose of the callback function in the forceUpdate method?

Having a parameter that contains the characters '&' and '&' can potentially disrupt an AJAX call

Approach for fetching these JSON records

Is there a way to selectively include a filter in ng-repeat within a directive?

What steps can we take to create a personalized PDF editor incorporating our unique edit functionalities using Vue.js?

Having Trouble Finding Vue Component Definition Using Vite Alias in Import Path

Axios is causing my Pokemon state elements to render in a jumbled order

Using Express and Node.js to display a page populated with information

Struggling to make jQuery code function in an external file without causing clashes with additional jQuery code

ConcatMap in RxJS processes only the last item in the queue

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

Clearing existing HTML content in the TR body

Tips for Achieving Observable Synchronization

JavaScript SQL results in either a string or an object after executing a

unable to reinstall due to removal of global typing

Can JavaScript's Gamepad API be used to register a custom game controller?

Tips for creating a cohesive group of HTML elements within an editable area

The Facebook Like Button appears on Firefox but not on Internet Explorer due to Javascript errors