Merge pull request #375 from platanus/vue-fixes

Vue fixes
platanus · Jul 8, 2021 · af2fc92 · af2fc92
2 parents 91cdcbd + 9bd0f60
commit af2fc92
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,12 @@ Features
   - Updates ActiveAdmin installation to use webpacker [#350](https://github.com/platanus/potassium/pull/350)
   - Replaces Active Skin with Arctic Admin [#350](https://github.com/platanus/potassium/pull/350)
 
+Fixes
+  - Forces `vue-loader` version to 15, as 16 requires `@vue/compiler-sfc`, which is a part of Vue 3
+  - Changes Content Security Policy added by GTM recipe to:
+    - Include the same config regardless of environment
+    - Include `unsafe_eval` in `script_src`, as it is required for Vue's compiler build
+
 ## 6.3.0
 
 Features:

diff --git a/lib/potassium/recipes/front_end.rb b/lib/potassium/recipes/front_end.rb
@@ -1,4 +1,6 @@
 class Recipes::FrontEnd < Rails::AppBuilder
+  VUE_LOADER_VERSION = Potassium::VUE_LOADER_VERSION
+
   def ask
     frameworks = {
       vue: "Vue",
@@ -21,13 +23,7 @@ def create
       run "rails webpacker:install"
       run "rails webpacker:install:#{value}" unless [:none, :None].include? value.to_sym
 
-      if value == :vue
-        recipe.setup_vue_with_compiler_build
-        recipe.setup_jest
-        if get(:api) == :graphql
-          recipe.setup_apollo
-        end
-      end
+      recipe.setup_vue if value == :vue
       recipe.add_responsive_meta_tag
       recipe.setup_tailwind
       add_readme_header :webpack
@@ -106,6 +102,19 @@ def setup_apollo
     )
   end
 
+  def foce_vue_loader_version
+    run "bin/yarn add vue-loader@#{VUE_LOADER_VERSION}"
+  end
+
+  def setup_vue
+    foce_vue_loader_version
+    setup_vue_with_compiler_build
+    setup_jest
+    if get(:api) == :graphql
+      setup_apollo
+    end
+  end
+
   private
 
   def frameworks(framework)

diff --git a/lib/potassium/recipes/google_tag_manager.rb b/lib/potassium/recipes/google_tag_manager.rb
@@ -68,22 +68,26 @@ def render_string(file_path)
   def content_security_policy_code
     <<~HERE
       Rails.application.config.content_security_policy do |policy|
-        if Rails.env.development?
-          policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'
-          policy.script_src :self, :https, :unsafe_eval
-        else
-          policy.script_src :self, :https
-          # google tag manager requires to enable unsafe inline:
-          # https://developers.google.com/tag-manager/web/csp
-          policy.connect_src :self, :https, 'https://www.google-analytics.com'
-          policy.script_src :self,
-            :https,
-            :unsafe_inline,
-            'https://www.googletagmanager.com',
-            'https://www.google-analytics.com',
-            'https://ssl.google-analytics.com'
-          policy.img_src :self, :https, 'https://www.googletagmanager.com', 'https://www.google-analytics.com'
-        end
+        policy.connect_src(
+          :self,
+          :https,
+          'http://localhost:3035',
+          'ws://localhost:3035',
+          'https://www.google-analytics.com'
+        )
+        # google tag manager requires to enable unsafe inline and vue unsave eval:
+        # https://developers.google.com/tag-manager/web/csp
+        # https://vuejs.org/v2/guide/installation.html#CSP-environments
+        policy.script_src(
+          :self,
+          :https,
+          :unsafe_inline,
+          :unsafe_eval,
+          'https://www.googletagmanager.com',
+          'https://www.google-analytics.com',
+          'https://ssl.google-analytics.com'
+        )
+        policy.img_src :self, :https, 'https://www.googletagmanager.com', 'https://www.google-analytics.com'
       end
     HERE
   end

diff --git a/lib/potassium/version.rb b/lib/potassium/version.rb
@@ -8,4 +8,5 @@ module Potassium
   MYSQL_VERSION = "5.7"
   NODE_VERSION = "12"
   TAILWINDCSS = "npm:@tailwindcss/postcss7-compat"
+  VUE_LOADER_VERSION = "^15.9.7"
 end
diff --git a/spec/features/front_end_spec.rb b/spec/features/front_end_spec.rb
@@ -64,6 +64,10 @@ def expect_to_have_tailwind_compatibility_build
       expect_to_have_tailwind_compatibility_build
     end
 
+    it 'includes correct version of vue-loader in package' do
+      expect(node_modules_file).to include("\"vue-loader\": \"#{Potassium::VUE_LOADER_VERSION}\"")
+    end
+
     context "with graphql" do
       before(:all) do
         remove_project_directory

diff --git a/spec/features/google_tag_manager_spec.rb b/spec/features/google_tag_manager_spec.rb
@@ -31,29 +31,6 @@
 
   it 'add content security policy' do
     expect(content_security_policy_file)
-      .to include(content_security_policy_code)
-  end
-
-  def content_security_policy_code
-    <<~HERE
-      Rails.application.config.content_security_policy do |policy|
-        if Rails.env.development?
-          policy.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'
-          policy.script_src :self, :https, :unsafe_eval
-        else
-          policy.script_src :self, :https
-          # google tag manager requires to enable unsafe inline:
-          # https://developers.google.com/tag-manager/web/csp
-          policy.connect_src :self, :https, 'https://www.google-analytics.com'
-          policy.script_src :self,
-            :https,
-            :unsafe_inline,
-            'https://www.googletagmanager.com',
-            'https://www.google-analytics.com',
-            'https://ssl.google-analytics.com'
-          policy.img_src :self, :https, 'https://www.googletagmanager.com', 'https://www.google-analytics.com'
-        end
-      end
-    HERE
+      .to include("\nRails.application.config.content_security_policy do |policy|")
   end
 end