apply config

e2e/specs/starter.spec.ts

@@ -278,7 +278,7 @@ test.describe('Starter Templates from UI', () => {
 
     await waitForEditorFocus(app);
     await waitForResultUpdate();
-    await app.waitForTimeout(3_000);
+    await app.waitForTimeout(6_000);
 
     const titleText = await getResult().innerText('h1');
     expect(titleText).toBe('Hello, PHP!');
@@ -788,7 +788,7 @@ test.describe('Starter Templates from URL', () => {
 
     await waitForEditorFocus(app);
     await waitForResultUpdate();
-    await app.waitForTimeout(3_000);
+    await app.waitForTimeout(6_000);
 
     const titleText = await getResult().innerText('h1');
     expect(titleText).toBe('Hello, PHP!');

src/livecodes/core.ts

@@ -1166,18 +1166,38 @@ const loadConfig = async (
 
   // load config
   await bootstrap(true);
-
-  updateUI(config);
+  await applyConfig(config);
 
   changingContent = false;
 };
 
-const updateUI = (config: Config) => {
-  window.deps.showMode(config.mode);
-  configureToolsPane(config.tools, config.mode);
-  if (config.autotest) {
+const applyConfig = async (newConfig: Partial<Config>) => {
+  if (!isEmbed) {
+    loadSettings(getConfig());
+  }
+  if (newConfig.mode) {
+    window.deps.showMode(newConfig.mode);
+  }
+  if (newConfig.tools) {
+    configureToolsPane(newConfig.tools, newConfig.mode);
+  }
+  if (newConfig.zoom) {
+    zoom(newConfig.zoom);
+  }
+  if (newConfig.theme) {
+    setTheme(newConfig.theme);
+  }
+  if (newConfig.autotest) {
     UI.getWatchTestsButton()?.classList.remove('disabled');
   }
+  const editorConfig = {
+    ...getEditorConfig(newConfig as Config),
+    ...getFormatterConfig(newConfig as Config),
+  };
+  const hasEditorConfig = Object.values(editorConfig).some((value) => value != null);
+  if (hasEditorConfig) {
+    await reloadEditors({ ...getConfig(), ...newConfig });
+  }
 };
 
 const setUserConfig = (newConfig: Partial<UserConfig> | null, save = true) => {
@@ -3719,29 +3739,30 @@ const configureToolsPane = (
   tools: Config['tools'] | undefined,
   mode: Config['mode'] | undefined,
 ) => {
+  if (!toolsPane) return;
   if (mode === 'result' && (!tools || tools.status === '' || tools.status === 'none')) {
-    toolsPane?.hide();
+    toolsPane.hide();
     return;
   }
   if (tools?.active) {
-    toolsPane?.setActiveTool(tools.active);
+    toolsPane.setActiveTool(tools.active);
   }
   if (!tools) {
-    toolsPane?.close();
+    toolsPane.close();
     return;
   }
   if (tools.status === 'none') {
-    toolsPane?.hide();
+    toolsPane.hide();
     return;
   }
   if (tools.status === 'full') {
-    toolsPane?.maximize();
+    toolsPane.maximize();
   }
   if (tools.status === 'open') {
-    toolsPane?.open();
+    toolsPane.open();
   }
   if (tools.status === 'closed' || tools.status === '') {
-    toolsPane?.close();
+    toolsPane.close();
   }
   // TODO: handle tools.enabled
 };
@@ -4139,18 +4160,17 @@ const createApi = (): API => {
   };
 
   const apiSetConfig = async (newConfig: Partial<Config>): Promise<Config> => {
-    const newAppConfig = {
+    const newAppConfig: Config = {
       ...getConfig(),
       ...buildConfig(newConfig),
     };
-
-    // TODO: apply changes in App AppConfig, UserConfig & EditorConfig
-    if (newAppConfig.mode !== getConfig().mode) {
-      window.deps.showMode(newAppConfig.mode);
-    }
-
     setConfig(newAppConfig);
-    await loadConfig(newAppConfig);
+    await applyConfig(newConfig);
+    const content = getContentConfig(newConfig as Config);
+    const hasContent = Object.values(content).some((value) => value != null);
+    if (hasContent) {
+      await loadConfig(newAppConfig);
+    }
     return newAppConfig;
   };
 

src/livecodes/languages/ruby-wasm/lang-ruby-wasm-script.ts

@@ -34,7 +34,8 @@ livecodes.rubyWasm.run =
     await init(hasImports(code));
     const { DefaultRubyVM } = (window as any)['ruby-wasm-wasi'];
     const { vm } = await DefaultRubyVM(livecodes.rubyWasm.module);
-    vm.eval(code);
+    const patch = code.includes('$0') ? '$0 = __FILE__\\n' : '';
+    vm.eval(patch + code);
     parent.postMessage({ type: 'loading', payload: false }, '*');
   });
 

src/livecodes/languages/ruby/lang-ruby.ts

@@ -30,7 +30,8 @@ export const ruby: LanguageSpecs = {
           'ruby',
           config,
         );
-        return (self as any).Opal.compile(code, options);
+        const patch = code.includes('$0') ? '$0 = __FILE__\\n' : '';
+        return (self as any).Opal.compile(patch + code, options);
       };
     },
     scripts: ({ compiled, config }) => {

src/livecodes/templates/starter/php-wasm-starter.ts

@@ -29,6 +29,7 @@ body {
   script: {
     language: 'php-wasm',
     content: `
+<?php
 $title = 'PHP';
 vrzno_eval('document.getElementById("title").innerText = "' . $title . '"');