komposable / komponent

An opinionated way of organizing front-end code in Ruby on Rails, based on components

Home Page:http://komponent.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Stimulus integration

florentferry opened this issue · comments

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

commented

it is greate with Stimulus integration!