tbranyen/test.html

## test.html
<!doctype html>
<html lang="en">
<head>
  <title>Worker example</title>
</head>
<body>
  <main id="mount"></main>

  <script src="http://localhost:8080/packages/diffhtml/dist/diffhtml.min.js"></script>
  <script src="./packages/diffhtml-middleware-worker/dist/worker.js"></script>

  <script type="module">
    const { use, innerHTML } = diff;
    const { mainTask, createWorker, toObjectURL } = worker;

    // Use a function as a container to write code that will run within the
    // Web Worker. This code does not run on the main thread and you cannot
    // access globals from it. Useful if you want to avoid writing a second
    // file for your worker. The toObjectURL function is a shortcut around
    // manually converting the function to a string and generating a blob and
    // object URL from it.
    const workerURL = toObjectURL(() => {
      importScripts('http://localhost:8080/packages/diffhtml/dist/diffhtml.min.js');
      importScripts('http://localhost:8080/packages/diffhtml-middleware-worker/dist/worker.js');

      const { use, html, createTree, innerHTML } = diff;
      const { workerTask, getUUID } = worker;

      // Make a UUID to represent the thread.
      const threadId = getUUID();

      // Register the worker middleware.
      use(workerTask());

      // Create an empty fragment to render into, this represents the body tag
      // in the main thread.
      const placeholder = createTree();

      let count = 0;

      // Simple render function to allow re-rendering.
      const render = () => innerHTML(placeholder, html`
        <h1>Hello world from a worker thread ${threadId}!</h1>

        <h2>Increment</h2>

        <button onClick=${ev => {
          count = count + 1;
          render();
        }}>+</button>
        <button>-</button>

        <b>${String(count)}</b>
      `);

      render();
    });

    {
      const worker = createWorker(workerURL)(patches => {
        // Make sure you pair the patches correct. If you use `innerHTML` in the
        // worker, you will also need to do this in the main thread.
        innerHTML(mount, null, patches);
      });

      use(mainTask({ worker }));
    }
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Worker example</title>
	</head>
	<body>
	<main id="mount"></main>

	<script src="http://localhost:8080/packages/diffhtml/dist/diffhtml.min.js"></script>
	<script src="./packages/diffhtml-middleware-worker/dist/worker.js"></script>

	<script type="module">
	const { use, innerHTML } = diff;
	const { mainTask, createWorker, toObjectURL } = worker;

	// Use a function as a container to write code that will run within the
	// Web Worker. This code does not run on the main thread and you cannot
	// access globals from it. Useful if you want to avoid writing a second
	// file for your worker. The toObjectURL function is a shortcut around
	// manually converting the function to a string and generating a blob and
	// object URL from it.
	const workerURL = toObjectURL(() => {
	importScripts('http://localhost:8080/packages/diffhtml/dist/diffhtml.min.js');
	importScripts('http://localhost:8080/packages/diffhtml-middleware-worker/dist/worker.js');

	const { use, html, createTree, innerHTML } = diff;
	const { workerTask, getUUID } = worker;

	// Make a UUID to represent the thread.
	const threadId = getUUID();

	// Register the worker middleware.
	use(workerTask());

	// Create an empty fragment to render into, this represents the body tag
	// in the main thread.
	const placeholder = createTree();

	let count = 0;

	// Simple render function to allow re-rendering.
	const render = () => innerHTML(placeholder, html`
	<h1>Hello world from a worker thread ${threadId}!</h1>

	<h2>Increment</h2>

	<button onClick=${ev => {
	count = count + 1;
	render();
	}}>+</button>
	<button>-</button>

	<b>${String(count)}</b>
	`);

	render();
	});

	{
	const worker = createWorker(workerURL)(patches => {
	// Make sure you pair the patches correct. If you use `innerHTML` in the
	// worker, you will also need to do this in the main thread.
	innerHTML(mount, null, patches);
	});

	use(mainTask({ worker }));
	}
	</script>
	</body>
	</html>