komposable / komponent

An opinionated way of organizing front-end code in Ruby on Rails, based on components
http://komponent.io
MIT License
427 stars 31 forks source link

Stimulus integration #17

Closed florentferry closed 6 years ago

florentferry commented 6 years ago

We need an option to integrate stimulus into Komponent.

Installer generator changes

Append some extra lines to frontend/packs/application.js and run yarn add stimulus.

import {Application} from 'stimulus';
import {autoload} from 'stimulus/webpack-helpers';

const application = Application.start();
const controllers = require.context('../components', true, /\.js$/);
autoload(controllers, application);

Component generator changes

Due to autoloading from stimulus, import in frontend/components/index.js is unecessary, and naming convention require to change JS filename from xxx.js to xxx_controller.js.

We have the need to append some extra lines to the JS file too.

import { Controller } from "stimulus"
export default class extends Controller {
...
}

Naming changes

https://github.com/stimulusjs/stimulus/blob/aa075344f2b6806124c560bee67485382bb07007/packages/%40stimulus/webpack-helpers/index.ts#L28.

frontend/components/admin/notice/_admin_notice.html.slim
frontend/components/admin/notice/admin_notice_component.rb
frontend/components/admin/notice/admin_notice.css
frontend/components/admin/notice/admin_notice.js

18

openxyz commented 6 years ago

it is greate with Stimulus integration!