Merge pull request #14230 from dexster/#14079_Angular_selectors

Angular: Allow usage of all component valid selectors

app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.test.ts

@@ -29,6 +29,102 @@ describe('angular source decorator', () => {
     });
   });
 
+  describe('with component with attribute selector', () => {
+    @Component({
+      selector: 'doc-button[foo]',
+      template: '<button></button>',
+    })
+    class WithAttributeComponent {}
+
+    it('should add attribute to template', async () => {
+      const component = WithAttributeComponent;
+      const props = {};
+      const argTypes: ArgTypes = {};
+      const source = computesTemplateSourceFromComponent(component, props, argTypes);
+      expect(source).toEqual(`<doc-button foo></doc-button>`);
+    });
+  });
+
+  describe('with component with attribute and value selector', () => {
+    @Component({
+      selector: 'doc-button[foo=bar]',
+      template: '<button></button>',
+    })
+    class WithAttributeValueComponent {}
+
+    it('should add attribute to template', async () => {
+      const component = WithAttributeValueComponent;
+      const props = {};
+      const argTypes: ArgTypes = {};
+      const source = computesTemplateSourceFromComponent(component, props, argTypes);
+      expect(source).toEqual(`<doc-button foo="bar"></doc-button>`);
+    });
+  });
+
+  describe('with component with attribute only selector', () => {
+    @Component({
+      selector: '[foo]',
+      template: '<button></button>',
+    })
+    class WithAttributeOnlyComponent {}
+
+    it('should create a div and add attribute to template', async () => {
+      const component = WithAttributeOnlyComponent;
+      const props = {};
+      const argTypes: ArgTypes = {};
+      const source = computesTemplateSourceFromComponent(component, props, argTypes);
+      expect(source).toEqual(`<div foo></div>`);
+    });
+  });
+
+  describe('with component with class selector', () => {
+    @Component({
+      selector: 'doc-button.foo',
+      template: '<button></button>',
+    })
+    class WithClassComponent {}
+
+    it('should add class to template', async () => {
+      const component = WithClassComponent;
+      const props = {};
+      const argTypes: ArgTypes = {};
+      const source = computesTemplateSourceFromComponent(component, props, argTypes);
+      expect(source).toEqual(`<doc-button class="foo"></doc-button>`);
+    });
+  });
+
+  describe('with component with class only selector', () => {
+    @Component({
+      selector: '.foo',
+      template: '<button></button>',
+    })
+    class WithClassComponent {}
+
+    it('should create a div and add attribute to template', async () => {
+      const component = WithClassComponent;
+      const props = {};
+      const argTypes: ArgTypes = {};
+      const source = computesTemplateSourceFromComponent(component, props, argTypes);
+      expect(source).toEqual(`<div class="foo"></div>`);
+    });
+  });
+
+  describe('with component with multiple selectors', () => {
+    @Component({
+      selector: 'doc-button, doc-button2',
+      template: '<button></button>',
+    })
+    class WithMultipleSelectorsComponent {}
+
+    it('should use the first selector', async () => {
+      const component = WithMultipleSelectorsComponent;
+      const props = {};
+      const argTypes: ArgTypes = {};
+      const source = computesTemplateSourceFromComponent(component, props, argTypes);
+      expect(source).toEqual(`<doc-button></doc-button>`);
+    });
+  });
+
   describe('no argTypes', () => {
     it('should generate tag-only template with no props', () => {
       const component = InputComponent;

app/angular/src/client/preview/angular-beta/ComputesTemplateFromComponent.ts

@@ -56,7 +56,8 @@ export const computesTemplateFromComponent = (
       ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
       : '';
 
-  return `<${ngComponentMetadata.selector}${templateInputs}${templateOutputs}>${innerTemplate}</${ngComponentMetadata.selector}>`;
+  const template = buildTemplate(ngComponentMetadata.selector);
+  return `<${template.openTag}${templateInputs}${templateOutputs}>${innerTemplate}</${template.closeTag}>`;
 };
 
 const createAngularInputProperty = ({
@@ -127,5 +128,55 @@ export const computesTemplateSourceFromComponent = (
       ? ` ${initialOutputs.map((i) => `(${i})="${i}($event)"`).join(' ')}`
       : '';
 
-  return `<${ngComponentMetadata.selector}${templateInputs}${templateOutputs}></${ngComponentMetadata.selector}>`;
+  const template = buildTemplate(ngComponentMetadata.selector);
+  return `<${template.openTag}${templateInputs}${templateOutputs}></${template.closeTag}>`;
+};
+
+const buildTemplate = (
+  selector: string
+): {
+  openTag?: string;
+  closeTag?: string;
+} => {
+  const templates = [
+    {
+      // Match element selectors with optional chained attributes or classes
+      re: /^([\w\d-_]+)(?:(?:\[([\w\d-_]+)(?:=(.+))?\])|\.([\w\d-_]+))?/,
+      openTag: (matched: string[]) => {
+        let template = matched[1];
+        if (matched[2]) {
+          template += ` ${matched[2]}`;
+        }
+        if (matched[3]) {
+          template += `="${matched[3]}"`;
+        }
+        if (matched[4]) {
+          template += ` class="${matched[4]}"`;
+        }
+        return template;
+      },
+      closeTag: (matched: string[]) => `${matched[1]}`,
+    },
+    {
+      re: /^\.(.+)/,
+      openTag: (matched: string[]) => `div class="${matched[1]}"`,
+      closeTag: (matched: string[]) => `div`,
+    },
+    {
+      re: /^\[([\w\d-_]+)(?:=(.+))?\]/,
+      openTag: (matched: string[]) => `div ${matched[1]} ${matched[2] ? `="${matched[2]}"` : ''}`,
+      closeTag: (matched: string[]) => `div`,
+    },
+  ];
+
+  return templates.reduce((acc, template) => {
+    const matched = selector.match(template.re);
+    if (matched) {
+      return {
+        openTag: template.openTag(matched).trim(),
+        closeTag: template.closeTag(matched),
+      };
+    }
+    return acc;
+  }, {});
 };

examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Basics / Component / With Complex Selectors Input Selectors 1`] = `
+<storybook-wrapper>
+  <foo>
+    foo
+  </foo>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = `
+<storybook-wrapper>
+  <storybook-attribute-selector
+    foo="bar"
+  >
+    <h3>
+      Attribute selector
+    </h3>
+     Selector: "storybook-attribute-selector[foo=bar]" 
+    <br />
+     Generated template: "&lt;storybook-attribute-selector foo="bar"&gt;&lt;/storybook-attribute-selector&gt;" 
+  </storybook-attribute-selector>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Basics / Component / With Complex Selectors class selectors 1`] = `
+<storybook-wrapper>
+  <storybook-attribute-value-selector
+    class="foo"
+  >
+    <h3>
+      Class selector
+    </h3>
+     Selector: "storybook-class-selector.foo" 
+    <br />
+     Generated template: "&lt;storybook-class-selector class="bar"&gt;&lt;/storybook-class-selector&gt;" 
+  </storybook-attribute-value-selector>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Basics / Component / With Complex Selectors multiple selectors 1`] = `
+<storybook-wrapper>
+  <storybook-multiple-selector>
+    <h3>
+      Multiple selector
+    </h3>
+     Selector: "storybook-multiple-selector, storybook-multiple-selector2" 
+    <br />
+     Generated template: "&lt;storybook-multiple-selector&gt;&lt;/storybook-multiple-selector&gt;" 
+  </storybook-multiple-selector>
+</storybook-wrapper>
+`;

examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-attribute-selector[foo=bar]',
+  template: `<h3>Attribute selector</h3>
+    Selector: "storybook-attribute-selector[foo=bar]" <br />
+    Generated template: "&lt;storybook-attribute-selector
+    foo="bar">&lt;/storybook-attribute-selector>" `,
+})
+export class AttributeSelectorComponent {}

examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-attribute-value-selector.foo',
+  template: `<h3>Class selector</h3>
+    Selector: "storybook-class-selector.foo" <br />
+    Generated template: "&lt;storybook-class-selector class="bar">&lt;/storybook-class-selector>" `,
+})
+export class ClassSelectorComponent {}

examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts

@@ -0,0 +1,28 @@
+import { MultipleSelectorComponent } from './multiple-selector.component';
+import { AttributeSelectorComponent } from './attribute-selector.component';
+import { ClassSelectorComponent } from './class-selector.component';
+
+export default {
+  title: 'Basics / Component / With Complex Selectors',
+};
+
+export const MultipleSelectors = () => ({});
+
+MultipleSelectors.storyName = 'multiple selectors';
+MultipleSelectors.parameters = {
+  component: MultipleSelectorComponent,
+};
+
+export const AttributeSelectors = () => ({});
+
+AttributeSelectors.storyName = 'attribute selectors';
+AttributeSelectors.parameters = {
+  component: AttributeSelectorComponent,
+};
+
+export const ClassSelectors = () => ({});
+
+ClassSelectors.storyName = 'class selectors';
+ClassSelectors.parameters = {
+  component: ClassSelectorComponent,
+};

examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-multiple-selector, storybook-multiple-selector2',
+  template: `<h3>Multiple selector</h3>
+    Selector: "storybook-multiple-selector, storybook-multiple-selector2" <br />
+    Generated template: "&lt;storybook-multiple-selector>&lt;/storybook-multiple-selector>" `,
+})
+export class MultipleSelectorComponent {}