Set up stackblitz or codepen template with Nimble

[jattasNI]

😯 Problem to Solve

I wanted to quickly play with a Nimble component configuration that wasn't available from Storybook (in my case, I wanted to make a demo for someone to show how to use an arbitrary image as a button icon). Ideally I could click a button and be launched into a live editor environment that imports all the right Nimble dependencies, shows a code sample with some nimble components, and renders the components in a sandbox page.

💁 Proposed Solution

Codepen and Stackblitz are two sites that offer this functionality. I'd love to see a link from the top level README and Storybook that takes you to one of these with everything Nimble needs already pre-populated.

[rajsite]

Created a nimble angular stackblitz here: https://stackblitz.com/edit/nimble-angular-issue-template
Anything else we want to add or test in it? If nothing we should add it to the issue template and ask clients to include minimal reproductions.

Some issues currently:

• If you download it and run npm install, it fails. Looks like the CLI dev dependency is not set correctly
• How should it be managed / maintained? How do we keep it up to date with package versions, etc?

[rajsite]

I think all of the following applies only to stackblitz with their web containers feature which is beta and not supported on safari (?).

Looks like we can create a url to import from github with stackblitz: https://developer.stackblitz.com/docs/platform/importing-projects/#import-from-github

• Need to be public or go stackblitz pro
• Wonder if you can point to a sub path? Maybe we can maintain a branch? Maybe we can maintain a separate repo?
  • Publishing a branch might not be that hard. It's essentially the same as publishing GitHub pages. Just choose a different local_dir and specify branch name.
  • Actually sub paths just seem to work! Tried it on fast https://stackblitz.com/github/microsoft/fast/tree/master/packages/web-components/fast-foundation
    we just need to go public and add a good example path
• Web Containers didn't work with Parcel 2 unfortunately: Support Parcel 2 in WebContainers parcel-bundler/parcel#7748

[jattasNI]

Awesome!

Anything else we want to add or test in it

A couple suggestions, none of which is a showstopper:

• there's an unused field in app.component.ts
• might be nice to have an example of interacting with the component in TS through its directive
• might be nice to keep the stackblitz in sync with the setup instructions in nimble-angular/README.md

just need to go public

Easy, right? :-D I added a note to #290 to mention this as another rationale for open sourcing.

[rajsite]

Another fiddle alternative is codesandbox:
Pros:

• Works with Parcel 2 (unlike stackblitz)
• VScode style editor (like stackblitz)
• Import from github: https://codesandbox.io/docs/importing#import-from-github
• No eslint support, only prettier (like stackblitz) but on roadmap for codesandbox: Possible to configure ESLint? codesandbox/codesandbox-client#1933

[rajsite]

Stackblitz added a new webcontainer api so you can have more control / fully embed the environment on a page. Could make the show code button in storybook bring up a full running example 🤔