live-codes / livecodes

Code Playground That Just Works!

Home Page:https://livecodes.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug: result-utils included in exported source

aehlke opened this issue · comments

Describe the bug

When I use the SDK to export the built source, I don't expect result-utils to be included when it has logic that only applies for running inside of the livecodes iframe sandbox.

Steps to reproduce

Configure a simple project with HTML/JS. Export the source code via SDK and run standalone in a new browser tab.

Affected services

LiveCodes App, LiveCodes SDK

Platforms

No response

Browsers

No response

Environment

No response

Share URL(s)

No response

Configuration

No response

Additional context

No response

Is it already fixed?

None

Code of Conduct

  • I agree to follow this project's Code of Conduct

Contributing Docs

  • I agree to follow this project's Contribution Docs

@aehlke

Yes, I confirm your finding. This should be fixed soon.
Thanks for reporting.

@aehlke
that is now fixed

You may try it with the appUrl: https://dev.livecodes.io

<div id="container"></div>
<script type="module">
import { createPlayground } from 'https://unpkg.com/livecodes@0.1.2';

createPlayground('#container', {
  appUrl: 'https://dev.livecodes.io',
  params: {
    markdown: '# Hello LiveCodes!',
    css: 'h1 {color: blue;}',
  },
}).then(async (playground) => {
  console.log((await playground.getCode()).result);
});
</script>

this should be available on livecodes.io in the next release.

thank you again for reporting.

Thanks very much! I will confirm soon.

I applied your patch to my livecodes fork (which is still a few weeks behind, but it looked like your changes in this PR could be applied cleanly), but it still loads results-util.html and shows it's being used in the console...

Here is my usage:

    let playground = await playgroundPromise;
    await playground.setConfig({
        markup: { language: markupLanguage, content: markupContent },
        style: { language: styleLanguage, content: styleContent },
        script: { language: scriptLanguage, content: scriptContent },
    });
    let code = await playground.getCode();
    let resultPageHTML = code.result;
    return resultPageHTML;

I'll try upgrading to latest livecodes next but I suspect I'll see the same issue

Never mind my last message, must have had something cached - looks like it's working now, thank you

I have just released app v13 and SDK v0.2.0, which have the fix among other improvements: https://github.com/live-codes/livecodes/releases

this is your sample with minimal changes:

<div id="container"></div>
<script type="module">
  import { createPlayground } from "https://unpkg.com/livecodes@0.2.0";
  let playground = await createPlayground("#container");
  await playground.setConfig({
    markup: { language: "html", content: "hi" },
    style: { language: "css", content: "body { color: blue; }" },
    script: { language: "js", content: 'console.log("hi");' },
  });
  let code = await playground.getCode();
  let resultPageHTML = code.result;
  console.log(resultPageHTML);
</script>

This is the console output:

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Untitled Project</title><style id="__livecodes_styles__">body { color: blue; }</style></head><body>hi<script>console.log("hi");</script></body></html>

open in LiveCodes

This version also introduced a headless mode which opens a lot of capabilities.

In the last example you would just change this:

let playground = await createPlayground("#container");

to this

let playground = await createPlayground({ view: 'headless' });

open in LiveCodes

Amazing, thanks for the update!

I'm already hiding these webviews in my app such that I'm not sure there's a functional/user-facing difference with headless mode for my usage, but this simplifies the integration a bit and lightens resource usage I'm sure, so that's appreciated. I'll try it soon.

Indeed there is a definite performance advantage for using headless mode, where all resources required for the UI are not loaded.