>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3480224. --> Reported by: [bnjmnm](https://www.drupal.org/user/2369194) >>> <h3 id="overview">Overview</h3> <p>Currently we have to map the template name to the component import in <a href="https://git.drupalcode.org/project/experience_builder/-/blob/0.x/ui/src/components/form/twig-to-jsx-component-map.js?ref_type=heads">twig-to-js-component-map.js</a></p> <pre>const twigToJSXComponentMap = {<br>&nbsp; 'drupal-input': Input,<br>&nbsp; 'drupal-textarea': Textarea,<br>&nbsp; 'drupal-form': Form,<br>&nbsp; 'drupal-form-element': FormElement,<br>&nbsp; 'drupal-form-element-label': FormElementLabel,<br>&nbsp; 'drupal-input--url': UrlInput,<br>&nbsp; 'drupal-select': Select,<br>&nbsp; 'drupal-input--checkbox--inwidget-boolean-checkbox': Toggle,<br>};</pre><p>I suspect it is possible to do this based on filename by leveraging the fact that javascript <code>import</code> can be used with dynamic values when used as a function. </p> <p>This would eliminate a tedious step and make it easier for contrib to use the system.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <h3 id="ui-changes">User interface changes</h3> > Related issue: [Issue #3478287](https://www.drupal.org/node/3478287)