diff --git a/core/scripts/vercel-build.sh b/core/scripts/vercel-build.sh index daf44142dce..6402e3bd247 100755 --- a/core/scripts/vercel-build.sh +++ b/core/scripts/vercel-build.sh @@ -3,12 +3,14 @@ # Vercel preview build script # # Builds core component tests (same as before) plus framework test apps -# (Angular, React, Vue) so they're all accessible from a single preview URL. +# (Angular, React, React Router, Vue) so they're all accessible from a single +# preview URL. # -# Core tests: /src/components/{name}/test/{scenario} -# Angular test app: /angular/ -# React test app: /react/ -# Vue test app: /vue/ +# Core tests: /src/components/{name}/test/{scenario} +# Angular test app: /angular/ +# React test app: /react/ +# React Router test app: /react-router/ +# Vue test app: /vue/ # set -e @@ -62,6 +64,12 @@ generate_dir_index() { # Skip if an index.html already exists (it's an actual test page) [ -f "${dir}/index.html" ] && return + # Absolute hrefs based on url_path. Vercel does not redirect to add trailing + # slashes, so a relative href like "basic/" from a URL without a trailing + # slash resolves against the parent directory and breaks navigation. + local parent_path="${url_path%/}" + parent_path="${parent_path%/*}/" + local entries="" for child in "${dir}"/*/; do [ -d "${child}" ] || continue @@ -70,7 +78,7 @@ generate_dir_index() { case "${name}" in *-snapshots|.*) continue ;; esac # Only include if there's at least one index.html somewhere underneath find "${child}" -name "index.html" -print -quit | grep -q . || continue - entries="${entries}${name}/\n" + entries="${entries}${name}/\n" done [ -z "${entries}" ] && return @@ -92,7 +100,7 @@ generate_dir_index() {

Index of ${url_path}

- ../ + ../ $(echo -e "${entries}") @@ -254,8 +262,29 @@ build_vue_test() { echo "[vue] Done." } -# TODO: Add build_react_router_test() when reactrouter6-* apps are added to -# packages/react-router/test/apps/ +build_react_router_test() { + local APP + APP=$(pick_app "${REPO_ROOT}/packages/react-router/test") || { + echo "[react-router] No test app found, skipping." + return 0 + } + echo "[react-router] Building ${APP}..." + + cd "${REPO_ROOT}/packages/react-router/test" + ./build.sh "${APP}" + cd "build/${APP}" + # The react-router test apps require --legacy-peer-deps (mixed react versions + # across @ionic/react peer ranges). + npm install --legacy-peer-deps + npm run sync + # IonReactRouter basename is derived from import.meta.env.BASE_URL which Vite + # sets from --base, so routing works under the /react-router/ sub-path. + npx vite build --base /react-router/ + + mkdir -p "${OUTPUT_DIR}/react-router" + cp -r dist/* "${OUTPUT_DIR}/react-router/" + echo "[react-router] Done." +} TEST_FAILED="" @@ -266,6 +295,8 @@ fi if $REACT_PKG_OK; then build_react_test > /tmp/vercel-react-test.log 2>&1 & PID_REACT_TEST=$! + build_react_router_test > /tmp/vercel-react-router-test.log 2>&1 & + PID_REACT_ROUTER_TEST=$! fi if $VUE_PKG_OK; then build_vue_test > /tmp/vercel-vue-test.log 2>&1 & @@ -276,7 +307,8 @@ if $ANG_PKG_OK; then wait $PID_ANG_TEST || { echo "Angular test app failed:"; tail -30 /tmp/vercel-angular-test.log; TEST_FAILED="${TEST_FAILED} angular"; } fi if $REACT_PKG_OK; then - wait $PID_REACT_TEST || { echo "React test app failed:"; tail -30 /tmp/vercel-react-test.log; TEST_FAILED="${TEST_FAILED} react"; } + wait $PID_REACT_TEST || { echo "React test app failed:"; tail -30 /tmp/vercel-react-test.log; TEST_FAILED="${TEST_FAILED} react"; } + wait $PID_REACT_ROUTER_TEST || { echo "React Router test app failed:"; tail -30 /tmp/vercel-react-router-test.log; TEST_FAILED="${TEST_FAILED} react-router"; } fi if $VUE_PKG_OK; then wait $PID_VUE_TEST || { echo "Vue test app failed:"; tail -30 /tmp/vercel-vue-test.log; TEST_FAILED="${TEST_FAILED} vue"; } @@ -339,6 +371,10 @@ cat > "${OUTPUT_DIR}/index.html" << 'LANDING_EOF'

React

@ionic/react overlays, hooks, tabs, form controls

+ +

React Router

+

@ionic/react-router routing, tabs, swipe-to-go-back, overlays

+

Vue

@ionic/vue overlays, router, tabs, lifecycle

diff --git a/core/vercel.json b/core/vercel.json index 64b88751822..2249047dee9 100644 --- a/core/vercel.json +++ b/core/vercel.json @@ -7,6 +7,7 @@ "rewrites": [ { "source": "/angular/:path*", "destination": "/angular/index.html" }, { "source": "/react/:path*", "destination": "/react/index.html" }, + { "source": "/react-router/:path*", "destination": "/react-router/index.html" }, { "source": "/vue/:path*", "destination": "/vue/index.html" } ] } diff --git a/packages/react-router/test/base/src/App.tsx b/packages/react-router/test/base/src/App.tsx index b5180d33a19..354900fec17 100644 --- a/packages/react-router/test/base/src/App.tsx +++ b/packages/react-router/test/base/src/App.tsx @@ -76,7 +76,8 @@ const App: React.FC = () => { return ( - + {/* Vercel previews serve this app under /react-router/, so derive basename from Vite's base URL */} + } /> } /> diff --git a/packages/react-router/test/base/src/react-app-env.d.ts b/packages/react-router/test/base/src/react-app-env.d.ts index 9a8fcf86803..37a57f1c033 100644 --- a/packages/react-router/test/base/src/react-app-env.d.ts +++ b/packages/react-router/test/base/src/react-app-env.d.ts @@ -9,6 +9,14 @@ declare namespace NodeJS { } } +interface ImportMetaEnv { + readonly BASE_URL?: string; +} + +interface ImportMeta { + readonly env?: ImportMetaEnv; +} + declare module '*.bmp' { const src: string; export default src;