Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Remove index hack, move canvas layout outside for readability #4006

Merged
merged 6 commits into from
Aug 24, 2024
Merged

chore: Remove index hack, move canvas layout outside for readability #4006

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d41f585
Remove index hack, move canvas layout outside for readability
istarkov Aug 24, 2024
bfb6690
Split routes
istarkov Aug 24, 2024
a577ae2
Use optional path instead of _index
istarkov Aug 24, 2024
29d5848
Add description
istarkov Aug 24, 2024
1fef146
Move canvas to the /canvas path
istarkov Aug 24, 2024
a9270da
Remove comment
istarkov Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/builder/app/builder/builder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
$textEditingInstanceSelector,
} from "~/shared/nano-states";
import { $settings, type Settings } from "./shared/client-settings";
import { getBuildUrl } from "~/shared/router-utils";
import { getCanvasUrl } from "~/shared/router-utils";
import { useCopyPaste } from "~/shared/copy-paste";
import { BlockingAlerts } from "./features/blocking-alerts";
import { useSyncPageUrl } from "~/shared/pages";
Expand Down Expand Up @@ -311,7 +311,7 @@ export const Builder = ({
return unsubscribe;
}, []);

const canvasUrl = getBuildUrl({
const canvasUrl = getCanvasUrl({
project,
});

Expand Down
86 changes: 4 additions & 82 deletions apps/builder/app/routes/$.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,10 @@
import { lazy } from "react";
import {
type HeadersFunction,
type LoaderFunctionArgs,
redirect,
type HeadersFunction,
} from "@remix-run/server-runtime";
import {
isRouteErrorResponse,
Links,
Meta,
useLoaderData,
useRouteError,
} from "@remix-run/react";
import type { Params } from "@webstudio-is/react-sdk";
import { Body } from "@webstudio-is/sdk-components-react-remix";
import { createImageLoader } from "@webstudio-is/image";
import env from "~/env/env.server";
import { ErrorMessage } from "~/shared/error";
import { dashboardPath, isCanvas } from "~/shared/router-utils";
import { ClientOnly } from "~/shared/client-only";

import { dashboardPath } from "~/shared/router-utils";

export const loader = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
Expand All @@ -38,29 +25,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
});
}

if (isCanvas(request) === false) {
throw redirect(dashboardPath());
}

const params: Params = {
imageBaseUrl: env.IMAGE_BASE_URL,
assetBaseUrl: env.ASSET_BASE_URL,
};

return { params };
};

export const ErrorBoundary = () => {
const error = useRouteError();

console.error({ error });
const message = isRouteErrorResponse(error)
? (error.data.message ?? error.data)
: error instanceof Error
? error.message
: String(error);

return <ErrorMessage message={message} />;
return redirect(dashboardPath());
};

export const headers: HeadersFunction = ({ errorHeaders, loaderHeaders }) => {
Expand All @@ -78,46 +43,3 @@ export const headers: HeadersFunction = ({ errorHeaders, loaderHeaders }) => {
}
return loaderHeaders;
};

const Canvas = lazy(async () => {
const { Canvas } = await import("~/canvas/index.client");
return { default: Canvas };
});

const Outlet = () => {
const { params } = useLoaderData<typeof loader>();
const imageLoader = createImageLoader({
imageBaseUrl: params.imageBaseUrl,
});
return (
<ClientOnly fallback={<Body />}>
<Canvas params={params} imageLoader={imageLoader} />
</ClientOnly>
);
};

/**
* @todo add support for published project on localhost
* consider switching current route to something like /canvas
*/

const Content = () => {
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 Content;

// Reduces Vercel function size from 29MB to 9MB for unknown reasons; effective when used in limited files.
export const config = {
maxDuration: 30,
};
64 changes: 64 additions & 0 deletions apps/builder/app/routes/_canvas.canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { lazy } from "react";
import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
import {
isRouteErrorResponse,
useLoaderData,
useRouteError,
} from "@remix-run/react";
import type { Params } from "@webstudio-is/react-sdk";
import { Body } from "@webstudio-is/sdk-components-react-remix";
import { createImageLoader } from "@webstudio-is/image";
import env from "~/env/env.server";
import { ErrorMessage } from "~/shared/error";
import { dashboardPath, isCanvas } from "~/shared/router-utils";
import { ClientOnly } from "~/shared/client-only";

export const loader = async ({ request }: LoaderFunctionArgs) => {
if (isCanvas(request) === false) {
throw redirect(dashboardPath());
}

const params: Params = {
imageBaseUrl: env.IMAGE_BASE_URL,
assetBaseUrl: env.ASSET_BASE_URL,
};

return { params };
};

export const ErrorBoundary = () => {
const error = useRouteError();

console.error({ error });
const message = isRouteErrorResponse(error)
? (error.data.message ?? error.data)
: error instanceof Error
? error.message
: String(error);

return <ErrorMessage message={message} />;
};

const Canvas = lazy(async () => {
const { Canvas } = await import("~/canvas/index.client");
return { default: Canvas };
});

const CanvasRoute = () => {
const { params } = useLoaderData<typeof loader>();
const imageLoader = createImageLoader({
imageBaseUrl: params.imageBaseUrl,
});
return (
<ClientOnly fallback={<Body />}>
<Canvas params={params} imageLoader={imageLoader} />
</ClientOnly>
);
};

export default CanvasRoute;

// Reduces Vercel function size from 29MB to 9MB for unknown reasons; effective when used in limited files.
istarkov marked this conversation as resolved.
Show resolved Hide resolved
export const config = {
maxDuration: 30,
};
15 changes: 15 additions & 0 deletions apps/builder/app/routes/_canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Links, Meta, Outlet } from "@remix-run/react";

export default function CanvasLayout() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<Outlet />
</html>
);
}
26 changes: 5 additions & 21 deletions apps/builder/app/routes/_index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,7 @@
// We want our catch-all route to also handle `/`.
// Unfortunately, Remix doesn't do this by default,
// see https://github.com/remix-run/remix/issues/2098#issuecomment-1049262218 .
// To solve this, we're re-exporting the $.tsx route API in index.tsx
import { redirect } from "@remix-run/server-runtime";
import { dashboardPath } from "~/shared/router-utils";

import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
import CatchAllContnet, {
loader as catchAllloader,
ErrorBoundary as CatchAllErrorBoundary,
} from "./$";

// We're wrapping functions in order for them to be distinct from the ones in $.tsx.
// If they are the same, Remix may get confused, and don't load data on page transitions.

export const loader = (args: LoaderFunctionArgs) => catchAllloader(args);
export const ErrorBoundary = () => <CatchAllErrorBoundary />;
const Content = () => <CatchAllContnet />;
export default Content;

// Reduces Vercel function size from 29MB to 9MB for unknown reasons; effective when used in limited files.
export const config = {
maxDuration: 30,
// This is the builder path in the next PR
export const loader = async () => {
throw redirect(dashboardPath());
};
4 changes: 2 additions & 2 deletions apps/builder/app/shared/router-utils/path-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,12 +182,12 @@ export const restPatchPath = (props: { authToken?: string }) => {
}`;
};

export const getBuildUrl = ({ project }: { project: Project }) => {
export const getCanvasUrl = ({ project }: { project: Project }) => {
// const url = new URL(buildOrigin);
const searchParams = new URLSearchParams();
searchParams.set("projectId", project.id);

return `/?${searchParams.toString()}`;
return `/canvas?${searchParams.toString()}`;
};

export const restAi = (subEndpoint?: "detect" | "audio/transcriptions") =>
Expand Down
Loading