feat(SDK): allow passing a config URL to setConfig SDK method.

It now throws an error if the config object (or URL) is invalid.

Author: hatemhosny

docs/docs/sdk/js-ts.mdx

@@ -287,6 +287,10 @@ Type: [`(config: Partial<Config>) => Promise<Config>`](../api/interfaces/Playgro
 
 Loads a new project using the passed configuration object.
 
+If it is a string, it is assumed to be a URL to a JSON file that contains the configuration object.
+
+It throws an error if the config object (or URL) is invalid.
+
 ```js
 import { createPlayground } from 'livecodes';
 

package-lock.json

@@ -74,7 +74,7 @@
     "i18n-lokalise-json": "node ./scripts/i18n-lokalise-json.mjs"
   },
   "dependencies": {
-    "@live-codes/solid-sdk": "0.4.0",
+    "@live-codes/solid-sdk": "0.5.0",
     "@snackbar/core": "1.7.0",
     "codejar": "4.1.1",
     "deep-diff": "1.0.2",

package.json

@@ -5392,8 +5392,18 @@ const createApi = (): API => {
     return JSON.parse(JSON.stringify(config));
   };
 
-  const apiSetConfig = async (newConfig: Partial<Config>): Promise<Config> => {
+  const apiSetConfig = async (newConfig: Partial<Config> | string): Promise<Config> => {
     const currentConfig = getConfig();
+    if (typeof newConfig === 'string') {
+      try {
+        newConfig = (await fetch(newConfig).then((r) => r.json())) as Partial<Config>;
+      } catch {
+        return { error: 'Invalid config URL.' } as any;
+      }
+    }
+    if (!newConfig || typeof newConfig !== 'object') {
+      return { error: 'Invalid config.' } as any;
+    }
     const newAppConfig = buildConfig({ ...currentConfig, ...newConfig });
     const hasNewAppLanguage =
       newConfig.appLanguage && newConfig.appLanguage !== i18n?.getLanguage();

src/livecodes/core.ts

@@ -65,8 +65,7 @@
     const configStr = JSON.stringify(currentConfig || '');
     const currentGeneration = ++generation;
 
-    // avoid race conditions if props change while doing async operations
-    // (e.g. creating playground or fetching config json)
+    // avoid race conditions if props change while doing async operation (creating playground)
     const isStale = () => currentGeneration !== generation;
 
     if (!playground || otherOptionsCache !== otherOptionsStr) {
@@ -88,15 +87,7 @@
     } else {
       if (configCache === configStr) return;
       configCache = configStr;
-
-      if (typeof currentConfig === 'string') {
-        fetch(currentConfig)
-          .then((res) => res.json())
-          .then((json) => {
-            if (isStale()) return;
-            playground?.setConfig(json);
-          });
-      } else if (currentConfig) {
+      if (currentConfig) {
         playground.setConfig(currentConfig);
       }
     }

src/sdk/LiveCodes.svelte

@@ -294,7 +294,7 @@ describe('usePlayground – config changes', () => {
     expect(createPlaygroundMock).toHaveBeenCalledTimes(2);
   });
 
-  test('config as URL string fetches JSON and calls setConfig', async () => {
+  test('config as URL string calls setConfig', async () => {
     const hooks = createFakeHooks();
     const usePlayground = createUsePlayground(hooks);
 
@@ -306,21 +306,12 @@ describe('usePlayground – config changes', () => {
     hooks.flushEffects();
     await flushMicrotasks();
 
-    // Second render – config as URL
-    const fetchedConfig = { title: 'from-url' };
-    global.fetch = jest.fn().mockResolvedValue({
-      json: () => Promise.resolve(fetchedConfig),
-    }) as any;
-
     hooks.resetRefCounter();
     usePlayground({ config: 'https://example.com/config.json' });
     hooks.flushEffects();
     await flushMicrotasks();
 
-    expect(global.fetch).toHaveBeenCalledWith('https://example.com/config.json');
-    expect(mockSetConfig).toHaveBeenCalledWith(fetchedConfig);
-
-    (global.fetch as jest.Mock).mockRestore?.();
+    expect(mockSetConfig).toHaveBeenCalledWith('https://example.com/config.json');
   });
 });
 

src/sdk/__tests__/use-playground.spec.ts

@@ -432,25 +432,17 @@ describe('<live-codes> – generation-based staleness', () => {
 });
 
 describe('<live-codes> – config URL fetch', () => {
-  test('config set to URL string fetches JSON and calls setConfig', async () => {
+  test('config set to URL string calls setConfig', async () => {
     const el = document.createElement('live-codes') as any;
     document.body.appendChild(el);
     await flushMicrotasks();
 
     expect(createPlaygroundMock).toHaveBeenCalledTimes(1);
 
-    const fetchedConfig = { title: 'fetched' };
-    global.fetch = jest.fn().mockResolvedValue({
-      json: () => Promise.resolve(fetchedConfig),
-    }) as any;
-
     el.config = 'https://example.com/config.json';
     await flushMicrotasks();
 
-    expect(global.fetch).toHaveBeenCalledWith('https://example.com/config.json');
-    expect(mockSetConfig).toHaveBeenCalledWith(fetchedConfig);
-
-    (global.fetch as jest.Mock).mockRestore?.();
+    expect(mockSetConfig).toHaveBeenCalledWith('https://example.com/config.json');
   });
 });
 

src/sdk/__tests__/web-components.spec.ts

@@ -1455,6 +1455,10 @@ export interface API {
 
   /**
    * Loads a new project using the passed configuration object.
+   * If the config is a string, it is assumed to be a URL to a JSON file that contains the configuration object.
+   *
+   * @throws It throws an error if the config object (or URL) is invalid.
+   *
    * @example
    * ```ts
    * import { createPlayground } from "livecodes";
@@ -1471,7 +1475,7 @@ export interface API {
    * });
    * ```
    */
-  setConfig: (config: Partial<Config>) => Promise<Config>;
+  setConfig: (config: Partial<Config> | string) => Promise<Config>;
 
   /**
    * Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.

src/sdk/models.ts

@@ -69,8 +69,7 @@ export function createUsePlayground(hooks: Hooks): (props: Props) => PlaygroundH
         ...otherOptions
       } = props;
 
-      // avoid race conditions if props change while doing async operations
-      // (e.g. creating playground or fetching config json)
+      // avoid race conditions if props change while doing async operation (creating playground)
       const generation = ++generationRef.current;
       const isStale = () => generationRef.current !== generation || unmountedRef.current;
 
@@ -96,15 +95,7 @@ export function createUsePlayground(hooks: Hooks): (props: Props) => PlaygroundH
         const configStr = JSON.stringify(config);
         if (configCacheRef.current === configStr) return;
         configCacheRef.current = configStr;
-
-        if (typeof config === 'string') {
-          fetch(config)
-            .then((res) => res.json())
-            .then((json) => {
-              if (isStale()) return;
-              playgroundRef.current?.setConfig(json);
-            });
-        } else if (config) {
+        if (config) {
           playgroundRef.current.setConfig(config);
         }
       }

src/sdk/use-playground.ts

@@ -109,8 +109,7 @@ const LiveCodes: LiveCodesComponent = {
     let otherOptionsCache = JSON.stringify(otherOptions);
     let generation = 0;
 
-    // avoid race conditions if props change while doing async operations
-    // (e.g. creating playground or fetching config json)
+    // avoid race conditions if props change while doing async operation (creating playground)
     const isStale = (gen: number) => gen !== generation;
 
     onMounted(() => {
@@ -151,12 +150,7 @@ const LiveCodes: LiveCodesComponent = {
         });
       } else if (JSON.stringify(config) !== configCache) {
         configCache = JSON.stringify(config);
-
-        if (typeof config === 'string') {
-          const json = await fetch(config).then((res) => res.json());
-          if (isStale(currentGeneration)) return;
-          playground.value?.setConfig(json);
-        } else if (config) {
+        if (config) {
           playground.value.setConfig((clone(config) as any) || {});
         }
       }