diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts new file mode 100644 index 00000000..451567d3 --- /dev/null +++ b/app/javascript/packs/application.ts @@ -0,0 +1,3 @@ +import start from '../retrospring/common'; + +start(); diff --git a/app/javascript/packs/hello_typescript.ts b/app/javascript/packs/hello_typescript.ts deleted file mode 100644 index 95a72cf0..00000000 --- a/app/javascript/packs/hello_typescript.ts +++ /dev/null @@ -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'); diff --git a/app/javascript/packs/legacy.coffee b/app/javascript/packs/legacy.coffee index 1853ba5f..b23ba71e 100644 --- a/app/javascript/packs/legacy.coffee +++ b/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' diff --git a/app/javascript/retrospring/common.ts b/app/javascript/retrospring/common.ts new file mode 100644 index 00000000..a57b0398 --- /dev/null +++ b/app/javascript/retrospring/common.ts @@ -0,0 +1,9 @@ +import initialize from './initializers'; + +export default function start(): void { + try { + initialize(); + } catch (e) { + // initialization errors + } +} \ No newline at end of file diff --git a/app/javascript/retrospring/initializers/00_rails.ts b/app/javascript/retrospring/initializers/00_rails.ts new file mode 100644 index 00000000..923fcbb5 --- /dev/null +++ b/app/javascript/retrospring/initializers/00_rails.ts @@ -0,0 +1,3 @@ +import Rails from '@rails/ujs'; + +export default (): void => Rails.start(); \ No newline at end of file diff --git a/app/javascript/retrospring/initializers/00_turbolinks.ts b/app/javascript/retrospring/initializers/00_turbolinks.ts new file mode 100644 index 00000000..9531fbbd --- /dev/null +++ b/app/javascript/retrospring/initializers/00_turbolinks.ts @@ -0,0 +1,3 @@ +import Turbolinks from 'turbolinks'; + +export default (): void => Turbolinks.start(); \ No newline at end of file diff --git a/app/javascript/retrospring/initializers/bootstrap.ts b/app/javascript/retrospring/initializers/bootstrap.ts new file mode 100644 index 00000000..ecd68050 --- /dev/null +++ b/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(); + }); +} \ No newline at end of file diff --git a/app/javascript/retrospring/initializers/index.ts b/app/javascript/retrospring/initializers/index.ts new file mode 100644 index 00000000..ba1abad8 --- /dev/null +++ b/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(); + }); +} \ No newline at end of file diff --git a/app/javascript/retrospring/initializers/nprogress.ts b/app/javascript/retrospring/initializers/nprogress.ts new file mode 100644 index 00000000..7e031e75 --- /dev/null +++ b/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(); }); +} \ No newline at end of file diff --git a/app/views/layouts/base.haml b/app/views/layouts/base.haml index 643a4d1c..cacc0a04 100644 --- a/app/views/layouts/base.haml +++ b/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 } diff --git a/package.json b/package.json index 0ffe1590..a32f8c6a 100644 --- a/package.json +++ b/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": { diff --git a/yarn.lock b/yarn.lock index ca9bf5da..f496df80 100644 --- a/yarn.lock +++ b/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"