From 8119ca104e4ac65ac51e5ae9eb3a7387fb52d784 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Tue, 8 Oct 2024 18:24:49 +0200 Subject: [PATCH 1/8] update tailwind adder --- packages/adders/tailwindcss/config/adder.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/adders/tailwindcss/config/adder.ts b/packages/adders/tailwindcss/config/adder.ts index 7d4c050fd..6a49a92a7 100644 --- a/packages/adders/tailwindcss/config/adder.ts +++ b/packages/adders/tailwindcss/config/adder.ts @@ -2,7 +2,7 @@ import { options } from './options.ts'; import { defineAdderConfig } from '@svelte-cli/core'; import { array, common, exports, functions, imports, object } from '@svelte-cli/core/js'; import { addImports } from '@svelte-cli/core/css'; -import { element } from '@svelte-cli/core/html'; +import { addFromRawHtml } from '@svelte-cli/core/html'; export const adder = defineAdderConfig({ metadata: { @@ -118,8 +118,8 @@ export const adder = defineAdderConfig({ content: ({ jsAst, htmlAst }) => { imports.addEmpty(jsAst, '../app.css'); if (htmlAst.childNodes.length === 0) { - const slot = element('slot'); - htmlAst.childNodes.push(slot); + common.addFromString(jsAst, 'let { children } = $props();'); + addFromRawHtml(htmlAst.childNodes, '{@render children()}'); } }, condition: ({ kit }) => Boolean(kit) From 15df6c65b659bd47d9d6c55fcd3a987ec8835050 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Thu, 10 Oct 2024 17:42:42 +0200 Subject: [PATCH 2/8] detect slot syntax based on dependency version --- packages/adders/common.ts | 24 +++++++++++++++++++++ packages/adders/tailwindcss/config/adder.ts | 7 +++--- packages/core/tooling/html/index.ts | 3 +++ 3 files changed, 30 insertions(+), 4 deletions(-) diff --git a/packages/adders/common.ts b/packages/adders/common.ts index 5c6d81f93..3655f35bc 100644 --- a/packages/adders/common.ts +++ b/packages/adders/common.ts @@ -1,4 +1,5 @@ import { imports, exports, common, variables, functions } from '@svelte-cli/core/js'; +import * as html from '@svelte-cli/core/html'; import { Walker, type AstKinds, type AstTypes, type ScriptFileEditor } from '@svelte-cli/core'; import type { Question } from '@svelte-cli/core/internal'; @@ -357,3 +358,26 @@ function isFunctionDeclaration( ): node is AstTypes.FunctionDeclaration { return node.type === 'FunctionDeclaration' && node.id?.name === funcName; } + +export function addSlot( + jsAst: AstTypes.Program, + htmlAst: html.HtmlDocument, + dependencies: Record +) { + let slotSyntax = false; + if ( + 'svelte' in dependencies && + dependencies['svelte'] && + (dependencies['svelte'].startsWith('4') || dependencies['svelte'].startsWith('3')) + ) + slotSyntax = true; + + if (slotSyntax) { + const slot = html.element('slot'); + html.appendElement(htmlAst.childNodes, slot); + return; + } + + common.addFromString(jsAst, 'let { children } = $props();'); + html.addFromRawHtml(htmlAst.childNodes, '{@render children()}'); +} diff --git a/packages/adders/tailwindcss/config/adder.ts b/packages/adders/tailwindcss/config/adder.ts index e0d49ce99..a9055b5d7 100644 --- a/packages/adders/tailwindcss/config/adder.ts +++ b/packages/adders/tailwindcss/config/adder.ts @@ -2,7 +2,7 @@ import { options } from './options.ts'; import { defineAdderConfig } from '@svelte-cli/core'; import { array, common, exports, functions, imports, object } from '@svelte-cli/core/js'; import { addImports } from '@svelte-cli/core/css'; -import { addFromRawHtml } from '@svelte-cli/core/html'; +import { addSlot } from '../../common.ts'; export const adder = defineAdderConfig({ metadata: { @@ -114,11 +114,10 @@ export const adder = defineAdderConfig({ { name: ({ kit }) => `${kit?.routesDirectory}/+layout.svelte`, contentType: 'svelte', - content: ({ jsAst, htmlAst }) => { + content: ({ jsAst, htmlAst, dependencies }) => { imports.addEmpty(jsAst, '../app.css'); if (htmlAst.childNodes.length === 0) { - common.addFromString(jsAst, 'let { children } = $props();'); - addFromRawHtml(htmlAst.childNodes, '{@render children()}'); + addSlot(jsAst, htmlAst, dependencies); } }, condition: ({ kit }) => Boolean(kit) diff --git a/packages/core/tooling/html/index.ts b/packages/core/tooling/html/index.ts index ecf958ac3..2ec55829a 100644 --- a/packages/core/tooling/html/index.ts +++ b/packages/core/tooling/html/index.ts @@ -1,10 +1,13 @@ import { type HtmlChildNode, + type HtmlDocument, HtmlElement, HtmlElementType, parseHtml } from '@svelte-cli/ast-tooling'; +export type { HtmlDocument }; + export function div(attributes: Record = {}): HtmlElement { return element('div', attributes); } From 19ec35d5b7658f2aa3851aa2d51dc0fbfbe8a4c0 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Fri, 11 Oct 2024 17:03:16 +0200 Subject: [PATCH 3/8] fix merge conflict --- packages/adders/common.ts | 8 ++------ packages/adders/tailwindcss/config/adder.ts | 18 +++++++++--------- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/adders/common.ts b/packages/adders/common.ts index 351ea8b36..1c000458b 100644 --- a/packages/adders/common.ts +++ b/packages/adders/common.ts @@ -375,14 +375,10 @@ function isFunctionDeclaration( export function addSlot( jsAst: AstTypes.Program, htmlAst: html.HtmlDocument, - dependencies: Record + svelteVersion: string ) { let slotSyntax = false; - if ( - 'svelte' in dependencies && - dependencies['svelte'] && - (dependencies['svelte'].startsWith('4') || dependencies['svelte'].startsWith('3')) - ) + if (svelteVersion && (svelteVersion.startsWith('4') || svelteVersion.startsWith('3'))) slotSyntax = true; if (slotSyntax) { diff --git a/packages/adders/tailwindcss/config/adder.ts b/packages/adders/tailwindcss/config/adder.ts index 78219765d..4d45106b5 100644 --- a/packages/adders/tailwindcss/config/adder.ts +++ b/packages/adders/tailwindcss/config/adder.ts @@ -3,7 +3,6 @@ import { defineAdder } from '@svelte-cli/core'; import { addImports } from '@svelte-cli/core/css'; import { array, common, exports, functions, imports, object } from '@svelte-cli/core/js'; import { parseCss, parseScript, parseJson, parseSvelte } from '@svelte-cli/core/parsers'; -import { addImports } from '@svelte-cli/core/css'; import { addSlot } from '../../common.ts'; export const adder = defineAdder({ @@ -121,15 +120,16 @@ export const adder = defineAdder({ }, { name: ({ kit }) => `${kit?.routesDirectory}/+layout.svelte`, - contentType: 'svelte', - content: ({ jsAst, htmlAst, dependencies }) => { - imports.addEmpty(jsAst, '../app.css'); - if (htmlAst.childNodes.length === 0) { - addSlot(jsAst, htmlAst, dependencies); - } - content: ({ content, typescript }) => { - const { script, generateCode } = parseSvelte(content, { typescript }); + content: ({ content, typescript, dependencyVersion }) => { + const { script, template, generateCode } = parseSvelte(content, { typescript }); imports.addEmpty(script.ast, '../app.css'); + + if (content.length === 0) { + const svelteVersion = dependencyVersion('svelte'); + if (!svelteVersion) throw new Error('Failed to determine svelte version'); + addSlot(script.ast, template.ast, svelteVersion); + } + return generateCode({ script: script.generateCode(), template: content.length === 0 ? '' : undefined From 5766b19782519f528b08e09235c529297fd3ad73 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Fri, 11 Oct 2024 17:38:08 +0200 Subject: [PATCH 4/8] fix merge --- packages/adders/tailwindcss/index.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index 4ff99d161..d491c1551 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -2,6 +2,7 @@ import { defineAdder, defineAdderOptions } from '@svelte-cli/core'; import { addImports } from '@svelte-cli/core/css'; import { array, common, exports, functions, imports, object } from '@svelte-cli/core/js'; import { parseCss, parseScript, parseJson, parseSvelte } from '@svelte-cli/core/parsers'; +import { addSlot } from '../common.ts'; export const options = defineAdderOptions({ plugins: { @@ -121,12 +122,19 @@ export default defineAdder({ }, { name: ({ kit }) => `${kit?.routesDirectory}/+layout.svelte`, - content: ({ content, typescript }) => { - const { script, generateCode } = parseSvelte(content, { typescript }); + content: ({ content, typescript, dependencyVersion }) => { + const { script, template, generateCode } = parseSvelte(content, { typescript }); imports.addEmpty(script.ast, '../app.css'); + + if (content.length === 0) { + const svelteVersion = dependencyVersion('svelte'); + if (!svelteVersion) throw new Error('Failed to determine svelte version'); + addSlot(script.ast, template.ast, svelteVersion); + } + return generateCode({ script: script.generateCode(), - template: content.length === 0 ? '' : undefined + template: template.generateCode() }); }, condition: ({ kit }) => Boolean(kit) From ab885e22341bddcd6d4b9355f5d86cf48b0794c2 Mon Sep 17 00:00:00 2001 From: Manuel <30698007+manuel3108@users.noreply.github.com> Date: Fri, 11 Oct 2024 17:56:09 +0200 Subject: [PATCH 5/8] Update packages/adders/common.ts Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- packages/adders/common.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/adders/common.ts b/packages/adders/common.ts index 1c000458b..f6687e2f6 100644 --- a/packages/adders/common.ts +++ b/packages/adders/common.ts @@ -377,9 +377,7 @@ export function addSlot( htmlAst: html.HtmlDocument, svelteVersion: string ) { - let slotSyntax = false; - if (svelteVersion && (svelteVersion.startsWith('4') || svelteVersion.startsWith('3'))) - slotSyntax = true; + const slotSyntax = svelteVersion && (svelteVersion.startsWith('4') || svelteVersion.startsWith('3')); if (slotSyntax) { const slot = html.element('slot'); From 5e9a45f01ead67895cf545fa729f4aa660fe8142 Mon Sep 17 00:00:00 2001 From: Manuel <30698007+manuel3108@users.noreply.github.com> Date: Fri, 11 Oct 2024 17:56:15 +0200 Subject: [PATCH 6/8] Update packages/adders/tailwindcss/index.ts Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- packages/adders/tailwindcss/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index d491c1551..a6f1201c1 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -134,7 +134,7 @@ export default defineAdder({ return generateCode({ script: script.generateCode(), - template: template.generateCode() + template: template: content.length === 0 ? template.generateCode() : undefined }); }, condition: ({ kit }) => Boolean(kit) From 46ebbfc467e111f4c6c3823caf93e8fa6aff4f25 Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Fri, 11 Oct 2024 17:59:58 +0200 Subject: [PATCH 7/8] fix --- packages/adders/tailwindcss/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/adders/tailwindcss/index.ts b/packages/adders/tailwindcss/index.ts index a6f1201c1..8b16602ee 100644 --- a/packages/adders/tailwindcss/index.ts +++ b/packages/adders/tailwindcss/index.ts @@ -134,7 +134,7 @@ export default defineAdder({ return generateCode({ script: script.generateCode(), - template: template: content.length === 0 ? template.generateCode() : undefined + template: content.length === 0 ? template.generateCode() : undefined }); }, condition: ({ kit }) => Boolean(kit) From 925246a4f66494721d2a66df458a8d303e8425aa Mon Sep 17 00:00:00 2001 From: Manuel Serret Date: Fri, 11 Oct 2024 18:03:14 +0200 Subject: [PATCH 8/8] format --- packages/adders/common.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/adders/common.ts b/packages/adders/common.ts index f6687e2f6..d30781d4e 100644 --- a/packages/adders/common.ts +++ b/packages/adders/common.ts @@ -377,7 +377,8 @@ export function addSlot( htmlAst: html.HtmlDocument, svelteVersion: string ) { - const slotSyntax = svelteVersion && (svelteVersion.startsWith('4') || svelteVersion.startsWith('3')); + const slotSyntax = + svelteVersion && (svelteVersion.startsWith('4') || svelteVersion.startsWith('3')); if (slotSyntax) { const slot = html.element('slot');