Defer checking updates

resources/assets/src/scripts/check-updates.ts

@@ -1,4 +1,11 @@
-import { init } from './net'
+// KEEP THIS FILE DEPENDENCIES FREE!
+
+const init: RequestInit = {
+  credentials: 'same-origin',
+  headers: new Headers({
+    Accept: 'application/json',
+  }),
+}
 
 export async function checkForUpdates(): Promise<void> {
   const response = await fetch(`${blessing.base_url}/admin/update/check`, init)
@@ -9,7 +16,7 @@ export async function checkForUpdates(): Promise<void> {
     if (data.available && el) {
       el.innerHTML += `
         <span class="pull-right-container">
-          <span class="label label-primary pull-right">v${data.latest}</span>
+          <span class="label label-primary pull-right">1</span>
         </span>`
     }
   }
@@ -30,7 +37,8 @@ export async function checkForPluginUpdates(): Promise<void> {
   }
 }
 
-Object.assign(window, {
-  checkForUpdates,
-  checkForPluginUpdates,
-})
+// istanbul ignore next
+if (process.env.NODE_ENV !== 'test') {
+  checkForUpdates()
+  checkForPluginUpdates()
+}

resources/assets/src/scripts/index.ts

@@ -12,4 +12,3 @@ import './net'
 import './event'
 import './element'
 import './logout'
-import './check-updates'

resources/assets/tests/scripts/check-updates.test.ts

@@ -13,7 +13,7 @@ test('check for BS updates', async () => {
     })
     .mockResolvedValueOnce({
       ok: true,
-      json: () => Promise.resolve({ available: true, latest: '4.0.0' }),
+      json: () => Promise.resolve({ available: true }),
     })
 
   document.body.innerHTML = '<a href="/admin/update"></a>'
@@ -26,7 +26,7 @@ test('check for BS updates', async () => {
   expect(document.querySelector('a')!.innerHTML).toBe('')
 
   await checkForUpdates()
-  expect(document.querySelector('a')!.innerHTML).toContain('4.0.0')
+  expect(document.querySelector('a')!.innerHTML).toContain('1')
 })
 
 test('check for plugins updates', async () => {

resources/views/admin/master.blade.php

@@ -83,14 +83,7 @@
 
     <!-- App Scripts -->
     @include('common.dependencies.script')
-
-    <script>
-        document.addEventListener('loadend', () => {
-            checkForUpdates()
-            checkForPluginUpdates()
-        })
-    </script>
-
+    <script defer src="{{ webpack_assets('check-updates.js') }}"></script>
     @yield('script')
 </body>
 </html>

webpack.config.js

@@ -13,6 +13,7 @@ const config = {
   mode: devMode ? 'development' : 'production',
   entry: {
     index: './resources/assets/src/index.js',
+    'check-updates': './resources/assets/src/scripts/check-updates.ts',
     style: [
       'bootstrap/dist/css/bootstrap.min.css',
       'admin-lte/dist/css/alt/AdminLTE-without-plugins.min.css',