async * method declaration inside LitElement web component break Polymer build

[Yuen92]

Description

Create a class wich extends from LitElement. Declare an async * method inside this class. This method will be called inside a asyncReplace() : https://lit-html.polymer-project.org/guide/template-reference#asyncappend-and-asyncreplace

Steps to Reproduce

1. Clone pwa-starter-kit which use lit-html Run :

git clone --depth 1 https://github.com/Polymer/pwa-starter-kit pwa-starter-kit

*2. Add async method** Inside this file :

pwa-starter-kit\src\components\my-view1.js pwa-starter-kit github

modify this code :

class MyView1 extends PageViewElement {
  render() {
      return html`
      ${SharedStyles}
      <section>
        <h2>Static page</h2>
        <p>This is a text-only page.</p>
      ....
  }
}

by

class MyView1 extends PageViewElement {
   async * countUp() {
    const wait = (t) => new Promise((resolve) => setTimeout(resolve, t));
    let i = 0;
    while (true) {
      yield i++;
      await wait(1000);
    }
  }
  render() {
      let counter = html`<p>Count: ${asyncReplace(this.countUp())}</p>.`
      return html`
      ${SharedStyles}
      <section>
        <h2>Static page</h2>
        ${counter}
        <p>This is a text-only page.</p>
      ....
  }
}

3. Run polymer build Run :

npm run build

Expected Results

Build success

Actual Results

Build failed throwing this error

info:   Clearing build\ directory...

error:  Promise rejection: Error: Unexpected token

error:  Error: Unexpected token

    at error (project-path\pwa-starter-kit\node_modules\polymer-cli\node_modules\rollup\dist\rollup.js:3365:15)

    at Module.error (project-path\pwa-starter-kit\node_modules\polymer-cli\node_modules\rollup\dist\rollup.js:13425:9)

    at tryParse (project-path\git\pwa-starter-kit\node_modules\polymer-cli\node_modules\rollup\dist\rollup.js:13091:16)

    at Module.setSource (project-path\pwa-starter-kit\node_modules\polymer-cli\node_modules\rollup\dist\rollup.js:13156:33)

    at project-path\git\pwa-starter-kit\node_modules\polymer-cli\node_modules\rollup\dist\rollup.js:21420:20

    at process._tickCallback (internal/process/next_tick.js:68:7)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pwa-starter-kit@0.9.0 build:prpl-server: `polymer build --auto-base-path && gulp prpl-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pwa-starter-kit@0.9.0 build:prpl-server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     npm-path\npm-cache\_logs\2019-07-22T12_57_34_648Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pwa-starter-kit@0.9.0 build: `npm run build:prpl-server && npm run build:static`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pwa-starter-kit@0.9.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     npm-path\npm-cache\_logs\2019-07-22T12_57_34_702Z-debug.log

Workaround

Declare it outside of the class and call it.

[justinfagnani]

This would be an issue for the https://github.com/Polymer/tools/ repo

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.