Brainstorm: What API would make it easy to statically analyze my components?

@samselikoff wrote:

I’m using a mixin from an in-repo addon called ember-cli-ui-components in my app. It’s used like this

import Component from '@ember/component';
import { Styled, group } from 'ember-cli-ui-components';

export default Component.extend(Styled, {

  styles: {
    base: 'leading-tight',

    defaultStyle: 'regular margined',

    sizes: group({
      headline: {
        tagName: 'h1',
        style: 'text-2 sm:text-1 font-semibold mt-3'
      },
      regular: {
        tagName: 'h2',
        style: 'text-3 font-semibold'
      },
      small: {
        tagName: 'h3',
        style: 'text-4 sm:text-3 font-medium'
      },
      xs: {
        tagName: 'h4',
        style: 'text-6 sm:text-4 font-semibold'
      }
    }),

    uppercase: 'uppercase',
    center: 'text-center mx-auto',
    transparent: 'opacity-70',
    underlined: 'border-solid border-b-2',
    skeleton: 'bg-light-gray text-light-gray w-256'
  }

});

and components are invoked like this

{{#ui-title style='headline center'}}

The mixin works at runtime to compute the classNames list for the element, and applies them in the template.

Question

My question is, I want to start playing with some compile-time optimizations for these UI components, and I’m wondering what would be the best way to mark/annotate these components, so that they can be easily identified in node-land.

For example, my first experiment would be:

1. Look through all components/ files
2. Search for use of the Styled mixin (eg. by looking for Component.extend(Styled, {}))
3. Extract the component names (e.g. "ui-title")
4. Do some cool stuff (e.g. make it a build-time component)

So my question is around step 2 of the algorithm. Are there established practices/patterns for APIs that would make it easy to identify these things? Comments, decorators, other annotations? Is it easy to find use of the mixin? Should I use a special/magic property defined on the component?

Would love to hear anyone’s thoughts!

Posts: 1

Participants: 1

Read full topic