Add node location info in dev mode

[Rich-Harris]

I'm working on an Electron app called Sapper Studio, which is sort of a specialised IDE for building Sapper apps. Currently, while you're navigating around in the in-app browser, you can click an 'edit' icon and it will open that page in the editor (e.g. if you're on /blog/some-post it will open routes/blog/[slug].html), and you can do the same by clicking on filenames in the diagnostics panel to locate the sources of errors and warnings. It's pretty slick!

What would be even slicker is if you could target individual elements. In order to do this, the compiler would need to decorate elements with location info. Something like this:

const file = "components/Foo.html";
function addLoc(node, line, column) {
  node.__source = { file, line, column };
}

then later...

function create_main_fragment(component, ctx) {
  var h1, text, text_1, text_2;

  return {
    c: function create() {
      h1 = createElement("h1");
+     addLoc(h1, 0, 0);
      text = createText("Hello ");
      text_1 = createText(ctx.name);
      text_2 = createText("!");
    },

This would allow dev tooling like Sapper Studio (but also in-browser dev tools, when we get round to it) to present a UI for targeting nodes that were created by Svelte. (This is sort of what we were exploring in #973.)

Any thoughts before I go ahead and implement this? Is __source the right property, or do we need to bikeshed that?

[ekhaled]

@Rich-Harris looking forward to sapper studio.
I'm guessing you are using webpack as the bundler during the preview.

If you are there are a lot of goodies provided by svelte-dev-helper under window.__SVELTE_REGISTRY__ which might be helpful with sapper studio.

Just check it out in the console. There is also more info here: https://github.com/ekhaled/svelte-dev-helper/blob/master/README.md

[Rich-Harris]

@ekhaled thanks, that could be handy. Yep, it's using webpack — it's essentially doing sapper dev (i.e. using the Sapper/Svelte/webpack versions that are installed in the project being edited), except hooking into Sapper's new (currently unreleased) APIs rather than going via the CLI.

[ekhaled]

From what I can see in the short video clip, it assumes a component-per-page workflow.

Say you had multiple components on a page. You would need UI to display a list of all rendered components, and their instances.

This is where you can leverage window.__SVELTE_REGISTRY__. As that holds a global repository of all rendered components and their instances at any given time.

Ping me if any questions.