From 3eb0452241f2b7de6be330711a20d602e0f911e2 Mon Sep 17 00:00:00 2001 From: bkspace Date: Sat, 27 Jun 2020 17:52:38 +0100 Subject: [PATCH 1/3] Add functions to get all current scripts for a store and remove a specific script --- README.md | 17 +++++++ dist/lib/index.js | 41 +++++++++++++++- dist/types/index.d.ts | 2 + package.json | 2 +- src/__tests__/index.spec.ts | 93 ++++++++++++++++++++++++++++--------- src/index.ts | 39 +++++++++++++++- 6 files changed, 167 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index d88b600..bb251b2 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,23 @@ await injectScript( ) ``` +``` +await getScripts( + fetch, + accessToken, + shop, +) +``` + +``` +await deleteScript( + fetch, + accessToken, + shop, + '1234', +) +``` + This function returns a response. It is left to the consumer to handle any possible errors. I expect this library will handle both fetch and a gql client in the near future. ## Development diff --git a/dist/lib/index.js b/dist/lib/index.js index e9664ae..a4b1539 100644 --- a/dist/lib/index.js +++ b/dist/lib/index.js @@ -36,13 +36,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) { } }; Object.defineProperty(exports, "__esModule", { value: true }); -exports.injectScript = void 0; +exports.removeScript = exports.getScripts = exports.injectScript = void 0; exports.injectScript = function (fetch, accessToken, shop, scriptUrl) { return __awaiter(void 0, void 0, void 0, function () { var createScriptTagUrl, shopRequestHeaders, scriptTagBody; return __generator(this, function (_a) { switch (_a.label) { case 0: - createScriptTagUrl = 'https://' + shop + '/admin/api/2020-04/script_tags.json'; + createScriptTagUrl = "https://" + shop + "/admin/api/2020-04/script_tags.json"; shopRequestHeaders = { 'X-Shopify-Access-Token': accessToken, Accept: 'application/json', @@ -63,3 +63,40 @@ exports.injectScript = function (fetch, accessToken, shop, scriptUrl) { return _ } }); }); }; +exports.getScripts = function (fetch, accessToken, shop) { return __awaiter(void 0, void 0, void 0, function () { + var createScriptTagUrl, shopRequestHeaders; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + createScriptTagUrl = "https://" + shop + "/admin/api/2020-04/script_tags.json"; + shopRequestHeaders = { + 'X-Shopify-Access-Token': accessToken, + Accept: 'application/json', + 'Content-Type': 'application/json', + }; + return [4 /*yield*/, fetch(createScriptTagUrl, { + headers: shopRequestHeaders, + })]; + case 1: return [2 /*return*/, _a.sent()]; + } + }); +}); }; +exports.removeScript = function (fetch, accessToken, shop, scriptId) { return __awaiter(void 0, void 0, void 0, function () { + var createScriptTagUrl, shopRequestHeaders; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + createScriptTagUrl = "https://" + shop + "/admin/api/2020-04/script_tags/" + scriptId + ".json"; + shopRequestHeaders = { + 'X-Shopify-Access-Token': accessToken, + Accept: 'application/json', + 'Content-Type': 'application/json', + }; + return [4 /*yield*/, fetch(createScriptTagUrl, { + method: 'DELETE', + headers: shopRequestHeaders, + })]; + case 1: return [2 /*return*/, _a.sent()]; + } + }); +}); }; diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts index af745d5..e2c82a2 100644 --- a/dist/types/index.d.ts +++ b/dist/types/index.d.ts @@ -1 +1,3 @@ export declare const injectScript: (fetch: (url: string, opts: any) => Promise, accessToken: string, shop: string, scriptUrl: string) => Promise; +export declare const getScripts: (fetch: (url: string, opts: any) => Promise, accessToken: string, shop: string) => Promise; +export declare const removeScript: (fetch: (url: string, opts: any) => Promise, accessToken: string, shop: string, scriptId: string) => Promise; diff --git a/package.json b/package.json index 54a02b0..3cda0e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "shopify-script-tags", - "version": "0.0.1", + "version": "0.0.2", "main": "./dist/lib/index.js", "typings": "./dist/types/index.d.ts", "license": "MIT", diff --git a/src/__tests__/index.spec.ts b/src/__tests__/index.spec.ts index e613313..bb23a0d 100644 --- a/src/__tests__/index.spec.ts +++ b/src/__tests__/index.spec.ts @@ -1,26 +1,75 @@ -import { injectScript } from '../' +import { injectScript, getScripts, removeScript } from '../' -describe('injectScript', () => { - it('makes a POST request to add a script tag', async () => { - const mockFetch = jest.fn().mockResolvedValue('foo') - const result = await injectScript( - mockFetch, - 'access_token', - 'my_shop', - 'script_url', - ) +describe('scripts', () => { + describe('injectScript', () => { + it('makes a POST request to add a script tag', async () => { + const mockFetch = jest.fn().mockResolvedValue('foo') + const result = await injectScript( + mockFetch, + 'access_token', + 'my_shop', + 'script_url', + ) + const expectedAPIUri = + 'https://my_shop/admin/api/2020-04/script_tags.json' + const expectedOptions = { + body: '{"script_tag":{"event":"onload","src":"script_url"}}', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + 'X-Shopify-Access-Token': 'access_token', + }, + method: 'POST', + } + expect(result).toEqual('foo') + expect(mockFetch).toHaveBeenCalledWith(expectedAPIUri, expectedOptions) + }) + }) + + describe('getScripts', () => { + it('makes a GET request to retrieve all active script tags', async () => { + const mockFetch = jest.fn().mockResolvedValue('foo') + const result = await getScripts( + mockFetch, + 'access_token', + 'my_shop', + 'script_url', + ) + const expectedAPIUri = + 'https://my_shop/admin/api/2020-04/script_tags.json' + const expectedOptions = { + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + 'X-Shopify-Access-Token': 'access_token', + }, + } + expect(result).toEqual('foo') + expect(mockFetch).toHaveBeenCalledWith(expectedAPIUri, expectedOptions) + }) + }) - const expectedAPIUri = 'https://my_shop/admin/api/2020-04/script_tags.json' - const expectedOptions = { - body: '{"script_tag":{"event":"onload","src":"script_url"}}', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - 'X-Shopify-Access-Token': 'access_token', - }, - method: 'POST', - } - expect(result).toEqual('foo') - expect(mockFetch).toHaveBeenCalledWith(expectedAPIUri, expectedOptions) + describe('removeScript', () => { + it('makes a DELETE request to remove a specific script', async () => { + const mockFetch = jest.fn().mockResolvedValue('foo') + const result = await removeScript( + mockFetch, + 'access_token', + 'my_shop', + 'foobar', + ) + const expectedAPIUri = + 'https://my_shop/admin/api/2020-04/script_tags/foobar.json' + const expectedOptions = { + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + 'X-Shopify-Access-Token': 'access_token', + }, + method: 'DELETE', + } + expect(result).toEqual('foo') + expect(mockFetch).toHaveBeenCalledWith(expectedAPIUri, expectedOptions) + }) }) }) diff --git a/src/index.ts b/src/index.ts index add42fc..2bee391 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,8 +4,7 @@ export const injectScript = async ( shop: string, scriptUrl: string, ): Promise => { - const createScriptTagUrl = - 'https://' + shop + '/admin/api/2020-04/script_tags.json' + const createScriptTagUrl = `https://${shop}/admin/api/2020-04/script_tags.json` const shopRequestHeaders = { 'X-Shopify-Access-Token': accessToken, Accept: 'application/json', @@ -25,3 +24,39 @@ export const injectScript = async ( body: JSON.stringify(scriptTagBody), }) } + +export const getScripts = async ( + fetch: (url: string, opts: any) => Promise, + accessToken: string, + shop: string, +) => { + const createScriptTagUrl = `https://${shop}/admin/api/2020-04/script_tags.json` + const shopRequestHeaders = { + 'X-Shopify-Access-Token': accessToken, + Accept: 'application/json', + 'Content-Type': 'application/json', + } + + return await fetch(createScriptTagUrl, { + headers: shopRequestHeaders, + }) +} + +export const removeScript = async ( + fetch: (url: string, opts: any) => Promise, + accessToken: string, + shop: string, + scriptId: string, +) => { + const createScriptTagUrl = `https://${shop}/admin/api/2020-04/script_tags/${scriptId}.json` + const shopRequestHeaders = { + 'X-Shopify-Access-Token': accessToken, + Accept: 'application/json', + 'Content-Type': 'application/json', + } + + return await fetch(createScriptTagUrl, { + method: 'DELETE', + headers: shopRequestHeaders, + }) +} From 1395dad5951050dff61960ed85f48f71d016883a Mon Sep 17 00:00:00 2001 From: bkspace Date: Sat, 27 Jun 2020 17:54:21 +0100 Subject: [PATCH 2/3] Add a better explaination of how scripts are added --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index bb251b2..e7f508e 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,9 @@ await deleteScript( ) ``` -This function returns a response. It is left to the consumer to handle any possible errors. I expect this library will handle both fetch and a gql client in the near future. +These function return a fetch response. It is left to the consumer to handle any possible errors. I expect this library will handle both fetch and a gql client in the near future. + +Note - you can add the same script multiple times, so injecting a script should be done once, or validate that the script being injected is different and/or versioned. ## Development ```yarn build``` From 810fe8f0f81e65c81be0a279e58d1ef9aba870c6 Mon Sep 17 00:00:00 2001 From: bkspace Date: Sat, 27 Jun 2020 17:55:52 +0100 Subject: [PATCH 3/3] Fix tests --- src/__tests__/index.spec.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/__tests__/index.spec.ts b/src/__tests__/index.spec.ts index bb23a0d..a1103f9 100644 --- a/src/__tests__/index.spec.ts +++ b/src/__tests__/index.spec.ts @@ -29,12 +29,7 @@ describe('scripts', () => { describe('getScripts', () => { it('makes a GET request to retrieve all active script tags', async () => { const mockFetch = jest.fn().mockResolvedValue('foo') - const result = await getScripts( - mockFetch, - 'access_token', - 'my_shop', - 'script_url', - ) + const result = await getScripts(mockFetch, 'access_token', 'my_shop') const expectedAPIUri = 'https://my_shop/admin/api/2020-04/script_tags.json' const expectedOptions = {