npm - create-cloudflare - Versions diffs - 0.0.0-e8df68ee → 0.0.0-e9106dfa5 - Mend

create-cloudflare 0.0.0-e8df68ee → 0.0.0-e9106dfa5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (307) hide show

package/templates/hello-world-with-assets/ts/__dot__gitignore ADDED Viewed

@@ -0,0 +1,172 @@
+# Logs
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+# Runtime data
+pids
+_.pid
+_.seed
+\*.pid.lock
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+# Coverage directory used by tools like istanbul
+coverage
+\*.lcov
+# nyc test coverage
+.nyc_output
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+# Bower dependency directory (https://bower.io/)
+bower_components
+# node-waf configuration
+.lock-wscript
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+# Dependency directories
+node_modules/
+jspm_packages/
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+# TypeScript cache
+\*.tsbuildinfo
+# Optional npm cache directory
+.npm
+# Optional eslint cache
+.eslintcache
+# Optional stylelint cache
+.stylelintcache
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+# Optional REPL history
+.node_repl_history
+# Output of 'npm pack'
+\*.tgz
+# Yarn Integrity file
+.yarn-integrity
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+# Next.js build output
+.next
+out
+# Nuxt.js build / generate output
+.nuxt
+dist
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+# vuepress build output
+.vuepress/dist
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+# Docusaurus cache and generated files
+.docusaurus
+# Serverless directories
+.serverless/
+# FuseBox cache
+.fusebox/
+# DynamoDB Local files
+.dynamodb/
+# TernJS port file
+.tern-port
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+# wrangler project
+.dev.vars
+.wrangler/

package/templates/hello-world-with-assets/ts/package.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+	"name": "<TBD>",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"dev": "wrangler dev",
+		"start": "wrangler dev",
+		"test": "vitest",
+		"cf-typegen": "wrangler types"
+	},
+	"devDependencies": {
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
+		"typescript": "^5.5.2",
+		"vitest": "~3.0.7",
+		"wrangler": "^3.101.0"
+	}
+}

package/templates/hello-world-with-assets/ts/public/index.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Hello, World!</title>
+	</head>
+	<body>
+		<h1 id="heading"></h1>
+		<button id="button" type="button">Fetch a random UUID</button>
+		<output id="random" for="button"></output>
+		<script>
+			fetch('/message')
+				.then((resp) => resp.text())
+				.then((text) => {
+					const h1 = document.getElementById('heading');
+					h1.textContent = text;
+				});
+			const button = document.getElementById("button");
+			button.addEventListener("click", () => {
+				fetch('/random')
+					.then((resp) => resp.text())
+					.then((text) => {
+						const random = document.getElementById('random');
+						random.textContent = text;
+					});
+			});
+		</script>
+	</body>
+</html>

package/templates/hello-world-with-assets/ts/src/index.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * Welcome to Cloudflare Workers! This is your first worker.
+ *
+ * - Run `npm run dev` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your worker in action
+ * - Run `npm run deploy` to publish your worker
+ *
+ * Bind resources to your worker in `wrangler.jsonc`. After adding bindings, a type definition for the
+ * `Env` object can be regenerated with `npm run cf-typegen`.
+ *
+ * Learn more at https://developers.cloudflare.com/workers/
+ */
+export default {
+	async fetch(request, env, ctx): Promise<Response> {
+		const url = new URL(request.url);
+		switch (url.pathname) {
+			case '/message':
+				return new Response('Hello, World!');
+			case '/random':
+				return new Response(crypto.randomUUID());
+			default:
+				return new Response('Not Found', { status: 404 });
+		}
+	},
+} satisfies ExportedHandler<Env>;

package/templates/hello-world-with-assets/ts/test/env.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+declare module 'cloudflare:test' {
+	interface ProvidedEnv extends Env {}
+}

package/templates/hello-world-with-assets/ts/test/index.spec.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
+import { describe, it, expect } from 'vitest';
+import worker from '../src';
+describe('Hello World user worker', () => {
+	describe('request for /message', () => {
+		it('/ responds with "Hello, World!" (unit style)', async () => {
+			const request = new Request<unknown, IncomingRequestCfProperties>('http://example.com/message');
+			// Create an empty context to pass to `worker.fetch()`.
+			const ctx = createExecutionContext();
+			const response = await worker.fetch(request, env, ctx);
+			// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+			await waitOnExecutionContext(ctx);
+			expect(await response.text()).toMatchInlineSnapshot(`"Hello, World!"`);
+		});
+		it('responds with "Hello, World!" (integration style)', async () => {
+			const request = new Request('http://example.com/message');
+			const response = await SELF.fetch(request);
+			expect(await response.text()).toMatchInlineSnapshot(`"Hello, World!"`);
+		});
+	});
+	describe('request for /random', () => {
+		it('/ responds with a random UUID (unit style)', async () => {
+			const request = new Request<unknown, IncomingRequestCfProperties>('http://example.com/random');
+			// Create an empty context to pass to `worker.fetch()`.
+			const ctx = createExecutionContext();
+			const response = await worker.fetch(request, env, ctx);
+			// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+			await waitOnExecutionContext(ctx);
+			expect(await response.text()).toMatch(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/);
+		});
+		it('responds with a random UUID (integration style)', async () => {
+			const request = new Request('http://example.com/random');
+			const response = await SELF.fetch(request);
+			expect(await response.text()).toMatch(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/);
+		});
+	});
+});

package/templates/hello-world-with-assets/ts/test/tsconfig.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"types": ["@cloudflare/workers-types/experimental", "@cloudflare/vitest-pool-workers"]
+	},
+	"include": ["./**/*.ts", "../worker-configuration.d.ts"],
+	"exclude": []
+}

package/templates/hello-world-with-assets/ts/tsconfig.json ADDED Viewed

@@ -0,0 +1,44 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+    /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		"target": "es2021",
+    /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		"lib": ["es2021"],
+    /* Specify what JSX code is generated. */
+		"jsx": "react-jsx",
+    /* Specify what module code is generated. */
+		"module": "es2022",
+    /* Specify how TypeScript looks up a file from a given module specifier. */
+		"moduleResolution": "Bundler",
+    /* Specify type package names to be included without being referenced in a source file. */
+		"types": ["@cloudflare/workers-types"],
+    /* Enable importing .json files */
+		"resolveJsonModule": true,
+    /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+		"allowJs": true,
+    /* Enable error reporting in type-checked JavaScript files. */
+		"checkJs": false,
+    /* Disable emitting files from a compilation. */
+		"noEmit": true,
+    /* Ensure that each file can be safely transpiled without relying on other imports. */
+		"isolatedModules": true,
+    /* Allow 'import x from y' when a module doesn't have a default export. */
+		"allowSyntheticDefaultImports": true,
+    /* Ensure that casing is correct in imports. */
+		"forceConsistentCasingInFileNames": true,
+    /* Enable all strict type-checking options. */
+		"strict": true,
+    /* Skip type checking all .d.ts files. */
+		"skipLibCheck": true
+	},
+	"exclude": ["test"],
+	"include": ["worker-configuration.d.ts", "src/**/*.ts"]
+}

package/templates/hello-world-with-assets/ts/vitest.config.mts ADDED Viewed

@@ -0,0 +1,11 @@
+import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';
+export default defineWorkersConfig({
+	test: {
+		poolOptions: {
+			workers: {
+				wrangler: { configPath: './wrangler.jsonc' },
+			},
+		},
+	},
+});

package/templates/hello-world-with-assets/ts/worker-configuration.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+// Generated by Wrangler by running `wrangler types --include-runtime=false` (hash: 187132f48ddf0f604882ba8213fe386f)
+declare namespace Cloudflare {
+	interface Env {
+		ASSETS: Fetcher;
+	}
+}
+interface Env extends Cloudflare.Env {}

package/templates/hello-world-with-assets/ts/wrangler.jsonc ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "name": "<TBD>",
+  "main": "src/index.ts",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./public"
+  },
+  "observability": {
+    "enabled": true
+  }
+}

package/templates/hono/c3.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
+const config: MultiPlatformTemplateConfig = {
+	displayName: "Hono",
+	platformVariants: { pages, workers },
+};
+export default config;

package/templates/hono/pages/c3.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"cloudflare-pages",
+		"--install",
+		"--pm",
+		pm,
+	]);
+	logRaw(""); // newline
+};
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	frameworkCli: "create-hono",
+	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/hono/pages",
+	platform: "pages",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "dev",
+};
+export default config;

package/templates/hono/pages/templates/src/index.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { Hono } from 'hono'
+import { renderer } from './renderer'
+const app = new Hono<{ Bindings: CloudflareBindings }>();
+app.use(renderer)
+app.get('/', (c) => {
+  return c.render(<h1>Hello!</h1>)
+})
+export default app

package/templates/hono/pages/templates/worker-configuration.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
+interface CloudflareBindings {
+}

package/templates/hono/pages/templates/wrangler.jsonc ADDED Viewed

@@ -0,0 +1,9 @@
+{
+  "name": "<TBD>",
+  "main": "src/index.ts",
+  "compatibility_date": "<TBD>",
+	"pages_build_output_dir": "./dist",
+  "observability": {
+    "enabled": true
+  }
+}

package/templates/hono/workers/c3.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"cloudflare-workers",
+		"--install",
+		"--pm",
+		pm,
+	]);
+	logRaw(""); // newline
+};
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	frameworkCli: "create-hono",
+	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
+	platform: "workers",
+	path: "templates/hono/workers",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "dev",
+};
+export default config;

package/templates/hono/workers/templates/public/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Hello, World!</title>
+	</head>
+	<body>
+		<h1 id="heading"></h1>
+		<script>
+			fetch('/message')
+				.then((resp) => resp.text())
+				.then((text) => {
+					const h1 = document.getElementById('heading');
+					h1.textContent = text;
+				});
+		</script>
+	</body>
+</html>

package/templates/hono/workers/templates/src/index.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Hono } from "hono";
+const app = new Hono<{ Bindings: CloudflareBindings }>();
+app.get("/message", (c) => {
+  return c.text("Hello Hono!");
+});
+export default app;

package/templates/hono/workers/templates/worker-configuration.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.jsonc`, regenerate this interface via `npm run cf-typegen`
+interface CloudflareBindings {
+}

package/templates/hono/workers/templates/wrangler.jsonc ADDED Viewed

@@ -0,0 +1,9 @@
+{
+  "name": "<TBD>",
+  "main": "src/index.ts",
+  "compatibility_date": "<TBD>",
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./public"
+  }
+}

package/templates/next/README.md ADDED Viewed

@@ -0,0 +1,67 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
+## Getting Started
+First, run the development server:
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Cloudflare integration
+Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
+  - `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
+  - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
+  - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
+> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md#recommended-development-workflow))
+### Bindings
+Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
+You can use bindings during development, when previewing locally your application and of course in the deployed application:
+- To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
+- To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the  [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+#### KV Example
+`c3` has added for you an example showing how you can use a KV binding.
+In order to enable the example:
+- Search for javascript/typescript lines containing the following comment:
+  ```ts
+  // KV Example:
+  ```
+  and uncomment the commented lines below it (also uncomment the relevant imports).
+- In the `wrangler.jsonc` file add the following configuration line:
+  ```
+  "kv_namespaces": [{ "binding": "MY_KV_NAMESPACE", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }],
+  ```
+- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
+  ```bash
+  npm run cf-typegen
+  # or
+  yarn cf-typegen
+  # or
+  pnpm cf-typegen
+  # or
+  bun cf-typegen
+  ```
+After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.
+Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.

package/templates/next/app/js/app/api/hello/route.js ADDED Viewed

@@ -0,0 +1,21 @@
+// import { getRequestContext } from '@cloudflare/next-on-pages'
+export const runtime = 'edge'
+export async function GET() {
+  const responseText = 'Hello World'
+  // In the edge runtime you can use Bindings that are available in your application
+  // (for more details see:
+  //    - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
+  //    - https://developers.cloudflare.com/pages/functions/bindings/
+  // )
+  //
+  // KV Example:
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
+  // await myKv.put('suffix', ' from a KV store!')
+  // const suffix = await myKv.get('suffix')
+  // return new Response(responseText + suffix)
+  return new Response(responseText)
+}