chore: javascript imporvements (snippets, templates etc)

Author: iocanel

idee-javascript.el

@@ -24,8 +24,8 @@
 ;;; Code:
 
 (require 'json)
-(require 'tide)
 (require 'flycheck)
+(require 'idee-arch)
 (require 'idee-projects)
 (require 'idee-visitors)
 
@@ -35,13 +35,11 @@
 
 (defun idee/javascript-enable()
   "Enable javascript, add hooks, visitors etc."
-  (interactive)
-  (tidee/restart-server))
+  (interactive))
 
 (defun idee/javascript-disable()
   "Disable javascript, Remove hooks, visitors etc."
-  (interactive)
-  (delete-process (tidee/current-server)))
+  (interactive))
 
 (defun idee/javascript-hook()
   "Javascript hook."
@@ -51,23 +49,27 @@
   (setq idee/function-alist (delq (assoc 'idee/declaration-function idee/function-alist) idee/function-alist))
   (setq idee/function-alist (delq (assoc 'idee/implementation-function idee/function-alist) idee/function-alist))
   (setq idee/function-alist (delq (assoc 'idee/optimize-imports-function idee/function-alist) idee/function-alist))
+  (setq idee/function-alist (delq (assoc 'idee/indent-function idee/function-alist) idee/function-alist))
+  ;(setq idee/function-alist (delq (assoc 'idee/mode-hydra-function idee/function-alist) idee/function-alist))
+  ;(setq idee/function-alist (delq (assoc 'idee/run-or-eval-function idee/function-alist) idee/function-alist))
+  ;(setq idee/function-alist (delq (assoc 'idee/test idee/function-alist) idee/function-alist))
 
   ;; Set functions
-  (add-to-list 'idee/function-alist '(idee/references-function . tidee/references))
-  (add-to-list 'idee/function-alist '(idee/declaration-function . tidee/jump-to-definition))
-  (add-to-list 'idee/function-alist '(idee/implementation-function . tidee/jump-to-implementation))
-  (add-to-list 'idee/function-alist '(idee/optimize-imports-function . tidee/organize-imports)))
+  (add-to-list 'idee/function-alist '(idee/references-function . lsp-find-references))
+  (add-to-list 'idee/function-alist '(idee/declaration-function . lsp-find-definition))
+  (add-to-list 'idee/function-alist '(idee/implementation-function . lsp-find-implementation))
+  (add-to-list 'idee/function-alist '(idee/optimize-imports-function . lsp-java-organize-imports)))
 
 ;;; Project Factory
-(defun idee/new-npm-project (&optional create-function)
+(defun idee/new-npm-project (&optional create-function target-dir)
   "Create a new npm project.
 The command supports accepting an external CREATE-FUNCTION or defaults to idee/project-create-with-shell."
   (interactive)
   (let* ((initializer (read-string "Intializer:" "react-app"))
          (recomended-dir (concat (file-name-as-directory default-directory) initializer))
          (temp-dir (concat temporary-file-directory "npm-" (format "%06x-%06x" (random (expt 16 6)) (random (expt 16 6)))))
          (generated-dir (concat (file-name-as-directory temp-dir) initializer))
-         (target-dir (idee/project-dir-select))
+         (target-dir (or target-dir (idee/project-dir-select)))
          (parent-dir (file-name-directory (directory-file-name target-dir)))
          (dir-name (substring target-dir (length parent-dir)))
          (generate-command (format "npm init %s ." initializer)))
@@ -76,14 +78,29 @@ The command supports accepting an external CREATE-FUNCTION or defaults to idee/p
     (idee/project-name-set dir-name)
     (idee/project-version-set "1.0.0")))
 
+(defun idee/new-react-project (&optional create-function target-dir)
+  "Create a new react project.
+The command supports accepting an external CREATE-FUNCTION or defaults to idee/project-create-with-shell."
+  (interactive)
+  (let* ((recomended-dir (file-name-as-directory default-directory))
+         (temp-dir (concat temporary-file-directory "npm-" (format "%06x-%06x" (random (expt 16 6)) (random (expt 16 6)))))
+         (generated-dir (file-name-as-directory temp-dir))
+         (target-dir (or target-dir (idee/project-dir-select)))
+         (parent-dir (file-name-directory (directory-file-name target-dir)))
+         (dir-name (substring target-dir (length parent-dir)))
+         (generate-command (format "npx create-react-app %s" dir-name))
+         (cleanup-command (format "mv %s/* . && rm -r %s" dir-name dir-name)))
+
+    (funcall (or create-function 'idee/project-create-with-shell) target-dir generate-command cleanup-command)
+    (idee/project-name-set dir-name)
+    (idee/project-version-set "1.0.0")))
 
 (defconst idee/npm-project-factory
   (make-idee/project-factory
    :name "Npm"
    :description "A project factory that creates a new project using npm."
    :func 'idee/new-npm-project))
 
-
 ;;; Visitor
 (defun idee/javascript-project-p (root)
   "Check if ROOT is the root path of a javascript project."
@@ -101,18 +118,102 @@ The command supports accepting an external CREATE-FUNCTION or defaults to idee/p
 
 (defun idee/javascript-package-json-version (p-json)
   "Get the project version from P-JSON."
-  (let* ((p (json-read-file p-json)))
-    (car (gethash "version" p))))
+  (if (file-exists-p p-json)
+      (let* ((json (json-read-file p-json))
+             (p (if json (car (gethash "version" p)) nil))))
+    nil))
+
+;;
+;; Snippets
+;;
+
+(defun idee/javascript-create-template (source-file name key &optional templates-dir)
+  "Create snippet from javascript file."
+    (with-temp-buffer
+      (let* ((root-dir (idee/project-root-dir (buffer-file-name)))
+             (conf-dir (concat (file-name-as-directory root-dir) idee/project-conf-dir))
+             (project-templates-dir (concat (file-name-as-directory conf-dir) "templates"))
+             (templates-dir (or templates-dir project-templates-dir))
+             (body (idee/javascript-snippet-body-from source-file))
+             (target (concat (file-name-as-directory templates-dir) (format "js-mode/%s" key)))
+             (parent (file-name-directory target)))
+        (set-visited-file-name target)
+        (insert (format "# name: %s" name))
+        (newline)
+        (insert (format "# key: %s" key))
+        (newline)
+        (insert "# --")
+        (newline)
+        (insert body)
+        (write-file target)
+        (yas-load-directory parent)
+        (yas-compile-directory parent))))
+
+(defun idee/javascript-snippet-body-from (f)
+  "Create snippet from file F."
+  (with-temp-buffer
+    (save-excursion
+        (insert-file-contents f)
+        (goto-char (point-min))
+        (idee/comment-remove-at-point java-comment-style)
+        (let* ((content (buffer-substring-no-properties (point-min) (point-max)))
+               (name (idee/filename f))
+               (updated (concat "`idee/header`\n" (replace-regexp-in-string (regexp-quote name) "`(idee/filename)`" content t))))
+          updated))))
+
+;;
+;; Archetypes
+;;
+(defun idee/javascript-react-component (&optional base-path src-path)
+  "Create a react component javascript and css."
+  (interactive)
+  (let* ((name (read-string "Component name:"))
+         (base-path (file-name-as-directory (or base-path (idee/module-root-dir) default-directory)))
+         (src-path (file-name-as-directory (or src-path "src/")))
+         (js (concat base-path (format "%s/%s.js" src-path name)))
+         (css (concat base-path (format "%s/%s.css" src-path name))))
+
+    ;; Javascript
+    (with-temp-buffer
+      (message "With temp buffer 1")
+        (set-visited-file-name js)
+        (insert "rcomp")
+        (js-mode)
+        (yas-expand)
+        (write-file js))
+
+    ;; CSS
+    (with-temp-buffer
+        (set-visited-file-name css)
+        (insert "")
+        (yas-expand)
+        (write-file css))
+
+    (find-file js)))
+
+ (idee/archetype-register
+  (make-idee/archetype
+   :name "React component"
+   :description "A react component js and css"
+   :func 'idee/javascript-react-component))
+
 
 ;;; Init
 (defun idee/javascript-init ()
   "Initialize IDE javascript."
   (interactive)
   (idee/project-factory-register idee/npm-project-factory)
   (idee/visitor-register 'idee/javascript-visitor)
+
+  (idee/template-factory-register (make-idee/template-factory
+                                             :mode 'js-mode
+                                             :description "A javascript temlate factory"
+                                             :func 'idee/javascript-create-template))
+
 ;; Hooks
   (add-hook 'javascipt-mode-hook 'idee/javascript-hook)
   (add-hook 'js2-mode-hook 'idee/javascript-hook)
+  (add-hook 'js-jsx-mode-hook 'idee/javascript-hook)
   (add-hook 'typescirpt-mode-hook 'idee/javascript-hook))
 
 (provide 'idee-javascript)

idee-utils.el

@@ -26,6 +26,10 @@
 ;; File funtcionts
 ;;
 
+(defun idee/filename (&optional F)
+  "Return the filename for the F or the current file (strips path and extension)."
+  (file-name-nondirectory (file-name-sans-extension (or f (buffer-file-name)))))
+
 ;;;###autoload
 (defun idee/read-file (f)
   "Read the content of file F."

idee-vars.el

@@ -35,7 +35,7 @@
                                 ("md" . "markdown-mode")
                                 ("java" . "java-mode")
                                 ("json" . "json-mode")
-                                ("js" . "js2-mode")
+                                ("js" . "js-mode")
                                 ("ts" . "typescript-mode")
                                 ("py" . "python-mode")
                                 ("go" . "go-mode")

snippets/js-mode/addf

@@ -0,0 +1,10 @@
+# -*- mode: snippet -*-
+# name: Add Factory
+# key: addf
+# --
+
+export const add${1:$$(idee/capitalize-first yas-text)}Factory = ([state, func]) => {
+    return (new$1) => {
+        return func([...state, new$1]);
+    }
+}

snippets/js-mode/cons

@@ -0,0 +1,6 @@
+# -*- mode: snippet -*-
+# name: constant
+# key: cons 
+# --
+export const ${1:$(upcase (replace-regexp-in-string "[^a-zA-z0-9]+" "_" yas-text))} = "${1:constant}";
+$0

snippets/js-jsx-mode/fjson snippets/js-mode/fjsonsnippets/js-jsx-mode/fjson renamed to snippets/js-mode/fjson

@@ -0,0 +1,9 @@
+# -*- mode: snippet -*-
+# name: Partially apply
+# key: papply
+# --
+export const ${1:partiallyApply} = (Component, ${2:partialProps}) => {
+    return props => {
+           <Component {...$2} {...props} />
+    }
+}

snippets/js-mode/papply

@@ -0,0 +1,9 @@
+# -*- mode: snippet -*-
+# name: Recoil atom
+# key: ratom
+# --
+
+export const ${1:items}State = atom({
+  key: '$1', 
+  default: [], 
+});

snippets/js-mode/ratom

@@ -0,0 +1,10 @@
+# -*- mode: snippet -*-
+# name: redux action
+# key: rdxa 
+# --
+export const ${1:$(upcase (replace-regexp-in-string "[^a-zA-z0-9]+" "_" yas-text))} = "${1:$$(upcase (replace-regexp-in-string "[^a-zA-z0-9]+" "_" yas-text))}";
+export const ${1:$(replace-regexp-in-string "[^a-zA-Z0-9]" "" (replace-regexp-in-string "[^a-zA-Z0-9][a-zA-Z0-9]" #'upcase (downcase yas-text)))} = ${2:text} => ({
+       type: ${1:$(upcase (replace-regexp-in-string "[^a-zA-z0-9]+" "_" yas-text))},
+       payload: { $2 },
+       $0 
+})

snippets/js-mode/rdxa

@@ -0,0 +1,10 @@
+# -*- mode: snippet -*-
+# name: Remove Factory
+# key: rmf
+# --
+
+export const remove${1:$(idee/capitalize-first yas-text)}By${2:$(idee/capitalize-first yas-text)}Factory = ([state, func]) => {
+    return (${2:id}) => {
+        return func(state.filter(${1:item}.$2 !== $2));
+    }
+}