Add initializers for some Typescript functionality

app/javascript/packs/application.ts

@@ -0,0 +1,3 @@
+import start from '../retrospring/common';
+
+start();

app/javascript/packs/hello_typescript.ts

@@ -1,4 +0,0 @@
-// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
-// like app/views/layouts/application.html.erb.
-
-console.log('Hello world from typescript');

app/javascript/packs/legacy.coffee

@@ -2,14 +2,11 @@ import 'core-js/stable'
 import 'regenerator-runtime/runtime'
 
 import '../legacy/jquery'
-import '../legacy/bootstrap'
 import {} from 'jquery-ujs'
-import 'jquery.turbolinks/src/jquery.turbolinks'
 import 'jquery.guillotine'
 import 'particleground/jquery.particleground.min'
 import 'jquery.growl'
 import 'sweetalert'
-import NProgress from 'nprogress'
 import Cookies from 'js-cookie'
 import moment from 'moment'
 

app/javascript/retrospring/common.ts

@@ -0,0 +1,9 @@
+import initialize from './initializers';
+
+export default function start(): void {
+  try {
+    initialize();
+  } catch (e) {
+    // initialization errors
+  }
+}

app/javascript/retrospring/initializers/00_rails.ts

@@ -0,0 +1,3 @@
+import Rails from '@rails/ujs';
+
+export default (): void => Rails.start();

app/javascript/retrospring/initializers/00_turbolinks.ts

@@ -0,0 +1,3 @@
+import Turbolinks from 'turbolinks';
+
+export default (): void => Turbolinks.start();

app/javascript/retrospring/initializers/bootstrap.ts

@@ -0,0 +1,15 @@
+import 'bootstrap';
+import $ from 'jquery';
+
+/**
+ * This module sets up Bootstraps JavaScript
+ *
+ * Inside of the exported function below, initialize Bootstrap
+ * modules that require explicit initilization, like tooltips
+ */
+export default function (): void {
+  $(document).ready(() => {
+    $('[data-toggle="tooltip"]').tooltip();
+    $('.dropdown-toggle').dropdown();
+  });
+}

app/javascript/retrospring/initializers/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Using some JavaScript trickery with require.context
+ * and default exports, we're basically rebuilding the
+ * Rails concept of "initializers" in JavaScript.
+ *
+ * Every file in this folder exports a default function
+ * which this index script is loading and executing, so
+ * we don't have to specify several single import
+ * statements and can dynamically extend this with as
+ * many initializers as we see fit.
+ */
+export default function initialize(): void {
+  const files = require.context('.', false, /\.ts$/);
+
+  files.keys().forEach((key) => {
+    if (key === './index.ts') return;
+    files(key).default();
+  });
+}

app/javascript/retrospring/initializers/nprogress.ts

@@ -0,0 +1,15 @@
+import NProgress from 'nprogress';
+
+/**
+ * NProgress initializer method, setting up NProgress to work
+ * on Turbolinks site navigation events
+ */
+export default function (): void {
+  NProgress.configure({
+    showSpinner: false,
+  });
+
+  document.addEventListener('page:fetch', () => { NProgress.start(); });
+  document.addEventListener('page:change', () => { NProgress.done(); });
+  document.addEventListener('page:restore', () => { NProgress.remove(); });
+}

app/views/layouts/base.haml

@@ -11,8 +11,8 @@
     %link{ rel: 'icon', href: '/images/favicon/favicon-32.png', sizes: '32x32' }
     %title= yield(:title)
     = stylesheet_link_tag 'application', media: 'all', data: { 'turbolinks-track': true }
+    = javascript_pack_tag 'application', data: { 'turbolinks-track': true }
     = javascript_pack_tag 'legacy', data: { 'turbolinks-track': true }
-    = javascript_pack_tag 'hello_typescript'
     = stylesheet_pack_tag 'legacy', data: { 'turbolinks-track': true }
     - if user_signed_in? && current_user.mod?
       = javascript_pack_tag 'legacy-moderation', data: { 'turbolinks-track': true }

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@babel/preset-typescript": "^7.12.7",
+    "@rails/ujs": "^6.1.0",
     "bootstrap": "^4.5.3",
     "cheet.js": "^0.3.3",
     "core-js": "^3.8.1",
@@ -19,7 +20,7 @@
     "sweetalert": "1.1.3",
     "tempusdominus-bootstrap-4": "5.1.2",
     "tinycolor2": "^1.4.2",
-    "turbolinks": "turbolinks/turbolinks-classic",
+    "turbolinks": "^5.2.0",
     "typescript": "^4.1.3"
   },
   "devDependencies": {

yarn.lock

@@ -860,6 +860,11 @@
   dependencies:
     mkdirp "^1.0.4"
 
+"@rails/ujs@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.0.tgz#9a48df6511cb2b472c9f596c1f37dc0af022e751"
+  integrity sha512-kQNKyM4ePAc4u9eR1c4OqrbAHH+3SJXt++8izIjeaZeg+P7yBtgoF/dogMD/JPPowNC74ACFpM/4op0Ggp/fPw==
+
 "@rails/webpacker@5.2.1":
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/@rails/webpacker/-/webpacker-5.2.1.tgz#87cdbd4af2090ae2d74bdc51f6f04717d907c5b3"
@@ -7252,9 +7257,10 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-turbolinks@turbolinks/turbolinks-classic:
-  version "0.0.1"
-  resolved "https://codeload.github.com/turbolinks/turbolinks-classic/tar.gz/80216ce9d89920bf073709405e3fce6d0a3ccd9a"
+turbolinks@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz#e6877a55ea5c1cb3bb225f0a4ae303d6d32ff77c"
+  integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"