Improve loading

e2e/specs/sdk-options.spec.ts

@@ -0,0 +1,120 @@
+import { expect } from '@playwright/test';
+import { compressToEncodedURIComponent } from 'lz-string';
+import { getPlaygroundUrl, type Config, type EmbedOptions } from '../../src/sdk/index';
+import { getLoadedApp, waitForEditorFocus } from '../helpers';
+import { test } from '../test-fixtures';
+
+test.describe('SDK options', () => {
+  test('params', async ({ page, getTestUrl }) => {
+    const params: EmbedOptions['params'] = {
+      md: `# Hello, World!`,
+      css: `h1 { color: red; }`,
+    };
+
+    const url = getPlaygroundUrl({ appUrl: getTestUrl(), params });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, World!');
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)');
+  });
+
+  test('config', async ({ page, getTestUrl }) => {
+    const config: Partial<Config> = {
+      markup: {
+        language: 'markdown',
+        content: `# Hello, World!`,
+      },
+      style: {
+        language: 'css',
+        content: `h1 { color: red; }`,
+      },
+    };
+
+    const url = getPlaygroundUrl({ appUrl: getTestUrl(), config });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, World!');
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)');
+  });
+
+  test('template', async ({ page, getTestUrl }) => {
+    const url = getPlaygroundUrl({ appUrl: getTestUrl(), template: 'typescript' });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, TypeScript!');
+  });
+
+  test('import', async ({ page, getTestUrl }) => {
+    const url = getPlaygroundUrl({
+      appUrl: getTestUrl(),
+      import: 'https://hatemhosny.github.io/typescript-demo-for-testing-import-/',
+    });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const titleText = await getResult().innerText('h1');
+    expect(titleText).toBe('Hello, World!');
+  });
+
+  test('options override: template -> import -> config -> params', async ({ page, getTestUrl }) => {
+    const url = getPlaygroundUrl({
+      appUrl: getTestUrl(),
+      template: 'react',
+      import:
+        'code/' +
+        compressToEncodedURIComponent(
+          JSON.stringify({
+            style: {
+              language: 'css',
+              content: `h1 { color: green; }`,
+            },
+            stylesheets: ['data:text/css,h2 { color: blue; }'],
+          }),
+        ),
+      config: {
+        markup: {
+          language: 'markdown',
+          content: `## Hello, from config!`,
+        },
+      },
+      params: {
+        css: `h1 { color: red; }`,
+      },
+    });
+    await page.goto(url);
+
+    const { app, getResult, waitForResultUpdate } = await getLoadedApp(page);
+
+    await waitForEditorFocus(app);
+    await waitForResultUpdate();
+
+    const h1 = await getResult().innerText('h1');
+    expect(h1).toBe('Hello, React!');
+    const h2 = await getResult().innerText('h2');
+    expect(h2).toBe('Hello, from config!');
+    expect(await getResult().$eval('h1', (e) => getComputedStyle(e).color)).toBe('rgb(255, 0, 0)');
+    expect(await getResult().$eval('h2', (e) => getComputedStyle(e).color)).toBe('rgb(0, 0, 255)');
+  });
+});

src/livecodes/UI/create-language-menus.ts

@@ -17,7 +17,7 @@ export const createLanguageMenus = (
   eventsManager: EventsManager,
   showLanguageInfo: (languageInfo: HTMLElement) => void,
   loadStarterTemplate: (templateName: Template['name']) => void,
-  importCode: (options: { url: string }) => Promise<boolean>,
+  importCode: (options: { importUrl: string }) => Promise<boolean>,
   registerMenuButton: (menu: HTMLElement, button: HTMLElement) => void,
 ) => {
   const editorIds: EditorId[] = ['markup', 'style', 'script'];
@@ -143,7 +143,7 @@ export const createLanguageMenus = (
                 'click',
                 async (event) => {
                   event.preventDefault();
-                  importCode({ url: codeUrl });
+                  importCode({ importUrl: codeUrl });
                 },
                 false,
               );

src/livecodes/config/build-config.ts

@@ -140,6 +140,7 @@ export const getParams = (
     if (params[key] === 'true') params[key] = true;
     if (params[key] === 'false') params[key] = false;
   });
+  params.x ??= params.import;
   return params;
 };