refactor: generalize features fixture (#4820)

We have a fixture which is used for testing generated features.
Historically we use it as vercel template fixture.

Here migrated it to react-router, removed vercel stuff from it and
renamed it to webstudio-features.

.github/workflows/fixtures-test.yml

@@ -51,7 +51,7 @@ jobs:
 
         # Testing fixtures for vercel template
       - name: Test cli --help flag
-        working-directory: ./fixtures/webstudio-remix-vercel
+        working-directory: ./fixtures/webstudio-features
         run: pnpm cli --help
 
       - name: Testing cli link command

.github/workflows/main.yml

@@ -135,7 +135,7 @@ jobs:
             const results = [
               await assertSize('./fixtures/ssg/dist/client', 352),
               await assertSize('./fixtures/webstudio-remix-netlify-functions/build/client', 440),
-              await assertSize('./fixtures/webstudio-remix-vercel/build/client', 926),
+              await assertSize('./fixtures/webstudio-features/build/client', 926),
             ]
             for (const result of results) {
               if (result.passed) {

fixtures/webstudio-features/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

fixtures/webstudio-features/.template/.npmrc

@@ -0,0 +1,3 @@
+force=true
+# to support using NODE_OPTIONS for windows tests
+shell-emulator=true

fixtures/webstudio-features/.template/app/constants.mjs

@@ -0,0 +1,12 @@
+/**
+ * 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/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = ({ src }) => {
+  return src;
+};

fixtures/webstudio-features/.template/package.json

@@ -0,0 +1,12 @@
+{
+  "dependencies": {
+    "@webstudio-is/image": "workspace:*",
+    "@webstudio-is/react-sdk": "workspace:*",
+    "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/sdk-components-animation": "workspace:*",
+    "@webstudio-is/sdk-components-react": "workspace:*",
+    "@webstudio-is/sdk-components-react-radix": "workspace:*",
+    "@webstudio-is/sdk-components-react-router": "workspace:*",
+    "webstudio": "workspace:*"
+  }
+}

fixtures/webstudio-features/.template/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "customConditions": ["webstudio"]
+  }
+}

fixtures/webstudio-features/.template/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+// @ts-ignore
+import { reactRouter } from "@react-router/dev/vite";
+// @ts-ignore
+import { dedupeMeta } from "./proxy-emulator/dedupe-meta";
+
+export default defineConfig({
+  plugins: [reactRouter(), dedupeMeta],
+});

fixtures/webstudio-features/app/constants.mjs

@@ -0,0 +1,12 @@
+/**
+ * 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/";
+
+/**
+ * @type {import("@webstudio-is/image").ImageLoader}
+ */
+export const imageLoader = ({ src }) => {
+  return src;
+};

fixtures/webstudio-remix-vercel/app/extension.ts → fixtures/webstudio-features/app/extension.ts

@@ -1,9 +1,6 @@
-// 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" {
+declare module "react-router" {
   interface AppLoadContext {
     EXCLUDE_FROM_SEARCH: boolean;
     getDefaultActionResource?: (options: {

fixtures/webstudio-remix-vercel/app/root.tsx → fixtures/webstudio-features/app/root.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
-import { Links, Meta, Outlet, useMatches } from "@remix-run/react";
+import { Links, Meta, Outlet, useMatches } from "react-router";
 // @todo think about how to make __generated__ typeable
 // @ts-ignore
 import { CustomCode } from "./__generated__/_index";

fixtures/webstudio-features/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;

fixtures/webstudio-remix-vercel/app/routes/[_route_with_symbols_]._index.tsx → fixtures/webstudio-features/app/routes/[_route_with_symbols_]._index.tsx

@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };

fixtures/webstudio-remix-vercel/app/routes/[class-names]._index.tsx → fixtures/webstudio-features/app/routes/[class-names]._index.tsx

@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };

fixtures/webstudio-remix-vercel/app/routes/[content-block]._index.tsx → fixtures/webstudio-features/app/routes/[content-block]._index.tsx

@@ -1,14 +1,14 @@
 import {
-  type ServerRuntimeMetaFunction as MetaFunction,
+  type MetaFunction,
   type LinksFunction,
   type LinkDescriptor,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type HeadersFunction,
-  json,
+  data,
   redirect,
-} from "@remix-run/server-runtime";
-import { useLoaderData } from "@remix-run/react";
+  useLoaderData,
+} from "react-router";
 import {
   isLocalResource,
   loadResource,
@@ -20,7 +20,6 @@ import {
   ReactSdkContext,
   PageSettingsMeta,
   PageSettingsTitle,
-  PageSettingsCanonicalLink,
 } from "@webstudio-is/react-sdk/runtime";
 import {
   Page,
@@ -82,7 +81,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
       pageMeta.status === 301 || pageMeta.status === 302
         ? pageMeta.status
         : 302;
-    return redirect(pageMeta.redirect, status);
+    throw redirect(pageMeta.redirect, status);
   }
 
   // typecheck
@@ -92,7 +91,7 @@ export const loader = async (arg: LoaderFunctionArgs) => {
     pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
   }
 
-  return json(
+  return data(
     {
       host,
       url: url.href,
@@ -289,7 +288,6 @@ const Outlet = () => {
         imageLoader={imageLoader}
       />
       <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
-      <PageSettingsCanonicalLink href={url} />
     </ReactSdkContext.Provider>
   );
 };