Source-loader: Fix default exports of type TSAsExpression

[petermikitsh]

Issue: #11994

What I did

Added support for TypeScript as <Type> syntax:

The logic for parsing story sourcecode is fairly surgical. The existing implementation was too strict to permit the TSAsExpression type.

How to test

• Is this testable with Jest or Chromatic screenshots? Unsure
• Does this need a new example in the kitchen sink apps? Unsure. I think this could be demoed in the existing react-ts example. (I have those changes locally & can push them. If this sounds good, let me know.)
• Does this need an update to the documentation? No

If your answer is yes to any of these, please make sure to include it in your PR.

Notes: this is my first PR-- open to any feedback! TIA.

[petermikitsh]

A little more context. So basically, default exports as object expressions vs TsAsExpressions are nearly identical AST's, with slightly different shapes. This changeset helps accommodate both. Sample AST's in here:

ExportDefaultDeclaration: ObjectExpression vs TSAsExpression

{
  type: 'ExportDefaultDeclaration',
  declaration: {
    type: 'ObjectExpression',
    properties: [
      {
        type: 'Property',
        key: {
          type: 'Identifier',
          name: 'component',
          range: [ 131, 140 ],
          loc: {
            start: { line: 5, column: 17 },
            end: { line: 5, column: 26 }
          }
        },
        value: {
          type: 'Identifier',
          name: 'Button',
          range: [ 142, 148 ],
          loc: {
            start: { line: 5, column: 28 },
            end: { line: 5, column: 34 }
          }
        },
        computed: false,
        method: false,
        shorthand: false,
        kind: 'init',
        range: [ 131, 148 ],
        loc: {
          start: { line: 5, column: 17 },
          end: { line: 5, column: 34 }
        }
      },
      {
        type: 'Property',
        key: {
          type: 'Identifier',
          name: 'title',
          range: [ 150, 155 ],
          loc: {
            start: { line: 5, column: 36 },
            end: { line: 5, column: 41 }
          }
        },
        value: {
          type: 'Literal',
          raw: "'Examples / Button'",
          value: 'Examples / Button',
          range: [ 157, 176 ],
          loc: {
            start: { line: 5, column: 43 },
            end: { line: 5, column: 62 }
          }
        },
        computed: false,
        method: false,
        shorthand: false,
        kind: 'init',
        range: [ 150, 176 ],
        loc: {
          start: { line: 5, column: 36 },
          end: { line: 5, column: 62 }
        }
      }
    ],
    range: [ 129, 178 ],
    loc: { start: { line: 5, column: 15 }, end: { line: 5, column: 64 } }
  },
  range: [ 114, 192 ],
  loc: { start: { line: 5, column: 0 }, end: { line: 5, column: 78 } },
  start: 114,
  end: 192
}

{
  type: 'ExportDefaultDeclaration',
  declaration: {
    type: 'TSAsExpression',
    expression: {
      type: 'ObjectExpression',
      properties: [
        {
          type: 'Property',
          key: {
            type: 'Identifier',
            name: 'component',
            range: [ 717, 726 ],
            loc: {
              start: { line: 13, column: 17 },
              end: { line: 13, column: 26 }
            }
          },
          value: {
            type: 'Identifier',
            name: 'Button',
            range: [ 728, 734 ],
            loc: {
              start: { line: 13, column: 28 },
              end: { line: 13, column: 34 }
            }
          },
          computed: false,
          method: false,
          shorthand: false,
          kind: 'init',
          range: [ 717, 734 ],
          loc: {
            start: { line: 13, column: 17 },
            end: { line: 13, column: 34 }
          }
        },
        {
          type: 'Property',
          key: {
            type: 'Identifier',
            name: 'title',
            range: [ 736, 741 ],
            loc: {
              start: { line: 13, column: 36 },
              end: { line: 13, column: 41 }
            }
          },
          value: {
            type: 'Literal',
            raw: "'Examples / Button'",
            value: 'Examples / Button',
            range: [ 743, 762 ],
            loc: {
              start: { line: 13, column: 43 },
              end: { line: 13, column: 62 }
            }
          },
          computed: false,
          method: false,
          shorthand: false,
          kind: 'init',
          range: [ 736, 762 ],
          loc: {
            start: { line: 13, column: 36 },
            end: { line: 13, column: 62 }
          }
        }
      ],
      range: [ 715, 764 ],
      loc: {
        start: { line: 13, column: 15 },
        end: { line: 13, column: 64 }
      }
    },
    typeAnnotation: {
      type: 'TSTypeReference',
      typeName: {
        type: 'Identifier',
        name: 'Meta',
        range: [ 768, 772 ],
        loc: {
          start: { line: 13, column: 68 },
          end: { line: 13, column: 72 }
        }
      },
      typeParameters: undefined,
      range: [ 768, 772 ],
      loc: {
        start: { line: 13, column: 68 },
        end: { line: 13, column: 72 }
      }
    },
    range: [ 715, 772 ],
    loc: { start: { line: 13, column: 15 }, end: { line: 13, column: 72 } }
  },
  range: [ 700, 773 ],
  loc: { start: { line: 13, column: 0 }, end: { line: 13, column: 73 } },
  start: 700,
  end: 773
}

A visual summary of the shape differences between the ASTs:

{	
  type: 'ExportDefaultDeclaration',	
  declaration: {	
-   type: 'ObjectExpression',
+   type: 'TSAsExpression',
-   properties: [ ... ],
+   expression: {
+     type: 'ObjectExpression',
+     properties: [ ... ],
+   }
  }
}

[shilman]

LGTM! Any chance we can get a test case to go along with this?

[petermikitsh]

@shilman I have updated the react-ts examples project