Use Alchemy npm package instead of hacking webpacker (AlchemyCMS#1853)

* Move npm package code into dedicated folder

We want to get rid of webpacker

* Remove rails/webpacker

With that we can dramatically simplify the jest setup

* Raise npm package version

* Install alchemy npm package into host app

Instead of compiling the pack in a hacky way we install the alchemy/admin npm package as dependency of the host apps package.json and copy the admin entry point into the host apps packs folder.

This reduces the amount of hacks we need in Alchemy in order to make webpack work.

* Remove webpacker hacks

Now that we publish a npm package and install alchemy/admin as host app dependency we can remove our webpacker hacks.

* Remove and ignore webpacker files from dummy app

We want to run the install generator during test setup.

* Run Alchemy installer during test setup

That way we ensure that everything is setup correctly and the generator is actually tested in a sort.

* Cache node_modules of dummy app on CI

This gem has two node_modules folder now, on in the dummy app and one for the jest specs.

.github/workflows/ci.yml

@@ -89,12 +89,10 @@ jobs:
         id: yarn-cache
         uses: actions/cache@preview
         with:
-          path: node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+          path: spec/dummy/node_modules
+          key: ${{ runner.os }}-yarn-dummy-${{ hashFiles('./package.json') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Install yarn
-        run: yarn install
+            ${{ runner.os }}-yarn-dummy-
       - name: Prepare database
         run: |
           bundle exec rake alchemy:spec:prepare
@@ -119,7 +117,7 @@ jobs:
         uses: actions/cache@preview
         with:
           path: node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('./package.json') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
       - name: Install yarn

.gitignore

@@ -9,9 +9,22 @@ pkg
 tmp
 log
 .sass-cache
-spec/dummy/uploads/
+spec/dummy/.browserslistrc
+spec/dummy/app/assets/stylesheets/alchemy/
+spec/dummy/app/javascript/
+spec/dummy/babel.config.js
+spec/dummy/bin/webpack
+spec/dummy/bin/webpack-dev-server
+spec/dummy/config/alchemy/config.yml
+spec/dummy/config/webpack/
+spec/dummy/config/webpacker.yml
 spec/dummy/db/*.sqlite3*
-spec/dummy/public/assets
+spec/dummy/package.json
+spec/dummy/postcss.config.js
+spec/dummy/public/assets/
+spec/dummy/public/packs/
+spec/dummy/public/packs-test/
+spec/dummy/uploads/
 .rvmrc
 /coverage/
 *.gem
@@ -27,4 +40,3 @@ yarn-error.log
 yarn-debug.log*
 .yarn-integrity
 yarn.lock
-/public/

Rakefile

@@ -45,6 +45,7 @@ namespace :alchemy do
         bin/rake db:create && \
         bin/rake db:environment:set && \
         bin/rake db:migrate:reset && \
+        bin/rails g alchemy:install --skip --skip-demo-files && \
         cd -
       BASH
       result || fail

app/helpers/alchemy/admin/base_helper.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "webpacker/helper"
-
 module Alchemy
   module Admin
     # This module contains helper methods for rendering dialogs, toolbar buttons and confirmation windows.
@@ -16,15 +14,6 @@ module Admin
     module BaseHelper
       include Alchemy::BaseHelper
       include Alchemy::Admin::NavigationHelper
-      include ::Webpacker::Helper
-
-      def current_webpacker_instance
-        if controller_name == "pages" && action_name == "show"
-          super
-        else
-          Alchemy.webpacker
-        end
-      end
 
       # Returns a string showing the name of the currently logged in user.
       #

babel.config.js

@@ -1,72 +1,12 @@
-module.exports = function (api) {
-  var validEnv = ["development", "test", "production"]
-  var currentEnv = api.env()
-  var isDevelopmentEnv = api.env("development")
-  var isProductionEnv = api.env("production")
-  var isTestEnv = api.env("test")
-
-  if (!validEnv.includes(currentEnv)) {
-    throw new Error(
-      "Please specify a valid `NODE_ENV` or " +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        "."
-    )
-  }
-
-  return {
-    presets: [
-      isTestEnv && [
-        "@babel/preset-env",
-        {
-          targets: {
-            node: "current"
-          }
-        }
-      ],
-      (isProductionEnv || isDevelopmentEnv) && [
-        "@babel/preset-env",
-        {
-          forceAllTransforms: true,
-          useBuiltIns: "entry",
-          corejs: 3,
-          modules: false,
-          exclude: ["transform-typeof-symbol"]
-        }
-      ]
-    ].filter(Boolean),
-    plugins: [
-      "babel-plugin-macros",
-      "@babel/plugin-syntax-dynamic-import",
-      isTestEnv && "babel-plugin-dynamic-import-node",
-      "@babel/plugin-transform-destructuring",
-      [
-        "@babel/plugin-proposal-class-properties",
-        {
-          loose: true
-        }
-      ],
-      [
-        "@babel/plugin-proposal-object-rest-spread",
-        {
-          useBuiltIns: true
-        }
-      ],
-      [
-        "@babel/plugin-transform-runtime",
-        {
-          helpers: false,
-          regenerator: true,
-          corejs: false
-        }
-      ],
-      [
-        "@babel/plugin-transform-regenerator",
-        {
-          async: false
-        }
-      ]
-    ].filter(Boolean)
-  }
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current"
+        }
+      }
+    ]
+  ]
 }

lib/alchemy/engine.rb

@@ -40,28 +40,6 @@ class Engine < Rails::Engine
       end
     end
 
-    if Rails.env.development?
-      initializer "alchemy.webpacker.proxy" do |app|
-        app.middleware.insert_before(
-          0,
-          Webpacker::DevServerProxy,
-          ssl_verify_none: true,
-          webpacker: Alchemy.webpacker,
-        )
-      end
-    end
-
-    # Serve webpacks if public file server enabled
-    initializer "alchemy.webpacker.middleware" do |app|
-      if app.config.public_file_server.enabled
-        app.middleware.use(
-          Rack::Static,
-          urls: ["/alchemy-packs", "/alchemy-packs-test"],
-          root: Alchemy::ROOT_PATH.join("public"),
-        )
-      end
-    end
-
     config.after_initialize do
       require_relative "./userstamp"
     end

lib/alchemy_cms.rb

@@ -2,7 +2,6 @@
 # Instantiate the global Alchemy namespace
 module Alchemy
   YAML_WHITELIST_CLASSES = %w(Symbol Date Regexp)
-  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
 end
 
 # Require globally used external libraries
@@ -26,6 +25,7 @@ module Alchemy
 require "select2-rails"
 require "turbolinks"
 require "userstamp"
+require "webpacker"
 
 # Require globally used Alchemy mixins
 require_relative "alchemy/ability_helper"
@@ -55,7 +55,6 @@ module Alchemy
 require_relative "alchemy/resource"
 require_relative "alchemy/tinymce"
 require_relative "alchemy/taggable"
-require_relative "alchemy/webpacker"
 
 # Require hacks
 require_relative "kaminari/scoped_pagination_url_helper"