potassium 6.5.0 → 6.6.0

data/lib/potassium/recipes/front_end.rb

@@ -1,10 +1,15 @@
 class Recipes::FrontEnd < Rails::AppBuilder
   VUE_LOADER_VERSION = Potassium::VUE_LOADER_VERSION
+  VUE_VERSION = Potassium::VUE_VERSION
+  VUE_TEST_UTILS_VERSION = Potassium::VUE_TEST_UTILS_VERSION
+  POSTCSS_VERSION = Potassium::POSTCSS_VERSION
+  TAILWINDCSS_VERSION = Potassium::TAILWINDCSS_VERSION
+  AUTOPREFIXER_VERSION = Potassium::AUTOPREFIXER_VERSION
+  VUE_JEST_VERSION = Potassium::VUE_JEST_VERSION
 
   def ask
     frameworks = {
       vue: "Vue",
-      angular: "Angular 2",
       none: "None"
     }
 
@@ -17,12 +22,16 @@ class Recipes::FrontEnd < Rails::AppBuilder
   end
 
   def create
+    gather_gem('shakapacker', '~> 6.2.0')
     recipe = self
-    after(:gem_install) do
-      value = get(:front_end)
+    after(:gem_install, wrap_in_action: :webpacker_install) do
       run "rails webpacker:install"
-      run "rails webpacker:install:#{value}" unless [:none, :None].include? value.to_sym
-
+    end
+    after(:webpacker_install) do
+      value = get(:front_end)
+      recipe.copy_webpack_rules
+      recipe.add_assets_path
+      recipe.setup_typescript
       recipe.setup_vue if value == :vue
       recipe.add_responsive_meta_tag
       recipe.setup_tailwind
@@ -38,13 +47,37 @@ class Recipes::FrontEnd < Rails::AppBuilder
   def installed?
     package_file = 'package.json'
     return false unless file_exist?(package_file)
+
     package_content = read_file(package_file)
-    package_content.include?("\"@angular/core\"") || package_content.include?("\"vue\"")
+    package_content.include?("\"vue\"")
+  end
+
+  def copy_webpack_rules
+    copy_file '../assets/config/webpack/webpack.config.js',
+              'config/webpack/webpack.config.js',
+              force: true
+    copy_file '../assets/config/webpack/rules/index.js', 'config/webpack/rules/index.js'
+    copy_file '../assets/config/webpack/rules/css.js', 'config/webpack/rules/css.js'
+    copy_file '../assets/config/webpack/rules/vue.js', 'config/webpack/rules/vue.js'
+    copy_file '../assets/config/webpack/rules/jquery.js', 'config/webpack/rules/jquery.js'
+    copy_file '../assets/config/webpack/rules/typescript.js', 'config/webpack/rules/typescript.js'
+  end
+
+  def add_assets_path
+    gsub_file(
+      'config/webpacker.yml',
+      'additional_paths: []',
+      "additional_paths: ['app/assets']"
+    )
+  end
+
+  def setup_typescript
+    run "bin/yarn add typescript fork-ts-checker-webpack-plugin ts-loader @types/node"
+    copy_file '../assets/tsconfig.json', 'tsconfig.json'
   end
 
   def setup_vue_with_compiler_build
-    application_js = 'app/javascript/packs/application.js'
-    remove_file "app/javascript/packs/hello_vue.js"
+    application_js = 'app/javascript/application.js'
     create_file application_js, application_js_content, force: true
 
     layout_file = "app/views/layouts/application.html.erb"
@@ -63,55 +96,43 @@ class Recipes::FrontEnd < Rails::AppBuilder
   end
 
   def setup_tailwind
-    run "bin/yarn add tailwindcss@#{Potassium::TAILWINDCSS}"
-    specify_autoprefixer_postcss_compatibility_versions
+    run "bin/yarn add css-loader style-loader mini-css-extract-plugin @types/tailwindcss "\
+      "css-minimizer-webpack-plugin postcss@#{POSTCSS_VERSION} postcss-loader "\
+      "tailwindcss@#{TAILWINDCSS_VERSION} autoprefixer@#{AUTOPREFIXER_VERSION} sass sass-loader "\
+      "eslint-plugin-tailwindcss"
+    run "npx tailwindcss init -p"
     setup_client_css
     remove_server_css_requires
     setup_tailwind_requirements
   end
 
   def setup_jest
-    run 'bin/yarn add jest vue-jest babel-jest @vue/test-utils jest-serializer-vue babel-core@^7.0.0-bridge.0 --dev'
+    run "bin/yarn add jest @vue/vue3-jest@#{VUE_JEST_VERSION} babel-jest "\
+    "@vue/test-utils@#{VUE_TEST_UTILS_VERSION} ts-jest"
     json_file = File.read(Pathname.new("package.json"))
     js_package = JSON.parse(json_file)
     js_package = js_package.merge(jest_config)
     json_string = JSON.pretty_generate(js_package)
     create_file 'package.json', json_string, force: true
 
-    copy_file '../assets/app/javascript/app.spec.js', 'app/javascript/app.spec.js'
-  end
-
-  def setup_apollo
-    run 'bin/yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag'
-
-    inject_into_file(
-      'app/javascript/packs/application.js',
-      apollo_imports,
-      after: "import App from '../app.vue';"
-    )
-
-    inject_into_file(
-      'app/javascript/packs/application.js',
-      apollo_loading,
-      after: "import VueApollo from 'vue-apollo';"
-    )
-    inject_into_file(
-      'app/javascript/packs/application.js',
-      "\n    apolloProvider,",
-      after: "components: { App },"
-    )
-  end
-
-  def foce_vue_loader_version
-    run "bin/yarn add vue-loader@#{VUE_LOADER_VERSION}"
+    copy_file '../assets/app/javascript/components/app.spec.ts',
+              'app/javascript/components/app.spec.ts'
   end
 
   def setup_vue
-    foce_vue_loader_version
+    run "bin/yarn add vue@#{VUE_VERSION} vue-loader@#{VUE_LOADER_VERSION} "\
+        "babel-preset-typescript-vue3"
+    gsub_file(
+      'config/webpack/webpack.config.js',
+      ' merge(typescriptConfig, cssConfig, jQueryConfig, webpackConfig);',
+      ' merge(vueConfig, typescriptConfig, cssConfig, jQueryConfig, webpackConfig);'
+    )
+    copy_file '../assets/app/javascript/components/app.vue', 'app/javascript/components/app.vue'
+    copy_file '../assets/app/javascript/types/vue.d.ts', 'app/javascript/types/vue.d.ts'
     setup_vue_with_compiler_build
-    setup_jest
-    if get(:api) == :graphql
-      setup_apollo
+    recipe = self
+    run_action(:setup_jest) do
+      recipe.setup_jest
     end
   end
 
@@ -120,45 +141,11 @@ class Recipes::FrontEnd < Rails::AppBuilder
   def frameworks(framework)
     frameworks = {
       vue: "vue",
-      angular: "angular",
       none: nil
     }
     frameworks[framework]
   end
 
-  def apollo_imports
-    <<~JS
-      \n
-      import { ApolloClient } from 'apollo-client';
-      import { createHttpLink } from 'apollo-link-http';
-      import { InMemoryCache } from 'apollo-cache-inmemory';
-      import VueApollo from 'vue-apollo';
-    JS
-  end
-
-  def apollo_loading
-    <<~JS
-      \n
-      const httpLink = createHttpLink({
-        uri: `${window.location.origin}/graphql`,
-      })
-      const cache = new InMemoryCache()
-      const apolloClient = new ApolloClient({
-        link: httpLink,
-        cache,
-      })
-
-      Vue.use(VueApollo)
-      const apolloProvider = new VueApollo({
-        defaultClient: apolloClient,
-      })
-    JS
-  end
-
-  def specify_autoprefixer_postcss_compatibility_versions
-    run 'bin/yarn -D add postcss@^7 autoprefixer@^9'
-  end
-
   def setup_client_css
     application_css = 'app/javascript/css/application.css'
     create_file application_css, "", force: true
@@ -167,14 +154,14 @@ class Recipes::FrontEnd < Rails::AppBuilder
     layout_file = "app/views/layouts/application.html.erb"
     insert_into_file layout_file, stylesheet_pack_tag, before: "</head>"
 
-    application_js = 'app/javascript/packs/application.js'
+    application_js = 'app/javascript/application.js'
     if get(:front_end) != :vue
-      create_file application_js, "import '../css/application.css';\n", force: true
+      create_file application_js, "import './css/application.css';\n", force: true
     else
       insert_into_file(
         application_js,
-        "\nimport '../css/application.css';",
-        after: "import App from '../app.vue';"
+        "\nimport './css/application.css';",
+        after: "import App from './components/app.vue';"
       )
     end
   end
@@ -185,9 +172,6 @@ class Recipes::FrontEnd < Rails::AppBuilder
 
     tailwind_config = 'tailwind.config.js'
     create_file tailwind_config, tailwind_config_content, force: true
-
-    postcss_file = 'postcss.config.js'
-    insert_into_file postcss_file, postcss_require_tailwind, after: "plugins: [\n"
   end
 
   def remove_server_css_requires
@@ -197,14 +181,14 @@ class Recipes::FrontEnd < Rails::AppBuilder
 
   def application_js_content
     <<~JS
-      import Vue from 'vue/dist/vue.esm';
-      import App from '../app.vue';
+      import { createApp } from 'vue';
+      import App from './components/app.vue';
 
       document.addEventListener('DOMContentLoaded', () => {
-        const app = new Vue({
-          el: '#vue-app',
+        const app = createApp({
           components: { App },
         });
+        app.mount('#vue-app');
 
         return app;
       });
@@ -213,9 +197,9 @@ class Recipes::FrontEnd < Rails::AppBuilder
 
   def tailwind_client_css
     <<~CSS
-      @import 'tailwindcss/base';
-      @import 'tailwindcss/components';
-      @import 'tailwindcss/utilities';
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
     CSS
   end
 
@@ -228,26 +212,16 @@ class Recipes::FrontEnd < Rails::AppBuilder
         },
         variants: {},
         plugins: [],
-        purge: {
-          enabled: process.env.NODE_ENV === 'production',
-          content: [
-            './app/**/*.html',
-            './app/**/*.vue',
-            './app/**/*.js',
-            './app/**/*.erb',
-          ],
-        }
+        content: [
+          './app/**/*.html',
+          './app/**/*.vue',
+          './app/**/*.js',
+          './app/**/*.erb',
+        ],
       };
     JS
   end
 
-  def postcss_require_tailwind
-    <<-JS.gsub(/^ {4}/, '  ')
-      require('tailwindcss'),
-      require('autoprefixer'),
-    JS
-  end
-
   def jest_config
     {
       "scripts": {
@@ -267,16 +241,14 @@ class Recipes::FrontEnd < Rails::AppBuilder
         },
         "moduleFileExtensions": [
           "js",
+          "ts",
           "json",
           "vue"
         ],
         "transform": {
-          "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-          ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+          "^.+\\.ts$": "ts-jest",
+          ".*\\.(vue)$": "@vue/vue3-jest"
         },
-        "snapshotSerializers": [
-          "<rootDir>/node_modules/jest-serializer-vue"
-        ],
         "testEnvironment": "jsdom"
       }
     }

data/lib/potassium/recipes/google_tag_manager.rb

@@ -87,7 +87,7 @@ class Recipes::GoogleTagManager < Rails::AppBuilder
           'https://www.google-analytics.com',
           'https://ssl.google-analytics.com'
         )
-        policy.img_src :self, :https, 'https://www.googletagmanager.com', 'https://www.google-analytics.com'
+        policy.img_src :self, 'data:', :https, 'https://www.googletagmanager.com', 'https://www.google-analytics.com'
       end
     HERE
   end

data/lib/potassium/recipes/mailer.rb

@@ -63,20 +63,32 @@ class Recipes::Mailer < Rails::AppBuilder
     gather_gem 'recipient_interceptor'
   end
 
+  def config_environments
+    gsub_file 'config/environments/production.rb', /$\s*config.action_mailer.*/, ''
+    asset_host_dev = <<~RUBY
+      config.action_mailer.asset_host = "http://\#{ENV.fetch('APPLICATION_HOST')}"
+    RUBY
+    application asset_host_dev, env: "development"
+    asset_host_prod = <<~RUBY
+      config.action_mailer.asset_host = "https://\#{ENV.fetch('APPLICATION_HOST')}"
+    RUBY
+    application asset_host_prod, env: "production"
+    mailer_config = <<~RUBY
+      require Rails.root.join("config", "mailer")
+    RUBY
+
+    prepend_file "config/environments/production.rb", mailer_config
+  end
+
   def config(service)
     template "../assets/config/mailer.rb.erb", 'config/mailer.rb'
-    gsub_file 'config/environments/production.rb', /$\s*config.action_mailer.*/, ''
+
     append_to_file '.env.development', "APPLICATION_HOST=localhost:3000\n"
     append_to_file '.env.development', "EMAIL_RECIPIENTS=\n"
 
-    mailer_config =
-      <<~RUBY
-        require Rails.root.join("config", "mailer")
-      RUBY
-
-    prepend_file "config/environments/production.rb", mailer_config
-    copy_file '../assets/app/mailers/application_mailer.rb', 'app/mailers/application_mailer.rb', force: true
-
+    copy_file '../assets/app/mailers/application_mailer.rb', 'app/mailers/application_mailer.rb',
+              force: true
+    config_environments
     send(service[:name])
   end
 
@@ -88,7 +100,7 @@ class Recipes::Mailer < Rails::AppBuilder
       }
     RUBY
     inject_into_file 'config/mailer.rb', sendgrid_settings,
-      after: "Rails.application.config.action_mailer.delivery_method = :sendgrid\n"
+                     after: "Rails.application.config.action_mailer.delivery_method = :sendgrid\n"
     sendgrid_dev_settings = <<~RUBY
       Rails.application.config.action_mailer.sendgrid_dev_settings = {
         api_key: ENV['SENDGRID_API_KEY']

data/lib/potassium/recipes/mjml.rb

@@ -0,0 +1,31 @@
+class Recipes::Mjml < Rails::AppBuilder
+  def create
+    return if get(:email_service).to_s.downcase.to_sym == :none
+
+    gather_gem 'mjml-rails'
+    after(:gem_install) do
+      run 'bin/yarn add mjml'
+      mjml_config
+    end
+  end
+
+  def installed?
+    gem_exists?(/mjml-rails/)
+  end
+
+  def install
+    create
+  end
+end
+
+private
+
+def mjml_config
+  copy_file '../assets/app/views/layouts/default_mail.html.mjml',
+            'app/views/layouts/default_mail.html.mjml', force: true
+  copy_file '../assets/app/mailers/example_mailer.rb', 'app/mailers/example_mailer.rb', force: true
+  copy_file '../assets/app/views/example_mailer/example_mail.html.mjml',
+            'app/views/example_mailer/example_mail.html.mjml', force: true
+  copy_file '../assets/public/mails/platanus-logo.png',
+            'public/mails/platanus-logo.png', force: true
+end

data/lib/potassium/recipes/node.rb

@@ -3,19 +3,17 @@ require 'semantic'
 require 'json'
 
 class Recipes::Node < Rails::AppBuilder
-  def create
-    info "Using node version LTS #{version}"
-    create_file '.node-version', version, force: true
-    json_file = File.read(Pathname.new("package.json"))
-    js_package = JSON.parse(json_file)
-    js_package["engines"] = { "node" => "#{version}.x" }
-    json_string = JSON.pretty_generate(js_package)
-    create_file 'package.json', json_string, force: true
-  end
+  NODE_VERSION = Potassium::NODE_VERSION
 
-  private
-
-  def version
-    Potassium::NODE_VERSION
+  def create
+    info "Using node version LTS #{NODE_VERSION}"
+    create_file '.node-version', NODE_VERSION, force: true
+    after(:webpacker_install) do
+      json_file = File.read(Pathname.new("package.json"))
+      js_package = JSON.parse(json_file)
+      js_package["engines"] = { "node" => "#{NODE_VERSION}.x" }
+      json_string = JSON.pretty_generate(js_package)
+      create_file 'package.json', json_string, force: true
+    end
   end
 end

data/lib/potassium/recipes/style.rb

@@ -17,9 +17,16 @@ class Recipes::Style < Rails::AppBuilder
       gather_gem 'rubocop-performance'
       gather_gem 'rubocop-rails'
       gather_gem 'rubocop-rspec', Potassium::RUBOCOP_RSPEC_VERSION
+      gather_gem 'rubocop-platanus'
+    end
+
+    after(:webpacker_install) do
+      run "yarn add --dev stylelint eslint eslint-plugin-import "\
+        "@typescript-eslint/eslint-plugin  @types/jest @typescript-eslint/parser eslint-plugin-jest"
+      if selected?(:front_end, :vue)
+        run 'yarn add --dev eslint-plugin-vue @vue/eslint-config-typescript'
+      end
     end
-    run 'bin/yarn add --dev stylelint eslint eslint-plugin-import'
-    run 'bin/yarn add --dev eslint-plugin-vue' if selected?(:front_end, :vue)
   end
 
   def add_config_files

data/lib/potassium/recipes/vue_admin.rb

@@ -35,15 +35,18 @@ class Recipes::VueAdmin < Rails::AppBuilder
   def add_vue_admin
     add_vue_component_library
     add_component_integration
-    copy_file '../assets/active_admin/init_activeadmin_vue.rb',
-      'config/initializers/init_activeadmin_vue.rb'
-    copy_file '../assets/active_admin/admin_application.js',
-      'app/javascript/packs/admin_application.js',
-      force: true
-    empty_directory 'app/javascript/components'
+    js_line = 'import "activeadmin_addons"'
+    gsub_file(
+      'app/javascript/active_admin.js',
+      js_line,
+      <<~HERE
+        #{js_line}
+        #{active_admin_js}
+      HERE
+    )
     copy_file '../assets/active_admin/admin-component.vue',
-      'app/javascript/components/admin-component.vue',
-      force: true
+              'app/javascript/components/admin-component.vue',
+              force: true
   end
 
   def add_component_integration
@@ -121,4 +124,31 @@ class Recipes::VueAdmin < Rails::AppBuilder
       end
     HERE
   end
+
+  def active_admin_js
+    <<~HERE
+      import { createApp } from 'vue';
+      import AdminComponent from './components/admin-component.vue';
+
+      function onLoad() {
+        if (document.getElementById('wrapper') !== null) {
+          const app = createApp({
+            mounted() {
+              // We need to re-trigger DOMContentLoaded for ArcticAdmin after Vue replaces DOM elements
+              window.document.dispatchEvent(new Event('DOMContentLoaded', {
+                bubbles: true,
+                cancelable: true,
+              }));
+            },
+          });
+          app.component('AdminComponent', AdminComponent);
+          app.mount('#wrapper');
+        }
+
+        return null;
+      }
+
+      document.addEventListener('DOMContentLoaded', onLoad, { once: true });
+    HERE
+  end
 end

data/lib/potassium/templates/application.rb

@@ -81,6 +81,7 @@ run_action(:recipe_loading) do
   create :admin
   create :vue_admin
   create :google_tag_manager
+  create :mjml
 end
 
 info "Gathered enough information. Applying the template. Wait a minute."

data/lib/potassium/version.rb

@@ -1,5 +1,5 @@
 module Potassium
-  VERSION = "6.5.0"
+  VERSION = "6.6.0"
   RUBY_VERSION = "2.7.0"
   RAILS_VERSION = "~> 6.1.4.4"
   RUBOCOP_VERSION = "~> 1.9"
@@ -7,6 +7,11 @@ module Potassium
   POSTGRES_VERSION = "11.3"
   MYSQL_VERSION = "5.7"
   NODE_VERSION = "14"
-  TAILWINDCSS = "npm:@tailwindcss/postcss7-compat"
-  VUE_LOADER_VERSION = "^15.9.7"
+  TAILWINDCSS_VERSION = "^3"
+  POSTCSS_VERSION = "^8"
+  AUTOPREFIXER_VERSION = "^10"
+  VUE_VERSION = "^3"
+  VUE_LOADER_VERSION = "^16"
+  VUE_TEST_UTILS_VERSION = "^2.0.0-rc.18"
+  VUE_JEST_VERSION = "^27.0.0-alpha.1"
 end

data/spec/features/api_spec.rb

@@ -4,7 +4,7 @@ RSpec.describe "Api" do
   before :all do
     drop_dummy_database
     remove_project_directory
-    create_dummy_project("api" => :rest)
+    create_dummy_project("api" => true)
   end
 
   it "adds power_api related gems to Gemfile" do
@@ -22,4 +22,9 @@ RSpec.describe "Api" do
     content = IO.read("#{project_path}/app/controllers/api/base_controller.rb")
     expect(content).to include("Api::BaseController < PowerApi::BaseController")
   end
+
+  it "installs internal API mode" do
+    content = IO.read("#{project_path}/app/controllers/api/internal/base_controller.rb")
+    expect(content).to include("Api::Internal::BaseController < Api::BaseController")
+  end
 end

data/spec/features/coverage_spec.rb

@@ -23,4 +23,21 @@ RSpec.describe "Coverage" do
     content = IO.read("#{project_path}/spec/simplecov_config.rb")
     expect(content).to include("SimpleCov.start 'rails'")
   end
+
+  context "with vue" do
+    let(:node_modules_file) { IO.read("#{project_path}/package.json") }
+
+    before(:all) do
+      remove_project_directory
+      create_dummy_project("front_end" => "vue")
+    end
+
+    it "adds jest coverage configuration" do
+      expect(node_modules_file).to include('"collectCoverage": true')
+    end
+
+    it "adds jest text formatter package" do
+      expect(node_modules_file).to include('jest-text-formatter')
+    end
+  end
 end