tungd / kite-mini.el

Yet another Emacs package to interact with WebKit remote debugging API.
GNU General Public License v3.0
19 stars 5 forks source link

Drive script id from source map #7

Open tungd opened 9 years ago

tungd commented 9 years ago

Because JavaScript transpiler is so popular now :)

TatriX commented 8 years ago

I'll try to implement it soon.

TatriX commented 8 years ago

I've made some progress with sourcemaps. It is kind of usable now but not a generic solution. There a lot of things have to be resolved before it will be usable enough for other people I guess. Nevertheless you can watch it in action here: https://github.com/TatriX/kite-mini.el/tree/dev

First you have to call kite-mini-set-project-root to the dir where sourcemap files located. (I could download it by the url from debugger but 1) It is slow 2) There is a bug in url.el which prevent it from working with localhost+ipv6) Now you should get correct source:line:file in the console messages.

If you want to be able to updated your bundled source you have to write custom function. For example add something like this to the .emacs:

(defun kite-mini-update-custom ()
  "This function will be used instead of default implementation"
  (interactive)
  (let ((default-directory "~/project/"))
    (call-process-shell-command "npm run build-app" nil "*npm-run-build-app*"))
  (kite-mini-call-rpc
   "Debugger.setScriptSource"
   (let ((script (--find (string-suffix-p "project/bundle.js" (plist-get it :url))
                         kite-mini-rpc-scripts)))
     (plist-put script :source-map (cons 'lazy-source-map "~/project/bundle.js.map"))
     (list :scriptId (plist-get script :id)
           :scriptSource (kite-mini--get-string-from-file "~/project/app.js")))
   (lambda (result)
     (kite-mini-send-eval
      "window.dispatchEvent(new CustomEvent('change', {detail: {filename: 'bundle.js'}}))"
      (lambda (result) (message "Kite update done"))))))

Console object parser is incomplete and is usable only for the most simple expressions.

tungd commented 8 years ago

Hi, and thanks for the hard work. What do you think about this? Is it still worth pursuing, since reloading transpiled JS seems impossible without knowing the specific build tool used.

TatriX commented 8 years ago

Actually we have to know only the path to the source directory tree. Sourcemaps should be downloaded from the provided url. Then we can use them to reverse lookup generated sourcemap (see sourcemap-generated-position-for). I've made that with some dirty hacks but it was terribly slow for big sourcemaps (> 40k lines).

Recently I've asked author of the sourcemap lib to improve it and he did it. So I hope I will be able to make more generic solution in future.