Frontend: reading YAML files

Currently

Using vue-cli-plugin-yaml

// store.js

import categoriesYamlData from '../../data/categories.yaml';

Positive points:

• Webpack manages import during build, not during render
• No need to have js-yaml dependency in the vendor.js

Previously

Using js-yaml

// store.js

const jsyaml = require('js-yaml');

/**
 * goal: process raw yaml files
 * input: text file (with 'pk' & 'fields' fields)
 * output: json object
 */
function processYamlFile(dataYaml) {
  console.log('processYamlFile', dataYaml);
  const data = jsyaml.load(dataYaml); // safeLoad + try/catch
  return processModelList(data);
}

const store = new Vuex.Store({
  state: {
    ...
  },
  actions: {
    ...
    GET_RESSOURCES_GLOSSAIRE_LIST_FROM_YAML: ({ commit }) => {
      fetch('https://raw.githubusercontent.com/raphodn/know-your-planet/master/data/ressources-glossaire.yaml')
        .then((response) => response.text())
        .then((dataYaml) => {
          commit('SET_RESSOURCES_GLOSSAIRE_LIST', { list: processYamlFile(dataYaml) });
        })
        .catch((error) => {
          console.log(error);
          // this.error = error;
        });
    },

Negative points:

• API calls
• Local parsing with js-yaml package
• Would load js-yaml (and esprima) dependencies in the vendor.js and increase the size