@svelte-plugins/viewable - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

package.json

 {
   "name": "@svelte-plugins/viewable",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "A simple rule-based approach to tracking element viewability.",
   "author": "Kieran Boyle (https://github.com/dysfunc)",
-  "svelte": "./src/index.js",
-  "main": "./lib/index.js",
-  "module": "./lib/index.mjs",
   "sideEffects": false,
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
   "repository": {
@@ -16,3 +28,3 @@ "type": "git",
   "homepage": "https://github.com/svelte-plugins/svelte-viewable",
-  "bugs": "https://github.com/svelte-viewable/issues",
+  "bugs": "https://github.com/svelte-plugins/svelte-viewable/issues",
   "keywords": [
@@ -30,58 +42,43 @@ "viewability",
   ],
-  "files": [
-    "/lib",
-    "/src",
-    "/dist"
-  ],
-  "exports": {
-    "require": "./lib/index.js",
-    "import": "./lib/index.mjs"
-  },
   "scripts": {
-    "dev": "rollup -cw",
-    "bundle": "rollup -c",
+    "start": "pnpm --prefix ./docs install && pnpm --prefix ./docs run dev",
+    "build": "svelte-package --input ./src && pnpm lint:package",
     "deploy": "npx gh-pages -d dist",
-    "lint": "eslint --fix \"src/**/*.{.js,svelte}\"",
-    "format": "prettier --write \"src/**/*.{js,json,svelte}\"",
-    "install:docs": "yarn --cwd ./docs",
-    "test": "jest --coverage",
-    "test:coverage": "jest --coverage && open ./coverage/lcov-report/index.html",
-    "test:integration": "mkdir -p ./tests/artifacts/cdplogs && yarn bundle && yarn --cwd ./docs dev & cypress run --browser chrome --headless",
-    "test:integration:debug": "cypress open"
+    "lint": "eslint -c ./.eslintrc.json --fix \"src/**/*.{test.js,js,ts,json,svelte}\"",
+    "lint:package": "publint --strict",
+    "lint:ts": "svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write \"src/**/*.{test.js,js,ts,json,svelte}\"",
+    "test": "vitest --run --coverage",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --run --coverage && open ./coverage/index.html",
+    "test:integration": "pnpm build && npx playwright test",
+    "test:integration:debug": "npx playwright test --ui",
+    "test:integration:report": "pnpm test:integration && npx playwright show-report"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.1",
-    "@babel/eslint-parser": "^7.13.10",
-    "@babel/preset-env": "^7.13.5",
-    "@babel/runtime": "^7.13.7",
-    "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "@testing-library/cypress": "^7.0.4",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/svelte": "^3.0.3",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
-    "chalk": "^2.4.2",
-    "chromatic": "^5.7.0",
-    "chrome-remote-interface": "^0.29.0",
-    "cypress": "^6.6.0",
-    "eslint": "^7.23.0",
-    "eslint-plugin-jest": "^24.3.2",
-    "eslint-plugin-svelte3": "^3.1.2",
-    "figlet": "^1.2.4",
-    "husky": "^4.3.8",
-    "jest": "^26.6.3",
-    "jest-transform-svelte": "^2.1.1",
+    "@playwright/test": "^1.40.1",
+    "@sveltejs/package": "^2.2.4",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/svelte": "^4.0.5",
+    "@tsconfig/svelte": "^5.0.2",
+    "@types/node": "^20.10.5",
+    "@typescript-eslint/parser": "^6.18.1",
+    "@vitest/coverage-v8": "^0.34.6",
+    "eslint": "^8.54.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-vitest": "^0.3.10",
+    "husky": "^6.0.0",
+    "jsdom": "^23.0.0",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
-    "prettier-plugin-svelte": "^2.1.6",
-    "rollup": "^2.39.1",
-    "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.35.0",
-    "svelte-loader": "^3.0.0"
+    "prettier": "^3.1.0",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.2.7",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "svelte-preprocess": "^5.1.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.12",
+    "vitest": "^0.34.6"
   }
 }

README.md

@@ -7,5 +7,5 @@ [![Unit Tests](https://github.com/svelte-plugins/viewable/actions/workflows/unit.yml/badge.svg)](https://github.com/svelte-plugins/viewable/actions/workflows/unit.yml)
 
-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.
 
@@ -19,7 +19,10 @@ If you're simply looking for a Svelte flavor of IntersectionObserver visit [svelte-intersection-observer](https://github.com/metonym/svelte-intersection-observer).
 ```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
 ```
@@ -30,3 +33,3 @@
 <script>
-  import Viewable from "@svelte-plugins/viewable";
+  import { Viewable } from "@svelte-plugins/viewable";
 
@@ -44,3 +47,3 @@ const immediately = (definition) => {
     immediately: { duration: 0, percentage: 0, fn: immediately },
-    // do something when 50% of the element is visible for 4 seconds (consecutively)
+    // do something when 50% of the element is visible for 4.5 seconds (consecutively)
     dwell: { duration: 4.5, percentage: 50, fn: dwell },
@@ -57,3 +60,3 @@ };
 
-Try the basic example in [Svelte REPL](https://svelte.dev/repl/c811481b8e1b48e9bed0f6ff7d1fa9c2).
+Try the basic example in [Svelte REPL](https://svelte.dev/repl/c97c9abb9c944647a7dfed8f90d01da6?version=3.37.0).
 
@@ -69,3 +72,3 @@ ## API
 | gridSize     | Size of the obstruction grid                                      | `number` (default: `20`)                                                                        |
-| detectObstructions | If `true`, obstructions impacting the element will affect measurement | 'boolean' (default: `false`)                                                          |
+| detectObstructions | If `true`, obstructions impacting the observed elements view will be a factor during measurement | `boolean` (default: `false`)                                                          |
 | root         | Containing element                                                | `null` or `HTMLElement` (default: `null`)                                                       |
@@ -75,3 +78,3 @@ | rootMargin   | Margin offset of the containing element                           | `string` (default: `"0px"`)                                                                     |
 | observer     | IntersectionObserver instance                                     | [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) |
-| entry        | Observed element metadata                                         | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
+| entry        | IntersectionObserver Entry                                           | [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
 | debug        | If `true`, debug ouput will be logged to console                  | `boolean` (default: `false`)                                                                    |
@@ -110,4 +113,5 @@
 | percentY     | Percentage of vertical viewable area                              | `number` (default: `0`) |
+| entry        | IntersectionObserver Entry                                        | `object` (default: `null`) |
+| observer     | IntersectionObserver                                              | `object` (default: `null`) |
 
-
 ### Events
@@ -119,2 +123,10 @@
 
+## Development
+
+Read the [Contributions](CONTRIBUTING.md) for instructions on how to setup your development environment.
+
+## Contributing
+
+Contributions are always welcome and appreciated. Before contributing, please read the [Code of Conduct](COC.md).
+
 ## Changelog
@@ -121,0 +133,0 @@

src/index.js

@@ -1,1 +0,1 @@
-export { default } from './Viewable.svelte';
+export { default as Viewable } from './Viewable.svelte';

src/Viewable.snap.js

@@ -1,4 +0,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Viewable_test should render the component 1`] = `
+exports[`Proxy<Viewable.test> > should render the component 1`] = `
 <body>
@@ -9,4 +9,18 @@ <div>
     </div>
+    <!--&lt;Viewable&gt;-->
+    <!--&lt;Viewable.test&gt;-->
   </div>
 </body>
 `;
+
+exports[`Viewable > should render the component 1`] = `
+<body>
+  <div>
+    <div>
+      Hello World!
+    </div>
+    <!--&lt;Viewable&gt;-->
+    <!--&lt;Viewable.test&gt;-->
+  </div>
+</body>
+`;

src/Viewable.test.js

 import { render } from '@testing-library/svelte';
 import Viewable from './Viewable.test.svelte';
 
-jest.useFakeTimers();
+vi.useFakeTimers();
 
-describe(Viewable.name, () => {
+describe('Viewable', () => {
   let onIntersectionMock;
@@ -14,3 +14,3 @@
         percentage: 0,
-        fn: jest.fn()
+        fn: vi.fn()
       }
@@ -25,3 +25,3 @@ }
       constructor(onIntersection) {
-        onIntersectionMock = jest.fn(onIntersection);
+        onIntersectionMock = vi.fn(onIntersection);
       }
@@ -33,9 +33,9 @@ disconnect() {}
 
-    document.elementFromPoint = jest.fn();
+    document.elementFromPoint = vi.fn();
 
-    DEFAULT_CONFIG.rules.immediate.fn = jest.fn();
+    DEFAULT_CONFIG.rules.immediate.fn = vi.fn();
   });
 
   afterEach(() => {
-    jest.clearAllTimers();
+    vi.clearAllTimers();
   });
@@ -58,3 +58,3 @@
   it('should execute rules when duration and percentage have been meet (immediate)', async () => {
-    const mock = jest.fn();
+    const mock = vi.fn();
 
@@ -65,3 +65,3 @@ await TestHarness({ debug: true, detectObstructions: true, rules: { immediate: { fn: mock } } });
 
-    jest.runAllTimers();
+    vi.runAllTimers();
 
@@ -72,7 +72,7 @@ expect(mock).toHaveBeenCalled();
   it('should execute rules when duration and percentage have been meet (delayed)', async () => {
-    const mockDateNow = jest.fn();
+    const mockDateNow = vi.fn();
 
     global.Date.now = mockDateNow;
 
-    const fn = jest.fn();
+    const fn = vi.fn();
 
@@ -92,3 +92,3 @@ const { container } = await TestHarness({
 
-    element.getBoundingClientRect = jest.fn(() => ({
+    element.getBoundingClientRect = vi.fn(() => ({
       width: 100,
@@ -102,3 +102,3 @@ height: 100,
 
-    document.elementFromPoint = jest.fn().mockReturnValue(element);
+    document.elementFromPoint = vi.fn().mockReturnValue(element);
 
@@ -113,3 +113,3 @@ mockDateNow.mockReturnValueOnce(1617133864079);
 
-    jest.advanceTimersByTime(6000);
+    vi.advanceTimersByTime(6000);
 
@@ -116,0 +116,0 @@ expect(fn).toHaveBeenCalled();

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46881

increased by38.7%

Dev dependency count

24

decreased by-27.27%

Number of package files

19

increased by72.73%

Lines of code

414

increased by220.93%

Number of lines in readme file

130

increased by10.17%

Is type module

Yes

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes