Option to namespace variables in pattern render array

[jesconstantine]

First - I am brand new to this module (and Drupal) but super excited by it's potential, so thanks so much!

Currently all ui_pattern fields are added to the $element render array as top level variables. (see snippet below from Element\Pattern processFields(): https://github.com/nuvoleweb/ui_patterns/blob/8.x-1.x/src/Element/Pattern.php#L92)

foreach ($fields as $name => $field) {
    $key = '#' . $name;
    $element[$key] = $field;
}

I was wondering if there was the option to namespace those variables (i.e. nest them in a component level parent array)?

For example, in our design system (we use Pattern Lab), we namespace all of our variables with the component name: i.e. the title variable in the pageBanner component is written as {{ pageBanner.title }} in the @organisms/page-banner.twig template.

And in Drupal, a node's render array $variables[] keys map to organism component data structures (for the most part) like pageBanner, which each contain their actual variables (fields) or child components (molecules, atoms, etc.), like:

$variables['pageBanner'] => [
  'title' => 'my title',
  'titleSubText' => 'my sub title',
];

$variables['anotherOrganism'] => [
  'aGivenMolecule' => [
     'key' => value,
  ...

Also, as you can see from my example we use camelCase in our design system variable names, wonder if there is a reason why that isn't supported? (I'm guessing it has to do with Drupal coding standards but this seems like an interesting use case where we are likely pulling in non-Drupal variable names). Would you consider supporting camelCase variables in the future?

[ademarco]

Hi @jesconstantine! Name-spacing variables could be useful indeed, I'll give it a try.

About came case, it should already be supported as per https://github.com/nuvoleweb/ui_patterns/blob/8.x-1.x/src/TypedData/PatternDataDefinition.php#L19

[ademarco]

We could add a new option called fields_container: where you could specify the field container name, in your case it would be something like this:

pageBanner:
  label: Page Banner
  fields_container: pageBanner
  fields:
    title:
      label: Title
    titleSubText:
      label: Title Sub Text

If fields_container is there then fields will be nested under that element.

Note that by using standard alter hooks you could easily add it to all your pattern definitions:

function YOUR_MODULE_ui_patterns_info_alter(&$definitions) {
  foreach ($definitions as $key => $definition) {
    $definitions[$key]->setFieldContainer($definition->id());
  }
}

Would that work?