Merge pull request #1 from jill64/dev

Dev

.eslintignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+dist
+build
+.svelte-kit
+.env
+pnpm-lock.yaml

.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:svelte/recommended',
+    'prettier'
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte']
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ]
+}

.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on: push
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: true
+      - run: pnpm lint
+      - run: pnpm build
+      - run: pnpm check

.github/workflows/e2e-test.yml

@@ -0,0 +1,22 @@
+name: E2E Test
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  e2e-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v2.4.0
+        with:
+          version: latest
+          run_install: true
+      - run: pnpx playwright install
+      - run: pnpm build
+      - run: pnpm test

.github/workflows/publish.yml

@@ -0,0 +1,23 @@
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      - uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: true
+      - run: pnpm build
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+dist
+build
+.svelte-kit
+.env

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

.prettierignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+dist
+build
+.svelte-kit
+.env
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "none"
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": true
+  }
+}

README.md

@@ -1,2 +1,72 @@
 # svelte-pagination
+
 Pagination component for Svelte
+
+## Install
+
+```sh
+npm i -D @jill64/svelte-pagination
+```
+
+## Quick Example
+
+```svelte
+<!-- /src/route/[page=int]/+page.svelte -->
+<script>
+  import { Paginate } from '@jill64/svelte-pagination'
+
+  export let data
+
+  $: ({ lastPage } = data)
+</script>
+
+<Paginate {lastPage} slug="[page=int]" />
+```
+
+## Key Feature
+
+This component uses SvelteKit route parameters for page management.  
+This enables SvelteKit features like preloading and prefetching when out of the box.  
+Therefore, it is necessary to pass the ID of the route parameter that manages the number of pages to the `Paginate` component as the `slug` property.
+
+## Optional Props
+
+| name            | default       | description                         |
+| --------------- | ------------- | ----------------------------------- |
+| `sideSize`      | `2`           | Number of pages from start/end page |
+| `centerSize`    | `3`           | Number of pages from current page   |
+| `previousLabel` | `＜ Previous` | Previous button label               |
+| `nextLabel`     | `Next ＞`     | Next button label                   |
+
+## Calculate Last Page
+
+You can also use the included utility functions to calculate the last page.
+
+```svelte
+<!-- /src/route/[page=int]/+page.svelte -->
+<script>
+  import { Paginate, calcLastPage } from '@jill64/svelte-pagination'
+
+  export let data
+
+  $: ({ totalCount } = data)
+</script>
+
+<Paginate
+  lastPage={calcLastPage({
+    total: totalCount
+    per: 30 // Count per page
+  })}
+  slug="[page=int]"
+/>
+```
+
+## Styling
+
+| class                      | description            |
+| -------------------------- | ---------------------- |
+| `.paginate-container`      | Container Area         |
+| `.paginate-page-link`      | Page Link              |
+| `.paginate-navigation`     | Navigation Link        |
+| `.paginate-rest-indicator` | Rest Indicator (...)   |
+| `.paginate-current-page`   | Current Page Indicator |

package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@jill64/svelte-pagination",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Pagination component for Svelte",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "author": "jill64 <intents.turrets0h@icloud.com> (https://github.com/jill64)",
+  "bugs": "https://github.com/jill64/svelte-pagination/issues",
+  "homepage": "https://github.com/jill64/svelte-pagination#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "pagination"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jill64/svelte-pagination.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm package",
+    "preview": "pnpm build && vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write . --plugin prettier-plugin-svelte .",
+    "lint": "prettier --check . --plugin prettier-plugin-svelte . && eslint .",
+    "test": "playwright test"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^1.0.0",
+    "svelte": "^4.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.37.1",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.24.1",
+    "@sveltejs/package": "^2.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-svelte": "^2.33.1",
+    "prettier": "^3.0.3",
+    "prettier-plugin-svelte": "^3.0.3",
+    "publint": "^0.2.2",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  },
+  "dependencies": {
+    "@jill64/attempt": "^0.1.1",
+    "@types/lodash": "^4.14.198",
+    "lodash": "^4.17.21",
+    "svelte-loading-spinners": "^0.3.4"
+  }
+}

playwright.config.ts

@@ -0,0 +1,14 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: 'pnpm preview',
+    port: 4173
+  },
+  testDir: 'tests',
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  fullyParallel: true,
+  workers: '100%'
+}
+
+export default config