[Designer] Running with `npm start` doesn't work correctly

Description

Running the Designer locally via npm start yields a broken experience.

Repro

From a clean clone of our repo:

1. cd source/nodejs
2. npm i && npx lerna bootstrap && npx lerna run build
3. cd adaptivecards-designer
4. npm start

Designer fails to load complaining that getAllDeclaredVersions() isn't a function.

Explanation

This is actually a somewhat interesting problem. Some context here around packaging:

• adaptivecards - contains the Adaptive Cards renderer
• adaptivecards-designer - contains the implementation of the Designer
• adaptivecards-designer-app - contains a stripped-down version of the Designer for embedding use where our defaults (e.g. Host Apps) aren't desirable (only mentioning this for completeness)

When npm run start is issued in the adaptivecards-designer directory, webpack is invoked in dev mode, which builds Designer stuff without optimizations, kicks off a dev server, and opens a browser tab pointing to it. webpack pulls things together based on configuration, including generating some HTML outputs:

https://github.com/microsoft/AdaptiveCards/blob/bcd3cd1f6470eb1f3596aa25da3d94c0af9bcef1/source/nodejs/adaptivecards-designer/webpack.config.js#L58-L63

Because adaptivecards-designer can be used in places that already depend on the adaptivecards package, adaptivecards is referenced as an external dependency:

https://github.com/microsoft/AdaptiveCards/blob/bcd3cd1f6470eb1f3596aa25da3d94c0af9bcef1/source/nodejs/adaptivecards-designer/webpack.config.js#L113-L130

This means that it's up to the consumer of the adaptivecards-designer package to satisfy the adaptivecards dependency. This is accomplished in the npm run start case by referencing adaptivecards like this:

https://github.com/microsoft/AdaptiveCards/blob/bcd3cd1f6470eb1f3596aa25da3d94c0af9bcef1/source/nodejs/adaptivecards-designer/index.html#L6

This uses a service called unpkg, which is a CDN that serves published npm packages in ready-to-use form. In our case, it's referencing the @latest published version. So far, so good, but adaptivecards-designer is actually built against the checked-in version of adaptivecards... and it just so happens that #6695 (which introduced getAllDeclaredVersions()) is merged in our repo, but hasn't shipped publicly yet.

So in the failing npm start scenario, we're loading a version of adaptivecards that cannot satisfy adaptivecards-designer's dependencies, and so the whole thing falls over.

Suggested Resolution

Given that acquiring adaptivecards via CDN is one of the publicly documented options for setting up the Designer, I don't think we should change index.html to pull from a local package... nor should we change our CDN guidance, as this scenario of mismatching dependencies should only happen in local builds. If we really desire a fast/local/isolated means of testing the Designer, we should stand up a new private package that uses webpack to pull the Designer together with the locally-generated adaptivecards package.

Workaround

Until we have a single simple local build artifact for testing the Designer, we can use the adaptivecards-site build, which already references the locally-built version of adaptivecards. The build is slower, and debugging might be a little less fluid, but it's how I've always done my development. Here's how to do it:

Preparation

• cd source/nodejs
• npm i && npx lerna bootstrap

Iteration (building site dependencies)

• cd adaptivecards-site
• npm run release-deps
  • this only builds dependencies required to generate the site

Iteration (generating/running the site).

(already in sources/nodejs/adaptivecards-site):

• npm run clean && npm start
• point browser to local server (e.g. http://localhost:4000/)
  • protip: don't get fooled by the Browsersync URLs in the output
• do testing/debugging/whatever
• Ctrl-c the server to exit
• make changes to adaptivecards, adaptivecards-controls, adaptivecards-templating, or adaptivecards-designer as needed/desired
• GOTO "Iteration (building site dependencies)"

Note that unlike webpack's dev server mode, this method doesn't do hot-reloading, can't detect changes, and can't do incremental builds, so the build iteration loop is slower. On the plus side, what you see is literally what we ship on the website.

Start with source/nodejs/adaptivecards-designer/webpack.config.js and index.html, then reproduce the npm start flow after the documented bootstrap and build commands. Done means the local Designer loads without the getAllDeclaredVersions() error while retaining the documented CDN-based setup, with the packaging approach resolved for locally built dependencies.