@phun-ky/speccer 11.2.37 → 11.2.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/dist/speccer.esm.js +1 -1
- package/dist/speccer.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -105,10 +105,9 @@ If you're importing **SPECCER** instead of with a script tag,
|
|
|
105
105
|
apply lazy loading:
|
|
106
106
|
|
|
107
107
|
```javascript
|
|
108
|
-
import { pin } from
|
|
108
|
+
import { pin } from 'https://esm.sh/@phun-ky/speccer';
|
|
109
109
|
|
|
110
110
|
const { pinElements } = pin;
|
|
111
|
-
|
|
112
111
|
/**
|
|
113
112
|
* Callback function for IntersectionObserver
|
|
114
113
|
* @param {IntersectionObserverEntry[]} entries - Array of entries being observed
|
|
@@ -123,10 +122,8 @@ const intersectionCallback: IntersectionObserverCallback = async (entries, obser
|
|
|
123
122
|
}
|
|
124
123
|
});
|
|
125
124
|
};
|
|
126
|
-
|
|
127
125
|
// Creating IntersectionObserver instance with the callback
|
|
128
126
|
const pinElementObserver = new IntersectionObserver(intersectionCallback);
|
|
129
|
-
|
|
130
127
|
/**
|
|
131
128
|
* Function to observe elements using IntersectionObserver
|
|
132
129
|
* @param {Element} el - The element to be observed
|
|
@@ -210,6 +207,7 @@ const Component = () => {
|
|
|
210
207
|
}, 300);
|
|
211
208
|
|
|
212
209
|
window.addEventListener('resize', speccerEventFunc);
|
|
210
|
+
|
|
213
211
|
return () => {
|
|
214
212
|
window.removeEventListener('resize', speccerEventFunc);
|
|
215
213
|
};
|
|
@@ -228,6 +226,7 @@ Or a hook like this:
|
|
|
228
226
|
```typescript
|
|
229
227
|
// ./hooks/useSpeccer.ts
|
|
230
228
|
import { useEffect } from 'react';
|
|
229
|
+
|
|
231
230
|
import '@phun-ky/speccer/dist/speccer.min.css';
|
|
232
231
|
import debounce from './lib/debounce';
|
|
233
232
|
|
|
@@ -237,6 +236,7 @@ const useSpeccer = () => {
|
|
|
237
236
|
|
|
238
237
|
const loadSpeccer = async () => {
|
|
239
238
|
const { default: speccer } = await import('@phun-ky/speccer');
|
|
239
|
+
|
|
240
240
|
speccer();
|
|
241
241
|
|
|
242
242
|
speccerEventFunc = debounce(() => {
|
|
@@ -280,8 +280,8 @@ In `preview.tsx`:
|
|
|
280
280
|
|
|
281
281
|
```typescript
|
|
282
282
|
import '@phun-ky/speccer/dist/speccer.min.css';
|
|
283
|
-
import { addons } from '@storybook/preview-api';
|
|
284
283
|
import { debounce } from '@mui/material'; // or any other debounce function
|
|
284
|
+
import { addons } from '@storybook/preview-api';
|
|
285
285
|
|
|
286
286
|
let speccerEventFunc: (() => void) | undefined;
|
|
287
287
|
|
package/dist/speccer.esm.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @phun-ky/speccer
|
|
3
3
|
* A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
|
|
4
4
|
* @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
|
|
5
|
-
* @version 11.2.
|
|
5
|
+
* @version 11.2.39
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright (c) 2018-2025 Alexander Vassbotn Røyne-Helgesen
|
|
8
8
|
*
|
package/dist/speccer.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @phun-ky/speccer
|
|
3
3
|
* A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements
|
|
4
4
|
* @author Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>
|
|
5
|
-
* @version 11.2.
|
|
5
|
+
* @version 11.2.39
|
|
6
6
|
* @license
|
|
7
7
|
* Copyright (c) 2018-2025 Alexander Vassbotn Røyne-Helgesen
|
|
8
8
|
*
|
package/package.json
CHANGED