diff --git a/doc/Indium.texi b/doc/Indium.texi index 02b890c..f77a209 100644 --- a/doc/Indium.texi +++ b/doc/Indium.texi @@ -153,7 +153,7 @@ The inspector @end menu @node Installation,Getting up and running,,Table of contents -@anchor{installation installation}@anchor{3}@anchor{installation doc}@anchor{4} +@anchor{installation doc}@anchor{3}@anchor{installation installation}@anchor{4} @section Installation @@ -220,7 +220,7 @@ Add the following to your Emacs configuration: @end example @node Getting up and running,The REPL,Installation,Table of contents -@anchor{setup doc}@anchor{7}@anchor{setup getting-up-and-running}@anchor{8}@anchor{setup up-and-running}@anchor{9} +@anchor{setup doc}@anchor{7}@anchor{setup up-and-running}@anchor{8}@anchor{setup getting-up-and-running}@anchor{9} @section Getting up and running @@ -232,7 +232,7 @@ Add the following to your Emacs configuration: @end menu @node NodeJS,Chrome/Chromium,,Getting up and running -@anchor{setup id1}@anchor{a}@anchor{setup nodejs}@anchor{b} +@anchor{setup nodejs}@anchor{a}@anchor{setup id1}@anchor{b} @subsection NodeJS @@ -287,7 +287,7 @@ M-x indium-connect-to-chrome @end example @node Using local files when debugging,,Chrome/Chromium,Getting up and running -@anchor{setup local-files}@anchor{e}@anchor{setup using-local-files-when-debugging}@anchor{f} +@anchor{setup using-local-files-when-debugging}@anchor{e}@anchor{setup local-files}@anchor{f} @subsection Using local files when debugging @@ -337,7 +337,7 @@ directory! @end cartouche @node The REPL,Interaction in JS buffers,Getting up and running,Table of contents -@anchor{repl the-repl}@anchor{10}@anchor{repl repl}@anchor{11}@anchor{repl doc}@anchor{12} +@anchor{repl the-repl}@anchor{10}@anchor{repl doc}@anchor{11}@anchor{repl repl}@anchor{12} @section The REPL @@ -354,7 +354,7 @@ directory! A REPL (Read Eval Print Loop) buffer is automatically open when a new Indium -connection is made (see @ref{9,,Getting up and running}). +connection is made (see @ref{8,,Getting up and running}). @image{repl,,,,png} @@ -488,7 +488,7 @@ the current stack frame, and will be able to access local variables from the stack, etc. @node Interaction in JS buffers,The stepping debugger,The REPL,Table of contents -@anchor{code-evaluation interaction}@anchor{19}@anchor{code-evaluation doc}@anchor{1a}@anchor{code-evaluation interaction-in-js-buffers}@anchor{1b} +@anchor{code-evaluation doc}@anchor{19}@anchor{code-evaluation interaction}@anchor{1a}@anchor{code-evaluation interaction-in-js-buffers}@anchor{1b} @section Interaction in JS buffers @@ -542,7 +542,7 @@ Here's a list of available keybindings: Press @code{C-c C-z} from any buffer with @code{indium-interaction-mode} turned on to -switch back to the REPL buffer (see @ref{11,,The REPL}). +switch back to the REPL buffer (see @ref{12,,The REPL}). @node Adding and removing breakpoints,Live code update hot-swapping JavaScript sources,Switching to the REPL buffer,Interaction in JS buffers @anchor{code-evaluation adding-and-removing-breakpoints}@anchor{1e} @@ -550,7 +550,7 @@ switch back to the REPL buffer (see @ref{11,,The REPL}). You need to first make sure that Indium is set up correctly to use local files -(see @ref{e,,Using local files when debugging}). +(see @ref{f,,Using local files when debugging}). @itemize - @@ -601,7 +601,7 @@ Chrome 57 and earlier. We strongly encourage you to use Chrome >= @end cartouche To enable live updates, make sure Indium is set up to use local files (see -@ref{e,,Using local files when debugging}). +@ref{f,,Using local files when debugging}). @itemize - @@ -615,19 +615,37 @@ current buffer. script JavaScript source after each buffer save. @end itemize +You can setup a hook to be run after each script update. For example + +@example +(add-hook 'indium-update-script-source-hook + (lambda (url) + (indium-eval (format "window.dispatchEvent(new CustomEvent('patch', @{detail: @{url: '%s'@}@}))" + url)))) +@end example + +Then you can use it in your app for development purposes + +@example +window.addEventListener("patch", (event) => @{ + console.log("Patched @@ " + new Date().toTimeString().substring(0, 8), event.detail.url); + // rerender, etc +@}); +@end example + @node The stepping debugger,The inspector,Interaction in JS buffers,Table of contents -@anchor{debugger doc}@anchor{21}@anchor{debugger debugger}@anchor{1f}@anchor{debugger the-stepping-debugger}@anchor{22} +@anchor{debugger the-stepping-debugger}@anchor{21}@anchor{debugger doc}@anchor{22}@anchor{debugger debugger}@anchor{1f} @section The stepping debugger @node The inspector,,The stepping debugger,Table of contents -@anchor{inspector the-inspector}@anchor{23}@anchor{inspector inspector}@anchor{14}@anchor{inspector doc}@anchor{24} +@anchor{inspector inspector}@anchor{14}@anchor{inspector doc}@anchor{23}@anchor{inspector the-inspector}@anchor{24} @section The inspector Indium features an object inspector that can be open on any object reference -from a REPL buffer (see @ref{11,,The REPL}), the debugger (see @ref{1f,,The stepping debugger}), or -the result of any evaluation of JavaScript code (see @ref{19,,Interaction in JS buffers}). +from a REPL buffer (see @ref{12,,The REPL}), the debugger (see @ref{1f,,The stepping debugger}), or +the result of any evaluation of JavaScript code (see @ref{1a,,Interaction in JS buffers}). To inspect the result of the evaluation of an expression, press @code{C-c M-i}. An inspector buffer will pop up. You can also press @code{RET} or left click on diff --git a/indium-backend.el b/indium-backend.el index c516fa9..7540846 100644 --- a/indium-backend.el +++ b/indium-backend.el @@ -171,7 +171,7 @@ A breakpoint is an alist with the keys `id', `file', and `line'." (string= (map-elt brk 'file) file)) breakpoints))) -(cl-defgeneric indium-backend-set-script-source (backend url source) +(cl-defgeneric indium-backend-set-script-source (backend url source &optional callback) "Update the contents of the script at URL to SOURCE.") (cl-defgeneric indium-backend-get-properties (backend reference &optional callback all-properties) diff --git a/indium-interaction.el b/indium-interaction.el index 8597715..a886308 100644 --- a/indium-interaction.el +++ b/indium-interaction.el @@ -35,6 +35,9 @@ :type 'boolean :group 'indium) +(defvar indium-update-script-source-hook nil + "Hook run when script source is updated.") + (defun indium-eval (string &optional callback) "Evaluate STRING on the current backend. When CALLBACK is non-nil, evaluate CALLBACK with the result. @@ -196,7 +199,9 @@ If PRINT is non-nil, print the output into the current buffer." (when-let ((url (indium-workspace-make-url buffer-file-name))) (indium-backend-set-script-source (indium-backend) url - (buffer-string)))) + (buffer-string) + (lambda () + (run-hook-with-args 'indium-update-script-source-hook url))))) (add-hook 'after-save-hook #'indium-interaction-update) diff --git a/indium-webkit.el b/indium-webkit.el index e5367e0..4e8f397 100644 --- a/indium-webkit.el +++ b/indium-webkit.el @@ -140,7 +140,7 @@ prototype chain of the remote object." (indium-webkit--properties (map-nested-elt response '(result result))))))) -(cl-defmethod indium-backend-set-script-source ((backend (eql webkit)) url source) +(cl-defmethod indium-backend-set-script-source ((backend (eql webkit)) url source &optional callback) (when-let ((script-id (indium-webkit--get-script-id url))) (indium-webkit--send-request `((method . "Runtime.compileScript") @@ -151,7 +151,10 @@ prototype chain of the remote object." (indium-webkit--send-request `((method . "Debugger.setScriptSource") (params . ((scriptId . ,script-id) - (scriptSource . ,source))))))))) + (scriptSource . ,source)))) + (lambda (response) + (when callback + (funcall callback)))))))) (cl-defmethod indium-backend-get-script-source ((backend (eql webkit)) frame callback) (let ((script-id (map-nested-elt frame '(location scriptId)))) diff --git a/sphinx-doc/code-evaluation.rst b/sphinx-doc/code-evaluation.rst index 2fcf252..3071fc3 100644 --- a/sphinx-doc/code-evaluation.rst +++ b/sphinx-doc/code-evaluation.rst @@ -42,7 +42,7 @@ You need to first make sure that Indium is set up correctly to use local files Once a breakpoint is set, execution will stop when a breakpoint is hit, and the Indium debugger pops up (see :ref:`debugger`). - + .. Note:: Breakpoints are persistent: if the connection is closed, when a new connection is made Indium will attempt to add back all breakpoints. @@ -68,3 +68,17 @@ To enable live updates, make sure Indium is set up to use local files (see current buffer. - ``(setq indium-update-script-on-save t)``: Automatically update the runtime script JavaScript source after each buffer save. + +You can setup a hook to be run after each script update. For example :: + + (add-hook 'indium-update-script-source-hook + (lambda (url) + (indium-eval (format "window.dispatchEvent(new CustomEvent('patch', {detail: {url: '%s'}}))" + url)))) + +Then you can use it in your app for development purposes :: + + window.addEventListener("patch", (event) => { + console.log("Patched @ " + new Date().toTimeString().substring(0, 8), event.detail.url); + // rerender, etc + });