@insitue/sdk 0.1.4 → 0.1.5
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/dist/capture-only.js +2 -2
- package/dist/{chunk-65BGOX2M.js → chunk-2QO63Y4R.js} +29 -9
- package/dist/{chunk-7GRJ5SZQ.js → chunk-QL6QPM2A.js} +1 -1
- package/dist/{chunk-TTH4NBFA.js → chunk-Z7GTGO4C.js} +13 -4
- package/dist/index.d.ts +7 -1
- package/dist/index.js +7 -3
- package/dist/overlay.js +2 -2
- package/package.json +1 -1
package/dist/capture-only.js
CHANGED
|
@@ -1644,22 +1644,33 @@ async function toCanvas(node, options = {}) {
|
|
|
1644
1644
|
var IMAGE_PLACEHOLDER = "data:image/svg+xml;base64," + (typeof btoa !== "undefined" ? btoa(
|
|
1645
1645
|
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#e8e8e8"/><path d="M0 0 L32 32 M32 0 L0 32" stroke="#b0b0b0" stroke-width="1.5"/></svg>'
|
|
1646
1646
|
) : "");
|
|
1647
|
-
async function preResolveImages() {
|
|
1647
|
+
async function preResolveImages(cropRect) {
|
|
1648
1648
|
const restorations = [];
|
|
1649
1649
|
const failedImages = /* @__PURE__ */ new Set();
|
|
1650
|
+
const PAD = 64;
|
|
1650
1651
|
const images = Array.from(
|
|
1651
1652
|
document.querySelectorAll("img")
|
|
1652
|
-
).filter(
|
|
1653
|
-
(img
|
|
1654
|
-
|
|
1655
|
-
|
|
1653
|
+
).filter((img) => {
|
|
1654
|
+
if (img.closest?.("#insitu-root, [data-insitu-layer]")) return false;
|
|
1655
|
+
if (!cropRect) return true;
|
|
1656
|
+
const r3 = img.getBoundingClientRect();
|
|
1657
|
+
if (r3.width <= 0 || r3.height <= 0) return false;
|
|
1658
|
+
return r3.right >= cropRect.x - PAD && r3.left <= cropRect.x + cropRect.width + PAD && r3.bottom >= cropRect.y - PAD && r3.top <= cropRect.y + cropRect.height + PAD;
|
|
1659
|
+
});
|
|
1660
|
+
const PER_IMAGE_TIMEOUT_MS = 3e3;
|
|
1661
|
+
await Promise.allSettled(
|
|
1656
1662
|
images.map(async (img) => {
|
|
1657
1663
|
const srcToFetch = img.currentSrc || img.src;
|
|
1658
1664
|
if (!srcToFetch || srcToFetch.startsWith("data:") || srcToFetch.startsWith("blob:")) {
|
|
1659
1665
|
return;
|
|
1660
1666
|
}
|
|
1667
|
+
const ac = new AbortController();
|
|
1668
|
+
const timer = setTimeout(() => ac.abort(), PER_IMAGE_TIMEOUT_MS);
|
|
1661
1669
|
try {
|
|
1662
|
-
const res = await fetch(srcToFetch, {
|
|
1670
|
+
const res = await fetch(srcToFetch, {
|
|
1671
|
+
cache: "force-cache",
|
|
1672
|
+
signal: ac.signal
|
|
1673
|
+
});
|
|
1663
1674
|
if (!res.ok) {
|
|
1664
1675
|
failedImages.add(img);
|
|
1665
1676
|
return;
|
|
@@ -1687,6 +1698,8 @@ async function preResolveImages() {
|
|
|
1687
1698
|
}
|
|
1688
1699
|
} catch {
|
|
1689
1700
|
failedImages.add(img);
|
|
1701
|
+
} finally {
|
|
1702
|
+
clearTimeout(timer);
|
|
1690
1703
|
}
|
|
1691
1704
|
})
|
|
1692
1705
|
);
|
|
@@ -1718,7 +1731,7 @@ async function renderViewportCrop(cropRect, pixelRatio) {
|
|
|
1718
1731
|
const bodyBg = getComputedStyle(document.body).backgroundColor;
|
|
1719
1732
|
const htmlBg = getComputedStyle(document.documentElement).backgroundColor;
|
|
1720
1733
|
const backgroundColor = bodyBg && bodyBg !== "rgba(0, 0, 0, 0)" && bodyBg !== "transparent" ? bodyBg : htmlBg && htmlBg !== "rgba(0, 0, 0, 0)" && htmlBg !== "transparent" ? htmlBg : "#ffffff";
|
|
1721
|
-
const { restore: restoreImages, failedImages } = await preResolveImages();
|
|
1734
|
+
const { restore: restoreImages, failedImages } = await preResolveImages(cropRect);
|
|
1722
1735
|
try {
|
|
1723
1736
|
const fullCanvas = await toCanvas(document.documentElement, {
|
|
1724
1737
|
pixelRatio,
|
|
@@ -1994,7 +2007,7 @@ async function buildBundle(sel) {
|
|
|
1994
2007
|
const settings = getCaptureSettings();
|
|
1995
2008
|
let screenshot;
|
|
1996
2009
|
let screenshotUnavailable;
|
|
1997
|
-
if (el instanceof HTMLElement) {
|
|
2010
|
+
if (el instanceof HTMLElement || el instanceof SVGElement) {
|
|
1998
2011
|
const context = findContextAncestor(el);
|
|
1999
2012
|
const cr = context.getBoundingClientRect();
|
|
2000
2013
|
const cropRect = new DOMRect(
|
|
@@ -2084,7 +2097,14 @@ async function buildBundle(sel) {
|
|
|
2084
2097
|
computedStyles: el ? curateComputedStyles(el) : {},
|
|
2085
2098
|
tailwindClasses: el ? extractTailwindClasses(el) : [],
|
|
2086
2099
|
...screenshot ? { screenshot } : {},
|
|
2087
|
-
|
|
2100
|
+
// "Never silent" — if neither screenshot nor screenshotUnavailable
|
|
2101
|
+
// got set above (an unexpected fallthrough), surface that fact
|
|
2102
|
+
// so the widget never renders a blank where a result should be.
|
|
2103
|
+
// The structured diagnostic below tells future-me exactly which
|
|
2104
|
+
// branch ran, surfaced as `__insitu_capture__.bundle` in dev.
|
|
2105
|
+
...screenshotUnavailable ? { screenshotUnavailable } : !screenshot ? {
|
|
2106
|
+
screenshotUnavailable: el ? `screenshot path didn't set a result (el=${el.tagName.toLowerCase()}; rasterisable=${el instanceof HTMLElement || el instanceof SVGElement})` : "no element selected"
|
|
2107
|
+
} : {},
|
|
2088
2108
|
viewport: {
|
|
2089
2109
|
w: window.innerWidth,
|
|
2090
2110
|
h: window.innerHeight,
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
retryDisplayMedia,
|
|
11
11
|
stopDisplayMedia,
|
|
12
12
|
y
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-2QO63Y4R.js";
|
|
14
14
|
|
|
15
15
|
// src/capture-only.ts
|
|
16
16
|
var DEFAULT_INGEST = "https://www.insitue.com/api/v1/capture";
|
|
@@ -260,9 +260,11 @@ function CaptureOnlyApp(props) {
|
|
|
260
260
|
}) : bundle?.screenshotUnavailable ? k(
|
|
261
261
|
"div",
|
|
262
262
|
{
|
|
263
|
-
style: `font-size:12px;color:${C.faint};background:${C.surface2};border:1px solid ${C.line};border-radius:10px;padding:10px;margin-bottom:12px`
|
|
263
|
+
style: `font-size:12px;color:${C.faint};background:${C.surface2};border:1px solid ${C.line};border-radius:10px;padding:10px;margin-bottom:12px;word-break:break-word`
|
|
264
264
|
},
|
|
265
|
-
|
|
265
|
+
// Surface the actual reason inline — helps diagnose
|
|
266
|
+
// when a capture lands empty without expecting it.
|
|
267
|
+
`Screenshot unavailable \u2014 ${bundle.screenshotUnavailable}`
|
|
266
268
|
) : null,
|
|
267
269
|
// Nudge: the screenshot is structurally OK but some content
|
|
268
270
|
// couldn't be embedded (non-CORS img / video / canvas). Offer
|
|
@@ -347,7 +349,14 @@ function CaptureOnlyApp(props) {
|
|
|
347
349
|
{
|
|
348
350
|
style: `display:flex;justify-content:space-between;padding:9px 16px;border-top:1px solid ${C.line};color:${C.faint};font-size:11px`
|
|
349
351
|
},
|
|
350
|
-
[
|
|
352
|
+
[
|
|
353
|
+
k("span", {}, "\u{1F512} Secrets scrubbed automatically"),
|
|
354
|
+
k(
|
|
355
|
+
"span",
|
|
356
|
+
{ title: `@insitue/sdk@${"0.1.5"}` },
|
|
357
|
+
`InSitue \xB7 v${"0.1.5"}`
|
|
358
|
+
)
|
|
359
|
+
]
|
|
351
360
|
)
|
|
352
361
|
]);
|
|
353
362
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -33,4 +33,10 @@ interface InSitueCaptureProps {
|
|
|
33
33
|
*/
|
|
34
34
|
declare function InSitueCapture({ projectKey, endpoint, onCapture, }: InSitueCaptureProps): null;
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
/** Build-time-inlined version of `@insitue/sdk` (from package.json).
|
|
37
|
+
* Exposed so the host app can self-verify which SDK build is loaded
|
|
38
|
+
* — useful in dev when iterating across publishes. Also surfaced in
|
|
39
|
+
* the capture widget footer so a screenshot proves the build. */
|
|
40
|
+
declare const SDK_VERSION: string;
|
|
41
|
+
|
|
42
|
+
export { InSitue, InSitueCapture, type InSitueCaptureProps, type InSitueProps, SDK_VERSION };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
mountCaptureOnly
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-Z7GTGO4C.js";
|
|
4
4
|
import {
|
|
5
5
|
mountInSitue
|
|
6
|
-
} from "./chunk-
|
|
7
|
-
import "./chunk-
|
|
6
|
+
} from "./chunk-QL6QPM2A.js";
|
|
7
|
+
import "./chunk-2QO63Y4R.js";
|
|
8
8
|
|
|
9
9
|
// src/InSitue.tsx
|
|
10
10
|
import { useEffect } from "react";
|
|
@@ -44,9 +44,13 @@ function InSitueCapture({
|
|
|
44
44
|
}, [projectKey, endpoint, onCapture]);
|
|
45
45
|
return null;
|
|
46
46
|
}
|
|
47
|
+
|
|
48
|
+
// src/index.ts
|
|
49
|
+
var SDK_VERSION = "0.1.5";
|
|
47
50
|
export {
|
|
48
51
|
InSitue,
|
|
49
52
|
InSitueCapture,
|
|
53
|
+
SDK_VERSION,
|
|
50
54
|
mountCaptureOnly,
|
|
51
55
|
mountInSitue
|
|
52
56
|
};
|
package/dist/overlay.js
CHANGED
package/package.json
CHANGED