Skip to content

Visible install button#433

Merged
yamcodes merged 4 commits into
mainfrom
431-clear-install-arkenv-button-in-the-docs
Nov 24, 2025
Merged

Visible install button#433
yamcodes merged 4 commits into
mainfrom
431-clear-install-arkenv-button-in-the-docs

Conversation

@yamcodes

@yamcodes yamcodes commented Nov 24, 2025

Copy link
Copy Markdown
Owner

Closes #431

  • Changed the development script in package.json to use 'pnpm exec' for next-video synchronization.
  • Added an InstallButton component to the DocsLayout, improving user guidance with a sidebar banner.

Summary by CodeRabbit

  • New Features

    • Added an "Install" button in the documentation sidebar that links users to the appropriate installation guide based on the current page.
  • Documentation

    • Renamed Vite plugin section headings/links from "What is the Vite plugin?" to "Introduction" across docs and READMEs.
  • Chores

    • Updated recommended VSCode extensions and tweaked a development tool invocation in project scripts.

✏️ Tip: You can customize this high-level summary in your review settings.

- Changed the development script in package.json to use 'pnpm exec' for next-video synchronization.
- Added an InstallButton component to the DocsLayout, improving user guidance with a sidebar banner.
@yamcodes yamcodes linked an issue Nov 24, 2025 that may be closed by this pull request
@changeset-bot

changeset-bot Bot commented Nov 24, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 755686e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercel Bot commented Nov 24, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
arkenv Ready Ready Preview Comment Nov 24, 2025 9:59pm

@yamcodes yamcodes changed the title Update package.json scripts and enhance DocsLayout with InstallButton Visible install button Nov 24, 2025
@github-actions github-actions Bot added the www Improvements or additions to arkenv.js.org label Nov 24, 2025
@coderabbitai

coderabbitai Bot commented Nov 24, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

Adds VSCode Tailwind extension recommendations, a new client-side InstallButton component with conditional links, integrates that button into the docs sidebar layout, updates Playwright tests and README link text, and changes the apps/www dev script to use pnpm exec for next-video sync.

Changes

Cohort / File(s) Summary
VSCode extension recommendations
apps/www/.vscode/extensions.json, tooling/playwright-www/.vscode/extensions.json
Adds bradlc.vscode-tailwindcss to the recommended extensions arrays (alongside existing recommendations).
Docs layout integration
apps/www/app/docs/layout.tsx
Imports InstallButton and supplies it as sidebar.banner to DocsLayout; reorders baseOptions spread after sidebar prop.
Install button component
apps/www/components/docs/install-button.tsx
New client component InstallButton that reads usePathname() and conditionally links to /docs/vite-plugin#installation (when on vite-plugin pages) or /docs/arkenv/quickstart#install otherwise; renders label accordingly.
Dev script update
apps/www/package.json
Changes dev script invocation from npx next-video sync -w to pnpm exec next-video sync -w.
Docs text & tests
apps/playgrounds/vite/README.md, examples/with-vite-react-ts/README.md, tooling/playwright-www/tests/docs-navigation.test.ts, tooling/playwright-www/tests/docs-switcher.test.ts
Renames Vite plugin heading/link text from "What is the Vite plugin?" / "Vite plugin" to "Introduction"; updates Playwright assertions and some text matching logic to align with heading change and navigation flows.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Browser
  participant DocsLayout
  participant InstallButton
  participant Router

  rect rgb(240,248,255)
    User->>Browser: open /docs/vite-plugin or other doc page
    Browser->>DocsLayout: render docs with sidebar
    DocsLayout->>InstallButton: include sidebar.banner
  end

  rect rgb(245,255,240)
    InstallButton->>InstallButton: read pathname (usePathname)
    alt pathname contains "/docs/vite-plugin"
      InstallButton->>Router: navigate to "/docs/vite-plugin#installation" (label: "Install ArkEnv Vite plugin")
    else
      InstallButton->>Router: navigate to "/docs/arkenv/quickstart#install" (label: "Install ArkEnv")
    end
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

  • Review InstallButton routing condition and anchor targets.
  • Confirm DocsLayout prop ordering doesn't change other sidebar behavior.
  • Check Playwright test updates for robustness (regex vs exact matches) and CI implications.
  • Verify pnpm exec script behaves equivalently in CI/dev environments.

Possibly related PRs

Poem

🐰 I hopped through docs to plant a sign,
A button bright that points the line.
Vite or Ark, it guides the way,
Tailwind tipples in the dev café.
Click and install—hooray, hooray! ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning The PR includes minor out-of-scope changes: VSCode extension recommendations and package.json script updates unrelated to the main InstallButton feature. Consider separating VSCode extensions and package.json script changes into a dedicated PR to maintain focus on the InstallButton feature implementation.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Visible install button' directly reflects the main change: adding a visible InstallButton component to the DocsLayout sidebar.
Linked Issues check ✅ Passed The PR successfully implements all requirements from #431: adds a visible InstallButton in the sidebar, with context-aware labels for 'arkenv' vs 'vite-plugin' docs sections.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch 431-clear-install-arkenv-button-in-the-docs

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
apps/www/components/docs/install-button.tsx (2)

8-10: Consider startsWith() for more precise path matching.

The current includes() check would match any path containing "/docs/vite-plugin" as a substring, including potential false positives like "/docs/other-vite-plugin". Using pathname?.startsWith("/docs/vite-plugin") would provide more precise matching for the vite-plugin documentation section.

Apply this diff if more precise matching is desired:

-	const isVitePluginPage = pathname?.includes("/docs/vite-plugin");
+	const isVitePluginPage = pathname?.startsWith("/docs/vite-plugin");

13-24: Minor: cursor-pointer class may be redundant.

The cursor-pointer class is likely redundant since the Link component (which receives the Button styling via asChild) already has pointer cursor by default. However, this might be intentional defensive styling to ensure the cursor remains correct if upstream styles change.

If you prefer to remove the redundant class:

-		<Button asChild className="w-full cursor-pointer">
+		<Button asChild className="w-full">

Otherwise, the implementation is solid: the conditional routing logic is correct, the icon properly uses aria-hidden since the button text conveys the action, and the full-width styling ensures good visual integration in the sidebar banner.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1143c3e and 235be21.

📒 Files selected for processing (5)
  • apps/www/.vscode/extensions.json (1 hunks)
  • apps/www/app/docs/layout.tsx (1 hunks)
  • apps/www/components/docs/install-button.tsx (1 hunks)
  • apps/www/package.json (1 hunks)
  • tooling/playwright-www/.vscode/extensions.json (1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Use createEnv(schema) function (available as default export, typically imported as arkenv) to create validated environment objects with ArkType schema definitions
Use built-in validators (host, port, url, email) from ArkEnv when available in environment schemas instead of writing custom validators
Provide default values for optional environment variables in schemas using the = value syntax
Use descriptive environment variable names that indicate purpose and format in schema definitions

Files:

  • apps/www/app/docs/layout.tsx
  • apps/www/components/docs/install-button.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

**/*.{ts,tsx}: Prefer type over interface for type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverage const type parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypes error)
Use as const where appropriate for immutable values (useAsConstAssertion error)
Don't reassign function parameters (noParameterAssign error)
Place default parameters last in function signatures (useDefaultParameterLast error)
Always initialize enum values (useEnumInitializers error)
Declare one variable per statement (useSingleVarDeclarator error)
Avoid unnecessary template literals (noUnusedTemplateLiteral error)
Prefer Number.parseInt over global parseInt (useNumberNamespace error)
Use kebab-case for TypeScript filenames (e.g., create-env.ts)
Use camelCase for function names (e.g., createEnv)
Use PascalCase for type names (e.g., ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
Use ArkEnvError for environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type

Files:

  • apps/www/app/docs/layout.tsx
  • apps/www/components/docs/install-button.tsx
**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

Use self-closing JSX elements (useSelfClosingElements error)

Files:

  • apps/www/app/docs/layout.tsx
  • apps/www/components/docs/install-button.tsx
apps/www/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)

apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.

Files:

  • apps/www/app/docs/layout.tsx
  • apps/www/components/docs/install-button.tsx
apps/*/package.json

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Applications in apps/ directory are not published to npm and may depend on workspace packages

Files:

  • apps/www/package.json
**/package.json

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Use workspace:* protocol for workspace dependencies between packages

When referencing workspace packages, use the workspace:* protocol in dependencies

Files:

  • apps/www/package.json
{**/package.json,pnpm-lock.yaml,pnpm-workspace.yaml}

📄 CodeRabbit inference engine (.cursor/rules/pnpm.mdc)

{**/package.json,pnpm-lock.yaml,pnpm-workspace.yaml}: Always use pnpm for all package management operations
Never use npm or yarn commands

Files:

  • apps/www/package.json
{pnpm-workspace.yaml,**/package.json}

📄 CodeRabbit inference engine (.cursor/rules/pnpm.mdc)

Certain native dependencies are configured with onlyBuiltDependencies in pnpm configuration: @biomejs/biome, @sentry/cli, @swc/core, @tailwindcss/oxide, @vercel/speed-insights, esbuild, sharp

Files:

  • apps/www/package.json
🧠 Learnings (12)
📓 Common learnings
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: apps/playgrounds/bun-react/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:47.550Z
Learning: Applies to apps/playgrounds/bun-react/**/package.json : Use `bun install` instead of `npm install`, `yarn install`, or `pnpm install` in package.json scripts
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: apps/playgrounds/bun-react/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:47.550Z
Learning: Applies to apps/playgrounds/bun-react/**/*.{ts,tsx,js,jsx,html,css} : Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild` for bundling
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Applies to tooling/playwright-www/**/*.spec.ts : Use Playwright for end-to-end tests

Applied to files:

  • tooling/playwright-www/.vscode/extensions.json
📚 Learning: 2025-11-24T16:04:47.550Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: apps/playgrounds/bun-react/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:47.550Z
Learning: Applies to apps/playgrounds/bun-react/**/package.json : Use `bun run <script>` instead of `npm run <script>`, `yarn run <script>`, or `pnpm run <script>` in package.json scripts

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:58.603Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: apps/playgrounds/bun/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:58.603Z
Learning: Applies to apps/playgrounds/bun/**/package.json : Use `bun run <script>` instead of `npm run <script>`, `yarn run <script>`, or `pnpm run <script>` for running scripts

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:11.869Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-11-24T16:04:11.869Z
Learning: Applies to tooling/*/package.json : Tooling in tooling/ directory contains development and testing tools that are not published to npm and excluded from changesets

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:19.392Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:19.392Z
Learning: Applies to {**/package.json,pnpm-lock.yaml,pnpm-workspace.yaml} : Always use `pnpm` for all package management operations

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:19.392Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:19.392Z
Learning: Applies to package.json : The project uses `pnpm10.20.0` (specified in `packageManager` field)

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:47.550Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: apps/playgrounds/bun-react/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:47.550Z
Learning: Applies to apps/playgrounds/bun-react/**/package.json : Use `bun install` instead of `npm install`, `yarn install`, or `pnpm install` in package.json scripts

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:11.869Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-11-24T16:04:11.869Z
Learning: Applies to packages/*/package.json : Packages in packages/ directory must be published to npm and require changesets for versioning, proper exports, and type definitions

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:19.392Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:19.392Z
Learning: Run `pnpm install` to update the lock file when dependencies change

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:19.392Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:19.392Z
Learning: Applies to {pnpm-workspace.yaml,**/package.json} : Certain native dependencies are configured with `onlyBuiltDependencies` in pnpm configuration: biomejs/biome, sentry/cli, swc/core, tailwindcss/oxide, vercel/speed-insights, esbuild, sharp

Applied to files:

  • apps/www/package.json
📚 Learning: 2025-11-24T16:04:19.392Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/pnpm.mdc:0-0
Timestamp: 2025-11-24T16:04:19.392Z
Learning: Applies to {**/package.json,pnpm-lock.yaml,pnpm-workspace.yaml} : Never use `npm` or `yarn` commands

Applied to files:

  • apps/www/package.json
🧬 Code graph analysis (2)
apps/www/app/docs/layout.tsx (2)
apps/www/components/docs/install-button.tsx (1)
  • InstallButton (8-26)
apps/www/app/layout.config.tsx (1)
  • baseOptions (11-16)
apps/www/components/docs/install-button.tsx (1)
apps/www/components/ui/button.tsx (1)
  • Button (57-57)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: test-e2e (a11y)
  • GitHub Check: test-e2e (e2e)
  • GitHub Check: test-build (latest)
🔇 Additional comments (5)
apps/www/.vscode/extensions.json (1)

1-3: LGTM!

The VSCode extension recommendation for Tailwind CSS IntelliSense is correctly configured and aligns with the project's use of Tailwind CSS.

tooling/playwright-www/.vscode/extensions.json (1)

2-2: LGTM!

The Tailwind CSS extension recommendation is correctly added alongside the existing Playwright extension, providing better DX for developers working on end-to-end tests that interact with Tailwind-styled components.

apps/www/package.json (1)

7-7: Excellent alignment with project standards!

The change from npx to pnpm exec correctly follows the project's pnpm-first approach and ensures consistency across all package management operations.

As per coding guidelines, this repository requires using pnpm for all package management operations.

apps/www/app/docs/layout.tsx (1)

4-4: LGTM!

The InstallButton integration is clean and correctly structured. The sidebar configuration is properly passed to DocsLayout, and the spread order of baseOptions (after the sidebar prop) ensures no accidental property overrides.

Also applies to: 9-14

apps/www/components/docs/install-button.tsx (1)

1-1: LGTM!

The client directive and imports are correctly configured for a Next.js client component that uses navigation hooks.

Also applies to: 3-6

- Changed references from "What is the Vite plugin?" to "Introduction" in multiple documentation files to enhance clarity and consistency.
- Updated test assertions in Playwright tests to reflect the new title for improved accuracy in documentation navigation tests.
@github-actions github-actions Bot added docs Adds or changes documentation, or acts as documentation in and of itself example Issues or Pull Requests concerning at least one ArkEnv example. (Found in the `examples/` directory) tests This issue or PR is about adding, removing or changing tests labels Nov 24, 2025
- Changed expected titles in Playwright tests from "What is ArkEnv?" to "What is ArkEnv" to remove unnecessary punctuation and enhance clarity.
- Updated navigation tests to reflect the new title for improved accuracy in documentation verification.
- Replaced the locator for the Vite plugin text in Playwright tests to use a regex pattern for improved matching and visibility checks.
- This change enhances the accuracy of the documentation switcher tests, ensuring they correctly verify the presence of the expected content.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
tooling/playwright-www/tests/docs-switcher.test.ts (1)

30-449: Consider adding test coverage for the new InstallButton component.

The PR objectives mention adding an InstallButton to the DocsLayout sidebar. Consider adding a test case to verify:

  • Button is visible in the sidebar
  • Correct label based on context (arkenv vs vite-plugin path)
  • Proper href attribute for installation links

Example test structure:

test("should display context-aware install button in sidebar", async ({ page }) => {
	await page.goto("/docs/arkenv");
	const installButton = page.locator("text=/Install ArkEnv/i");
	await expect(installButton).toBeVisible();
	
	await page.goto("/docs/vite-plugin");
	const vitePluginButton = page.locator("text=/Install.*Vite/i");
	await expect(vitePluginButton).toBeVisible();
});
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 235be21 and 755686e.

📒 Files selected for processing (4)
  • apps/playgrounds/vite/README.md (1 hunks)
  • examples/with-vite-react-ts/README.md (1 hunks)
  • tooling/playwright-www/tests/docs-navigation.test.ts (1 hunks)
  • tooling/playwright-www/tests/docs-switcher.test.ts (10 hunks)
✅ Files skipped from review due to trivial changes (2)
  • apps/playgrounds/vite/README.md
  • examples/with-vite-react-ts/README.md
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Use createEnv(schema) function (available as default export, typically imported as arkenv) to create validated environment objects with ArkType schema definitions
Use built-in validators (host, port, url, email) from ArkEnv when available in environment schemas instead of writing custom validators
Provide default values for optional environment variables in schemas using the = value syntax
Use descriptive environment variable names that indicate purpose and format in schema definitions

Files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
**/*.test.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use beforeEach and afterEach hooks in unit tests to save and restore original process.env state before and after test execution

Files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
**/*.test.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.test.{ts,tsx}: Unit tests should test individual functions, components, and hooks in isolation with mocked external dependencies (clipboard, network, etc.)
Locate unit test files alongside source files with .test.ts or .test.tsx suffix in the same directory

Co-locate tests with components: Component.tsx next to Component.test.tsx

**/*.test.{ts,tsx}: Test individual functions, components, and hooks in isolation with mocked dependencies in unit tests
Keep unit tests fast with execution under 100ms per test
Co-locate unit tests with source files using naming convention: source.tssource.test.ts
Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details
Query component tests by role, name, label, and text using accessibility-first selectors
Use Vitest as the test framework for unit and integration tests
Use Testing Library with user-event for real user simulation in component tests

Files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
**/*.{test,integration.test}.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{test,integration.test}.{ts,tsx}: Use Vitest's describe/it structure in all tests and verify both success and failure cases
Test environment variables with edge cases including invalid and missing values in unit and integration tests

Files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)

**/*.{ts,tsx}: Prefer type over interface for type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverage const type parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypes error)
Use as const where appropriate for immutable values (useAsConstAssertion error)
Don't reassign function parameters (noParameterAssign error)
Place default parameters last in function signatures (useDefaultParameterLast error)
Always initialize enum values (useEnumInitializers error)
Declare one variable per statement (useSingleVarDeclarator error)
Avoid unnecessary template literals (noUnusedTemplateLiteral error)
Prefer Number.parseInt over global parseInt (useNumberNamespace error)
Use kebab-case for TypeScript filenames (e.g., create-env.ts)
Use camelCase for function names (e.g., createEnv)
Use PascalCase for type names (e.g., ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
Use ArkEnvError for environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type

Files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
🧠 Learnings (9)
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Applies to tooling/playwright-www/**/*.spec.ts : Use Playwright for end-to-end tests

Applied to files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Applies to tooling/playwright-www/**/*.spec.ts : Test complete user workflows and validate real browser behavior across Chromium, Firefox, and WebKit in end-to-end tests

Applied to files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Applies to packages/vite-plugin/src/**/*.test.ts : Test Vite plugin using the `with-vite-react-ts` example as a fixture and validate plugin works with real Vite projects

Applied to files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Applies to packages/vite-plugin/src/**/*.test.ts : Use fixture-based testing pattern with `__fixtures__` directory for Vite plugin tests

Applied to files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/docs-switcher.test.ts
📚 Learning: 2025-09-09T17:37:19.650Z
Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 132
File: packages/arkenv/README.md:13-14
Timestamp: 2025-09-09T17:37:19.650Z
Learning: For yamcodes/arkenv project: Runtime support documentation should link to specific examples: Node.js (examples/basic), Bun (examples/with-bun), Vite (examples/with-vite-react-ts).

Applied to files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Achieve coverage goals: environment variable parsing and validation, type checking and error handling, default value handling, custom type validation, plugin integration with Vite, and real project build testing using examples as fixtures

Applied to files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Applies to **/*.test.{ts,tsx} : Focus component tests on public API, user behavior, state transitions, and accessibility rather than styling or implementation details

Applied to files:

  • tooling/playwright-www/tests/docs-switcher.test.ts
📚 Learning: 2025-11-24T16:03:35.734Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:03:35.734Z
Learning: Applies to **/*.{test,integration.test}.{ts,tsx} : Use Vitest's `describe`/`it` structure in all tests and verify both success and failure cases

Applied to files:

  • tooling/playwright-www/tests/docs-switcher.test.ts
📚 Learning: 2025-11-24T16:04:36.928Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-11-24T16:04:36.928Z
Learning: Applies to **/*.test.{ts,tsx} : Query component tests by role, name, label, and text using accessibility-first selectors

Applied to files:

  • tooling/playwright-www/tests/docs-switcher.test.ts
🧬 Code graph analysis (1)
tooling/playwright-www/tests/docs-navigation.test.ts (1)
tooling/playwright-www/tests/vite-plugin-viteconfig.test.ts (8)
  • page (25-47)
  • test (4-130)
  • page (62-77)
  • page (114-125)
  • page (99-112)
  • page (13-23)
  • page (5-11)
  • page (49-60)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: test-e2e (e2e)
  • GitHub Check: test-e2e (a11y)
🔇 Additional comments (3)
tooling/playwright-www/tests/docs-switcher.test.ts (2)

65-67: LGTM! Consistent heading updates across all navigation scenarios.

All test assertions have been correctly updated to expect "Introduction" as the heading for the /docs/vite-plugin page. The changes are consistent across direct navigation, tab switching, and keyboard navigation scenarios.

Also applies to: 129-131, 184-186, 198-200, 224-224, 238-240, 277-279, 318-318, 407-409, 435-437


320-321: Good practice using regex for flexible text matching.

The use of getByText(/The Vite plugin for ArkEnv/i) with regex and case-insensitive matching makes this test more resilient to minor content changes.

tooling/playwright-www/tests/docs-navigation.test.ts (1)

146-146: LGTM! Consistent with documentation structure update.

The expected title for /docs/vite-plugin has been correctly updated to "Introduction", matching the changes in docs-switcher.test.ts.

@yamcodes
yamcodes merged commit 6e6b42d into main Nov 24, 2025
15 checks passed
@yamcodes
yamcodes deleted the 431-clear-install-arkenv-button-in-the-docs branch November 24, 2025 22:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Adds or changes documentation, or acts as documentation in and of itself example Issues or Pull Requests concerning at least one ArkEnv example. (Found in the `examples/` directory) tests This issue or PR is about adding, removing or changing tests www Improvements or additions to arkenv.js.org

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clear "Install ArkEnv" button in the docs

1 participant