raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-28 01:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generate a better stimulus name for component controller

Browse Source 
Using the helper `definitionsFromContext` generate quite long name for
stimulus controller in component, ie :
`tag-list-input-component--tag-list-input`.
This custom loader will generate much more readable name, ie L
`tag-list-input`. It's expecting the following pattern :
ofn_component/ofn_controller.js and will fall back to the default
of replacing "_" by "- and "/" by "--" for controller not matching
the pattern.
This commit is contained in:
Gaetan Craig-Riou
2025-09-10 15:03:31 +10:00
parent da66a2947c
commit ad1ce00223
2 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/example_component/example_controller.js
View File

@@ -1,4 +1,5 @@
// This controller will be called "example-component--example", ie "component-subdirectory--js-file-name"
// This controller will be called "example", ie "js-file-name" minus the "_controller.js"
// see controller/index.js for more info
import { Controller } from "stimulus";
export default class extends Controller {}

31
app/webpacker/controllers/index.js
View File

@@ -6,14 +6,37 @@ import StimulusReflex from "stimulus_reflex";
import consumer from "../channels/consumer";
import controller from "../controllers/application_controller";
import CableReady from "cable_ready";
import RailsNestedForm from '@stimulus-components/rails-nested-form/dist/stimulus-rails-nested-form.umd.js' // the default module entry point is broken
import RailsNestedForm from "@stimulus-components/rails-nested-form/dist/stimulus-rails-nested-form.umd.js"; // the default module entry point is broken
const application = Application.start();
const context = require.context("controllers", true, /_controller\.js$/);
const contextComponents = require.context("../../components", true, /_controller\.js$/);
application.load(definitionsFromContext(context));
application.load(definitionsFromContext(context).concat(definitionsFromContext(contextComponents)));
application.register('nested-form', RailsNestedForm);
// Load component controller, but generate a shorter controller name than "definitionsFromContext" would
// - for controller in a component subdirectory, get rid of the component folder and use
// the controller name, ie:
// ./tag_rule_group_form_component/tag_rule_group_form_controller.js -> tag-rule-group-form
// - for controller that don't match the pattern above, replace "_" by "-" and "/" by "--", ie:
// ./vertical_ellipsis_menu/component_controller.js -> vertical-ellipsis-menu--component
//
const contextComponents = require.context("../../components", true, /_controller\.js$/);
contextComponents.keys().forEach((path) => {
const module = contextComponents(path);
// Check whether a module has the default export defined
if (!module.default) return;
const identifier = path
.replace(/^\.\//, "")
.replace(/^\w+_component\//, "")
.replace(/_controller\.js$/, "")
.replace(/\//g, "--")
.replace(/_/g, "-");
application.register(identifier, module.default);
});
application.register("nested-form", RailsNestedForm);
application.consumer = consumer;
StimulusReflex.initialize(application, { controller, isolate: true });