chore: localize fetch-json to avoid importing old CJS package (#1300)

* chore: localize fetch-json to avoid importing old CJS package
- rewrite fetch-jsonp as ESM but only locally since this is only used for demo purposes

* chore: fix build

Author: ghiscoding

packages/demo/package.json

@@ -74,7 +74,6 @@
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
     "dompurify": "^3.2.2",
-    "fetch-jsonp": "^1.3.0",
     "html-webpack-plugin": "^5.6.3",
     "htmlhint": "^1.1.4",
     "isomorphic-fetch": "^3.0.0",

packages/demo/src/examples/slickgrid/example3.ts

@@ -1,8 +1,6 @@
 import { IHttpClient } from '@aurelia/fetch-client';
 import { newInstanceOf, resolve } from '@aurelia/kernel';
 import { I18N } from '@aurelia/i18n';
-import fetchJsonp from 'fetch-jsonp';
-
 import {
   type AureliaGridInstance,
   type AutocompleterOption,
@@ -20,8 +18,10 @@ import {
   SortComparers,
   type VanillaCalendarOption,
 } from 'aurelia-slickgrid';
+
 import { CustomInputEditor } from './custom-inputEditor';
 import { CustomInputFilter } from './custom-inputFilter';
+import fetchJsonp from './jsonp';
 
 const NB_ITEMS = 100;
 const URL_SAMPLE_COLLECTION_DATA = 'assets/data/collection_100_numbers.json';
@@ -279,7 +279,7 @@ export class Example3 {
               // this.http.get(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`).subscribe(data => updateCallback(data));
 
               /** with JSONP AJAX will work locally but not on the GitHub demo because of CORS */
-              fetchJsonp(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`)
+              fetchJsonp<string[]>(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`, { crossorigin: true })
                 .then((response: { json: () => Promise<any[]> }) => response.json())
                 .then((json: any[]) => updateCallback(json))
                 .catch((ex) => console.log('invalid JSONP response', ex));
@@ -298,7 +298,7 @@ export class Example3 {
           filterOptions: {
             minLength: 3,
             fetch: (searchText: string, updateCallback: (items: false | any[]) => void) => {
-              fetchJsonp(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`)
+              fetchJsonp<string[]>(`http://gd.geobytes.com/AutoCompleteCity?q=${searchText}`, { crossorigin: true })
                 .then((response: { json: () => Promise<any[]> }) => response.json())
                 .then((json: any[]) => updateCallback(json))
                 .catch((ex: any) => console.log('invalid JSONP response', ex));

packages/demo/src/examples/slickgrid/jsonp.ts

@@ -0,0 +1,89 @@
+/*
+ * copied and rewritten as ESM (just a simple rewrite as ESM to avoid loading a CJS package)
+ * https://github.com/camsong/fetch-jsonp/blob/master/src/fetch-jsonp.js
+ */
+
+interface JsonpOptions {
+  timeout: number;
+  jsonpCallback: string;
+  jsonpCallbackFunction: string;
+  charset: string;
+  nonce: string;
+  referrerPolicy: string;
+  crossorigin: boolean;
+};
+
+const defaultOptions = {
+  timeout: 5000,
+  jsonpCallback: 'callback',
+  jsonpCallbackFunction: null,
+};
+const generateCallbackFunction = () => `jsonp_${Date.now()}_${Math.ceil(Math.random() * 100000)}`;
+const clearFunction = (functionName: string) => delete (window as any)[functionName];
+const removeScript = (scriptId: string) => {
+  const script = document.getElementById(scriptId);
+  if (script) {
+    document.getElementsByTagName('head')[0].removeChild(script);
+  }
+};
+
+function fetchJsonp<T = any>(_url: string, options: Partial<JsonpOptions> = {}): Promise<{ ok: boolean; json: () => Promise<T>; }> {
+  // to avoid param reassign
+  let url = _url;
+  const timeout = options.timeout || defaultOptions.timeout;
+  const jsonpCallback = options.jsonpCallback || defaultOptions.jsonpCallback;
+  let timeoutId: any;
+
+  return new Promise((resolve, reject) => {
+    const callbackFunction = options.jsonpCallbackFunction || generateCallbackFunction();
+    const scriptId = `${jsonpCallback}_${callbackFunction}`;
+
+    (window as any)[callbackFunction] = (response: T) => {
+      // keep consistent with fetch API
+      resolve({ ok: true, json: () => Promise.resolve(response) });
+      if (timeoutId) clearTimeout(timeoutId);
+      removeScript(scriptId);
+      clearFunction(callbackFunction);
+    };
+
+    // Check if the user set their own params, and if not add a ? to start a list of params
+    url += (url.indexOf('?') === -1) ? '?' : '&';
+
+    const jsonpScript = document.createElement('script');
+    jsonpScript.setAttribute('src', `${url}${jsonpCallback}=${callbackFunction}`);
+    if (options.charset) {
+      jsonpScript.setAttribute('charset', options.charset);
+    }
+    if (options.nonce) {
+      jsonpScript.setAttribute('nonce', options.nonce);
+    }
+    if (options.referrerPolicy) {
+      jsonpScript.setAttribute('referrerPolicy', options.referrerPolicy);
+    }
+    if (options.crossorigin) {
+      jsonpScript.setAttribute('crossorigin', 'true');
+    }
+    jsonpScript.id = scriptId;
+    document.getElementsByTagName('head')[0].appendChild(jsonpScript);
+
+    timeoutId = setTimeout(() => {
+      reject(new Error(`JSONP request to ${_url} timed out`));
+
+      clearFunction(callbackFunction);
+      removeScript(scriptId);
+      (window as any)[callbackFunction] = () => {
+        clearFunction(callbackFunction);
+      };
+    }, timeout);
+
+    // Caught if got 404/500
+    jsonpScript.onerror = () => {
+      reject(new Error(`JSONP request to ${_url} failed`));
+      clearFunction(callbackFunction);
+      removeScript(scriptId);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  });
+}
+
+export default fetchJsonp;