Skip to content

feat: add templating mode selector #1214

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

Merged
merged 13 commits into from
May 23, 2025
Merged

feat: add templating mode selector #1214

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 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
bb1b074
Merge branch 'main' into templating-mode-selector
paoloricciuti May 15, 2025
a703c47
fix: rename option and add version checking
paoloricciuti May 22, 2025
0a18228
fix: revert version to fix link
paoloricciuti May 22, 2025
5b36375
Merge branch 'main' into templating-mode-selector
paoloricciuti May 22, 2025
cc10f4d
fix: update everything to latest
paoloricciuti May 22, 2025
6962178
chore: remove unused ignore
paoloricciuti May 22, 2025
893e20e
fix: `html` default checked ad min height
paoloricciuti May 22, 2025
4df3869
fix: also show option with `latest`
paoloricciuti May 23, 2025
d765f6c
tweak
Rich-Harris May 23, 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