共通コンポーネントを Gem に分離して利用するようにした

.github/workflows/ci.yml

@@ -11,12 +11,13 @@ jobs:
         ports: ["3306:3306"]
         options: --health-cmd "mysqladmin ping" --health-interval 10s --health-timeout 5s --health-retries 10
         env:
-          MYSQL_USER: root
           MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
 
     steps:
     - uses: actions/checkout@v2
     - uses: ruby/setup-ruby@v1
+      env:
+        BUNDLE_HTTPS://RUBYGEMS__PKG__GITHUB__COM/MUGIJIRU/: "mugijiru:${{ secrets.NPM_AUTH_TOKEN }}"
       with:
         bundler-cache: true
     - uses: nanasess/setup-chromedriver@master
@@ -25,12 +26,10 @@ jobs:
       env:
         RAILS_ENV: test
       run: |
-        gem install bundler --no-document
-        bundle config path vendor/bundle
-        bundle install --jobs 4 --retry 3
         cp config/.ci.database.yml config/database.yml
         bin/rails db:setup
         yarn
+        bin/rails assets:precompile
 
     - name: Setup Code Climate test-reporter
       run: |

.gitignore

@@ -30,4 +30,5 @@
 *~
 .dir-locals.el
 /coverage
-/vendor/bundle
+/vendor/bundle
+/ember

Gemfile

@@ -42,6 +42,10 @@ gem 'ember-source'
 gem 'active_model_serializers', '~> 0.9.0'
 gem 'sprockets', '~> 3.7.2'
 
+source "https://rubygems.pkg.github.com/mugijiru" do
+  gem "ember-components"
+end
+
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

Gemfile.lock

@@ -1,5 +1,6 @@
 GEM
   remote: https://rubygems.org/
+  remote: https://rubygems.pkg.github.com/mugijiru/
   specs:
     actioncable (5.2.4.5)
       actionpack (= 5.2.4.5)
@@ -91,6 +92,10 @@ GEM
     diff-lcs (1.4.4)
     docile (1.3.5)
     ember-cli-assets (0.0.37)
+    ember-components (0.0.3)
+      ember-handlebars-template (>= 0.1.1, < 1.0)
+      ember-rails (~> 0.21)
+      railties (~> 5.2)
     ember-data-source (2.18.3)
       ember-source (>= 2, < 3.0)
     ember-es6_template (0.6.0)
@@ -293,6 +298,7 @@ DEPENDENCIES
   codeclimate-test-reporter
   database_rewinder
   devise
+  ember-components!
   ember-rails
   ember-source
   factory_bot_rails

app/assets/javascripts/todo-app/initializers/resolve-ember-components.module.es6

@@ -0,0 +1,10 @@
+import EmberComponents from 'ember-components';
+
+export function initialize(application) {
+  EmberComponents.registerAll(application);
+}
+
+export default {
+  name: 'register-ember-components',
+  initialize: initialize
+};

app/assets/javascripts/todo-app/templates/components/todo-item.hbs

@@ -1,4 +1,4 @@
-{{ember-libs/checkbox checked=item.isCompleted click=(action "toggle")}}
+{{mg-checkbox checked=item.isCompleted click=(action "toggle")}}
 {{#if item.body}}
   <details class="p-todo-item__details">
     <summary title="{{item.name}}" class="p-todo-item__name p-todo-item__name--summary">{{item.name}}</summary>
@@ -9,5 +9,5 @@
 {{else}}
   <div title="{{item.name}}" class="p-todo-item__name">{{item.name}}</div>
 {{/if}}
-{{ember-libs/button text="Edit" click=(action "edit")}}
-{{ember-libs/button text="Delete" isDanger=true click=(action "delete")}}
+{{mg-button text="Edit" click=(action "edit")}}
+{{mg-button text="Delete" isDanger=true click=(action "delete")}}

app/assets/javascripts/todo-app/templates/components/todo-item/form-modal.hbs

@@ -15,8 +15,8 @@
       </div>
     </div>
     <div class="modal-footer">
-      {{ember-libs/button text="Cancel" click=(action "cancel")}}
-      {{ember-libs/button text="Save" isPrimary=true click=(action "save")}}
+      {{mg-button text="Cancel" click=(action "cancel")}}
+      {{mg-button text="Save" isPrimary=true click=(action "save")}}
     </div>
   </form><!-- /.modal-content -->
 </div>

app/assets/javascripts/todo-app/templates/todo-items.hbs

@@ -1,8 +1,8 @@
 <h2>{{current-user.email}} さんのTODO List</h2>
 <div class="p-todo-list__actions">
-  {{ember-libs/button text="Create" click=(action "build")}}
-  {{ember-libs/button text="Delete Completed Items" disabled=hiddenOrHidingCompleted isDanger=true click=(action "deleteCompletedItems")}}
-  {{ember-libs/toggle-switch label='Hide completed items?' offLabel='Show' onLabel='Hide' enabled=hiddenOrHidingCompleted  click=(action "toggleHiddenCompletedItems")}}
+  {{mg-button text="Create" click=(action "build")}}
+  {{mg-button text="Delete Completed Items" disabled=hiddenOrHidingCompleted isDanger=true click=(action "deleteCompletedItems")}}
+  {{mg-toggle-switch label='Hide completed items?' offLabel='Show' onLabel='Hide' enabled=hiddenOrHidingCompleted  click=(action "toggleHiddenCompletedItems")}}
 </div>
 <ul class="p-todo-list">
   {{#each listedTodoItems as |todoItem| }}

app/assets/javascripts/todo-app/todo-app.module.es6

@@ -1,5 +1,5 @@
 //= require_tree ./initializers
-//= require_tree ../ember-libs
+//= require ember-components
 //= require_tree ./adapters
 //= require_tree ./mixins
 //= require_tree ./models
@@ -22,4 +22,5 @@ const TodoApp = Application.extend({
 });
 loadInitializers(TodoApp, 'todo-app');
 
+
 export default TodoApp;

config/application.rb

@@ -31,6 +31,6 @@ class Application < Rails::Application
     config.generators.system_tests = nil
 
     config.ember.module_prefix = nil
-    config.handlebars.templates_root = %w(todo-app/templates ember-libs/templates)
+    config.handlebars.templates_root = %w[todo-app/templates ember-libs/templates ember-components/templates]
   end
 end