Fix Array defaults bug in Vite-plugin#224
Conversation
…round - Updated dependencies in pnpm-lock.yaml, including vitest and jsdom. - Added new environment variables (VITE_MY_NUMBER, VITE_MY_VAR, VITE_MY_BOOLEAN) to the Vite development environment. - Enhanced the Vite configuration to utilize the new environment variables. - Updated the App component to display the new environment variables. These changes improve the development experience and ensure compatibility with the latest dependencies.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
🦋 Changeset detectedLatest commit: a428471 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughUpdates the Vite playground to define and render new VITE_* env vars, adds dependencies for env typing/validation, and adjusts the plugin’s TypeScript generics to accept broader schemas. Adds a Changeset note documenting array default support. Also adds a scripts entry in the plugin package.json. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Developer
participant Vite as Vite Build
participant Plugin as @arkenv/vite-plugin
participant ArkType as ArkType/arkenv type()
participant Env as process.env
Dev->>Vite: run dev/build
Vite->>Plugin: initialize with EnvSchema<T>
Plugin->>Env: read VITE_* variables
Plugin->>ArkType: validate/parse with type() [+ defaults]
ArkType-->>Plugin: parsed values (string/number/boolean/array)
Plugin-->>Vite: define import.meta.env entries
Vite-->>Dev: bundle with injected env values
note over ArkType,Plugin: Defaults may be provided via type().default(() => ...)<br/>Including array defaults like string[]
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
- Introduced VITE_MY_NUMBER, VITE_MY_VAR, and VITE_MY_BOOLEAN to the Vite production environment configuration. - These additions enhance the flexibility and configurability of the Vite playground setup. This update improves the development experience by allowing for more dynamic environment configurations.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/playgrounds/vite/.env.development (1)
2-4: LGTM! Environment variables properly defined.The three new VITE-prefixed variables are correctly configured for client-side exposure in Vite. The values are appropriate for a playground/demo environment.
The static analysis tool suggests two optional style improvements:
- Add a blank line at the end of the file
- Alphabetically order the keys (VITE_MY_BOOLEAN before VITE_MY_NUMBER)
Apply this diff if you'd like to address the style hints:
PORT=1234 +VITE_MY_BOOLEAN=true VITE_MY_NUMBER=123 VITE_MY_VAR=hey -VITE_MY_BOOLEAN=true +apps/playgrounds/vite/.env.production (1)
2-4: LGTM! Production environment variables match development.The environment variables are correctly mirrored from the development configuration, ensuring consistency across environments.
The same optional style improvements apply here:
PORT=1234 +VITE_MY_BOOLEAN=true VITE_MY_NUMBER=123 VITE_MY_VAR=hey -VITE_MY_BOOLEAN=true +
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
.changeset/famous-animals-thank.md(1 hunks)apps/playgrounds/vite/.env.development(1 hunks)apps/playgrounds/vite/.env.production(1 hunks)apps/playgrounds/vite/package.json(1 hunks)apps/playgrounds/vite/src/App.tsx(1 hunks)apps/playgrounds/vite/vite.config.ts(1 hunks)packages/vite-plugin/package.json(1 hunks)packages/vite-plugin/src/index.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (7)
apps/playgrounds/vite/.env.development (2)
packages/vite-plugin/src/index.test.ts (3)
config(39-72)vi(78-81)vi(27-31)examples/with-vite-react-ts/src/App.tsx (1)
App(6-34)
.changeset/famous-animals-thank.md (2)
packages/arkenv/src/type.test.ts (6)
envType(202-217)envType(192-200)it(4-218)envType(86-108)envType(29-47)envType(154-169)packages/arkenv/src/array-defaults-integration.test.ts (3)
Thing(5-12)env(14-30)it(4-45)
packages/vite-plugin/src/index.ts (1)
packages/arkenv/src/create-env.ts (1)
EnvSchema(7-7)
apps/playgrounds/vite/.env.production (2)
examples/with-vite-react-ts/src/App.tsx (1)
App(6-34)packages/vite-plugin/src/index.test.ts (5)
line(149-152)config(39-72)vi(78-81)vi(27-31)vi(33-37)
apps/playgrounds/vite/src/App.tsx (1)
examples/with-vite-react-ts/src/App.tsx (2)
App(6-34)setCount(21-21)
apps/playgrounds/vite/package.json (4)
packages/vite-plugin/src/index.test.ts (4)
config(39-72)beforeEach(77-128)line(149-152)vi(33-37)packages/arkenv/src/index.test.ts (3)
vi(65-81)vi(25-35)vi(37-47)packages/arkenv/src/type.test.ts (1)
it(4-218)packages/arkenv/src/create-env.test.ts (1)
env(88-99)
apps/playgrounds/vite/vite.config.ts (2)
packages/vite-plugin/src/index.ts (1)
arkenv(10-19)packages/arkenv/src/type.ts (1)
type(3-3)
🪛 dotenv-linter (3.3.0)
apps/playgrounds/vite/.env.development
[warning] 4-4: [EndingBlankLine] No blank line at the end of the file
(EndingBlankLine)
[warning] 4-4: [UnorderedKey] The VITE_MY_BOOLEAN key should go before the VITE_MY_NUMBER key
(UnorderedKey)
apps/playgrounds/vite/.env.production
[warning] 4-4: [UnorderedKey] The VITE_MY_BOOLEAN key should go before the VITE_MY_NUMBER key
(UnorderedKey)
🔇 Additional comments (6)
packages/vite-plugin/package.json (1)
52-53: LGTM! Scripts properly delegate to workspace root.The new scripts follow the established monorepo pattern of delegating to workspace-level commands. This maintains consistency across packages.
apps/playgrounds/vite/package.json (1)
15-16: LGTM! Dependencies correctly added for environment handling.The new dependencies are appropriate:
arkenvandarktypeenable the type-safe environment variable configuration demonstrated in vite.config.ts@julr/vite-plugin-validate-envprovides additional validation capabilities- The arktype version matches the peer dependency requirement in the plugin
Also applies to: 21-21
.changeset/famous-animals-thank.md (1)
1-35: LGTM! Changeset documentation is clear and comprehensive.The changeset effectively documents:
- The problem (overly restrictive type constraints)
- The solution (accepting any string-keyed record with ArkType validation)
- Usage examples showing array defaults
- Reference to the related core library fix
The example code demonstrates the key feature clearly and aligns with the PR objectives.
apps/playgrounds/vite/src/App.tsx (1)
31-43: Verify the environment variable types at runtime.The UI correctly displays the environment variables and their types. However, note that Vite's
import.meta.envtypically exposes all VITE_* variables as strings unless explicitly transformed.Looking at the plugin implementation (packages/vite-plugin/src/index.ts), the
createEnvcall validates the schema during the config hook but doesn't transform the values injected intoimport.meta.env. This means:
VITE_MY_NUMBERwill be the string"123"(type:string)VITE_MY_BOOLEANwill be the string"true"(type:string)VITE_MY_VARwill be"hey"(type:string)The parsing logic in vite.config.ts (lines 12-13) validates the schema but doesn't affect the runtime values exposed to the client.
Run the dev server and verify the displayed types in the browser. If they're all strings (as expected), consider updating the config to use Vite's
defineoption to inject the parsed values, or document this behavior for clarity.apps/playgrounds/vite/vite.config.ts (1)
3-3: LGTM! Schema definitions are well-structured.The type import and schema definitions follow arkenv patterns correctly:
- String type for VITE_MY_VAR
- Parsing logic for numeric and boolean values using
.pipe()Note that this plugin validates the environment schema during the config phase but doesn't transform the values exposed to the client code via
import.meta.env. The VITE_* variables will still be strings at runtime in the browser.If you need the parsed types in the client code, consider using Vite's
defineoption to inject the transformed values:export default defineConfig({ define: { 'import.meta.env.VITE_MY_NUMBER': 123, 'import.meta.env.VITE_MY_BOOLEAN': true, }, plugins: [ react(), arkenv({ VITE_MY_VAR: "string", VITE_MY_NUMBER: type("string").pipe((str) => Number.parseInt(str, 10)), VITE_MY_BOOLEAN: type("string").pipe((str) => str === "true"), }), ], });Alternatively, if this is intentional (validation-only), consider documenting this behavior.
Also applies to: 11-13
packages/vite-plugin/src/index.ts (1)
5-12: LGTM! Type constraint correctly relaxed to support array defaults.The change from
Record<string, string | undefined>toRecord<string, unknown>is the key fix that enables array defaults usingtype("array[]").default(() => [...])syntax. The TODO comment appropriately acknowledges this is pragmatic rather than ideal.This change:
- Allows broader schema definitions (arrays, numbers, booleans with defaults)
- Maintains type safety through ArkType's validation system
- Preserves const-correctness with the
const Tgeneric parameter- Delegates type checking to ArkType's
EnvSchema<T>typeThe TODO is reasonable—finding a more precise type that matches ArkType's accepted schemas would be ideal but may require deep integration with ArkType's internal type system. The current approach is a pragmatic solution that unblocks the feature.
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @arkenv/vite-plugin@0.0.14 ### Patch Changes - #### Support array defaults using `type().default()` syntax _[`#224`](#224) [`ecf9b64`](ecf9b64) [@yamcodes](https://github.com/yamcodes)_ Fix to an issue where `type("array[]").default(() => [...])` syntax was not accepted by the plugin due to overly restrictive type constraints. The plugin now accepts any string-keyed record while still maintaining type safety through ArkType's validation system. ##### New Features - Array defaults to empty using `type("string[]").default(() => [])` syntax - Support for complex array types with defaults - Mixed schemas combining string-based and type-based defaults ##### Example ```typescript // vite.config.ts import arkenv from "@arkenv/vite-plugin"; import { type } from "arkenv"; export default defineConfig({ plugins: [ arkenv({ ALLOWED_ORIGINS: type("string[]").default(() => ["localhost"]), FEATURE_FLAGS: type("string[]").default(() => []), PORT: "number.port", }), ], }); ``` > [!NOTE] > This is the same fix as in [`arkenv@0.7.2` (the core library)](https://github.com/yamcodes/arkenv/releases/tag/arkenv%400.7.2), but for the Vite plugin. - #### Fix `import.meta.env` not respecting morphed environment variables _[`#227`](#227) [`d41878f`](d41878f) [@yamcodes](https://github.com/yamcodes)_ The Vite plugin now properly exposes transformed environment variables through `import.meta.env`. Previously, type transformations (`string → number`, `string → boolean`) and default values were lost because the plugin only called `createEnv()` without integrating the results with Vite's environment system. Now the plugin uses Vite's `define` option to expose the morphed values, ensuring all schema transformations are respected. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This PR contains the following updates: | Package | Change | Age | Confidence | |---|---|---|---| | [@arkenv/vite-plugin](https://arkenv.js.org) ([source](https://redirect.github.com/yamcodes/arkenv)) | [`^0.0.10` -> `^0.0.14`](https://renovatebot.com/diffs/npm/@arkenv%2fvite-plugin/0.0.10/0.0.14) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>yamcodes/arkenv (@​arkenv/vite-plugin)</summary> ### [`v0.0.14`](https://redirect.github.com/yamcodes/arkenv/releases/tag/%40arkenv/vite-plugin%400.0.14) [Compare Source](https://redirect.github.com/yamcodes/arkenv/compare/@arkenv/vite-plugin@0.0.13...@arkenv/vite-plugin@0.0.14) ##### Patch Changes - #### Support array defaults using `type().default()` syntax *[`#224`](https://redirect.github.com/yamcodes/arkenv/pull/224) [`ecf9b64`](https://redirect.github.com/yamcodes/arkenv/commit/ecf9b64a680d3af5c5786b288fda35608590f7a9) [@​yamcodes](https://redirect.github.com/yamcodes)* Fix to an issue where `type("array[]").default(() => [...])` syntax was not accepted by the plugin due to overly restrictive type constraints. The plugin now accepts any string-keyed record while still maintaining type safety through ArkType's validation system. ##### New Features - Array defaults to empty using `type("string[]").default(() => [])` syntax - Support for complex array types with defaults - Mixed schemas combining string-based and type-based defaults ##### Example ```typescript // vite.config.ts import arkenv from "@​arkenv/vite-plugin"; import { type } from "arkenv"; export default defineConfig({ plugins: [ arkenv({ ALLOWED_ORIGINS: type("string[]").default(() => ["localhost"]), FEATURE_FLAGS: type("string[]").default(() => []), PORT: "number.port", }), ], }); ``` > \[!NOTE] > This is the same fix as in [`arkenv@0.7.2` (the core library)](https://redirect.github.com/yamcodes/arkenv/releases/tag/arkenv%400.7.2), but for the Vite plugin. - #### Fix `import.meta.env` not respecting morphed environment variables *[`#227`](https://redirect.github.com/yamcodes/arkenv/pull/227) [`d41878f`](https://redirect.github.com/yamcodes/arkenv/commit/d41878fe9cc2524f06ac2f0ef35f2f5ba58ee06b) [@​yamcodes](https://redirect.github.com/yamcodes)* The Vite plugin now properly exposes transformed environment variables through `import.meta.env`. Previously, type transformations (`string → number`, `string → boolean`) and default values were lost because the plugin only called `createEnv()` without integrating the results with Vite's environment system. Now the plugin uses Vite's `define` option to expose the morphed values, ensuring all schema transformations are respected. ### [`v0.0.13`](https://redirect.github.com/yamcodes/arkenv/releases/tag/%40arkenv/vite-plugin%400.0.13) [Compare Source](https://redirect.github.com/yamcodes/arkenv/compare/@arkenv/vite-plugin@0.0.12...@arkenv/vite-plugin@0.0.13) ##### Patch Changes - #### Support Vite 2.x *[`#212`](https://redirect.github.com/yamcodes/arkenv/pull/212) [`bfe08f6`](https://redirect.github.com/yamcodes/arkenv/commit/bfe08f6d9f21352186420f0f68611840e164da52) [@​yamcodes](https://redirect.github.com/yamcodes)* Extended the supported Vite versions to include **2.9.18** through **7.x** (inclusive). Also, we've added the `vite-plugin` keyword to the `package.json`, and a section in the `README.md` explaining why this plugin is a Vite only plugin (and not a Rollup plugin). <details><summary>Updated 1 dependency</summary> <small> [`e554e2b`](https://redirect.github.com/yamcodes/arkenv/commit/e554e2b41aab1b8e29d873982ea587c069f4732d) </small> - `arkenv@0.7.3` </details> ### [`v0.0.12`](https://redirect.github.com/yamcodes/arkenv/releases/tag/%40arkenv/vite-plugin%400.0.12) [Compare Source](https://redirect.github.com/yamcodes/arkenv/compare/@arkenv/vite-plugin@0.0.11...@arkenv/vite-plugin@0.0.12) ##### Patch Changes <details><summary>Updated 1 dependency</summary> <small> [`e50dba1`](https://redirect.github.com/yamcodes/arkenv/commit/e50dba1f19418f8fc007dc786df1172067e3d07c) </small> - `arkenv@0.7.2` </details> ### [`v0.0.11`](https://redirect.github.com/yamcodes/arkenv/releases/tag/%40arkenv/vite-plugin%400.0.11) [Compare Source](https://redirect.github.com/yamcodes/arkenv/compare/@arkenv/vite-plugin@0.0.10...@arkenv/vite-plugin@0.0.11) ##### Patch Changes <details><summary>Updated 1 dependency</summary> <small> [`221f9ef`](https://redirect.github.com/yamcodes/arkenv/commit/221f9efdef65691b0c5155b12ec460404dddbe82) [`221f9ef`](https://redirect.github.com/yamcodes/arkenv/commit/221f9efdef65691b0c5155b12ec460404dddbe82) </small> - `arkenv@0.7.1` </details> </details> --- ### Configuration 📅 **Schedule**: Branch creation - "on friday" (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/yamcodes/arkenv). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4xNzMuMSIsInVwZGF0ZWRJblZlciI6IjQxLjE3My4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
These changes improve the development experience and ensure compatibility with the latest dependencies.
Related: #162 #163 #199
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Chores