Move "import-js" to own layer for js based layers

Refactor import-js to its own layer import-js so it can be optional
used for the tree layers Javascript, React and Typescript layers.

CHANGELOG.develop

@@ -334,6 +334,7 @@ Benner and Paweł Siudak):
 - dap (thanks to Ivan Yonchovski)
 - debug (thanks to Hodge Shen, Troy Hinckley, and Sylvain Benner)
 - emberjs (thanks to Robert O'Connor)
+- import-js (thanks to Thanh Vuong and Seong Yong-ju)
 - lsp (thanks to Fangrui Song, 0bl.blwl, Cormac Cannon, Juuso Valkeejärvi, Guan
   Xipeng, Ivan Yonchovski, Justin Martin, dscole and Sylvain Benner)
 - node (thanks to jupl)

layers/+frameworks/react/README.org

@@ -32,6 +32,8 @@ file.
 
 React layer uses the same backend defined in javascript layer. Options are =tern= and =lsp=.
 
+React layer also uses the same import backend defined in javascript layer.
+
 To use the on-the-fly syntax checking, install =eslint= with babel and react
 support:
 

layers/+frameworks/react/packages.el

@@ -44,9 +44,9 @@
       (flycheck-add-mode checker 'rjsx-mode)))
   (spacemacs/enable-flycheck 'rjsx-mode))
 
-(defun react/post-init-import-js ()
-  (add-hook 'rjsx-mode-hook #'run-import-js)
-  (spacemacs/import-js-set-key-bindings 'rjsx-mode))
+(defun react/pre-init-import-js ()
+(if (eq javascript-import-tool 'import-js)
+    (add-to-list 'spacemacs--import-js-modes (cons 'rjsx-mode 'rjsx-mode-hook))))
 
 (defun react/post-init-js-doc ()
   (add-hook 'rjsx-mode-hook 'spacemacs/js-doc-require)

layers/+lang/javascript/README.org

@@ -8,6 +8,7 @@
 - [[#install][Install]]
   - [[#web-beautify][web-beautify]]
   - [[#prettier][prettier]]
+  - [[#import-js][import-js]]
   - [[#choosing-a-backend][Choosing a backend]]
   - [[#choosing-a-formatter][Choosing a formatter]]
 - [[#backends][Backends]]
@@ -70,6 +71,15 @@ See [[file:../../+tools/web-beautify/README.org][web-beautify layer]] documentat
 ** prettier
 See [[file:../../+tools/prettier/README.org][prettier layer]] documentation.
 
+** import-js
+See [[file:../../+tools/import-js/README.org][import-js layer]] documentation.
+
+To enable it, set the layer variable =javascript-import-tool=:
+
+#+BEGIN_SRC elisp
+  (javascript :variables javascript-import-tool 'import-js)
+#+END_SRC
+
 ** Choosing a backend
 To choose a default backend set the layer variable =javascript-backend=:
 

layers/+lang/javascript/config.el

@@ -18,3 +18,6 @@
 
 (defvar javascript-fmt-tool 'web-beautify
   "The formatter to format a JavaScript file. Possible values are `web-beautify' and `prettier'.")
+
+(defvar javascript-import-tool nil
+  "The import backend to import modules. Possible values are `import-js' and `nil' to disable.")

layers/+lang/javascript/funcs.el

@@ -71,31 +71,6 @@
     (message (concat "Tern was configured as the javascript backend but "
                      "the `tern' layer is not present in your `.spacemacs'!"))))
 
-
-;; import-js
-
-(defun spacemacs/import-js-set-key-bindings (mode)
-  "Setup the key bindings for `import-js' for the given MODE."
-  (spacemacs/declare-prefix-for-mode mode "mi" "import")
-  (spacemacs/set-leader-keys-for-major-mode mode
-    "if" #'spacemacs/import-js-fix
-    "ii" #'spacemacs/import-js-import
-    "gi" #'import-js-goto))
-
-(defun spacemacs/import-js-fix ()
-  (interactive)
-  (require 'import-js)
-  (import-js-fix)
-  (if (bound-and-true-p flycheck-mode)
-      (flycheck-buffer)))
-
-(defun spacemacs/import-js-import ()
-  (interactive)
-  (require 'import-js)
-  (import-js-import)
-  (if (bound-and-true-p flycheck-mode)
-      (flycheck-buffer)))
-
 
 ;; js-doc
 

layers/+lang/javascript/packages.el

@@ -62,14 +62,6 @@
   (spacemacs/set-leader-keys-for-major-mode 'js2-mode
     "I" 'spacemacs/impatient-mode))
 
-(defun javascript/init-import-js ()
-  (use-package import-js
-    :defer t
-    :init
-    (progn
-      (add-hook 'js2-mode-hook #'run-import-js)
-      (spacemacs/import-js-set-key-bindings 'js2-mode))))
-
 (defun javascript/pre-init-org ()
   (spacemacs|use-package-add-hook org
     :post-config (add-to-list 'org-babel-load-languages '(js . t))))
@@ -178,6 +170,10 @@
   (if (eq javascript-fmt-tool 'prettier)
       (add-to-list 'spacemacs--prettier-modes 'js2-mode)))
 
+(defun javascript/pre-init-import-js ()
+  (if (eq javascript-import-tool 'import-js)
+      (add-to-list 'spacemacs--import-js-modes (cons 'js2-mode 'js2-mode-hook))))
+
 (defun javascript/init-skewer-mode ()
   (use-package skewer-mode
     :defer t

layers/+lang/typescript/README.org

@@ -92,7 +92,6 @@ Backend can be chosen on a per project basis using directory local variables
 #+BEGIN_SRC elisp
   ;;; Directory Local Variables
   ;;; For more information see (info "(emacs) Directory Variables")
-
   ((typescript-mode (typescript-backend . lsp)))
 #+END_SRC
 

layers/+lang/typescript/packages.el

@@ -18,6 +18,7 @@
         smartparens
         tide
         typescript-mode
+        import-js
         web-mode
         yasnippet
         ))
@@ -125,5 +126,14 @@
       (when typescript-fmt-on-save
         (add-hook 'typescript-mode-hook 'spacemacs/typescript-fmt-before-save-hook))
       (spacemacs/set-leader-keys-for-major-mode 'typescript-mode
+        "="  'spacemacs/typescript-format
+        "sp" 'spacemacs/typescript-open-region-in-playground)
+      (spacemacs/set-leader-keys-for-major-mode 'typescript-tsx-mode
         "="  'spacemacs/typescript-format
         "sp" 'spacemacs/typescript-open-region-in-playground)))))
+
+(defun typescript/pre-init-import-js ()
+  (if (eq javascript-import-tool 'import-js)
+      (progn
+        (add-to-list 'spacemacs--import-js-modes (cons 'typescript-mode 'typescript-mode-hook))
+        (add-to-list 'spacemacs--import-js-modes (cons 'typescript-tsx-mode 'typescript-tsx-mode-hook)))))

layers/+tools/import-js/README.org

@@ -0,0 +1,45 @@
+#+TITLE: import-js layer
+
+* Table of Contents                     :TOC_4_gh:noexport:
+- [[#description][Description]]
+  - [[#features][Features:]]
+- [[#install][Install]]
+- [[#key-bindings][Key bindings]]
+
+* Description
+This layer adds support for [[https://github.com/Galooshi/import-js][import-js]]
+
+** Features:
+- Import Javascript/Typescript modules to buffer
+- Import missing modules and remove unused one
+- Go to module location
+
+* Install
+To use this configuration layer, add it to your =~/.spacemacs=.
+
+To install =import-js= globally:
+#+BEGIN_SRC sh
+  $ npm install -g import-js
+#+END_SRC
+
+If that doesn't work you can also try installing =import-js= with =--unsafe-perm= tag
+#+BEGIN_SRC sh
+  $ sudo npm install --unsafe-perm -g import-js
+#+END_SRC
+
+To enable it, set the layer variable =javascript-import-tool=, for example for
+the =javascript= layer
+#+BEGIN_SRC elisp
+  (javascript :variables javascript-import-tool 'import-js)
+#+END_SRC
+
+Once you have set this variable other layers =react= and =typescript= will also
+enjoy this feature
+
+* Key bindings
+
+| Key binding | Description                                                         |
+|-------------+---------------------------------------------------------------------|
+| ~SPC m i i~ | Import the module for the variable under the cursor                 |
+| ~SPC m i f~ | Import any missing modules and remove any modules that are not used |
+| ~SPC m i g~ | Go to the module of the variable under cursor                       |

layers/+tools/import-js/config.el

@@ -0,0 +1,15 @@
+;;; config.el --- import-js Layer configuration file for Spacemacs
+;;
+;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
+;;
+;; Author: Thanh Vuong <thanhvg@gmail.com>
+;; URL: https://github.com/syl20bnr/spacemacs
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+;; Variables
+
+(defvar spacemacs--import-js-modes nil
+  "List of mode.")

layers/+tools/import-js/funcs.el

@@ -0,0 +1,22 @@
+;;; funcs.el --- import-js Layer packages file for Spacemacs
+;;
+;; Copyright (c) 2012-2019 Sylvain Benner & Contributors
+;;
+;; Author: Thanh Vuong <thanhvg@gmail.com>
+;; URL: https://github.com/syl20bnr/spacemacs
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+(defun spacemacs/import-js-fix ()
+  (interactive)
+  (import-js-fix)
+  (if (bound-and-true-p flycheck-mode)
+      (flycheck-buffer)))
+
+(defun spacemacs/import-js-import ()
+  (interactive)
+  (import-js-import)
+  (if (bound-and-true-p flycheck-mode)
+      (flycheck-buffer)))

layers/+tools/import-js/packages.el

@@ -0,0 +1,24 @@
+;;; packages.el --- import-js Layer packages file for Spacemacs
+;;
+;; Copyright (c) 2012-2019 Sylvain Benner & Contributors
+;;
+;; Author: Thanh Vuong <thanhvg@gmail.com>
+;; URL: https://github.com/syl20bnr/spacemacs
+;;
+;; This file is not part of GNU Emacs.
+;;
+;;; License: GPLv3
+
+(setq import-js-packages '(import-js))
+
+(defun import-js/init-import-js ()
+  (use-package import-js
+    :defer t
+    :init
+    (dolist (x spacemacs--import-js-modes)
+      (add-hook (cdr x) #'run-import-js)
+      (spacemacs/declare-prefix-for-mode (car x) "mi" "import")
+      (spacemacs/set-leader-keys-for-major-mode (car x)
+        "if" #'spacemacs/import-js-fix
+        "ii" #'spacemacs/import-js-import
+        "ig" #'import-js-goto))))