fix manual componentname concatenation

[AndyOGo]

fixes #95

[AndyOGo]

@davidtheclark Did you have any time to look into this?

[davidtheclark]

@AndyOGo: Yeah, within the next few days I will try to get to this.

[AndyOGo]

@davidtheclark Cool, thank you :)

[davidtheclark]

Thanks for adding the tests. Turning over to @simonsmith.

[AndyOGo]

@davidtheclark @simonsmith

I just realized I misunderstood how the {componentName} interpolation works, as described here:

A single string that provides a valid pattern for the RegExp() constructor when {componentName} is interpolated with the defined component's name, e.g.

I thought it will interpolate the RegEx definition given for componentName, but it does interpolate the value resolved from the RegEx match. Which obviously can't work.

Despite of my misunderstanding the above is still a bug.

May I suggest an API change, so that not the RegEx match is interpolated, instead the regEx definition?

To clarify:

// config
var config = {
  componentName: '[a-z0-9]+(?:-[a-z0-9]+)*',
  componentSelectors: {
    initial: '^\\.{componentName}(?:__{componentName})*(?:--{componentName})*$',
    combined: '^\\.{componentName}(?:__{componentName})*(?:--{componentName})?|\\.(?:is|has)-{componentName}$',
  },
}

// suppose current block is `block-name` define by
/** @define block-name */

// Will produce the following `componentSelectors`
var componentSelectors = {
  initial: '^\\.block-name(?:__block-name)*(?:--block-name)*$',
  combined: '^\\.block-name(?:__block-name)*(?:--block-name)?|\\.(?:is|has)-block-name$',
};

// Should produce the following `componentSelectors` by introducing `{componentRegex}`interpolation
// config
var config = {
  componentName: '[a-z0-9]+(?:-[a-z0-9]+)*',
  componentSelectors: {
    initial: '^\\.{componentName}(?:__{componentRegex})*(?:--{componentRegex})*$',
    combined: '^\\.{componentName}(?:__{componentRegex})*(?:--{componentRegex})?|\\.(?:is|has)-{componentRegex}$',
  },
}

var componentSelectors = {
  initial: '^\\.block-name(?:__[a-z0-9]+(?:-[a-z0-9]+)*)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)*$',
  combined: '^\\.block-name(?:__[a-z0-9]+(?:-[a-z0-9]+)*)*(?:--[a-z0-9]+(?:-[a-z0-9]+)*)?|\\.(?:is|has)-[a-z0-9]+(?:-[a-z0-9]+)*$',
};

[davidtheclark]

@AndyOGo Please file a separate issue for your {componentRegex} interpolation proposal — which seems like a fine idea to me.

[AndyOGo]

@davidtheclark Thanks for your reply. I will close this and file a separate one.