Class: Kowl::AssetsGenerator

Inherits:
Generators::Base show all
Defined in:
lib/kowl/generators/assets_generator.rb

Instance Method Summary collapse

Methods inherited from Generators::Base

default_source_root, source_paths

Methods included from Docker

#alpine_docker_dependencies, #app_js_volumes, #app_volumes, #db_volumes, #debian_database_dependencies, #debian_docker_dependencies, #docker_app_command, #docker_compose_database_string, #docker_databases, #docker_depends_on, #docker_port_watcher, #docker_redis_service, #docker_sidekiq_service, #docker_variables, #docker_volumes, #docker_webpacker_service, #dockerfile_database_args, #dockerfile_migration_snip, #js_volumes, #mysql_volumes, #postgresql_volumes, #redis_volumes

Methods included from Actions

#add_extension_routes, #add_package, #append_to_file, #database_route, #dev_config, #dup_file, #file_exists?, #mailer_gems, #mailer_route, #mk_dir, #move_file, #pry_gems, #rails_cmd, #remove_dir, #remove_file, #remove_gem, #replace_string_in_file, #robocop_test_engine, #sidekiq_route, #template_linter_gems

Instance Method Details

#add_admin_webpacker_assets ⇒ Object

If using webpacker, this will generate it’s JS webpacker files for the application



171
172
173
174
175
176
177
178
179
 
# File 'lib/kowl/generators/assets_generator.rb', line 171

def add_admin_webpacker_assets
  return nil if options[:noauth] || options[:skip_javascript]

  template('app/javascript/packs/administrate.js', 'app/javascript/packs/administrate.js')
  copy_file('app/javascript/administrate/index.js', 'app/javascript/administrate/index.js')

  template('app/javascript/administrate/components/date_time_picker.js.tt', 'app/javascript/administrate/components/date_time_picker.js')
  template('app/javascript/administrate/components/table.js.tt', 'app/javascript/administrate/components/table.js')
end

#add_assets_to_precompile ⇒ Object

Adds known css files to css assets to precompile



163
164
165
166
167
168
 
# File 'lib/kowl/generators/assets_generator.rb', line 163

def add_assets_to_precompile
  add_to_assets('application.css')
  return nil if options[:noauth]

  add_to_assets('administrate/application.css')
end

#add_framework_js_to_webpack ⇒ Object

Add Bootstrap/Semantic JS to the application.js file



112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
# File 'lib/kowl/generators/assets_generator.rb', line 112

def add_framework_js_to_webpack
  return nil if options[:skip_javascript] || !%w[bootstrap semantic].include?(options[:framework])

  # If you prefere to pass skip_turbolinks, have JS load with jQuery on the page load
  js_load_str = if options[:skip_turbolinks]
                  '$(document).ready(function() {'
                else
                  '$(document).on("turbolinks:load", function() {'
                end

  if options[:framework] == 'bootstrap'
    framework_js = <<~BOOTSTRAPJS
      #{js_load_str}
        // This will dismiss any and all flash alerts after 3 seconds
        window.setTimeout(function() {
          $('.alert').fadeTo(1000, 0).slideUp(1000, function() {
            $(this).remove();
          });
        }, 3000);
      });
    BOOTSTRAPJS
  elsif options[:framework] == 'semantic'
    framework_js = <<~SEMANTICJS
      #{js_load_str}
        // Allow the user to close the flash messages
        $('.message .close')
          .on('click', function(){
            $(this).closest('.message').transition('fade');
        });

        // Automatically close flash messages after 3 seconds
        window.setTimeout(function() {
          $('.message').transition('fade');
        }, 3000);
      });
    SEMANTICJS
  end
  append_to_file('app/javascript/packs/application.js', framework_js) unless options[:skip_javascript]
end

#copy_stylesheets ⇒ Object

If using bootstrap or semsanitic this includes some additional SCSS files with the application



153
154
155
156
157
158
159
160
 
# File 'lib/kowl/generators/assets_generator.rb', line 153

def copy_stylesheets
  return nil unless %w[bootstrap semantic].include? options[:framework]

  # Remove old application stylesheets and replace with new ones
  remove_file 'app/assets/stylesheets/application.css'
  directory "stylesheets/#{options[:framework]}", 'app/assets/stylesheets', force: true
  remove_file 'app/assets/stylesheets/application-mailer.scss' if options[:skip_mailer]
end

#enable_css_extraction ⇒ Object

If using webpacker allow CSS Extraction for CSS, SCSS, and SASS to work when compiling webpacker assets



182
183
184
185
186
 
# File 'lib/kowl/generators/assets_generator.rb', line 182

def enable_css_extraction
  return nil if options[:skip_javascript]

  replace_string_in_file('config/webpacker.yml', "[\s]?extract_css[\:][\s]?false[\s]?", ' extract_css: true') unless options[:skip_javascript]
end

#setup_framework_js ⇒ Object

If the application will be using Bootstrap or SemanticUI, this includes their JS files in the javascript packs file



91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
# File 'lib/kowl/generators/assets_generator.rb', line 91

def setup_framework_js
  return nil if options[:skip_javascript]

  if options[:framework] == 'bootstrap'
    add_package('bootstrap popper.js')
    js_str = <<~BOOTSTRAP
      require('bootstrap');
      require('popper.js');\n
    BOOTSTRAP
  elsif options[:framework] == 'semantic'
    # The version is used because code semantic-ui and fomantic-ui packages require you to build them with gulp
    # => This makes it easier to get started without a ton of additional setup
    copy_file('app/javascript/packs/semantic.js', 'app/javascript/packs/semantic.js')
    js_str = <<~SEMANTIC
      import Semantic from './semantic';
    SEMANTIC
  end
  append_to_file('app/javascript/packs/application.js', js_str) unless js_str.blank?
end

#setup_jquery_with_webpack ⇒ Object

If javascript is being used, this will setup jquery to be usable through webpack



17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
# File 'lib/kowl/generators/assets_generator.rb', line 17

def setup_jquery_with_webpack
  return nil if options[:skip_javascript]

  add_package('jquery')
  append_to_file('app/javascript/packs/application.js', "\nrequire('jquery');\n")
  webpack_jquery_str = <<~JQUERY
    const webpack = require('webpack')
    environment.plugins.prepend('Provide',
      new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
      })
    )
  JQUERY
  inject_into_file('config/webpack/environment.js', webpack_jquery_str, after: "const { environment } = require('@rails/webpacker')\n")
end

#setup_js_linters ⇒ Object

Unless skipping javascript, this adds some basic linter packages to the webpacker dev environments



84
85
86
87
88
 
# File 'lib/kowl/generators/assets_generator.rb', line 84

def setup_js_linters
  return nil if options[:skip_javascript]

  add_package('eslint prettier prettierrc --dev')
end

#setup_production_asset_compression ⇒ Object

This allows us to generate JS assets compressed with brotli and zopfil in production Which dramatically reduces text based asset sizes



38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
# File 'lib/kowl/generators/assets_generator.rb', line 38

def setup_production_asset_compression
  return nil if options[:skip_javascript]

  # The compression-webpack-plugin package is included in @rails/webpacker.
  # => But this lets us easily access it from our webpacker config
  add_package('compression-webpack-plugin brotli-webpack-plugin @gfx/zopfli')
  webpack_plugins_str = <<~BROTLI
    // Compress the heck out of any static assets included by webpacker (using Brotlie)
    environment.plugins.append('BrotliCompression',
      new CompressionPlugin({
        filename: '[path].br[query]',
        algorithm: 'brotliCompress',
        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
        compressionOptions: {
          level: 11
        },
        cache: true,
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: false,
      })
    )

    // Override default compression with Zopfli compression
    environment.plugins.append('Compression',
      new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm(input, compressionOptions, callback) {
          return zopfli.gzip(input, compressionOptions, callback);
        },
        cache: true,
        threshold: 8192,
        test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
      }),
    )
  BROTLI

  include_plugins_str = <<~PLUGINS
    const CompressionPlugin = require('compression-webpack-plugin'); // General webpacker library containing compression methods
    const zopfli = require('@gfx/zopfli'); // Zopfli is used to increase gzip compression ratio for gzip
  PLUGINS

  inject_into_file('config/webpack/production.js', "#{include_plugins_str}\n\n#{webpack_plugins_str}", after: "const environment = require('./environment')\n")
end