ScCN/packager
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap <Section> contents in a <div>

Browse Source 
Svelte generates slightly shorter code like this
This commit is contained in:
Thomas Weber committed 2021-09-09 18:25:59 -05:00
1 parent 7f88aeea5c
commit f36c58a745
2 files changed
+355 -341
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/p4/P4.svelte
+30 -28
View File
@@ -103,34 +103,36 @@
<main aria-hidden={modalVisible} class:is-not-safari={!isSafari}>
<Section accent="#ff4c4c">
<h1>{LONG_NAME}</h1>
<p>{$_('p4.description1')}</p>
<p>
<ComplexMessage
message={$_('p4.description2')}
values={{
embedding: {
text: $_('p4.description2-embedding'),
href: 'https://docs.turbowarp.org/embedding'
}
}}
/>
</p>
<p>
<ComplexMessage
message={$_('p4.description3')}
values={{
onScratch: {
text: $_('p4.description3-scratch'),
href: FEEDBACK_SCRATCH
},
onGitHub: {
text: $_('p4.description3-github'),
href: FEEDBACK_GITHUB
}
}}
/>
</p>
<div>
<h1>{LONG_NAME}</h1>
<p>{$_('p4.description1')}</p>
<p>
<ComplexMessage
message={$_('p4.description2')}
values={{
embedding: {
text: $_('p4.description2-embedding'),
href: 'https://docs.turbowarp.org/embedding'
}
}}
/>
</p>
<p>
<ComplexMessage
message={$_('p4.description3')}
values={{
onScratch: {
text: $_('p4.description3-scratch'),
href: FEEDBACK_SCRATCH
},
onGitHub: {
text: $_('p4.description3-github'),
href: FEEDBACK_GITHUB
}
}}
/>
</p>
</div>
</Section>
{#if isSupported}
src/p4/PackagerOptions.svelte
+325 -313
View File
@@ -187,367 +187,379 @@
</style>
<Section accent="#FFAB19">
<h2>{$_('options.runtimeOptions')}</h2>
<div>
<h2>{$_('options.runtimeOptions')}</h2>
<label>
<input type="checkbox" bind:checked={$options.turbo}>
{$_('options.turbo')}
</label>
<label>
{$_('options.framerate')}
<input type="number" min="0" max="240" bind:value={$options.framerate}>
<LearnMore slug="custom-fps" />
</label>
<label>
<input type="checkbox" bind:checked={$options.interpolation}>
{$_('options.interpolation')}
<LearnMore slug="interpolation" />
</label>
<label>
<input type="checkbox" bind:checked={$options.highQualityPen}>
{$_('options.highQualityPen')}
<LearnMore slug="high-quality-pen" />
</label>
<label>
<input type="checkbox" checked={$options.maxClones === ALMOST_INFINITY} on:change={(e) => {
$options.maxClones = e.target.checked ? ALMOST_INFINITY : 300;
}}>
{$_('options.infiniteClones')}
<LearnMore slug="infinite-clones" />
</label>
<label>
<input type="checkbox" checked={!$options.fencing} on:change={(e) => {
$options.fencing = !e.target.checked;
}}>
{$_('options.removeFencing')}
<LearnMore slug="remove-fencing" />
</label>
<label>
<input type="checkbox" checked={!$options.miscLimits} on:change={(e) => {
$options.miscLimits = !e.target.checked;
}}>
{$_('options.removeMiscLimits')}
<LearnMore slug="remove-misc-limits" />
</label>
<label>
{$_('options.stageSize')}
<input type="number" min="1" max="4096" step="1" bind:value={$options.stageWidth}>
&times;
<input type="number" min="1" max="4096" step="1" bind:value={$options.stageHeight}>
<LearnMore slug="custom-stage-size" />
</label>
<label>
{$_('options.username')}
<input type="text" bind:value={$options.username}>
</label>
<label>
<input type="checkbox" bind:checked={$options.autoplay}>
{$_('options.autoplay')}
</label>
<label>
<input type="checkbox" bind:checked={$options.turbo}>
{$_('options.turbo')}
</label>
<label>
{$_('options.framerate')}
<input type="number" min="0" max="240" bind:value={$options.framerate}>
<LearnMore slug="custom-fps" />
</label>
<label>
<input type="checkbox" bind:checked={$options.interpolation}>
{$_('options.interpolation')}
<LearnMore slug="interpolation" />
</label>
<label>
<input type="checkbox" bind:checked={$options.highQualityPen}>
{$_('options.highQualityPen')}
<LearnMore slug="high-quality-pen" />
</label>
<label>
<input type="checkbox" checked={$options.maxClones === ALMOST_INFINITY} on:change={(e) => {
$options.maxClones = e.target.checked ? ALMOST_INFINITY : 300;
}}>
{$_('options.infiniteClones')}
<LearnMore slug="infinite-clones" />
</label>
<label>
<input type="checkbox" checked={!$options.fencing} on:change={(e) => {
$options.fencing = !e.target.checked;
}}>
{$_('options.removeFencing')}
<LearnMore slug="remove-fencing" />
</label>
<label>
<input type="checkbox" checked={!$options.miscLimits} on:change={(e) => {
$options.miscLimits = !e.target.checked;
}}>
{$_('options.removeMiscLimits')}
<LearnMore slug="remove-misc-limits" />
</label>
<label>
{$_('options.stageSize')}
<input type="number" min="1" max="4096" step="1" bind:value={$options.stageWidth}>
&times;
<input type="number" min="1" max="4096" step="1" bind:value={$options.stageHeight}>
<LearnMore slug="custom-stage-size" />
</label>
<label>
{$_('options.username')}
<input type="text" bind:value={$options.username}>
</label>
<label>
<input type="checkbox" bind:checked={$options.autoplay}>
{$_('options.autoplay')}
</label>
</div>
</Section>
<Section accent="#9966FF">
<h2>{$_('options.playerOptions')}</h2>
<label>
{$_('options.pageTitle')}
<input type="text" bind:value={$options.app.windowTitle}>
</label>
<div>
{$_('options.icon')}
<ImageInput bind:file={$icon} previewSizes={[[64, 64], [32, 32], [16, 16]]} />
</div>
<h2>{$_('options.playerOptions')}</h2>
<h3>{$_('options.loadingScreen')}</h3>
<label>
<input type="checkbox" bind:checked={$options.loadingScreen.progressBar}>
{$_('options.showProgressBar')}
</label>
<label>
{$_('options.loadingScreenText')}
<input type="text" bind:value={$options.loadingScreen.text} placeholder={$_('options.loadingScreenTextPlaceholder')}>
</label>
<div class="option-group">
{$_('options.loadingScreenImage')}
<!-- Display preview at image's native size -->
<ImageInput bind:file={$loadingScreenImage} previewSizes={[['', '']]} />
</div>
{#if $loadingScreenImage}
<label>
<input type="radio" value="normal" bind:group={$options.loadingScreen.imageMode}>
{$_('options.sizeNormal')}
</label>
<label>
<input type="radio" value="stretch" bind:group={$options.loadingScreen.imageMode}>
{$_('options.sizeStretch')}
</label>
{/if}
<h3>{$_('options.controls')}</h3>
<label>
<input type="checkbox" bind:checked={$options.controls.greenFlag.enabled}>
{$_('options.showFlag')}
</label>
<label>
<input type="checkbox" bind:checked={$options.controls.stopAll.enabled}>
{$_('options.showStop')}
</label>
<label>
<input type="checkbox" bind:checked={$options.controls.fullscreen.enabled}>
{$_('options.showFullscreen')}
</label>
<p>{$_('options.controlsHelp')}</p>
<h3>{$_('options.colors')}</h3>
<label>
<input type="color" bind:value={$options.appearance.background}>
{$_('options.backgroundColor')}
</label>
<label>
<input type="color" bind:value={$options.appearance.foreground}>
{$_('options.foregroundColor')}
</label>
<label>
<input type="color" bind:value={$options.appearance.accent}>
{$_('options.accentColor')}
</label>
<h3>{$_('options.interaction')}</h3>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.cursor.type} value="auto">
{$_('options.normalCursor')}
</label>
<label>
<input type="radio" bind:group={$options.cursor.type} value="none">
{$_('options.noCursor')}
</label>
<label>
<input type="radio" bind:group={$options.cursor.type} value="custom">
{$_('options.customCursor')}
</label>
</div>
{#if $options.cursor.type === 'custom'}
<div in:slide|self>
<ImageInput bind:file={$customCursorIcon} previewSizes={[[32, 32], [16, 16]]} />
<p>{$_('options.cursorHelp')}</p>
</div>
{/if}
<div class="option-group">
<label>
<input type="checkbox" bind:checked={$options.chunks.pointerlock}>
{$_('options.pointerlock')}
{$_('options.pageTitle')}
<input type="text" bind:value={$options.app.windowTitle}>
</label>
<div>
<a href="https://experiments.turbowarp.org/pointerlock/" target="_blank" rel="noopener">
{$_('options.pointerlockHelp')}
</a>
{$_('options.icon')}
<ImageInput bind:file={$icon} previewSizes={[[64, 64], [32, 32], [16, 16]]} />
</div>
</div>
<div class="option-group">
<h3>{$_('options.loadingScreen')}</h3>
<label>
<input type="checkbox" bind:checked={$options.chunks.gamepad}>
{$_('options.gamepad')}
<input type="checkbox" bind:checked={$options.loadingScreen.progressBar}>
{$_('options.showProgressBar')}
</label>
<div>
<a href="https://turbowarp.org/addons#gamepad" target="_blank" rel="noopener">
{$_('options.gamepadHelp')}
</a>
<label>
{$_('options.loadingScreenText')}
<input type="text" bind:value={$options.loadingScreen.text} placeholder={$_('options.loadingScreenTextPlaceholder')}>
</label>
<div class="option-group">
{$_('options.loadingScreenImage')}
<!-- Display preview at image's native size -->
<ImageInput bind:file={$loadingScreenImage} previewSizes={[['', '']]} />
</div>
{#if $loadingScreenImage}
<label>
<input type="radio" value="normal" bind:group={$options.loadingScreen.imageMode}>
{$_('options.sizeNormal')}
</label>
<label>
<input type="radio" value="stretch" bind:group={$options.loadingScreen.imageMode}>
{$_('options.sizeStretch')}
</label>
{/if}
<h3>{$_('options.controls')}</h3>
<label>
<input type="checkbox" bind:checked={$options.controls.greenFlag.enabled}>
{$_('options.showFlag')}
</label>
<label>
<input type="checkbox" bind:checked={$options.controls.stopAll.enabled}>
{$_('options.showStop')}
</label>
<label>
<input type="checkbox" bind:checked={$options.controls.fullscreen.enabled}>
{$_('options.showFullscreen')}
</label>
<p>{$_('options.controlsHelp')}</p>
<h3>{$_('options.colors')}</h3>
<label>
<input type="color" bind:value={$options.appearance.background}>
{$_('options.backgroundColor')}
</label>
<label>
<input type="color" bind:value={$options.appearance.foreground}>
{$_('options.foregroundColor')}
</label>
<label>
<input type="color" bind:value={$options.appearance.accent}>
{$_('options.accentColor')}
</label>
<h3>{$_('options.interaction')}</h3>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.cursor.type} value="auto">
{$_('options.normalCursor')}
</label>
<label>
<input type="radio" bind:group={$options.cursor.type} value="none">
{$_('options.noCursor')}
</label>
<label>
<input type="radio" bind:group={$options.cursor.type} value="custom">
{$_('options.customCursor')}
</label>
</div>
{#if $options.cursor.type === 'custom'}
<div in:slide|self>
<ImageInput bind:file={$customCursorIcon} previewSizes={[[32, 32], [16, 16]]} />
<p>{$_('options.cursorHelp')}</p>
</div>
{/if}
<div class="option-group">
<label>
<input type="checkbox" bind:checked={$options.chunks.pointerlock}>
{$_('options.pointerlock')}
</label>
<div>
<a href="https://experiments.turbowarp.org/pointerlock/" target="_blank" rel="noopener">
{$_('options.pointerlockHelp')}
</a>
</div>
</div>
<div class="option-group">
<label>
<input type="checkbox" bind:checked={$options.chunks.gamepad}>
{$_('options.gamepad')}
</label>
<div>
<a href="https://turbowarp.org/addons#gamepad" target="_blank" rel="noopener">
{$_('options.gamepadHelp')}
</a>
</div>
</div>
</div>
</Section>
{#if cloudVariables.length > 0}
<Section accent="#FF8C1A">
<h2>{$_('options.cloudVariables')}</h2>
<label>
{$_('options.mode')}
<select bind:value={$options.cloudVariables.mode}>
<option value="ws">{$_('options.cloudVariables-ws')}</option>
<option value="local">{$_('options.cloudVariables-local')}</option>
<option value="">{$_('options.cloudVariables-ignore')}</option>
<option value="custom">{$_('options.cloudVariables-custom')}</option>
</select>
</label>
{#if $options.cloudVariables.mode === "custom"}
<div transition:slide|local>
{#each cloudVariables as variable}
<label>
<select bind:value={$options.cloudVariables.custom[variable]}>
<option value="ws">{$_('options.cloudVariables-ws')}</option>
<option value="local">{$_('options.cloudVariables-local')}</option>
<option value="">{$_('options.cloudVariables-ignore')}</option>
</select>
{variable}
</label>
{/each}
</div>
{/if}
{#if $options.cloudVariables.mode === 'ws' || $options.cloudVariables.mode === 'custom'}
<label transition:slide|local>
{$_('options.cloudVariablesHost')}
<input type="text" bind:value={$options.cloudVariables.cloudHost}>
<div>
<h2>{$_('options.cloudVariables')}</h2>
<label>
{$_('options.mode')}
<select bind:value={$options.cloudVariables.mode}>
<option value="ws">{$_('options.cloudVariables-ws')}</option>
<option value="local">{$_('options.cloudVariables-local')}</option>
<option value="">{$_('options.cloudVariables-ignore')}</option>
<option value="custom">{$_('options.cloudVariables-custom')}</option>
</select>
</label>
{/if}
<p>{$_('options.cloudVariables-ws-help')}</p>
<p>{$_('options.cloudVariables-local-help')}</p>
<p>{$_('options.cloudVariables-ignore-help')}</p>
<p>{$_('options.cloudVariables-custom-help')}</p>
<label>
<input type="checkbox" bind:checked={$options.chunks.specialCloudBehaviors}>
<!-- Wording not finalized -->
Special cloud variable behaviors (like HTMLifier, <a href="https://github.com/TurboWarp/packager/issues/48#issuecomment-909892294" target="_blank" rel="noopener">experimental</a>)
</label>
{#if $options.cloudVariables.mode === "custom"}
<div transition:slide|local>
{#each cloudVariables as variable}
<label>
<select bind:value={$options.cloudVariables.custom[variable]}>
<option value="ws">{$_('options.cloudVariables-ws')}</option>
<option value="local">{$_('options.cloudVariables-local')}</option>
<option value="">{$_('options.cloudVariables-ignore')}</option>
</select>
{variable}
</label>
{/each}
</div>
{/if}
{#if $options.cloudVariables.mode === 'ws' || $options.cloudVariables.mode === 'custom'}
<label transition:slide|local>
{$_('options.cloudVariablesHost')}
<input type="text" bind:value={$options.cloudVariables.cloudHost}>
</label>
{/if}
<p>{$_('options.cloudVariables-ws-help')}</p>
<p>{$_('options.cloudVariables-local-help')}</p>
<p>{$_('options.cloudVariables-ignore-help')}</p>
<p>{$_('options.cloudVariables-custom-help')}</p>
<label>
<input type="checkbox" bind:checked={$options.chunks.specialCloudBehaviors}>
<!-- Wording not finalized -->
Special cloud variable behaviors (like HTMLifier, <a href="https://github.com/TurboWarp/packager/issues/48#issuecomment-909892294" target="_blank" rel="noopener">experimental</a>)
</label>
</div>
</Section>
{/if}
<Section accent="#FF6680">
<h2>{$_('options.advancedOptions')}</h2>
<details>
<summary>{$_('options.advancedSummary')}</summary>
<label>
<input type="checkbox" bind:checked={$options.compiler.enabled}>
{$_('options.enableCompiler')}
<LearnMore slug="disable-compiler" />
</label>
<label>
<input type="checkbox" bind:checked={$options.compiler.warpTimer}>
{$_('options.warpTimer')}
<LearnMore slug="warp-timer" />
</label>
<label>
<input type="checkbox" bind:checked={$options.resizeToFill}>
Dynamically resize stage to fill page (overrides stage size setting, experimental)
</label>
<!-- Ignore because CustomExtensions will have a <textarea> inside it -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>
{$_('options.customExtensions')}
<!-- TODO: use the user-facing documentation when that becomes available -->
<LearnMore slug="development/custom-extensions" />
<CustomExtensions bind:value={$options.extensions} />
</label>
<label>
{$_('options.customJS')}
<textarea bind:value={$options.custom.js}></textarea>
</label>
</details>
<div>
<h2>{$_('options.advancedOptions')}</h2>
<details>
<summary>{$_('options.advancedSummary')}</summary>
<label>
<input type="checkbox" bind:checked={$options.compiler.enabled}>
{$_('options.enableCompiler')}
<LearnMore slug="disable-compiler" />
</label>
<label>
<input type="checkbox" bind:checked={$options.compiler.warpTimer}>
{$_('options.warpTimer')}
<LearnMore slug="warp-timer" />
</label>
<label>
<input type="checkbox" bind:checked={$options.resizeToFill}>
Dynamically resize stage to fill page (overrides stage size setting, experimental)
</label>
<!-- Ignore because CustomExtensions will have a <textarea> inside it -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label>
{$_('options.customExtensions')}
<!-- TODO: use the user-facing documentation when that becomes available -->
<LearnMore slug="development/custom-extensions" />
<CustomExtensions bind:value={$options.extensions} />
</label>
<label>
{$_('options.customJS')}
<textarea bind:value={$options.custom.js}></textarea>
</label>
</details>
</div>
</Section>
<Section accent="#0FBD8C">
<h2>{$_('options.environment')}</h2>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.target} value="html">
{$_('options.html')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="zip">
{$_('options.zip')}
</label>
</div>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.target} value="electron-win32">
{$_('options.application-win32').replace('{type}', 'Electron')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="webview-mac">
{$_('options.application-mac').replace('{type}', 'WKWebView')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="electron-linux64">
{$_('options.application-linux64').replace('{type}', 'Electron')}
</label>
</div>
<details open={otherEnvironmentsInitiallyOpen}>
<summary>{$_('options.otherEnvironments')}</summary>
<p>{$_('options.otherEnvironmentsHelp')}</p>
<div>
<h2>{$_('options.environment')}</h2>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.target} value="zip-one-asset">
{$_('options.zip-one-asset')}
<input type="radio" bind:group={$options.target} value="html">
{$_('options.html')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="zip">
{$_('options.zip')}
</label>
</div>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.target} value="nwjs-win32">
{$_('options.application-win32').replace('{type}', 'NW.js')}
<input type="radio" bind:group={$options.target} value="electron-win32">
{$_('options.application-win32').replace('{type}', 'Electron')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="nwjs-win64">
{$_('options.application-win64').replace('{type}', 'NW.js')}
<input type="radio" bind:group={$options.target} value="webview-mac">
{$_('options.application-mac').replace('{type}', 'WKWebView')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="nwjs-mac">
{$_('options.application-mac').replace('{type}', 'NW.js')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="nwjs-linux-x64">
{$_('options.application-linux64').replace('{type}', 'NW.js')}
<input type="radio" bind:group={$options.target} value="electron-linux64">
{$_('options.application-linux64').replace('{type}', 'Electron')}
</label>
</div>
</details>
<details open={otherEnvironmentsInitiallyOpen}>
<summary>{$_('options.otherEnvironments')}</summary>
<p>{$_('options.otherEnvironmentsHelp')}</p>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.target} value="zip-one-asset">
{$_('options.zip-one-asset')}
</label>
</div>
<div class="option-group">
<label>
<input type="radio" bind:group={$options.target} value="nwjs-win32">
{$_('options.application-win32').replace('{type}', 'NW.js')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="nwjs-win64">
{$_('options.application-win64').replace('{type}', 'NW.js')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="nwjs-mac">
{$_('options.application-mac').replace('{type}', 'NW.js')}
</label>
<label>
<input type="radio" bind:group={$options.target} value="nwjs-linux-x64">
{$_('options.application-linux64').replace('{type}', 'NW.js')}
</label>
</div>
</details>
</div>
</Section>
{#if $options.target.startsWith('nwjs-') || $options.target.startsWith('electron-') || $options.target.startsWith('webview-')}
<div in:fade|local>
<Section accent="#FF661A">
<h2>{$_('options.applicationSettings')}</h2>
<label>
{$_('options.packageName')}
<input type="text" bind:value={$options.app.packageName} pattern="[a-zA-Z -]+" minlength="1">
</label>
<p>{$_('options.packageNameHelp')}</p>
<div>
<h2>{$_('options.applicationSettings')}</h2>
<label>
{$_('options.packageName')}
<input type="text" bind:value={$options.app.packageName} pattern="[a-zA-Z -]+" minlength="1">
</label>
<p>{$_('options.packageNameHelp')}</p>
{#if $options.target.includes('win')}
<div>
<h2>{$_('win.furtherSteps')}</h2>
<p>To change the icon of the executable file or create an installer program, download and run <a href="https://github.com/TurboWarp/packager-extras/releases">TurboWarp Packager Extras</a> and select the output of this website.</p>
<p>All Windows applications generated by this site are unsigned, so users may see SmartScreen warnings when they try to launch it for the first time.</p>
{#if $options.target.includes('nwjs')}
<p class="warning">NW.js support is deprecated and may be removed in the future. Use Electron instead if possible.</p>
{/if}
{#if $options.target.endsWith('64')}
<p>The application will only run on 64-bit x86 computers.</p>
{:else if $options.target.endsWith('32')}
<p>The application will run on 32-bit and 64-bit x86 computers.</p>
{/if}
</div>
{:else if $options.target.includes('mac')}
<h2>{$_('mac.furtherSteps')}</h2>
<p>Due to Apple policy, packaging for their platforms is troublesome. You either have to:</p>
<ul>
<li>Instruct users to ignore scary Gatekeeper warnings by opening Finder > Navigating to the application > Right click > Open > Open (this website generates files that require this workaround)</li>
<li>Or pay Apple $100/year for a developer account to sign and notarize the app. If you have already paid for a developer account, <a href="https://github.com/TurboWarp/packager/discussions">reach out on GitHub</a> and we'll help you set everything up (It is a very involved process).</li>
</ul>
{#if $options.target.includes('webview')}
<h2>About WKWebView</h2>
<p>WKWebView is the fastest and smallest way to package for macOS. It should run natively (without Rosetta) on both Intel and Apple silicon Macs running macOS 10.12 or later. However, it is only actively tested on macOS Big Sur on an Intel Mac.</p>
<p>Note that:</p>
{#if $options.target.includes('win')}
<div>
<h2>{$_('win.furtherSteps')}</h2>
<p>To change the icon of the executable file or create an installer program, download and run <a href="https://github.com/TurboWarp/packager-extras/releases">TurboWarp Packager Extras</a> and select the output of this website.</p>
<p>All Windows applications generated by this site are unsigned, so users may see SmartScreen warnings when they try to launch it for the first time.</p>
{#if $options.target.includes('nwjs')}
<p class="warning">NW.js support is deprecated and may be removed in the future. Use Electron instead if possible.</p>
{/if}
{#if $options.target.endsWith('64')}
<p>The application will only run on 64-bit x86 computers.</p>
{:else if $options.target.endsWith('32')}
<p>The application will run on 32-bit and 64-bit x86 computers.</p>
{/if}
</div>
{:else if $options.target.includes('mac')}
<h2>{$_('mac.furtherSteps')}</h2>
<p>Due to Apple policy, packaging for their platforms is troublesome. You either have to:</p>
<ul>
<li>Video sensing and loudness blocks will not work</li>
<li>Extremely memory intensive projects may randomly reload (but most projects work fine)</li>
<li>Instruct users to ignore scary Gatekeeper warnings by opening Finder > Navigating to the application > Right click > Open > Open (this website generates files that require this workaround)</li>
<li>Or pay Apple $100/year for a developer account to sign and notarize the app. If you have already paid for a developer account, <a href="https://github.com/TurboWarp/packager/discussions">reach out on GitHub</a> and we'll help you set everything up (It is a very involved process).</li>
</ul>
<p>Use "Plain HTML" or "NW.js macOS Application" if these are problems for your project.</p>
{:else if $options.target.includes('nwjs')}
<h2>About NW.js</h2>
<p>NW.js runs natively on Intel Macs but will use Rosetta on Apple silicon Macs.</p>
<p>For further help and steps, see <a href="https://docs.nwjs.io/en/latest/For%20Users/Package%20and%20Distribute/#mac-os-x">NW.js Documentation</a>.</p>
{#if $options.target.includes('webview')}
<h2>About WKWebView</h2>
<p>WKWebView is the fastest and smallest way to package for macOS. It should run natively (without Rosetta) on both Intel and Apple silicon Macs running macOS 10.12 or later. However, it is only actively tested on macOS Big Sur on an Intel Mac.</p>
<p>Note that:</p>
<ul>
<li>Video sensing and loudness blocks will not work</li>
<li>Extremely memory intensive projects may randomly reload (but most projects work fine)</li>
</ul>
<p>Use "Plain HTML" or "NW.js macOS Application" if these are problems for your project.</p>
{:else if $options.target.includes('nwjs')}
<h2>About NW.js</h2>
<p>NW.js runs natively on Intel Macs but will use Rosetta on Apple silicon Macs.</p>
<p>For further help and steps, see <a href="https://docs.nwjs.io/en/latest/For%20Users/Package%20and%20Distribute/#mac-os-x">NW.js Documentation</a>.</p>
{/if}
{:else if $options.target.includes('linux')}
<h2>{$_('linux.furtherSteps')}</h2>
<p>Linux support is still experimental.</p>
<p>The application will only run on 64-bit x86 computers. 32-bit computers, Raspberry Pis, and other ARM devices will not work.</p>
{#if $options.target.includes('electron')}
<p>The application is started by running <code>start.sh</code>.</p>
{:else if $options.target.includes('nwjs')}
<p class="warning">NW.js support is deprecated and may be removed in the future. Use Electron instead if possible.</p>
<p>For further help and steps, see <a href="https://docs.nwjs.io/en/latest/For%20Users/Package%20and%20Distribute/#linux">NW.js Documentation</a>.</p>
{/if}
{/if}
{:else if $options.target.includes('linux')}
<h2>{$_('linux.furtherSteps')}</h2>
<p>Linux support is still experimental.</p>
<p>The application will only run on 64-bit x86 computers. 32-bit computers, Raspberry Pis, and other ARM devices will not work.</p>
{#if $options.target.includes('electron')}
<p>The application is started by running <code>start.sh</code>.</p>
{:else if $options.target.includes('nwjs')}
<p class="warning">NW.js support is deprecated and may be removed in the future. Use Electron instead if possible.</p>
<p>For further help and steps, see <a href="https://docs.nwjs.io/en/latest/For%20Users/Package%20and%20Distribute/#linux">NW.js Documentation</a>.</p>
{/if}
{/if}
</div>
</Section>
</div>
{/if}