webstudio 0.0.1-c87cdba.0

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "webstudio",
+  "version": "0.0.1-c87cdba.0",
+  "description": "Webstudio CLI",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "type": "module",
+  "bin": {
+    "webstudio-cli": "./bin.js",
+    "webstudio": "./bin.js"
+  },
+  "imports": {
+    "#cli": {
+      "webstudio": "./src/cli.ts",
+      "default": "./lib/cli.js"
+    }
+  },
+  "files": [
+    "lib/*",
+    "templates/*",
+    "bin.js",
+    "!*.{test,stories}.*"
+  ],
+  "license": "AGPL-3.0-or-later",
+  "engines": {
+    "node": ">=20.12"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "@emotion/hash": "^0.9.2",
+    "acorn": "^8.14.0",
+    "acorn-walk": "^8.3.4",
+    "change-case": "^5.4.4",
+    "deepmerge": "^4.3.1",
+    "env-paths": "^3.0.0",
+    "nanoid": "^5.0.8",
+    "p-limit": "^4.0.0",
+    "parse5": "7.1.2",
+    "picocolors": "^1.1.0",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "reserved-identifiers": "^1.0.0",
+    "tinyexec": "^0.3.1",
+    "warn-once": "^0.1.1",
+    "yargs": "^17.7.2",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@netlify/remix-adapter": "^2.5.1",
+    "@netlify/remix-edge-adapter": "3.4.2",
+    "@remix-run/cloudflare": "^2.15.2",
+    "@remix-run/cloudflare-pages": "^2.15.2",
+    "@remix-run/dev": "^2.15.2",
+    "@remix-run/node": "^2.15.2",
+    "@remix-run/react": "^2.15.2",
+    "@remix-run/server-runtime": "^2.15.2",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "@types/yargs": "^17.0.33",
+    "@vitejs/plugin-react": "^4.3.4",
+    "prettier": "3.4.2",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "ts-expect": "^1.3.0",
+    "vike": "^0.4.210",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8",
+    "wrangler": "^3.63.2",
+    "@webstudio-is/http-client": "0.0.1-c87cdba.0",
+    "@webstudio-is/image": "0.0.1-c87cdba.0",
+    "@webstudio-is/sdk": "0.0.1-c87cdba.0",
+    "@webstudio-is/sdk-components-react-radix": "0.0.1-c87cdba.0",
+    "@webstudio-is/sdk-components-react": "0.0.1-c87cdba.0",
+    "@webstudio-is/react-sdk": "0.0.1-c87cdba.0",
+    "@webstudio-is/sdk-components-react-remix": "0.0.1-c87cdba.0",
+    "@webstudio-is/tsconfig": "1.0.8-c87cdba.0"
+  },
+  "scripts": {
+    "typecheck": "tsc",
+    "build": "rm -rf lib && vite build",
+    "test": "vitest run"
+  }
+}

package/templates/cloudflare/WS_CF_README.md

@@ -0,0 +1,48 @@
+# Welcome to Remix + Vite!
+
+📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features.
+
+## Typegen
+
+Generate types for your Cloudflare bindings in `wrangler.toml`:
+
+```sh
+npm run typegen
+```
+
+You will need to rerun typegen whenever you make changes to `wrangler.toml`.
+
+## Development
+
+Run the Vite dev server:
+
+```sh
+npm run dev
+```
+
+To run Wrangler:
+
+```sh
+npm run build
+npm run start
+```
+
+## Deployment
+
+> [!WARNING]  
+> Cloudflare does _not_ use `wrangler.toml` to configure deployment bindings.
+> You **MUST** [configure deployment bindings manually in the Cloudflare dashboard][bindings].
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then, deploy your app to Cloudflare Pages:
+
+```sh
+npm run deploy
+```
+
+[bindings]: https://developers.cloudflare.com/pages/functions/bindings/

package/templates/cloudflare/functions/[[path]].ts

@@ -0,0 +1,9 @@
+import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - the server build file is generated by `remix vite:build`
+import * as build from "../build/server";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - the server build file is generated by `remix vite:build`
+export const onRequest = createPagesFunctionHandler({ build });

package/templates/cloudflare/load-context.ts

@@ -0,0 +1,9 @@
+import { type PlatformProxy } from "wrangler";
+
+type Cloudflare = Omit<PlatformProxy<Env>, "dispose">;
+
+declare module "@remix-run/cloudflare" {
+  interface AppLoadContext {
+    cloudflare: Cloudflare;
+  }
+}

package/templates/cloudflare/package.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "remix vite:build",
+    "deploy": "npm run build && wrangler pages deploy ./build/client",
+    "dev": "remix vite:dev",
+    "start": "wrangler pages dev ./build/client",
+    "typegen": "wrangler types",
+    "preview": "npm run build && wrangler pages dev ./build/client",
+    "build-cf-types": "wrangler types"
+  },
+  "dependencies": {
+    "@remix-run/cloudflare": "2.15.2",
+    "@remix-run/cloudflare-pages": "2.15.2"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240620.0",
+    "wrangler": "^3.63.2"
+  }
+}

package/templates/cloudflare/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "types": [
+      "@remix-run/cloudflare",
+      "vite/client",
+      "@cloudflare/workers-types/2023-07-01",
+      "@webstudio-is/react-sdk/placeholder"
+    ]
+  }
+}

package/templates/cloudflare/vite.config.ts

@@ -0,0 +1,21 @@
+import {
+  vitePlugin as remix,
+  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
+} from "@remix-run/dev";
+import { defineConfig } from "vite";
+
+export default defineConfig(({ mode }) => ({
+  plugins: [
+    // without this, remixCloudflareDevProxy trying to load workerd even for production (it's not needed for production)
+    mode === "production" ? undefined : remixCloudflareDevProxy(),
+    remix({
+      future: {
+        v3_lazyRouteDiscovery: false,
+        v3_relativeSplatPath: false,
+        v3_singleFetch: false,
+        v3_fetcherPersist: false,
+        v3_throwAbortReason: false,
+      },
+    }),
+  ].filter(Boolean),
+}));

package/templates/cloudflare/worker-configuration.d.ts

@@ -0,0 +1,3 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm build-cf-types`
+interface Env {}

package/templates/cloudflare/wrangler.toml

@@ -0,0 +1,55 @@
+#:schema node_modules/wrangler/config-schema.json
+# https://developers.cloudflare.com/pages/functions/wrangler-configuration/
+name = "webstudio-remix-app"
+compatibility_date = "2024-04-05"
+pages_build_output_dir="./build"
+
+# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Note: Use secrets to store sensitive data.
+# Docs: https://developers.cloudflare.com/pages/functions/bindings/#environment-variables
+# [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"

package/templates/defaults/app/constants.mjs

@@ -0,0 +1,13 @@
+/**
+ * We use mjs extension as constants in this file is shared with the build script
+ * and we use `node --eval` to extract the constants.
+ */
+export const assetBaseUrl = "/assets/";
+export const imageBaseUrl = "/assets/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = ({ src }) => {
+  return src;
+};

package/templates/defaults/app/extension.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { AppLoadContext } from "@remix-run/server-runtime";
+import { ResourceRequest } from "@webstudio-is/sdk";
+
+declare module "@remix-run/server-runtime" {
+  interface AppLoadContext {
+    EXCLUDE_FROM_SEARCH: boolean;
+    getDefaultActionResource?: (options: {
+      url: URL;
+      projectId: string;
+      contactEmail: string;
+      formData: FormData;
+    }) => ResourceRequest;
+  }
+}

package/templates/defaults/app/root.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
+// @todo think about how to make __generated__ typeable
+// @ts-ignore
+import { CustomCode } from "./__generated__/_index";
+
+const Root = () => {
+  // Get language from matches
+  const matches = useMatches();
+
+  const lastMatchWithLanguage = matches.findLast((match) => {
+    // @ts-ignore
+    const language = match?.data?.pageMeta?.language;
+    return language != null;
+  });
+
+  // @ts-ignore
+  const lang = lastMatchWithLanguage?.data?.pageMeta?.language ?? "en";
+
+  return (
+    <html lang={lang}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <CustomCode />
+      </head>
+      <Outlet />
+    </html>
+  );
+};
+
+export default Root;

package/templates/defaults/app/route-templates/default-sitemap.tsx

@@ -0,0 +1,34 @@
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { sitemap } from "__SITEMAP__";
+
+export const loader = (arg: LoaderFunctionArgs) => {
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+
+  const urls = sitemap.map((page) => {
+    const url = new URL(`https://${host}${page.path}`);
+
+    return `
+  <url>
+    <loc>${url.href}</loc>
+    <lastmod>${page.lastModified.split("T")[0]}</lastmod>
+  </url>
+    `;
+  });
+
+  return new Response(
+    `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls.join("")}
+</urlset>
+  `,
+    {
+      headers: {
+        "Content-Type": "application/xml",
+      },
+      status: 200,
+    }
+  );
+};