Merge pull request #21 from svelte-plugins/update

✨ refactor(lib): fix exports, add types, and support svelte 4

.eslintrc.json

@@ -1,33 +1,33 @@
 {
-  "parser": "@babel/eslint-parser",
-  "parserOptions": {
-    "ecmaVersion": 2019,
-    "sourceType": "module"
-  },
   "env": {
-    "es6": true,
+    "es2017": true,
     "commonjs": true,
-    "browser": true,
-    "node": true,
-    "jest/globals": true
+    "node": true
   },
-  "plugins": [
-    "jest",
-    "svelte3"
-  ],
-  "extends": [
-    "eslint:recommended"
-  ],
-  "ignorePatterns": [
-    "dist",
-    "lib"
-  ],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": ["vitest"],
+  "extends": ["eslint:recommended", "plugin:vitest/recommended"],
+  "ignorePatterns": ["**/*.snap.js"],
   "overrides": [
     {
-      "files": [
-        "src/**/*.svelte"
-      ],
-      "processor": "svelte3/svelte3"
+      "files": ["*.ts"],
+      "parser": "@typescript-eslint/parser"
+    },
+    {
+      "files": ["*.svelte"],
+      "parser": "svelte-eslint-parser"
     }
-  ]
+  ],
+  "rules": {
+    "eqeqeq": "error",
+    "no-useless-escape": "off",
+    "no-unused-expressions": "off",
+    "no-inner-declarations": "off",
+    "no-unused-vars": "off",
+    "no-self-assign": "off",
+    "no-undef": "off"
+  }
 }

.github/workflows/integration.yml

@@ -3,23 +3,41 @@ on:
   push:
     branches:
       - main
+    paths:
+      - src/**
   pull_request:
     types: [opened, synchronize, reopened]
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
+    name: Tests
+    if: |
+      (
+        !contains(github.event.head_commit.message, '[skip ci]') &&
+        !contains(github.event.head_commit.message, 'version bump')
+      )
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-        registry-url: 'https://registry.npmjs.org'
-    - run: yarn
-    - run: yarn install:docs
-    - run: yarn test:integration
-    - uses: actions/upload-artifact@v2
-      if: failure()
-      with:
-        name: integration-tests
-        path: ${{ github.workspace }}/tests/artifacts/
-        retention-days: 5
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.11
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run tests
+        run: pnpm test:integration
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 5

.github/workflows/unit.yml

@@ -3,26 +3,44 @@ on:
   push:
     branches:
       - main
+    paths:
+      - src/**
   pull_request:
     types: [opened, synchronize, reopened]
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
+    name: Tests
+    if: |
+      (
+        !contains(github.event.head_commit.message, '[skip ci]') &&
+        !contains(github.event.head_commit.message, 'version bump')
+      )
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '12.x'
-        registry-url: 'https://registry.npmjs.org'
-    - run: yarn
-    - run: yarn test
-    - uses: actions/upload-artifact@v2
-      if: failure()
-      with:
-        name: unit-tests
-        path: ${{ github.workspace }}/coverage/
-        retention-days: 5
-    - uses: codecov/codecov-action@v1.3.1
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        directory: ${{ github.workspace }}/coverage/
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.11
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run tests
+        run: pnpm test
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: unit-tests
+          path: ${{ github.workspace }}/coverage/
+          retention-days: 5
+      - uses: codecov/codecov-action@v1.3.1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          directory: ${{ github.workspace }}/coverage/

.gitignore

@@ -16,13 +16,14 @@
 !.lintstagedrc
 !.husky
 !.storybook
+!.vercel
 
 # generated
-.vercel
 /node_modules
-/lib
 /dist
 
 # testing
 coverage
 artifacts
+test-results
+playwright-report

.lintstagedrc

@@ -1,3 +1,7 @@
 {
-  "./src/**/*.{js,svelte,md,mdx,json}": ["eslint --fix", "prettier --write"]
+  "./src/**/*.{test.js,js,ts,json,svelte}": [
+    "svelte-check --tsconfig ./tsconfig.json",
+    "eslint -c ./.eslintrc.json --fix",
+    "prettier --write"
+  ]
 }

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "printWidth": 180,
+  "printWidth": 120,
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": true,
@@ -9,5 +9,14 @@
   "svelteSortOrder": "options-scripts-markup-styles",
   "svelteStrictMode": false,
   "svelteBracketNewLine": true,
-  "svelteAllowShorthand": true
+  "svelteAllowShorthand": true,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
 }

CHANGELOG.md

@@ -5,6 +5,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0](https://github.com/svelte-plugins/svelte-viewable/releases/tag/v2.0.0) - 2024-02-13
+
 ## [1.0.0](https://github.com/svelte-plugins/svelte-viewable/releases/tag/v1.0.0) - 2021-04-02
 
 - Interface changes that include exposing observer props and events

README.md

@@ -4,9 +4,9 @@
 
 # @svelte-plugins/viewable
 
-A simple rule-based approach to tracking element viewability. 
+A simple rule-based approach to tracking element viewability.
 
-This provides the ability to define multiple viewability rules with callbacks for a single element. This comes in handy for instrumentation (specifically dwell time), ad tracking and beaconing, lazy-loading content or images, or doing fancy things at various trigger points. 
+This provides the ability to define multiple viewability rules with callbacks for a single element. This comes in handy for instrumentation (specifically dwell time), ad tracking and beaconing, lazy-loading content or images, or doing fancy things at various trigger points.
 
 If you're simply looking for a Svelte flavor of IntersectionObserver visit [svelte-intersection-observer](https://github.com/metonym/svelte-intersection-observer).
 
@@ -15,11 +15,14 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/47fe04909fd14ee5ad5d02390cc1
 ## Install
 
 ```bash
-yarn add -D @svelte-plugins/viewable
+# npm
+> npm install @svelte-plugins/viewable
 
-# or with NPM
+# pnpm
+> pnpm install @svelte-plugins/viewable
 
-npm i -D @svelte-plugins/viewable
+# yarn
+> yarn add @svelte-plugins/viewable
 ```
 
 ## Usage

docs/package.json

@@ -8,10 +8,10 @@
   },
   "devDependencies": {
     "@svelte-plugins/viewable": "../",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.5",
-    "autoprefixer": "^10.2.5",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "autoprefixer": "^10.4.16",
     "postcss": "^8.2.8",
-    "svelte": "^3.35.0",
-    "vite": "^2.1.3"
+    "svelte": "^4.2.8",
+    "vite": "^5.0.12"
   }
 }