From dc2d3328f089d200e10d0407d992eb9ca2f8a041 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 12 Sep 2025 09:00:10 +0000 Subject: [PATCH 1/7] Initial plan From ef2eb5d14f0d77a3b4a9573996f94d4c27ad51a6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 12 Sep 2025 09:06:24 +0000 Subject: [PATCH 2/7] Restructure VS Code integration guide to highlight ArkThemes as enhanced option Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com> --- .../content/docs/guides/import-options.mdx | 64 ++++++------------- 1 file changed, 21 insertions(+), 43 deletions(-) diff --git a/apps/www/content/docs/guides/import-options.mdx b/apps/www/content/docs/guides/import-options.mdx index 3ae345e49..8e05134ed 100644 --- a/apps/www/content/docs/guides/import-options.mdx +++ b/apps/www/content/docs/guides/import-options.mdx @@ -1,12 +1,14 @@ --- title: Integrating with VS Code icon: New -description: Get syntax highlighting and enhanced developer experience with the ArkType VS Code extension +description: Get syntax highlighting and enhanced developer experience with the ArkType ecosystem extensions --- -## ArkType VS Code Extension +ArkEnv works great with modern code editors that support syntax highlighting for ArkType definitions. There are two levels of support you can choose from, depending on your needs and editor preferences. -The [ArkType VS Code extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkType definitions, making your development experience with ArkEnv much more pleasant. +## Minimum Recommendation: Basic Syntax Highlighting + +For VS Code users, the [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides essential syntax highlighting and inline error summaries for your ArkEnv schemas. -### Installation - -1. Open VS Code -2. Go to Extensions (Ctrl+Shift+X) -3. Search for "ArkType" -4. Install the extension by arktypeio - -## Getting Syntax Highlighting - -To get syntax highlighting for your ArkEnv schemas, use the **default import** and name it `arkenv`: +To enable syntax highlighting, use the **default import** and name it `arkenv`: ```typescript import arkenv from 'arkenv'; @@ -34,58 +27,43 @@ const env = arkenv({ }); ``` -### Example with Syntax Highlighting - ![ArkType syntax highlighting in VS Code](/dx.png) -### Benefits - -When you use the default import (`import arkenv from 'arkenv'`) and have the ArkType extension installed, you get: - +This gives you: - **Syntax highlighting** for ArkType definitions in your schema - **Inline error summaries** via ErrorLens integration -- **Better developer experience** with visual feedback +- **Basic validation feedback** for common mistakes -## Alternative Import Styles +## Enhanced Option: Full TypeScript-like Syntax Highlighting -You can also use named imports, though you won't get syntax highlighting: +For an even better development experience, [ArkThemes](https://marketplace.cursorapi.com/items/?itemName=arktypeio.arkthemes) provides full TypeScript-like syntax highlighting for ArkType definitions. Currently available for Cursor editor, this extension offers more comprehensive highlighting that makes ArkType schemas feel like native TypeScript code. +## Import Styles + +ArkEnv supports both default and named imports. The functionality is identical - only the syntax highlighting support differs: + +### Default Import (Recommended for Syntax Highlighting) ```typescript -import { createEnv } from 'arkenv'; +import arkenv from 'arkenv'; -const env = createEnv({ +const env = arkenv({ PORT: "number.port", NODE_ENV: "'development' | 'production' | 'test'", }); ``` -## Migration Guide - -If you're currently using named imports and want to switch to default imports for better VS Code support: - -### Before +### Named Import ```typescript import { createEnv } from 'arkenv'; const env = createEnv({ PORT: "number.port", + NODE_ENV: "'development' | 'production' | 'test'", }); ``` -### After -```typescript -import arkenv from 'arkenv'; - -const env = arkenv({ - PORT: "number.port", -}); -``` - -The functionality is identical - only the import style changes! - ## Best Practices -- **Use default import** if you're using VS Code and want enhanced syntax highlighting -- **Use named import** if you prefer explicit imports or are using other editors +- **Use default import** (`import arkenv`) if you want syntax highlighting in VS Code or Cursor +- **Use named import** (`import { createEnv }`) if you prefer explicit imports or use other editors - **Be consistent** within your project - choose one style and stick with it -- **Install the ArkType extension** for the best development experience From 6fe1e302492ead120fd85a87d6db730584bead6b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 12 Sep 2025 10:05:30 +0000 Subject: [PATCH 3/7] Address reviewer feedback: update section titles and ArkThemes description Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com> --- apps/www/content/docs/guides/import-options.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/www/content/docs/guides/import-options.mdx b/apps/www/content/docs/guides/import-options.mdx index 8e05134ed..e3c317e42 100644 --- a/apps/www/content/docs/guides/import-options.mdx +++ b/apps/www/content/docs/guides/import-options.mdx @@ -6,7 +6,7 @@ description: Get syntax highlighting and enhanced developer experience with the ArkEnv works great with modern code editors that support syntax highlighting for ArkType definitions. There are two levels of support you can choose from, depending on your needs and editor preferences. -## Minimum Recommendation: Basic Syntax Highlighting +## ArkType VS Code Extension: Syntax Highlighting and Error Lens For VS Code users, the [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides essential syntax highlighting and inline error summaries for your ArkEnv schemas. @@ -32,11 +32,11 @@ const env = arkenv({ This gives you: - **Syntax highlighting** for ArkType definitions in your schema - **Inline error summaries** via ErrorLens integration -- **Basic validation feedback** for common mistakes +- **Better developer experience** for common mistakes -## Enhanced Option: Full TypeScript-like Syntax Highlighting +## ArkThemes: Special Highlighting -For an even better development experience, [ArkThemes](https://marketplace.cursorapi.com/items/?itemName=arktypeio.arkthemes) provides full TypeScript-like syntax highlighting for ArkType definitions. Currently available for Cursor editor, this extension offers more comprehensive highlighting that makes ArkType schemas feel like native TypeScript code. +For an even better development experience, [ArkThemes](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkthemes) provides special highlighting for TypeScript generics in ArkType definitions. This extension offers more comprehensive highlighting that makes ArkType schemas feel like native TypeScript code. ## Import Styles From fdd98ef02972a798a727f5ba6689249d81c13ccd Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 12 Sep 2025 10:11:53 +0000 Subject: [PATCH 4/7] Simplify VS Code guide description and improve ArkType extension introduction Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com> --- apps/www/content/docs/guides/import-options.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/www/content/docs/guides/import-options.mdx b/apps/www/content/docs/guides/import-options.mdx index e3c317e42..4d38191c1 100644 --- a/apps/www/content/docs/guides/import-options.mdx +++ b/apps/www/content/docs/guides/import-options.mdx @@ -1,14 +1,12 @@ --- title: Integrating with VS Code icon: New -description: Get syntax highlighting and enhanced developer experience with the ArkType ecosystem extensions +description: Syntax highlighting and enhanced developer experience with VS Code extensions --- -ArkEnv works great with modern code editors that support syntax highlighting for ArkType definitions. There are two levels of support you can choose from, depending on your needs and editor preferences. - ## ArkType VS Code Extension: Syntax Highlighting and Error Lens -For VS Code users, the [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides essential syntax highlighting and inline error summaries for your ArkEnv schemas. +The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for your ArkEnv schemas. Date: Fri, 12 Sep 2025 10:15:49 +0000 Subject: [PATCH 5/7] Apply reviewer suggestions: simplify ArkType extension description, use DX abbreviation, streamline ArkThemes description, and update Best Practices section Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com> --- apps/www/content/docs/guides/import-options.mdx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/www/content/docs/guides/import-options.mdx b/apps/www/content/docs/guides/import-options.mdx index 4d38191c1..d7457cdd0 100644 --- a/apps/www/content/docs/guides/import-options.mdx +++ b/apps/www/content/docs/guides/import-options.mdx @@ -6,7 +6,7 @@ description: Syntax highlighting and enhanced developer experience with VS Code ## ArkType VS Code Extension: Syntax Highlighting and Error Lens -The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for your ArkEnv schemas. +The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkEnv. Date: Fri, 12 Sep 2025 16:31:12 +0500 Subject: [PATCH 6/7] Update dependencies and documentation; remove outdated files - Added '@ark/util' as a dependency in both `pnpm-lock.yaml` and `package.json`. - Introduced a new 'fix' script in `package.json` for easier maintenance. - Updated `meta.json` to include new integration documentation. - Deleted the outdated `import-options.mdx` guide. - Renamed the title in `type-function.mdx` for consistency. These changes enhance the project structure and improve the documentation for better developer experience. --- apps/www/components/ui/badge.tsx | 31 +++++++++ .../content/docs/guides/import-options.mdx | 66 ------------------- .../www/content/docs/guides/type-function.mdx | 2 +- .../content/docs/integrations/jetbrains.mdx | 25 +++++++ apps/www/content/docs/integrations/vscode.mdx | 31 +++++++++ apps/www/content/docs/meta.json | 5 +- apps/www/lib/source.ts | 31 --------- apps/www/lib/source.tsx | 39 +++++++++++ apps/www/package.json | 12 ++-- pnpm-lock.yaml | 3 + 10 files changed, 140 insertions(+), 105 deletions(-) create mode 100644 apps/www/components/ui/badge.tsx delete mode 100644 apps/www/content/docs/guides/import-options.mdx create mode 100644 apps/www/content/docs/integrations/jetbrains.mdx create mode 100644 apps/www/content/docs/integrations/vscode.mdx delete mode 100644 apps/www/lib/source.ts create mode 100644 apps/www/lib/source.tsx diff --git a/apps/www/components/ui/badge.tsx b/apps/www/components/ui/badge.tsx new file mode 100644 index 000000000..58481a75d --- /dev/null +++ b/apps/www/components/ui/badge.tsx @@ -0,0 +1,31 @@ +import { cva, type VariantProps } from "class-variance-authority"; +import type * as React from "react"; +import { cn } from "~/lib/utils"; + +export const badgeVariants = cva( + "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +export const Badge = ({ className, variant, ...props }: BadgeProps) => ( +
+); diff --git a/apps/www/content/docs/guides/import-options.mdx b/apps/www/content/docs/guides/import-options.mdx deleted file mode 100644 index d7457cdd0..000000000 --- a/apps/www/content/docs/guides/import-options.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Integrating with VS Code -icon: New -description: Syntax highlighting and enhanced developer experience with VS Code extensions ---- - -## ArkType VS Code Extension: Syntax Highlighting and Error Lens - -The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkEnv. - - - -To enable syntax highlighting, use the **default import** and name it `arkenv`: - -```typescript -import arkenv from 'arkenv'; - -const env = arkenv({ - PORT: "number.port", - NODE_ENV: "'development' | 'production' | 'test'", -}); -``` - -![ArkType syntax highlighting in VS Code](/dx.png) - -This gives you: -- **Syntax highlighting** for ArkType definitions in your schema -- **Inline error summaries** via ErrorLens integration -- **Better DX** - -## ArkThemes: Special Highlighting - -For an even better development experience, [ArkThemes](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkthemes) provides special highlighting for TypeScript generics in ArkType definitions. - -## Import Styles - -ArkEnv supports both default and named imports. The functionality is identical - only the syntax highlighting support differs: - -### Default Import (Recommended for Syntax Highlighting) -```typescript -import arkenv from 'arkenv'; - -const env = arkenv({ - PORT: "number.port", - NODE_ENV: "'development' | 'production' | 'test'", -}); -``` - -### Named Import -```typescript -import { createEnv } from 'arkenv'; - -const env = createEnv({ - PORT: "number.port", - NODE_ENV: "'development' | 'production' | 'test'", -}); -``` - -## Best Practices - -- **Use default import** (`import arkenv`) if you want syntax highlighting in VS Code, Cursor, or JetBrains IDEs -- **Use named import** (`import { createEnv }`) if you prefer explicit imports or use other editors diff --git a/apps/www/content/docs/guides/type-function.mdx b/apps/www/content/docs/guides/type-function.mdx index b1141b932..b90ff2e1f 100644 --- a/apps/www/content/docs/guides/type-function.mdx +++ b/apps/www/content/docs/guides/type-function.mdx @@ -1,5 +1,5 @@ --- -title: "Type Function" +title: "type function" description: "Learn about ArkEnv's advanced type function for runtime validation with built-in environment-specific types." --- diff --git a/apps/www/content/docs/integrations/jetbrains.mdx b/apps/www/content/docs/integrations/jetbrains.mdx new file mode 100644 index 000000000..c24e4e84e --- /dev/null +++ b/apps/www/content/docs/integrations/jetbrains.mdx @@ -0,0 +1,25 @@ +--- +title: Integrating with JetBrains IDEs +description: Syntax highlighting and improved developer experience with JetBrains IDEs +--- + +## ArkType JetBrains Extension: Syntax Highlighting + +The [ArkType extension](https://plugins.jetbrains.com/plugin/27099-arktype) provides syntax highlighting for ArkEnv. + + + +To integrate ArkEnv, use the **default import** and name it `arkenv`: + +```typescript +import arkenv from 'arkenv'; + +const env = arkenv({ + PORT: "number.port", + NODE_ENV: "'development' | 'production' | 'test'", +}); +``` diff --git a/apps/www/content/docs/integrations/vscode.mdx b/apps/www/content/docs/integrations/vscode.mdx new file mode 100644 index 000000000..a440a4905 --- /dev/null +++ b/apps/www/content/docs/integrations/vscode.mdx @@ -0,0 +1,31 @@ +--- +title: Integrating with VS Code & Cursor +description: Syntax highlighting and improved developer experience with VS Code extensions +--- + +## ArkType VS Code Extension: Syntax Highlighting and ErrorLens + +The [ArkType extension](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkdark) provides syntax highlighting and inline error summaries for ArkEnv. + + + +To integrate ArkEnv, use the **default import** and name it `arkenv`: + +```typescript +import arkenv from 'arkenv'; + +const env = arkenv({ + PORT: "number.port", + NODE_ENV: "'development' | 'production' | 'test'", +}); +``` + +## ArkThemes: Special Highlighting + +For an even better DX, [ArkThemes](https://marketplace.visualstudio.com/items?itemName=arktypeio.arkthemes) provides special highlighting for TypeScript generics in ArkType definitions. + +![ArkType syntax highlighting in VS Code](/dx.png) \ No newline at end of file diff --git a/apps/www/content/docs/meta.json b/apps/www/content/docs/meta.json index 8f8edd785..d873707d3 100644 --- a/apps/www/content/docs/meta.json +++ b/apps/www/content/docs/meta.json @@ -4,9 +4,10 @@ "index", "quickstart", "examples", + "---[New]Integrations---", + "[Blocks][VS Code & Cursor](/docs/integrations/vscode)", + "[Blocks][JetBrains IDEs](/docs/integrations/jetbrains)", "---Guides---", - "guides/import-options", - "guides/type-function", "guides/environment-configuration" ] } diff --git a/apps/www/lib/source.ts b/apps/www/lib/source.ts deleted file mode 100644 index 8ae88bf0d..000000000 --- a/apps/www/lib/source.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { loader } from "fumadocs-core/source"; -import { icons } from "lucide-react"; -import { createElement } from "react"; -import { docs } from "~/.source"; - -function createNewElement() { - return createElement( - "span", - { - className: - "bg-gradient-to-r from-yellow-400 to-yellow-100 text-amber-800 px-1.5 py-0.5 rounded text-xs font-medium", - "data-new": "true", - }, - "New", - ); -} - -export const source = loader({ - baseUrl: "/docs", - source: docs.toFumadocsSource(), - icon(icon) { - if (!icon) { - // You may set a default icon - return; - } - - if (icon === "New") return createNewElement(); - - if (icon in icons) return createElement(icons[icon as keyof typeof icons]); - }, -}); diff --git a/apps/www/lib/source.tsx b/apps/www/lib/source.tsx new file mode 100644 index 000000000..be119d490 --- /dev/null +++ b/apps/www/lib/source.tsx @@ -0,0 +1,39 @@ +import type { autocomplete } from "@ark/util"; +import { loader } from "fumadocs-core/source"; +import { icons } from "lucide-react"; +import { createElement } from "react"; +import { docs } from "~/.source"; +import { Badge } from "~/components/ui/badge"; + +// function createNewElement() { +// return createElement( +// "span", +// { +// className: +// "bg-gradient-to-r from-yellow-400 to-yellow-100 text-amber-800 px-1.5 py-0.5 rounded text-xs font-medium", +// "data-new": "true", +// }, +// "New", +// ); +// } +export type IconName = keyof typeof icons | "New"; + +export const source = loader({ + baseUrl: "/docs", + source: docs.toFumadocsSource(), + icon(icon?: autocomplete) { + if (!icon) return; + + if (icon in icons) return createElement(icons[icon as never]); + if (icon === "New") + return ( + + new + + ); + + throw new Error(`${icon} is not a valid icon`); + }, +}); diff --git a/apps/www/package.json b/apps/www/package.json index 347795ad2..c7067f8ed 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -7,7 +7,8 @@ "dev": "next dev", "start": "next start", "postinstall": "fumadocs-mdx", - "clean": "rimraf node_modules .next .source" + "clean": "rimraf node_modules .next .source", + "fix": "pnpm -w run fix" }, "dependencies": { "@icons-pack/react-simple-icons": "^13.7.0", @@ -31,13 +32,14 @@ "tailwindcss-animate": "^1.0.7" }, "devDependencies": { + "@ark/util": "^0.49.0", + "@tailwindcss/postcss": "^4.1.13", + "@types/mdx": "^2.0.13", "@types/node": "24.3.1", "@types/react": "^19.1.12", "@types/react-dom": "^19.1.9", - "typescript": "^5.9.2", - "@types/mdx": "^2.0.13", - "@tailwindcss/postcss": "^4.1.13", + "postcss": "^8.5.6", "tailwindcss": "^4.1.13", - "postcss": "^8.5.6" + "typescript": "^5.9.2" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f93bb432..e4d1b4bf6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -152,6 +152,9 @@ importers: specifier: ^1.0.7 version: 1.0.7(tailwindcss@4.1.13) devDependencies: + '@ark/util': + specifier: ^0.49.0 + version: 0.49.0 '@tailwindcss/postcss': specifier: ^4.1.13 version: 4.1.13 From ab27b15c6d74220d0ac9cc4624575df4e1805329 Mon Sep 17 00:00:00 2001 From: Yam Borodetsky Date: Fri, 12 Sep 2025 16:32:28 +0500 Subject: [PATCH 7/7] Update apps/www/lib/source.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- apps/www/lib/source.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/apps/www/lib/source.tsx b/apps/www/lib/source.tsx index be119d490..a09f9293d 100644 --- a/apps/www/lib/source.tsx +++ b/apps/www/lib/source.tsx @@ -26,13 +26,7 @@ export const source = loader({ if (icon in icons) return createElement(icons[icon as never]); if (icon === "New") - return ( - - new - - ); + return new; throw new Error(`${icon} is not a valid icon`); },