webstudio 0.142.0 → 0.144.0

package/lib/cli.js

@@ -259,23 +259,23 @@ import ora2 from "ora";
 import merge from "deepmerge";
 import {
   generateCss,
-  generateUtilsExport,
   generateWebstudioComponent,
   getIndexesWithinAncestors,
   namespaceMeta,
   normalizeProps,
   generateRemixRoute,
   generateRemixParams,
-  generateResourcesLoader,
-  collectionComponent,
-  generatePageMeta,
-  executeExpression
+  collectionComponent
 } from "@webstudio-is/react-sdk";
 import {
   createScope,
   findTreeInstanceIds,
   getPagePath,
-  parseComponentName
+  parseComponentName,
+  executeExpression,
+  generateFormsProperties,
+  generateResourcesLoader,
+  generatePageMeta
 } from "@webstudio-is/sdk";
 import { createImageLoader } from "@webstudio-is/image";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
@@ -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")
     );
@@ -514,12 +514,6 @@ var prebuild = async (options) => {
     backgroundImageAssetsByPage[page.id] = backgroundImageAssets;
   }
   const assetsToDownload = [];
-  const imageAssets = [];
-  for (const asset of siteData.assets) {
-    if (asset.type === "image") {
-      imageAssets.push(asset);
-    }
-  }
   const appDomain = options.preview ? "wstd.work" : "wstd.io";
   const assetBuildUrl = `https://${domain}.${appDomain}/cgi/asset/`;
   const imageLoader = createImageLoader({
@@ -549,21 +543,18 @@ 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(
@@ -577,17 +568,6 @@ var prebuild = async (options) => {
       "useState",
       "Fragment",
       "useResource",
-      "PageMeta",
-      "createPageMeta",
-      "PageData",
-      "Asset",
-      "ProjectMeta",
-      "System",
-      "fontAssets",
-      "pageData",
-      "user",
-      "projectId",
-      "formsProperties",
       "Page",
       "_props"
     ]);
@@ -624,15 +604,11 @@ var prebuild = async (options) => {
     const pageData = siteDataByPage[pageId];
     const pageFontAssets = fontAssetsByPage[pageId];
     const pageBackgroundImageAssets = backgroundImageAssetsByPage[pageId];
-    const renderedPageData = {
-      project: siteData.build.pages.meta
-    };
     const rootInstanceId = pageData.page.rootInstanceId;
     const instances = new Map(pageData.build.instances);
     const props = new Map(pageData.build.props);
     const dataSources = new Map(pageData.build.dataSources);
     const resources = new Map(pageData.build.resources);
-    const utilsExport = generateUtilsExport({ props });
     const pageComponent = generateWebstudioComponent({
       scope,
       name: "Page",
@@ -656,39 +632,67 @@ var prebuild = async (options) => {
         [rootInstanceId]
       )
     });
+    const projectMeta = siteData.build.pages.meta;
+    const pageMeta = pageData.page.meta;
+    const favIconAsset = assets.get(projectMeta?.faviconAssetId ?? "");
+    const socialImageAsset = assets.get(pageMeta.socialImageAssetId ?? "");
     const pageExports = `/* eslint-disable */
 /* This is a auto generated file for building the project */ 
 
+
 import { Fragment, useState } from "react";
-import type { Asset, FontAsset, ImageAsset, ProjectMeta, System } from "@webstudio-is/sdk";
+import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
 import { useResource } from "@webstudio-is/react-sdk";
-import type { PageMeta } from "@webstudio-is/react-sdk";
 ${componentImports}
-import type { PageData } from "~/routes/_index";
-export const imageAssets: ImageAsset[] = ${JSON.stringify(imageAssets)}
+
+export const favIconAsset: ImageAsset | undefined =
+  ${JSON.stringify(favIconAsset)};
+
+export const socialImageAsset: ImageAsset | undefined =
+  ${JSON.stringify(socialImageAsset)};
 
 // Font assets on current page (can be preloaded)
-export const pageFontAssets: FontAsset[] = ${JSON.stringify(pageFontAssets)}
+export const pageFontAssets: FontAsset[] =
+  ${JSON.stringify(pageFontAssets)}
 
-export const pageBackgroundImageAssets: ImageAsset[] = ${JSON.stringify(
-      pageBackgroundImageAssets
-    )}
+export const pageBackgroundImageAssets: ImageAsset[] =
+  ${JSON.stringify(pageBackgroundImageAssets)}
 
-export const pageData: PageData = ${JSON.stringify(renderedPageData)};
-export const user: { email: string | null } | undefined = ${JSON.stringify(
-      siteData.user
-    )};
-export const projectId = "${siteData.build.projectId}";
 
-${generatePageMeta({ globalScope: scope, page: pageData.page, dataSources })}
 
 ${pageComponent}
 
 export { Page }
+`;
+    const serverExports = `/* eslint-disable */
+/* This is a auto generated file for building the project */ 
+
+
+import type { ProjectMeta, PageMeta } from "@webstudio-is/sdk";
+${generateResourcesLoader({
+      scope,
+      page: pageData.page,
+      dataSources,
+      resources
+    })}
+
+${generatePageMeta({
+      globalScope: scope,
+      page: pageData.page,
+      dataSources
+    })}
+
+${generateFormsProperties(props)}
 
 ${generateRemixParams(pageData.page.path)}
 
-${utilsExport}
+export const projectId = "${siteData.build.projectId}";
+
+export const user: { email: string | null } | undefined =
+  ${JSON.stringify(siteData.user)};
+
+export const projectMeta: ProjectMeta =
+  ${JSON.stringify(projectMeta)};
 `;
     const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
     const remixRoute = generateRemixRoute(pagePath);
@@ -704,12 +708,7 @@ ${utilsExport}
     await ensureFileInPath(join4(generatedDir, fileName), pageExports);
     await ensureFileInPath(
       join4(generatedDir, `${remixRoute}.server.tsx`),
-      generateResourcesLoader({
-        scope,
-        page: pageData.page,
-        dataSources,
-        resources
-      })
+      serverExports
     );
   }
   await writeFile4(
@@ -735,9 +734,9 @@ ${utilsExport}
     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});
 };
 `;
@@ -918,7 +917,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.142.0",
+  version: "0.144.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -966,7 +965,7 @@ var package_default = {
     "@types/prompts": "^2.4.5",
     "@webstudio-is/form-handlers": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
-    tsx: "^3.12.8",
+    tsx: "^4.7.2",
     typescript: "5.2.2"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webstudio",
-  "version": "0.142.0",
+  "version": "0.144.0",
   "description": "Webstudio CLI",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,20 +28,20 @@
     "title-case": "^4.1.0",
     "yargs": "^17.7.2",
     "zod": "^3.22.4",
-    "@webstudio-is/http-client": "0.142.0",
-    "@webstudio-is/react-sdk": "0.142.0",
-    "@webstudio-is/sdk": "0.142.0",
-    "@webstudio-is/sdk-components-react": "0.142.0",
-    "@webstudio-is/image": "0.142.0",
-    "@webstudio-is/sdk-components-react-remix": "0.142.0",
-    "@webstudio-is/sdk-components-react-radix": "0.142.0"
+    "@webstudio-is/http-client": "0.144.0",
+    "@webstudio-is/react-sdk": "0.144.0",
+    "@webstudio-is/image": "0.144.0",
+    "@webstudio-is/sdk": "0.144.0",
+    "@webstudio-is/sdk-components-react": "0.144.0",
+    "@webstudio-is/sdk-components-react-remix": "0.144.0",
+    "@webstudio-is/sdk-components-react-radix": "0.144.0"
   },
   "devDependencies": {
     "@types/node": "^18.17.1",
     "@types/prompts": "^2.4.5",
-    "tsx": "^3.12.8",
+    "tsx": "^4.7.2",
     "typescript": "5.2.2",
-    "@webstudio-is/form-handlers": "0.142.0",
+    "@webstudio-is/form-handlers": "0.144.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/templates/defaults/__templates__/route-template.tsx

@@ -1,43 +1,43 @@
 /* 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";
 import { useLoaderData } from "@remix-run/react";
-import type { ProjectMeta } from "@webstudio-is/sdk";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import { n8nHandler, getFormId } from "@webstudio-is/form-handlers";
 import {
-  pageData,
-  user,
-  projectId,
-  formsProperties,
   Page,
-  imageAssets,
-  getRemixParams,
-  getPageMeta,
+  favIconAsset,
+  socialImageAsset,
   pageFontAssets,
   pageBackgroundImageAssets,
 } from "../../../__generated__/_index";
-import { loadResources } from "../../../__generated__/_index.server";
-import css from "../__generated__/index.css";
-import { assetBaseUrl, imageBaseUrl, imageLoader } from "~/constants.mjs";
+import {
+  formsProperties,
+  loadResources,
+  getPageMeta,
+  getRemixParams,
+  projectId,
+  user,
+  projectMeta,
+} from "../../../__generated__/_index.server";
 
-export type PageData = {
-  project?: ProjectMeta;
-};
+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 = {
     params,
-    search: {},
+    search: Object.fromEntries(url.searchParams),
   };
   const resources = await loadResources({ system });
   const pageMeta = getPageMeta({ system, resources });
@@ -55,7 +55,6 @@ export const loader = async (arg: LoaderArgs) => {
     arg.request.headers.get("host") ||
     "";
 
-  const url = new URL(arg.request.url);
   url.host = host;
   url.protocol = "https";
 
@@ -70,6 +69,7 @@ export const loader = async (arg: LoaderArgs) => {
       system,
       resources,
       pageMeta,
+      projectMeta,
     },
     // No way for current information to change, so add cache for 10 minutes
     // In case of CRM Data, this should be set to 0
@@ -83,20 +83,19 @@ 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;
   }
-  const { pageMeta } = data;
-  const { project } = pageData;
+  const { pageMeta, projectMeta } = data;
 
   if (data.url) {
     metas.push({
@@ -118,16 +117,16 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
 
   const origin = `https://${data.host}`;
 
-  if (project?.siteName) {
+  if (projectMeta?.siteName) {
     metas.push({
       property: "og:site_name",
-      content: project.siteName,
+      content: projectMeta.siteName,
     });
     metas.push({
       "script:ld+json": {
         "@context": "https://schema.org",
         "@type": "WebSite",
-        name: project.siteName,
+        name: projectMeta.siteName,
         url: origin,
       },
     });
@@ -151,21 +150,15 @@ export const meta: V2_ServerRuntimeMetaFunction<typeof loader> = ({ data }) => {
     });
   }
 
-  if (pageMeta.socialImageAssetId) {
-    const imageAsset = imageAssets.find(
-      (asset) => asset.id === pageMeta.socialImageAssetId
-    );
-
-    if (imageAsset) {
-      metas.push({
-        property: "og:image",
-        content: `https://${data.host}${imageLoader({
-          src: imageAsset.name,
-          // Do not transform social image (not enough information do we need to do this)
-          format: "raw",
-        })}`,
-      });
-    }
+  if (socialImageAsset) {
+    metas.push({
+      property: "og:image",
+      content: `https://${data.host}${imageLoader({
+        src: socialImageAsset.name,
+        // Do not transform social image (not enough information do we need to do this)
+        format: "raw",
+      })}`,
+    });
   } else if (pageMeta.socialImageUrl) {
     metas.push({
       property: "og:image",
@@ -186,25 +179,17 @@ export const links: LinksFunction = () => {
     href: css,
   });
 
-  const { project } = pageData;
-
-  if (project?.faviconAssetId) {
-    const imageAsset = imageAssets.find(
-      (asset) => asset.id === project.faviconAssetId
-    );
-
-    if (imageAsset) {
-      result.push({
-        rel: "icon",
-        href: imageLoader({
-          src: imageAsset.name,
-          width: 128,
-          quality: 100,
-          format: "auto",
-        }),
-        type: undefined,
-      });
-    }
+  if (favIconAsset) {
+    result.push({
+      rel: "icon",
+      href: imageLoader({
+        src: favIconAsset.name,
+        width: 128,
+        quality: 100,
+        format: "auto",
+      }),
+      type: undefined,
+    });
   } else {
     result.push({
       rel: "icon",
@@ -255,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/{remix.env.d.ts → env.d.ts}

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

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.142.0",
-    "@webstudio-is/sdk-components-react-radix": "0.142.0",
-    "@webstudio-is/sdk-components-react-remix": "0.142.0",
-    "@webstudio-is/sdk-components-react": "0.142.0",
-    "@webstudio-is/form-handlers": "0.142.0",
-    "@webstudio-is/image": "0.142.0",
-    "@webstudio-is/sdk": "0.142.0",
+    "@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,11 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "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/vercel/package.json

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

package/templates/defaults/remix.config.js

@@ -1,20 +0,0 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-  ignoredRouteFiles: ["**/.*"],
-  serverModuleFormat: "cjs",
-  serverDependenciesToBundle: [
-    /@webstudio-is\//,
-    "nanoid",
-    "@jsep-plugin/assignment",
-    "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-edge-functions/remix.config.js

@@ -1,29 +0,0 @@
-const { config } = require("@netlify/remix-edge-adapter");
-const baseConfig =
-  process.env.NODE_ENV === "production"
-    ? config
-    : {
-        ignoredRouteFiles: ["**/.*"],
-        serverModuleFormat: "cjs",
-        serverDependenciesToBundle: [
-          /@webstudio-is\//,
-          "nanoid",
-          "@jsep-plugin/assignment",
-          "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,31 +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",
-    "@jsep-plugin/assignment",
-    "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,
-});