fix: Fixed to be empty string instead of null when only key is specif…

…ied in Frontmatter YAML
vivliostyle · Jul 1, 2021 · 1a64e33 · 1a64e33
1 parent d54a48d
commit 1a64e33
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 9 deletions.
diff --git a/docs/vfm.md b/docs/vfm.md
@@ -404,6 +404,8 @@ Frontmatter is a way of defining metadata in Markdown (file) units. Write YAML a
 
 I'm using [js-yaml](https://www.npmjs.com/package/js-yaml) for parse in YAML. Schema is [JSON_SCHEMA](https://yaml.org/spec/1.2/spec.html#id2803231). 
 
+The js-yaml parse makes `key:` to `key: null`. However, VFM treats this as an empty string. If `key:` or `key:""` is specified as the property of the attribute value, it is output as `key=""`. 
+
 **VFM**
 
 ```yaml

diff --git a/src/plugins/document.ts b/src/plugins/document.ts
@@ -36,8 +36,8 @@ const createHead = (data: Metadata, vfile: VFile) => {
 
   // <title>...</title>
   {
-    const title = data.title || vfile.stem;
-    if (title) {
+    const title = typeof data.title === 'string' ? data.title : vfile.stem;
+    if (typeof title === 'string') {
       head.push({ type: 'text', value: '\n' }, h('title', [title]));
     }
   }
@@ -122,19 +122,19 @@ const createBody = (data: Metadata, tree: Node) => {
 const createHTML = (data: Metadata, tree: Node, vfile: VFile) => {
   const props = createProperties(data.html);
 
-  if (data.id) {
+  if (typeof data.id === 'string') {
     props.id = data.id;
   }
 
-  if (data.lang) {
+  if (typeof data.lang === 'string') {
     props.lang = data.lang;
   }
 
-  if (data.dir) {
+  if (typeof data.dir === 'string') {
     props.dir = data.dir;
   }
 
-  if (data.class) {
+  if (typeof data.class === 'string') {
     props.class = data.class;
   }
 

diff --git a/src/plugins/metadata.ts b/src/plugins/metadata.ts
@@ -156,6 +156,16 @@ const parseMarkdown = (md: string): KeyValue => {
   return processor.processSync(md).data as KeyValue;
 };
 
+/**
+ * Read the string or null value in the YAML parse result.
+ * If the value is null, it will be an empty string
+ * @param value Value of YAML parse result.
+ * @returns String.
+ */
+const readStringOrNullValue = (value: string | null) => {
+  return value === null ? '' : `${value}`;
+};
+
 /**
  * Read an attributes from data object.
  * @param data Data object.
@@ -168,7 +178,7 @@ const readAttributes = (data: any): Array<Attribute> | undefined => {
 
   const result: Array<Attribute> = [];
   for (const key of Object.keys(data)) {
-    result.push({ name: key, value: `${data[key]}` });
+    result.push({ name: key, value: readStringOrNullValue(data[key]) });
   }
 
   return result;
@@ -231,7 +241,7 @@ export const readMetadata = (md: string): Metadata => {
       case 'dir':
       case 'class':
       case 'title':
-        metadata[key] = `${data[key]}`;
+        metadata[key] = readStringOrNullValue(data[key]);
         break;
 
       case 'html':
@@ -258,7 +268,7 @@ export const readMetadata = (md: string): Metadata => {
       default:
         others.push([
           { name: 'name', value: key },
-          { name: 'content', value: `${data[key]}` },
+          { name: 'content', value: readStringOrNullValue(data[key]) },
         ]);
         break;
     }

diff --git a/tests/metadata.test.ts b/tests/metadata.test.ts
@@ -207,6 +207,70 @@ Text
   expect(received).toBe(expected);
 });
 
+it('If the value is null or empty string, it will be an empty string', () => {
+  const md = `---
+id:
+lang:
+dir: ""
+class:
+title: ""
+html:
+  data-color-mode:
+  data-light-theme:
+  data-dark-theme:
+body:
+  id:
+  class:
+base:
+  target:
+  href:
+meta:
+  - name:
+    media:
+    content:
+  - name:
+    media:
+    content:
+link:
+  - rel:
+    href:
+  - rel:
+    href:
+script:
+  - type:
+    src:
+  - type:
+    src:
+author:
+---
+
+Text
+  `;
+
+  const received = stringify(md);
+  const expected = `<!doctype html>
+<html data-color-mode="" data-light-theme="" data-dark-theme="" id="" lang="" dir="" class="">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <base target="" href="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="" media="" content="">
+    <meta name="" media="" content="">
+    <meta name="author" content="">
+    <link rel="" href="">
+    <link rel="" href="">
+    <script type="" src=""></script>
+    <script type="" src=""></script>
+  </head>
+  <body id="" class="">
+    <p>Text</p>
+  </body>
+</html>
+`;
+  expect(received).toBe(expected);
+});
+
 it('Style from options', () => {
   const md = `---
 link: