svelte-pagedjs/README.md

A Svelte wrapper for PagedJS, providing easy pagination and print layout capabilities for your Svelte applications.

# svelte-pagedjs

A Svelte wrapper for PagedJS, providing easy pagination and print layout capabilities for your Svelte applications.

## Installation

```bash
npm install svelte-pagedjs pagedjs
```

## Features

- 📑 Page-based content layout
- 🖨️ Print-optimized rendering
- 📏 Automatic content resizing
- ✏️ Editable content support
- 📊 Performance metrics
- 🎨 Custom CSS styling support

## Usage

```svelte
<script lang="ts">
  import { Pagedjs } from 'svelte-pagedjs';

  // Optional configuration
  const options = {
    enableContentEditable: true,
    autoResize: true,
    scaleWidth: 0.9,
    cssFiles: ['path/to/your/styles.css'],
    showMetrics: true
  };
</script>

<Pagedjs {...options}>
  <!-- Your content here -->
  <div>
    <h1>My Paged Content</h1>
    <p>This content will be paginated...</p>
  </div>
</Pagedjs>
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `enableContentEditable` | boolean | `false` | Makes the content editable after rendering |
| `autoResize` | boolean | `false` | Enables automatic resizing of content |
| `scaleWidth` | number | `0.9` | Scale factor for content width (0-1) |
| `cssFiles` | string[] | `[]` | Array of CSS file paths to apply |
| `showMetrics` | boolean | `false` | Shows rendering performance metrics |

## Performance Metrics

When `showMetrics` is enabled, the component displays a performance dashboard showing:
- Total number of pages rendered
- Rendering time
- Start and completion timestamps

## Server-Side Rendering (SSR)

The component is SSR-friendly and automatically detects browser environment using `esm-env`.

## TypeScript Support

Full TypeScript support is included. Types are exported for easy integration:

```typescript
import type { PagedjsProps, PerformanceMetrics } from 'svelte-pagedjs';
```

## Example

```svelte
<script lang="ts">
  import { Pagedjs } from 'svelte-pagedjs';
</script>

<Pagedjs
  enableContentEditable={true}
  autoResize={true}
  showMetrics={true}
>
  <article>
    <h1>Chapter 1</h1>
    <p>Your content here...</p>
  </article>
</Pagedjs>
```

## Event Handling

The component automatically handles:
- Window resize events for responsive layouts
- Content editable toggling
- Cleanup on component destruction

## Browser Support

Works in modern browsers that support CSS Custom Properties and CSS Grid.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT

## Acknowledgements

Built on top of [PagedJS](https://pagedjs.org/)