Update getting started guide

[hawkticehurst]

Link to relevant issue

This pull request resolves #74
This pull request resolves #348

Description of changes

Updates the getting started guide to include new content on how to:

• Avoid loading the toolkit package directly from node_modules
• Register the toolkit components in JS/TS
• Add proper content security policies for loading scripts, styles, and images

Misc

There is also a sibling PR in the toolkit samples repo that implements these changes into the toolkit extension samples.

[hawkticehurst]

@daviddossett these new docs could probably use another round or two of editing so whenever you have some free time I'd appreciate a pass on the content for any glaring typos, grammar, phrasing issues, etc.

[OliverMKing]

I'm excited for this update but wanted to mention that I reproduced the steps and got an error on Stage 2.

Uncaught ReferenceError: module is not defined is shown when trying to load webview.js when running the extension. Any ideas for fixes @hawkticehurst?

[hawkticehurst]

I'm excited for this update but wanted to mention that I reproduced the steps and got an error on Stage 2.

Uncaught ReferenceError: module is not defined is shown when trying to load webview.js when running the extension. Any ideas for fixes @hawkticehurst?

Hey @OliverMKing, thanks for chiming in! Alas I've run into this problem too and it's one of a handful of issues that have been blocking the release of these docs 😪

I thinkkk the issue is caused by how we are bundling the toolkit and that not playing nicely once you start trying to use the components in an ESM context. Sadly, I've been pulled away to do other work in the last handful of weeks so it might take a while to circle back and get into the weeds on this one.

For the time being I'd probably stick with the original docs –– although the writing on content security policies should still be valid/helpful!

[hawkticehurst]

@OliverMKing revisiting this PR and I believe an accidental regression caused the issue where the "type": "module" field was removed from package.json, meaning the whole toolkit was using CommonJS instead of ESM 😅

PRs #421 and #436 should have fixed these issues now, so I'd love to know if this addresses your problems.

I've also been able to continue (now successfully) updating the sample extensions to demonstrate registering the components in typescript. They're still a work in progress, but I have completed the hello world samples, so you're welcome to reference them if you'd like:

• Hello world sample (esbuild-based)
• Hello world sample (webpack-based)