[WIP] examples of using Lion components

[thescientist13]

Overview

Per ProjectEvergreen/greenwood#523 wanted to get an example of Lion working with Greenwood. The intent isn't to merge this PR, but rather provide an example and demonstration for how to add it to a Greenwood project.

Mostly working for development at least. (not the calendar though)

⚠️ ⛔ This PR is still WIP, as there are a couple of issues documented further down👇

Steps

For the most part, just following the steps for each component's docs worked fine. For example, with Tabs

1. Install @lion/tabs

   $ npm i @lion/tabs

2. Then import the components definition file

   <script type="module">
     import '@lion/tabs/define';
   </script>

3. Then use the component

    <lion-tabs>
      <button slot="tab">Info</button>
      <p slot="panel">Info page with lots of information about us.</p>
      <button slot="tab">Work</button>
      <p slot="panel">Work page that showcases our work.</p>
    </lion-tabs>   

Known Issues

Note: One thing to keep in mind is so far I am using these components directly, and instead they are supposed to be extended, so should plan to test those cases too.

⚠️ Localize Manager

Not sure if related to Greenwood or not, but when running greenwood develop, looks like there is an error for regarding Localization?

Note: as can be seen below, this works in production, so seems like a Greenwood issue.

LocalizeManager.js:404 Uncaught (in promise) Error: Data for namespace "lion-calendar" and current locale "en" or fallback locale "en-GB" could not be loaded. Make sure you have data either for locale "en" (and/or generic language "en") or for fallback "en-GB" (and/or "en").
    at LocalizeManager.js:404
    at async Promise.all (:1984/index 0)

Seems to be a local development issues, as when building for production with a newer version of Rollup, everything looks good for the calendar?

---

Wonder if it has something to do with ES Module Shims? Found this and not sure if related to the fact that @lion/calendar uses dynamic import()?

Noticing that es-module-shims applies its importShim to these

Maybe I need to review since ES Module Shims has gone 1.0 and maybe has some more features / settings we need to use or be aware of?

• importmaps do not work inside imported modules guybedford/es-module-shims#200
• https://github.com/guybedford/es-module-shims#polyfill-mode
• https://github.com/guybedford/es-module-shims#polyfill-mode-details

⚠️ Prerendering + Lion Tabs

At least for <lion-tabs>, they don't work by default with our puppeteer prerendering.

However, when setting prerender: false in greenwood.config.js it will work

Maybe something to experiment further with as part of ProjectEvergreen/greenwood#709.

### ❓ Rollup Unresolved Dependency When running `greenwood build`, for some reason I'm getting an unresolved dependency warning and the final output is not working :/ ```sh '@lion/calendar/define' is imported by .greenwood/1566429691-scratch.js, but could not be resolved – treating it as an external dependency '@lion/tabs/define' is imported by .greenwood/1566429691-scratch.js, but could not be resolved – treating it as an external dependency '@lion/button/define-button-submit' is imported by node_modules/@lion/button/define.js, but could not be resolved – treating it as an external dependency '@lion/button/define-button' is imported by node_modules/@lion/button/define.js, but could not be resolved – treating it as an external dependency '@lion/button/define-button-reset' is imported by node_modules/@lion/button/define.js, but could not be resolved – treating it as an external dependency ``` 

Even trying it in an external main.js file doesn't work, so not sure if Greenwood problem or Rollup problem? 🤔

Maybe has something to do with sideEffects and or that I should extend these WCs instead?

---

Ah, this just requires an upgrade to Rollup and its dependencies to get support for exports and sideEffects! - ProjectEvergreen/greenwood#746

🚫 Development (Exports Map handling)

Saw a couple issues related to exports map support handling when testing these out, which I think are gaps in Greenwood, so would be dependent on an upstream fix from Greenwood -

Flat Export Map

Was getting an error that one Lion's export maps entries (./define) was not resolving correctly

es-module-shims.js:469 Uncaught (in promise) Error: Unable to resolve specifier '@lion/button/define' from http://localhost:1984/?0
    at throwUnresolved (es-module-shims.js:469)
    at resolve (es-module-shims.js:465)
    at es-module-shims.js:424
    at Array.map (<anonymous>)
    at es-module-shims.js:423
    at async loadAll (es-module-shims.js:237)
    at async topLevelLoad (es-module-shims.js:256)

I think the issue is I was not correctly handling "flat" export maps, e.g.

Lit - each entry is an object

"exports": {
  ".": {
    "default": "./index.js"
  },
  "./async-directive.js": {
    "default": "./async-directive.js"
  },
  "./decorators.js": {
    "default": "./decorators.js"
  },
  "./decorators/custom-element.js": {
    "default": "./decorators/custom-element.js"
  },

  ...
}

Lion - each entry is a string

"exports": {
  ".": "./index.js",
  "./define": "./lion-calendar.js",
  "./translations/*": "./translations/*",
  "./test-helpers": "./test-helpers/index.js",
  "./docs/": "./docs/"
}  

Transient Imports

After fixing the above, I then saw that an import of a dependent package was not correctly getting updated in the import map when walking a module.

es-module-shims.js:469 Uncaught (in promise) Error: Unable to resolve specifier '@bundled-es-modules/message-format/MessageFormat.js' from http://localhost:1984/node_modules/@lion/localize/src/LocalizeManager.js
    at throwUnresolved (es-module-shims.js:469)
    at resolve (es-module-shims.js:465)
    at es-module-shims.js:424
    at Array.map (<anonymous>)
    at es-module-shims.js:423

Not sure if this is just bad export map reading on my end, but presumably all import statements needs to be registered in the import map somewhere, right?