test: customTag option

Author: znck

jest.config.js

@@ -2,8 +2,8 @@ module.exports = {
   collectCoverageFrom: ['src/**'],
   moduleFileExtensions: ['js', 'ts', 'json'],
   transform: {
-    '^.+\\.ts$': '<rootDir>/node_modules/ts-jest/preprocessor.js',
+    '^.+\\.ts$': 'ts-jest',
   },
-  testMatch: ['**/?(*.)spec.ts'],
+  testMatch: ['**/*.spec.ts'],
   testEnvironment: 'node'
 }

package.json

@@ -37,7 +37,7 @@
     "pre:docs": "cp CHANGELOG.md docs/changelog.md",
     ":docs": "vuepress dev docs/",
     "post:docs": "rm docs/CHANGELOG.md",
-    "lint": "prettier --no-semi --single-quote --write **/*.js src/*.ts **/*.vue !test/target/** !dist/**",
+    "lint": "prettier --no-semi --single-quote --write **/*.js **/*.ts **/*.vue !test/target/** !dist/**",
     "release": "standard-version -a",
     "test": "jest"
   },

src/index.ts

@@ -58,13 +58,13 @@ export interface VuePluginOptions {
   }
   /**
    * Exclude/Include customBlocks for final build.
-   * @default `['!*']`
+   * @default `() => false`
    * @example
    * ```js
    * VuePlugin({ customBlocks: ['markdown', '!test'] })
    * ```
    */
-  customBlocks?: string[] | (() => boolean)
+  customBlocks?: string[] | ((tag: string) => boolean)
   /**
    * Inject CSS in JavaScript.
    * @default `true`
@@ -244,12 +244,13 @@ export default function vue(opts: VuePluginOptions = {}): Plugin {
           )
         )
 
+        descriptors.set(filename, descriptor)
+
         const scopeId =
           'data-v-' +
           (isProduction
             ? hash(path.basename(filename) + source)
             : hash(filename + source))
-        descriptors.set(filename, descriptor)
 
         const styles = await Promise.all(
           descriptor.styles.map(async style => {

test/baseline.spec.ts

@@ -10,7 +10,7 @@ let browser: Browser | null = null
 beforeAll(async () => {
   browser = await puppeteer.launch({
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
-    headless: Boolean(process.env.CI),
+    headless: Boolean(process.env.CI)
   })
 })
 

test/forward-style-compiler-errors.spec.ts

@@ -1,16 +1,19 @@
 import pluginVue from '../src'
 
-describe("forward-style-compiler-errors", () => {
-  it("throws", async () => {
+describe('forward-style-compiler-errors', () => {
+  it('throws', async () => {
     let plugin = pluginVue()
-    await expect((plugin as any).transform(`
+    await expect(
+      (plugin as any).transform(
+        `
         <template>
         <div>Hello, world</div>
         </template>
         <style lang="scss">
         @import 'file-not-exits.scss';
         </style>
-        `, 'virtual-file.vue'
+        `,
+        'virtual-file.vue'
       )
     ).rejects.toBeInstanceOf(Error)
   })

test/options/custom-blocks.spec.ts

@@ -0,0 +1,67 @@
+import vue, { VuePluginOptions } from '../../src'
+import { pluginInline } from '../setup/plugins'
+import { rollup } from 'rollup'
+
+describe('customBlocks', () => {
+  async function setup(options?: Partial<VuePluginOptions>) {
+    return rollup({
+      input: '/entry.vue',
+      plugins: [
+        pluginInline(
+          '/entry.vue',
+          `
+        <template>
+        <div>Hello, world</div>
+        </template>
+        <custom>
+        // My Custom Block
+        </custom>
+        <docs>
+        // My Docs Block
+        </docs>
+      `
+        ),
+        vue({
+          ...options,
+          normalizer: 'vue-runtime-helpers/dist/normalize-component.mjs'
+        })
+      ]
+    })
+      .then(bundle => bundle.generate({ format: 'es' }))
+      .then(generated => generated.output[0])
+  }
+
+  it('default', async () => {
+    const { code } = await setup()
+
+    expect(code).not.toEqual(expect.stringContaining('My Custom Block'))
+    expect(code).not.toEqual(expect.stringContaining('My Docs Block'))
+  })
+
+  it('array of tags', async () => {
+    const { code } = await setup({
+      customBlocks: ['custom']
+    })
+
+    expect(code).toEqual(expect.stringContaining('My Custom Block'))
+    expect(code).not.toEqual(expect.stringContaining('My Docs Block'))
+  })
+  it('negative array of tags', async () => {
+    const { code } = await setup({
+      customBlocks: ['*', '!custom']
+    })
+
+    expect(code).not.toEqual(expect.stringContaining('My Custom Block'))
+    expect(code).toEqual(expect.stringContaining('My Docs Block'))
+  })
+  it('function', async () => {
+    const { code } = await setup({
+      customBlocks(tag) {
+        return tag === 'custom'
+      }
+    })
+
+    expect(code).toEqual(expect.stringContaining('My Custom Block'))
+    expect(code).not.toEqual(expect.stringContaining('My Docs Block'))
+  })
+})

test/setup/plugins.ts

@@ -1,3 +1,5 @@
+import { Plugin } from 'rollup'
+
 const pluginBabel = require('rollup-plugin-babel')
 const pluginNodeResolve = require('rollup-plugin-node-resolve')
 const pluginCommonJS = require('rollup-plugin-commonjs')
@@ -6,6 +8,22 @@ const pluginMarkdown = require('rollup-plugin-md')
 const pluginTypescript = require('rollup-plugin-typescript')
 const pluginReplace = require('rollup-plugin-replace')
 
+export function pluginInline(filename: string, code: string): Plugin {
+  return {
+    name: 'inline',
+    resolveId(id: string) {
+      if (id === filename) return filename
+
+      return null
+    },
+    load(id: string) {
+      if (id === filename) return code
+
+      return null
+    }
+  }
+}
+
 export const plugins = [
   pluginImage({ emitFiles: false }),
   pluginMarkdown(),

typings/hash-sum.d.ts

@@ -1,4 +1,4 @@
 declare module 'hash-sum' {
   const sum: (any: string) => string
   export = sum
-}
+}

typings/puppeteer.d.ts

@@ -1,3 +1,3 @@
-interface Element { }
-interface Node { }
-interface NodeListOf<TNode = Node> { }
+interface Element {}
+interface Node {}
+interface NodeListOf<TNode = Node> {}

typings/rollup-plugins.d.ts

@@ -22,4 +22,4 @@ declare module 'rollup-plugin-md' {
 
 declare module 'rollup-pluginutils' {
   export function createFilter(a: any, b: any): (any: any) => boolean
-}
+}