Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] example with Material Web Components #42

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft

[WIP] example with Material Web Components #42

wants to merge 6 commits into from

Conversation

thescientist13
Copy link
Member

@thescientist13 thescientist13 commented Aug 2, 2021 •
edited

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)

Tracking some issues across Greenwood and MWC projects

Then after fixing the JS extensions issue...

### 🚫 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

### 🚫 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

### ❓ 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

### 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 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 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
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.

None yet
1 participant
@thescientist13