feat: lazy load fetch ponyfill when needed

prismicio · Aug 19, 2021 · bee79c2 · bee79c2
1 parent 3245a5c
commit bee79c2
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 13 deletions.
diff --git a/src/createPrismic.ts b/src/createPrismic.ts
@@ -1,11 +1,12 @@
 import { App } from "vue";
-import isomorphicUnfetch from "isomorphic-unfetch";
 
 import {
 	createClient,
 	getEndpoint,
 	predicate,
 	cookie,
+	Client,
+	FetchLike,
 } from "@prismicio/client";
 import {
 	asDate,
@@ -44,19 +45,40 @@ import type {
  */
 export const createPrismic = (options: PrismicPluginOptions): PrismicPlugin => {
 	// Create plugin client
+	let client: Client;
+	if (options.client) {
+		client = options.client;
+	} else {
+		const endpoint =
+			/** @see Regex101 expression: {@link https://regex101.com/r/GT2cl7/1} */
+			/^(https?:)?\/\//gim.test(options.endpoint)
+				? options.endpoint
+				: getEndpoint(options.endpoint);
+
+		if (
+			options.clientConfig &&
+			typeof options.clientConfig.fetch === "function"
+		) {
+			client = createClient(endpoint, options.clientConfig);
+		} else {
+			client = createClient(endpoint, {
+				...options.clientConfig,
+				fetch: async (endpoint, options) => {
+					let fetchFunction: FetchLike;
+					if (typeof globalThis.fetch === "function") {
+						fetchFunction = globalThis.fetch;
+					} else {
+						fetchFunction = (await import("isomorphic-unfetch")).default;
+					}
+
+					return await fetchFunction(endpoint, options);
+				},
+			});
+		}
+	}
+
 	const prismicClient: PrismicPluginClient = {
-		client: options.client
-			? options.client
-			: createClient(
-					/** @see Regex101 expression: {@link https://regex101.com/r/GT2cl7/1} */
-					/^(https?:)?\/\//gim.test(options.endpoint)
-						? options.endpoint
-						: getEndpoint(options.endpoint),
-					{
-						fetch: isomorphicUnfetch,
-						...options.clientConfig,
-					},
-			  ),
+		client,
 		predicate,
 		cookie,
 	};

diff --git a/test/createPrismic-client.test.ts b/test/createPrismic-client.test.ts
@@ -61,3 +61,63 @@ test("uses provided client", (t) => {
 	t.is(wrapper.vm.$prismic.client, client);
 	t.is(wrapper.vm.$prismic.client.endpoint, client.endpoint);
 });
+
+test("uses provided fetch function", (t) => {
+	const spiedFetch = sinon.spy();
+
+	const prismic = createPrismic({
+		endpoint: "test",
+		clientConfig: {
+			fetch: spiedFetch,
+		},
+	});
+
+	const wrapper = mount(WrapperComponent, {
+		global: {
+			plugins: [prismic],
+		},
+	});
+
+	t.is(wrapper.vm.$prismic.client.fetchFn, spiedFetch);
+	t.false(spiedFetch.called);
+	wrapper.vm.$prismic.client.fetchFn("foo", {});
+	t.is(spiedFetch.callCount, 1);
+});
+
+test("uses `globalThis` fetch function when available", (t) => {
+	// `globalThis.fetch` does not exists in our Node.js context
+	const fetchStub = (globalThis.fetch = sinon.stub());
+
+	const prismic = createPrismic({ endpoint: "test" });
+
+	const wrapper = mount(WrapperComponent, {
+		global: {
+			plugins: [prismic],
+		},
+	});
+
+	t.false(fetchStub.called);
+	wrapper.vm.$prismic.client.fetchFn("foo", {});
+	t.is(fetchStub.callCount, 1);
+
+	// @ts-expect-error `globalThis.fetch` does not exists in our Node.js context
+	delete globalThis.fetch;
+});
+
+test("uses `isomorphic-unfetch` when `globalThis` fetch function is not available", async (t) => {
+	const prismic = createPrismic({ endpoint: "test" });
+
+	const wrapper = mount(WrapperComponent, {
+		global: {
+			plugins: [prismic],
+		},
+	});
+
+	// We test for fetch to throw by providing invalid arguments
+	await t.throwsAsync(
+		async () => {
+			await wrapper.vm.$prismic.client.fetchFn("foo", {});
+		},
+		{ instanceOf: TypeError, message: "Only absolute URLs are supported" },
+	);
+});