Merge pull request #7 from HugoDF/feat-warn-version-mismatch

feat(log-warn-on-cdn-npm-version-mismatch)
HugoDF · May 6, 2020 · b931370 · b931370
2 parents 3bd7389 + c4de6a4
commit b931370
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/fixtures/version.html b/fixtures/version.html
@@ -0,0 +1,6 @@
+<head>
+  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.x.x/dist/alpine.min.js" defer></script>
+</head>
+<body>
+  <div x-data="{}"></div>
+</body>
diff --git a/src/main.js b/src/main.js
@@ -4,6 +4,7 @@ const {promisify} = require('util');
 const readFile = promisify(fs.readFile);
 const {JSDOM} = require('jsdom');
 const {config, setGlobal, setMutationObserver} = require('./config');
+const {checkVersionMismatch} = require('./version-mismatch');
 
 // Needs to happen before loading Alpine
 config();
@@ -17,8 +18,21 @@ try {
   );
 }
 
+// Not great, but makes sure we know the version of Alpine.js loaded from NPM.
+// Safe to do here because if Alpine.js wasn't in node_modules
+// we would have already thrown (see above).
+const {version: AlpineVersion} = require('alpinejs/package.json');
+
+/**
+ * Get x-data (Alpine) component(s) from markup
+ * @param {string} markup - markup to load
+ * @returns {Array<string>|string}
+ */
 const getComponents = (markup) => {
   const {document} = new JSDOM(markup).window;
+
+  checkVersionMismatch(document, AlpineVersion);
+
   const components = [...document.querySelectorAll('[x-data]')].map(
     (element) => element.outerHTML
   );

diff --git a/src/version-mismatch.js b/src/version-mismatch.js
@@ -0,0 +1,24 @@
+/**
+ *
+ * @param {Document} document - document from which Alpine components are being loaded from
+ * @param {string} alpineVersion - Alpine.js version from NPM
+ * @returns {void}
+ */
+function checkVersionMismatch(document, alpineVersion) {
+  if (document.scripts.length === 0) return;
+  const alpineScript = [...document.scripts].find(
+    (s) => s.src.includes('dist/alpine') || s.src.includes('alpinejs/alpine')
+  );
+  if (!alpineScript) return;
+  // Match v1.x.x, v2.x.x etc (the bit between @ and /)from
+  // `https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js`
+  const [jsDelivrVersion] = alpineScript.src.match(/(?<=@v)[a-z|\d.]*(?=\/)/gm);
+  const cdnMajorVersion = jsDelivrVersion[0];
+  if (!alpineVersion.startsWith(cdnMajorVersion)) {
+    console.warn(
+      `alpine-test-utils: Alpine.js version is different to CDN one, requested "${jsDelivrVersion}", testing with "${alpineVersion}"`
+    );
+  }
+}
+
+module.exports = {checkVersionMismatch};
diff --git a/tests/version.js b/tests/version.js
@@ -0,0 +1,28 @@
+import test from 'ava';
+import path from 'path';
+import {load} from '../src/main';
+import Alpine from 'alpinejs';
+
+const stub = (fn) => {
+  const calls = [];
+  const callable = (...args) => {
+    calls.push(args);
+    fn(...args);
+  };
+
+  callable.calls = calls;
+  callable.firstCall = () => calls[0];
+  return callable;
+};
+
+test('load - Alpine.js version mismatch', async (t) => {
+  console.warn = stub(() => {});
+  const component = await load(
+    path.join(__dirname, '../fixtures/version.html')
+  );
+  t.is(component, `<div x-data="{}"></div>`);
+  t.is(
+    console.warn.firstCall()[0],
+    `alpine-test-utils: Alpine.js version is different to CDN one, requested "1.x.x", testing with "${Alpine.version}"`
+  );
+});