Upgrade Npms for try to fix Webpacker precompile in production env.

.github/workflows/release_tag.yml

@@ -1,4 +1,4 @@
-name: Release
+name: Release Tags
 on:
   push:
     tags:

.github/workflows/test.yml

@@ -1,6 +1,6 @@
 name: Test
 
-on: [push, pull_request]
+on: push
 jobs:
   lint:
     name: AutoCorrect Check
@@ -9,10 +9,25 @@ jobs:
       - uses: actions/checkout@v2
       - name: huacnlee.autocorrect
         uses: huacnlee/autocorrect-action@main
+  assets_compile:
+    name: Assets Compile
+    runs-on: ubuntu-latest
+    container: homeland/base:3.0.1-slim-buster
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install dependencies
+        run: |
+          sed -i "s/gems.ruby-china.org/rubygems.org/g" Gemfile.lock
+          bundle config path vendor/bundle
+          bundle install
+          yarn
+      - name: Assets Precompile
+        run: bundle exec rails assets:precompile RAILS_PRECOMPILE=1 RAILS_ENV=production SECRET_KEY_BASE=fake_secure_for_compile
+
   test:
     name: CI Test
     runs-on: ubuntu-latest
-    container: homeland/base:2.7.2-slim-buster
+    container: homeland/base:3.0.1-slim-buster
     services:
       postgres:
         image: postgres:10

.gitignore

@@ -47,3 +47,10 @@ app.local.env
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Gemfile

@@ -10,7 +10,7 @@ gem "rails_autolink"
 gem "sass-rails"
 gem "turbolinks"
 gem "uglifier"
-gem "webpacker"
+gem "webpacker", "6.0.0.rc.6"
 
 gem "view_component"
 
@@ -33,7 +33,7 @@ gem "dotenv-rails"
 gem "rack-attack"
 gem "http_accept_language"
 # https://github.com/svenfuchs/rails-i18n/pull/957
-gem "rails-i18n", github: "f6p/rails-i18n", branch: "rails7"
+gem "rails-i18n", github: "f6p/rails-i18n", branch: "rails7-hotfix"
 gem "twemoji"
 
 # Uploader

Gemfile.lock

@@ -1,7 +1,7 @@
 GIT
   remote: https://github.com/f6p/rails-i18n.git
-  revision: 751d497ed2a7b16927b14bbe6096d4b44d7e8a2c
-  branch: rails7
+  revision: a2102371c5f46fd1bdc49d5ec9c99fbe9a375bc8
+  branch: rails7-hotfix
   specs:
     rails-i18n (7.0.0)
       i18n (>= 0.7, < 2)
@@ -457,7 +457,7 @@ GEM
       method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
-    webpacker (5.4.2)
+    webpacker (6.0.0.rc.6)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -540,7 +540,7 @@ DEPENDENCIES
   twemoji
   uglifier
   view_component
-  webpacker
+  webpacker (= 6.0.0.rc.6)
 
 BUNDLED WITH
    2.2.3

app/javascript/admin.scss

@@ -0,0 +1 @@
+@import "admin/index";

app/javascript/application.js

@@ -0,0 +1,3 @@
+import "homeland/index";
+import "vendor/bootstrap";
+import "front/index";

app/javascript/front.scss

@@ -0,0 +1 @@
+@import "front/index";

app/javascript/homeland/iconfont.scss

@@ -1,7 +1,8 @@
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "~@fortawesome/fontawesome-free/scss/solid.scss";
-@import "~@fortawesome/fontawesome-free/scss/brands.scss";
+$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
+
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/brands";
 
 .fa {
   &-pin {

app/javascript/homeland/index.scss

@@ -4,6 +4,7 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/utilities";
+
 $utilities: map-merge(
   $utilities,
   (

app/javascript/jsconfig.json

@@ -1,8 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "."
   },
-  "exclude": [
-    "node_modules",
-  ]
+  "exclude": ["node_modules"]
 }

app/javascript/turbolinks-app.scss

@@ -0,0 +1 @@
+@import "homeland/turbolinks-app";

app/javascript/packs/bootstrap.js → app/javascript/vendor/bootstrap.js

@@ -1,4 +1,5 @@
-window.bootstrap = require("bootstrap");
+import * as bootstrap from "bootstrap/dist/js/bootstrap.esm";
+window.bootstrap = bootstrap;
 require("bootstrap-select");
 
 document.addEventListener("turbolinks:load", () => {

app/views/layouts/admin.html.erb

@@ -4,11 +4,10 @@
     <meta name="theme" content="<%= user_theme %>">
     <title><%= Setting.app_name %> - Admin Panel</title>
     <%= stylesheet_pack_tag "admin" %>
-    <%= javascript_packs_with_chunks_tag "application" %>
+    <%= javascript_pack_tag "application", defer: false %>
     <%= csrf_meta_tag %>
   </head>
   <body>
-    <%= javascript_pack_tag "bootstrap", 'data-turbolinks-eval': "false" %>
     <div class="header">
       <div class="header navbar navbar-expand flex-md-row bd-navbar">
         <div class="container d-sm-flex">

app/views/layouts/application.html.erb

@@ -26,6 +26,8 @@
     <%= stylesheet_pack_tag "front", "data-turbolinks-track": "reload" %>
     <%= stylesheet_pack_tag "turbolinks-app", 'data-turbolinks-track': 'reload' if turbolinks_app? %>
     <%= yield :stylesheets %>
+    <%= javascript_pack_tag "application",  defer: false %>
+    <%= yield :javascripts %>
     <%= action_cable_meta_tag %>
     <%= csrf_meta_tag %>
     <%= raw Setting.custom_head_html %>
@@ -37,11 +39,8 @@
     <% if current_user %>
       <meta name="current-user" data-user-id="<%= current_user.id %>" data-user-login="<%= current_user.login %>" data-user-name="<%= current_user.name %>" data-user-email="<%= current_user.email %>" data-user-avatar-url="<%= current_user.avatar? ? current_user.avatar.url(:md) : current_user.letter_avatar_url(96) %>">
     <% end %>
-    <%= javascript_packs_with_chunks_tag "application", 'data-turbolinks-track': "reload" %>
-    <%= yield :javascripts %>
   </head>
   <body class="page-<%= controller_name %><%= ' infinite-scroll' if turbolinks_app? %>" data-controller-name="<%= controller_name %>">
-    <%= javascript_pack_tag "bootstrap", 'data-turbolinks-eval': "false" %>
     <div class="header navbar navbar-expand-md">
       <div class="container">
         <div class="navbar-header" data-turbolinks-permanent>

app/views/layouts/simple.html.erb

@@ -8,12 +8,11 @@
     <meta name="apple-mobile-web-app-capable" content="no">
     <meta content='True' name='HandheldFriendly'>
     <%= stylesheet_pack_tag "front" %>
-    <%= javascript_packs_with_chunks_tag "application" %>
+    <%= javascript_pack_tag "application", defer: false %>
     <%= csrf_meta_tag %>
     <%= raw Setting.custom_head_html %>
   </head>
   <body data-controller-name="<%= controller_name %>">
-    <%= javascript_pack_tag "bootstrap", 'data-turbolinks-eval': "false" %>
     <div class="header">
       <div class="header navbar navbar-expand flex-md-row bd-navbar">
         <div class="container d-sm-flex flex-wrap">

bin/webpack

@@ -1,17 +1,14 @@
 #!/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"
 
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
+
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   Webpacker::WebpackRunner.run(ARGV)

bin/yarn

@@ -1,9 +1,18 @@
 #!/usr/bin/env ruby
-APP_ROOT = File.expand_path('..', __dir__)
+
+APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
-  exec "yarn", *ARGV
-rescue Errno::ENOENT
-  $stderr.puts "Yarn executable was not detected in the system."
-  $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
-  exit 1
+  yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
+    select { |dir| File.expand_path(dir) != __dir__ }.
+    product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
+    map { |dir, file| File.expand_path(file, dir) }.
+    find { |file| File.executable?(file) }
+
+  if yarn
+    exec yarn, *ARGV
+  else
+    $stderr.puts "Yarn executable was not detected in the system."
+    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+    exit 1
+  end
 end

config/application.rb

@@ -54,5 +54,7 @@ class Application < Rails::Application
   end
 end
 
-# Homeland boot must keep in here
-require "homeland"
+unless ENV["RAILS_PRECOMPILE"].present?
+  # Homeland boot must keep in here
+  require "homeland"
+end

config/initializers/assets.rb

@@ -11,3 +11,6 @@
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
 Rails.application.config.assets.precompile += %w[app.js front.css turbolinks-app.css admin.css]
+
+# Add node_modules folder to the asset load path.
+Rails.application.config.assets.paths << Rails.root.join("node_modules")

config/webpack/base.js

@@ -0,0 +1,4 @@
+const { webpackConfig, merge } = require("@rails/webpacker");
+const customConfig = require("./custom");
+
+module.exports = merge(webpackConfig, customConfig);

config/webpack/custom.js

@@ -0,0 +1,13 @@
+const webpack = require("webpack");
+
+module.exports = {
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery",
+    }),
+  ],
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".js.erb", ".css", ".scss"],
+  },
+};

config/webpack/development.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpack/production.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpack/test.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig