https://github.com/lennyburdette/ember-action-codemods

Codemods for converting uses of action to the {{on}} modifier
https://github.com/lennyburdette/ember-action-codemods

Last synced: 4 months ago
JSON representation

Codemods for converting uses of action to the {{on}} modifier

• Host: GitHub
• URL: https://github.com/lennyburdette/ember-action-codemods
• Owner: lennyburdette
• Created: 2019-06-19T19:56:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T21:49:02.000Z (about 2 years ago)
• Last Synced: 2024-08-02T07:22:33.269Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.12 MB
• Stars: 5
• Watchers: 1
• Forks: 3
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-codemods - ember-action-codemods - Codemods for converting uses of action to the {{on}} modifier. (Frameworks / Ember.js)

README

        
# Ember Action Codemods

## Usage

### Step 1: Install dependencies

```sh

yarn add ember-event-helpers

# if you're on ember-source 3.9 or below

yarn add ember-on-modifier ember-fn-helper-polyfill

```

### Step 2: Convert `{{action}}` modifiers to `{{on}}` modifiers

This is the safest of the codemods.

```sh

npx ember-template-recast app/ -t \

  https://raw.githubusercontent.com/lennyburdette/ember-action-codemods/master/src/action-modifiers.js

```

### Step 3: Convert `onclick={{action foo}}` to `{{on "click" foo}}`

Switching from event properties to Ember modifiers can have subtle behavior

changes regarding event ordering!

See https://developer.squareup.com/blog/deep-dive-on-ember-events/

for a comprehensive rundown.

```sh

npx ember-template-recast app/ -t \

  https://raw.githubusercontent.com/lennyburdette/ember-action-codemods/master/src/event-properties.js

```

### Step 4: Convert `action` hashes in JavaScript to decorated properties:

Requires Ember.js 3.10 and above. This will no-op if your action names

conflict with existing ember component functions.

If you're converting to native classes, this is unnecessary (you're already

using the `@action` decorator).

```sh

npx jscodeshift app/ -t \

  https://raw.githubusercontent.com/lennyburdette/ember-action-codemods/master/src/action-decorators.js

```

### Step 5: Convert string actions to properties

If you're not using the `actions` hash in components and controllers, this is

safe to do.

```sh

npx ember-template-recast app/ -t \

  https://raw.githubusercontent.com/lennyburdette/ember-action-codemods/master/src/string-actions.js

```

## What does it do?

Check out the tests!

* [action-modifiers.js](src/__tests__/action-modifiers.js)

  `` → ``

* [event-properties.js](src/__tests__/event-properties.js)

  `` → ``

* [action-decorators.js](src/__testfixtures__/action-decorators/)

  ```js

  actions: {

    foo() {}

  }

  ```

  →

  ```js

  foo: action(function() {})

  ```

* [string-actions.js](src/__tests__/string-actions.js)

  `` → ``

## TODO:

* Remove uses of the `(action)` helper once there's a canonical way to handle `value=`, `target=`, and `allowedKeys=`.