Skip to content

[WIP] example with Material Web Components#42

Draft
thescientist13 wants to merge 6 commits intomasterfrom
example/material-web-components
Draft

[WIP] example with Material Web Components#42
thescientist13 wants to merge 6 commits intomasterfrom
example/material-web-components

Conversation

@thescientist13
Copy link
Copy Markdown
Member

@thescientist13 thescientist13 commented Aug 2, 2021 •
edited
Loading

Overview

Per ProjectEvergreen/greenwood#523 wanted to get an example of Material Web Components 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.

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

Steps

For the most part, I only had to follow the Quick start from the README and following their example

  1. Since MWC uses ESM for CSS files (as JavaScript files), you will need to install the Greenwood plugin plugin-import-css 
    $ npm install @greenwood/plugin-import-css --save-dev
  2. Then add a plugins section in greenwood.config.js and add the plugin 
    const pluginImportCss = require('@greenwood/plugin-import-css');

module.exports = {
  ...
  
  plugins: [
    ...pluginImportCss()
  ]
};
  3. installed mwc-button 
    $ npm install @material/mwc-button
  4. Now you can import the component and it dependencies in a template 
    <html>
  <head>
    <!-- Your application must load the Roboto and Material Icons fonts. -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

    <!-- The Material Web Components use standard JavaScript modules. -->
    <script type="module">

      // Importing this module registers <mwc-button> as an element that you
      // can use in this page.
      //
      // Note this import is a bare module specifier, so it must be converted
      // to a path using a server such as Web Dev Server.
      import '@material/mwc-button';

      // Standard DOM APIs work with Web Components just like they do for
      // built-in elements.
      const button = document.querySelector('#myButton');
      button.addEventListener('click', () => {
        alert('You clicked!');
      });
    </script>
  </head>
</html>
  5. And then use the component somewhere 
     <!-- Use Web Components in your HTML like regular built-in elements. -->
 <mwc-button id="myButton" label="Click Me!" raised></mwc-button>

Screen Shot 2021-10-20 at 5 21 37 PM

Known Issues

TSLib ESM compatibility (development only)

Looks like there is an issue pulling in tsllib because of a no default export error

Seemingly because it doesn't point to an ESM compatible file (tslib.js)

(Resolved issues)

Details Tracking some issues across Greenwood and MWC projects

Then after fixing the JS extensions issue...

Details ### 🚫 Importing (missing?) CSS Currently MWC [directly `import`s CSS](https://github.com/material-components/material-web/issues/2561), which assumes a bundler, which Greenwood [can handle](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-css), but I don't see a [_styles.css_ file in the package though](https://unpkg.com/browse/@material/mwc-button@0.22.1/)? 🔎 👀

Example from the screenshot

http://localhost:1984/node_modules/@material/mwc-button/styles.css 500 (Internal Server Error)

edit: Ah, this I think relates to the below issue as well 👇 , in that MWC assumes you will resolve @material/mwc-button/styles.css -> @material/mwc-button/styles.css.js (adding the .js extension automatically) 😕

Will handle as part of ProjectEvergreen/greenwood#700 for now

Details ### 🚫 Missing JS Extensions Additionally, MWC references JS files without specifying an extension (which I believe to be required as part of the spec), thus an odd hack is needed like in the **plugin-node-modules** `resolve` method via the `importMap`. ```js if (path.extname(url) === '' && fs.existsSync(path.join(projectDirectory, `${url}.js`))) { url = `${url}.js`; }; ```

Same as issue as above and being tracked upstream in ProjectEvergreen/greenwood#700 and material-components/material-web#2632

Details ### ❓ Incorrectly (double) scoped package paths This one looks to be on Greenwood, in that references to scoped packages are getting duplicated(and thus 404)? Example from the screenshot: ```js VM2784:1 GET http://localhost:1984/node_modules/@material/mwc-ripple/mwc-ripple/@material/mwc-ripple/mwc-ripple.js 500 (I ```

Not sure if this is would get resolved by https://github.com/ProjectEvergreen/greenwood/pull/674/files#diff-e6731c225dc2a78d6caf722587c6ac2eacd3908ce5e23f13a3b6058ab3d7d183R203 ?

Getting closer, made this fix in plugin-node-modules

const updateImportMap = (entry, entryPath) => {

  if (path.extname(entryPath) === '') {
    // before entryPath = `${entryPath}/${entry}.js`;
    entryPath = `${entryPath}.js`;
  }

  importMap[entry] = entryPath;
};

Open issue for the duplicate package entry - ProjectEvergreen/greenwood#748

and now seeing this, so progress? 🤷‍♂️

Made some progress, found out there was a better way to handle exporting a walked module to grab any exports from its own entry point, like what was needed to resolve @material/base/foundation

ExportAllDeclaration(node) {
  const sourceValue = node && node.source ? node.source.value : '';
  console.debug('ExportAllDeclaration!!!!!!!!!', sourceValue);

  if (sourceValue !== '' && sourceValue.indexOf('.') !== 0 && sourceValue.indexOf('http') !== 0) {
    updateImportMap(sourceValue, `/node_modules/${sourceValue}`);
  } else {
    // added this catch every export
    updateImportMap(`${dependency}/${sourceValue.replace('./', '')}`, `/node_modules/${dependency}/${sourceValue.replace('./', '')}.js`);
  }
}

Tracking in ProjectEvergreen/greenwood#773

Details ### Duplicate Import Map Entries Also seeing duplication in the import map? ```html <script type="importmap-shim"> { "imports": { "tslib": "/node_modules/tslib/modules/index.js", "lit-element": "/node_modules/lit-element/lit-element.js", "@material/mwc-icon/mwc-icon": "/node_modules/@material/mwc-icon/mwc-icon.js", "@material/mwc-ripple/mwc-ripple": "/node_modules/@material/mwc-ripple/mwc-ripple.js", "@material/mwc-ripple/ripple-handlers": "/node_modules/@material/mwc-ripple/ripple-handlers.js", "lit-html/directives/class-map": "/node_modules/lit-html/directives/class-map.js", "@material/mwc-button": "/node_modules/@material/mwc-button/mwc-button.js", "@material/mwc-icon": "/node_modules/@material/mwc-icon/mwc-icon.js", "lit-html/lib/shady-render.js": "/node_modules/lit-html/lib/shady-render.js", "lit-html/lit-html.js": "/node_modules/lit-html/lit-html.js", "lit-html": "/node_modules/lit-html/lit-html.js", "tslib/modules/index.js": "/node_modules/tslib/modules/index.js", "@material/dom/ponyfill": "/node_modules/@material/dom/ponyfill.js", "@material/mwc-base/base-element": "/node_modules/@material/mwc-base/base-element.js", "@material/ripple/foundation": "/node_modules/@material/ripple/foundation.js", "lit-html/directives/style-map": "/node_modules/lit-html/directives/style-map.js", "@material/mwc-ripple": "/node_modules/@material/mwc-ripple/mwc-ripple.js", "@material/dom": "/node_modules/@material/dom/index.js", "@material/mwc-base": "/node_modules/@material/mwc-base/base-element.js", "@material/base": "/node_modules/@material/base/index.js", "@material/ripple": "/node_modules/@material/ripple/index.js", "@material/animation": "/node_modules/@material/animation/index.js" } } </script> ```

@thescientist13 thescientist13 added question Further information is requested example labels Aug 2, 2021
@thescientist13 thescientist13 self-assigned this Aug 2, 2021
@thescientist13 thescientist13 mentioned this pull request Aug 2, 2021
Closed
@thescientist13 thescientist13 changed the title example with material web components example with Material Web Components Aug 4, 2021
@thescientist13 thescientist13 force-pushed the example/material-web-components branch from 29eb4f1 to 9c09f12 Compare August 20, 2021 17:47
@thescientist13 thescientist13 mentioned this pull request Aug 20, 2021
Closed
5 tasks
@thescientist13 thescientist13 added the invalid This doesn't seem right label Sep 6, 2021
@thescientist13 thescientist13 changed the title example with Material Web Components [WIP] example with Material Web Components Sep 6, 2021
@thescientist13 thescientist13 removed the question Further information is requested label Sep 6, 2021
This was referenced Sep 6, 2021
Draft
Closed
This was referenced Oct 4, 2021
Merged
Closed
Merged
@thescientist13 thescientist13 mentioned this pull request Oct 17, 2021
Closed
5 tasks
@thescientist13 thescientist13 force-pushed the example/material-web-components branch from 9c09f12 to d8f6e0c Compare October 20, 2021 21:24
@thescientist13 thescientist13 force-pushed the example/material-web-components branch 2 times, most recently from 0ea2910 to a2b15cd Compare December 24, 2021 17:52
@thescientist13 thescientist13 mentioned this pull request Dec 28, 2021
Merged
6 tasks
@thescientist13 thescientist13 mentioned this pull request Feb 20, 2022
Open
@thescientist13 thescientist13 force-pushed the example/material-web-components branch from a2b15cd to ef40282 Compare February 26, 2022 18:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@thescientist13 thescientist13

Labels

example invalid This doesn't seem right

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@thescientist13