webstudio 0.143.1 → 0.144.1-710b1d2.0

package/lib/cli.js

@@ -306,7 +306,7 @@ var downloadAsset = async (url, name, assetBaseUrl) => {
     }
   }
 };
-var mergeJsonFiles = async (sourcePath, destinationPath) => {
+var mergeJsonInto = async (sourcePath, destinationPath) => {
   const sourceJson = await readFile4(sourcePath, "utf8");
   const destinationJson = await readFile4(destinationPath, "utf8").catch(
     (error) => {
@@ -317,7 +317,7 @@ var mergeJsonFiles = async (sourcePath, destinationPath) => {
     }
   );
   const content = JSON.stringify(
-    merge(JSON.parse(sourceJson), JSON.parse(destinationJson)),
+    merge(JSON.parse(destinationJson), JSON.parse(sourceJson)),
     null,
     "  "
   );
@@ -350,7 +350,7 @@ var copyTemplates = async (template = "defaults") => {
     }
   });
   if (await isFileExists(join4(templatePath, "package.json")) === true) {
-    await mergeJsonFiles(
+    await mergeJsonInto(
       join4(templatePath, "package.json"),
       join4(cwd3(), "package.json")
     );
@@ -368,7 +368,7 @@ var prebuild = async (options) => {
     if (template === "vanilla") {
       continue;
     }
-    if (template.startsWith(".")) {
+    if (template.startsWith(".") || template.startsWith("/")) {
       continue;
     }
     if (await isCliTemplate(template) === false) {
@@ -545,20 +545,16 @@ var prebuild = async (options) => {
   }
   const assets = new Map(siteData.assets.map((asset) => [asset.id, asset]));
   spinner.text = "Generating css file";
-  const { cssText, classesMap } = generateCss(
-    {
-      assets: siteData.assets,
-      breakpoints: siteData.build?.breakpoints,
-      styles: siteData.build?.styles,
-      styleSourceSelections: siteData.build?.styleSourceSelections,
-      // pass only used metas to not generate unused preset styles
-      componentMetas: projectMetas
-    },
-    {
-      assetBaseUrl,
-      atomic: siteData.build.pages.compiler?.atomicStyles ?? true
-    }
-  );
+  const { cssText, classesMap } = generateCss({
+    assets,
+    breakpoints: new Map(siteData.build?.breakpoints),
+    styles: new Map(siteData.build?.styles),
+    styleSourceSelections: new Map(siteData.build?.styleSourceSelections),
+    // pass only used metas to not generate unused preset styles
+    componentMetas: projectMetas,
+    assetBaseUrl,
+    atomic: siteData.build.pages.compiler?.atomicStyles ?? true
+  });
   await ensureFileInPath(join4(generatedDir, "index.css"), cssText);
   spinner.text = "Generating routes and pages";
   const routeTemplatePath = normalize(
@@ -738,9 +734,9 @@ export const projectMeta: ProjectMeta =
     for (const redirect of redirects) {
       const redirectPagePath = generateRemixRoute(redirect.old);
       const redirectFileName = `${redirectPagePath}.ts`;
-      const content = `import { type LoaderArgs, redirect } from "@remix-run/server-runtime";
+      const content = `import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 
-export const loader = (arg: LoaderArgs) => {
+export const loader = (arg: LoaderFunctionArgs) => {
   return redirect("${redirect.new}", ${redirect.status ?? 301});
 };
 `;
@@ -921,7 +917,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.143.1",
+  version: "0.144.1-710b1d2.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -965,12 +961,25 @@ var package_default = {
     zod: "^3.22.4"
   },
   devDependencies: {
+    "@netlify/remix-adapter": "^2.3.0",
+    "@netlify/remix-edge-adapter": "3.2.0",
+    "@remix-run/cloudflare": "^2.8.1",
+    "@remix-run/cloudflare-pages": "^2.8.1",
+    "@remix-run/dev": "^2.8.1",
+    "@remix-run/node": "^2.8.1",
+    "@remix-run/react": "^2.8.1",
+    "@remix-run/server-runtime": "^2.8.1",
     "@types/node": "^18.17.1",
     "@types/prompts": "^2.4.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/yargs": "^17.0.32",
     "@webstudio-is/form-handlers": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
-    tsx: "^3.12.8",
-    typescript: "5.2.2"
+    tsx: "^4.7.2",
+    typescript: "5.2.2",
+    "vite-tsconfig-paths": "^4.3.2",
+    wrangler: "^3.48.0"
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.143.1",
+  "version": "0.144.1-710b1d2.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,21 +28,34 @@
     "title-case": "^4.1.0",
     "yargs": "^17.7.2",
     "zod": "^3.22.4",
-    "@webstudio-is/image": "0.143.1",
-    "@webstudio-is/http-client": "0.143.1",
-    "@webstudio-is/react-sdk": "0.143.1",
-    "@webstudio-is/sdk": "0.143.1",
-    "@webstudio-is/sdk-components-react-radix": "0.143.1",
-    "@webstudio-is/sdk-components-react": "0.143.1",
-    "@webstudio-is/sdk-components-react-remix": "0.143.1"
+    "@webstudio-is/image": "0.144.1-710b1d2.0",
+    "@webstudio-is/http-client": "0.144.1-710b1d2.0",
+    "@webstudio-is/react-sdk": "0.144.1-710b1d2.0",
+    "@webstudio-is/sdk": "0.144.1-710b1d2.0",
+    "@webstudio-is/sdk-components-react": "0.144.1-710b1d2.0",
+    "@webstudio-is/sdk-components-react-radix": "0.144.1-710b1d2.0",
+    "@webstudio-is/sdk-components-react-remix": "0.144.1-710b1d2.0"
   },
   "devDependencies": {
+    "@netlify/remix-adapter": "^2.3.0",
+    "@netlify/remix-edge-adapter": "3.2.0",
+    "@remix-run/cloudflare": "^2.8.1",
+    "@remix-run/cloudflare-pages": "^2.8.1",
+    "@remix-run/dev": "^2.8.1",
+    "@remix-run/node": "^2.8.1",
+    "@remix-run/react": "^2.8.1",
+    "@remix-run/server-runtime": "^2.8.1",
     "@types/node": "^18.17.1",
     "@types/prompts": "^2.4.5",
-    "tsx": "^3.12.8",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/yargs": "^17.0.32",
+    "tsx": "^4.7.2",
     "typescript": "5.2.2",
-    "@webstudio-is/form-handlers": "0.143.1",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "vite-tsconfig-paths": "^4.3.2",
+    "wrangler": "^3.48.0",
+    "@webstudio-is/form-handlers": "0.144.1-710b1d2.0",
+    "@webstudio-is/tsconfig": "1.0.8-710b1d2.0"
   },
   "scripts": {
     "typecheck": "tsc",

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,8 @@
+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`
+// eslint-disable-next-line import/no-unresolved
+import * as build from "../build/server";
+
+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,28 @@
+{
+  "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.8.1",
+    "@remix-run/cloudflare-pages": "^2.8.1",
+    "isbot": "^4.1.0"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240405.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "wrangler": "^3.48.0",
+    "miniflare": "^3.20231030.4"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/cloudflare/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": [
+      "@remix-run/cloudflare",
+      "vite/client",
+      "@cloudflare/workers-types/2023-07-01"
+    ],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Vite takes care of building everything, not tsc.
+    "noEmit": true
+  }
+}

package/templates/cloudflare/vite.config.ts

@@ -0,0 +1,15 @@
+import {
+  vitePlugin as remix,
+  cloudflareDevProxyVitePlugin as remixCloudflareDevProxy,
+} from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+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(),
+    tsconfigPaths(),
+  ].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/__templates__/route-template.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable camelcase */
 import {
-  type V2_ServerRuntimeMetaFunction,
+  type ServerRuntimeMetaFunction as MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
-  type ActionArgs,
-  type LoaderArgs,
-  type HeadersArgs,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+  type HeadersFunction,
   json,
   redirect,
 } from "@remix-run/server-runtime";
@@ -29,10 +29,10 @@ import {
   projectMeta,
 } from "../../../__generated__/_index.server";
 
-import css from "../__generated__/index.css";
+import css from "../__generated__/index.css?url";
 import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
 
-export const loader = async (arg: LoaderArgs) => {
+export const loader = async (arg: LoaderFunctionArgs) => {
   const url = new URL(arg.request.url);
   const params = getRemixParams(arg.params);
   const system = {
@@ -83,15 +83,15 @@ export const loader = async (arg: LoaderArgs) => {
   );
 };
 
-export const headers = ({ loaderHeaders }: HeadersArgs) => {
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
   return {
     "Cache-Control": "public, max-age=0, must-revalidate",
-    "x-ws-language": loaderHeaders.get("x-ws-language"),
+    "x-ws-language": loaderHeaders.get("x-ws-language") ?? "",
   };
 };
 
-export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
-  const metas: ReturnType<V2_ServerRuntimeMetaFunction> = [];
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  const metas: ReturnType<MetaFunction> = [];
   if (data === undefined) {
     return metas;
   }
@@ -240,7 +240,7 @@ const getMethod = (value: string | undefined) => {
   }
 };
 
-export const action = async ({ request, context }: ActionArgs) => {
+export const action = async ({ request, context }: ActionFunctionArgs) => {
   const formData = await request.formData();
 
   const formId = getFormId(formData);

package/templates/defaults/app/root.tsx

@@ -1 +1,17 @@
-export { Root as default } from "@webstudio-is/react-sdk";
+import { Links, Meta, Outlet } from "@remix-run/react";
+
+const Root = () => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <Outlet />
+    </html>
+  );
+};
+
+export default Root;

package/templates/defaults/app/routes/[robots.txt].tsx

@@ -1,6 +1,6 @@
-import type { LoaderArgs } from "@remix-run/server-runtime";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 
-export const loader = (arg: LoaderArgs) => {
+export const loader = (arg: LoaderFunctionArgs) => {
   const host =
     arg.request.headers.get("x-forwarded-host") ||
     arg.request.headers.get("host") ||

package/templates/defaults/app/routes/[sitemap.xml].tsx

@@ -1,7 +1,7 @@
-import type { LoaderArgs } from "@remix-run/server-runtime";
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { sitemap } from "../__generated__/[sitemap.xml]";
 
-export const loader = (arg: LoaderArgs) => {
+export const loader = (arg: LoaderFunctionArgs) => {
   const host =
     arg.request.headers.get("x-forwarded-host") ||
     arg.request.headers.get("host") ||

package/templates/defaults/package.json

@@ -1,32 +1,33 @@
 {
+  "type": "module",
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "build": "remix build",
-    "dev": "remix dev",
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/react": "^1.19.2",
-    "@remix-run/server-runtime": "^1.19.2",
-    "@remix-run/node": "^1.19.2",
-    "@webstudio-is/react-sdk": "0.143.1",
-    "@webstudio-is/sdk-components-react-radix": "0.143.1",
-    "@webstudio-is/sdk-components-react-remix": "0.143.1",
-    "@webstudio-is/sdk-components-react": "0.143.1",
-    "@webstudio-is/form-handlers": "0.143.1",
-    "@webstudio-is/image": "0.143.1",
-    "@webstudio-is/sdk": "0.143.1",
+    "@remix-run/react": "^2.8.1",
+    "@remix-run/server-runtime": "^2.8.1",
+    "@remix-run/node": "^2.8.1",
+    "@webstudio-is/react-sdk": "0.144.0",
+    "@webstudio-is/sdk-components-react-radix": "0.144.0",
+    "@webstudio-is/sdk-components-react-remix": "0.144.0",
+    "@webstudio-is/sdk-components-react": "0.144.0",
+    "@webstudio-is/form-handlers": "0.144.0",
+    "@webstudio-is/image": "0.144.0",
+    "@webstudio-is/sdk": "0.144.0",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/serve": "^1.19.2",
-    "@remix-run/dev": "^1.19.2",
+    "@remix-run/dev": "^2.8.1",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "vite": "^5.2.8"
   },
   "engines": {
     "node": ">=18.0.0"

package/templates/defaults/tsconfig.json

@@ -1,10 +1,12 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@remix-run/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
+    "module": "ESNext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "target": "ES2022",

package/templates/defaults/vite.config.ts

@@ -0,0 +1,15 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import { vitePlugin as remix } from "@remix-run/dev";
+
+export default defineConfig({
+  plugins: [remix()],
+  resolve: {
+    alias: [
+      {
+        find: "~",
+        replacement: resolve("app"),
+      },
+    ],
+  },
+});

package/templates/internal/package.json

@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@webstudio-is/react-sdk": "workspace:*",
+    "@webstudio-is/sdk-components-react-radix": "workspace:*",
+    "@webstudio-is/sdk-components-react-remix": "workspace:*",
+    "@webstudio-is/sdk-components-react": "workspace:*",
+    "@webstudio-is/form-handlers": "workspace:*",
+    "@webstudio-is/image": "workspace:*",
+    "@webstudio-is/sdk": "workspace:*"
+  }
+}

package/templates/netlify-edge-functions/netlify.toml

@@ -1,7 +1,16 @@
 [build]
 command = "npm run build"
-publish = "public"
+publish = "build/client"
 
 [dev]
 command = "npm run dev"
-targetPort = 3000
+framework = "vite"
+
+# Set immutable caching for static files, because they have fingerprinted filenames
+
+[[headers]]
+for = "/build/*"
+
+[headers.values]
+
+"Cache-Control" = "public, max-age=31560000, immutable"

package/templates/netlify-edge-functions/package.json

@@ -1,11 +1,9 @@
 {
   "scripts": {
-    "predev": "node -e \"fs.rmSync('./public/_redirects', { recursive: true, force: true })\"",
     "start": "netlify serve"
   },
   "dependencies": {
-    "@netlify/functions": "^1.3.0",
-    "@netlify/edge-functions": "^2.0.0",
-    "@netlify/remix-edge-adapter": "1.2.0"
+    "@netlify/edge-functions": "^2.3.1",
+    "@netlify/remix-edge-adapter": "3.2.0"
   }
 }

package/templates/netlify-edge-functions/vite.config.ts

@@ -0,0 +1,16 @@
+import { resolve } from "node:path";
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import { netlifyPlugin } from "@netlify/remix-edge-adapter/plugin";
+
+export default defineConfig({
+  plugins: [remix(), netlifyPlugin()],
+  resolve: {
+    alias: [
+      {
+        find: "~",
+        replacement: resolve("app"),
+      },
+    ],
+  },
+});

package/templates/netlify-functions/app/entry.server.tsx

@@ -1,21 +1 @@
-import type { EntryContext } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
-import { renderToString } from "react-dom/server";
-
-export default function handleRequest(
-  request: Request,
-  responseStatusCode: number,
-  responseHeaders: Headers,
-  remixContext: EntryContext
-) {
-  const markup = renderToString(
-    <RemixServer context={remixContext} url={request.url} />
-  );
-
-  responseHeaders.set("Content-Type", "text/html");
-
-  return new Response("<!DOCTYPE html>" + markup, {
-    headers: responseHeaders,
-    status: responseStatusCode,
-  });
-}
+export { handleRequest as default } from "@netlify/remix-adapter";

package/templates/netlify-functions/netlify.toml

@@ -1,14 +1,16 @@
 [build]
-command = "remix build && cp _app_redirects public/_redirects"
-publish = "public"
+command = "npm run build"
+publish = "build/client"
 
 [dev]
 command = "npm run dev"
-targetPort = 3000
+framework = "vite"
+
+# Set immutable caching for static files, because they have fingerprinted filenames
 
 [[headers]]
 for = "/build/*"
 
 [headers.values]
-# Set to 60 seconds as an example. You can also add cache headers via Remix. See the documentation on [headers](https://remix.run/docs/en/v1/route/headers) in Remix.
-"Cache-Control" = "public, max-age=60, s-maxage=60"
+
+"Cache-Control" = "public, max-age=31560000, immutable"

package/templates/netlify-functions/package.json

@@ -1,10 +1,9 @@
 {
   "scripts": {
-    "predev": "node -e \"fs.rmSync('./public/_redirects', { recursive: true, force: true })\"",
     "start": "netlify serve"
   },
   "dependencies": {
-    "@netlify/functions": "^1.3.0",
-    "@netlify/remix-adapter": "^1.0.0"
+    "@netlify/functions": "^2.6.0",
+    "@netlify/remix-adapter": "^2.3.0"
   }
 }

package/templates/netlify-functions/vite.config.ts

@@ -0,0 +1,16 @@
+import { resolve } from "node:path";
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import { netlifyPlugin } from "@netlify/remix-adapter/plugin";
+
+export default defineConfig({
+  plugins: [remix(), netlifyPlugin()],
+  resolve: {
+    alias: [
+      {
+        find: "~",
+        replacement: resolve("app"),
+      },
+    ],
+  },
+});

package/templates/saas-helpers/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "worktop": "0.8.0-next.18",
+    "zod": "^3.22.4"
+  }
+}

package/templates/vercel/package.json

@@ -1,5 +1 @@
-{
-  "scripts": {
-    "start": "remix-serve build"
-  }
-}
+{}

package/templates/defaults/remix.config.js

@@ -1,19 +0,0 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-  ignoredRouteFiles: ["**/.*"],
-  serverModuleFormat: "cjs",
-  serverDependenciesToBundle: [
-    /@webstudio-is\//,
-    "nanoid",
-    "change-case",
-    "title-case",
-  ],
-  future: {
-    v2_errorBoundary: true,
-    v2_headers: true,
-    v2_meta: true,
-    v2_normalizeFormMethod: true,
-    v2_routeConvention: true,
-    v2_dev: true,
-  },
-};

package/templates/defaults/remix.env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node" />

package/templates/netlify-edge-functions/remix.config.js

@@ -1,28 +0,0 @@
-const { config } = require("@netlify/remix-edge-adapter");
-const baseConfig =
-  process.env.NODE_ENV === "production"
-    ? config
-    : {
-        ignoredRouteFiles: ["**/.*"],
-        serverModuleFormat: "cjs",
-        serverDependenciesToBundle: [
-          /@webstudio-is\//,
-          "nanoid",
-          "change-case",
-          "title-case",
-        ],
-      };
-
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-  ignoredRouteFiles: ["**/.*"],
-  ...baseConfig,
-  future: {
-    v2_errorBoundary: true,
-    v2_headers: true,
-    v2_meta: true,
-    v2_normalizeFormMethod: true,
-    v2_routeConvention: true,
-    v2_dev: true,
-  },
-};

package/templates/netlify-edge-functions/server.js

@@ -1,19 +0,0 @@
-// Import path interpreted by the Remix compiler
-import * as build from "@remix-run/dev/server-build";
-import { createRequestHandler } from "@netlify/remix-edge-adapter";
-
-export default createRequestHandler({
-  build,
-  // process.env.NODE_ENV is provided by Remix at compile time
-  mode: process.env.NODE_ENV,
-});
-
-export const config = {
-  cache: "manual",
-  path: "/*",
-  // Let the CDN handle requests for static assets, i.e. ^/_assets/*$
-  //
-  // Add other exclusions here, e.g. "^/api/*$" for custom Netlify functions or
-  // custom Netlify Edge Functions
-  excluded_patterns: ["^/_assets/*$"],
-};

package/templates/netlify-functions/_app_redirects

@@ -1,9 +0,0 @@
-# This template uses this file instead of the typicial Netlify \_redirects file.
-
-# For more information about redirects and rewrites, see https://docs.netlify.com/routing/redirects/.
-
-# Do not remove the line below. This is required to serve the project when deployed.
-
-/\* /.netlify/functions/server 200
-
-# Add other redirects and rewrites here and/or in your netlify.toml

package/templates/netlify-functions/remix.config.js

@@ -1,30 +0,0 @@
-const baseConfig =
-  process.env.NODE_ENV === "production"
-    ? // when running the Netify CLI or building on Netlify, we want to use
-      {
-        server: "./server.js",
-        serverBuildPath: ".netlify/functions-internal/server.js",
-      }
-    : // otherwise support running remix dev, i.e. no custom server
-      undefined;
-
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-  ...baseConfig,
-  ignoredRouteFiles: ["**/.*"],
-  serverModuleFormat: "cjs",
-  serverDependenciesToBundle: [
-    /@webstudio-is\//,
-    "nanoid",
-    "change-case",
-    "title-case",
-  ],
-  future: {
-    v2_errorBoundary: true,
-    v2_headers: true,
-    v2_meta: true,
-    v2_normalizeFormMethod: true,
-    v2_routeConvention: true,
-    v2_dev: true,
-  },
-};

package/templates/netlify-functions/server.js

@@ -1,7 +0,0 @@
-import { createRequestHandler } from "@netlify/remix-adapter";
-import * as build from "@remix-run/dev/server-build";
-
-export const handler = createRequestHandler({
-  build,
-  mode: process.env.NODE_ENV,
-});