Unified component structure for my EmberJS projects

Long living projects often times have a lot of experimental "styles" or "techniques" or even just "ad-hoc structure" in them. My projects are no exception.

Today I decided that I will force an unified structure for all the component files within said projects. My (currently) preferred way of nesting folders/files is: components/foo/bar/baz/index.{js,hbs}.

It requires ruby on your environment and setting COMPONENT_DIRECTORY variable. Hope this might help someone.

#!/usr/bin/env ruby
#
# Unifies component structure
#  - components/foo.hbs -> components/foo/index.hbs
#  - components/foo.js -> components/foo/index.js
#  - components/bar/template.hbs -> components/bar/index.hbs
#  - components/bar/component.js -> components/bar/index.js

COMPONENT_DIRECTORY='../your/app/or/addon/directory'

Dir.chdir(COMPONENT_DIRECTORY)

Dir.glob('./components/**/*.{hbs,js}').each do |entry|
  matches = %r{(.*)\/(.*)\.(hbs|js)$}.match(entry)
  next if matches[2] == 'index'

  is_weird_syntax = ((matches[2] == 'template') || (matches[2] == 'component'))

  new_folder = if is_weird_syntax
                 matches[1]
               else
                 File.join(matches[1], matches[2])
               end

  Dir.mkdir(new_folder) unless File.exist?(new_folder)
  new_file = File.join(new_folder, "index.#{matches[3]}")
  File.rename(entry, new_file)
  puts "#{entry} => #{new_file}"
end

---

Photo by Ronaldo de Oliveira on Unsplash