Rails 5.2 + Komponent + Turbolinks + Stimulus

README.md

Usage

rails new my_app --rc=template.rc -m template.rb

rails.rc

--skip-coffee
--skip-sprockets
--skip-turbolinks
--webpack
--database=postgresql

template.rb

gem "komponent"
gem "haml-rails"

gem_group :development do
  gem "foreman"
end

file ".browserslistrc", <<-CODE
> 1%
CODE

insert_into_file(
  "config/application.rb", 
  %Q{
    config.komponent.root = Rails.root.join("frontend")

    config.generators do |g|
      g.test_framework  false
      g.stylesheets     false
      g.javascripts     false
      g.helper          false
      g.channel         assets: false
      g.komponent stimulus: true, locale: true # both are false by default
    end},
  after: "config.load_defaults 5.2\n"
)

insert_into_file(
  "config/database.yml",
  %Q{  user: <%= ENV['USER'] %>\n},
  after: "adapter: postgresql\n"
)

run "rm -fr app/assets"

gsub_file(
  "app/views/layouts/application.html.erb",
  /javascript_include_tag\s+.application./,
  %Q{javascript_pack_tag 'application'}
)

gsub_file(
  "app/views/layouts/application.html.erb",
  /stylesheet_link_tag\s+.application.*%/,
  %Q{stylesheet_pack_tag 'application' %}
)

insert_into_file(
  "app/controllers/application_controller.rb",
  %Q{  prepend_view_path Rails.root.join("frontend")\n},
  after: "class ApplicationController < ActionController::Base\n"
)

file "Procfile", <<-PROCFILE
server: bin/rails server
assets: bin/webpack-dev-server
PROCFILE

file ".eslintrc", <<-JSON
{
  "extends": ["eslint-config-airbnb-base", "prettier"],

  "plugins": ["prettier"],

  "env": {
    "browser": true
  },

  "rules": {
    "prettier/prettier": "error"
  },

  "parser": "babel-eslint",

  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
          "resolve": {
            "modules": ["frontend", "node_modules"]
          }
        }
      }
    }
  }
}
JSON

file ".stylelintrc", <<-JSON
{
  "extends": "stylelint-config-standard"
}
JSON

insert_into_file "package.json", <<-JSON, after: %Q{"private": true,\n}
  "scripts": {
    "lint-staged": "$(yarn bin)/lint-staged"
  },
  "lint-staged": {
    "config/webpack/**/*.js": [
      "prettier --write",
      "eslint",
      "git add"
    ],
    "frontend/**/*.js": [
      "prettier --write",
      "eslint",
      "git add"
    ],
    "frontend/**/*.css": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ]
  },
  "pre-commit": [
    "lint-staged"
  ],
JSON

after_bundle do
  # https://github.com/rails/webpacker/issues/1303
  run "yarn add -D webpack-dev-server@^2.11.1"
  
  run "yarn add -D webpack-cli babel-eslint eslint eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-webpack eslint-plugin-import eslint-plugin-prettier lint-staged pre-commit prettier stylelint stylelint-config-standard"
  run "yarn add stimulus normalize.css rails-ujs turbolinks"

  generate "komponent:install", "--stimulus"

  # fix linting
  run "rm frontend/stimulus_application.js"
  file "frontend/stimulus_application.js", <<-JS
    import { Application } from "stimulus";
    
    const application = Application.start();
    
    export default application;
  JS

  gsub_file(
    "config/webpacker.yml",
    "source_path: app/javascript",
    "source_path: frontend"
  )

  run "mv app/javascript frontend"

  file "frontend/packs/application.css", <<-CSS
  html, body {
    background: white; /* just an example */
  }
  CSS

  run "rm frontend/packs/application.js"
  file "frontend/packs/application.js", <<-JS
  import Turbolinks from "turbolinks";
  import Rails from "rails-ujs";
  import "./application.css";
  import "../components";
  
  Turbolinks.start();
  Rails.start();
  JS

  run "rmdir frontend/javascript"

  rails_command "db:create"
  rails_command "db:migrate"

  git add: '-A .'
  git commit: '-m "Initial commit"'
end