feat: support es module and extracting styles

Author: AngusFu

__test__/md2vue.spec.js

@@ -33,4 +33,32 @@ describe('md2vue', () => {
     )
     expect(app.find('.vue-demo > button').text()).toBe('Test Button')
   })
+
+  it('should emit styles', async () => {
+    const path = resolve(__dirname, './fixtures/test.md')
+    const file = await md2vue(path, {
+      extractCSS: true,
+      moduleType: 'esm'
+    })
+
+    expect(file.extname).toEqual('.js')
+    expect(file.data.toc.length).toEqual(3)
+    expect(file.data.frontmatter).toEqual({
+      heading: 'Test',
+      pageClass: 'my-custom-class'
+    })
+
+    expect(file.contents).toContain('export default')
+    expect(file.stylesheet.extname).toEqual('.css')
+    expect(file.stylesheet.contents).toContain('button')
+
+    file.contents = file.contents.replace('export default', 'module.exports = ')
+    const app = mountVfile(file)
+    expect(app.classes()).toContain('markdown-body')
+    expect(app.classes()).toContain('my-custom-class')
+    expect(app.contains('pre.vue-demo-source-code > code.language-html')).toBe(
+      true
+    )
+    expect(app.find('.vue-demo > button').text()).toBe('Test Button')
+  })
 })

lib/index.js

@@ -89,21 +89,41 @@ module.exports = function process(path, option, callback) {
       const { render, staticRenderFns } = compileTemplate(content)
 
       file.extname = '.js'
-      file.contents = [
-        `const styleInject = require('${styleInjectFile}')`,
-        `const styles = ${styles ? JSON.stringify(styles) : null};`,
-        'module.exports = {',
-        `  render: ${render},`,
-        `  components: ${components},`,
-        `  staticRenderFns: ${staticRenderFns},`,
-        `  mounted () {`,
-        `   this.cleanup = styles && styleInject(styles) `,
-        `  },`,
-        `  destroyed () {`,
-        `    this.cleanup && this.cleanup()`,
-        `  }`,
-        '}'
-      ].join('\n')
+
+      let epxortDelc = `module.exports = `
+      if (option.moduleType === 'esm') {
+        epxortDelc = 'export default'
+      }
+
+      if (option.extractCSS) {
+        file.stylesheet = VFile({
+          path: file.path.replace(/\.js$/, '.css'),
+          contents: styles || ''
+        })
+        file.contents = [
+          `${epxortDelc} {`,
+          `  render: ${render},`,
+          `  components: ${components},`,
+          `  staticRenderFns: ${staticRenderFns},`,
+          '}'
+        ].join('\n')
+      } else {
+        file.contents = [
+          `const styleInject = require('${styleInjectFile}')`,
+          `const styles = ${styles ? JSON.stringify(styles) : null};`,
+          `${epxortDelc} {`,
+          `  render: ${render},`,
+          `  components: ${components},`,
+          `  staticRenderFns: ${staticRenderFns},`,
+          `  mounted () {`,
+          `   this.cleanup = styles && styleInject(styles) `,
+          `  },`,
+          `  destroyed () {`,
+          `    this.cleanup && this.cleanup()`,
+          `  }`,
+          '}'
+        ].join('\n')
+      }
 
       callback(null, file)
     }