Angular 1 component helper for rendering components directly

Avatar.js

/**
* A sample Angular 1 component, created using the component helper above.
* Uses Aphrodite for CSS
*/

import component from './component';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  avatar: {
    background: 'blue' 
  }
});

const template = `
  <div class="${css(styles.avatar)}">avatar yo</div>
`;

export default class Avatar {
 constructor(){}
}

// register this as an Angular component
// __filename variable becomes the full path to this component, which makes for a perfect unique component name
component({controller: Avatar, template: template, bindings: {}}, __filename);

component.js

export default function controller(obj, filename){
  const nameParts = filename 
    .replace('-', '')
    .replace('.js', '')
    .toLowerCase()
    .split('/');
  
  const tagName = nameParts.reduce((prev, next) => `${prev}-${next}`);

  const componentName = nameParts.reduce((prev, next) => {
    return prev + next.charAt(0).toUpperCase() + next.slice(1);
  });

  obj.controller.toString = () => tagName;

  angular.module('app').component(componentName, obj);
}

Feature.js

/**
* Showing how to use the component directly
*/

import Avatar from './Avatar';

const template = `
  <${Avatar}/>
`;