Class: Recipes::FrontEnd

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

Constant Summary collapse

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
JEST_VERSION = 
Potassium::JEST_VERSION

Instance Method Summary collapse

Instance Method Details

#add_assets_path ⇒ Object 



67
68
69
70
71
72
73
 
# File 'lib/potassium/recipes/front_end.rb', line 67

def add_assets_path
  gsub_file(
    'config/webpacker.yml',
    'additional_paths: []',
    "additional_paths: ['app/assets']"
  )
end

#add_responsive_meta_tag ⇒ Object 



93
94
95
96
97
 
# File 'lib/potassium/recipes/front_end.rb', line 93

def add_responsive_meta_tag
  tag = "\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"
  layout_file = "app/views/layouts/application.html.erb"
  insert_into_file layout_file, tag, after: "<%= csrf_meta_tags %>"
end

#ask ⇒ Object 



10
11
12
13
14
15
16
17
18
19
20
21
22
 
# File 'lib/potassium/recipes/front_end.rb', line 10

def ask
  frameworks = {
    vue: "Vue",
    none: "None"
  }

  framework = answer(:front_end) do
    frameworks.keys[
      Ask.list("Which front-end framework are you going to use?", frameworks.values)
    ]
  end
  set :front_end, framework.to_sym
end

#copy_webpack_rules ⇒ Object 



56
57
58
59
60
61
62
63
64
65
 
# File 'lib/potassium/recipes/front_end.rb', line 56

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

#create ⇒ Object 



24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
# File 'lib/potassium/recipes/front_end.rb', line 24

def create
  gather_gem('shakapacker', '~> 6.2.0')
  recipe = self
  after(:gem_install, wrap_in_action: :webpacker_install) do
    run "rails webpacker:install"
  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
    recipe.setup_api_client
    add_readme_header :webpack
  end
end

#install ⇒ Object 



43
44
45
46
 
# File 'lib/potassium/recipes/front_end.rb', line 43

def install
  ask
  create
end

#installed? ⇒ Boolean

Returns:

  • (Boolean) 


48
49
50
51
52
53
54
 
# File 'lib/potassium/recipes/front_end.rb', line 48

def installed?
  package_file = 'package.json'
  return false unless file_exist?(package_file)

  package_content = read_file(package_file)
  package_content.include?("\"vue\"")
end

#setup_api_client ⇒ Object 



143
144
145
146
147
148
 
# File 'lib/potassium/recipes/front_end.rb', line 143

def setup_api_client
  run "bin/yarn add axios humps"
  copy_file '../assets/app/javascript/api/index.ts', 'app/javascript/api/index.ts'
  copy_file '../assets/app/javascript/utils/case-converter.ts',
            'app/javascript/utils/case-converter.ts'
end

#setup_jest ⇒ Object 



110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
# File 'lib/potassium/recipes/front_end.rb', line 110

def setup_jest
  run "bin/yarn add jest@#{JEST_VERSION} @vue/vue3-jest@#{JEST_VERSION} "\
  "babel-jest@#{JEST_VERSION} @vue/test-utils@#{VUE_TEST_UTILS_VERSION} ts-jest@#{JEST_VERSION} "\
  "jest-environment-jsdom@#{JEST_VERSION} --dev"
  run "bin/yarn add @types/jest@#{JEST_VERSION}"
  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/components/app.spec.ts',
            'app/javascript/components/app.spec.ts'
end

#setup_tailwind ⇒ Object 



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

def setup_tailwind
  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

#setup_typescript ⇒ Object 



75
76
77
78
 
# File 'lib/potassium/recipes/front_end.rb', line 75

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

#setup_vue ⇒ Object 



125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
# File 'lib/potassium/recipes/front_end.rb', line 125

def setup_vue
  run "bin/yarn add vue@#{VUE_VERSION} vue-loader@#{VUE_LOADER_VERSION} "\
      "babel-preset-typescript-vue3 @types/humps"
  run "bin/yarn add vue-tsc --dev"
  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
  recipe = self
  run_action(:setup_jest) do
    recipe.setup_jest
  end
end

#setup_vue_with_compiler_build ⇒ Object 



80
81
82
83
84
85
86
87
88
89
90
91
 
# File 'lib/potassium/recipes/front_end.rb', line 80

def setup_vue_with_compiler_build
  application_js = 'app/javascript/application.js'
  create_file application_js, application_js_content, force: true

  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