From c28c3cc6a577653a857f3f38a3d93eefa091f102 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 26 Aug 2023 19:33:54 +0200 Subject: [PATCH] tests: bring fixtures in line with templates (#7166) Co-authored-by: Matt Brophy --- integration/cf-compiler-test.ts | 7 ++- integration/compiler-mjs-output-test.ts | 55 ++++++++----------- integration/deno-compiler-test.ts | 4 +- .../deterministic-build-output-test.ts | 35 +++++++++++- integration/helpers/cf-template/app/root.tsx | 8 ++- .../helpers/cf-template/app/routes/_index.tsx | 11 +++- integration/helpers/cf-template/package.json | 13 +++-- .../helpers/cf-template/remix.config.js | 11 ++-- .../helpers/cf-template/remix.env.d.ts | 7 ++- integration/helpers/cf-template/server.ts | 53 +++++++++++++++++- integration/helpers/cf-template/wrangler.toml | 18 ++---- .../helpers/deno-template/app/root.tsx | 8 ++- .../deno-template/app/routes/_index.tsx | 42 ++++++++++++++ .../helpers/deno-template/package.json | 12 +++- .../helpers/deno-template/remix.config.js | 6 +- .../helpers/node-template/app/root.tsx | 8 ++- .../node-template/app/routes/_index.tsx | 8 ++- .../helpers/node-template/package.json | 2 +- .../helpers/node-template/remix.config.js | 4 +- integration/hmr-test.ts | 16 +++--- integration/package.json | 37 ++++++++++++- integration/postcss-test.ts | 31 ++++++++++- integration/tailwind-test.ts | 29 ++++++++++ integration/vanilla-extract-test.ts | 28 ++++++++++ package.json | 17 +----- .../{.eslintrc.js => .eslintrc.cjs} | 0 .../__tests__/fixtures/cloudflare/.gitignore | 2 +- .../fixtures/cloudflare/app/root.tsx | 8 ++- .../fixtures/cloudflare/app/routes/_index.tsx | 41 ++++++++++++++ .../fixtures/cloudflare/package.json | 33 +++++------ .../fixtures/cloudflare/public/_headers | 4 +- .../fixtures/cloudflare/public/_routes.json | 2 +- .../fixtures/cloudflare/remix.config.js | 5 +- .../__tests__/fixtures/cloudflare/server.ts | 7 ++- .../deno/.vscode/resolve_npm_imports.json | 15 +++-- .../__tests__/fixtures/deno/app/root.tsx | 8 ++- .../fixtures/deno/app/routes/_index.tsx | 42 ++++++++++++++ .../__tests__/fixtures/deno/package.json | 11 ++-- .../__tests__/fixtures/deno/server.ts | 2 +- .../__tests__/fixtures/node/app/root.tsx | 8 ++- .../node/app/routes/{index.tsx => _index.tsx} | 7 ++- .../__tests__/fixtures/node/package.json | 16 +++--- .../__tests__/fixtures/node/remix.config.js | 4 +- packages/remix-dev/package.json | 1 - scripts/copy-templates-to-fixtures.sh | 17 ++++++ templates/arc/app/root.tsx | 2 +- templates/cloudflare-pages/app/root.tsx | 2 +- templates/cloudflare-workers/app/root.tsx | 2 +- templates/cloudflare-workers/remix.config.js | 4 +- templates/deno/app/root.tsx | 6 +- templates/deno/remix.config.js | 2 +- templates/deno/server.ts | 2 +- templates/express/app/root.tsx | 2 +- templates/express/remix.config.js | 4 +- templates/fly/app/root.tsx | 2 +- templates/fly/remix.config.js | 4 +- templates/remix-javascript/app/root.jsx | 2 +- templates/remix-javascript/remix.config.js | 2 +- templates/remix/app/root.tsx | 2 +- templates/remix/remix.config.js | 2 +- yarn.lock | 21 ++++--- 61 files changed, 584 insertions(+), 180 deletions(-) rename packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/index.tsx => integration/helpers/cf-template/app/routes/_index.tsx (77%) create mode 100644 integration/helpers/deno-template/app/routes/_index.tsx rename packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx => integration/helpers/node-template/app/routes/_index.tsx (87%) rename packages/remix-dev/__tests__/fixtures/cloudflare/{.eslintrc.js => .eslintrc.cjs} (100%) create mode 100644 packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/_index.tsx create mode 100644 packages/remix-dev/__tests__/fixtures/deno/app/routes/_index.tsx rename packages/remix-dev/__tests__/fixtures/node/app/routes/{index.tsx => _index.tsx} (87%) create mode 100644 scripts/copy-templates-to-fixtures.sh diff --git a/integration/cf-compiler-test.ts b/integration/cf-compiler-test.ts index 39e20139e9d..c6ae70fd4e4 100644 --- a/integration/cf-compiler-test.ts +++ b/integration/cf-compiler-test.ts @@ -34,25 +34,26 @@ test.describe("cloudflare compiler", () => { name: "remix-template-cloudflare-workers", private: true, sideEffects: false, - main: "build/index.js", type: "module", dependencies: { + "@cloudflare/kv-asset-handler": "0.0.0-local-version", "@remix-run/cloudflare": "0.0.0-local-version", - "@remix-run/cloudflare-workers": "0.0.0-local-version", "@remix-run/react": "0.0.0-local-version", isbot: "0.0.0-local-version", react: "0.0.0-local-version", "react-dom": "0.0.0-local-version", + "worker-pkg": "0.0.0-local-version", "browser-pkg": "0.0.0-local-version", "esm-only-pkg": "0.0.0-local-version", "cjs-only-pkg": "0.0.0-local-version", }, devDependencies: { + "@cloudflare/workers-types": "0.0.0-local-version", "@remix-run/dev": "0.0.0-local-version", - "@remix-run/eslint-config": "0.0.0-local-version", }, }), + "app/routes/_index.tsx": js` import fake from "worker-pkg"; import { content as browserPackage } from "browser-pkg"; diff --git a/integration/compiler-mjs-output-test.ts b/integration/compiler-mjs-output-test.ts index 5f0012a93f7..65d112ad9ea 100644 --- a/integration/compiler-mjs-output-test.ts +++ b/integration/compiler-mjs-output-test.ts @@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test"; import * as fs from "node:fs"; import * as path from "node:path"; -import { createFixtureProject, js } from "./helpers/create-fixture.js"; +import { createFixtureProject, js, json } from "./helpers/create-fixture.js"; let projectDir: string; @@ -16,36 +16,29 @@ test.beforeAll(async () => { serverBuildPath: "build/index.mjs", }; `, - "package.json": js` - { - "name": "remix-template-remix", - "private": true, - "sideEffects": false, - "type": "module", - "scripts": { - "build": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js build", - "dev": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js dev", - "start": "node ../../../build/node_modules/@remix-run/serve/dist/cli.js build" - }, - "dependencies": { - "@remix-run/node": "0.0.0-local-version", - "@remix-run/react": "0.0.0-local-version", - "@remix-run/serve": "0.0.0-local-version", - "isbot": "0.0.0-local-version", - "react": "0.0.0-local-version", - "react-dom": "0.0.0-local-version" - }, - "devDependencies": { - "@remix-run/dev": "0.0.0-local-version", - "@types/react": "0.0.0-local-version", - "@types/react-dom": "0.0.0-local-version", - "typescript": "0.0.0-local-version" - }, - "engines": { - "node": ">=18.0.0" - } - } - `, + "package.json": json({ + name: "remix-template-remix", + private: true, + sideEffects: false, + type: "module", + dependencies: { + "@remix-run/node": "0.0.0-local-version", + "@remix-run/react": "0.0.0-local-version", + "@remix-run/serve": "0.0.0-local-version", + isbot: "0.0.0-local-version", + react: "0.0.0-local-version", + "react-dom": "0.0.0-local-version", + }, + devDependencies: { + "@remix-run/dev": "0.0.0-local-version", + "@types/react": "0.0.0-local-version", + "@types/react-dom": "0.0.0-local-version", + typescript: "0.0.0-local-version", + }, + engines: { + node: ">=18.0.0", + }, + }), "app/routes/_index.tsx": js` import { json } from "@remix-run/node"; import { useLoaderData, Link } from "@remix-run/react"; diff --git a/integration/deno-compiler-test.ts b/integration/deno-compiler-test.ts index 506fabf6f62..6da8b70d59b 100644 --- a/integration/deno-compiler-test.ts +++ b/integration/deno-compiler-test.ts @@ -37,15 +37,16 @@ test.beforeAll(async () => { template: "deno-template", files: { "package.json": json({ + name: "remix-template-deno", private: true, sideEffects: false, - type: "module", dependencies: { "@remix-run/deno": "0.0.0-local-version", "@remix-run/react": "0.0.0-local-version", isbot: "0.0.0-local-version", react: "0.0.0-local-version", "react-dom": "0.0.0-local-version", + component: "0.0.0-local-version", "deno-pkg": "0.0.0-local-version", }, @@ -53,6 +54,7 @@ test.beforeAll(async () => { "@remix-run/dev": "0.0.0-local-version", }, }), + "app/routes/_index.tsx": js` import fake from "deno-pkg"; import { urlComponent } from "https://deno.land/x/component.ts"; diff --git a/integration/deterministic-build-output-test.ts b/integration/deterministic-build-output-test.ts index a3e9ef5fc8f..efb7b4d83d9 100644 --- a/integration/deterministic-build-output-test.ts +++ b/integration/deterministic-build-output-test.ts @@ -4,7 +4,12 @@ import fs from "node:fs"; import path from "node:path"; import type { FixtureInit } from "./helpers/create-fixture.js"; -import { createFixtureProject, js, css } from "./helpers/create-fixture.js"; +import { + createFixtureProject, + js, + css, + json, +} from "./helpers/create-fixture.js"; test("builds deterministically under different paths", async () => { // This test validates various flavors of remix virtual modules to ensure @@ -27,6 +32,34 @@ test("builds deterministically under different paths", async () => { // * vanillaExtractPlugin (via app/routes/foo.tsx' .css.ts file import) let init: FixtureInit = { files: { + "package.json": json({ + name: "remix-template-remix", + private: true, + sideEffects: false, + type: "module", + dependencies: { + "@remix-run/css-bundle": "0.0.0-local-version", + "@remix-run/node": "0.0.0-local-version", + "@remix-run/react": "0.0.0-local-version", + "@remix-run/serve": "0.0.0-local-version", + isbot: "0.0.0-local-version", + react: "0.0.0-local-version", + "react-dom": "0.0.0-local-version", + }, + devDependencies: { + "@remix-run/dev": "0.0.0-local-version", + "@types/react": "0.0.0-local-version", + "@types/react-dom": "0.0.0-local-version", + typescript: "0.0.0-local-version", + + "@vanilla-extract/css": "0.0.0-local-version", + "postcss-import": "0.0.0-local-version", + }, + engines: { + node: ">=18.0.0", + }, + }), + "postcss.config.js": js` export default { plugins: { diff --git a/integration/helpers/cf-template/app/root.tsx b/integration/helpers/cf-template/app/root.tsx index 1f082523e7b..68397b09d47 100644 --- a/integration/helpers/cf-template/app/root.tsx +++ b/integration/helpers/cf-template/app/root.tsx @@ -1,3 +1,5 @@ +import type { LinksFunction } from "@remix-run/cloudflare"; +import { cssBundleHref } from "@remix-run/css-bundle"; import { Links, LiveReload, @@ -7,12 +9,16 @@ import { ScrollRestoration, } from "@remix-run/react"; +export const links: LinksFunction = () => [ + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +]; + export default function App() { return ( - + diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/index.tsx b/integration/helpers/cf-template/app/routes/_index.tsx similarity index 77% rename from packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/index.tsx rename to integration/helpers/cf-template/app/routes/_index.tsx index cbca6124ea7..4aa6089f125 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/index.tsx +++ b/integration/helpers/cf-template/app/routes/_index.tsx @@ -1,6 +1,15 @@ +import type { MetaFunction } from "@remix-run/cloudflare"; + +export const meta: MetaFunction = () => { + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; +}; + export default function Index() { return ( -
+

Welcome to Remix

  • diff --git a/integration/helpers/cf-template/package.json b/integration/helpers/cf-template/package.json index 95528f2f2a4..3ceb2b28b65 100644 --- a/integration/helpers/cf-template/package.json +++ b/integration/helpers/cf-template/package.json @@ -2,12 +2,16 @@ "name": "remix-template-cloudflare-workers", "private": true, "sideEffects": false, - "main": "build/index.js", "type": "module", - "scripts": {}, + "scripts": { + "build": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js build", + "dev": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js dev --manual -c \"npm start\"", + "start": "node ../../../node_modules/wrangler/bin/wrangler.js dev ./build/index.js" + }, "dependencies": { + "@cloudflare/kv-asset-handler": "0.0.0-local-version", "@remix-run/cloudflare": "0.0.0-local-version", - "@remix-run/cloudflare-workers": "0.0.0-local-version", + "@remix-run/css-bundle": "0.0.0-local-version", "@remix-run/react": "0.0.0-local-version", "isbot": "0.0.0-local-version", "react": "0.0.0-local-version", @@ -18,7 +22,8 @@ "@remix-run/dev": "0.0.0-local-version", "@types/react": "0.0.0-local-version", "@types/react-dom": "0.0.0-local-version", - "typescript": "0.0.0-local-version" + "typescript": "0.0.0-local-version", + "wrangler": "0.0.0-local-version" }, "engines": { "node": ">=18.0.0" diff --git a/integration/helpers/cf-template/remix.config.js b/integration/helpers/cf-template/remix.config.js index a192bd98314..d01906d98be 100644 --- a/integration/helpers/cf-template/remix.config.js +++ b/integration/helpers/cf-template/remix.config.js @@ -2,18 +2,21 @@ export default { ignoredRouteFiles: ["**/.*"], server: "./server.ts", - serverConditions: ["worker"], - serverDependenciesToBundle: "all", + serverConditions: ["workerd", "worker", "browser"], + serverDependenciesToBundle: [ + // bundle everything except the virtual module for the static content manifest provided by wrangler + /^(?!.*\b__STATIC_CONTENT_MANIFEST\b).*$/, + ], serverMainFields: ["browser", "module", "main"], serverMinify: true, serverModuleFormat: "esm", serverPlatform: "neutral", // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", - // !!! Don't adust this without changing the code that overwrites this + // !!! Don't adjust this without changing the code that overwrites this // in createFixtureProject() ...global.INJECTED_FIXTURE_REMIX_CONFIG, }; diff --git a/integration/helpers/cf-template/remix.env.d.ts b/integration/helpers/cf-template/remix.env.d.ts index 71ee668d012..b5be9ba3bbe 100644 --- a/integration/helpers/cf-template/remix.env.d.ts +++ b/integration/helpers/cf-template/remix.env.d.ts @@ -1,3 +1,8 @@ /// -/// +/// /// + +declare module "__STATIC_CONTENT_MANIFEST" { + const manifest: string; + export default manifest; +} diff --git a/integration/helpers/cf-template/server.ts b/integration/helpers/cf-template/server.ts index 49eda486cf8..7408ed39813 100644 --- a/integration/helpers/cf-template/server.ts +++ b/integration/helpers/cf-template/server.ts @@ -1,4 +1,53 @@ -import { createEventHandler } from "@remix-run/cloudflare-workers"; +import { getAssetFromKV } from "@cloudflare/kv-asset-handler"; +import type { AppLoadContext } from "@remix-run/cloudflare"; +import { createRequestHandler, logDevReady } from "@remix-run/cloudflare"; import * as build from "@remix-run/dev/server-build"; +import __STATIC_CONTENT_MANIFEST from "__STATIC_CONTENT_MANIFEST"; -addEventListener("fetch", createEventHandler({ build, mode: build.mode })); +const MANIFEST = JSON.parse(__STATIC_CONTENT_MANIFEST); +const handleRemixRequest = createRequestHandler(build, process.env.NODE_ENV); + +if (process.env.NODE_ENV === "development") { + logDevReady(build); +} + +export default { + async fetch( + request: Request, + env: { + __STATIC_CONTENT: Fetcher; + }, + ctx: ExecutionContext + ): Promise { + try { + const url = new URL(request.url); + const ttl = url.pathname.startsWith("/build/") + ? 60 * 60 * 24 * 365 // 1 year + : 60 * 5; // 5 minutes + return await getAssetFromKV( + { + request, + waitUntil: ctx.waitUntil.bind(ctx), + } as FetchEvent, + { + ASSET_NAMESPACE: env.__STATIC_CONTENT, + ASSET_MANIFEST: MANIFEST, + cacheControl: { + browserTTL: ttl, + edgeTTL: ttl, + }, + } + ); + } catch (error) {} + + try { + const loadContext: AppLoadContext = { + env, + }; + return await handleRemixRequest(request, loadContext); + } catch (error) { + console.log(error); + return new Response("An unexpected error occurred", { status: 500 }); + } + }, +}; diff --git a/integration/helpers/cf-template/wrangler.toml b/integration/helpers/cf-template/wrangler.toml index cbbc0cf510c..b4ddc4387f8 100644 --- a/integration/helpers/cf-template/wrangler.toml +++ b/integration/helpers/cf-template/wrangler.toml @@ -1,19 +1,9 @@ name = "remix-cloudflare-workers" -type = "javascript" -compatibility_date = "2022-04-05" -compatibility_flags = ["streams_enable_constructors"] -zone_id = "" -account_id = "" -route = "" workers_dev = true +main = "./build/index.js" +# https://developers.cloudflare.com/workers/platform/compatibility-dates +compatibility_date = "2023-04-20" [site] -bucket = "./public" -entry-point = "." - -[build] -command = "npm run build" - -[build.upload] -format="service-worker" + bucket = "./public" diff --git a/integration/helpers/deno-template/app/root.tsx b/integration/helpers/deno-template/app/root.tsx index a6a08d93909..60ddcdf8f82 100644 --- a/integration/helpers/deno-template/app/root.tsx +++ b/integration/helpers/deno-template/app/root.tsx @@ -1,3 +1,5 @@ +import { cssBundleHref } from "@remix-run/css-bundle"; +import type { LinksFunction } from "@remix-run/deno"; import { Links, LiveReload, @@ -8,12 +10,16 @@ import { } from "@remix-run/react"; import * as React from "react"; +export const links: LinksFunction = () => [ + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +]; + export default function App() { return ( - + diff --git a/integration/helpers/deno-template/app/routes/_index.tsx b/integration/helpers/deno-template/app/routes/_index.tsx new file mode 100644 index 00000000000..2e62fab6222 --- /dev/null +++ b/integration/helpers/deno-template/app/routes/_index.tsx @@ -0,0 +1,42 @@ +import * as React from "react"; +import type { MetaFunction } from "@remix-run/deno"; + +export const meta: MetaFunction = () => { + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; +}; + +export default function Index() { + return ( + + ); +} diff --git a/integration/helpers/deno-template/package.json b/integration/helpers/deno-template/package.json index 2526103e527..23ea8c301b9 100644 --- a/integration/helpers/deno-template/package.json +++ b/integration/helpers/deno-template/package.json @@ -3,7 +3,15 @@ "private": true, "sideEffects": false, "type": "module", + "scripts": { + "build": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js build", + "dev": "node ../../../node_modules/npm-run-all/bin/npm-run-all/index.js build --parallel \"dev:*\"", + "dev:deno": "node ../../../node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development deno run --unstable --watch --allow-net --allow-read --allow-env ./build/index.js", + "dev:remix": "node ../../../build/node_modules/@remix-run/dev/dist/cli.js watch", + "start": "node ../../../node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production deno run --unstable --allow-net --allow-read --allow-env ./build/index.js" + }, "dependencies": { + "@remix-run/css-bundle": "0.0.0-local-version", "@remix-run/deno": "0.0.0-local-version", "@remix-run/react": "0.0.0-local-version", "isbot": "0.0.0-local-version", @@ -11,7 +19,9 @@ "react-dom": "0.0.0-local-version" }, "devDependencies": { - "@remix-run/dev": "0.0.0-local-version" + "@remix-run/dev": "0.0.0-local-version", + "cross-env": "0.0.0-local-version", + "npm-run-all": "0.0.0-local-version" }, "engines": { "node": ">=18.0.0" diff --git a/integration/helpers/deno-template/remix.config.js b/integration/helpers/deno-template/remix.config.js index d74be09dad3..a6b9904d640 100644 --- a/integration/helpers/deno-template/remix.config.js +++ b/integration/helpers/deno-template/remix.config.js @@ -1,5 +1,5 @@ /** @type {import('@remix-run/dev').AppConfig} */ -export default { +module.exports = { ignoredRouteFiles: ["**/.*"], server: "./server.ts", serverConditions: ["deno", "worker"], @@ -9,10 +9,10 @@ export default { serverPlatform: "neutral", // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", - // !!! Don't adust this without changing the code that overwrites this + // !!! Don't adjust this without changing the code that overwrites this // in createFixtureProject() ...global.INJECTED_FIXTURE_REMIX_CONFIG, }; diff --git a/integration/helpers/node-template/app/root.tsx b/integration/helpers/node-template/app/root.tsx index 1f082523e7b..b46b8fb15bc 100644 --- a/integration/helpers/node-template/app/root.tsx +++ b/integration/helpers/node-template/app/root.tsx @@ -1,3 +1,5 @@ +import { cssBundleHref } from "@remix-run/css-bundle"; +import type { LinksFunction } from "@remix-run/node"; import { Links, LiveReload, @@ -7,12 +9,16 @@ import { ScrollRestoration, } from "@remix-run/react"; +export const links: LinksFunction = () => [ + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +]; + export default function App() { return ( - + diff --git a/packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx b/integration/helpers/node-template/app/routes/_index.tsx similarity index 87% rename from packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx rename to integration/helpers/node-template/app/routes/_index.tsx index 119e458e105..5347369230e 100644 --- a/packages/remix-dev/__tests__/fixtures/deno/app/routes/index.tsx +++ b/integration/helpers/node-template/app/routes/_index.tsx @@ -1,13 +1,15 @@ -import * as React from "react"; import type { MetaFunction } from "@remix-run/node"; export const meta: MetaFunction = () => { - return [{ title: "New Remix App" }]; + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; }; export default function Index() { return ( -
    +

    Welcome to Remix

    • diff --git a/integration/helpers/node-template/package.json b/integration/helpers/node-template/package.json index 05953d0ec46..120aa54ea32 100644 --- a/integration/helpers/node-template/package.json +++ b/integration/helpers/node-template/package.json @@ -9,6 +9,7 @@ "start": "node ../../../build/node_modules/@remix-run/serve/dist/cli.js ./build/index.js" }, "dependencies": { + "@remix-run/css-bundle": "0.0.0-local-version", "@remix-run/node": "0.0.0-local-version", "@remix-run/react": "0.0.0-local-version", "@remix-run/serve": "0.0.0-local-version", @@ -20,7 +21,6 @@ "@remix-run/dev": "0.0.0-local-version", "@types/react": "0.0.0-local-version", "@types/react-dom": "0.0.0-local-version", - "@vanilla-extract/css": "^1.10.0", "typescript": "0.0.0-local-version" }, "engines": { diff --git a/integration/helpers/node-template/remix.config.js b/integration/helpers/node-template/remix.config.js index a340a1c21d6..3d0f065c1d9 100644 --- a/integration/helpers/node-template/remix.config.js +++ b/integration/helpers/node-template/remix.config.js @@ -3,10 +3,10 @@ export default { ignoredRouteFiles: ["**/.*"], // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", - // !!! Don't adust this without changing the code that overwrites this + // !!! Don't adjust this without changing the code that overwrites this // in createFixtureProject() ...global.INJECTED_FIXTURE_REMIX_CONFIG, }; diff --git a/integration/hmr-test.ts b/integration/hmr-test.ts index dfec1d43ad8..e411195488e 100644 --- a/integration/hmr-test.ts +++ b/integration/hmr-test.ts @@ -177,8 +177,9 @@ whatsup `, }; -let packageJson = (options: { devScript: string; deps?: string[] }) => { - return json({ +let packageJson = (options: { devScript: string; deps?: string[] }) => + json({ + name: "remix-template-express", private: true, sideEffects: false, type: "module", @@ -191,12 +192,12 @@ let packageJson = (options: { devScript: string; deps?: string[] }) => { "@remix-run/express", "@remix-run/node", "@remix-run/react", - "cross-env", "express", "isbot", - "postcss-import", "react", "react-dom", + + "postcss-import", "tailwindcss", ]), devDependencies: deps([ @@ -209,12 +210,11 @@ let packageJson = (options: { devScript: string; deps?: string[] }) => { node: ">=18.0.0", }, }); -}; let customServer = (options: { appPort: number; devReady: string }) => { return js` - import path from "path"; - import url from "url"; + import path from "node:path"; + import url from "node:url"; import express from "express"; import { createRequestHandler } from "@remix-run/express"; import { ${options.devReady}, installGlobals } from "@remix-run/node"; @@ -400,7 +400,7 @@ async function dev( `; fs.writeFileSync(importedStylePath, newImportedStyle); - // // make changes to imported side-effect styles + // // make changes to imported side effect styles let newImportedSideEffectStyle = ` .importedSideEffectStyle { font-size: 32px; diff --git a/integration/package.json b/integration/package.json index 3dbc1ca591c..ea0d8d5eb51 100644 --- a/integration/package.json +++ b/integration/package.json @@ -1,3 +1,38 @@ { - "type": "module" + "name": "integration-tests", + "version": "0.0.0-local-version", + "private": true, + "description": "deps needed for integration tests", + "type": "module", + "scripts": {}, + "dependencies": { + "@cloudflare/kv-asset-handler": "^0.3.0", + "@cloudflare/workers-types": "^4.20230518.0", + "@playwright/test": "^1.33.0", + "@vanilla-extract/css": "^1.10.0", + "cheerio": "^1.0.0-rc.12", + "cross-env": "^7.0.3", + "cross-spawn": "^7.0.3", + "dedent": "^0.7.0", + "execa": "^5.1.1", + "express": "^4.17.1", + "fs-extra": "^10.0.0", + "get-port": "^5.1.1", + "glob": "8.0.3", + "globby": "^11.1.0", + "isbot": "^3.6.8", + "npm-run-all": "^4.1.5", + "pidtree": "^0.6.0", + "postcss": "^8.4.19", + "postcss-import": "^15.1.0", + "prettier": "^2.7.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "serialize-javascript": "^6.0.1", + "shelljs": "^0.8.5", + "strip-indent": "^3.0.0", + "tailwindcss": "^3.3.0", + "type-fest": "^4.0.0", + "typescript": "^5.1.0" + } } diff --git a/integration/postcss-test.ts b/integration/postcss-test.ts index 2eb49cb1deb..fa13186e861 100644 --- a/integration/postcss-test.ts +++ b/integration/postcss-test.ts @@ -8,6 +8,7 @@ import { createFixture, css, js, + json, } from "./helpers/create-fixture.js"; const TEST_PADDING_VALUE = "20px"; @@ -34,6 +35,34 @@ test.describe("PostCSS enabled", () => { test.beforeAll(async () => { fixture = await createFixture({ files: { + "package.json": json({ + name: "remix-template-remix", + private: true, + sideEffects: false, + type: "module", + dependencies: { + "@remix-run/css-bundle": "0.0.0-local-version", + "@remix-run/node": "0.0.0-local-version", + "@remix-run/react": "0.0.0-local-version", + "@remix-run/serve": "0.0.0-local-version", + isbot: "0.0.0-local-version", + react: "0.0.0-local-version", + "react-dom": "0.0.0-local-version", + }, + devDependencies: { + "@remix-run/dev": "0.0.0-local-version", + "@types/react": "0.0.0-local-version", + "@types/react-dom": "0.0.0-local-version", + typescript: "0.0.0-local-version", + + "@vanilla-extract/css": "0.0.0-local-version", + tailwindcss: "0.0.0-local-version", + }, + engines: { + node: ">=18.0.0", + }, + }), + // We provide a test plugin that replaces the strings // "TEST_PADDING_VALUE" and "TEST_POSTCSS_CONTEXT". // This lets us assert that the plugin is being run @@ -353,7 +382,7 @@ test.describe("PostCSS disabled", () => { postcss: false, }, files: { - "postcss.config.js": js` + "postcss.config.cjs": js` module.exports = (ctx) => ({ plugins: [ { diff --git a/integration/tailwind-test.ts b/integration/tailwind-test.ts index 5b89fd140f1..4f2f91ce155 100644 --- a/integration/tailwind-test.ts +++ b/integration/tailwind-test.ts @@ -7,6 +7,7 @@ import { createFixture, css, js, + json, } from "./helpers/create-fixture.js"; const TEST_PADDING_VALUE = "20px"; @@ -44,6 +45,34 @@ function runTests(ext: typeof extensions[number]) { test.beforeAll(async () => { fixture = await createFixture({ files: { + "package.json": json({ + name: "remix-template-remix", + private: true, + sideEffects: false, + type: "module", + dependencies: { + "@remix-run/css-bundle": "0.0.0-local-version", + "@remix-run/node": "0.0.0-local-version", + "@remix-run/react": "0.0.0-local-version", + "@remix-run/serve": "0.0.0-local-version", + isbot: "0.0.0-local-version", + react: "0.0.0-local-version", + "react-dom": "0.0.0-local-version", + }, + devDependencies: { + "@remix-run/dev": "0.0.0-local-version", + "@types/react": "0.0.0-local-version", + "@types/react-dom": "0.0.0-local-version", + typescript: "0.0.0-local-version", + + "@vanilla-extract/css": "0.0.0-local-version", + tailwindcss: "0.0.0-local-version", + }, + engines: { + node: ">=18.0.0", + }, + }), + [tailwindConfigName]: tailwindConfig, "app/tailwind.css": css` diff --git a/integration/vanilla-extract-test.ts b/integration/vanilla-extract-test.ts index bb31ae67995..a1823c6f17c 100644 --- a/integration/vanilla-extract-test.ts +++ b/integration/vanilla-extract-test.ts @@ -6,6 +6,7 @@ import { createAppFixture, createFixture, js, + json, } from "./helpers/create-fixture.js"; const TEST_PADDING_VALUE = "20px"; @@ -17,6 +18,33 @@ test.describe("Vanilla Extract", () => { test.beforeAll(async () => { fixture = await createFixture({ files: { + "package.json": json({ + name: "remix-template-remix", + private: true, + sideEffects: false, + type: "module", + dependencies: { + "@remix-run/css-bundle": "0.0.0-local-version", + "@remix-run/node": "0.0.0-local-version", + "@remix-run/react": "0.0.0-local-version", + "@remix-run/serve": "0.0.0-local-version", + isbot: "0.0.0-local-version", + react: "0.0.0-local-version", + "react-dom": "0.0.0-local-version", + }, + devDependencies: { + "@remix-run/dev": "0.0.0-local-version", + "@types/react": "0.0.0-local-version", + "@types/react-dom": "0.0.0-local-version", + typescript: "0.0.0-local-version", + + "@vanilla-extract/css": "0.0.0-local-version", + }, + engines: { + node: ">=18.0.0", + }, + }), + "app/root.tsx": js` import { Links, Outlet } from "@remix-run/react"; import { cssBundleHref } from "@remix-run/css-bundle"; diff --git a/package.json b/package.json index aa73cead05d..4cf6784e521 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "private": true, "license": "MIT", "workspaces": [ + "integration", "packages/create-remix", "packages/remix", "packages/remix-architect", @@ -61,7 +62,6 @@ "@octokit/graphql": "^4.8.0", "@octokit/plugin-paginate-rest": "^2.17.0", "@octokit/rest": "^18.12.0", - "@playwright/test": "1.33.0", "@remix-run/changelog-github": "^0.0.5", "@rollup/plugin-babel": "^5.2.2", "@rollup/plugin-json": "^5.0.0", @@ -84,35 +84,24 @@ "@types/semver": "^7.3.4", "@types/serialize-javascript": "^5.0.2", "@types/ssri": "^7.1.0", - "@vanilla-extract/css": "^1.10.0", "babel-jest": "^27.5.1", "babel-plugin-transform-remove-console": "^6.9.4", "chalk": "^4.1.2", - "cheerio": "^1.0.0-rc.12", "concurrently": "^7.0.0", - "cross-env": "^7.0.3", "cross-spawn": "^7.0.3", "cypress": "^9.6.0", - "dedent": "^0.7.0", "eslint": "^8.23.1", "eslint-plugin-markdown": "^2.2.1", "eslint-plugin-prefer-let": "^3.0.1", - "execa": "5.1.1", - "express": "^4.17.1", "front-matter": "^4.0.2", - "get-port": "5.1.1", "glob": "8.0.3", - "isbot": "^3.5.1", "jest": "^27.5.1", "jest-watch-select-projects": "^2.0.0", "jest-watch-typeahead": "^0.6.5", "jsonfile": "^6.0.1", "lodash": "^4.17.21", "mime": "^3.0.0", - "npm-run-all": "^4.1.5", "patch-package": "^6.5.0", - "pidtree": "^0.6.0", - "postcss-import": "^15.1.0", "prettier": "^2.7.1", "prompt-confirm": "^2.0.4", "react": "^18.2.0", @@ -125,13 +114,9 @@ "rollup": "^2.36.1", "rollup-plugin-copy": "^3.3.0", "semver": "^7.3.7", - "serialize-javascript": "^6.0.1", "simple-git": "^3.16.0", "sort-package-json": "^1.55.0", - "strip-indent": "^3.0.0", - "tailwindcss": "^3.3.0", "to-vfile": "7.2.3", - "type-fest": "^4.0.0", "typescript": "^5.1.0", "unified": "^10.1.2", "unist-util-remove": "^3.1.0", diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/.eslintrc.js b/packages/remix-dev/__tests__/fixtures/cloudflare/.eslintrc.cjs similarity index 100% rename from packages/remix-dev/__tests__/fixtures/cloudflare/.eslintrc.js rename to packages/remix-dev/__tests__/fixtures/cloudflare/.eslintrc.cjs diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/.gitignore b/packages/remix-dev/__tests__/fixtures/cloudflare/.gitignore index ccbe641499b..7c0736ebf5a 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/.gitignore +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/.gitignore @@ -4,4 +4,4 @@ node_modules /functions/\[\[path\]\].js /functions/\[\[path\]\].js.map /public/build -.env +.dev.vars diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx b/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx index 1f082523e7b..68397b09d47 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/app/root.tsx @@ -1,3 +1,5 @@ +import type { LinksFunction } from "@remix-run/cloudflare"; +import { cssBundleHref } from "@remix-run/css-bundle"; import { Links, LiveReload, @@ -7,12 +9,16 @@ import { ScrollRestoration, } from "@remix-run/react"; +export const links: LinksFunction = () => [ + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +]; + export default function App() { return ( - + diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/_index.tsx b/packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/_index.tsx new file mode 100644 index 00000000000..4aa6089f125 --- /dev/null +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/app/routes/_index.tsx @@ -0,0 +1,41 @@ +import type { MetaFunction } from "@remix-run/cloudflare"; + +export const meta: MetaFunction = () => { + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; +}; + +export default function Index() { + return ( + + ); +} diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/package.json b/packages/remix-dev/__tests__/fixtures/cloudflare/package.json index ed124986811..b6125b5864f 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/package.json +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/package.json @@ -1,34 +1,31 @@ { "private": true, "sideEffects": false, + "type": "module", "scripts": { "build": "remix build", - "dev:remix": "remix watch", - "dev:wrangler": "cross-env NODE_ENV=development npm run wrangler", - "dev": "remix build && run-p \"dev:*\"", - "start": "cross-env NODE_ENV=production npm run wrangler", - "typecheck": "tsc", - "wrangler": "wrangler pages dev ./public" + "dev": "remix dev --manual -c \"npm run start\"", + "start": "wrangler pages dev --compatibility-date=2023-06-21 ./public", + "typecheck": "tsc" }, "dependencies": { - "@remix-run/cloudflare": "^1.12.0", - "@remix-run/cloudflare-pages": "^1.12.0", - "@remix-run/react": "^1.12.0", - "cross-env": "^7.0.3", - "isbot": "^3.6.5", + "@remix-run/cloudflare": "*", + "@remix-run/cloudflare-pages": "*", + "@remix-run/css-bundle": "*", + "@remix-run/react": "*", + "isbot": "^3.6.8", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { - "@cloudflare/workers-types": "^3.18.0", - "@remix-run/dev": "^1.12.0", - "@remix-run/eslint-config": "^1.12.0", + "@cloudflare/workers-types": "^4.20230518.0", + "@remix-run/dev": "*", + "@remix-run/eslint-config": "*", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", - "eslint": "^8.27.0", - "npm-run-all": "^4.1.5", - "typescript": "^5.1.6", - "wrangler": "^2.2.1" + "eslint": "^8.38.0", + "typescript": "^5.1.0", + "wrangler": "^3.1.1" }, "engines": { "node": ">=18.0.0" diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/public/_headers b/packages/remix-dev/__tests__/fixtures/cloudflare/public/_headers index 2fb104e7af1..c5129f35cd3 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/public/_headers +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/public/_headers @@ -1,2 +1,4 @@ +/favicon.ico + Cache-Control: public, max-age=3600, s-maxage=3600 /build/* - Cache-Control: public, max-age=31536000, s-maxage=31536000 + Cache-Control: public, max-age=31536000, immutable diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/public/_routes.json b/packages/remix-dev/__tests__/fixtures/cloudflare/public/_routes.json index 5826b059c08..4b57270dae9 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/public/_routes.json +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/public/_routes.json @@ -1,5 +1,5 @@ { "version": 1, "include": ["/*"], - "exclude": ["/build/*"] + "exclude": ["/favicon.ico", "/build/*"] } diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/remix.config.js b/packages/remix-dev/__tests__/fixtures/cloudflare/remix.config.js index dd63725771c..e35ffadbb5d 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/remix.config.js +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/remix.config.js @@ -1,9 +1,9 @@ /** @type {import('@remix-run/dev').AppConfig} */ -module.exports = { +export default { ignoredRouteFiles: ["**/.*"], server: "./server.ts", serverBuildPath: "functions/[[path]].js", - serverConditions: ["worker"], + serverConditions: ["workerd", "worker", "browser"], serverDependenciesToBundle: "all", serverMainFields: ["browser", "module", "main"], serverMinify: true, @@ -11,6 +11,5 @@ module.exports = { serverPlatform: "neutral", // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "functions/[[path]].js", // publicPath: "/build/", }; diff --git a/packages/remix-dev/__tests__/fixtures/cloudflare/server.ts b/packages/remix-dev/__tests__/fixtures/cloudflare/server.ts index b2006d7930a..56df96a4aa7 100644 --- a/packages/remix-dev/__tests__/fixtures/cloudflare/server.ts +++ b/packages/remix-dev/__tests__/fixtures/cloudflare/server.ts @@ -1,8 +1,13 @@ +import { logDevReady } from "@remix-run/cloudflare"; import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages"; import * as build from "@remix-run/dev/server-build"; +if (process.env.NODE_ENV === "development") { + logDevReady(build); +} + export const onRequest = createPagesFunctionHandler({ build, - getLoadContext: (context) => context.env, + getLoadContext: (context) => ({ env: context.env }), mode: build.mode, }); diff --git a/packages/remix-dev/__tests__/fixtures/deno/.vscode/resolve_npm_imports.json b/packages/remix-dev/__tests__/fixtures/deno/.vscode/resolve_npm_imports.json index a99a407595b..ca2ae22b5d0 100644 --- a/packages/remix-dev/__tests__/fixtures/deno/.vscode/resolve_npm_imports.json +++ b/packages/remix-dev/__tests__/fixtures/deno/.vscode/resolve_npm_imports.json @@ -7,13 +7,16 @@ "Deno-only dependencies may be imported via URL imports (without using import maps)." ], "imports": { + "@remix-run/css-bundle": "https://esm.sh/@remix-run/css-bundle@1.16.0", "// `@remix-run/deno` code is already a Deno module, so just get types for it directly from `node_modules/`": "", "@remix-run/deno": "../node_modules/@remix-run/deno/index.ts", - "@remix-run/server-runtime": "https://esm.sh/@remix-run/server-runtime@1.9.0", - "@remix-run/dev/server-build": "https://esm.sh/@remix-run/dev@1.9.0/server-build", - "@remix-run/react": "https://esm.sh/@remix-run/react@1.9.0", - "react": "https://esm.sh/react@18.2.0", - "react-dom": "https://esm.sh/react-dom@18.2.0", - "react-dom/server": "https://esm.sh/react-dom@18.2.0/server" + "@remix-run/dev/server-build": "https://esm.sh/@remix-run/dev@1.16.0/server-build", + "@remix-run/react": "https://esm.sh/@remix-run/react@1.16.0", + "@remix-run/server-runtime": "https://esm.sh/@remix-run/server-runtime@1.16.0", + "isbot": "https://esm.sh/isbot@^3.6.8", + "react": "https://esm.sh/react@^18.2.0", + "react-dom": "https://esm.sh/react-dom@^18.2.0", + "react-dom/client": "https://esm.sh/react-dom@^18.2.0/client", + "react-dom/server": "https://esm.sh/react-dom@^18.2.0/server" } } diff --git a/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx b/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx index a6a08d93909..60ddcdf8f82 100644 --- a/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx +++ b/packages/remix-dev/__tests__/fixtures/deno/app/root.tsx @@ -1,3 +1,5 @@ +import { cssBundleHref } from "@remix-run/css-bundle"; +import type { LinksFunction } from "@remix-run/deno"; import { Links, LiveReload, @@ -8,12 +10,16 @@ import { } from "@remix-run/react"; import * as React from "react"; +export const links: LinksFunction = () => [ + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +]; + export default function App() { return ( - + diff --git a/packages/remix-dev/__tests__/fixtures/deno/app/routes/_index.tsx b/packages/remix-dev/__tests__/fixtures/deno/app/routes/_index.tsx new file mode 100644 index 00000000000..2e62fab6222 --- /dev/null +++ b/packages/remix-dev/__tests__/fixtures/deno/app/routes/_index.tsx @@ -0,0 +1,42 @@ +import * as React from "react"; +import type { MetaFunction } from "@remix-run/deno"; + +export const meta: MetaFunction = () => { + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; +}; + +export default function Index() { + return ( + + ); +} diff --git a/packages/remix-dev/__tests__/fixtures/deno/package.json b/packages/remix-dev/__tests__/fixtures/deno/package.json index cf4c121b700..476a4bc088f 100644 --- a/packages/remix-dev/__tests__/fixtures/deno/package.json +++ b/packages/remix-dev/__tests__/fixtures/deno/package.json @@ -4,7 +4,7 @@ "scripts": { "build": "remix build", "deploy": "deployctl deploy --prod --include=build,public --project= ./build/index.js", - "dev": "remix build && run-p \"dev:*\"", + "dev": "npm-run-all build --parallel \"dev:*\"", "dev:deno": "cross-env NODE_ENV=development deno run --unstable --watch --allow-net --allow-read --allow-env ./build/index.js", "dev:remix": "remix watch", "format": "deno fmt --ignore=node_modules,build,public/build", @@ -13,14 +13,15 @@ "typecheck": "deno check" }, "dependencies": { - "@remix-run/deno": "^1.12.0", - "@remix-run/react": "^1.12.0", - "isbot": "^3.6.5", + "@remix-run/css-bundle": "*", + "@remix-run/deno": "*", + "@remix-run/react": "*", + "isbot": "^3.6.8", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { - "@remix-run/dev": "^1.12.0", + "@remix-run/dev": "*", "cross-env": "^7.0.3", "npm-run-all": "^4.1.5" }, diff --git a/packages/remix-dev/__tests__/fixtures/deno/server.ts b/packages/remix-dev/__tests__/fixtures/deno/server.ts index 86a2642804e..943b4f0616e 100644 --- a/packages/remix-dev/__tests__/fixtures/deno/server.ts +++ b/packages/remix-dev/__tests__/fixtures/deno/server.ts @@ -5,8 +5,8 @@ import * as build from "@remix-run/dev/server-build"; const remixHandler = createRequestHandlerWithStaticFiles({ build, - mode: build.mode, getLoadContext: () => ({}), + mode: build.mode, }); const port = Number(Deno.env.get("PORT")) || 8000; diff --git a/packages/remix-dev/__tests__/fixtures/node/app/root.tsx b/packages/remix-dev/__tests__/fixtures/node/app/root.tsx index 1f082523e7b..b46b8fb15bc 100644 --- a/packages/remix-dev/__tests__/fixtures/node/app/root.tsx +++ b/packages/remix-dev/__tests__/fixtures/node/app/root.tsx @@ -1,3 +1,5 @@ +import { cssBundleHref } from "@remix-run/css-bundle"; +import type { LinksFunction } from "@remix-run/node"; import { Links, LiveReload, @@ -7,12 +9,16 @@ import { ScrollRestoration, } from "@remix-run/react"; +export const links: LinksFunction = () => [ + ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), +]; + export default function App() { return ( - + diff --git a/packages/remix-dev/__tests__/fixtures/node/app/routes/index.tsx b/packages/remix-dev/__tests__/fixtures/node/app/routes/_index.tsx similarity index 87% rename from packages/remix-dev/__tests__/fixtures/node/app/routes/index.tsx rename to packages/remix-dev/__tests__/fixtures/node/app/routes/_index.tsx index f024a40f924..5347369230e 100644 --- a/packages/remix-dev/__tests__/fixtures/node/app/routes/index.tsx +++ b/packages/remix-dev/__tests__/fixtures/node/app/routes/_index.tsx @@ -1,12 +1,15 @@ import type { MetaFunction } from "@remix-run/node"; export const meta: MetaFunction = () => { - return [{ title: "New Remix App" }]; + return [ + { title: "New Remix App" }, + { name: "description", content: "Welcome to Remix!" }, + ]; }; export default function Index() { return ( -
      +

      Welcome to Remix

      • diff --git a/packages/remix-dev/__tests__/fixtures/node/package.json b/packages/remix-dev/__tests__/fixtures/node/package.json index 65714ad2302..b79f377eec7 100644 --- a/packages/remix-dev/__tests__/fixtures/node/package.json +++ b/packages/remix-dev/__tests__/fixtures/node/package.json @@ -1,6 +1,7 @@ { "private": true, "sideEffects": false, + "type": "module", "scripts": { "build": "remix build", "dev": "remix dev", @@ -8,19 +9,20 @@ "typecheck": "tsc" }, "dependencies": { - "@remix-run/node": "^1.12.0", - "@remix-run/react": "^1.12.0", - "@remix-run/serve": "^1.12.0", - "isbot": "^3.6.5", + "@remix-run/css-bundle": "*", + "@remix-run/node": "*", + "@remix-run/react": "*", + "@remix-run/serve": "*", + "isbot": "^3.6.8", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { - "@remix-run/dev": "^1.12.0", - "@remix-run/eslint-config": "^1.12.0", + "@remix-run/dev": "*", + "@remix-run/eslint-config": "*", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", - "eslint": "^8.27.0", + "eslint": "^8.38.0", "typescript": "^5.1.6" }, "engines": { diff --git a/packages/remix-dev/__tests__/fixtures/node/remix.config.js b/packages/remix-dev/__tests__/fixtures/node/remix.config.js index adf2a0b5d3e..7fac2d305eb 100644 --- a/packages/remix-dev/__tests__/fixtures/node/remix.config.js +++ b/packages/remix-dev/__tests__/fixtures/node/remix.config.js @@ -1,8 +1,8 @@ /** @type {import('@remix-run/dev').AppConfig} */ -module.exports = { +export default { ignoredRouteFiles: ["**/.*"], // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", }; diff --git a/packages/remix-dev/package.json b/packages/remix-dev/package.json index 2dd28faa7b1..129f287466b 100644 --- a/packages/remix-dev/package.json +++ b/packages/remix-dev/package.json @@ -84,7 +84,6 @@ "esbuild-register": "^3.3.2", "fast-glob": "3.2.11", "msw": "^1.2.3", - "shelljs": "^0.8.5", "strip-ansi": "^6.0.1", "tiny-invariant": "^1.2.0" }, diff --git a/scripts/copy-templates-to-fixtures.sh b/scripts/copy-templates-to-fixtures.sh new file mode 100644 index 00000000000..3b46687aa69 --- /dev/null +++ b/scripts/copy-templates-to-fixtures.sh @@ -0,0 +1,17 @@ +#!/bin/bash + +set -x + +cp -r templates/cloudflare-pages/* packages/remix-dev/__tests__/fixtures/cloudflare/ +rm -f packages/remix-dev/__tests__/fixtures/cloudflare/app/entry.client.tsx +rm -f packages/remix-dev/__tests__/fixtures/cloudflare/app/entry.server.tsx + +cp -r templates/deno/* packages/remix-dev/__tests__/fixtures/deno/ +rm -f packages/remix-dev/__tests__/fixtures/deno/app/entry.client.tsx +rm -f packages/remix-dev/__tests__/fixtures/deno/app/entry.server.tsx + +cp -r templates/remix/* packages/remix-dev/__tests__/fixtures/node/ +rm -f packages/remix-dev/__tests__/fixtures/node/app/entry.client.tsx +rm -f packages/remix-dev/__tests__/fixtures/node/app/entry.server.tsx + +set +x diff --git a/templates/arc/app/root.tsx b/templates/arc/app/root.tsx index f10a63cf481..65d89ed3100 100644 --- a/templates/arc/app/root.tsx +++ b/templates/arc/app/root.tsx @@ -18,7 +18,7 @@ export default function App() { - + diff --git a/templates/cloudflare-pages/app/root.tsx b/templates/cloudflare-pages/app/root.tsx index 0294fbd3907..68397b09d47 100644 --- a/templates/cloudflare-pages/app/root.tsx +++ b/templates/cloudflare-pages/app/root.tsx @@ -18,7 +18,7 @@ export default function App() { - + diff --git a/templates/cloudflare-workers/app/root.tsx b/templates/cloudflare-workers/app/root.tsx index 0294fbd3907..68397b09d47 100644 --- a/templates/cloudflare-workers/app/root.tsx +++ b/templates/cloudflare-workers/app/root.tsx @@ -18,7 +18,7 @@ export default function App() { - + diff --git a/templates/cloudflare-workers/remix.config.js b/templates/cloudflare-workers/remix.config.js index 26a47b72662..c46c2ca75eb 100644 --- a/templates/cloudflare-workers/remix.config.js +++ b/templates/cloudflare-workers/remix.config.js @@ -4,7 +4,7 @@ export default { server: "./server.ts", serverConditions: ["workerd", "worker", "browser"], serverDependenciesToBundle: [ - // bundle verything except the virtual module for the static content manifest provided by wrangler + // bundle everything except the virtual module for the static content manifest provided by wrangler /^(?!.*\b__STATIC_CONTENT_MANIFEST\b).*$/, ], serverMainFields: ["browser", "module", "main"], @@ -13,6 +13,6 @@ export default { serverPlatform: "neutral", // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", }; diff --git a/templates/deno/app/root.tsx b/templates/deno/app/root.tsx index 7bd9545748a..60ddcdf8f82 100644 --- a/templates/deno/app/root.tsx +++ b/templates/deno/app/root.tsx @@ -1,3 +1,5 @@ +import { cssBundleHref } from "@remix-run/css-bundle"; +import type { LinksFunction } from "@remix-run/deno"; import { Links, LiveReload, @@ -6,8 +8,6 @@ import { Scripts, ScrollRestoration, } from "@remix-run/react"; -import type { LinksFunction } from "@remix-run/deno"; -import { cssBundleHref } from "@remix-run/css-bundle"; import * as React from "react"; export const links: LinksFunction = () => [ @@ -19,7 +19,7 @@ export default function App() { - + diff --git a/templates/deno/remix.config.js b/templates/deno/remix.config.js index 0b3e63ed53f..c814f66365e 100644 --- a/templates/deno/remix.config.js +++ b/templates/deno/remix.config.js @@ -9,6 +9,6 @@ module.exports = { serverPlatform: "neutral", // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", }; diff --git a/templates/deno/server.ts b/templates/deno/server.ts index c1bb125f19d..943b4f0616e 100644 --- a/templates/deno/server.ts +++ b/templates/deno/server.ts @@ -5,8 +5,8 @@ import * as build from "@remix-run/dev/server-build"; const remixHandler = createRequestHandlerWithStaticFiles({ build, - mode: Deno.env.get("NODE_ENV"), getLoadContext: () => ({}), + mode: build.mode, }); const port = Number(Deno.env.get("PORT")) || 8000; diff --git a/templates/express/app/root.tsx b/templates/express/app/root.tsx index 8cb74a167f8..b46b8fb15bc 100644 --- a/templates/express/app/root.tsx +++ b/templates/express/app/root.tsx @@ -18,7 +18,7 @@ export default function App() { - + diff --git a/templates/express/remix.config.js b/templates/express/remix.config.js index abd58ecd26d..d1f97302429 100644 --- a/templates/express/remix.config.js +++ b/templates/express/remix.config.js @@ -1,9 +1,9 @@ /** @type {import('@remix-run/dev').AppConfig} */ export default { ignoredRouteFiles: ["**/.*"], + serverModuleFormat: "esm", // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", - serverModuleFormat: "esm", + // serverBuildPath: "build/index.js", }; diff --git a/templates/fly/app/root.tsx b/templates/fly/app/root.tsx index 8cb74a167f8..b46b8fb15bc 100644 --- a/templates/fly/app/root.tsx +++ b/templates/fly/app/root.tsx @@ -18,7 +18,7 @@ export default function App() { - + diff --git a/templates/fly/remix.config.js b/templates/fly/remix.config.js index e5bd9f91122..d9cbb370640 100644 --- a/templates/fly/remix.config.js +++ b/templates/fly/remix.config.js @@ -1,9 +1,9 @@ /** @type {import('@remix-run/dev').AppConfig} */ module.exports = { ignoredRouteFiles: ["**/.*"], + serverModuleFormat: "cjs", // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", - serverModuleFormat: "cjs", + // serverBuildPath: "build/index.js", }; diff --git a/templates/remix-javascript/app/root.jsx b/templates/remix-javascript/app/root.jsx index c1a2494f63b..b2badce9519 100644 --- a/templates/remix-javascript/app/root.jsx +++ b/templates/remix-javascript/app/root.jsx @@ -17,7 +17,7 @@ export default function App() { - + diff --git a/templates/remix-javascript/remix.config.js b/templates/remix-javascript/remix.config.js index bb5f6cdf99d..7fac2d305eb 100644 --- a/templates/remix-javascript/remix.config.js +++ b/templates/remix-javascript/remix.config.js @@ -3,6 +3,6 @@ export default { ignoredRouteFiles: ["**/.*"], // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", }; diff --git a/templates/remix/app/root.tsx b/templates/remix/app/root.tsx index 8cb74a167f8..b46b8fb15bc 100644 --- a/templates/remix/app/root.tsx +++ b/templates/remix/app/root.tsx @@ -18,7 +18,7 @@ export default function App() { - + diff --git a/templates/remix/remix.config.js b/templates/remix/remix.config.js index bb5f6cdf99d..7fac2d305eb 100644 --- a/templates/remix/remix.config.js +++ b/templates/remix/remix.config.js @@ -3,6 +3,6 @@ export default { ignoredRouteFiles: ["**/.*"], // appDirectory: "app", // assetsBuildDirectory: "public/build", - // serverBuildPath: "build/index.js", // publicPath: "/build/", + // serverBuildPath: "build/index.js", }; diff --git a/yarn.lock b/yarn.lock index c16e5a775a3..d389aea03e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1260,6 +1260,13 @@ dependencies: mime "^2.5.2" +"@cloudflare/kv-asset-handler@^0.3.0": + version "0.3.0" + resolved "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.3.0.tgz#11f0af0749a400ddadcca16dcd6f4696d7036991" + integrity sha512-9CB/MKf/wdvbfkUdfrj+OkEwZ5b7rws0eogJ4293h+7b6KX5toPwym+VQKmILafNB9YiehqY0DlNrDcDhdWHSQ== + dependencies: + mime "^3.0.0" + "@cloudflare/workers-types@^4.20230518.0": version "4.20230628.0" resolved "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20230628.0.tgz#2aacc7ec8c250cd02213b331f1e267cc25db7299" @@ -2105,7 +2112,7 @@ tiny-glob "^0.2.9" tslib "^2.4.0" -"@playwright/test@1.33.0": +"@playwright/test@^1.33.0": version "1.33.0" resolved "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz#669ef859efb81b143dfc624eef99d1dd92a81b67" integrity sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg== @@ -5595,7 +5602,7 @@ execa@4.1.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" -execa@5.1.1, execa@^5.0.0: +execa@5.1.1, execa@^5.0.0, execa@^5.1.1: version "5.1.1" resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz" integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg== @@ -6076,7 +6083,7 @@ get-package-type@^0.1.0: resolved "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz" integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q== -get-port@5.1.1, get-port@^5.1.1: +get-port@^5.1.1: version "5.1.1" resolved "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz#0469ed07563479de6efb986baf053dcd7d4e3193" integrity sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ== @@ -7097,10 +7104,10 @@ isarray@~1.0.0: resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz" integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= -isbot@^3.5.1: - version "3.5.1" - resolved "https://registry.npmjs.org/isbot/-/isbot-3.5.1.tgz" - integrity sha512-IJrUiLudoYIhbNa9EuR7foEyXYPyWDe5Nnd1pTKTyPZKlDA0K5XcVzJEwvNLLstz37KokXP1pZWVKuyW34c4xQ== +isbot@^3.6.8: + version "3.6.13" + resolved "https://registry.npmjs.org/isbot/-/isbot-3.6.13.tgz#e060f727cb53475a4dab1569321ced0f84633d63" + integrity sha512-uoP4uK5Dc2CrabmK+Gue1jTL+scHiCc1c9rblRpJwG8CPxjLIv8jmGyyGRGkbPOweayhkskdZsEQXG6p+QCQrg== isexe@^2.0.0: version "2.0.0"