[RFC] Add npm library mode

[mizchi]

This PR is proposal to add npm library mode build.

API Proposal

It generates them.

• worker-dom/dist/lib/main.mjs: export attachWorker(element: HTMLElement, worker: Worker): void
• worker-dom/dist/lib/worker.mjs: export ready: Promise<void> (DOM is ready to touch)

Background

I think worker-dom can be general purpose library for frontend performance, but today's api does not fit webpack. Under using webpack, there are many ways to bundle worker code like worker-plugin and worker-loader.

This proposal provides seamless way with webpack.

Example

with worker-plugin (https://github.com/GoogleChromeLabs/worker-plugin)

// index.js
import { attachWorker } from '@ampproject/worker-dom/dist/lib/main.mjs';

const el = document.createElement('main');
el.innerHTML = `
<div>
  <h1>main</h1>
  <button>click</button>
</div>
`;
document.body.appendChild(el);

// bundle worker code with worker-plugin
const worker = new Worker('./worker.js', { type: 'module' });

attachWorker(el, worker);

// worker.js
import { ready } from '@ampproject/worker-dom/dist/lib/worker.mjs';

async function run() {
  await ready;

  // dom mutation
  const el = document.createElement('h2');
  el.textContent = 'hello from worker';
  document.body.appendChild(el);

  // handler
  const button = document.querySelector('button');
  button.onclick = (ev) => {
    console.log('button:onclick', ev);
  };
}

run();

See full code demo/as-webpack-lib

Working Demo

https://worker-dom-as-lib-example.netlify.app/

sample repository (use published @mizchi/worker-dom)

https://github.com/mizchi/worker-dom-webpack-example

https://wizardly-benz-02c23e.netlify.app/

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google. In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}