Import React components using Emacs and import-js2.2.0

Tweet

Abstract

Hello everybody it’s me candle.
In this time we will import the component path with emacs and import-js.
React recommends to write one component in one file, when development becomes to be big, the number of component increase.

If you use 10 components with one Container, you need to write 10 import statements.
import-js helps us from such troublesome work.

Precondition

Already exist React web environment
I recommend you use the react project created by create-react-app command which I wrote the before article.
You use melpa or el-get

About import-js

The system which emacs uses import-js is like this.
In the same way as eslint, emacs uses impot-js by access the external API.

import-js will automatically get the information about the structure of the project and the location of the component and insert import statements into the file.
Well, import-js has changed quite a bit since 2.1.0.

We use the importjsd daemon to connect with the process of the current editor. importjsd checks the module under the current directory, save the path etc in the database of sqlite3 in cachepath, and pass the value to the editor.

The emacs import-js plugin does not yet support this importjsd (April 11, 2017).
Therefore, we get the source code from the github repository which is developed by a volunteer programmer and use it.

install import-js

First install javascript import-js.
You can install import-js with npm.

npm install -g import-js

After installation you confirm that you can use the command.

importjs

This import-js version is 2.2.0 .
It is ready to go.

Install import-js plugin of Emacs.

Install import-js plugin to use import-js of node from emacs.

In the case of mepla

There is no import-js plugin for emacs supporting node import-js 2.2.0 yet.
It is not merged to the master branch when April 14, 2017, you can not install from melpa package.
So, once installing the old version with mepla and download the latest version by yourself.

Display the emacs packages with “M-x package-list-packages”.
Next search import-js with “C-s import-js”.

Move the cursor to impor-js, type “i”, then type “x” to install.
You are asked whether you want to install it, you can install it by typing “y”.

And download the .el file supporting import-js 2.2.0.

Go to the melpa directory.
The directory name of import-js changes according to the time.

cd ~/.emacs.d/elpa/import-js-20161220.508

Remove the import-js.el and import-js.elc.

rm import-js.el import-js.elc

We pull the file from github.

curl -O https://raw.githubusercontent.com/kevinkehl/emacs-import-js/importjsd/plugin/import-js.el

At last write the below code in .emacs.d/init.el

(require 'import-js)

melpa installation is over.

eInstall with el-get

The majar version import-js plugin of emacs doesn’t support node import-js2.2.0 yet.
We install import-js plugin with a little tricky way.

Open the .emacs.d/init.el and write the below code.

(el-get-bundle import-js
  :type github
  :name import-js
  :pkgname "kevinkehl/emacs-import-js"
  :branch "importjsd"
  :load "plugin/import-js.el"
  :depends (grizzl ))

With this command reload the init.el file and install the import-js plugin.

M-x eval-buffer

el-get installation is over.

Setting up import-js for emacs

The setting of import-js is divided into three.

1, import-js-import shortcut key
2, auto launching configuration of iimportjsd demon
3, Automatically stop the daemon when Emacs is quit with C-x C-c

1 and 2 configuration.

When impor-js-import is executed, the path of the module is automatically inserted into the file.
The allocation of “C-c i” has no reason. I used it because it was not allocated.

As I wrote it at the above, we need to launch the importjsd to use import-js.

Of course, you can start it manually with “M-x run-import-js”, but since it is troublesome, it will automatically start up.

For js2-jsx-mode

(add-hook 'js2-jsx-mode-hook
          (lambda ()
            (local-set-key (kbd "C-c i") 'import-js-import)
            (run-import-js)))

For rjsx-mode

(add-hook 'rjsx-mode-hook
          (lambda ()
            (local-set-key (kbd "C-c i") 'import-js-import)
            (run-import-js)))

In this setting you caught the message that you will kill the importjsd demon in each you quit the emacs.

Since it seems to be troublesome, we will set up it to be killed automatically.

(require 'cl-lib)
(defadvice save-buffers-kill-emacs (around no-query-kill-emacs activate)
  "Prevent annoying "Active processes exist" query when you quit Emacs."
  (cl-letf (((symbol-function #'process-list) (lambda ())))
    ad-do-it))

This is the all code.

Put the .importjs.js file into a react project

The importjs command will do such a thing with reference to .importjs.js in the root of the react project.
Ok I prepared the react project that has such structure in this time.

├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── components
│ └── Input.js
├── index.css
├── index.js
└── logo.svg

Create the .importjs.js

touch .importjs.js

I don’t know about the setting of imporjs, so refer to the file on the github.
https://github.com/Galooshi/import-js/blob/master/.importjs.js

Write this.

module.exports = {
  environments: ['node'],
  ignorePackagePrefixes: ['lodash.'],
  declarationKeyword: 'import',
  logLevel: 'debug',
  excludes: [ './build/**' ]
}

Save it.

We use it

From this part, react development environment is different between each engineer. but I try to do at the above environment.

The code of src/App.js like this.

import React from 'react';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      txt: 'hello world'
    }
  }

  update(e){
    this.setState({
      txt: e.target.value
    })
  }

  render(){
    return(
      <div>
        <p>Text: {this.state.txt}</p>
        <Input onChange={this.update.bind(this)}/>
      </div>
    )
  }
}

export default App;

We try to insert the “Input component” from components/Input.js automatically.
Move the cursor on the <Input> jsx and execute “C-c i” or “M-x import-js-import”.

The first time importjsd does not recognize the module under the project, so nothing will come out.
Run “C-c i” or “M-x import-js-import” again.
Then, I think that the component will be inserted automatically.

It works good.

Conclusion

I tried and error pretty much before I let it auto insert.
Good react development on Emacs