create-cloudflare 2.0.0-next.1 → 2.0.0

package/README.md

@@ -1,15 +1,16 @@
 # create-cloudflare
 
-`create-cloudflare` is a scaffolding tool meant to help users get started with Cloudflare Pages using their framework of choice as quickly and easily as possible. 
-
-Instead of having to choose from a set of pre-constructed templates, this tool allows you to run the creation commands of your desired framework directly. This means that you can configure it with all the options the 
-
-To get started, run the following command:
+A CLI for creating and deploying new applications to Cloudflare.
 
 ```bash
-npm create cloudflare
+npm create cloudflare@latest
 # or
-yarn create cloudflare
+pnpm create cloudflare@latest
 # or
-pnmp create cloudflare
+yarn create cloudflare
 ```
+
+### Community
+
+- Join us [on Discord](https://discord.gg/cloudflaredev)
+- File an issue [on Github](https://github.com/cloudflare/workers-sdk/issues/new/choose)

package/dist/angular/templates/src/_routes.json

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"include": ["/*"],
+	"exclude": ["/*.*"]
+}

package/dist/angular/templates/src/main.server.ts

@@ -0,0 +1,35 @@
+import "zone.js/dist/zone-node";
+import "@angular/platform-server/init";
+
+import { bootstrapApplication } from "@angular/platform-browser";
+import { renderApplication } from "@angular/platform-server";
+
+import { AppComponent } from "./app/app.component";
+import { config } from "./app/app.config.server";
+
+interface Env {
+	ASSETS: { fetch: typeof fetch };
+}
+
+// We attach the Cloudflare `fetch()` handler to the global scope
+// so that we can export it when we process the Angular output.
+// See tools/bundle.mjs
+(globalThis as any).__workerFetchHandler = async function fetch(
+	request: Request,
+	env: Env
+) {
+	const url = new URL(request.url);
+	console.log("render SSR", url.href);
+
+	// Get the root `index.html` content.
+	const indexUrl = new URL("/", url);
+	const indexResponse = await env.ASSETS.fetch(new Request(indexUrl));
+	const document = await indexResponse.text();
+
+	const content = await renderApplication(
+		() => bootstrapApplication(AppComponent, config),
+		{ document, url: url.pathname }
+	);
+	// console.log("rendered SSR", content);
+	return new Response(content, indexResponse);
+};

package/dist/angular/templates/tools/bundle.mjs

@@ -0,0 +1,74 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { worker as workerPath } from "./paths.mjs";
+import * as esbuild from "esbuild";
+import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
+import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
+import fg from "fast-glob";
+
+// Process each of the JS files in the `_worker.js` directory
+for (const entry of await fg("**/*.js", { cwd: workerPath, onlyFiles: true })) {
+	if (entry === "index.js") {
+		// This is the main bundle and gets special treatment
+		await bundleMain();
+	} else {
+		await bundleLazyModule(entry);
+	}
+}
+
+// Use esbuild to process the main entry-point.
+// - shim Node.js APIs
+// - convert `global` to `globalThis`
+// - convert dynamic `require()` calls to `await import()` calls
+// - ensure that the Cloudflare `fetch()` handler is exported
+async function bundleMain() {
+	const result = await esbuild.build({
+		entryPoints: ["index.js"],
+		bundle: true,
+		format: "iife",
+		write: false,
+		absWorkingDir: workerPath,
+		define: {
+			global: "globalThis",
+		},
+		plugins: [
+			NodeGlobalsPolyfillPlugin({ buffer: true }),
+			NodeModulesPolyfillPlugin(),
+		],
+	});
+
+	let main = result.outputFiles[0].text;
+
+	// Patch any dynamic imports (converting `require()` calls to `import()` calls).
+	main = main.replace(
+		'installChunk(__require("./" + __webpack_require__.u(chunkId))',
+		'promises.push(import("./" + __webpack_require__.u(chunkId)).then((mod) => installChunk(mod.default))'
+	);
+	// Export the fetch handler (grabbing it from the global).
+	main += "\nexport default { fetch : globalThis.__workerFetchHandler };";
+
+	await fs.writeFile(path.resolve(workerPath, "index.js"), main);
+}
+
+// Use esbuild to process the lazy load modules
+// In particular we need to convert the CommonJS export syntax to ESM.
+async function bundleLazyModule(filePath) {
+	const result = await esbuild.build({
+		entryPoints: [filePath],
+		bundle: true,
+		format: "cjs",
+		write: false,
+		absWorkingDir: workerPath,
+		define: {
+			global: "globalThis",
+		},
+		plugins: [NodeModulesPolyfillPlugin()],
+	});
+
+	let content = result.outputFiles[0].text;
+
+	// Export the fetch handler (grabbing it from the global).
+	content = "const exports = {};\n" + content + "\nexport default exports";
+
+	await fs.writeFile(path.resolve(workerPath, filePath), content);
+}

package/dist/angular/templates/tools/copy-client-files.mjs

@@ -0,0 +1,4 @@
+// Copy the client-side files over so that they can be uploaded by the pages publish command.
+import fs from "node:fs";
+import { client, cloudflare } from "./paths.mjs";
+fs.cpSync(client, cloudflare, { recursive: true });

package/dist/angular/templates/tools/copy-worker-files.mjs

@@ -0,0 +1,10 @@
+// Copy the lazy loaded modules into the dist folder so that they can be
+// uploaded along with the main Worker module.
+import fs from "node:fs";
+import path from "node:path";
+import { ssr, worker } from "./paths.mjs";
+fs.cpSync(ssr, worker, { recursive: true });
+fs.renameSync(
+	path.resolve(worker, "main.js"),
+	path.resolve(worker, "index.js")
+);

package/dist/angular/templates/tools/paths.mjs

@@ -0,0 +1,9 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+export const root = path.resolve(dirname, "..");
+export const client = path.resolve(root, "dist/browser");
+export const ssr = path.resolve(root, "dist/server");
+export const cloudflare = path.resolve(root, "dist/cloudflare");
+export const worker = path.resolve(cloudflare, "_worker.js");

package/dist/angular/templates/tsconfig.server.json

@@ -0,0 +1,5 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+	"extends": "./tsconfig.app.json",
+	"files": ["./src/main.server.ts"]
+}