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.

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

make sure C3 works with the latest astro versions #7497

Merged
merged 1 commit into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .changeset/polite-dragons-compete.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"create-cloudflare": patch
---

fix: make sure C3 works with the latest Astro versions
50 changes: 17 additions & 33 deletions packages/create-cloudflare/templates-experimental/astro/c3.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { logRaw, updateStatus } from "@cloudflare/cli";
import { blue, brandColor, dim } from "@cloudflare/cli/colors";
import { runFrameworkGenerator } from "frameworks/index";
import { loadTemplateSnippets, transformFile } from "helpers/codemod";
import { transformFile } from "helpers/codemod";
import { runCommand } from "helpers/command";
import { usesTypescript } from "helpers/files";
import { detectPackageManager } from "helpers/packageManagers";
Expand All @@ -17,7 +17,7 @@ const generate = async (ctx: C3Context) => {
logRaw(""); // newline
};

const configure = async (ctx: C3Context) => {
const configure = async () => {
await runCommand([npx, "astro", "add", "cloudflare", "-y"], {
silent: true,
startText: "Installing adapter",
Expand All @@ -27,7 +27,6 @@ const configure = async (ctx: C3Context) => {
});

updateAstroConfig();
updateEnvDeclaration(ctx);
};

const updateAstroConfig = () => {
Expand Down Expand Up @@ -59,43 +58,28 @@ const updateAstroConfig = () => {
});
};

const updateEnvDeclaration = (ctx: C3Context) => {
if (!usesTypescript(ctx)) {
return;
}

const filePath = "src/env.d.ts";

updateStatus(`Adding type declarations in ${blue(filePath)}`);

transformFile(filePath, {
visitProgram: function (n) {
const snippets = loadTemplateSnippets(ctx);
const patch = snippets.runtimeDeclarationTs;
const b = recast.types.builders;

// Preserve comments with the new body
const comments = n.get("comments").value;
n.node.comments = comments.map((c: recast.types.namedTypes.CommentLine) =>
b.commentLine(c.value),
);

// Add the patch
n.get("body").push(...patch);

return false;
},
});
};

const config: TemplateConfig = {
configVersion: 1,
id: "astro",
frameworkCli: "create-astro",
platform: "workers",
displayName: "Astro",
copyFiles: {
path: "./templates",
async selectVariant(ctx) {
// Note: this `selectVariant` function should not be needed
// this is just a quick workaround until
// https://github.com/cloudflare/workers-sdk/issues/7495
// is resolved
return usesTypescript(ctx) ? "ts" : "js";
},
Comment on lines +68 to +74
Copy link
Member Author

@dario-piotrowicz dario-piotrowicz Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Funnily enough, it looks like this isn't really needed since it looks like the Astro CLI creates a tsconfig.json for you even if you tell it that you're not planning on using TypeScript 🤷

I would still keep this in as I think this is the proper implementation (workaround excluded) and it is more robust (it won't break if the Astro CLI changes the above behavior and stops creating the tsconfig file)

variants: {
js: {
path: "./templates/js",
},
ts: {
path: "./templates/ts",
},
},
},
devScript: "dev",
deployScript: "deploy",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
_worker.js
_routes.json
_headers
_redirects
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// Generated by Wrangler
// After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
interface Env {
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
#:schema node_modules/wrangler/config-schema.json
name = "<TBD>"
compatibility_date = "<TBD>"
compatibility_flags = ["nodejs_compat_v2"]
main = "./dist/_worker.js/index.js"
assets = { directory = "./dist", binding = "ASSETS" }

# Workers Logs
# Docs: https://developers.cloudflare.com/workers/observability/logs/workers-logs/
# Configuration: https://developers.cloudflare.com/workers/observability/logs/workers-logs/#enable-workers-logs
[observability]
enabled = true
50 changes: 17 additions & 33 deletions packages/create-cloudflare/templates/astro/c3.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { logRaw, updateStatus } from "@cloudflare/cli";
import { blue, brandColor, dim } from "@cloudflare/cli/colors";
import { runFrameworkGenerator } from "frameworks/index";
import { loadTemplateSnippets, transformFile } from "helpers/codemod";
import { transformFile } from "helpers/codemod";
import { runCommand } from "helpers/command";
import { usesTypescript } from "helpers/files";
import { detectPackageManager } from "helpers/packageManagers";
Expand All @@ -17,7 +17,7 @@ const generate = async (ctx: C3Context) => {
logRaw(""); // newline
};

const configure = async (ctx: C3Context) => {
const configure = async () => {
await runCommand([npx, "astro", "add", "cloudflare", "-y"], {
silent: true,
startText: "Installing adapter",
Expand All @@ -27,7 +27,6 @@ const configure = async (ctx: C3Context) => {
});

updateAstroConfig();
updateEnvDeclaration(ctx);
};

const updateAstroConfig = () => {
Expand Down Expand Up @@ -59,43 +58,28 @@ const updateAstroConfig = () => {
});
};

const updateEnvDeclaration = (ctx: C3Context) => {
if (!usesTypescript(ctx)) {
return;
}

const filePath = "src/env.d.ts";

updateStatus(`Adding type declarations in ${blue(filePath)}`);

transformFile(filePath, {
visitProgram: function (n) {
const snippets = loadTemplateSnippets(ctx);
const patch = snippets.runtimeDeclarationTs;
const b = recast.types.builders;

// Preserve comments with the new body
const comments = n.get("comments").value;
n.node.comments = comments.map((c: recast.types.namedTypes.CommentLine) =>
b.commentLine(c.value),
);

// Add the patch
n.get("body").push(...patch);

return false;
},
});
};

const config: TemplateConfig = {
configVersion: 1,
id: "astro",
frameworkCli: "create-astro",
platform: "pages",
displayName: "Astro",
copyFiles: {
path: "./templates",
async selectVariant(ctx) {
// Note: this `selectVariant` function should not be needed
// this is just a quick workaround until
// https://github.com/cloudflare/workers-sdk/issues/7495
// is resolved
return usesTypescript(ctx) ? "ts" : "js";
},
variants: {
js: {
path: "./templates/js",
},
ts: {
path: "./templates/ts",
},
},
},
devScript: "dev",
deployScript: "deploy",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// Generated by Wrangler
// After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
interface Env {
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
#:schema node_modules/wrangler/config-schema.json
name = "<TBD>"
compatibility_date = "<TBD>"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = "./dist"

# Automatically place your workloads in an optimal location to minimize latency.
# If you are running back-end logic in a Pages Function, running it closer to your back-end infrastructure
# rather than the end user may result in better performance.
# Docs: https://developers.cloudflare.com/pages/functions/smart-placement/#smart-placement
# [placement]
# mode = "smart"

# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
# Docs:
# - https://developers.cloudflare.com/pages/functions/bindings/#environment-variables
# Note: Use secrets to store sensitive data.
# - https://developers.cloudflare.com/pages/functions/bindings/#secrets
# [vars]
# MY_VARIABLE = "production_value"

# Bind the Workers AI model catalog. Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network
# Docs: https://developers.cloudflare.com/pages/functions/bindings/#workers-ai
# [ai]
# binding = "AI"

# Bind a D1 database. D1 is Cloudflare’s native serverless SQL database.
# Docs: https://developers.cloudflare.com/pages/functions/bindings/#d1-databases
# [[d1_databases]]
# binding = "MY_DB"
# database_name = "my-database"
# database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

# Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model.
# Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps.
# Docs: https://developers.cloudflare.com/workers/runtime-apis/durable-objects
# [[durable_objects.bindings]]
# name = "MY_DURABLE_OBJECT"
# class_name = "MyDurableObject"
# script_name = 'my-durable-object'

# Bind a KV Namespace. Use KV as persistent storage for small key-value pairs.
# Docs: https://developers.cloudflare.com/pages/functions/bindings/#kv-namespaces
# [[kv_namespaces]]
# binding = "MY_KV_NAMESPACE"
# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# Bind a Queue producer. Use this binding to schedule an arbitrary task that may be processed later by a Queue consumer.
# Docs: https://developers.cloudflare.com/pages/functions/bindings/#queue-producers
# [[queues.producers]]
# binding = "MY_QUEUE"
# queue = "my-queue"

# Bind an R2 Bucket. Use R2 to store arbitrarily large blobs of data, such as files.
# Docs: https://developers.cloudflare.com/pages/functions/bindings/#r2-buckets
# [[r2_buckets]]
# binding = "MY_BUCKET"
# bucket_name = "my-bucket"

# Bind another Worker service. Use this binding to call another Worker without network overhead.
# Docs: https://developers.cloudflare.com/pages/functions/bindings/#service-bindings
# [[services]]
# binding = "MY_SERVICE"
# service = "my-service"

# To use different bindings for preview and production environments, follow the examples below.
# When using environment-specific overrides for bindings, ALL bindings must be specified on a per-environment basis.
# Docs: https://developers.cloudflare.com/pages/functions/wrangler-configuration#environment-specific-overrides

######## PREVIEW environment config ########

# [env.preview.vars]
# API_KEY = "xyz789"

# [[env.preview.kv_namespaces]]
# binding = "MY_KV_NAMESPACE"
# id = "<PREVIEW_NAMESPACE_ID>"

######## PRODUCTION environment config ########

# [env.production.vars]
# API_KEY = "abc123"

# [[env.production.kv_namespaces]]
# binding = "MY_KV_NAMESPACE"
# id = "<PRODUCTION_NAMESPACE_ID>"
Loading