diff --git a/fixtures/react-router-docker/.dockerignore b/fixtures/react-router-docker/.dockerignore new file mode 100644 index 000000000000..54f78fa7b671 --- /dev/null +++ b/fixtures/react-router-docker/.dockerignore @@ -0,0 +1,4 @@ +.react-router +build +node_modules +README.md diff --git a/fixtures/react-router-docker/.gitignore b/fixtures/react-router-docker/.gitignore new file mode 100644 index 000000000000..9b7c041f96ea --- /dev/null +++ b/fixtures/react-router-docker/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +/node_modules/ + +# React Router +/.react-router/ +/build/ diff --git a/fixtures/react-router-docker/.npmrc b/fixtures/react-router-docker/.npmrc new file mode 100644 index 000000000000..43ce02f127ad --- /dev/null +++ b/fixtures/react-router-docker/.npmrc @@ -0,0 +1,3 @@ +force=true +# to support using NODE_OPTIONS for windows tests +shell-emulator=true diff --git a/fixtures/react-router-docker/.template/.npmrc b/fixtures/react-router-docker/.template/.npmrc new file mode 100644 index 000000000000..43ce02f127ad --- /dev/null +++ b/fixtures/react-router-docker/.template/.npmrc @@ -0,0 +1,3 @@ +force=true +# to support using NODE_OPTIONS for windows tests +shell-emulator=true diff --git a/fixtures/react-router-docker/.template/package.json b/fixtures/react-router-docker/.template/package.json new file mode 100644 index 000000000000..b21dce86c93a --- /dev/null +++ b/fixtures/react-router-docker/.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:*" + } +} diff --git a/fixtures/react-router-docker/.template/tsconfig.json b/fixtures/react-router-docker/.template/tsconfig.json new file mode 100644 index 000000000000..75cac78946fd --- /dev/null +++ b/fixtures/react-router-docker/.template/tsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "customConditions": ["webstudio"] + } +} diff --git a/fixtures/react-router-docker/.webstudio/config.json b/fixtures/react-router-docker/.webstudio/config.json new file mode 100644 index 000000000000..3bad791718c2 --- /dev/null +++ b/fixtures/react-router-docker/.webstudio/config.json @@ -0,0 +1,3 @@ +{ + "projectId": "d845c167-ea07-4875-b08d-83e97c09dcce" +} diff --git a/fixtures/react-router-docker/.webstudio/data.json b/fixtures/react-router-docker/.webstudio/data.json new file mode 100644 index 000000000000..7dc933cfb601 --- /dev/null +++ b/fixtures/react-router-docker/.webstudio/data.json @@ -0,0 +1,500 @@ +{ + "build": { + "id": "f565d527-32e7-4731-bc71-aca9e9574587", + "projectId": "d845c167-ea07-4875-b08d-83e97c09dcce", + "version": 43, + "createdAt": "2025-01-04T11:01:50.091+00:00", + "updatedAt": "2025-01-04T11:01:50.091+00:00", + "pages": { + "meta": { + "siteName": "", + "faviconAssetId": "d0974db9300c1a3b0fb8b291dd9fabd45ad136478908394280af2f7087e3aecd", + "code": "" + }, + "homePage": { + "id": "9di_L14CzctvSruIoKVvE", + "name": "Home", + "title": "\"Home\"", + "rootInstanceId": "MMimeobf_zi4ZkRGXapju", + "systemDataSourceId": "2KT4-bRzToj9cAGAN_woK", + "meta": {}, + "path": "" + }, + "pages": [ + { + "id": "WPPAbLFyJD_02vhjRd8P4", + "name": "Another page", + "title": "\"Another page\"", + "history": ["/another-page"], + "rootInstanceId": "n_VBMr7klpx25buS0NV7R", + "systemDataSourceId": "tdXe9gFf83hSo9BLWU6xl", + "meta": { + "description": "\"\"", + "excludePageFromSearch": "true", + "language": "\"\"", + "socialImageUrl": "\"\"", + "status": "200", + "redirect": "\"\"", + "documentType": "html", + "custom": [ + { + "property": "", + "content": "\"\"" + } + ] + }, + "marketplace": { + "include": false + }, + "path": "/another-page" + } + ], + "folders": [ + { + "id": "root", + "name": "Root", + "slug": "", + "children": ["9di_L14CzctvSruIoKVvE", "WPPAbLFyJD_02vhjRd8P4"] + } + ] + }, + "breakpoints": [ + [ + "rKj-wYctg3-GnqL3WHN9I", + { + "id": "rKj-wYctg3-GnqL3WHN9I", + "label": "Base" + } + ], + [ + "yH9RXhqCyeaVkrOt8MzLc", + { + "id": "yH9RXhqCyeaVkrOt8MzLc", + "label": "Tablet", + "maxWidth": 991 + } + ], + [ + "8nSCZbeS002IVwkTdoIes", + { + "id": "8nSCZbeS002IVwkTdoIes", + "label": "Mobile landscape", + "maxWidth": 767 + } + ], + [ + "7gBD25KrrbBdJYNDlhPz7", + { + "id": "7gBD25KrrbBdJYNDlhPz7", + "label": "Mobile portrait", + "maxWidth": 479 + } + ] + ], + "styles": [ + [ + "7_QL45cpvP-zG8Hkgf4cr:rKj-wYctg3-GnqL3WHN9I:display:", + { + "breakpointId": "rKj-wYctg3-GnqL3WHN9I", + "styleSourceId": "7_QL45cpvP-zG8Hkgf4cr", + "property": "display", + "value": { + "type": "keyword", + "value": "flex" + } + } + ], + [ + "7_QL45cpvP-zG8Hkgf4cr:rKj-wYctg3-GnqL3WHN9I:alignItems:", + { + "breakpointId": "rKj-wYctg3-GnqL3WHN9I", + "styleSourceId": "7_QL45cpvP-zG8Hkgf4cr", + "property": "alignItems", + "value": { + "type": "keyword", + "value": "center" + } + } + ], + [ + "7_QL45cpvP-zG8Hkgf4cr:rKj-wYctg3-GnqL3WHN9I:justifyContent:", + { + "breakpointId": "rKj-wYctg3-GnqL3WHN9I", + "styleSourceId": "7_QL45cpvP-zG8Hkgf4cr", + "property": "justifyContent", + "value": { + "type": "keyword", + "value": "center" + } + } + ], + [ + "7_QL45cpvP-zG8Hkgf4cr:rKj-wYctg3-GnqL3WHN9I:flexDirection:", + { + "breakpointId": "rKj-wYctg3-GnqL3WHN9I", + "styleSourceId": "7_QL45cpvP-zG8Hkgf4cr", + "property": "flexDirection", + "value": { + "type": "keyword", + "value": "column" + } + } + ], + [ + "0KA68BwP9gdTzE1ESO2Zp:rKj-wYctg3-GnqL3WHN9I:marginBottom:", + { + "breakpointId": "rKj-wYctg3-GnqL3WHN9I", + "styleSourceId": "0KA68BwP9gdTzE1ESO2Zp", + "property": "marginBottom", + "value": { + "type": "unit", + "unit": "em", + "value": 1 + } + } + ], + [ + "mf2C07UBmGT7y_G4Du3yg:rKj-wYctg3-GnqL3WHN9I:width:", + { + "breakpointId": "rKj-wYctg3-GnqL3WHN9I", + "styleSourceId": "mf2C07UBmGT7y_G4Du3yg", + "property": "width", + "value": { + "type": "unit", + "unit": "px", + "value": 400 + } + } + ] + ], + "styleSources": [ + [ + "7_QL45cpvP-zG8Hkgf4cr", + { + "type": "local", + "id": "7_QL45cpvP-zG8Hkgf4cr" + } + ], + [ + "0KA68BwP9gdTzE1ESO2Zp", + { + "type": "local", + "id": "0KA68BwP9gdTzE1ESO2Zp" + } + ], + [ + "mf2C07UBmGT7y_G4Du3yg", + { + "type": "local", + "id": "mf2C07UBmGT7y_G4Du3yg" + } + ] + ], + "styleSourceSelections": [ + [ + "MMimeobf_zi4ZkRGXapju", + { + "instanceId": "MMimeobf_zi4ZkRGXapju", + "values": ["7_QL45cpvP-zG8Hkgf4cr"] + } + ], + [ + "BMJfjOzunWs8XkQgvvx1e", + { + "instanceId": "BMJfjOzunWs8XkQgvvx1e", + "values": ["0KA68BwP9gdTzE1ESO2Zp"] + } + ], + [ + "uHB3Fjb7-NELG-bnH7bXB", + { + "instanceId": "uHB3Fjb7-NELG-bnH7bXB", + "values": ["mf2C07UBmGT7y_G4Du3yg"] + } + ] + ], + "props": [ + [ + "1p34InvRgqoKVqeNZ1uBb", + { + "id": "1p34InvRgqoKVqeNZ1uBb", + "instanceId": "pjkZo5EiBqaeUXBcyHf_O", + "name": "href", + "type": "page", + "value": "WPPAbLFyJD_02vhjRd8P4" + } + ], + [ + "su3ag3OxH9WTBjJg5eIyg", + { + "id": "su3ag3OxH9WTBjJg5eIyg", + "instanceId": "uHB3Fjb7-NELG-bnH7bXB", + "name": "src", + "type": "asset", + "value": "1d8bf4398f643f5333d415091507d778aaed62f28883642636cbed0be156a0ee" + } + ], + [ + "vGCYpBBB1QUPIPPIdyexn", + { + "id": "vGCYpBBB1QUPIPPIdyexn", + "instanceId": "uHB3Fjb7-NELG-bnH7bXB", + "name": "width", + "type": "asset", + "value": "1d8bf4398f643f5333d415091507d778aaed62f28883642636cbed0be156a0ee" + } + ], + [ + "JKAGY7DWpciEl0UdnWuKL", + { + "id": "JKAGY7DWpciEl0UdnWuKL", + "instanceId": "uHB3Fjb7-NELG-bnH7bXB", + "name": "height", + "type": "asset", + "value": "1d8bf4398f643f5333d415091507d778aaed62f28883642636cbed0be156a0ee" + } + ], + [ + "CAkmmL8-JAgokmeopoFXh", + { + "id": "CAkmmL8-JAgokmeopoFXh", + "instanceId": "2sIE8GxbKRBaav_zdhaZ1", + "name": "src", + "type": "string", + "value": "https://picsum.photos/id/237/100/100.jpg?blur=4&grayscale" + } + ] + ], + "dataSources": [ + [ + "2KT4-bRzToj9cAGAN_woK", + { + "type": "parameter", + "id": "2KT4-bRzToj9cAGAN_woK", + "scopeInstanceId": "MMimeobf_zi4ZkRGXapju", + "name": "system" + } + ], + [ + "tdXe9gFf83hSo9BLWU6xl", + { + "type": "parameter", + "id": "tdXe9gFf83hSo9BLWU6xl", + "scopeInstanceId": "n_VBMr7klpx25buS0NV7R", + "name": "system" + } + ] + ], + "resources": [], + "instances": [ + [ + "MMimeobf_zi4ZkRGXapju", + { + "type": "instance", + "id": "MMimeobf_zi4ZkRGXapju", + "component": "Body", + "children": [ + { + "type": "id", + "value": "MYDt0guk1-vzc7yzqyN6A" + }, + { + "type": "id", + "value": "BMJfjOzunWs8XkQgvvx1e" + }, + { + "type": "id", + "value": "pjkZo5EiBqaeUXBcyHf_O" + }, + { + "type": "id", + "value": "uHB3Fjb7-NELG-bnH7bXB" + }, + { + "type": "id", + "value": "2sIE8GxbKRBaav_zdhaZ1" + } + ] + } + ], + [ + "MYDt0guk1-vzc7yzqyN6A", + { + "type": "instance", + "id": "MYDt0guk1-vzc7yzqyN6A", + "component": "Heading", + "label": "xD", + "children": [ + { + "type": "text", + "value": "Simple Project to test CLI" + } + ] + } + ], + [ + "BMJfjOzunWs8XkQgvvx1e", + { + "type": "instance", + "id": "BMJfjOzunWs8XkQgvvx1e", + "component": "Text", + "children": [ + { + "type": "text", + "value": "Please don't change directly in the fixture" + } + ] + } + ], + [ + "pjkZo5EiBqaeUXBcyHf_O", + { + "type": "instance", + "id": "pjkZo5EiBqaeUXBcyHf_O", + "component": "Link", + "children": [ + { + "type": "text", + "value": "Test another page link" + } + ] + } + ], + [ + "n_VBMr7klpx25buS0NV7R", + { + "type": "instance", + "id": "n_VBMr7klpx25buS0NV7R", + "component": "Body", + "children": [ + { + "type": "id", + "value": "wthNByqb3RPmheb-56VYI" + } + ] + } + ], + [ + "wthNByqb3RPmheb-56VYI", + { + "type": "instance", + "id": "wthNByqb3RPmheb-56VYI", + "component": "Heading", + "children": [ + { + "type": "text", + "value": "Another page" + } + ] + } + ], + [ + "uHB3Fjb7-NELG-bnH7bXB", + { + "type": "instance", + "id": "uHB3Fjb7-NELG-bnH7bXB", + "component": "Image", + "children": [] + } + ], + [ + "2sIE8GxbKRBaav_zdhaZ1", + { + "type": "instance", + "id": "2sIE8GxbKRBaav_zdhaZ1", + "component": "Image", + "children": [] + } + ] + ], + "deployment": { + "destination": "saas", + "domains": ["cli-basic-test-d0osr"], + "assetsDomain": "cli-basic-test-d0osr", + "excludeWstdDomainFromSearch": false + } + }, + "page": { + "id": "9di_L14CzctvSruIoKVvE", + "name": "Home", + "title": "\"Home\"", + "rootInstanceId": "MMimeobf_zi4ZkRGXapju", + "systemDataSourceId": "2KT4-bRzToj9cAGAN_woK", + "meta": {}, + "path": "" + }, + "pages": [ + { + "id": "9di_L14CzctvSruIoKVvE", + "name": "Home", + "title": "\"Home\"", + "rootInstanceId": "MMimeobf_zi4ZkRGXapju", + "systemDataSourceId": "2KT4-bRzToj9cAGAN_woK", + "meta": {}, + "path": "" + }, + { + "id": "WPPAbLFyJD_02vhjRd8P4", + "name": "Another page", + "title": "\"Another page\"", + "history": ["/another-page"], + "rootInstanceId": "n_VBMr7klpx25buS0NV7R", + "systemDataSourceId": "tdXe9gFf83hSo9BLWU6xl", + "meta": { + "description": "\"\"", + "excludePageFromSearch": "true", + "language": "\"\"", + "socialImageUrl": "\"\"", + "status": "200", + "redirect": "\"\"", + "documentType": "html", + "custom": [ + { + "property": "", + "content": "\"\"" + } + ] + }, + "marketplace": { + "include": false + }, + "path": "/another-page" + } + ], + "assets": [ + { + "id": "1d8bf4398f643f5333d415091507d778aaed62f28883642636cbed0be156a0ee", + "name": "iconly_svg_converted-converted_zMaMiAAutUl8XrITgz7d1.svg", + "description": null, + "projectId": "d845c167-ea07-4875-b08d-83e97c09dcce", + "size": 999, + "type": "image", + "format": "svg", + "createdAt": "2024-07-26T13:39:48.678+00:00", + "meta": { + "width": 14, + "height": 16 + } + }, + { + "id": "d0974db9300c1a3b0fb8b291dd9fabd45ad136478908394280af2f7087e3aecd", + "name": "147-1478573_cat-icon-png-black-cat-png-icon.png_ZJ6-qJjk1RlFzuYwyCXdp.jpeg", + "description": null, + "projectId": "d845c167-ea07-4875-b08d-83e97c09dcce", + "size": 64701, + "type": "image", + "format": "jpg", + "createdAt": "2024-12-06T14:36:07.046+00:00", + "meta": { + "width": 820, + "height": 985 + } + } + ], + "user": { + "email": "hello@webstudio.is" + }, + "projectDomain": "cli-basic-test-d0osr", + "projectTitle": "cli-basic-test", + "origin": "https://main.development.webstudio.is" +} diff --git a/fixtures/react-router-docker/Dockerfile b/fixtures/react-router-docker/Dockerfile new file mode 100644 index 000000000000..1385cf9a5f14 --- /dev/null +++ b/fixtures/react-router-docker/Dockerfile @@ -0,0 +1,22 @@ +FROM node:22-alpine AS development-dependencies-env +COPY . /app +WORKDIR /app +RUN npm install + +FROM node:22-alpine AS production-dependencies-env +COPY ./package.json package-lock.json /app/ +WORKDIR /app +RUN npm install --omit=dev + +FROM node:22-alpine AS build-env +COPY . /app/ +COPY --from=development-dependencies-env /app/node_modules /app/node_modules +WORKDIR /app +RUN npm run build + +FROM node:22-alpine +COPY ./package.json package-lock.json /app/ +COPY --from=production-dependencies-env /app/node_modules /app/node_modules +COPY --from=build-env /app/build /app/build +WORKDIR /app +CMD ["npm", "run", "start"] diff --git a/fixtures/react-router-docker/README.md b/fixtures/react-router-docker/README.md new file mode 100644 index 000000000000..c6f8cfa5b960 --- /dev/null +++ b/fixtures/react-router-docker/README.md @@ -0,0 +1,20 @@ +# Fixture to test/play with webstudio + +## How to develop + +```bash +# Terminal 1 +cd packages/webstudio +pnpm dev +``` + +```bash +# Terminal 2 +pnpm fixtures:link + +pnpm fixtures:sync +# data.json generated + +pnpm fixtures:build +# exec `pnpm run dev` to see result +``` diff --git a/fixtures/react-router-docker/app/__generated__/$resources.sitemap.xml.ts b/fixtures/react-router-docker/app/__generated__/$resources.sitemap.xml.ts new file mode 100644 index 000000000000..181eac4621f3 --- /dev/null +++ b/fixtures/react-router-docker/app/__generated__/$resources.sitemap.xml.ts @@ -0,0 +1,6 @@ +export const sitemap = [ + { + path: "/", + lastModified: "2025-01-04", + }, +]; diff --git a/fixtures/react-router-docker/app/__generated__/[another-page]._index.server.tsx b/fixtures/react-router-docker/app/__generated__/[another-page]._index.server.tsx new file mode 100644 index 000000000000..dc6510942c47 --- /dev/null +++ b/fixtures/react-router-docker/app/__generated__/[another-page]._index.server.tsx @@ -0,0 +1,39 @@ +/* eslint-disable */ +/* This is a auto generated file for building the project */ + +import type { PageMeta } from "@webstudio-is/sdk"; +import type { System, ResourceRequest } from "@webstudio-is/sdk"; +export const getResources = (_props: { system: System }) => { + const _data = new Map([]); + const _action = new Map([]); + return { data: _data, action: _action }; +}; + +export const getPageMeta = ({ + system, + resources, +}: { + system: System; + resources: Record; +}): PageMeta => { + return { + title: "Another page", + description: "", + excludePageFromSearch: true, + language: "", + socialImageAssetName: undefined, + socialImageUrl: "", + status: 200, + redirect: "", + custom: [], + }; +}; + +type Params = Record; +export const getRemixParams = ({ ...params }: Params): Params => { + return params; +}; + +export const projectId = "d845c167-ea07-4875-b08d-83e97c09dcce"; + +export const contactEmail = "hello@webstudio.is"; diff --git a/fixtures/react-router-docker/app/__generated__/[another-page]._index.tsx b/fixtures/react-router-docker/app/__generated__/[another-page]._index.tsx new file mode 100644 index 000000000000..0f11ceedef83 --- /dev/null +++ b/fixtures/react-router-docker/app/__generated__/[another-page]._index.tsx @@ -0,0 +1,37 @@ +/* eslint-disable */ +/* This is a auto generated file for building the project */ + +import { Fragment, useState } from "react"; +import type { FontAsset, ImageAsset } from "@webstudio-is/sdk"; +import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime"; +import { Body as Body } from "@webstudio-is/sdk-components-react-router"; +import { Heading as Heading } from "@webstudio-is/sdk-components-react"; + +export const siteName = ""; + +export const favIconAsset: ImageAsset | undefined = { + id: "d0974db9300c1a3b0fb8b291dd9fabd45ad136478908394280af2f7087e3aecd", + name: "147-1478573_cat-icon-png-black-cat-png-icon.png_ZJ6-qJjk1RlFzuYwyCXdp.jpeg", + description: null, + projectId: "d845c167-ea07-4875-b08d-83e97c09dcce", + size: 64701, + type: "image", + format: "jpg", + createdAt: "2024-12-06T14:36:07.046+00:00", + meta: { width: 820, height: 985 }, +}; + +// Font assets on current page (can be preloaded) +export const pageFontAssets: FontAsset[] = []; + +export const pageBackgroundImageAssets: ImageAsset[] = []; + +const Page = ({}: { system: any }) => { + return ( + + {"Another page"} + + ); +}; + +export { Page }; diff --git a/fixtures/react-router-docker/app/__generated__/_index.server.tsx b/fixtures/react-router-docker/app/__generated__/_index.server.tsx new file mode 100644 index 000000000000..83d760a977b9 --- /dev/null +++ b/fixtures/react-router-docker/app/__generated__/_index.server.tsx @@ -0,0 +1,39 @@ +/* eslint-disable */ +/* This is a auto generated file for building the project */ + +import type { PageMeta } from "@webstudio-is/sdk"; +import type { System, ResourceRequest } from "@webstudio-is/sdk"; +export const getResources = (_props: { system: System }) => { + const _data = new Map([]); + const _action = new Map([]); + return { data: _data, action: _action }; +}; + +export const getPageMeta = ({ + system, + resources, +}: { + system: System; + resources: Record; +}): PageMeta => { + return { + title: "Home", + description: undefined, + excludePageFromSearch: undefined, + language: undefined, + socialImageAssetName: undefined, + socialImageUrl: undefined, + status: undefined, + redirect: undefined, + custom: [], + }; +}; + +type Params = Record; +export const getRemixParams = ({ ...params }: Params): Params => { + return params; +}; + +export const projectId = "d845c167-ea07-4875-b08d-83e97c09dcce"; + +export const contactEmail = "hello@webstudio.is"; diff --git a/fixtures/react-router-docker/app/__generated__/_index.tsx b/fixtures/react-router-docker/app/__generated__/_index.tsx new file mode 100644 index 000000000000..9c073984cf91 --- /dev/null +++ b/fixtures/react-router-docker/app/__generated__/_index.tsx @@ -0,0 +1,64 @@ +/* eslint-disable */ +/* This is a auto generated file for building the project */ + +import { Fragment, useState } from "react"; +import type { FontAsset, ImageAsset } from "@webstudio-is/sdk"; +import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime"; +import { + Body as Body, + Link as Link, +} from "@webstudio-is/sdk-components-react-router"; +import { + Heading as Heading, + Text as Text, + Image as Image, +} from "@webstudio-is/sdk-components-react"; + +export const siteName = ""; + +export const favIconAsset: ImageAsset | undefined = { + id: "d0974db9300c1a3b0fb8b291dd9fabd45ad136478908394280af2f7087e3aecd", + name: "147-1478573_cat-icon-png-black-cat-png-icon.png_ZJ6-qJjk1RlFzuYwyCXdp.jpeg", + description: null, + projectId: "d845c167-ea07-4875-b08d-83e97c09dcce", + size: 64701, + type: "image", + format: "jpg", + createdAt: "2024-12-06T14:36:07.046+00:00", + meta: { width: 820, height: 985 }, +}; + +// Font assets on current page (can be preloaded) +export const pageFontAssets: FontAsset[] = []; + +export const pageBackgroundImageAssets: ImageAsset[] = []; + +export const CustomCode = () => { + return <>; +}; + +const Page = ({}: { system: any }) => { + return ( + + {"Simple Project to test CLI"} + + {"Please don't change directly in the fixture"} + + + {"Test another page link"} + + + + + ); +}; + +export { Page }; diff --git a/fixtures/react-router-docker/app/__generated__/index.css b/fixtures/react-router-docker/app/__generated__/index.css new file mode 100644 index 000000000000..dd85fdf13b99 --- /dev/null +++ b/fixtures/react-router-docker/app/__generated__/index.css @@ -0,0 +1,118 @@ +@media all { + :root { + display: grid; + min-height: 100%; + font-family: Arial, Roboto, sans-serif; + font-size: 16px; + line-height: 1.2; + white-space: pre-wrap; + white-space-collapse: preserve; + } + :where(body.w-body) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 0; + } + :where(h1.w-heading) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + } + :where(h2.w-heading) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + } + :where(h3.w-heading) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + } + :where(h4.w-heading) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + } + :where(h5.w-heading) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + } + :where(h6.w-heading) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + } + :where(div.w-text) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + min-height: 1em; + } + :where(a.w-link) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + display: inline-block; + } + :where(img.w-image) { + box-sizing: border-box; + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-left-width: 1px; + outline-width: 1px; + max-width: 100%; + display: block; + height: auto; + } +} +@media all { + .c1jaw2zx { + display: flex; + } + .cbipm55 { + align-items: center; + } + .ctniqj4 { + justify-content: center; + } + .ctgx88l { + flex-direction: column; + } + .cn3rfux { + margin-bottom: 1em; + } + .c161qeci { + width: 400px; + } +} diff --git a/fixtures/react-router-docker/app/constants.mjs b/fixtures/react-router-docker/app/constants.mjs new file mode 100644 index 000000000000..dc5dbb0f5cb7 --- /dev/null +++ b/fixtures/react-router-docker/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; +}; diff --git a/fixtures/react-router-docker/app/extension.ts b/fixtures/react-router-docker/app/extension.ts new file mode 100644 index 000000000000..bffd05d48e17 --- /dev/null +++ b/fixtures/react-router-docker/app/extension.ts @@ -0,0 +1,13 @@ +import { ResourceRequest } from "@webstudio-is/sdk"; + +declare module "react-router" { + interface AppLoadContext { + EXCLUDE_FROM_SEARCH: boolean; + getDefaultActionResource?: (options: { + url: URL; + projectId: string; + contactEmail: string; + formData: FormData; + }) => ResourceRequest; + } +} diff --git a/fixtures/react-router-docker/app/root.tsx b/fixtures/react-router-docker/app/root.tsx new file mode 100644 index 000000000000..aa2a8c416496 --- /dev/null +++ b/fixtures/react-router-docker/app/root.tsx @@ -0,0 +1,35 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ + +import { Links, Meta, Outlet, useMatches } from "react-router"; +// @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 ( + + + + + + + + + + + ); +}; + +export default Root; diff --git a/fixtures/react-router-docker/app/routes.ts b/fixtures/react-router-docker/app/routes.ts new file mode 100644 index 000000000000..4c05936cb638 --- /dev/null +++ b/fixtures/react-router-docker/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; diff --git a/fixtures/react-router-docker/app/routes/[another-page]._index.tsx b/fixtures/react-router-docker/app/routes/[another-page]._index.tsx new file mode 100644 index 000000000000..e9d062f92306 --- /dev/null +++ b/fixtures/react-router-docker/app/routes/[another-page]._index.tsx @@ -0,0 +1,295 @@ +import { + type MetaFunction, + type LinksFunction, + type LinkDescriptor, + type ActionFunctionArgs, + type LoaderFunctionArgs, + type HeadersFunction, + data, + redirect, + useLoaderData, +} from "react-router"; +import { + isLocalResource, + loadResource, + loadResources, + formIdFieldName, + formBotFieldName, +} from "@webstudio-is/sdk/runtime"; +import { + ReactSdkContext, + PageSettingsMeta, + PageSettingsTitle, +} from "@webstudio-is/react-sdk/runtime"; +import { + Page, + siteName, + favIconAsset, + pageFontAssets, + pageBackgroundImageAssets, +} from "../__generated__/[another-page]._index"; +import { + getResources, + getPageMeta, + getRemixParams, + projectId, + contactEmail, +} from "../__generated__/[another-page]._index.server"; +import { assetBaseUrl, imageLoader } from "../constants.mjs"; +import css from "../__generated__/index.css?url"; +import { sitemap } from "../__generated__/$resources.sitemap.xml"; + +const customFetch: typeof fetch = (input, init) => { + if (typeof input !== "string") { + return fetch(input, init); + } + + if (isLocalResource(input, "sitemap.xml")) { + // @todo: dynamic import sitemap ??? + const response = new Response(JSON.stringify(sitemap)); + response.headers.set("content-type", "application/json; charset=utf-8"); + return Promise.resolve(response); + } + + return fetch(input, init); +}; + +export const loader = async (arg: LoaderFunctionArgs) => { + const url = new URL(arg.request.url); + const host = + arg.request.headers.get("x-forwarded-host") || + arg.request.headers.get("host") || + ""; + url.host = host; + url.protocol = "https"; + + const params = getRemixParams(arg.params); + const system = { + params, + search: Object.fromEntries(url.searchParams), + origin: url.origin, + }; + + const resources = await loadResources( + customFetch, + getResources({ system }).data + ); + const pageMeta = getPageMeta({ system, resources }); + + if (pageMeta.redirect) { + const status = + pageMeta.status === 301 || pageMeta.status === 302 + ? pageMeta.status + : 302; + throw redirect(pageMeta.redirect, status); + } + + // typecheck + arg.context.EXCLUDE_FROM_SEARCH satisfies boolean; + + if (arg.context.EXCLUDE_FROM_SEARCH) { + pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH; + } + + return data( + { + host, + url: url.href, + system, + resources, + pageMeta, + }, + // No way for current information to change, so add cache for 10 minutes + // In case of CRM Data, this should be set to 0 + { + status: pageMeta.status, + headers: { + "Cache-Control": "public, max-age=600", + }, + } + ); +}; + +export const headers: HeadersFunction = () => { + return { + "Cache-Control": "public, max-age=0, must-revalidate", + }; +}; + +export const meta: MetaFunction = ({ data }) => { + const metas: ReturnType = []; + if (data === undefined) { + return metas; + } + + const origin = `https://${data.host}`; + + if (siteName) { + metas.push({ + "script:ld+json": { + "@context": "https://schema.org", + "@type": "WebSite", + name: siteName, + url: origin, + }, + }); + } + + return metas; +}; + +export const links: LinksFunction = () => { + const result: LinkDescriptor[] = []; + + result.push({ + rel: "stylesheet", + href: css, + }); + + if (favIconAsset) { + result.push({ + rel: "icon", + href: imageLoader({ + src: `${assetBaseUrl}${favIconAsset.name}`, + // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search + width: 144, + height: 144, + fit: "pad", + quality: 100, + format: "auto", + }), + type: undefined, + }); + } + + for (const asset of pageFontAssets) { + result.push({ + rel: "preload", + href: `${assetBaseUrl}${asset.name}`, + as: "font", + crossOrigin: "anonymous", + }); + } + + for (const backgroundImageAsset of pageBackgroundImageAssets) { + result.push({ + rel: "preload", + href: `${assetBaseUrl}${backgroundImageAsset.name}`, + as: "image", + }); + } + + return result; +}; + +const getRequestHost = (request: Request): string => + request.headers.get("x-forwarded-host") || request.headers.get("host") || ""; + +export const action = async ({ + request, + context, +}: ActionFunctionArgs): Promise< + { success: true } | { success: false; errors: string[] } +> => { + try { + const url = new URL(request.url); + url.host = getRequestHost(request); + + const formData = await request.formData(); + + const system = { + params: {}, + search: {}, + origin: url.origin, + }; + + const resourceName = formData.get(formIdFieldName); + let resource = + typeof resourceName === "string" + ? getResources({ system }).action.get(resourceName) + : undefined; + + const formBotValue = formData.get(formBotFieldName); + + if (formBotValue == null || typeof formBotValue !== "string") { + throw new Error("Form bot field not found"); + } + + const submitTime = parseInt(formBotValue, 16); + // Assumes that the difference between the server time and the form submission time, + // including any client-server time drift, is within a 5-minute range. + // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes. + // Example: `formBotValue: jsdom`, or `formBotValue: headless-env` + if ( + Number.isNaN(submitTime) || + Math.abs(Date.now() - submitTime) > 1000 * 60 * 5 + ) { + throw new Error(`Form bot value invalid ${formBotValue}`); + } + + formData.delete(formIdFieldName); + formData.delete(formBotFieldName); + + if (resource) { + resource.headers.push({ + name: "Content-Type", + value: "application/json", + }); + resource.body = Object.fromEntries(formData); + } else { + if (contactEmail === undefined) { + throw new Error("Contact email not found"); + } + + resource = context.getDefaultActionResource?.({ + url, + projectId, + contactEmail, + formData, + }); + } + + if (resource === undefined) { + throw Error("Resource not found"); + } + const { ok, statusText } = await loadResource(fetch, resource); + if (ok) { + return { success: true }; + } + return { success: false, errors: [statusText] }; + } catch (error) { + console.error(error); + + return { + success: false, + errors: [error instanceof Error ? error.message : "Unknown error"], + }; + } +}; + +const Outlet = () => { + const { system, resources, url, pageMeta, host } = + useLoaderData(); + return ( + + {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} + + + {pageMeta.title} + + ); +}; + +export default Outlet; diff --git a/fixtures/react-router-docker/app/routes/[robots.txt].tsx b/fixtures/react-router-docker/app/routes/[robots.txt].tsx new file mode 100644 index 000000000000..cb8fe07b8f6f --- /dev/null +++ b/fixtures/react-router-docker/app/routes/[robots.txt].tsx @@ -0,0 +1,24 @@ +import type { LoaderFunctionArgs } from "react-router"; + +export const loader = (arg: LoaderFunctionArgs) => { + const host = + arg.request.headers.get("x-forwarded-host") || + arg.request.headers.get("host") || + ""; + + return new Response( + ` +User-agent: * +Disallow: /api/ + +Sitemap: https://${host}/sitemap.xml + + `, + { + headers: { + "Content-Type": "text/plain", + }, + status: 200, + } + ); +}; diff --git a/fixtures/react-router-docker/app/routes/[sitemap.xml]._index.tsx b/fixtures/react-router-docker/app/routes/[sitemap.xml]._index.tsx new file mode 100644 index 000000000000..8362eebee742 --- /dev/null +++ b/fixtures/react-router-docker/app/routes/[sitemap.xml]._index.tsx @@ -0,0 +1,34 @@ +import type { LoaderFunctionArgs } from "react-router"; +import { sitemap } from "../__generated__/$resources.sitemap.xml"; + +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.href} + ${page.lastModified.split("T")[0]} + + `; + }); + + return new Response( + ` + +${urls.join("")} + + `, + { + headers: { + "Content-Type": "application/xml", + }, + status: 200, + } + ); +}; diff --git a/fixtures/react-router-docker/app/routes/_index.tsx b/fixtures/react-router-docker/app/routes/_index.tsx new file mode 100644 index 000000000000..5ecd622ce95e --- /dev/null +++ b/fixtures/react-router-docker/app/routes/_index.tsx @@ -0,0 +1,295 @@ +import { + type MetaFunction, + type LinksFunction, + type LinkDescriptor, + type ActionFunctionArgs, + type LoaderFunctionArgs, + type HeadersFunction, + data, + redirect, + useLoaderData, +} from "react-router"; +import { + isLocalResource, + loadResource, + loadResources, + formIdFieldName, + formBotFieldName, +} from "@webstudio-is/sdk/runtime"; +import { + ReactSdkContext, + PageSettingsMeta, + PageSettingsTitle, +} from "@webstudio-is/react-sdk/runtime"; +import { + Page, + siteName, + favIconAsset, + pageFontAssets, + pageBackgroundImageAssets, +} from "../__generated__/_index"; +import { + getResources, + getPageMeta, + getRemixParams, + projectId, + contactEmail, +} from "../__generated__/_index.server"; +import { assetBaseUrl, imageLoader } from "../constants.mjs"; +import css from "../__generated__/index.css?url"; +import { sitemap } from "../__generated__/$resources.sitemap.xml"; + +const customFetch: typeof fetch = (input, init) => { + if (typeof input !== "string") { + return fetch(input, init); + } + + if (isLocalResource(input, "sitemap.xml")) { + // @todo: dynamic import sitemap ??? + const response = new Response(JSON.stringify(sitemap)); + response.headers.set("content-type", "application/json; charset=utf-8"); + return Promise.resolve(response); + } + + return fetch(input, init); +}; + +export const loader = async (arg: LoaderFunctionArgs) => { + const url = new URL(arg.request.url); + const host = + arg.request.headers.get("x-forwarded-host") || + arg.request.headers.get("host") || + ""; + url.host = host; + url.protocol = "https"; + + const params = getRemixParams(arg.params); + const system = { + params, + search: Object.fromEntries(url.searchParams), + origin: url.origin, + }; + + const resources = await loadResources( + customFetch, + getResources({ system }).data + ); + const pageMeta = getPageMeta({ system, resources }); + + if (pageMeta.redirect) { + const status = + pageMeta.status === 301 || pageMeta.status === 302 + ? pageMeta.status + : 302; + throw redirect(pageMeta.redirect, status); + } + + // typecheck + arg.context.EXCLUDE_FROM_SEARCH satisfies boolean; + + if (arg.context.EXCLUDE_FROM_SEARCH) { + pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH; + } + + return data( + { + host, + url: url.href, + system, + resources, + pageMeta, + }, + // No way for current information to change, so add cache for 10 minutes + // In case of CRM Data, this should be set to 0 + { + status: pageMeta.status, + headers: { + "Cache-Control": "public, max-age=600", + }, + } + ); +}; + +export const headers: HeadersFunction = () => { + return { + "Cache-Control": "public, max-age=0, must-revalidate", + }; +}; + +export const meta: MetaFunction = ({ data }) => { + const metas: ReturnType = []; + if (data === undefined) { + return metas; + } + + const origin = `https://${data.host}`; + + if (siteName) { + metas.push({ + "script:ld+json": { + "@context": "https://schema.org", + "@type": "WebSite", + name: siteName, + url: origin, + }, + }); + } + + return metas; +}; + +export const links: LinksFunction = () => { + const result: LinkDescriptor[] = []; + + result.push({ + rel: "stylesheet", + href: css, + }); + + if (favIconAsset) { + result.push({ + rel: "icon", + href: imageLoader({ + src: `${assetBaseUrl}${favIconAsset.name}`, + // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search + width: 144, + height: 144, + fit: "pad", + quality: 100, + format: "auto", + }), + type: undefined, + }); + } + + for (const asset of pageFontAssets) { + result.push({ + rel: "preload", + href: `${assetBaseUrl}${asset.name}`, + as: "font", + crossOrigin: "anonymous", + }); + } + + for (const backgroundImageAsset of pageBackgroundImageAssets) { + result.push({ + rel: "preload", + href: `${assetBaseUrl}${backgroundImageAsset.name}`, + as: "image", + }); + } + + return result; +}; + +const getRequestHost = (request: Request): string => + request.headers.get("x-forwarded-host") || request.headers.get("host") || ""; + +export const action = async ({ + request, + context, +}: ActionFunctionArgs): Promise< + { success: true } | { success: false; errors: string[] } +> => { + try { + const url = new URL(request.url); + url.host = getRequestHost(request); + + const formData = await request.formData(); + + const system = { + params: {}, + search: {}, + origin: url.origin, + }; + + const resourceName = formData.get(formIdFieldName); + let resource = + typeof resourceName === "string" + ? getResources({ system }).action.get(resourceName) + : undefined; + + const formBotValue = formData.get(formBotFieldName); + + if (formBotValue == null || typeof formBotValue !== "string") { + throw new Error("Form bot field not found"); + } + + const submitTime = parseInt(formBotValue, 16); + // Assumes that the difference between the server time and the form submission time, + // including any client-server time drift, is within a 5-minute range. + // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes. + // Example: `formBotValue: jsdom`, or `formBotValue: headless-env` + if ( + Number.isNaN(submitTime) || + Math.abs(Date.now() - submitTime) > 1000 * 60 * 5 + ) { + throw new Error(`Form bot value invalid ${formBotValue}`); + } + + formData.delete(formIdFieldName); + formData.delete(formBotFieldName); + + if (resource) { + resource.headers.push({ + name: "Content-Type", + value: "application/json", + }); + resource.body = Object.fromEntries(formData); + } else { + if (contactEmail === undefined) { + throw new Error("Contact email not found"); + } + + resource = context.getDefaultActionResource?.({ + url, + projectId, + contactEmail, + formData, + }); + } + + if (resource === undefined) { + throw Error("Resource not found"); + } + const { ok, statusText } = await loadResource(fetch, resource); + if (ok) { + return { success: true }; + } + return { success: false, errors: [statusText] }; + } catch (error) { + console.error(error); + + return { + success: false, + errors: [error instanceof Error ? error.message : "Unknown error"], + }; + } +}; + +const Outlet = () => { + const { system, resources, url, pageMeta, host } = + useLoaderData(); + return ( + + {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} + + + {pageMeta.title} + + ); +}; + +export default Outlet; diff --git a/fixtures/react-router-docker/package.json b/fixtures/react-router-docker/package.json new file mode 100644 index 000000000000..63d2828a6e2f --- /dev/null +++ b/fixtures/react-router-docker/package.json @@ -0,0 +1,49 @@ +{ + "scripts": { + "build": "react-router build", + "dev": "react-router dev", + "start": "react-router-serve ./build/server/index.js", + "typecheck": "tsc", + "cli": "NODE_OPTIONS='--conditions=webstudio --import=tsx' webstudio", + "fixtures:link": "pnpm cli link --link https://p-d845c167-ea07-4875-b08d-83e97c09dcce-dot-${BUILDER_HOST:-main.development.webstudio.is}'?authToken=e9d1343f-9298-4fd3-a66e-f89a5af2dd93'", + "fixtures:sync": "pnpm cli sync --buildId f565d527-32e7-4731-bc71-aca9e9574587 && pnpm prettier --write ./.webstudio/", + "fixtures:build": "pnpm cli build --template react-router-docker --template .template && pnpm prettier --write ./app/ ./package.json ./tsconfig.json" + }, + "dependencies": { + "@react-router/dev": "^7.1.1", + "@react-router/fs-routes": "^7.1.1", + "@react-router/node": "^7.1.1", + "@react-router/serve": "^7.1.1", + "@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:*", + "isbot": "^5.1.19", + "react": "18.3.0-canary-14898b6a9-20240318", + "react-dom": "18.3.0-canary-14898b6a9-20240318", + "react-router": "^7.1.1", + "vite": "^5.4.11", + "webstudio": "workspace:*" + }, + "private": true, + "sideEffects": false, + "devDependencies": { + "@types/react": "^18.2.70", + "@types/react-dom": "^18.2.25", + "typescript": "5.7.2" + }, + "engines": { + "node": ">=20.0.0" + }, + "name": "webstudio-react-router-docker", + "version": "0.0.1", + "description": "", + "main": "index.js", + "keywords": [], + "author": "", + "license": "AGPL-3.0-or-later", + "type": "module" +} diff --git a/fixtures/react-router-docker/public/assets/147-1478573_cat-icon-png-black-cat-png-icon.png_ZJ6-qJjk1RlFzuYwyCXdp.jpeg b/fixtures/react-router-docker/public/assets/147-1478573_cat-icon-png-black-cat-png-icon.png_ZJ6-qJjk1RlFzuYwyCXdp.jpeg new file mode 100644 index 000000000000..9d5e2b88439a Binary files /dev/null and b/fixtures/react-router-docker/public/assets/147-1478573_cat-icon-png-black-cat-png-icon.png_ZJ6-qJjk1RlFzuYwyCXdp.jpeg differ diff --git a/fixtures/react-router-docker/public/assets/iconly_svg_converted-converted_zMaMiAAutUl8XrITgz7d1.svg b/fixtures/react-router-docker/public/assets/iconly_svg_converted-converted_zMaMiAAutUl8XrITgz7d1.svg new file mode 100644 index 000000000000..bc70d3a453d8 --- /dev/null +++ b/fixtures/react-router-docker/public/assets/iconly_svg_converted-converted_zMaMiAAutUl8XrITgz7d1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/fixtures/react-router-docker/public/favicon.ico b/fixtures/react-router-docker/public/favicon.ico new file mode 100644 index 000000000000..9cb8c815dc0a Binary files /dev/null and b/fixtures/react-router-docker/public/favicon.ico differ diff --git a/fixtures/react-router-docker/tsconfig.json b/fixtures/react-router-docker/tsconfig.json new file mode 100644 index 000000000000..0744b14c56a2 --- /dev/null +++ b/fixtures/react-router-docker/tsconfig.json @@ -0,0 +1,19 @@ +{ + "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"], + "compilerOptions": { + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "types": ["vite/client", "@webstudio-is/react-sdk/placeholder"], + "isolatedModules": true, + "esModuleInterop": true, + "jsx": "react-jsx", + "module": "ESNext", + "moduleResolution": "bundler", + "target": "ES2022", + "strict": true, + "allowJs": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "skipLibCheck": true, + "customConditions": ["webstudio"] + } +} diff --git a/fixtures/react-router-docker/vite.config.ts b/fixtures/react-router-docker/vite.config.ts new file mode 100644 index 000000000000..317d7dc0a1c6 --- /dev/null +++ b/fixtures/react-router-docker/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from "vite"; +import { reactRouter } from "@react-router/dev/vite"; + +export default defineConfig({ + plugins: [reactRouter()], +}); diff --git a/packages/cli/package.json b/packages/cli/package.json index eeff03360be3..284928bf29f9 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -52,6 +52,7 @@ "devDependencies": { "@netlify/remix-adapter": "^2.5.1", "@netlify/remix-edge-adapter": "3.4.2", + "@react-router/dev": "^7.1.1", "@remix-run/cloudflare": "^2.15.2", "@remix-run/cloudflare-pages": "^2.15.2", "@remix-run/dev": "^2.15.2", @@ -70,9 +71,11 @@ "@webstudio-is/sdk-components-animation": "workspace:*", "@webstudio-is/sdk-components-react-radix": "workspace:*", "@webstudio-is/sdk-components-react-remix": "workspace:*", + "@webstudio-is/sdk-components-react-router": "workspace:*", "@webstudio-is/tsconfig": "workspace:*", "prettier": "3.4.2", "react-dom": "18.3.0-canary-14898b6a9-20240318", + "react-router": "^7.1.1", "ts-expect": "^1.3.0", "vike": "^0.4.210", "vite": "^5.4.11", diff --git a/packages/cli/src/config.ts b/packages/cli/src/config.ts index ba4487827960..a5077a908537 100644 --- a/packages/cli/src/config.ts +++ b/packages/cli/src/config.ts @@ -89,4 +89,9 @@ export const INTERNAL_TEMPLATES = [ label: "Cloudflare", expand: ["defaults", "cloudflare"], }, + { + value: "react-router-docker", + label: "Dokcer", + expand: ["react-router-docker"], + }, ]; diff --git a/packages/cli/src/framework-react-router.ts b/packages/cli/src/framework-react-router.ts new file mode 100644 index 000000000000..010608d4560e --- /dev/null +++ b/packages/cli/src/framework-react-router.ts @@ -0,0 +1,87 @@ +import { join } from "node:path"; +import { readFile, rm } from "node:fs/promises"; +import type { WsComponentMeta } from "@webstudio-is/sdk"; +import { generateRemixRoute, namespaceMeta } from "@webstudio-is/react-sdk"; +import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas"; +import * as reactRouterComponentMetas from "@webstudio-is/sdk-components-react-router/metas"; +import * as radixComponentMetas from "@webstudio-is/sdk-components-react-radix/metas"; +import type { Framework } from "./framework"; + +export const createFramework = async (): Promise => { + const routeTemplatesDir = join("app", "route-templates"); + + const htmlTemplate = await readFile( + join(routeTemplatesDir, "html.tsx"), + "utf8" + ); + const xmlTemplate = await readFile( + join(routeTemplatesDir, "xml.tsx"), + "utf8" + ); + const defaultSitemapTemplate = await readFile( + join(routeTemplatesDir, "default-sitemap.tsx"), + "utf8" + ); + const redirectTemplate = await readFile( + join(routeTemplatesDir, "redirect.tsx"), + "utf8" + ); + + // cleanup route templates after reading to not bloat generated code + await rm(routeTemplatesDir, { recursive: true, force: true }); + + const radixComponentNamespacedMetas: Record = {}; + for (const [name, meta] of Object.entries(radixComponentMetas)) { + const namespace = "@webstudio-is/sdk-components-react-radix"; + radixComponentNamespacedMetas[`${namespace}:${name}`] = namespaceMeta( + meta, + namespace, + new Set(Object.keys(radixComponentMetas)) + ); + } + + return { + components: [ + { + source: "@webstudio-is/sdk-components-react", + metas: baseComponentMetas, + }, + { + source: "@webstudio-is/sdk-components-react-radix", + metas: radixComponentNamespacedMetas, + }, + { + source: "@webstudio-is/sdk-components-react-router", + metas: reactRouterComponentMetas, + }, + ], + html: ({ pagePath }: { pagePath: string }) => [ + { + file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`), + template: htmlTemplate, + }, + ], + xml: ({ pagePath }: { pagePath: string }) => [ + { + file: join("app", "routes", `${generateRemixRoute(pagePath)}.tsx`), + template: xmlTemplate, + }, + ], + redirect: ({ pagePath }: { pagePath: string }) => [ + { + file: join("app", "routes", `${generateRemixRoute(pagePath)}.ts`), + template: redirectTemplate, + }, + ], + defaultSitemap: () => [ + { + file: join( + "app", + "routes", + `${generateRemixRoute("/sitemap.xml")}.tsx` + ), + template: defaultSitemapTemplate, + }, + ], + }; +}; diff --git a/packages/cli/src/prebuild.ts b/packages/cli/src/prebuild.ts index b33a6e6a4ee3..e3707fc1f987 100644 --- a/packages/cli/src/prebuild.ts +++ b/packages/cli/src/prebuild.ts @@ -59,6 +59,7 @@ import { import type * as sharedConstants from "../templates/defaults/app/constants.mjs"; import { htmlToJsx } from "./html-to-jsx"; import { createFramework as createRemixFramework } from "./framework-remix"; +import { createFramework as createReactRouterFramework } from "./framework-react-router"; import { createFramework as createVikeSsgFramework } from "./framework-vike-ssg"; const limit = pLimit(10); @@ -261,6 +262,8 @@ export const prebuild = async (options: { let framework; if (options.template.includes("ssg")) { framework = await createVikeSsgFramework(); + } else if (options.template.includes("react-router-docker")) { + framework = await createReactRouterFramework(); } else { framework = await createRemixFramework(); } diff --git a/packages/cli/templates/react-router-docker/.dockerignore b/packages/cli/templates/react-router-docker/.dockerignore new file mode 100644 index 000000000000..54f78fa7b671 --- /dev/null +++ b/packages/cli/templates/react-router-docker/.dockerignore @@ -0,0 +1,4 @@ +.react-router +build +node_modules +README.md diff --git a/packages/cli/templates/react-router-docker/.gitignore b/packages/cli/templates/react-router-docker/.gitignore new file mode 100644 index 000000000000..9b7c041f96ea --- /dev/null +++ b/packages/cli/templates/react-router-docker/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +/node_modules/ + +# React Router +/.react-router/ +/build/ diff --git a/packages/cli/templates/react-router-docker/Dockerfile b/packages/cli/templates/react-router-docker/Dockerfile new file mode 100644 index 000000000000..1385cf9a5f14 --- /dev/null +++ b/packages/cli/templates/react-router-docker/Dockerfile @@ -0,0 +1,22 @@ +FROM node:22-alpine AS development-dependencies-env +COPY . /app +WORKDIR /app +RUN npm install + +FROM node:22-alpine AS production-dependencies-env +COPY ./package.json package-lock.json /app/ +WORKDIR /app +RUN npm install --omit=dev + +FROM node:22-alpine AS build-env +COPY . /app/ +COPY --from=development-dependencies-env /app/node_modules /app/node_modules +WORKDIR /app +RUN npm run build + +FROM node:22-alpine +COPY ./package.json package-lock.json /app/ +COPY --from=production-dependencies-env /app/node_modules /app/node_modules +COPY --from=build-env /app/build /app/build +WORKDIR /app +CMD ["npm", "run", "start"] diff --git a/packages/cli/templates/react-router-docker/app/constants.mjs b/packages/cli/templates/react-router-docker/app/constants.mjs new file mode 100644 index 000000000000..dc5dbb0f5cb7 --- /dev/null +++ b/packages/cli/templates/react-router-docker/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; +}; diff --git a/packages/cli/templates/react-router-docker/app/extension.ts b/packages/cli/templates/react-router-docker/app/extension.ts new file mode 100644 index 000000000000..bffd05d48e17 --- /dev/null +++ b/packages/cli/templates/react-router-docker/app/extension.ts @@ -0,0 +1,13 @@ +import { ResourceRequest } from "@webstudio-is/sdk"; + +declare module "react-router" { + interface AppLoadContext { + EXCLUDE_FROM_SEARCH: boolean; + getDefaultActionResource?: (options: { + url: URL; + projectId: string; + contactEmail: string; + formData: FormData; + }) => ResourceRequest; + } +} diff --git a/packages/cli/templates/react-router-docker/app/root.tsx b/packages/cli/templates/react-router-docker/app/root.tsx new file mode 100644 index 000000000000..aa2a8c416496 --- /dev/null +++ b/packages/cli/templates/react-router-docker/app/root.tsx @@ -0,0 +1,35 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ + +import { Links, Meta, Outlet, useMatches } from "react-router"; +// @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 ( + + + + + + + + + + + ); +}; + +export default Root; diff --git a/packages/cli/templates/react-router-docker/app/route-templates/default-sitemap.tsx b/packages/cli/templates/react-router-docker/app/route-templates/default-sitemap.tsx new file mode 100644 index 000000000000..5794be7a079d --- /dev/null +++ b/packages/cli/templates/react-router-docker/app/route-templates/default-sitemap.tsx @@ -0,0 +1,34 @@ +import type { LoaderFunctionArgs } from "react-router"; +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.href} + ${page.lastModified.split("T")[0]} + + `; + }); + + return new Response( + ` + +${urls.join("")} + + `, + { + headers: { + "Content-Type": "application/xml", + }, + status: 200, + } + ); +}; diff --git a/packages/cli/templates/react-router-docker/app/route-templates/html.tsx b/packages/cli/templates/react-router-docker/app/route-templates/html.tsx new file mode 100644 index 000000000000..db13bf4a630a --- /dev/null +++ b/packages/cli/templates/react-router-docker/app/route-templates/html.tsx @@ -0,0 +1,295 @@ +import { + type MetaFunction, + type LinksFunction, + type LinkDescriptor, + type ActionFunctionArgs, + type LoaderFunctionArgs, + type HeadersFunction, + data, + redirect, + useLoaderData, +} from "react-router"; +import { + isLocalResource, + loadResource, + loadResources, + formIdFieldName, + formBotFieldName, +} from "@webstudio-is/sdk/runtime"; +import { + ReactSdkContext, + PageSettingsMeta, + PageSettingsTitle, +} from "@webstudio-is/react-sdk/runtime"; +import { + Page, + siteName, + favIconAsset, + pageFontAssets, + pageBackgroundImageAssets, +} from "__CLIENT__"; +import { + getResources, + getPageMeta, + getRemixParams, + projectId, + contactEmail, +} from "__SERVER__"; +import { assetBaseUrl, imageLoader } from "__CONSTANTS__"; +import css from "__CSS__?url"; +import { sitemap } from "__SITEMAP__"; + +const customFetch: typeof fetch = (input, init) => { + if (typeof input !== "string") { + return fetch(input, init); + } + + if (isLocalResource(input, "sitemap.xml")) { + // @todo: dynamic import sitemap ??? + const response = new Response(JSON.stringify(sitemap)); + response.headers.set("content-type", "application/json; charset=utf-8"); + return Promise.resolve(response); + } + + return fetch(input, init); +}; + +export const loader = async (arg: LoaderFunctionArgs) => { + const url = new URL(arg.request.url); + const host = + arg.request.headers.get("x-forwarded-host") || + arg.request.headers.get("host") || + ""; + url.host = host; + url.protocol = "https"; + + const params = getRemixParams(arg.params); + const system = { + params, + search: Object.fromEntries(url.searchParams), + origin: url.origin, + }; + + const resources = await loadResources( + customFetch, + getResources({ system }).data + ); + const pageMeta = getPageMeta({ system, resources }); + + if (pageMeta.redirect) { + const status = + pageMeta.status === 301 || pageMeta.status === 302 + ? pageMeta.status + : 302; + throw redirect(pageMeta.redirect, status); + } + + // typecheck + arg.context.EXCLUDE_FROM_SEARCH satisfies boolean; + + if (arg.context.EXCLUDE_FROM_SEARCH) { + pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH; + } + + return data( + { + host, + url: url.href, + system, + resources, + pageMeta, + }, + // No way for current information to change, so add cache for 10 minutes + // In case of CRM Data, this should be set to 0 + { + status: pageMeta.status, + headers: { + "Cache-Control": "public, max-age=600", + }, + } + ); +}; + +export const headers: HeadersFunction = () => { + return { + "Cache-Control": "public, max-age=0, must-revalidate", + }; +}; + +export const meta: MetaFunction = ({ data }) => { + const metas: ReturnType = []; + if (data === undefined) { + return metas; + } + + const origin = `https://${data.host}`; + + if (siteName) { + metas.push({ + "script:ld+json": { + "@context": "https://schema.org", + "@type": "WebSite", + name: siteName, + url: origin, + }, + }); + } + + return metas; +}; + +export const links: LinksFunction = () => { + const result: LinkDescriptor[] = []; + + result.push({ + rel: "stylesheet", + href: css, + }); + + if (favIconAsset) { + result.push({ + rel: "icon", + href: imageLoader({ + src: `${assetBaseUrl}${favIconAsset.name}`, + // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search + width: 144, + height: 144, + fit: "pad", + quality: 100, + format: "auto", + }), + type: undefined, + }); + } + + for (const asset of pageFontAssets) { + result.push({ + rel: "preload", + href: `${assetBaseUrl}${asset.name}`, + as: "font", + crossOrigin: "anonymous", + }); + } + + for (const backgroundImageAsset of pageBackgroundImageAssets) { + result.push({ + rel: "preload", + href: `${assetBaseUrl}${backgroundImageAsset.name}`, + as: "image", + }); + } + + return result; +}; + +const getRequestHost = (request: Request): string => + request.headers.get("x-forwarded-host") || request.headers.get("host") || ""; + +export const action = async ({ + request, + context, +}: ActionFunctionArgs): Promise< + { success: true } | { success: false; errors: string[] } +> => { + try { + const url = new URL(request.url); + url.host = getRequestHost(request); + + const formData = await request.formData(); + + const system = { + params: {}, + search: {}, + origin: url.origin, + }; + + const resourceName = formData.get(formIdFieldName); + let resource = + typeof resourceName === "string" + ? getResources({ system }).action.get(resourceName) + : undefined; + + const formBotValue = formData.get(formBotFieldName); + + if (formBotValue == null || typeof formBotValue !== "string") { + throw new Error("Form bot field not found"); + } + + const submitTime = parseInt(formBotValue, 16); + // Assumes that the difference between the server time and the form submission time, + // including any client-server time drift, is within a 5-minute range. + // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes. + // Example: `formBotValue: jsdom`, or `formBotValue: headless-env` + if ( + Number.isNaN(submitTime) || + Math.abs(Date.now() - submitTime) > 1000 * 60 * 5 + ) { + throw new Error(`Form bot value invalid ${formBotValue}`); + } + + formData.delete(formIdFieldName); + formData.delete(formBotFieldName); + + if (resource) { + resource.headers.push({ + name: "Content-Type", + value: "application/json", + }); + resource.body = Object.fromEntries(formData); + } else { + if (contactEmail === undefined) { + throw new Error("Contact email not found"); + } + + resource = context.getDefaultActionResource?.({ + url, + projectId, + contactEmail, + formData, + }); + } + + if (resource === undefined) { + throw Error("Resource not found"); + } + const { ok, statusText } = await loadResource(fetch, resource); + if (ok) { + return { success: true }; + } + return { success: false, errors: [statusText] }; + } catch (error) { + console.error(error); + + return { + success: false, + errors: [error instanceof Error ? error.message : "Unknown error"], + }; + } +}; + +const Outlet = () => { + const { system, resources, url, pageMeta, host } = + useLoaderData(); + return ( + + {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */} + + + {pageMeta.title} + + ); +}; + +export default Outlet; diff --git a/packages/cli/templates/react-router-docker/app/route-templates/redirect.tsx b/packages/cli/templates/react-router-docker/app/route-templates/redirect.tsx new file mode 100644 index 000000000000..0e7d00e3b8c1 --- /dev/null +++ b/packages/cli/templates/react-router-docker/app/route-templates/redirect.tsx @@ -0,0 +1,6 @@ +import { redirect } from "react-router"; +import { url, status } from "__REDIRECT__"; + +export const loader = () => { + throw redirect(url, status); +}; diff --git a/packages/cli/templates/react-router-docker/app/route-templates/xml.tsx b/packages/cli/templates/react-router-docker/app/route-templates/xml.tsx new file mode 100644 index 000000000000..f48c4d28568e --- /dev/null +++ b/packages/cli/templates/react-router-docker/app/route-templates/xml.tsx @@ -0,0 +1,85 @@ +import { renderToString } from "react-dom/server"; +import { type LoaderFunctionArgs, redirect } from "react-router"; +import { isLocalResource, loadResources } from "@webstudio-is/sdk/runtime"; +import { + ReactSdkContext, + xmlNodeTagSuffix, +} from "@webstudio-is/react-sdk/runtime"; +import { Page } from "__CLIENT__"; +import { getPageMeta, getRemixParams, getResources } from "__SERVER__"; +import { assetBaseUrl, imageLoader } from "__CONSTANTS__"; +import { sitemap } from "__SITEMAP__"; + +const customFetch: typeof fetch = (input, init) => { + if (typeof input !== "string") { + return fetch(input, init); + } + + if (isLocalResource(input, "sitemap.xml")) { + // @todo: dynamic import sitemap ??? + const response = new Response(JSON.stringify(sitemap)); + response.headers.set("content-type", "application/json; charset=utf-8"); + return Promise.resolve(response); + } + + return fetch(input, init); +}; + +export const loader = async (arg: LoaderFunctionArgs) => { + const url = new URL(arg.request.url); + const host = + arg.request.headers.get("x-forwarded-host") || + arg.request.headers.get("host") || + ""; + url.host = host; + url.protocol = "https"; + + const params = getRemixParams(arg.params); + + const system = { + params, + search: Object.fromEntries(url.searchParams), + origin: url.origin, + }; + + const resources = await loadResources( + customFetch, + getResources({ system }).data + ); + const pageMeta = getPageMeta({ system, resources }); + + if (pageMeta.redirect) { + const status = + pageMeta.status === 301 || pageMeta.status === 302 + ? pageMeta.status + : 302; + return redirect(pageMeta.redirect, status); + } + + // typecheck + arg.context.EXCLUDE_FROM_SEARCH satisfies boolean; + + let text = renderToString( + + + + ); + + // Xml is wrapped with to prevent React from hoisting elements like , , and out of their intended scope during rendering. + // More details: https://github.com/facebook/react/blob/7c8e5e7ab8bb63de911637892392c5efd8ce1d0f/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L3083 + text = text.replace(/^/g, "").replace(/<\/svg>$/g, ""); + + // React has issues rendering certain elements, such as errors when a element has children. + // To render XML, we wrap it with an tag and add a suffix to avoid React's default behavior on these elements. + text = text.replaceAll(xmlNodeTagSuffix, ""); + + return new Response(`\n${text}`, { + headers: { "Content-Type": "application/xml" }, + }); +}; diff --git a/packages/cli/templates/react-router-docker/app/routes/[robots.txt].tsx b/packages/cli/templates/react-router-docker/app/routes/[robots.txt].tsx new file mode 100644 index 000000000000..cb8fe07b8f6f --- /dev/null +++ b/packages/cli/templates/react-router-docker/app/routes/[robots.txt].tsx @@ -0,0 +1,24 @@ +import type { LoaderFunctionArgs } from "react-router"; + +export const loader = (arg: LoaderFunctionArgs) => { + const host = + arg.request.headers.get("x-forwarded-host") || + arg.request.headers.get("host") || + ""; + + return new Response( + ` +User-agent: * +Disallow: /api/ + +Sitemap: https://${host}/sitemap.xml + + `, + { + headers: { + "Content-Type": "text/plain", + }, + status: 200, + } + ); +}; diff --git a/packages/cli/templates/react-router-docker/package.json b/packages/cli/templates/react-router-docker/package.json new file mode 100644 index 000000000000..37d4b13e2702 --- /dev/null +++ b/packages/cli/templates/react-router-docker/package.json @@ -0,0 +1,34 @@ +{ + "type": "module", + "private": true, + "sideEffects": false, + "scripts": { + "build": "react-router build", + "dev": "react-router dev", + "typecheck": "tsc" + }, + "dependencies": { + "@react-router/dev": "^7.1.1", + "@react-router/fs-routes": "^7.1.1", + "@react-router/node": "^7.1.1", + "@webstudio-is/image": "0.0.0-webstudio-version", + "@webstudio-is/react-sdk": "0.0.0-webstudio-version", + "@webstudio-is/sdk": "0.0.0-webstudio-version", + "@webstudio-is/sdk-components-animation": "0.0.0-webstudio-version", + "@webstudio-is/sdk-components-react-radix": "0.0.0-webstudio-version", + "@webstudio-is/sdk-components-react-router": "0.0.0-webstudio-version", + "@webstudio-is/sdk-components-react": "0.0.0-webstudio-version", + "isbot": "^5.1.19", + "react": "18.3.0-canary-14898b6a9-20240318", + "react-dom": "18.3.0-canary-14898b6a9-20240318", + "vite": "^5.4.11" + }, + "devDependencies": { + "@types/react": "^18.2.70", + "@types/react-dom": "^18.2.25", + "typescript": "5.7.2" + }, + "engines": { + "node": ">=20.0.0" + } +} diff --git a/packages/cli/templates/react-router-docker/public/favicon.ico b/packages/cli/templates/react-router-docker/public/favicon.ico new file mode 100644 index 000000000000..9cb8c815dc0a Binary files /dev/null and b/packages/cli/templates/react-router-docker/public/favicon.ico differ diff --git a/packages/cli/templates/react-router-docker/tsconfig.json b/packages/cli/templates/react-router-docker/tsconfig.json new file mode 100644 index 000000000000..441f6e6fcb61 --- /dev/null +++ b/packages/cli/templates/react-router-docker/tsconfig.json @@ -0,0 +1,18 @@ +{ + "include": ["**/*.ts", "**/*.tsx", "**/*.mjs"], + "compilerOptions": { + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "types": ["vite/client", "@webstudio-is/react-sdk/placeholder"], + "isolatedModules": true, + "esModuleInterop": true, + "jsx": "react-jsx", + "module": "ESNext", + "moduleResolution": "bundler", + "target": "ES2022", + "strict": true, + "allowJs": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "skipLibCheck": true + } +} diff --git a/packages/cli/templates/react-router-docker/vite.config.ts b/packages/cli/templates/react-router-docker/vite.config.ts new file mode 100644 index 000000000000..317d7dc0a1c6 --- /dev/null +++ b/packages/cli/templates/react-router-docker/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from "vite"; +import { reactRouter } from "@react-router/dev/vite"; + +export default defineConfig({ + plugins: [reactRouter()], +}); diff --git a/packages/sdk-components-react-router/src/metas.ts b/packages/sdk-components-react-router/src/metas.ts index e56e6b28f9fb..b71fcc9b1486 100644 --- a/packages/sdk-components-react-router/src/metas.ts +++ b/packages/sdk-components-react-router/src/metas.ts @@ -4,4 +4,4 @@ export { RichTextLink, Form, RemixForm, -} from "@webstudio-is/sdk-components-react"; +} from "@webstudio-is/sdk-components-react/metas"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c0c6f231177..1c06af7b665d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -471,6 +471,70 @@ importers: specifier: ^2.1.8 version: 2.1.8(@types/node@22.10.2)(jsdom@20.0.3) + fixtures/react-router-docker: + dependencies: + '@react-router/dev': + specifier: ^7.1.1 + version: 7.1.1(@react-router/serve@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2))(@types/node@22.10.2)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0)) + '@react-router/fs-routes': + specifier: ^7.1.1 + version: 7.1.1(@react-router/dev@7.1.1(@react-router/serve@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2))(@types/node@22.10.2)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0)))(typescript@5.7.2) + '@react-router/node': + specifier: ^7.1.1 + version: 7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2) + '@react-router/serve': + specifier: ^7.1.1 + version: 7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2) + '@webstudio-is/image': + specifier: workspace:* + version: link:../../packages/image + '@webstudio-is/react-sdk': + specifier: workspace:* + version: link:../../packages/react-sdk + '@webstudio-is/sdk': + specifier: workspace:* + version: link:../../packages/sdk + '@webstudio-is/sdk-components-animation': + specifier: workspace:* + version: link:../../packages/sdk-components-animation + '@webstudio-is/sdk-components-react': + specifier: workspace:* + version: link:../../packages/sdk-components-react + '@webstudio-is/sdk-components-react-radix': + specifier: workspace:* + version: link:../../packages/sdk-components-react-radix + '@webstudio-is/sdk-components-react-router': + specifier: workspace:* + version: link:../../packages/sdk-components-react-router + isbot: + specifier: ^5.1.19 + version: 5.1.19 + react: + specifier: 18.3.0-canary-14898b6a9-20240318 + version: 18.3.0-canary-14898b6a9-20240318 + react-dom: + specifier: 18.3.0-canary-14898b6a9-20240318 + version: 18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318) + react-router: + specifier: ^7.1.1 + version: 7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318) + vite: + specifier: ^5.4.11 + version: 5.4.11(@types/node@22.10.2) + webstudio: + specifier: workspace:* + version: link:../../packages/cli + devDependencies: + '@types/react': + specifier: ^18.2.70 + version: 18.2.79 + '@types/react-dom': + specifier: ^18.2.25 + version: 18.2.25 + typescript: + specifier: 5.7.2 + version: 5.7.2 + fixtures/ssg: dependencies: '@webstudio-is/image': @@ -1090,6 +1154,9 @@ importers: '@netlify/remix-edge-adapter': specifier: 3.4.2 version: 3.4.2(@remix-run/react@2.15.2(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318)(typescript@5.7.2))(@remix-run/serve@2.15.2(typescript@5.7.2))(@remix-run/server-runtime@2.15.2(typescript@5.7.2))(@types/node@22.10.2)(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0)) + '@react-router/dev': + specifier: ^7.1.1 + version: 7.1.1(@react-router/serve@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2))(@types/node@22.10.2)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0)) '@remix-run/cloudflare': specifier: ^2.15.2 version: 2.15.2(@cloudflare/workers-types@4.20240701.0)(typescript@5.7.2) @@ -1144,6 +1211,9 @@ importers: '@webstudio-is/sdk-components-react-remix': specifier: workspace:* version: link:../sdk-components-react-remix + '@webstudio-is/sdk-components-react-router': + specifier: workspace:* + version: link:../sdk-components-react-router '@webstudio-is/tsconfig': specifier: workspace:* version: link:../tsconfig @@ -1153,6 +1223,9 @@ importers: react-dom: specifier: 18.3.0-canary-14898b6a9-20240318 version: 18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318) + react-router: + specifier: ^7.1.1 + version: 7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318) ts-expect: specifier: ^1.3.0 version: 1.3.0 @@ -3395,10 +3468,6 @@ packages: typescript: optional: true - '@jridgewell/gen-mapping@0.3.2': - resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==} - engines: {node: '>=6.0.0'} - '@jridgewell/gen-mapping@0.3.5': resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} engines: {node: '>=6.0.0'} @@ -3407,26 +3476,16 @@ packages: resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==} engines: {node: '>=6.0.0'} - '@jridgewell/set-array@1.1.2': - resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} - engines: {node: '>=6.0.0'} - '@jridgewell/set-array@1.2.1': resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} engines: {node: '>=6.0.0'} - '@jridgewell/sourcemap-codec@1.4.14': - resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==} - '@jridgewell/sourcemap-codec@1.4.15': resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} '@jridgewell/sourcemap-codec@1.5.0': resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==} - '@jridgewell/trace-mapping@0.3.18': - resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==} - '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} @@ -3557,6 +3616,9 @@ packages: resolution: {integrity: sha512-PYn05ET2USfBAeXF6NZfWl0O32KVyE8ncQ/ngysrh3hoIV7l3qGGH7ubeFx+D8VWQ682qYhwGygUzQv2j1tGGg==} engines: {node: '>=16.13'} + '@mjackson/node-fetch-server@0.2.0': + resolution: {integrity: sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng==} + '@nanostores/react@0.8.0': resolution: {integrity: sha512-MhbVB7NQLboq/Z9fRTDen9zib/YCffe6mn+3Xg5MOYByMX5Xx98SOZjk/Nd3yvOd/g7GjlQqwXj0KF2lPb6CEQ==} engines: {node: ^18.0.0 || >=20.0.0} @@ -4345,6 +4407,62 @@ packages: peerDependencies: react: 18.3.0-canary-14898b6a9-20240318 + '@react-router/dev@7.1.1': + resolution: {integrity: sha512-+UCrQZBAmdRcC7Bx1ho89T/DeP+FzEErkzrTvdBCpstr8AzOQ6mKlaglXGty15o3fgihBSFF4/J67jGveYIR8Q==} + engines: {node: '>=20.0.0'} + hasBin: true + peerDependencies: + '@react-router/serve': ^7.1.1 + react-router: ^7.1.1 + typescript: ^5.1.0 + vite: ^5.1.0 || ^6.0.0 + wrangler: ^3.28.2 + peerDependenciesMeta: + '@react-router/serve': + optional: true + typescript: + optional: true + wrangler: + optional: true + + '@react-router/express@7.1.1': + resolution: {integrity: sha512-oiL2ADor3byuh7piajLTPr6007GmVPZ1Gh4HiN0uuZlz3vQ1rd0xZMSD9LnSrXhsrKEbPFaeCk8E2O67ZoABsg==} + engines: {node: '>=20.0.0'} + peerDependencies: + express: ^4.17.1 + react-router: 7.1.1 + typescript: ^5.1.0 + peerDependenciesMeta: + typescript: + optional: true + + '@react-router/fs-routes@7.1.1': + resolution: {integrity: sha512-FXe4d5sKRwa3Yj1xz4rtnxpmwG1IENr+Jd8fQd4IxbC6u/HJrIURacq1l83cTr62Uerf5N4h3v3pGgDEmmGwcg==} + engines: {node: '>=20.0.0'} + peerDependencies: + '@react-router/dev': ^7.1.1 + typescript: ^5.1.0 + peerDependenciesMeta: + typescript: + optional: true + + '@react-router/node@7.1.1': + resolution: {integrity: sha512-5X79SfJ1IEEsttt0oo9rhO9kgxXyBTKdVBsz3h0WHTkRzbRk0VEpVpBW3PQ1RpkgEaAHwJ8obVl4k4brdDSExA==} + engines: {node: '>=20.0.0'} + peerDependencies: + react-router: 7.1.1 + typescript: ^5.1.0 + peerDependenciesMeta: + typescript: + optional: true + + '@react-router/serve@7.1.1': + resolution: {integrity: sha512-rhV1yp72ZZQn4giQUzUiLVo/7/7dhxD98Z5pdDm6mKOTJPGoQ8TBPccQaKxzJIFNRHcn0sEdehfLOxl5ydnUKw==} + engines: {node: '>=20.0.0'} + hasBin: true + peerDependencies: + react-router: 7.1.1 + '@react-stately/utils@3.10.5': resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==} peerDependencies: @@ -5182,6 +5300,9 @@ packages: axobject-query@3.2.1: resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==} + babel-dead-code-elimination@1.0.8: + resolution: {integrity: sha512-og6HQERk0Cmm+nTT4Od2wbPtgABXFMPaHACjbKLulZIFMkYyXZLkUGuAxdgpMJBrxyt/XFpSz++lNzjbcMnPkQ==} + bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -5244,11 +5365,6 @@ packages: browserify-zlib@0.1.4: resolution: {integrity: sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==} - browserslist@4.24.0: - resolution: {integrity: sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==} - engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} - hasBin: true - browserslist@4.24.3: resolution: {integrity: sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -5298,9 +5414,6 @@ packages: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} - caniuse-lite@1.0.30001667: - resolution: {integrity: sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==} - caniuse-lite@1.0.30001690: resolution: {integrity: sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==} @@ -5344,10 +5457,14 @@ packages: resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==} engines: {node: '>= 16'} - chokidar@3.5.3: - resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} + chokidar@3.6.0: + resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} + chokidar@4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} @@ -5570,6 +5687,15 @@ packages: supports-color: optional: true + debug@4.4.0: + resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + decimal.js@10.4.3: resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==} @@ -5703,9 +5829,6 @@ packages: ee-first@1.1.1: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} - electron-to-chromium@1.5.32: - resolution: {integrity: sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==} - electron-to-chromium@1.5.76: resolution: {integrity: sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==} @@ -7155,9 +7278,6 @@ packages: resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==} engines: {node: '>= 6.13.0'} - node-releases@2.0.18: - resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} - node-releases@2.0.19: resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==} @@ -7751,6 +7871,10 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} + readdirp@4.1.1: + resolution: {integrity: sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==} + engines: {node: '>= 14.18.0'} + recast@0.23.9: resolution: {integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==} engines: {node: '>= 4'} @@ -8403,6 +8527,10 @@ packages: resolution: {integrity: sha512-VviMt2tlMg1BvQ0FKXxrz1eJuyrcISrL2sPfBf7ZskX/FCEc/7LeThQaoygsMJpNqrATWQIsRVx+1Dpe4jaYuQ==} engines: {node: '>=18.17'} + undici@6.21.0: + resolution: {integrity: sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==} + engines: {node: '>=18.17'} + unenv-nightly@1.10.0-1717606461.a117952: resolution: {integrity: sha512-u3TfBX02WzbHTpaEfWEKwDijDSFAHcgXkayUZ+MVDrjhLFvgAJzFGTSTmwlEhwWi2exyRQey23ah9wELMM6etg==} @@ -8608,6 +8736,11 @@ packages: engines: {node: ^18.0.0 || >=20.0.0} hasBin: true + vite-node@3.0.0-beta.2: + resolution: {integrity: sha512-ofTf6cfRdL30Wbl9n/BX81EyIR5s4PReLmSurrxQ+koLaWUNOEo8E0lCM53OJkb8vpa2URM2nSrxZsIFyvY1rg==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + vite@5.4.11: resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==} engines: {node: ^18.0.0 || >=20.0.0} @@ -8874,8 +9007,8 @@ snapshots: '@ampproject/remapping@2.2.1': dependencies: - '@jridgewell/gen-mapping': 0.3.2 - '@jridgewell/trace-mapping': 0.3.18 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 '@atlaskit/pragmatic-drag-and-drop-auto-scroll@2.1.0': dependencies: @@ -8958,7 +9091,7 @@ snapshots: dependencies: '@babel/compat-data': 7.26.2 '@babel/helper-validator-option': 7.25.9 - browserslist: 4.24.0 + browserslist: 4.24.3 lru-cache: 5.1.1 semver: 6.3.1 @@ -9810,39 +9943,24 @@ snapshots: optionalDependencies: typescript: 5.7.2 - '@jridgewell/gen-mapping@0.3.2': - dependencies: - '@jridgewell/set-array': 1.1.2 - '@jridgewell/sourcemap-codec': 1.4.15 - '@jridgewell/trace-mapping': 0.3.18 - '@jridgewell/gen-mapping@0.3.5': dependencies: '@jridgewell/set-array': 1.2.1 - '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/trace-mapping': 0.3.25 '@jridgewell/resolve-uri@3.1.0': {} - '@jridgewell/set-array@1.1.2': {} - '@jridgewell/set-array@1.2.1': {} - '@jridgewell/sourcemap-codec@1.4.14': {} - '@jridgewell/sourcemap-codec@1.4.15': {} '@jridgewell/sourcemap-codec@1.5.0': {} - '@jridgewell/trace-mapping@0.3.18': - dependencies: - '@jridgewell/resolve-uri': 3.1.0 - '@jridgewell/sourcemap-codec': 1.4.14 - '@jridgewell/trace-mapping@0.3.25': dependencies: '@jridgewell/resolve-uri': 3.1.0 - '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/sourcemap-codec': 1.5.0 '@jridgewell/trace-mapping@0.3.9': dependencies: @@ -10094,6 +10212,8 @@ snapshots: dependencies: '@miniflare/shared': 2.14.4 + '@mjackson/node-fetch-server@0.2.0': {} + '@nanostores/react@0.8.0(nanostores@0.11.3)(react@18.3.0-canary-14898b6a9-20240318)': dependencies: nanostores: 0.11.3 @@ -10942,6 +11062,95 @@ snapshots: clsx: 2.1.1 react: 18.3.0-canary-14898b6a9-20240318 + '@react-router/dev@7.1.1(@react-router/serve@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2))(@types/node@22.10.2)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0))': + dependencies: + '@babel/core': 7.26.0 + '@babel/generator': 7.26.2 + '@babel/parser': 7.26.2 + '@babel/plugin-syntax-decorators': 7.24.1(@babel/core@7.26.0) + '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.26.0) + '@babel/preset-typescript': 7.24.1(@babel/core@7.26.0) + '@babel/traverse': 7.25.9 + '@babel/types': 7.26.0 + '@npmcli/package-json': 4.0.1 + '@react-router/node': 7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2) + arg: 5.0.2 + babel-dead-code-elimination: 1.0.8 + chokidar: 4.0.3 + dedent: 1.5.3 + es-module-lexer: 1.5.4 + exit-hook: 2.2.1 + fs-extra: 10.1.0 + gunzip-maybe: 1.4.2 + jsesc: 3.0.2 + lodash: 4.17.21 + pathe: 1.1.2 + picocolors: 1.1.1 + picomatch: 2.3.1 + prettier: 2.8.7 + react-refresh: 0.14.2 + react-router: 7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318) + semver: 7.6.3 + set-cookie-parser: 2.6.0 + valibot: 0.41.0(typescript@5.7.2) + vite: 5.4.11(@types/node@22.10.2) + vite-node: 3.0.0-beta.2(@types/node@22.10.2) + optionalDependencies: + '@react-router/serve': 7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2) + typescript: 5.7.2 + wrangler: 3.63.2(@cloudflare/workers-types@4.20240701.0) + transitivePeerDependencies: + - '@types/node' + - babel-plugin-macros + - bluebird + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + + '@react-router/express@7.1.1(express@4.21.1)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)': + dependencies: + '@react-router/node': 7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2) + express: 4.21.1 + react-router: 7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318) + optionalDependencies: + typescript: 5.7.2 + + '@react-router/fs-routes@7.1.1(@react-router/dev@7.1.1(@react-router/serve@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2))(@types/node@22.10.2)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0)))(typescript@5.7.2)': + dependencies: + '@react-router/dev': 7.1.1(@react-router/serve@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2))(@types/node@22.10.2)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)(vite@5.4.11(@types/node@22.10.2))(wrangler@3.63.2(@cloudflare/workers-types@4.20240701.0)) + minimatch: 9.0.4 + optionalDependencies: + typescript: 5.7.2 + + '@react-router/node@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)': + dependencies: + '@mjackson/node-fetch-server': 0.2.0 + react-router: 7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318) + source-map-support: 0.5.21 + stream-slice: 0.1.2 + undici: 6.21.0 + optionalDependencies: + typescript: 5.7.2 + + '@react-router/serve@7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2)': + dependencies: + '@react-router/express': 7.1.1(express@4.21.1)(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2) + '@react-router/node': 7.1.1(react-router@7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318))(typescript@5.7.2) + compression: 1.7.4 + express: 4.21.1 + get-port: 5.1.1 + morgan: 1.10.0 + react-router: 7.1.1(react-dom@18.3.0-canary-14898b6a9-20240318(react@18.3.0-canary-14898b6a9-20240318))(react@18.3.0-canary-14898b6a9-20240318) + source-map-support: 0.5.21 + transitivePeerDependencies: + - supports-color + - typescript + '@react-stately/utils@3.10.5(react@18.3.0-canary-14898b6a9-20240318)': dependencies: '@swc/helpers': 0.5.15 @@ -10987,7 +11196,7 @@ snapshots: arg: 5.0.2 cacache: 17.1.4 chalk: 4.1.2 - chokidar: 3.5.3 + chokidar: 3.6.0 cross-spawn: 7.0.6 dotenv: 16.3.1 es-module-lexer: 1.5.4 @@ -11082,7 +11291,7 @@ snapshots: dependencies: '@remix-run/express': 2.15.2(express@4.21.1)(typescript@5.7.2) '@remix-run/node': 2.15.2(typescript@5.7.2) - chokidar: 3.5.3 + chokidar: 3.6.0 compression: 1.7.4 express: 4.21.1 get-port: 5.1.1 @@ -11885,7 +12094,7 @@ snapshots: agent-base@6.0.2: dependencies: - debug: 4.3.7 + debug: 4.4.0 transitivePeerDependencies: - supports-color optional: true @@ -12013,6 +12222,15 @@ snapshots: dependencies: dequal: 2.0.3 + babel-dead-code-elimination@1.0.8: + dependencies: + '@babel/core': 7.26.0 + '@babel/parser': 7.26.2 + '@babel/traverse': 7.25.9 + '@babel/types': 7.26.0 + transitivePeerDependencies: + - supports-color + bail@2.0.2: {} balanced-match@1.0.2: {} @@ -12089,13 +12307,6 @@ snapshots: dependencies: pako: 0.2.9 - browserslist@4.24.0: - dependencies: - caniuse-lite: 1.0.30001667 - electron-to-chromium: 1.5.32 - node-releases: 2.0.18 - update-browserslist-db: 1.1.1(browserslist@4.24.0) - browserslist@4.24.3: dependencies: caniuse-lite: 1.0.30001690 @@ -12156,8 +12367,6 @@ snapshots: callsites@3.1.0: {} - caniuse-lite@1.0.30001667: {} - caniuse-lite@1.0.30001690: {} capnp-ts@0.7.0: @@ -12202,7 +12411,7 @@ snapshots: check-error@2.1.1: {} - chokidar@3.5.3: + chokidar@3.6.0: dependencies: anymatch: 3.1.3 braces: 3.0.2 @@ -12214,6 +12423,10 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + chokidar@4.0.3: + dependencies: + readdirp: 4.1.1 + chownr@1.1.4: {} chownr@2.0.0: {} @@ -12408,6 +12621,10 @@ snapshots: dependencies: ms: 2.1.3 + debug@4.4.0: + dependencies: + ms: 2.1.3 + decimal.js@10.4.3: optional: true @@ -12547,8 +12764,6 @@ snapshots: ee-first@1.1.1: {} - electron-to-chromium@1.5.32: {} - electron-to-chromium@1.5.76: {} emittery@0.12.1: {} @@ -13317,7 +13532,7 @@ snapshots: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.7 + debug: 4.4.0 transitivePeerDependencies: - supports-color optional: true @@ -13325,7 +13540,7 @@ snapshots: https-proxy-agent@5.0.1: dependencies: agent-base: 6.0.2 - debug: 4.3.7 + debug: 4.4.0 transitivePeerDependencies: - supports-color optional: true @@ -14517,8 +14732,6 @@ snapshots: node-forge@1.3.1: {} - node-releases@2.0.18: {} - node-releases@2.0.19: {} normalize-package-data@2.5.0: @@ -15146,6 +15359,8 @@ snapshots: dependencies: picomatch: 2.3.1 + readdirp@4.1.1: {} + recast@0.23.9: dependencies: ast-types: 0.16.1 @@ -15816,6 +16031,8 @@ snapshots: undici@6.15.0: {} + undici@6.21.0: {} + unenv-nightly@1.10.0-1717606461.a117952: dependencies: consola: 3.2.3 @@ -15918,12 +16135,6 @@ snapshots: untruncate-json@0.0.1: {} - update-browserslist-db@1.1.1(browserslist@4.24.0): - dependencies: - browserslist: 4.24.0 - escalade: 3.2.0 - picocolors: 1.1.1 - update-browserslist-db@1.1.1(browserslist@4.24.3): dependencies: browserslist: 4.24.3 @@ -16081,6 +16292,24 @@ snapshots: - supports-color - terser + vite-node@3.0.0-beta.2(@types/node@22.10.2): + dependencies: + cac: 6.7.14 + debug: 4.4.0 + es-module-lexer: 1.5.4 + pathe: 1.1.2 + vite: 5.4.11(@types/node@22.10.2) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + vite@5.4.11(@types/node@22.10.2): dependencies: esbuild: 0.21.5 @@ -16242,7 +16471,7 @@ snapshots: '@esbuild-plugins/node-globals-polyfill': 0.2.3(esbuild@0.17.19) '@esbuild-plugins/node-modules-polyfill': 0.2.2(esbuild@0.17.19) blake3-wasm: 2.1.5 - chokidar: 3.5.3 + chokidar: 3.6.0 date-fns: 3.6.0 esbuild: 0.17.19 miniflare: 3.20240701.0