Skip to content
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

feat: add templating mode selector #1214

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: add templating mode selector #1214

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8f4c6d0
feat: add templating mode selector
paoloricciuti Mar 24, 2025
9948924
merge main
Rich-Harris Mar 31, 2025
1a16093
Update packages/repl/src/lib/Output/Viewer.svelte
Rich-Harris Mar 31, 2025
4a40ce4
Merge remote-tracking branch 'origin/main' into templating-mode-selector
paoloricciuti Apr 4, 2025
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
9 changes: 8 additions & 1 deletion packages/editor/src/lib/Workspace.svelte.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export interface ExposedCompilerOptions {
generate: 'client' | 'server';
dev: boolean;
modernAst: boolean;
templatingMode: 'string' | 'functional';
}

export class Workspace {
Expand All @@ -104,7 +105,8 @@ export class Workspace {
#compiler_options = $state.raw<ExposedCompilerOptions>({
generate: 'client',
dev: false,
modernAst: true
modernAst: true,
templatingMode: 'string'
});
compiled = $state<Record<string, Compiled>>({});

Expand Down Expand Up @@ -456,6 +458,11 @@ export class Workspace {
update_compiler_options(options: Partial<ExposedCompilerOptions>) {
this.#compiler_options = { ...this.#compiler_options, ...options };
this.#reset_diagnostics();
for (let file of this.#files) {
if (is_file(file)) {
this.#onupdate(file);
}
}
}

update_file(file: File) {
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/lib/compile-worker/worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@ addEventListener('message', async (event) => {
: 'ssr'
: options.generate,
dev: options.dev,
filename: file.name
filename: file.name,
templatingMode: options.templatingMode
};

if (!is_svelte_3_or_4) {
Expand Down
19 changes: 18 additions & 1 deletion packages/repl/src/lib/Output/CompilerOptions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,23 @@
{/each},
</div>

<div class="option">
<span class="key">templatingMode:</span>

{#each ['string', 'functional'] as const as templating_mode}
<input
id={templating_mode}
type="radio"
checked={workspace.compiler_options.templatingMode === templating_mode}
value={templating_mode}
onchange={() => {
workspace.update_compiler_options({ templatingMode: templating_mode });
}}
/>
<label for={templating_mode}><span class="string">"{templating_mode}"</span></label>
{/each},
</div>

<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
<label class="option">
<span class="key">dev:</span>
Expand Down Expand Up @@ -55,7 +72,7 @@

.key {
display: inline-block;
width: 6em;
width: 10em;
}

.string {
Expand Down
1 change: 1 addition & 0 deletions packages/repl/src/lib/Output/Viewer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@
$: if (ready) proxy?.iframe_command('set_theme', { theme });

async function apply_bundle($bundle: Bundle | null | undefined) {
console.log({ $bundle });
if (!$bundle) return;

try {
Expand Down
4 changes: 3 additions & 1 deletion packages/repl/src/lib/Repl.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@
async function rebundle() {
const token = (current_token = Symbol());
const result = await bundler!.bundle(workspace.files as File[], {
tailwind: workspace.tailwind
tailwind: workspace.tailwind,
// @ts-ignore
templatingMode: workspace.compiler_options.templatingMode
});
if (token === current_token) $bundle = result as Bundle;
}
Expand Down
4 changes: 3 additions & 1 deletion packages/repl/src/lib/workers/bundler/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,9 @@ async function get_bundle(
const compilerOptions: any = {
filename: name + '.svelte',
generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
dev: true
dev: true,
// @ts-expect-error
templatingMode: options.templatingMode
};

if (can_use_experimental_async) {
Expand Down
Loading