Class: Recipes::FrontEndVite

Inherits:
Rails::AppBuilder
  • Object
show all
Defined in:
lib/potassium/recipes/front_end_vite.rb

Constant Summary collapse

VUE_VERSION = 
Potassium::VUE_VERSION
POSTCSS_VERSION = 
Potassium::POSTCSS_VERSION
TAILWINDCSS_VERSION = 
Potassium::TAILWINDCSS_VERSION
AUTOPREFIXER_VERSION = 
Potassium::AUTOPREFIXER_VERSION
VUE_TEST_UTILS_VERSION = 
Potassium::VUE_TEST_UTILS_VERSION
JSDOM_VERSION = 
Potassium::JSDOM_VERSION
DEPENDENCIES = 
{
  tailwind: [
    "postcss@#{POSTCSS_VERSION}",
    "tailwindcss@#{TAILWINDCSS_VERSION}",
    "autoprefixer@#{AUTOPREFIXER_VERSION}",
    "sass"
  ],
  typescript: [
    "typescript"
  ],
  typescript_dev: [
    "@types/node"
  ],
  vue: [
    "vue@#{VUE_VERSION}"
  ],
  vue_dev: [
    "@tsconfig/node14",
    "@vitejs/plugin-vue",
    "@vue/tsconfig",
    "vue-tsc"
  ],
  vitest_dev: [
    "vitest",
    "@vue/test-utils@#{VUE_TEST_UTILS_VERSION}",
    "jsdom@#{JSDOM_VERSION}"
  ],
  api: [
    "axios",
    "humps"
  ],
  api_dev: [
    "@types/humps"
  ]
}

Instance Method Summary collapse

Instance Method Details

#add_vite ⇒ Object 



57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 57

def add_vite
  gather_gem("vite_rails")
  recipe = self
  after(:gem_install, wrap_in_action: :vite_install) do
    run "yarn install"
    run "bundle exec vite install"
    recipe.install_packages
    recipe.setup_tailwind
    recipe.copy_config_files
    recipe.setup_vite
    recipe.copy_default_assets
    recipe.insert_vue_into_layout
    recipe.setup_api_client
    add_readme_header :vite
  end
end

#add_vite_dev_ws_content_security_policy ⇒ Object 



129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 129

def add_vite_dev_ws_content_security_policy
  initializer = "config/initializers/content_security_policy.rb"
  line = "#    policy.style_src *policy.style_src, :unsafe_inline if Rails.env.development?"
  policy = <<~HERE.chomp
    # if Rails.env.development?
    #   policy.connect_src *policy.connect_src,
    #                     "ws://\#{ViteRuby.config.host_with_port}"
    # end
  HERE
  # check if policy already exists
  return if File.read(initializer).include?("policy.connect_src *policy.connect_src")

  inject_into_file initializer, after: line do
    policy
  end
end

#copy_config_files ⇒ Object 



85
86
87
88
89
90
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 85

def copy_config_files
  copy_file '../assets/vite.config.ts', 'vite.config.ts', force: true
  copy_file '../assets/tailwind.config.js', 'tailwind.config.js', force: true
  copy_file '../assets/tsconfig.json', 'tsconfig.json', force: true
  copy_file '../assets/tsconfig.config.json', 'tsconfig.config.json', force: true
end

#copy_default_assets ⇒ Object 



97
98
99
100
101
102
103
104
105
106
107
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 97

def copy_default_assets
  copy_file '../assets/app/frontend/entrypoints/application.js',
            'app/frontend/entrypoints/application.js', force: true
  copy_file '../assets/app/frontend/css/application.css', 'app/frontend/css/application.css',
            force: true
  copy_file '../assets/app/frontend/components/app.vue', 'app/frontend/components/app.vue',
            force: true
  copy_file '../assets/app/frontend/types/vue.d.ts', 'app/frontend/types/vue.d.ts'
  copy_file '../assets/app/frontend/components/app.spec.ts',
            'app/frontend/components/app.spec.ts'
end

#copy_dotenv_monkeypatch ⇒ Object 



146
147
148
149
150
151
152
153
154
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 146

def copy_dotenv_monkeypatch
  copy_file '../assets/lib/dotenv_monkeypatch.rb',
            'lib/dotenv_monkeypatch.rb', force: true
  insert_into_file(
    "config/application.rb",
    "\nrequire_relative '../lib/dotenv_monkeypatch'\n",
    after: "Bundler.require(*Rails.groups)"
  )
end

#create ⇒ Object 



49
50
51
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 49

def create
  add_vite
end

#insert_vue_into_layout ⇒ Object 



109
110
111
112
113
114
115
116
117
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 109

def insert_vue_into_layout
  layout_file = "app/views/layouts/application.html.erb"
  insert_into_file(
    layout_file,
    "<div id=\"vue-app\">\n      <app></app>\n      ",
    before: "<%= yield %>"
  )
  insert_into_file layout_file, "\n    </div>", after: "<%= yield %>"
end

#install ⇒ Object 



53
54
55
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 53

def install
  add_vite
end

#install_packages ⇒ Object 



74
75
76
77
78
79
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 74

def install_packages
  packages, dev_packages = DEPENDENCIES.partition { |k, _| !k.to_s.end_with?('_dev') }.map(&:to_h)

  run "yarn add #{packages.values.flatten.join(' ')}"
  run "yarn add --dev #{dev_packages.values.flatten.join(' ')}"
end

#installed? ⇒ Boolean

Returns:

  • (Boolean) 


45
46
47
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 45

def installed?
  gem_exists?(/vite_rails/)
end

#setup_api_client ⇒ Object 



119
120
121
122
123
124
125
126
127
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 119

def setup_api_client
  copy_file '../assets/app/frontend/api/index.ts', 'app/frontend/api/index.ts'
  copy_file '../assets/app/frontend/api/__mocks__/index.mock.ts',
            'app/frontend/api/__mocks__/index.mock.ts'
  copy_file '../assets/app/frontend/utils/case-converter.ts',
            'app/frontend/utils/case-converter.ts'
  copy_file '../assets/app/frontend/utils/csrf-token.ts',
            'app/frontend/utils/csrf-token.ts'
end

#setup_tailwind ⇒ Object 



81
82
83
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 81

def setup_tailwind
  run "npx tailwindcss init -p"
end

#setup_vite ⇒ Object 



92
93
94
95
 
# File 'lib/potassium/recipes/front_end_vite.rb', line 92

def setup_vite
  add_vite_dev_ws_content_security_policy
  copy_dotenv_monkeypatch
end