Apply review feedback

Refactor to hasValidMatter and refactor prior cache in syncContent

app/assets/javascripts/static_site_editor/components/edit_area.vue

@@ -84,8 +84,8 @@ export default {
       const { isModified, hasMatter, isMatterValid } = this.parsedSource;
       this.isModified = isModified();
       this.hasMatter = hasMatter();
-      const hasValidatedMatterCondition = this.hasMatter ? isMatterValid() : true;
-      this.isSaveable = this.isModified && hasValidatedMatterCondition;
+      const hasValidMatter = this.hasMatter ? isMatterValid() : true;
+      this.isSaveable = this.isModified && hasValidMatter;
     },
     onDrawerOpen() {
       this.isDrawerOpen = true;

app/assets/javascripts/static_site_editor/services/front_matterify.js

@@ -8,19 +8,6 @@ const hasMatter = (firstThreeChars, fourthChar) => {
   return isYamlDelimiter && isFourthCharNewline;
 };
 
-const validateMatter = matterStr => {
-  let isMatterValid = true;
-  let matter;
-
-  try {
-    matter = jsYaml.safeLoad(matterStr);
-  } catch (error) {
-    isMatterValid = false;
-  }
-
-  return { matter, isMatterValid };
-};
-
 export const frontMatterify = source => {
   let index = 3;
   let offset;
@@ -30,7 +17,6 @@ export const frontMatterify = source => {
     source,
     matter: null,
     hasMatter: false,
-    isMatterValid: false,
     spacing: null,
     content: source,
     delimiter: null,
@@ -54,7 +40,7 @@ export const frontMatterify = source => {
   }
 
   const matterStr = source.slice(index, offset);
-  const { matter, isMatterValid } = validateMatter(matterStr);
+  const matter = jsYaml.safeLoad(matterStr);
 
   let content = source.slice(offset + delimiter.length);
   let spacing = '';
@@ -69,7 +55,6 @@ export const frontMatterify = source => {
     source,
     matter,
     hasMatter: true,
-    isMatterValid,
     spacing,
     content,
     delimiter,

app/assets/javascripts/static_site_editor/services/parse_source_file.js

 import { frontMatterify, stringify } from './front_matterify';
 
 const parseSourceFile = raw => {
-  const remake = source => frontMatterify(source);
-
-  let editable = remake(raw);
-  let lastValidMatter = null;
+  let editable;
 
   const syncContent = (newVal, isBody) => {
     if (isBody) {
       editable.content = newVal;
     } else {
-      // 1. Cache last valid matter to account for mid-edit resulting in matter invalidation
-      if (editable.hasMatter) {
-        lastValidMatter = editable.matter;
-      }
-
-      // 2. Update editable
-      editable = remake(newVal);
-
-      // 3. Use last valid matter cache if mid-edit results in matter invalidation
-      if (!editable.isMatterValid) {
-        editable.matter = lastValidMatter;
+      try {
+        editable = frontMatterify(newVal);
+        editable.isMatterValid = true;
+      } catch (e) {
+        editable.isMatterValid = false;
       }
     }
   };
@@ -39,6 +30,8 @@ const parseSourceFile = raw => {
 
   const isMatterValid = () => editable.isMatterValid;
 
+  syncContent(raw);
+
   return {
     matter,
     isMatterValid,

spec/frontend/static_site_editor/services/front_matterify_spec.js

@@ -12,7 +12,6 @@ describe('static_site_editor/services/front_matterify', () => {
     source: content,
     matter: yamlFrontMatterObj,
     hasMatter: true,
-    isMatterValid: true,
     spacing,
     content: body,
     delimiter: '---',
@@ -22,7 +21,6 @@ describe('static_site_editor/services/front_matterify', () => {
     source: body,
     matter: null,
     hasMatter: false,
-    isMatterValid: false,
     spacing: null,
     content: body,
     delimiter: null,
@@ -37,6 +35,12 @@ describe('static_site_editor/services/front_matterify', () => {
     `('returns $target from $frontMatterified', ({ frontMatterified, target }) => {
       expect(frontMatterified).toEqual(target);
     });
+
+    it('should throw when matter is invalid', () => {
+      const invalidContent = `---\nkey: val\nkeyNoVal\n---\n${body}`;
+
+      expect(() => frontMatterify(invalidContent)).toThrow();
+    });
   });
 
   describe('stringify', () => {