Enhance setup.debug to always expose wn object if true

[jeffgca]

Problem: some developers using webnative ( like me ) will use tooling like sveltekit and initialize our code in a component, effectively hiding it from the DOM and any kind of tooling we or others might want to build. It's currently impossible to access the wn instance from the devtools console, for example, unless you set a breakpoint in the scope where that variable is created.

From a chat w/Brian:

Hey! Question for you. I have some code in my test sveltekit / wn app now to make it easier for me to create a content script:

onMount(() => {
  const DEBUG = true; 
  if (DEBUG && DEBUG === true) {
    navigator.__wn = wn;    
  }
});

...so I can write code in my content script like:

if (navigator.__wn) {
  // this page is definitely using webnative
  navigator.__wn.authenticatedUsername().then(console.log)
}

In the codebase we currently have a debug option in setup.ts:

https://github.com/fission-codes/webnative/blob/main/src/setup.ts#L12-L20

When this debug option is set, we could optionally do something like what I have in code example 1 - exposing the wn instance to the top level DOM for convenience.

[jeffgca]

Bumping this issue because not having this makes it very hard for us to internally debug apps based on WAT and file good bugs.

[icidasset]

@therealjeffg What's stopping people from doing this themselves? Can't you access the navigator or window object in a Svelte component?

I'm worried that if people leave on the debug flag it exposes this object unintentionally.

[bgins]

For the purposes of accessing Webnative from a devtools extension, I think we can expose less. The basic idea is that the extension will signal to Webnative that it would like debugging information, and Webnative will send window post messages in response. Still determining some of the details, but we'll be tracking it in #460 and oddsdk/odd-devtools#8.

[jeffgca]

@therealjeffg What's stopping people from doing this themselves? Can't you access the navigator or window object in a Svelte component?

Nothing as far as I can tell, and yes these objects can be accessed from svelte. The intention behind this work is to automagically provide a better developer experience, but only when the debug flag is set to true.

The problem we're trying to address is that currently webnative is a bit of a black box when used within a framework like elm or svelte and it is very difficult to get any info about a currently running app from eg the devtools console, which is by far the most common tool developers use.

I'm worried that if people leave on the debug flag it exposes this object unintentionally.

Can you say more about this? Outside of a framework it is quite likely that the webnative object would be available in the page's global scope. Is this in and of itself a security risk?

We can always mitigate this unintentional risk for behaviours in our examples by eg printing warnings to the console or placing visual warnings in the UI of WAT.

[icidasset]

I thought a bit more about this and I think it should be fine security-wise exposing the Programs.
I think I'll implement something like this:

globalThis.__webnative.programs["namespace"] = program

and will be configurable.

[icidasset]

@therealjeffg Added to Webnative v0.36, see guide: https://guide.fission.codes/developers/webnative/additional-info#program