From e38830415f59972b9851a13f81f891b2fa184100 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Thu, 18 Jul 2024 14:36:36 +0100 Subject: [PATCH] docs(remix): update the plugin overview to match the latest iteration of the plugin #26943 (#26977) ## Current Behavior The information on the Remix Plugin Overview is out of date. ## Expected Behavior The information should be up to date ## Related Issue(s) Fixes #26943 --- .../packages/remix/documents/overview.md | 72 ++++++++++--------- docs/shared/packages/remix/remix-plugin.md | 72 ++++++++++--------- 2 files changed, 78 insertions(+), 66 deletions(-) diff --git a/docs/generated/packages/remix/documents/overview.md b/docs/generated/packages/remix/documents/overview.md index f0e13f283292c..0fe61a4ed3e79 100644 --- a/docs/generated/packages/remix/documents/overview.md +++ b/docs/generated/packages/remix/documents/overview.md @@ -6,7 +6,7 @@ description: The Nx Plugin for Remix contains executors, generators, and utiliti The Nx Plugin for Remix contains executors, generators, and utilities for managing Remix applications and libraries within an Nx workspace. It provides: -- Integration with libraries such as Storybook, Jest, Vitest and Cypress. +- Integration with libraries such as Storybook, Jest, Vitest, Playwright and Cypress. - Generators to help scaffold code quickly, including: - Libraries, both internal to your codebase and publishable to npm - Routes @@ -57,7 +57,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`. "plugin": "@nx/remix/plugin", "options": { "buildTargetName": "build", - "serveTargetName": "serve", + "devTargetName": "dev", "startTargetName": "start", "typecheckTargetName": "typecheck" } @@ -66,7 +66,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`. } ``` -The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`. +The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`. {% /tab %} {% tab label="Nx < 18" %} @@ -92,35 +92,32 @@ The command below uses the `as-provided` directory flag behavior, which is the d NX Generating @nx/remix:application โœ” What unit test runner should be used? ยท vitest +โœ” Which E2E test runner would you like to use? ยท playwright -CREATE apps/myapp/project.json UPDATE package.json +UPDATE nx.json +CREATE apps/myapp/project.json CREATE apps/myapp/README.md +CREATE apps/myapp/app/nx-welcome.tsx CREATE apps/myapp/app/root.tsx CREATE apps/myapp/app/routes/_index.tsx CREATE apps/myapp/public/favicon.ico CREATE apps/myapp/remix.config.js CREATE apps/myapp/remix.env.d.ts +CREATE apps/myapp/tests/routes/_index.spec.tsx +CREATE apps/myapp/tsconfig.app.json CREATE apps/myapp/tsconfig.json CREATE apps/myapp/.gitignore CREATE apps/myapp/package.json -UPDATE nx.json -CREATE tsconfig.base.json -CREATE .prettierrc -CREATE .prettierignore -UPDATE .vscode/extensions.json -CREATE apps/myapp/vite.config.ts CREATE apps/myapp/tsconfig.spec.json +CREATE apps/myapp/vitest.config.ts CREATE apps/myapp/test-setup.ts -CREATE apps/myapp-e2e/cypress.config.ts -CREATE apps/myapp-e2e/src/e2e/app.cy.ts -CREATE apps/myapp-e2e/src/fixtures/example.json -CREATE apps/myapp-e2e/src/support/commands.ts -CREATE apps/myapp-e2e/src/support/e2e.ts -CREATE apps/myapp-e2e/tsconfig.json +CREATE apps/myapp/.eslintrc.json +CREATE apps/myapp/.eslintignore CREATE apps/myapp-e2e/project.json -CREATE .eslintrc.json -CREATE .eslintignore +CREATE apps/myapp-e2e/src/example.spec.ts +CREATE apps/myapp-e2e/playwright.config.ts +CREATE apps/myapp-e2e/tsconfig.json CREATE apps/myapp-e2e/.eslintrc.json ``` @@ -142,12 +139,16 @@ NX Successfully ran target build for project myapp (3s) 2. To serve your application for use during development run: -```{% command="nx serve myapp" path="~/acme" %} -> nx run myapp:serve +```{% command="nx dev myapp" path="~/acme" %} +> nx run myapp:dev + +> remix dev --manual -๐Ÿ’ฟ Building... -๐Ÿ’ฟ Rebuilt in 377ms -Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000) +๐Ÿ’ฟ remix dev + +info building... +info built (388ms) +[remix-serve] http://localhost:3000 (http://192.168.0.12:3000) ``` 3. To test the application using vitest run: @@ -155,18 +156,23 @@ Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000) ```{% command="nx test myapp" path="~/acme" %} > nx run myapp:test -RUN v0.31.4 /Users/columferry/dev/nrwl/issues/remixguide/acme/apps/myapp -stderr | app/routes/index.spec.ts > test > should render -Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. -โœ“ app/routes/index.spec.ts (1 test) 10ms -Test Files 1 passed (1) - Tests 1 passed (1) -Start at 16:15:45 -Duration 1.20s (transform 51ms, setup 139ms, collect 180ms, tests 10ms, environment 379ms, prepare 103ms) +> vitest -โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” -NX Successfully ran target test for project myapp (2s) + RUN v1.6.0 /Users/columferry/dev/nrwl/issues/gh_issues/nx26943/apps/myapp + + โœ“ tests/routes/_index.spec.tsx (1) + โœ“ renders loader data + + Test Files 1 passed (1) + Tests 1 passed (1) + Start at 13:22:54 + Duration 533ms (transform 47ms, setup 68ms, collect 123ms, tests 36ms, environment 204ms, prepare 35ms) + + +โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” + + NX Successfully ran target test for project myapp (950ms) ``` ## Generating an Nx Library diff --git a/docs/shared/packages/remix/remix-plugin.md b/docs/shared/packages/remix/remix-plugin.md index f0e13f283292c..0fe61a4ed3e79 100644 --- a/docs/shared/packages/remix/remix-plugin.md +++ b/docs/shared/packages/remix/remix-plugin.md @@ -6,7 +6,7 @@ description: The Nx Plugin for Remix contains executors, generators, and utiliti The Nx Plugin for Remix contains executors, generators, and utilities for managing Remix applications and libraries within an Nx workspace. It provides: -- Integration with libraries such as Storybook, Jest, Vitest and Cypress. +- Integration with libraries such as Storybook, Jest, Vitest, Playwright and Cypress. - Generators to help scaffold code quickly, including: - Libraries, both internal to your codebase and publishable to npm - Routes @@ -57,7 +57,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`. "plugin": "@nx/remix/plugin", "options": { "buildTargetName": "build", - "serveTargetName": "serve", + "devTargetName": "dev", "startTargetName": "start", "typecheckTargetName": "typecheck" } @@ -66,7 +66,7 @@ The `@nx/remix/plugin` is configured in the `plugins` array in `nx.json`. } ``` -The `buildTargetName`, `serveTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `serve`, `start` and `typecheck`. +The `buildTargetName`, `devTargetName`, `startTargetName` and `typecheckTargetName` options control the names of the inferred Remix tasks. The default names are `build`, `dev`, `start` and `typecheck`. {% /tab %} {% tab label="Nx < 18" %} @@ -92,35 +92,32 @@ The command below uses the `as-provided` directory flag behavior, which is the d NX Generating @nx/remix:application โœ” What unit test runner should be used? ยท vitest +โœ” Which E2E test runner would you like to use? ยท playwright -CREATE apps/myapp/project.json UPDATE package.json +UPDATE nx.json +CREATE apps/myapp/project.json CREATE apps/myapp/README.md +CREATE apps/myapp/app/nx-welcome.tsx CREATE apps/myapp/app/root.tsx CREATE apps/myapp/app/routes/_index.tsx CREATE apps/myapp/public/favicon.ico CREATE apps/myapp/remix.config.js CREATE apps/myapp/remix.env.d.ts +CREATE apps/myapp/tests/routes/_index.spec.tsx +CREATE apps/myapp/tsconfig.app.json CREATE apps/myapp/tsconfig.json CREATE apps/myapp/.gitignore CREATE apps/myapp/package.json -UPDATE nx.json -CREATE tsconfig.base.json -CREATE .prettierrc -CREATE .prettierignore -UPDATE .vscode/extensions.json -CREATE apps/myapp/vite.config.ts CREATE apps/myapp/tsconfig.spec.json +CREATE apps/myapp/vitest.config.ts CREATE apps/myapp/test-setup.ts -CREATE apps/myapp-e2e/cypress.config.ts -CREATE apps/myapp-e2e/src/e2e/app.cy.ts -CREATE apps/myapp-e2e/src/fixtures/example.json -CREATE apps/myapp-e2e/src/support/commands.ts -CREATE apps/myapp-e2e/src/support/e2e.ts -CREATE apps/myapp-e2e/tsconfig.json +CREATE apps/myapp/.eslintrc.json +CREATE apps/myapp/.eslintignore CREATE apps/myapp-e2e/project.json -CREATE .eslintrc.json -CREATE .eslintignore +CREATE apps/myapp-e2e/src/example.spec.ts +CREATE apps/myapp-e2e/playwright.config.ts +CREATE apps/myapp-e2e/tsconfig.json CREATE apps/myapp-e2e/.eslintrc.json ``` @@ -142,12 +139,16 @@ NX Successfully ran target build for project myapp (3s) 2. To serve your application for use during development run: -```{% command="nx serve myapp" path="~/acme" %} -> nx run myapp:serve +```{% command="nx dev myapp" path="~/acme" %} +> nx run myapp:dev + +> remix dev --manual -๐Ÿ’ฟ Building... -๐Ÿ’ฟ Rebuilt in 377ms -Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000) +๐Ÿ’ฟ remix dev + +info building... +info built (388ms) +[remix-serve] http://localhost:3000 (http://192.168.0.12:3000) ``` 3. To test the application using vitest run: @@ -155,18 +156,23 @@ Remix App Server started at http://localhost:3000 (http://192.168.0.14:3000) ```{% command="nx test myapp" path="~/acme" %} > nx run myapp:test -RUN v0.31.4 /Users/columferry/dev/nrwl/issues/remixguide/acme/apps/myapp -stderr | app/routes/index.spec.ts > test > should render -Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. -โœ“ app/routes/index.spec.ts (1 test) 10ms -Test Files 1 passed (1) - Tests 1 passed (1) -Start at 16:15:45 -Duration 1.20s (transform 51ms, setup 139ms, collect 180ms, tests 10ms, environment 379ms, prepare 103ms) +> vitest -โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” -NX Successfully ran target test for project myapp (2s) + RUN v1.6.0 /Users/columferry/dev/nrwl/issues/gh_issues/nx26943/apps/myapp + + โœ“ tests/routes/_index.spec.tsx (1) + โœ“ renders loader data + + Test Files 1 passed (1) + Tests 1 passed (1) + Start at 13:22:54 + Duration 533ms (transform 47ms, setup 68ms, collect 123ms, tests 36ms, environment 204ms, prepare 35ms) + + +โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” + + NX Successfully ran target test for project myapp (950ms) ``` ## Generating an Nx Library