vibe code server-only client-only #592
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' | ||
|
|
||
| describe('server-only module', () => { | ||
| let originalEnv: string | undefined | ||
|
|
||
| beforeEach(() => { | ||
| originalEnv = process.env.VITE_ENVIRONMENT | ||
| vi.resetModules() | ||
| }) | ||
|
|
||
| afterEach(() => { | ||
| if (originalEnv !== undefined) { | ||
| process.env.VITE_ENVIRONMENT = originalEnv | ||
| } else { | ||
| delete process.env.VITE_ENVIRONMENT | ||
| } | ||
| }) | ||
|
|
||
| it('should throw an error when imported in client environment', async () => { | ||
| process.env.VITE_ENVIRONMENT = 'client' | ||
|
|
||
| await expect(async () => { | ||
| await import('../server-only') | ||
| }).rejects.toThrow('This file should only be imported on the server! Current environment: client') | ||
| }) | ||
|
|
||
| it('should not throw when imported in ssr environment', async () => { | ||
| process.env.VITE_ENVIRONMENT = 'ssr' | ||
|
|
||
| await expect(import('../server-only')).resolves.not.toThrow() | ||
| }) | ||
|
|
||
| it('should throw when VITE_ENVIRONMENT is not set', async () => { | ||
| delete process.env.VITE_ENVIRONMENT | ||
|
|
||
| await expect(async () => { | ||
| await import('../server-only') | ||
| }).rejects.toThrow('This file should only be imported on the server! Current environment: undefined') | ||
| }) | ||
| }) | ||
|
|
||
| describe('client-only module', () => { | ||
| let originalEnv: string | undefined | ||
|
|
||
| beforeEach(() => { | ||
| originalEnv = process.env.VITE_ENVIRONMENT | ||
| vi.resetModules() | ||
| }) | ||
|
|
||
| afterEach(() => { | ||
| if (originalEnv !== undefined) { | ||
| process.env.VITE_ENVIRONMENT = originalEnv | ||
| } else { | ||
| delete process.env.VITE_ENVIRONMENT | ||
| } | ||
| }) | ||
|
|
||
| it('should throw an error when imported in ssr environment', async () => { | ||
| process.env.VITE_ENVIRONMENT = 'ssr' | ||
|
|
||
| await expect(async () => { | ||
| await import('../client-only') | ||
| }).rejects.toThrow('This file should only be imported on the client! Current environment: ssr') | ||
| }) | ||
|
|
||
| it('should not throw when imported in client environment', async () => { | ||
| process.env.VITE_ENVIRONMENT = 'client' | ||
|
|
||
| await expect(import('../client-only')).resolves.not.toThrow() | ||
| }) | ||
|
|
||
| it('should throw when VITE_ENVIRONMENT is not set', async () => { | ||
| delete process.env.VITE_ENVIRONMENT | ||
|
|
||
| await expect(async () => { | ||
| await import('../client-only') | ||
| }).rejects.toThrow('This file should only be imported on the client! Current environment: undefined') | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| if (process.env.VITE_ENVIRONMENT !== 'client') { | ||
| throw new Error(`This file should only be imported on the client! Current environment: ${process.env.VITE_ENVIRONMENT}`) | ||
| } | ||
|
|
||
| export {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { describe, it, expect } from 'vitest' | ||
| import { resolve, dirname } from 'path' | ||
| import { fileURLToPath } from 'url' | ||
| import { serverClientOnlyPlugin } from '../serverClientOnlyPlugin' | ||
|
|
||
| const __filename = fileURLToPath(import.meta.url) | ||
| const __dirname = dirname(__filename) | ||
|
|
||
| describe('serverClientOnlyPlugin', () => { | ||
| const plugin = serverClientOnlyPlugin() | ||
|
|
||
| it('should have correct plugin name', () => { | ||
| expect(plugin.name).toBe('one:server-client-only') | ||
| }) | ||
|
|
||
| it('should enforce pre position', () => { | ||
| expect(plugin.enforce).toBe('pre') | ||
| }) | ||
|
|
||
| describe('config hook', () => { | ||
| it('should provide aliases for server-only and client-only modules', () => { | ||
| const config = plugin.config?.() | ||
|
|
||
| expect(config).toEqual({ | ||
| resolve: { | ||
| alias: { | ||
| 'server-only': resolve(__dirname, '../../server-only.js'), | ||
| 'client-only': resolve(__dirname, '../../client-only.js'), | ||
| }, | ||
| }, | ||
| }) | ||
| }) | ||
| }) | ||
|
|
||
| describe('resolveId hook', () => { | ||
| it('should resolve server-only module', () => { | ||
| const result = plugin.resolveId?.('server-only', undefined, {}) | ||
|
|
||
| expect(result).toEqual({ | ||
| id: resolve(__dirname, '../../server-only.js'), | ||
| external: false, | ||
| }) | ||
| }) | ||
|
|
||
| it('should resolve client-only module', () => { | ||
| const result = plugin.resolveId?.('client-only', undefined, {}) | ||
|
|
||
| expect(result).toEqual({ | ||
| id: resolve(__dirname, '../../client-only.js'), | ||
| external: false, | ||
| }) | ||
| }) | ||
|
|
||
| it('should return null for other modules', () => { | ||
| const result = plugin.resolveId?.('some-other-module', undefined, {}) | ||
|
|
||
| expect(result).toBeNull() | ||
| }) | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,34 @@ | ||||||
| import type { Plugin } from 'vite' | ||||||
| import { resolve, dirname } from 'path' | ||||||
| import { fileURLToPath } from 'url' | ||||||
|
|
||||||
| const __filename = fileURLToPath(import.meta.url) | ||||||
| const __dirname = dirname(__filename) | ||||||
|
|
||||||
| export function serverClientOnlyPlugin(): Plugin { | ||||||
| return { | ||||||
| name: 'one:server-client-only', | ||||||
| enforce: 'pre', | ||||||
|
|
||||||
| config() { | ||||||
| return { | ||||||
| resolve: { | ||||||
| alias: { | ||||||
| 'server-only': resolve(__dirname, '../server-only.js'), | ||||||
| 'client-only': resolve(__dirname, '../client-only.js'), | ||||||
|
There was a problem hiding this comment. The alias points to '../client-only.js' but the actual file is '../client-only.ts'. This will cause module resolution to fail since the .js extension doesn't match the TypeScript source file.
Suggested change
|
||||||
| }, | ||||||
| }, | ||||||
| } | ||||||
| }, | ||||||
|
|
||||||
| resolveId(source) { | ||||||
| if (source === 'server-only') { | ||||||
| return { id: resolve(__dirname, '../server-only.js'), external: false } | ||||||
|
There was a problem hiding this comment. The resolveId function points to '../server-only.js' but the actual file is '../server-only.ts'. This will cause module resolution to fail.
Suggested change
|
||||||
| } | ||||||
| if (source === 'client-only') { | ||||||
| return { id: resolve(__dirname, '../client-only.js'), external: false } | ||||||
|
There was a problem hiding this comment. The resolveId function points to '../client-only.js' but the actual file is '../client-only.ts'. This will cause module resolution to fail.
Suggested change
|
||||||
| } | ||||||
| return null | ||||||
| }, | ||||||
| } | ||||||
| } | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| if (process.env.VITE_ENVIRONMENT !== 'ssr') { | ||
| throw new Error(`This file should only be imported on the server! Current environment: ${process.env.VITE_ENVIRONMENT}`) | ||
| } | ||
|
|
||
| export {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export {}; | ||
| //# sourceMappingURL=client-only.d.ts.map |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import type { Plugin } from 'vite'; | ||
| export declare function serverClientOnlyPlugin(): Plugin; | ||
| //# sourceMappingURL=serverClientOnlyPlugin.d.ts.map |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export {}; | ||
| //# sourceMappingURL=server-only.d.ts.map |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { useState, useEffect } from 'react' | ||
| import { Button, H2, Paragraph, YStack } from 'tamagui' | ||
|
|
||
| export default function TestClientOnly() { | ||
| const [count, setCount] = useState(0) | ||
| const [browserInfo, setBrowserInfo] = useState<any>(null) | ||
|
|
||
| useEffect(() => { | ||
| // Only import client-only utilities on the client | ||
| if (typeof window !== 'undefined') { | ||
| import('../utils/client-utils').then(({ getBrowserInfo }) => { | ||
| setBrowserInfo(getBrowserInfo()) | ||
| }) | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <YStack f={1} ai="center" jc="center" gap="$4" p="$4"> | ||
| <H2>Client Only Test Page</H2> | ||
| <Paragraph>This page uses client-only utilities</Paragraph> | ||
| <Paragraph>Count: {count}</Paragraph> | ||
| <Button onPress={() => setCount(count + 1)}>Increment</Button> | ||
| <Paragraph fontSize="$2" color="$gray10"> | ||
| Environment: {typeof window !== 'undefined' ? 'client' : 'server'} | ||
| </Paragraph> | ||
| {browserInfo && ( | ||
| <Paragraph fontSize="$2" color="$gray10"> | ||
| Browser: {browserInfo.language} | ||
| </Paragraph> | ||
| )} | ||
| </YStack> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import 'server-only' | ||
| import { useLoader } from 'one' | ||
| import { H2, Paragraph, YStack } from 'tamagui' | ||
| import { getServerTime, getServerEnvironment } from '../utils/server-utils' | ||
|
|
||
| export async function loader() { | ||
| // This loader should only run on the server | ||
| const serverInfo = getServerEnvironment() | ||
| return { | ||
| message: 'This data was loaded on the server', | ||
| timestamp: getServerTime(), | ||
| ...serverInfo | ||
| } | ||
| } | ||
|
|
||
| export default function TestServerOnly() { | ||
| const data = useLoader(loader) | ||
|
|
||
| return ( | ||
| <YStack f={1} ai="center" jc="center" gap="$4" p="$4"> | ||
| <H2>Server Only Test Page</H2> | ||
| <Paragraph>This page imports 'server-only' at the top</Paragraph> | ||
| <Paragraph>Loaded data: {JSON.stringify(data, null, 2)}</Paragraph> | ||
| </YStack> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The alias points to '../server-only.js' but the actual file is '../server-only.ts'. This will cause module resolution to fail since the .js extension doesn't match the TypeScript source file.