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.

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

[RFC] Add npm library mode #855

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

mizchi
Copy link

@mizchi mizchi commented Apr 29, 2020

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
Copy link

@googlebot googlebot commented Apr 29, 2020

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
Copy link

@googlebot googlebot commented Apr 29, 2020

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

}

// TODO: Refactor with original
class WorkerContextFromInstance {
Copy link
Author

@mizchi mizchi Apr 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WIP: I copied it from WorkerContext and patched. Is there clear way?

[window.innerWidth, window.innerHeight],
{}, // localStorage
{}, // sessionStorage
],
Copy link
Author

@mizchi mizchi Apr 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe adding TransferrableKeys and some types like Initializer are better but at first makes it simple

@kristoferbaxter kristoferbaxter changed the base branch from master to main Jun 11, 2020
@CLAassistant
Copy link

@CLAassistant CLAassistant commented Oct 8, 2020

CLA assistant check
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.

@mizchi mizchi mentioned this pull request Mar 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants