Contrib.social

Naming convention based component imports

Open on Drupal.org →
Created on 20 March 2024, 6 months ago

Problem/Motivation

Currently associating a JSX component with a custom element in markup is a manual process - as seen in
https://git.drupalcode.org/project/jsx/-/blob/1.0.x/demo/themes/umami_jsx/app/src/components.js

While it should remain possible to continue doing it the way it currently works (if only to keep the ability to have one component handle multiple templates.), it would be nice to provide the ability to also do this automatically based on file & component name.

Currently each component used in the process needs to be explicitly imported, for example:
import MyButton from './components/form/MyButton/MyButton';

Then the imported component must be matched with the custom element name in the components object

const components = {
  'my-button': MyButton,
 // etc...
};

export default Components.

It seems like we could do a camel-to-kebab name check using fs to check for matches and then use import as a function (which allows importing based on a variable value) for those use cases

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Active

Version

1.0

Component

JSX Theme Engine

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @bnjmnm
  • Comment 6 months ago →
    🇺🇸United States bnjmnm Ann Arbor, MI
  • Comment 6 months ago →
    🇺🇸United States effulgentsia

    Umami JSX predates some of the exploration we did in https://github.com/drupal-jsx/starter-react. There, we used Vite, so could use Vite's glob function: https://github.com/drupal-jsx/starter-react/blob/main/src/index.js#L5.

    However, there the components are all flat in the src/components directory. Not sure if that's ideal, we might want to prefer Umami's / Olivero's way of organizing templates by category directories.

    Also, lately I've been second guessing the trying to use PascalCase for the component filenames, and I wonder if it would be better to just name the files exactly like the Twig files would be named. So for example, perhaps layout--threecol-section.jsx would be a better name than DrupalLayout--ThreecolSection.jsx? My original reason for wanting PascalCase was to make the JSX components feel more like regular React components and less like a Drupal-quirky thing, except the thing is they're already Drupal-quirky things because the shape of the props comes from Drupal, so perhaps by naming them with Drupal's standard kebab-case, we would actually simplify the mental model by even more clearly distinguishing JSX files that represent Drupal templates from the app's other JSX components?

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024