Skip to content

CheerpJ loader now is called directly from path stored in .env #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+13 −30
Open

CheerpJ loader now is called directly from path stored in .env #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .env
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
data-domain="javafiddle.leaningtech.com"
src="https://plausible.leaningtech.com/js/script.js"
></script>
<script
defer
src="https://cjrtnc.leaningtech.com/4.0/loader.js"
></script> <!-- scripts for CheerpJ loader -->
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="overflow-hidden">
Expand Down
36 changes: 9 additions & 27 deletions src/lib/CheerpJ.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,14 @@
<script lang="ts">
import { PUBLIC_CHEERPJ_ORIGIN } from '$env/static/public';
import { onMount, createEventDispatcher } from 'svelte';
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{ ready: undefined }>();

export let display: HTMLElement;

let promise: Promise<string | void> = new Promise(() => {});

let error = false;

// Load build of CheerpJ by getting url from LATEST.txt and placing it in script tag
onMount(() => {
promise = fetch(`${PUBLIC_CHEERPJ_ORIGIN}/LATEST.txt`)
.then((res) => res.text())
.then((text) => text.trim())
.catch((err) => {
console.error('Error loading CheerpJ', err);
error = true;
});
});

async function onLoad() {
// CheerpJ funcs should be available now
if (!cheerpjInit || !display) {
if (!cheerpjInit) {
error = true;
return;
}
Expand All @@ -31,20 +17,16 @@
status: 'none',
javaProperties: ['java.library.path=/app/cheerpj-natives/natives']
});

cheerpjCreateDisplay(-1, -1, display);
dispatch('ready');
}
</script>

<svelte:head>
{#await promise}
<!-- CheerpJ is loading -->
{:then src}
{#if src}
<script {src} on:load={onLoad}></script>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Build the script using the svelte syntax, we can hardcode the known URL and remove the onMount handler

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you are suggesting to do something like this:

<svelte:head>
    <script {src} on:load={onLoad}></script>
</svelte:head>

It will not work, that is way I used raw js instead.
I also saw some posts on github addressing the same problem; if we do not want to stick with ugly js, a possible solution would be to upgrade svelteKit to a newer version, but I'm not sure about that.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need onLoad at all. If the script is directly added to the page then you are guaranteed that by the time later scripts are executed the loader is ready to be used.

{/if}
{/await}
</svelte:head>
if (typeof window !== 'undefined') { // so it doesn't run server-side
onLoad();
}

</script>

{#if error}
<strong class="p-3">Error loading CheerpJ</strong>
Expand Down