Vite SSR Components

https://github.com/yusukebe/vite-ssr-components
Admin
Vite SSR Components provides JSX components and Vite plugins to simplify the development and...
Tokens:2,960
Snippets:22
Trust Score:9.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install vite-ssr-components

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This command installs the vite-ssr-components package as a development dependency using npm.

```bash
npm i -D vite-ssr-components
```

--------------------------------

### Hono Server Code with Vite SSR Components

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Example server-side code using Hono framework and vite-ssr-components for rendering HTML. It includes necessary imports for ViteClient, Script, and Link components.

```tsx
import { Hono } from 'hono'
import { Script, Link, ViteClient } from 'vite-ssr-components/hono'

const app = new Hono()

app.get('/', (c) => {
  return c.html(
    <html>
      <head>
        <ViteClient />
        <Script src='/src/client.tsx' />
        <Link href='/src/style.css' rel='stylesheet' />
      </head>
      <body>
        <div id='root' />
      </body>
    </html>
  )
})
```

--------------------------------

### Auto-Entry Detection Example with Script and Link Components

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This example illustrates how the auto-entry detection feature of the vite-ssr-components SSR plugin works. It shows a React component where <Script> and <Link> tags are used with 'src' and 'href' attributes respectively. The plugin will automatically identify these and add the linked files to the build input.

```tsx
// src/pages/home.tsx
function HomePage() {
  return (
    <html>
      <head>
        <Script src='/src/client.tsx' />
        <Link href='/src/style.css' rel='stylesheet' />
      </head>
    </html>
  )
}

// src/pages/about.tsx
function AboutPage() {
  return (
    <html>
      <head>
        <Script src='/src/about-client.tsx' />
        <Link href='/src/about.css' rel='stylesheet' />
      </head>
    </html>
  )
}

// The plugin will automatically detect and add these files to the build:
// - /src/client.tsx
// - /src/style.css
// - /src/about-client.tsx
// - /src/about.css
```

--------------------------------

### Configure Vite SSR Plugin with Custom Entry and Components

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This example demonstrates advanced configuration of the vite-ssr-components SSR plugin. It allows you to specify custom file patterns for entry detection and define multiple component types with their corresponding attributes for path extraction. Hot reload targets and ignored files can also be customized.

```typescript
// Basic usage
export default defineConfig({
  plugins: [ssrPlugin()],
})

// Custom file patterns and component configurations
export default defineConfig({
  plugins: [
    ssrPlugin({
      entry: {
        target: ['src/**/*.tsx', 'app/**/*.ts'], // Scan multiple patterns
        components: [
          { name: 'Script', attribute: 'src' },
          { name: 'Link', attribute: 'href' },
          { name: 'CustomScript', attribute: 'source' },
          { name: 'CustomLink', attribute: 'url' },
          { name: 'Foo', attribute: 'bar' },
          { name: 'DataLoader', attribute: 'dataPath' },
          { name: 'AssetLoader', attribute: 'assetUrl' },
        ],
      },
      hotReload: {
        target: ['src/**/*.ts', 'src/**/*.tsx'],
        ignore: ['src/client/**/*'],
      },
    }),
  ],
})
```

--------------------------------

### React ViteClient Component Usage

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Example of using the ViteClient component within a React application's head section to include the Vite client script during development.

```tsx
import { ViteClient } from 'vite-ssr-components/react'

function App() {
  return (
    <html>
      <head>
        <ViteClient />
      </head>
    </html>
  )
}
```

--------------------------------

### Hono/JSX ViteClient Component Usage

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Example of using the ViteClient component within a Hono/JSX application's head section to include the Vite client script during development.

```tsx
import { ViteClient } from 'vite-ssr-components/hono'

function App() {
  return (
    <html>
      <head>
        <ViteClient />
      </head>
    </html>
  )
}
```

--------------------------------

### React Server Code with Vite SSR Components

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Server-side rendering example for React applications using Hono and vite-ssr-components. It utilizes renderToReadableStream from react-dom/server and includes ReactRefresh for hot reloading.

```tsx
import { Hono } from 'hono'
import { Script, Link, ViteClient, ReactRefresh } from 'vite-ssr-components/react'
import { renderToReadableStream } from 'react-dom/server'

const app = new Hono()

app.get('/', async (c) => {
  c.header('Content-Type', 'text/html')
  return c.body(
    await renderToReadableStream(
      <html>
        <head>
          <ViteClient />
          <ReactRefresh />
          <Script src='/src/client/index.tsx' />
          <Link href='/src/style.css' rel='stylesheet' />
        </head>
        <body>
          <div id='root' />
        </body>
      </html>
    )
  )
})
```

--------------------------------

### Configure Vite SSR Plugin Basic Usage

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This is the most basic configuration for the vite-ssr-components SSR plugin. It enables the core functionality of auto-entry detection and SSR hot reload without any custom options. This setup is typically placed in your vite.config.ts file.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import ssrPlugin from 'vite-ssr-components/plugin'

export default defineConfig({
  plugins: [ssrPlugin()],
})
```

--------------------------------

### Enable React Fast Refresh with Vite SSR

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This snippet shows how to integrate React Fast Refresh into your React application using vite-ssr-components. It requires the '@vitejs/plugin-react' to be installed and configured. The ReactRefresh component should be included within the head of your HTML structure to enable fast refresh during development.

```tsx
import { ReactRefresh } from 'vite-ssr-components/react'

function App() {
  return (
    <html>
      <head>
        <ReactRefresh />
      </head>
    </html>
  )
}
// Adds React refresh runtime in development mode
```

--------------------------------

### Custom Component Detection in Vite SSR Plugin

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This example demonstrates how to configure the vite-ssr-components SSR plugin to detect custom components and extract file paths from specific attributes. It shows various custom components like CustomScript, CustomLink, Foo, DataLoader, and AssetLoader with their respective attributes (source, url, bar, dataPath, assetUrl). The plugin accurately identifies paths based on the configured attribute for each component.

```tsx
// Custom components in your SSR code
function App() {
  return (
    <html>
      <head>
        <CustomScript source='/src/app.js' />
        <CustomLink url='/src/main.css' />
        <Foo bar='/src/data.json' />
        <DataLoader dataPath='/src/config.json' />
        <AssetLoader assetUrl='/src/assets/image.png' />
      </head>
    </html>
  )
}

// The plugin will automatically:
// - Detect `CustomScript` components and extract paths from the `source` attribute
// - Detect `CustomLink` components and extract paths from the `url` attribute
// - Detect `Foo` components and extract paths from the `bar` attribute
// - And so on...

// Each component type only looks for its specified attribute, ensuring accurate detection:

// Only the correct attributes are detected for each component
<Script href="/src/wrong.css" src="/src/client.tsx" />  // Only 'src' is detected
<Link src="/src/wrong.js" href="/src/style.css" />     // Only 'href' is detected
```

--------------------------------

### File Pattern Matching Configuration

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Demonstrates how to configure file pattern matching for the vite-ssr-components plugin using glob patterns. Supports single patterns, multiple patterns, and exclusion patterns.

```typescript
// Single pattern
pattern: 'src/**/*.tsx'

// Multiple patterns
pattern: ['src/**/*.tsx', 'app/**/*.ts', 'components/**/*.jsx']

// Exclude specific directories
pattern: ['src/**/*.{tsx,ts}', '!src/test/**/*']
```

--------------------------------

### Link Component with Custom Options

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Demonstrates advanced Link component usage, specifying a custom baseUrl and media query for stylesheet loading.

```tsx
<Link href='/src/style.css' rel='stylesheet' baseUrl='/app/' media='screen' />
```

--------------------------------

### Vite Configuration for Hono Integration

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Shows the vite.config.ts file for integrating vite-ssr-components with Hono framework. It includes necessary plugins like @cloudflare/vite-plugin and the ssrPlugin itself.

```typescript
import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import ssrPlugin from 'vite-ssr-components/plugin'

export default defineConfig({
  plugins: [cloudflare(), ssrPlugin()]
})
```

--------------------------------

### Script Component with Custom Options

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Illustrates advanced usage of the Script component, setting a custom baseUrl and an onLoad event handler for client-side script execution.

```tsx
<Script src='/src/client.tsx' baseUrl='/app/' defer onLoad={() => console.log('loaded')} />
```

--------------------------------

### Hono/JSX Script Component Usage

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Demonstrates using the Script component in Hono/JSX to include a client-side script. It automatically resolves production build paths from manifest.json.

```tsx
import { Script } from 'vite-ssr-components/hono'

function App() {
  return (
    <html>
      <head>
        <Script src='/src/client.tsx' />
      </head>
    </html>
  )
}
```

--------------------------------

### Vite Configuration for React Integration

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Configures Vite for React projects using vite-ssr-components. It includes cloudflare, ssrPlugin with hotReload options, and the React plugin.

```typescript
import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import react from '@vitejs/plugin-react'
import ssrPlugin from 'vite-ssr-components/plugin'

export default defineConfig({
  plugins: [
    cloudflare(),
    ssrPlugin({
      hotReload: {
        ignore: ['./src/client/**/*.tsx'],
      },
    }),
    react(),
  ],
})
```

--------------------------------

### React Script Component Usage

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Demonstrates using the Script component in React to include a client-side script. It automatically resolves production build paths from manifest.json.

```tsx
import { Script } from 'vite-ssr-components/react'

function App() {
  return (
    <html>
      <head>
        <Script src='/src/client.tsx' />
      </head>
    </html>
  )
}
```

--------------------------------

### Configure Vite SSR Plugin

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This configuration snippet shows how to integrate the vite-ssr-components plugin into your Vite build process by adding it to the plugins array in vite.config.ts.

```typescript
import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import ssrPlugin from 'vite-ssr-components/plugin'

export default defineConfig({
  plugins: [cloudflare(), ssrPlugin()],
})
```

--------------------------------

### Hono/JSX Link Component Usage

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Shows how to use the Link component in Hono/JSX for including stylesheets. In production, it resolves correct paths from manifest.json.

```tsx
import { Link } from 'vite-ssr-components/hono'

function App() {
  return (
    <html>
      <head>
        <Link href='/src/style.css' rel='stylesheet' />
      </head>
    </html>
  )
}
```

--------------------------------

### React Link Component Usage

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

Shows how to use the Link component in React for including stylesheets. In production, it resolves correct paths from manifest.json.

```tsx
import { Link } from 'vite-ssr-components/react'

function App() {
  return (
    <html>
      <head>
        <Link href='/src/style.css' rel='stylesheet' />
      </head>
    </html>
  )
}
```

--------------------------------

### Configure Vite SSR Plugin to Scan Specific Directories

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This configuration snippet shows how to restrict the auto-entry detection of the vite-ssr-components SSR plugin to a specific directory. By setting the 'target' option to 'app/**/*.tsx', the plugin will only scan files within the 'app' directory and its subdirectories for components.

```typescript
// Scan only specific directories
export default defineConfig({
  plugins: [
    ssrPlugin({
      entry: {
        target: 'app/**/*.tsx', // Only scan app directory
      },
    }),
  ],
})
```

--------------------------------

### Disable Hot Reload with Vite SSR Plugin

Source: https://github.com/yusukebe/vite-ssr-components/blob/main/README.md

This configuration demonstrates how to disable the hot reload functionality of the vite-ssr-components SSR plugin. By setting the 'hotReload' option to 'false', the plugin will not watch for file changes and trigger hot reloads during development.

```typescript
// Disable hot reload
export default defineConfig({
  plugins: [
    ssrPlugin({
      hotReload: false,
    }),
  ],
})
```
Tokens:
Raw