diff --git a/README.md b/README.md index 0d1de14e..ad13338a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ # ember-es6-class-codemod - A collection of codemod's for ember-es6-class-codemod. ## Usage @@ -18,21 +17,99 @@ ember-es6-class-codemod path/of/files/ or/some**/*glob.js ## Transforms - - +The transforms are tiered starting with simple ember objects to the complex ones including decorators and/or mixins etc. The codemods can be run targeting only specific types. For example it is possible to run the codemods targeting only `services` or `routes` in the app code. + +The codemods are grouped as following + +1. Simple objects (codemod: `simple-objects`) +2. Services (codemod: `services`) +3. Class helpers (codemod: `class-helpers`) +4. Routes (codemod: `routes`) +5. Components (codemod: `components`) +6. Controllers (codemod: `controllers`) +7. Routers (codemod: `routers`) + +At each level, the codemods handles the transforms for all previous levels and add some new transforms specific to that level. For example, codemods for `routes` will handle transforms for `services` and `simple object` and add new support for transforming `actions`. This can be illustrated with picture below: + +![Transform tiers](./docs/images/tiers.png) + +### Simple ember objects + +| Before | After | +| --------------------------------------------- | ----------------------------------------- | +| const SimpleObject = EmberObject.extend({}); | class SimpleObject extends EmberObject {} | +| const simpleObj = SimpleObject.create(); | const simpleObj = new SimpleObject(); | +| property: value, | property = value; | +| method() { this.\_super(...arguments); } | method() { super.method(...arguments); } | +| cp: computed('p1', 'p2', function () { ... }) | @computed('p1', 'p2')
cp() { ... } | +| ob: observer('p1', 'p2', function () { ... }) | @observes('p1', 'p2')
ob() { ... } | +| ev: on('click', function() { ... }) | @on('click')
ev() { ... } | + +For detailed examples please see `test-fixtures` in `simple-object` transform + +### Services + +In addition to simple object transforms, `service-transform` will do following: + +| Before | After | +| ------------------------------------- | ---------------------------------- | +| const MyService = Service.extend({}); | class MyService extends Service {} | + +### Class helpers (Haven't seen any example of this) + +| Before | After | +| ------ | ----- | + + +### Routes + +In addition to above mentioned transforms `route-transform` will do following + +| Before | After | +| --------------------------------- | ------------------------------- | +| const MyRoute = Route.extend({}); | class MyRoute extends Route {} | +| actions: { someAction() { ... }} | @action
someAction() { ... } | + +### Components + +In addition to above mentioned transforms `controller-transform` will do following + +| Before | After | +| -------------------------------------------------------------------------- | -------------------------------------------------------- | +| const MyComponent = Component.extend({}); | class MyComponent extends Component {} | +| const C = Component.extend({ tagName: 'div' }); | @tagName('div)
class C extends Component {} | +| const C = Component.extend({ classNames: ['a', 'b'] }); | @classNames('a', 'b')
class C extends Component {} | +| classNameBindings: ['isEnabled:enabled:disabled'],
isEnabled: false | @className('enabled', 'disabled')
isEnabled = false; | +| attributeBindings: ['customHref:href']
customHref: 'http://emberjs.com' | @attribute('href')
customHref = 'http://emberjs.com'; | + +### Controllers + +| Before | After | +| ------------------------------------------- | --------------------------------------- | +| const MyController = Controller.extend({}); | class MyController extends Controller{} | + +Controller transformation would be covered in the above mentioned transforms + +### Routers + +| Before | After | +| ----------------------------------- | ------------------------------- | +| const MyRouter = Router.extend({}); | class MyRouter extends Router{} | + +Router transformation would be covered in the above mentioned transforms ## Contributing ### Installation -* clone the repo -* change into the repo directory -* `yarn` +- clone the repo +- change into the repo directory +- `yarn` ### Running tests -* `yarn test` +- `yarn test` ### Update Documentation -* `yarn update-docs` \ No newline at end of file +- `yarn update-docs` diff --git a/docs/images/tiers.png b/docs/images/tiers.png new file mode 100644 index 00000000..7133cb52 Binary files /dev/null and b/docs/images/tiers.png differ