diff --git a/lib/potassium/recipes/front_end.rb b/lib/potassium/recipes/front_end.rb index debb10b0..a5c7c404 100644 --- a/lib/potassium/recipes/front_end.rb +++ b/lib/potassium/recipes/front_end.rb @@ -115,7 +115,7 @@ def setup_apollo inject_into_file( 'app/javascript/application.ts', apollo_imports, - after: "import App from '../app.vue';" + after: "import { createApp } from 'vue';" ) inject_into_file( @@ -128,6 +128,11 @@ def setup_apollo "\n apolloProvider,", after: "components: { App }," ) + inject_into_file( + 'app/javascript/application.ts', + apollo_config, + before: "app.mount('#vue-app');" + ) end def setup_vue @@ -178,11 +183,17 @@ def apollo_loading link: httpLink, cache, }) + JS + end - Vue.use(VueApollo) + def apollo_config + <<~JS + \n + app.use(VueApollo) const apolloProvider = new VueApollo({ defaultClient: apolloClient, }) + \n JS end diff --git a/spec/features/front_end_spec.rb b/spec/features/front_end_spec.rb index dec44aba..b74818a4 100644 --- a/spec/features/front_end_spec.rb +++ b/spec/features/front_end_spec.rb @@ -9,7 +9,7 @@ let(:application_css_path) { "#{project_path}/app/javascript/css/application.css" } let(:gemfile) { IO.read("#{project_path}/Gemfile") } let(:node_modules_file) { IO.read("#{project_path}/package.json") } - let(:application_js_file) { IO.read("#{project_path}/app/javascript/packs/application.ts") } + let(:application_ts_file) { IO.read("#{project_path}/app/javascript/application.ts") } let(:layout_file) { IO.read("#{project_path}/app/views/layouts/application.html.erb") } let(:application_css_file) { IO.read(application_css_path) } let(:tailwind_config_file) { IO.read("#{project_path}/tailwind.config.js") } @@ -18,13 +18,13 @@ it "creates a project without a front end framework" do remove_project_directory create_dummy_project("front_end" => "None") - expect(gemfile).to include('webpacker') + expect(gemfile).to include('shakapacker') end - def expect_to_have_tailwind_compatibility_build - expect(node_modules_file).to include("\"tailwindcss\": \"npm:@tailwindcss/postcss7-compat\"") - expect(node_modules_file).to include("\"autoprefixer\": \"^9\"") - expect(node_modules_file).to include("\"postcss\": \"^7\"") + def expect_to_have_tailwind_package_versions + expect(node_modules_file).to include("\"tailwindcss\": \"^3\"") + expect(node_modules_file).to include("\"autoprefixer\": \"^10\"") + expect(node_modules_file).to include("\"postcss\": \"^8\"") end context "with vue" do @@ -33,11 +33,11 @@ def expect_to_have_tailwind_compatibility_build create_dummy_project("front_end" => "vue") end - it "creates a project with vue in compiler mode as frontend framework" do - expect(gemfile).to include('webpacker') + it "creates a project with vue as frontend framework" do + expect(gemfile).to include('shakapacker') expect(node_modules_file).to include("\"vue\"") - expect(application_js_file).to include('vue/dist/vue.esm') - expect(application_js_file).to include("el: '#vue-app'") + expect(application_ts_file).to include('vue') + expect(application_ts_file).to include("app.mount('#vue-app')") expect(layout_file).to include('id="vue-app"') end @@ -46,7 +46,7 @@ def expect_to_have_tailwind_compatibility_build end it "creates a vue project with client css" do - expect(application_js_file).to include("import '../css/application.css';") + expect(application_ts_file).to include("import './css/application.css';") expect(layout_file).to include("<%= stylesheet_pack_tag 'application' %>") expect(rails_css_file).not_to include('*= require_tree', '*= require_self') end @@ -54,14 +54,14 @@ def expect_to_have_tailwind_compatibility_build it "creates a vue project with tailwindcss" do expect(node_modules_file).to include("\"tailwindcss\"") expect(application_css_file).to include( - "@import 'tailwindcss/base';", - "@import 'tailwindcss/components';" + "@tailwind base;", + "@tailwind components;" ) expect(tailwind_config_file).to include('module.exports') end it 'includes correct packages for tailwind, postcss and autoprefixer compatibility build' do - expect_to_have_tailwind_compatibility_build + expect_to_have_tailwind_package_versions end it 'includes correct version of vue-loader in package' do @@ -76,30 +76,10 @@ def expect_to_have_tailwind_compatibility_build it "creates a vue project with apollo" do expect(node_modules_file).to include("\"vue-apollo\"") - expect(application_js_file).to include("import { ApolloClient } from 'apollo-client';") - expect(application_js_file).to include("Vue.use(VueApollo)") - expect(application_js_file).to include("apolloProvider,") + expect(application_ts_file).to include("import { ApolloClient } from 'apollo-client';") + expect(application_ts_file).to include("app.use(VueApollo)") + expect(application_ts_file).to include("apolloProvider,") end end end - - context "with angular" do - before(:all) do - remove_project_directory - create_dummy_project("front_end" => "angular") - end - - it "creates a project without vue as front end framework" do - expect(gemfile).to include('webpacker') - expect(node_modules_file).to include("\"@angular/core\"") - end - - it "creates application_js_file for tailwind without vue" do - expect(application_js_file).to include("import '../css/application.css';") - end - - it 'includes correct packages for tailwind, postcss and autoprefixer compatibility build' do - expect_to_have_tailwind_compatibility_build - end - end end diff --git a/spec/features/vue_admin_spec.rb b/spec/features/vue_admin_spec.rb index 7007f5bd..da49bc36 100644 --- a/spec/features/vue_admin_spec.rb +++ b/spec/features/vue_admin_spec.rb @@ -21,11 +21,6 @@ expect(vue_component_lib).to include("VueComponent") end - it "adds admin_application pack to packs" do - application_pack_path = "#{project_path}/app/javascript/admin_application.js" - expect(File).to be_file(application_pack_path) - end - it "adds admin_component to vue components" do application_pack_path = "#{project_path}/app/javascript/components/admin-component.vue" expect(File).to be_file(application_pack_path)