Giter Club home page Giter Club logo

bun-stimulus-plugin's People

Contributors

github-actions[bot] avatar yummyume avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

bun-stimulus-plugin's Issues

[FEATURE] Ability to register stimulus controllers using containing folder as identifier

Feature description

I was installing ViewComponent into my Rails application and found your plugin very helpful.

A popular implementation of ViewComponent is this package:
https://github.com/palkan/view_component-contrib

Part of the implementation is to use sidecar files within a folder. As a result the stimulus controllers are called controller.js instead of foobar_controller.js

I propose adding a boolean option to use-directory-as-identifier when registering the stimulus controller instead of the filename.

I hardcoded this into my application, and it works for my purpose, and might be helpful to others if adapted into this plugin as an option.

edit: not fully working code below

 // Parse all the controllers in the given path and handle nested controllers
            const parseControllers = (controllersPath: string, prefix: string = '') => {
                const controllersFromPath = getControllersFromPath(controllersPath);

                for (const controller of controllersFromPath) {
                    const controllerPath = join(controllersPath, controller);
                    const controllerStats = statSync(controllerPath);

                    // Name of the controller without the suffix and with directory separators
                    const controllerName = `${prefix}${controller.replace(options.controllerSuffix, '')}`;

                    if (controllerStats.isDirectory()) {
                        // Recursively parse the controllers
                        parseControllers(controllerPath, `${controllerName}${options.directorySeparator}`);
                    } else {
                        // Controller name should be unique, so we'll add a number to the end of it
                        const uniqueControllerName = `${parseControllerName(controllerName)}${(i += 1)}`;

                        // Import the controller
                        contents += `import ${uniqueControllerName} from '${join(
                            args.path,
                            ...prefix.split(options.directorySeparator),
                            controller,
                        )}';`;

                        // Convert path into a controller identifier:
                        //   example/index.js -> example
                        //   nav/user_info/index.js -> nav--user-info
                        const identifier = dirname(controllerPath)
                            .replace(args.path, '')
                            .replace(new RegExp(`^${sep}`), '') // remove leading directory separator
                            .split(sep)
                            .join(options.directorySeparator)
                            .replace(/^-|-$/g, ''); // remove leading and trailing separators

                        definitions.push({
                            identifier,
                            name: uniqueControllerName,
                        });
                    }
                }
            };
            ```



### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.