Upgrade to Stimulus 3.0 (#102)

* Upgrade to Stimulus 3.0 Also updates docs to use ESM and importmaps * Fix tests * Remove babel * Update dependencies * Use from CDN * Update tests for Jest 27
excid3 · Sep 25, 2021 · 537cd5d · 537cd5d
1 parent 6750d17
commit 537cd5d
Show file tree

Hide file tree

Showing 27 changed files with 11,444 additions and 12,262 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,12 +13,12 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '14' ]
+        node: ['14', '16']
     name: Node ${{ matrix.node }}
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node }}
-      - run: yarn install
-      - run: yarn test
+      - run: npm install
+      - run: npm run test
diff --git a/__tests__/dropdown_test.js b/__tests__/dropdown_test.js
@@ -1,11 +1,16 @@
-import { Application, Controller } from "stimulus"
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application, Controller } from "@hotwired/stimulus"
 import Dropdown from 'dropdown'
 
 describe("DropdownController", () => {
 
   describe("with active target specified", () => {
     beforeEach(() => {
-      jest.useFakeTimers()
+      jest.useFakeTimers('legacy');
+
       document.body.innerHTML = `
  <div class="relative"
       data-dropdown-active-target='#active_target' data-controller="dropdown"
@@ -33,6 +38,10 @@ describe("DropdownController", () => {
       application.register("dropdown", Dropdown);
     });
 
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
     it('applies visible class to target ', async () => {
       const target = document.querySelector('[data-dropdown-target="menu"]');
       const action = document.querySelector('[data-action]');

diff --git a/__tests__/popover_test.js b/__tests__/popover_test.js
@@ -1,4 +1,8 @@
-import { Application, Controller } from "stimulus";
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application, Controller } from "@hotwired/stimulus";
 import Popover from "popover";
 
 describe("PopoverController", () => {

diff --git a/__tests__/slideover_test.js b/__tests__/slideover_test.js
@@ -1,4 +1,8 @@
-import { Application, Controller } from "stimulus"
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application, Controller } from "@hotwired/stimulus"
 import Slideover from 'slideover'
 
 const fs = require('fs');

diff --git a/__tests__/tabs_test.js b/__tests__/tabs_test.js
@@ -1,4 +1,8 @@
-import { Application, Controller } from "stimulus";
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application, Controller } from "@hotwired/stimulus";
 import Tabs from "tabs";
 
 const fs = require('fs');

diff --git a/__tests__/toggle_test.js b/__tests__/toggle_test.js
@@ -1,4 +1,8 @@
-import { Application, Controller } from 'stimulus'
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application, Controller } from '@hotwired/stimulus'
 import Toggle from 'toggle'
 
 describe('ToggleController', () => {

diff --git a/dist/tailwindcss-stimulus-components.js b/dist/tailwindcss-stimulus-components.js
diff --git a/dist/tailwindcss-stimulus-components.js.map b/dist/tailwindcss-stimulus-components.js.map
diff --git a/dist/tailwindcss-stimulus-components.m.js b/dist/tailwindcss-stimulus-components.m.js
diff --git a/dist/tailwindcss-stimulus-components.m.js.map b/dist/tailwindcss-stimulus-components.m.js.map
diff --git a/dist/tailwindcss-stimulus-components.modern.js b/dist/tailwindcss-stimulus-components.modern.js
diff --git a/dist/tailwindcss-stimulus-components.modern.js.map b/dist/tailwindcss-stimulus-components.modern.js.map
diff --git a/dist/tailwindcss-stimulus-components.umd.js b/dist/tailwindcss-stimulus-components.umd.js
diff --git a/dist/tailwindcss-stimulus-components.umd.js.map b/dist/tailwindcss-stimulus-components.umd.js.map
diff --git a/docs/index.html b/docs/index.html
@@ -3,13 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <title>Tailwind Stimulus Components</title>
-    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <link href="https://unpkg.com/@tailwindcss/[email protected]/dist/forms.min.css" rel="stylesheet">
-    <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
-    <script src="https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.umd.js"></script>
-    <!-- To use a local copy for testing, uncomment this
-    <script src="../dist/tailwindcss-stimulus-components.umd.js"></script>
-    -->
+    <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://unpkg.com/@tailwindcss/forms/dist/forms.min.css" rel="stylesheet">
   <body>
     <div class="container mx-auto p-8"
          data-controller="slideover"
@@ -289,9 +284,23 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Color Picker and Preview</
       </div>
     </div>
 
-    <script>
+    <script type="importmap">
+      {
+        "imports": {
+          "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
+          "tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.modern.js"
+          // Uncomment to use local package with "npx serve"
+          //"tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
+        }
+      }
+    </script>
+
+    <script type="module">
+      import { Application } from "@hotwired/stimulus"
+      import TailwindcssStimulusComponents from "tailwindcss-stimulus-components"
+
       (() => {
-        const application = Stimulus.Application.start();
+        const application = Application.start();
         application.register('dropdown', TailwindcssStimulusComponents.Dropdown);
         application.register('modal', TailwindcssStimulusComponents.Modal);
         application.register('tabs', TailwindcssStimulusComponents.Tabs);