Chore: upgrade Alpine.js version, fix version detection issues + prep…

… 0.1.0 (#125)

* chore: upgrade Alpine.js version

* fix: orange + cool-gray (Tailwind 2)

* 0.1.0

* fix semver version detection

package.json

@@ -1,6 +1,6 @@
 {
     "name": "alpinejs-devtools",
-    "version": "0.0.10",
+    "version": "0.1.0",
     "private": true,
     "description": "DevTools extension for debugging Alpine.js applications.",
     "homepage": "https://github.com/alpine-collective/alpinejs-devtools",
@@ -23,7 +23,7 @@
         "@rollup/plugin-node-resolve": "^7.1.3",
         "@rollup/plugin-replace": "^2.3.4",
         "@tailwindcss/forms": "^0.2.1",
-        "alpinejs": "^2.7.3",
+        "alpinejs": "^2.8.0",
         "cypress": "^6.1.0",
         "cypress-iframe": "^1.0.1",
         "edge.js": "^1.1.4",

packages/shell-chrome/src/utils.js

@@ -19,10 +19,11 @@ export function fetchWithTimeout(resource, options) {
  * @returns {boolean}
  */
 export function isRequiredVersion(required, actual) {
+    if (required === actual) return true
     const requiredArray = required.split('.').map((v) => parseInt(v, 10))
     const currentArray = actual.split('.').map((v) => parseInt(v, 10))
     for (let i = 0; i < requiredArray.length; i++) {
-        if (!currentArray[i] || currentArray[i] < requiredArray[i]) {
+        if (currentArray[i] < requiredArray[i]) {
             return false
         }
         if (currentArray[i] > requiredArray[i]) {

tailwind.config.js

@@ -1,3 +1,5 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
     purge: {
         content: ['./packages/**/*.{html,edge}', './packages/shell-chrome/src/devtools/devtools.js'],
@@ -17,6 +19,8 @@ module.exports = {
         },
         extend: {
             colors: {
+                orange: colors.orange,
+                'cool-gray': colors.coolGray,
                 alpine: {
                     100: '#7C87A2',
                     200: '#616D89',

tests/utils.spec.js

@@ -1,4 +1,4 @@
-import { createComponentId, getComponentName } from '../packages/shell-chrome/src/utils'
+import { isRequiredVersion, getComponentName } from '../packages/shell-chrome/src/utils'
 
 test('getComponentName > can handle multiple scenarios to determine component name', async () => {
     window.myFn = () => {}
@@ -24,3 +24,22 @@ test('getComponentName > can handle multiple scenarios to determine component na
     element.removeAttribute('role')
     expect(getComponentName(element)).toBe('div')
 })
+
+describe('isRequiredVersion', () => {
+    test('works for major', () => {
+        expect(isRequiredVersion('1.11.0', '2.1.1')).toBe(true)
+        expect(isRequiredVersion('2.11.0', '0.1.1')).toBe(false)
+    })
+    test('works for minor', () => {
+        expect(isRequiredVersion('1.1.1', '1.11.0')).toBe(true)
+        expect(isRequiredVersion('1.11.0', '1.1.1')).toBe(false)
+    })
+    test('works for patch', () => {
+        expect(isRequiredVersion('0.11.0', '0.11.1')).toBe(true)
+        expect(isRequiredVersion('0.1.1', '0.1.0')).toBe(false)
+    })
+    test('works for equal', () => {
+        expect(isRequiredVersion('2.8.0', '2.8.0')).toBe(true)
+        expect(isRequiredVersion('1.1.0', '1.1.0')).toBe(true)
+    })
+})