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:
- Look through all
components/
files - Search for use of the
Styled
mixin (eg. by looking forComponent.extend(Styled, {})
) - Extract the component names (e.g.
"ui-title"
) - 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!