Browse Source
* Switch to JSBundling with webpack * Set babel target attempt 1 * Fix loose babel warning * Babel target attempt 2 * Babel target attempt 3 * Maybe we need to polyfill more than just promise... * Fix promise undefined in IE11 * Target oldest browsers possible * Set browserlist in package.json * Development mode browserlist and update readme * Mode flag * Does setting es5 web target help? * It doesn't * Not using ActiveStorage * Import all of corejs * Destructuring including in present-env already * Just import what we need * Add polyfill for fetch * Stimulus polyfills * Remove unused duplicates * We don't use channels * Single babel config * Stimulus working * Add additional polyfills for Stimulus and Turbo * Additional polyfill for Turbo * Make sure we also transpile our own stimulus controller code * Add plugin-transform-spread * Defaults are fine for most babel plugins * Plugin ordering * Specify which bits exactly we want to transpile * Transpiling turbo appears to break it * Devise logout via get so we don't rely on js * Override public path for IE11 * Need to make DOM event triggers explicit for IE11 * Update helper spec * Update helper spec * Bump dependenciespull/401/head
baarkerlounger
3 years ago
committed by
GitHub
54 changed files with 768 additions and 5463 deletions
@ -0,0 +1,2 @@ |
|||||||
|
web: bin/rails server -p 3000 |
||||||
|
js: yarn build --watch |
||||||
@ -1,6 +1,6 @@ |
|||||||
// Load Active Admin's styles into Webpacker,
|
// Load Active Admin's styles into Webpacker,
|
||||||
// see `active_admin.scss` for customization.
|
// see `active_admin.scss` for customization.
|
||||||
import "../styles/active_admin"; |
import "./styles/active_admin.scss"; |
||||||
|
|
||||||
import "@activeadmin/activeadmin"; |
import "@activeadmin/activeadmin"; |
||||||
|
|
||||||
@ -0,0 +1,21 @@ |
|||||||
|
// This file is automatically compiled by Webpack, along with any other files
|
||||||
|
// present in this directory. You're encouraged to place your actual application logic in
|
||||||
|
// a relevant structure within app/javascript and only use these pack files to reference
|
||||||
|
// that code so it'll be compiled.
|
||||||
|
|
||||||
|
// Polyfills for IE
|
||||||
|
import "@webcomponents/webcomponentsjs" |
||||||
|
import "core-js/stable" |
||||||
|
import "regenerator-runtime/runtime" |
||||||
|
import "@stimulus/polyfills" |
||||||
|
import "custom-event-polyfill" |
||||||
|
import "intersection-observer" |
||||||
|
//
|
||||||
|
|
||||||
|
require.context("govuk-frontend/govuk/assets") |
||||||
|
import { initAll } from "govuk-frontend" |
||||||
|
import "./styles/application.scss" |
||||||
|
import "./controllers" |
||||||
|
import "@hotwired/turbo-rails" |
||||||
|
|
||||||
|
initAll() |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
// Load all the controllers within this directory and all subdirectories.
|
||||||
|
// Controller files must be named *_controller.js.
|
||||||
|
|
||||||
|
import { application } from "./application" |
||||||
|
|
||||||
|
import AccessibleAutocompleteController from "./accessible_autocomplete_controller.js" |
||||||
|
application.register("accessible-autocomplete", AccessibleAutocompleteController) |
||||||
|
|
||||||
|
import ConditionalQuestionController from "./conditional_question_controller.js" |
||||||
|
application.register("conditional-question", ConditionalQuestionController) |
||||||
|
|
||||||
|
import GovukfrontendController from "./govukfrontend_controller.js" |
||||||
|
application.register("govukfrontend", GovukfrontendController) |
||||||
|
|
||||||
|
import NumericQuestionController from "./numeric_question_controller.js" |
||||||
|
application.register("numeric-question", NumericQuestionController) |
||||||
|
|
||||||
|
import TasklistController from "./tasklist_controller.js" |
||||||
|
application.register("tasklist", TasklistController) |
||||||
@ -1,6 +0,0 @@ |
|||||||
// Action Cable provides the framework to deal with WebSockets in Rails.
|
|
||||||
// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
|
|
||||||
|
|
||||||
import { createConsumer } from "@rails/actioncable" |
|
||||||
|
|
||||||
export default createConsumer() |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
// Load all the channels within this directory and all subdirectories.
|
|
||||||
// Channel files must be named *_channel.js.
|
|
||||||
|
|
||||||
const channels = require.context('.', true, /_channel\.js$/) |
|
||||||
channels.keys().forEach(channels) |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
// Load all the controllers within this directory and all subdirectories.
|
|
||||||
// Controller files must be named *_controller.js.
|
|
||||||
|
|
||||||
import { Application } from "@hotwired/stimulus" |
|
||||||
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers" |
|
||||||
|
|
||||||
const application = Application.start() |
|
||||||
const context = require.context("controllers", true, /_controller\.js$/) |
|
||||||
application.load(definitionsFromContext(context)) |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
// This file is automatically compiled by Webpack, along with any other files
|
|
||||||
// present in this directory. You're encouraged to place your actual application logic in
|
|
||||||
// a relevant structure within app/javascript and only use these pack files to reference
|
|
||||||
// that code so it'll be compiled.
|
|
||||||
require.context('govuk-frontend/govuk/assets') |
|
||||||
|
|
||||||
import '../styles/application.scss' |
|
||||||
import * as ActiveStorage from "@rails/activestorage" |
|
||||||
import "channels" |
|
||||||
import "controllers" |
|
||||||
import "@hotwired/turbo-rails" |
|
||||||
import { initAll } from 'govuk-frontend' |
|
||||||
|
|
||||||
ActiveStorage.start() |
|
||||||
initAll() |
|
||||||
@ -0,0 +1,9 @@ |
|||||||
|
#!/usr/bin/env bash |
||||||
|
|
||||||
|
if ! command -v foreman &> /dev/null |
||||||
|
then |
||||||
|
echo "Installing foreman..." |
||||||
|
gem install foreman |
||||||
|
fi |
||||||
|
|
||||||
|
foreman start -f Procfile.dev "$@" |
||||||
@ -1,18 +0,0 @@ |
|||||||
#!/usr/bin/env ruby |
|
||||||
|
|
||||||
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" |
|
||||||
ENV["NODE_ENV"] ||= "development" |
|
||||||
|
|
||||||
require "pathname" |
|
||||||
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", |
|
||||||
Pathname.new(__FILE__).realpath) |
|
||||||
|
|
||||||
require "bundler/setup" |
|
||||||
|
|
||||||
require "webpacker" |
|
||||||
require "webpacker/webpack_runner" |
|
||||||
|
|
||||||
APP_ROOT = File.expand_path("..", __dir__) |
|
||||||
Dir.chdir(APP_ROOT) do |
|
||||||
Webpacker::WebpackRunner.run(ARGV) |
|
||||||
end |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
#!/usr/bin/env ruby |
|
||||||
|
|
||||||
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development" |
|
||||||
ENV["NODE_ENV"] ||= "development" |
|
||||||
|
|
||||||
require "pathname" |
|
||||||
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", |
|
||||||
Pathname.new(__FILE__).realpath) |
|
||||||
|
|
||||||
require "bundler/setup" |
|
||||||
|
|
||||||
require "webpacker" |
|
||||||
require "webpacker/dev_server_runner" |
|
||||||
|
|
||||||
APP_ROOT = File.expand_path("..", __dir__) |
|
||||||
Dir.chdir(APP_ROOT) do |
|
||||||
Webpacker::DevServerRunner.run(ARGV) |
|
||||||
end |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
process.env.NODE_ENV = process.env.NODE_ENV || 'development' |
|
||||||
|
|
||||||
const environment = require('./environment') |
|
||||||
|
|
||||||
module.exports = environment.toWebpackConfig() |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
const { environment } = require('@rails/webpacker') |
|
||||||
const jquery = require('./plugins/jquery') |
|
||||||
|
|
||||||
environment.plugins.prepend('jquery', jquery) |
|
||||||
module.exports = environment |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
const webpack = require('webpack') |
|
||||||
|
|
||||||
module.exports = new webpack.ProvidePlugin({ |
|
||||||
"$":"jquery", |
|
||||||
"jQuery":"jquery", |
|
||||||
"window.jQuery":"jquery" |
|
||||||
}); |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
process.env.NODE_ENV = process.env.NODE_ENV || 'production' |
|
||||||
|
|
||||||
const environment = require('./environment') |
|
||||||
|
|
||||||
module.exports = environment.toWebpackConfig() |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
process.env.NODE_ENV = process.env.NODE_ENV || 'staging' |
|
||||||
|
|
||||||
const environment = require('./environment') |
|
||||||
|
|
||||||
module.exports = environment.toWebpackConfig() |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
process.env.NODE_ENV = process.env.NODE_ENV || 'development' |
|
||||||
|
|
||||||
const environment = require('./environment') |
|
||||||
|
|
||||||
module.exports = environment.toWebpackConfig() |
|
||||||
@ -1,102 +0,0 @@ |
|||||||
# Note: You must restart bin/webpack-dev-server for changes to take effect |
|
||||||
|
|
||||||
default: &default |
|
||||||
source_path: app/webpacker |
|
||||||
source_entry_path: packs |
|
||||||
public_root_path: public |
|
||||||
public_output_path: packs |
|
||||||
cache_path: tmp/cache/webpacker |
|
||||||
webpack_compile_output: true |
|
||||||
|
|
||||||
# Additional paths webpack should lookup modules |
|
||||||
# ['app/assets', 'engine/foo/app/assets'] |
|
||||||
additional_paths: ['node_modules/govuk-frontend/govuk'] |
|
||||||
|
|
||||||
# Cache manifest.json for performance |
|
||||||
cache_manifest: true |
|
||||||
|
|
||||||
# Extract and emit a css file |
|
||||||
extract_css: true |
|
||||||
|
|
||||||
# Production depends on precompilation of packs prior to booting for performance. |
|
||||||
compile: false |
|
||||||
|
|
||||||
static_assets_extensions: |
|
||||||
- .jpg |
|
||||||
- .jpeg |
|
||||||
- .png |
|
||||||
- .gif |
|
||||||
- .tiff |
|
||||||
- .ico |
|
||||||
- .svg |
|
||||||
- .eot |
|
||||||
- .otf |
|
||||||
- .ttf |
|
||||||
- .woff |
|
||||||
- .woff2 |
|
||||||
|
|
||||||
extensions: |
|
||||||
- .mjs |
|
||||||
- .js |
|
||||||
- .sass |
|
||||||
- .scss |
|
||||||
- .css |
|
||||||
- .module.sass |
|
||||||
- .module.scss |
|
||||||
- .module.css |
|
||||||
- .png |
|
||||||
- .svg |
|
||||||
- .gif |
|
||||||
- .jpeg |
|
||||||
- .jpg |
|
||||||
|
|
||||||
development: |
|
||||||
<<: *default |
|
||||||
compile: true |
|
||||||
|
|
||||||
# Reload manifest.json on all requests so we reload latest compiled packs |
|
||||||
cache_manifest: false |
|
||||||
|
|
||||||
# Extract and emit a css file |
|
||||||
extract_css: false |
|
||||||
|
|
||||||
# Reference: https://webpack.js.org/configuration/dev-server/ |
|
||||||
dev_server: |
|
||||||
https: false |
|
||||||
host: localhost |
|
||||||
port: 3035 |
|
||||||
public: localhost:3035 |
|
||||||
hmr: false |
|
||||||
# Inline should be set to true if using HMR |
|
||||||
inline: false |
|
||||||
overlay: true |
|
||||||
compress: true |
|
||||||
disable_host_check: true |
|
||||||
use_local_ip: false |
|
||||||
quiet: false |
|
||||||
pretty: false |
|
||||||
headers: |
|
||||||
'Access-Control-Allow-Origin': '*' |
|
||||||
watch_options: |
|
||||||
ignored: '**/node_modules/**' |
|
||||||
|
|
||||||
|
|
||||||
test: |
|
||||||
<<: *default |
|
||||||
compile: true |
|
||||||
|
|
||||||
# Reload manifest.json on all requests so we reload latest compiled packs |
|
||||||
cache_manifest: false |
|
||||||
|
|
||||||
# Extract and emit a css file |
|
||||||
extract_css: false |
|
||||||
|
|
||||||
# Compile test packs to a separate directory |
|
||||||
public_output_path: packs-test |
|
||||||
|
|
||||||
|
|
||||||
staging: |
|
||||||
<<: *default |
|
||||||
|
|
||||||
production: |
|
||||||
<<: *default |
|
||||||
@ -0,0 +1,70 @@ |
|||||||
|
const path = require("path") |
||||||
|
const webpack = require("webpack") |
||||||
|
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin') |
||||||
|
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts') |
||||||
|
const CopyPlugin = require("copy-webpack-plugin"); |
||||||
|
|
||||||
|
const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production' |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
mode, |
||||||
|
devtool: "source-map", |
||||||
|
entry: { |
||||||
|
application: [ |
||||||
|
"./app/frontend/application.js", |
||||||
|
], |
||||||
|
active_admin: [ |
||||||
|
'./app/frontend/active_admin.js', |
||||||
|
'./app/frontend/styles/active_admin.scss' |
||||||
|
] |
||||||
|
}, |
||||||
|
module: { |
||||||
|
rules: [ |
||||||
|
{ |
||||||
|
test: /\.(js|ts)$/, |
||||||
|
include: [ |
||||||
|
path.resolve(__dirname, 'node_modules/@hotwired/stimulus'), |
||||||
|
path.resolve(__dirname, 'node_modules/@rails/actioncable'), |
||||||
|
path.resolve(__dirname, 'app/frontend/controllers'), |
||||||
|
], |
||||||
|
use: ['babel-loader'], |
||||||
|
}, |
||||||
|
{ |
||||||
|
test: /\.(png|jpe?g|gif|eot|woff2|woff|ttf|svg|ico)$/i, |
||||||
|
use: 'file-loader', |
||||||
|
}, |
||||||
|
{ |
||||||
|
test: /\.(scss|css)/i, |
||||||
|
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], |
||||||
|
} |
||||||
|
], |
||||||
|
}, |
||||||
|
resolve: { |
||||||
|
modules: ['node_modules', 'node_modules/govuk-frontend/govuk'] |
||||||
|
}, |
||||||
|
output: { |
||||||
|
filename: "[name].js", |
||||||
|
// we must set publicPath to an empty value to override the default of
|
||||||
|
// auto which doesn't work in IE11
|
||||||
|
publicPath: '', |
||||||
|
path: path.resolve(__dirname, "app/assets/builds"), |
||||||
|
}, |
||||||
|
plugins: [ |
||||||
|
new RemoveEmptyScriptsPlugin(), |
||||||
|
new MiniCssExtractPlugin(), |
||||||
|
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }), |
||||||
|
new CopyPlugin({ |
||||||
|
patterns: [ |
||||||
|
{ from: "node_modules/govuk-frontend/govuk/assets/images", to: "images" }, |
||||||
|
{ from: "node_modules/govuk-frontend/govuk/assets/fonts", to: "fonts" }, |
||||||
|
], |
||||||
|
}), |
||||||
|
new webpack.ProvidePlugin({ |
||||||
|
$: 'jquery', |
||||||
|
jQuery: 'jquery', |
||||||
|
jquery: 'jquery', |
||||||
|
'window.jQuery': 'jquery' |
||||||
|
}) |
||||||
|
] |
||||||
|
} |
||||||
Loading…
Reference in new issue