From 795723c79845df137026cbb73666595611cd6289 Mon Sep 17 00:00:00 2001 From: emily-shen <69125074+emily-shen@users.noreply.github.com> Date: Wed, 19 Mar 2025 12:52:59 +0000 Subject: [PATCH 1/2] graduate svelte --- .../framework-test-config-experimental.ts | 32 ---- .../frameworks/framework-test-config.ts | 36 +++- packages/create-cloudflare/src/templates.ts | 2 - .../svelte/templates/static/.assetsignore | 4 - .../create-cloudflare/templates/svelte/c3.ts | 159 +----------------- .../templates/svelte/pages/c3.ts | 159 ++++++++++++++++++ .../{ => pages}/templates/wrangler.jsonc | 0 .../svelte => templates/svelte/workers}/c3.ts | 6 +- .../workers/templates/static/.assetsignore | 2 + .../svelte/workers}/templates/wrangler.jsonc | 0 10 files changed, 204 insertions(+), 196 deletions(-) delete mode 100644 packages/create-cloudflare/templates-experimental/svelte/templates/static/.assetsignore create mode 100644 packages/create-cloudflare/templates/svelte/pages/c3.ts rename packages/create-cloudflare/templates/svelte/{ => pages}/templates/wrangler.jsonc (100%) rename packages/create-cloudflare/{templates-experimental/svelte => templates/svelte/workers}/c3.ts (95%) create mode 100644 packages/create-cloudflare/templates/svelte/workers/templates/static/.assetsignore rename packages/create-cloudflare/{templates-experimental/svelte => templates/svelte/workers}/templates/wrangler.jsonc (100%) diff --git a/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config-experimental.ts b/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config-experimental.ts index d6004576e544..42a842389919 100644 --- a/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config-experimental.ts +++ b/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config-experimental.ts @@ -118,37 +118,5 @@ export default function getFrameworkTestConfigExperimental() { expectedText: "Hello world", }, }, - svelte: { - promptHandlers: [ - { - matcher: /Which template would you like/, - input: [keys.enter], - }, - { - matcher: /Add type checking with Typescript/, - input: [keys.down, keys.enter], - }, - { - matcher: /What would you like to add to your project/, - input: [keys.enter], - }, - { - matcher: - /Which package manager do you want to install dependencies with/, - input: [keys.enter], - }, - ], - testCommitMessage: true, - unsupportedOSs: ["win32"], - unsupportedPms: ["npm"], - verifyDeploy: { - route: "/", - expectedText: "SvelteKit app", - }, - verifyPreview: { - route: "/test", - expectedText: "C3_TEST", - }, - }, }; } diff --git a/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config.ts b/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config.ts index 187c890e0d9d..5240f9dec2b4 100644 --- a/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config.ts +++ b/packages/create-cloudflare/e2e-tests/frameworks/framework-test-config.ts @@ -423,7 +423,8 @@ export default function getFrameworkTestConfig(pm: string) { expectedText: "Hello world", }, }, - svelte: { + "svelte:pages": { + argv: ["--platform", "pages"], promptHandlers: [ { matcher: /Which template would you like/, @@ -461,6 +462,39 @@ export default function getFrameworkTestConfig(pm: string) { expectedText: "C3_TEST", }, }, + "svelte:workers": { + argv: ["--platform", "workers"], + promptHandlers: [ + { + matcher: /Which template would you like/, + input: [keys.enter], + }, + { + matcher: /Add type checking with Typescript/, + input: [keys.down, keys.enter], + }, + { + matcher: /What would you like to add to your project/, + input: [keys.enter], + }, + { + matcher: + /Which package manager do you want to install dependencies with/, + input: [keys.enter], + }, + ], + testCommitMessage: true, + unsupportedOSs: ["win32"], + unsupportedPms: ["npm"], + verifyDeploy: { + route: "/", + expectedText: "SvelteKit app", + }, + verifyPreview: { + route: "/test", + expectedText: "C3_TEST", + }, + }, "vue:pages": { argv: ["--platform", "pages"], testCommitMessage: true, diff --git a/packages/create-cloudflare/src/templates.ts b/packages/create-cloudflare/src/templates.ts index ecd83439c16a..bf3ab5e109ec 100644 --- a/packages/create-cloudflare/src/templates.ts +++ b/packages/create-cloudflare/src/templates.ts @@ -23,7 +23,6 @@ import nextTemplateExperimental from "templates-experimental/next/c3"; import qwikTemplateExperimental from "templates-experimental/qwik/c3"; import remixTemplateExperimental from "templates-experimental/remix/c3"; import solidTemplateExperimental from "templates-experimental/solid/c3"; -import svelteTemplateExperimental from "templates-experimental/svelte/c3"; import analogTemplate from "templates/analog/c3"; import angularTemplate from "templates/angular/c3"; import astroTemplate from "templates/astro/c3"; @@ -180,7 +179,6 @@ export function getFrameworkMap({ experimental = false }): TemplateMap { qwik: qwikTemplateExperimental, remix: remixTemplateExperimental, solid: solidTemplateExperimental, - svelte: svelteTemplateExperimental, }; } else { return { diff --git a/packages/create-cloudflare/templates-experimental/svelte/templates/static/.assetsignore b/packages/create-cloudflare/templates-experimental/svelte/templates/static/.assetsignore deleted file mode 100644 index c2634cc3650a..000000000000 --- a/packages/create-cloudflare/templates-experimental/svelte/templates/static/.assetsignore +++ /dev/null @@ -1,4 +0,0 @@ -_worker.js -_routes.json -_headers -_redirects diff --git a/packages/create-cloudflare/templates/svelte/c3.ts b/packages/create-cloudflare/templates/svelte/c3.ts index 3bb7e27bd564..84b00ebb3b3b 100644 --- a/packages/create-cloudflare/templates/svelte/c3.ts +++ b/packages/create-cloudflare/templates/svelte/c3.ts @@ -1,158 +1,9 @@ -import { existsSync } from "node:fs"; -import { platform } from "node:os"; -import { logRaw, updateStatus } from "@cloudflare/cli"; -import { blue, brandColor, dim } from "@cloudflare/cli/colors"; -import { runFrameworkGenerator } from "frameworks/index"; -import { transformFile } from "helpers/codemod"; -import { usesTypescript } from "helpers/files"; -import { detectPackageManager } from "helpers/packageManagers"; -import { installPackages } from "helpers/packages"; -import * as recast from "recast"; -import type { TemplateConfig } from "../../src/templates"; -import type { C3Context, PackageJson } from "types"; +import pages from "./pages/c3"; +import workers from "./workers/c3"; +import type { MultiPlatformTemplateConfig } from "../../src/templates"; -const { npm } = detectPackageManager(); - -const generate = async (ctx: C3Context) => { - await runFrameworkGenerator(ctx, ["create", ctx.project.name]); - - logRaw(""); -}; - -const configure = async (ctx: C3Context) => { - // Install the adapter - const pkg = `@sveltejs/adapter-cloudflare`; - await installPackages([pkg], { - dev: true, - startText: "Adding the Cloudflare Pages adapter", - doneText: `${brandColor(`installed`)} ${dim(pkg)}`, - }); - - updateSvelteConfig(); - updatePlaywrightConfig(usesTypescript(ctx)); - updateTypeDefinitions(ctx); -}; - -const updateSvelteConfig = () => { - // All we need to do is change the import statement in svelte.config.js - updateStatus(`Changing adapter in ${blue("svelte.config.js")}`); - - transformFile("svelte.config.js", { - visitImportDeclaration: function (n) { - // importSource is the `x` in `import y from "x"` - const importSource = n.value.source; - if (importSource.value === "@sveltejs/adapter-auto") { - importSource.value = "@sveltejs/adapter-cloudflare"; - } - - // stop traversing this node - return false; - }, - }); -}; - -const updatePlaywrightConfig = (shouldUseTypescript: boolean) => { - const filePath = `playwright.config.${shouldUseTypescript ? "ts" : "js"}`; - if (!existsSync(filePath)) { - return; - } - - updateStatus(`Changing webServer port in ${blue(filePath)}`); - - transformFile(filePath, { - visitObjectExpression: function (n) { - const portProp = n.node.properties.find((prop) => { - if (!("key" in prop) || !("name" in prop.key)) { - return false; - } - - return prop.key.name === "port"; - }); - - if (!portProp || !("value" in portProp) || !("value" in portProp.value)) { - return this.traverse(n); - } - - portProp.value.value = 8788; - return false; - }, - }); -}; - -const updateTypeDefinitions = (ctx: C3Context) => { - if (!usesTypescript(ctx)) { - return; - } - - updateStatus(`Updating global type definitions in ${blue("app.d.ts")}`); - - const b = recast.types.builders; - - transformFile("src/app.d.ts", { - visitTSModuleDeclaration(n) { - if (n.value.id.name === "App" && n.node.body) { - const moduleBlock = n.node - .body as recast.types.namedTypes.TSModuleBlock; - - const platformInterface = b.tsInterfaceDeclaration( - b.identifier("Platform"), - b.tsInterfaceBody([ - b.tsPropertySignature( - b.identifier("env"), - b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env"))), - ), - b.tsPropertySignature( - b.identifier("cf"), - b.tsTypeAnnotation( - b.tsTypeReference(b.identifier("CfProperties")), - ), - ), - b.tsPropertySignature( - b.identifier("ctx"), - b.tsTypeAnnotation( - b.tsTypeReference(b.identifier("ExecutionContext")), - ), - ), - ]), - ); - - moduleBlock.body.unshift(platformInterface); - } - - this.traverse(n); - }, - }); -}; - -const config: TemplateConfig = { - configVersion: 1, - id: "svelte", - frameworkCli: "sv", +const config: MultiPlatformTemplateConfig = { displayName: "SvelteKit", - platform: "pages", - copyFiles: { - path: "./templates", - }, - generate, - configure, - transformPackageJson: async (original: PackageJson, ctx: C3Context) => { - let scripts: Record = { - preview: `${npm} run build && wrangler pages dev`, - deploy: `${npm} run build && wrangler pages deploy`, - }; - - if (usesTypescript(ctx)) { - const mv = platform() === "win32" ? "move" : "mv"; - scripts = { - ...scripts, - "cf-typegen": `wrangler types && ${mv} worker-configuration.d.ts src/`, - }; - } - - return { scripts }; - }, - devScript: "dev", - deployScript: "deploy", - previewScript: "preview", + platformVariants: { pages, workers }, }; export default config; diff --git a/packages/create-cloudflare/templates/svelte/pages/c3.ts b/packages/create-cloudflare/templates/svelte/pages/c3.ts new file mode 100644 index 000000000000..ec9828568dcf --- /dev/null +++ b/packages/create-cloudflare/templates/svelte/pages/c3.ts @@ -0,0 +1,159 @@ +import { existsSync } from "node:fs"; +import { platform } from "node:os"; +import { logRaw, updateStatus } from "@cloudflare/cli"; +import { blue, brandColor, dim } from "@cloudflare/cli/colors"; +import { runFrameworkGenerator } from "frameworks/index"; +import { transformFile } from "helpers/codemod"; +import { usesTypescript } from "helpers/files"; +import { detectPackageManager } from "helpers/packageManagers"; +import { installPackages } from "helpers/packages"; +import * as recast from "recast"; +import type { TemplateConfig } from "../../../src/templates"; +import type { C3Context, PackageJson } from "types"; + +const { npm } = detectPackageManager(); + +const generate = async (ctx: C3Context) => { + await runFrameworkGenerator(ctx, ["create", ctx.project.name]); + + logRaw(""); +}; + +const configure = async (ctx: C3Context) => { + // Install the adapter + const pkg = `@sveltejs/adapter-cloudflare`; + await installPackages([pkg], { + dev: true, + startText: "Adding the Cloudflare Pages adapter", + doneText: `${brandColor(`installed`)} ${dim(pkg)}`, + }); + + updateSvelteConfig(); + updatePlaywrightConfig(usesTypescript(ctx)); + updateTypeDefinitions(ctx); +}; + +const updateSvelteConfig = () => { + // All we need to do is change the import statement in svelte.config.js + updateStatus(`Changing adapter in ${blue("svelte.config.js")}`); + + transformFile("svelte.config.js", { + visitImportDeclaration: function (n) { + // importSource is the `x` in `import y from "x"` + const importSource = n.value.source; + if (importSource.value === "@sveltejs/adapter-auto") { + importSource.value = "@sveltejs/adapter-cloudflare"; + } + + // stop traversing this node + return false; + }, + }); +}; + +const updatePlaywrightConfig = (shouldUseTypescript: boolean) => { + const filePath = `playwright.config.${shouldUseTypescript ? "ts" : "js"}`; + if (!existsSync(filePath)) { + return; + } + + updateStatus(`Changing webServer port in ${blue(filePath)}`); + + transformFile(filePath, { + visitObjectExpression: function (n) { + const portProp = n.node.properties.find((prop) => { + if (!("key" in prop) || !("name" in prop.key)) { + return false; + } + + return prop.key.name === "port"; + }); + + if (!portProp || !("value" in portProp) || !("value" in portProp.value)) { + return this.traverse(n); + } + + portProp.value.value = 8788; + return false; + }, + }); +}; + +const updateTypeDefinitions = (ctx: C3Context) => { + if (!usesTypescript(ctx)) { + return; + } + + updateStatus(`Updating global type definitions in ${blue("app.d.ts")}`); + + const b = recast.types.builders; + + transformFile("src/app.d.ts", { + visitTSModuleDeclaration(n) { + if (n.value.id.name === "App" && n.node.body) { + const moduleBlock = n.node + .body as recast.types.namedTypes.TSModuleBlock; + + const platformInterface = b.tsInterfaceDeclaration( + b.identifier("Platform"), + b.tsInterfaceBody([ + b.tsPropertySignature( + b.identifier("env"), + b.tsTypeAnnotation(b.tsTypeReference(b.identifier("Env"))), + ), + b.tsPropertySignature( + b.identifier("cf"), + b.tsTypeAnnotation( + b.tsTypeReference(b.identifier("CfProperties")), + ), + ), + b.tsPropertySignature( + b.identifier("ctx"), + b.tsTypeAnnotation( + b.tsTypeReference(b.identifier("ExecutionContext")), + ), + ), + ]), + ); + + moduleBlock.body.unshift(platformInterface); + } + + this.traverse(n); + }, + }); +}; + +const config: TemplateConfig = { + configVersion: 1, + id: "svelte", + frameworkCli: "sv", + displayName: "SvelteKit", + platform: "pages", + copyFiles: { + path: "./templates", + }, + path: "templates/svelte/pages", + generate, + configure, + transformPackageJson: async (original: PackageJson, ctx: C3Context) => { + let scripts: Record = { + preview: `${npm} run build && wrangler pages dev`, + deploy: `${npm} run build && wrangler pages deploy`, + }; + + if (usesTypescript(ctx)) { + const mv = platform() === "win32" ? "move" : "mv"; + scripts = { + ...scripts, + "cf-typegen": `wrangler types && ${mv} worker-configuration.d.ts src/`, + }; + } + + return { scripts }; + }, + devScript: "dev", + deployScript: "deploy", + previewScript: "preview", +}; +export default config; diff --git a/packages/create-cloudflare/templates/svelte/templates/wrangler.jsonc b/packages/create-cloudflare/templates/svelte/pages/templates/wrangler.jsonc similarity index 100% rename from packages/create-cloudflare/templates/svelte/templates/wrangler.jsonc rename to packages/create-cloudflare/templates/svelte/pages/templates/wrangler.jsonc diff --git a/packages/create-cloudflare/templates-experimental/svelte/c3.ts b/packages/create-cloudflare/templates/svelte/workers/c3.ts similarity index 95% rename from packages/create-cloudflare/templates-experimental/svelte/c3.ts rename to packages/create-cloudflare/templates/svelte/workers/c3.ts index e13744acacf4..a251fccbb856 100644 --- a/packages/create-cloudflare/templates-experimental/svelte/c3.ts +++ b/packages/create-cloudflare/templates/svelte/workers/c3.ts @@ -7,7 +7,7 @@ import { usesTypescript } from "helpers/files"; import { detectPackageManager } from "helpers/packageManagers"; import { installPackages } from "helpers/packages"; import * as recast from "recast"; -import type { TemplateConfig } from "../../src/templates"; +import type { TemplateConfig } from "../../../src/templates"; import type { C3Context, PackageJson } from "types"; const { npm } = detectPackageManager(); @@ -23,7 +23,7 @@ const configure = async (ctx: C3Context) => { const pkg = `@sveltejs/adapter-cloudflare`; await installPackages([pkg], { dev: true, - startText: "Adding the Cloudflare Pages adapter", + startText: "Adding the Cloudflare adapter", doneText: `${brandColor(`installed`)} ${dim(pkg)}`, }); @@ -103,7 +103,7 @@ const config: TemplateConfig = { copyFiles: { path: "./templates", }, - path: "templates-experimental/svelte", + path: "templates/svelte/workers", generate, configure, transformPackageJson: async (original: PackageJson, ctx: C3Context) => { diff --git a/packages/create-cloudflare/templates/svelte/workers/templates/static/.assetsignore b/packages/create-cloudflare/templates/svelte/workers/templates/static/.assetsignore new file mode 100644 index 000000000000..1b006a0f9e98 --- /dev/null +++ b/packages/create-cloudflare/templates/svelte/workers/templates/static/.assetsignore @@ -0,0 +1,2 @@ +_worker.js +_routes.json \ No newline at end of file diff --git a/packages/create-cloudflare/templates-experimental/svelte/templates/wrangler.jsonc b/packages/create-cloudflare/templates/svelte/workers/templates/wrangler.jsonc similarity index 100% rename from packages/create-cloudflare/templates-experimental/svelte/templates/wrangler.jsonc rename to packages/create-cloudflare/templates/svelte/workers/templates/wrangler.jsonc From c3463798822710ae2a4443735786fec9a6c936a7 Mon Sep 17 00:00:00 2001 From: emily-shen <69125074+emily-shen@users.noreply.github.com> Date: Wed, 19 Mar 2025 12:53:49 +0000 Subject: [PATCH 2/2] changeset --- .changeset/stupid-crews-crash.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/stupid-crews-crash.md diff --git a/.changeset/stupid-crews-crash.md b/.changeset/stupid-crews-crash.md new file mode 100644 index 000000000000..bbc480ff77ea --- /dev/null +++ b/.changeset/stupid-crews-crash.md @@ -0,0 +1,7 @@ +--- +"create-cloudflare": patch +--- + +Graduate sveltekit + workers assets template from experimental + +You no longer need to pass in the --experimental flag to access this template.