Use umd module as a default entry, add e2e tests, improve error message

Author: CyberAP

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  "preset": "jest-puppeteer",
+  testPathIgnorePatterns: ['/node_modules/', 'dist'],
+  transform: {
+    "^.+\\.ts?$": "ts-jest"
+  },
+}

package-lock.json

@@ -7,7 +7,8 @@
   "types": "dist/src/index.d.ts",
   "scripts": {
     "build": "rollup -c",
-    "build:watch": "rollup -c -w"
+    "build:watch": "rollup -c -w",
+    "test": "npm run build && jest"
   },
   "repository": {
     "type": "git",
@@ -27,11 +28,17 @@
   },
   "homepage": "https://github.com/CyberAP/vue-component-media-queries#readme",
   "devDependencies": {
+    "@types/expect-puppeteer": "^4.4.3",
+    "@types/jest": "^26.0.7",
+    "@types/jest-environment-puppeteer": "^4.3.2",
     "@vue/test-utils": "^1.0.3",
     "jest": "^26.1.0",
+    "jest-puppeteer": "^4.4.0",
+    "puppeteer": "^5.2.1",
     "rollup": "^1.27.14",
     "rollup-plugin-terser": "^5.1.3",
     "rollup-plugin-typescript2": "^0.25.3",
+    "ts-jest": "^26.1.3",
     "tslib": "^1.10.0",
     "typescript": "^3.7.4",
     "vue": "^2.6.0"

package.json

@@ -7,7 +7,11 @@ export default {
   output: [
     {
       file: pkg.main,
-      format: 'cjs',
+      format: 'umd',
+      name: 'VueComponentMediaQueries',
+      globals: {
+        vue: 'Vue'
+      }
     },
     {
       file: pkg.module,

rollup.config.js

@@ -73,7 +73,7 @@ export const MatchMedia = Vue.extend({
         console.error(
           `
             [vue-component-media-queries]:
-            A 'query' prop or a <MediaQueryProvider> component inside parent component tree is required.
+            <MatchMedia /> should be a descendant of a <MediaQueryProvider /> component tree or have a 'query' prop.
           `
         );
       }

src/MatchMedia.ts

@@ -0,0 +1,61 @@
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<script src="../dist/index.js"></script>
+
+<div id="csr"></div>
+
+<div id="ssrDesktop" data-server-rendered="true"><div data-test-ssr-desktop="true">isDesktop</div></div>
+
+<div id="ssrMobile" data-server-rendered="true"><div data-test-ssr-mobile="true">isMobile</div></div>
+
+<script>
+  const { MediaQueryProvider, MatchMedia } = VueComponentMediaQueries;
+  const queries = { mobile: '(max-width: 800px)' }
+
+  var csr = new Vue({
+    render(h) {
+      return h(MediaQueryProvider, { props: { queries } }, [
+        h('div', [
+          h(MatchMedia, {
+            scopedSlots: {
+              default({ mobile }) {
+                return h('div', { attrs: { 'data-test-csr': true } }, mobile ? 'isMobile' : 'isDesktop')
+              }
+            }
+          })
+        ])
+      ])
+    }
+  }).$mount('#csr');
+
+  var ssrDesktop = new Vue({
+    render(h) {
+      return h(MediaQueryProvider, { props: { queries } }, [
+        h('div', [
+          h(MatchMedia, {
+            scopedSlots: {
+              default({ mobile }) {
+                return h('div', { attrs: { 'data-test-ssr-desktop': true } }, mobile ? 'isMobile' : 'isDesktop')
+              }
+            }
+          })
+        ])
+      ])
+    }
+  }).$mount('#ssrDesktop');
+
+  var ssrMobile = new Vue({
+    render(h) {
+      return h(MediaQueryProvider, { props: { queries } }, [
+        h('div', [
+          h(MatchMedia, {
+            scopedSlots: {
+              default({ mobile }) {
+                return h('div', { attrs: { 'data-test-ssr-mobile': true } }, mobile ? 'isMobile' : 'isDesktop')
+              }
+            }
+          })
+        ])
+      ])
+    }
+  }).$mount('#ssrMobile');
+</script>

tests/index.html

@@ -0,0 +1,49 @@
+const path = require('path');
+
+const baseUrl = `file://${path.resolve(__dirname, './index.html')}`
+
+describe('e2e: Client Side Rendering', () => {
+  it('supports media queries', async () => {
+    await page.goto(baseUrl);
+    await page.setViewport({
+      width: 640,
+      height: 480,
+      deviceScaleFactor: 1,
+    });
+
+    await page.waitFor('[data-test-csr]');
+    expect(await page.$eval('[data-test-csr]', el => el.textContent)).toBe('isMobile');
+
+    await page.setViewport({
+      width: 1040,
+      height: 480,
+      deviceScaleFactor: 1,
+    });
+    await page.waitFor(100);
+    expect(await page.$eval('[data-test-csr]', el => el.textContent)).toBe('isDesktop');
+  });
+});
+
+describe('e2e: Server Side Rendering', () => {
+  it('does not produce hydration errors', async () => {
+    const messages: any[] = [];
+
+    page.on('console', (message) => {
+      messages.push(message)
+    });
+
+    await page.goto(baseUrl);
+    await page.setViewport({
+      width: 640,
+      height: 480,
+      deviceScaleFactor: 1,
+    });
+
+    await page.waitFor('[data-test-ssr-mobile]');
+    await page.waitFor('[data-test-ssr-desktop]');
+    expect(await page.$eval('[data-test-ssr-mobile]', el => el.textContent)).toBe('isMobile');
+    expect(await page.$eval('[data-test-ssr-desktop]', el => el.textContent)).toBe('isMobile');
+
+    expect(messages).toMatchObject([]);
+  });
+});

tests/index.spec.ts

@@ -11,7 +11,7 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "outDir": "dist",
-    "rootDir": ".",
+    "rootDir": "."
   },
   "include": [
     "src/**/*"