feat(mdx): add parser and modify classes

Author: hiroppy

packages/mdx-loader/__tests__/__snapshots__/commentParser.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fusuma-loader: commentParser should return aaa 1`] = `
+Object {
+  "prefix": "zzzzz",
+  "valueArr": Array [
+    "test1",
+    "test2",
+  ],
+  "valueStr": "test1
+test2",
+}
+`;
+
+exports[`fusuma-loader: commentParser should return key case 1`] = `
+Object {
+  "prefix": "key",
+  "valueArr": Array [],
+  "valueStr": "",
+}
+`;
+
+exports[`fusuma-loader: commentParser should return key case 2`] = `
+Object {
+  "prefix": "key",
+  "valueArr": Array [],
+  "valueStr": "",
+}
+`;
+
+exports[`fusuma-loader: commentParser should return key: foo,bar,baz case 1`] = `
+Object {
+  "prefix": "key",
+  "valueArr": Array [
+    "foo",
+    "bar",
+    "baz",
+  ],
+  "valueStr": "foo,bar,baz",
+}
+`;
+
+exports[`fusuma-loader: commentParser should return key: foo,bar,baz case 2`] = `
+Object {
+  "prefix": "key",
+  "valueArr": Array [
+    "foo",
+    "bar",
+    "baz",
+  ],
+  "valueStr": "foo,bar,baz",
+}
+`;
+
+exports[`fusuma-loader: commentParser should return key: value case 1`] = `
+Object {
+  "prefix": "key",
+  "valueArr": Array [
+    "value",
+  ],
+  "valueStr": "value",
+}
+`;
+
+exports[`fusuma-loader: commentParser should return key: value case 2`] = `
+Object {
+  "prefix": "key",
+  "valueArr": Array [
+    "value",
+  ],
+  "valueStr": "value",
+}
+`;

packages/mdx-loader/__tests__/commentParser.js

@@ -0,0 +1,55 @@
+'use strict';
+
+const commentParser = require('../src/commentParser');
+
+describe('fusuma-loader: commentParser', () => {
+  test('should return key: value case', () => {
+    {
+      const input = 'key: value';
+
+      expect(commentParser(input)).toMatchSnapshot();
+    }
+
+    {
+      const input = 'key:value';
+
+      expect(commentParser(input)).toMatchSnapshot();
+    }
+  });
+
+  test('should return key: foo,bar,baz case', () => {
+    {
+      const input = 'key: foo,bar,baz';
+
+      expect(commentParser(input)).toMatchSnapshot();
+    }
+
+    {
+      const input = 'key:foo, bar,     baz';
+
+      expect(commentParser(input)).toMatchSnapshot();
+    }
+  });
+
+  test('should return key case', () => {
+    {
+      const input = 'key';
+
+      expect(commentParser(input)).toMatchSnapshot();
+    }
+
+    {
+      const input = '   key    ';
+
+      expect(commentParser(input)).toMatchSnapshot();
+    }
+  });
+
+  test('should return aaa', () => {
+    const input = `zzzzz
+test1
+test2`;
+
+    expect(commentParser(input)).toMatchSnapshot();
+  });
+});

packages/mdx-loader/src/commentParser.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function commentParser(text) {
+  const [p, ...rest] = text.trim().split(':');
+  const [prefix, ...context] = p.split('\n');
+  const attr = rest.map((r) => r.trim());
+  const res = {
+    prefix,
+    valueArr: attr,
+    valueStr: attr.join(''),
+  };
+
+  // e.g. note
+  if (context.length) {
+    res.valueArr = context;
+    res.valueStr = context.join('\n');
+  } else if (attr.length && attr[0].includes(',')) {
+    res.valueArr = attr[0].split(',').map((v) => v.trim());
+    res.valueStr = res.valueArr.join(',');
+  }
+
+  return res;
+}
+
+module.exports = commentParser;

packages/mdx-loader/src/mdxPlugin.js

@@ -9,6 +9,7 @@ const transformChartToJSX = require('./transformers/transformChartToJSX');
 const transformMarkdownImageNodeToJSX = require('./transformers/transformMarkdownImageNodeToJSX');
 const transformExecJSCodeButtonToJSX = require('./transformers/transformExecJSCodeButtonToJSX');
 const escapeMap = require('./escapeMap');
+const commentParser = require('./commentParser');
 
 function mdxPlugin() {
   return (tree) => {
@@ -33,40 +34,32 @@ function mdxPlugin() {
       }
 
       if (type === 'comment') {
-        const [p, ...rest] = value.trim().split(':');
-        const prefix = p.split('\n')[0];
-        const attr = rest.map((r) => r.trim());
+        const { prefix, valueStr, valueArr } = commentParser(value);
 
         if (prefix === 'background') {
-          background = attr[0].includes('/') ? `require(${attr[0]})` : `'${attr[0]}'`;
+          background = valueStr.includes('/') ? `require(${valueStr})` : `'${valueStr}'`;
           return;
         }
         if (prefix === 'section-title') {
-          props.sectionTitle = attr.join('');
+          props.sectionTitle = valueStr;
           return;
         }
         if (prefix === 'classes') {
-          props.classes = attr.join(' ');
+          props.classes = valueArr;
           return;
         }
         if (prefix === 'contents') {
           props.contents = true;
           return;
         }
         if (prefix === 'note') {
-          const [, ...note] = p.split('\n');
-
-          props.note = note
-            .join('')
-            .replace(/[&<>"']/gim, (m) => escapeMap[m])
-            .replace(/\n/g, '\\n');
-
+          props.note = valueStr.replace(/[&<>"']/gim, (m) => escapeMap[m]).replace(/\n/g, '\\n');
           return;
         }
         if (prefix === 'qr') {
           slide.push({
             ...n,
-            ...transformQrToJSX(attr),
+            ...transformQrToJSX(valueArr),
           });
           return;
         }