Skip to content

[RFC] Add npm library mode#855

Closed
mizchi wants to merge 1 commit into
ampproject:mainfrom
mizchi:lib-with-webpack
Closed

[RFC] Add npm library mode#855
mizchi wants to merge 1 commit into
ampproject:mainfrom
mizchi:lib-with-webpack

Conversation

@mizchi
Copy link
Copy Markdown

@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
Copy Markdown

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

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

Comment thread src/main-thread/lib.ts
}

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

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?

Comment thread src/main-thread/lib.ts
[window.innerWidth, window.innerHeight],
{}, // localStorage
{}, // sessionStorage
],
Copy link
Copy Markdown
Author

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 June 11, 2020 23:04
@CLAassistant
Copy link
Copy Markdown

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
@powerivq
Copy link
Copy Markdown
Collaborator

We are closing this PR for now due to being inactive. Please feel free to reopen.

@powerivq powerivq closed this Jun 23, 2025
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.

4 participants