Skip to content

avoid webcontainer support detection #395

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.

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

Merged
merged 1 commit into from
May 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 0 additions & 5 deletions src/lib/client/adapters/webcontainer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import AnsiToHtml from 'ansi-to-html';
import * as yootils from 'yootils';
import { escape_html, get_depth } from '../../../utils.js';
import { ready } from '../common/index.js';
import { isWebContainerSupported } from './utils.js';

/**
* @typedef {import("../../../../routes/tutorial/[slug]/state.js").CompilerWarning} CompilerWarning
Expand All @@ -26,10 +25,6 @@ let vm;
* @returns {Promise<import('$lib/types').Adapter>}
*/
export async function create(base, error, progress, logs, warnings) {
if (!isWebContainerSupported()) {
throw new Error('WebContainers are not supported by Safari 16.3 or earlier');
}

progress.set({ value: 0, text: 'loading files' });

const q = yootils.queue(1);
Expand Down
30 changes: 0 additions & 30 deletions src/lib/client/adapters/webcontainer/utils.js

This file was deleted.

106 changes: 56 additions & 50 deletions src/routes/tutorial/[slug]/Loading.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<script>
import { isWebContainerSupported } from "$lib/client/adapters/webcontainer/utils.js";

/** @type {boolean} */
export let initial;

Expand All @@ -14,54 +12,59 @@
export let status;
</script>

<div class="loading" class:error>
<div class="loading">
{#if error}
{#if !isWebContainerSupported()}
<p>This app requires modern web platform features. Please use a browser other than Safari.</p>
{:else}
<div class="error">
<div>
<h2>Yikes!</h2>
{#if error.message === 'Your browser does not support all necessary features'}
<p>
This app requires modern web platform features. Please use a browser other than Safari.
</p>
{:else if /firefox/i.test(navigator.userAgent)}
<p>
We couldn't start the app. Please ensure
<a
target="_blank"
rel="noreferrer"
href="https://support.mozilla.org/en-US/kb/third-party-cookies-firefox-tracking-protection"
>
third party cookies
</a> are enabled for this site, and disable Enhanced Tracking Protection.
</p>
<p>
If you have 'Delete cookies and site data when Firefox is closed' enabled in
<code>about:preferences#privacy</code>, make sure <code>learn.svelte.dev</code> is included
as an exception.
</p>
{:else if /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent)}
<p>
We couldn't start the app. Please ensure third party cookies are enabled for this site —
click the
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
style="width: 1em; height: 1em; position: relative; top: 0.1em; margin: 0 0.2em; transform: scale(1.2)"
>
<title>eye</title>
<path
fill="#666"
d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
/>
</svg>
icon in the URL bar or go to
<code>chrome://settings/cookies</code> and add <code>learn.svelte.dev</code> to 'Sites that
can always use cookies'.
</p>
{:else}
<p>
We couldn't start the app. Please ensure third party cookies are enabled for this site.
</p>
{/if}
</div>

<small>{error.message}</small>
<h2>Yikes!</h2>
{#if /firefox/i.test(navigator.userAgent)}
<p>
We couldn't start the app. Please ensure
<a
target="_blank"
rel="noreferrer"
href="https://support.mozilla.org/en-US/kb/third-party-cookies-firefox-tracking-protection"
>
third party cookies
</a> are enabled for this site, and disable Enhanced Tracking Protection.
</p>
<p>
If you have 'Delete cookies and site data when Firefox is closed' enabled in
<code>about:preferences#privacy</code>, make sure <code>learn.svelte.dev</code> is included
as an exception.
</p>
{:else if /chrome/i.test(navigator.userAgent) && !/edg/i.test(navigator.userAgent)}
<p>
We couldn't start the app. Please ensure third party cookies are enabled for this site —
click the
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
style="width: 1em; height: 1em; position: relative; top: 0.1em; margin: 0 0.2em; transform: scale(1.2)"
>
<title>eye</title>
<path
fill="#666"
d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
/>
</svg>
icon in the URL bar or go to
<code>chrome://settings/cookies</code> and add <code>learn.svelte.dev</code> to 'Sites that
can always use cookies'.
</p>
{:else}
<p>
We couldn't start the app. Please ensure third party cookies are enabled for this site.
</p>
{/if}
{/if}
</div>
{:else}
<svg width="107" height="128" viewBox="0 0 107 128">
<path
Expand Down Expand Up @@ -118,8 +121,11 @@
}

.error {
align-items: start;
justify-content: start;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

h2 {
Expand Down