feat(polyfill): add a 'handlers' property to PagedConfig global object

Also, export the polyfill initializer to mesure side effects

README.md

@@ -47,6 +47,13 @@ However, you can add an async `before` function or return a Promise to delay the
 			}
 		},
 		after: (flow) => { console.log("after", flow) },
+		handlers: [
+			{
+				afterPageLayout(pageFragment, page) {
+					console.log(pageFragment);
+				}
+			}
+		]
 	};
 </script>
 ```
@@ -95,16 +102,15 @@ New handlers can be registered from `import { registerHandlers } from 'pagedjs'`
 ```html
 <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
 <script>
-	class MyHandler extends Paged.Handler {
-		constructor(chunker, polisher, caller) {
-			super(chunker, polisher, caller);
-		}
-
-		afterPageLayout(pageFragment, page) {
-			console.log(pageFragment);
-		}
+	window.PagedConfig = {
+		handlers: [
+			{
+				afterPageLayout(pageFragment, page) {
+					console.log(pageFragment);
+				}
+			}
+		]
 	}
-	Paged.registerHandlers(MyHandler);
 </script>
 ```
 
@@ -221,7 +227,7 @@ A `pagedmedia/pagedjs` docker image contains all the dependencies needed to run
 To build the image run
 
 ```bash
-docker build -t pagedmedia/pagedjs .  
+docker build -t pagedmedia/pagedjs .
 ```
 
 By default the container will run the development server with `npm start`

src/polyfill/polyfill.js

@@ -16,31 +16,46 @@ let ready = new Promise(function(resolve, reject){
 	};
 });
 
-let config = window.PagedConfig || {
-	auto: true,
-	before: undefined,
-	after: undefined,
-	content: undefined,
-	stylesheets: undefined,
-	renderTo: undefined
+export let initialize = ({previewer}) => {
+	let config;
+
+	return Promise.resolve(global.PagedConfig)
+		.then((initialConfig) => {
+			// we defer the creation of the config object to when the page is loaded
+			// so as we can create a config object after loading the polyfill
+			config = Object.assign({
+				auto: true,
+				before: undefined,
+				after: undefined,
+				handlers: [],
+				content: undefined,
+				stylesheets: undefined,
+				renderTo: undefined
+			}, initialConfig)
+		})
+		.then(() => {
+			if (Array.isArray(config.handlers)) {
+				return previewer.registerHandlers(...config.handlers)
+			}
+		})
+		.then(() => {
+			if (config.before) {
+				return config.before();
+			}
+		})
+		.then(() => {
+			if(config.auto !== false) {
+				return previewer.preview(config.content, config.stylesheets, config.renderTo);
+			}
+		})
+		.then((previewResult) => {
+			if (config.after) {
+				return config.after(previewResult);
+			}
+		});
 };
 
 let previewer = new Previewer();
-
-ready.then(async function () {
-	let done;
-	if (config.before) {
-		await config.before();
-	}
-
-	if(config.auto !== false) {
-		done = await previewer.preview(config.content, config.stylesheets, config.renderTo);
-	}
-
-
-	if (config.after) {
-		await config.after(done);
-	}
-});
+ready.then(() => initialize({previewer}));
 
 export default previewer;

src/polyfill/polyfill.test.js

+import Polyfill, { initialize } from "./polyfill.js";
+import Handler from "../modules/handler.js";
+import {Handlers, registeredHandlers} from "../utils/handlers.js";
+
+
+describe("Polyfill", () => {
+  class TestHandler extends Handler {
+    afterPageLayout(pageFragment, page) {
+      console.log(pageFragment);
+    }
+  }
+
+  afterEach(() => {
+    delete global.PagedConfig;
+  });
+
+  it("should construct with default options", () => {
+    expect(Polyfill.handlers).toBeInstanceOf(Handlers);
+    expect(Polyfill).toHaveProperty("hooks", {});
+    expect(registeredHandlers).not.toContain(TestHandler);
+  });
+
+  it("should register Handler-based handlers on DOMContentReady", async () => {
+    window.PagedConfig = {
+      handlers: [TestHandler]
+    };
+
+    await initialize({ previewer: Polyfill });
+    expect(registeredHandlers).toContain(TestHandler);
+  });
+
+  it("should register bare object handlers on DOMContentReady", async () => {
+    const afterPageLayout = jest.fn();
+
+    window.PagedConfig = {
+      handlers: [{ afterPageLayout }]
+    };
+
+    await initialize({ previewer: Polyfill });
+    expect(registeredHandlers).toContainEqual({ afterPageLayout });
+  });
+});

src/polyfill/previewer.js

@@ -18,6 +18,9 @@ class Previewer {
 		// Hooks
 		this.hooks = {};
 
+		// Handlers
+		this.handlers = this.initializeHandlers();
+
 		// default size
 		this.size = {
 			width: {
@@ -126,8 +129,6 @@ class Previewer {
 
 		this.polisher.setup();
 
-		this.handlers = this.initializeHandlers();
-
 		await this.polisher.add(...stylesheets);
 
 		let startTime = performance.now();