@vibecodeapp/sdk 0.4.5 → 0.4.7
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.
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
* Web version of Screenshot - listens for screenshot requests from parent iframe
|
|
3
3
|
*
|
|
4
4
|
* On web, this component listens for postMessage requests and captures
|
|
5
|
-
* the current page using
|
|
5
|
+
* the current page using html-to-image (Chromium) or html2canvas (Safari/Firefox),
|
|
6
|
+
* then sends the result back.
|
|
7
|
+
* html-to-image is faster than html2canvas, but html2canvas is more reliable on Safari/Firefox.
|
|
8
|
+
* due to the fact that html-to-image uses foreignObjects.
|
|
6
9
|
*/
|
|
7
10
|
export declare function VibeScreenshot(): null;
|
|
8
11
|
//# sourceMappingURL=Screenshot.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Screenshot.web.d.ts","sourceRoot":"","sources":["../../src/dev/Screenshot.web.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"Screenshot.web.d.ts","sourceRoot":"","sources":["../../src/dev/Screenshot.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AA2FH,wBAAgB,cAAc,SA2B7B"}
|
|
@@ -2,29 +2,70 @@
|
|
|
2
2
|
* Web version of Screenshot - listens for screenshot requests from parent iframe
|
|
3
3
|
*
|
|
4
4
|
* On web, this component listens for postMessage requests and captures
|
|
5
|
-
* the current page using
|
|
5
|
+
* the current page using html-to-image (Chromium) or html2canvas (Safari/Firefox),
|
|
6
|
+
* then sends the result back.
|
|
7
|
+
* html-to-image is faster than html2canvas, but html2canvas is more reliable on Safari/Firefox.
|
|
8
|
+
* due to the fact that html-to-image uses foreignObjects.
|
|
6
9
|
*/
|
|
7
10
|
import { useEffect } from 'react';
|
|
8
|
-
|
|
11
|
+
function isChromium() {
|
|
12
|
+
if (typeof navigator === 'undefined')
|
|
13
|
+
return false;
|
|
14
|
+
const ua = navigator.userAgent;
|
|
15
|
+
return (/Chrome/.test(ua) && !/Edg/.test(ua)) || /Chromium/.test(ua);
|
|
16
|
+
}
|
|
9
17
|
async function captureScreenshot() {
|
|
18
|
+
const scale = window.devicePixelRatio || 1;
|
|
19
|
+
if (isChromium()) {
|
|
20
|
+
// Use html-to-image for Chromium
|
|
21
|
+
const { toBlob } = await import('html-to-image');
|
|
22
|
+
const width = document.body.scrollWidth;
|
|
23
|
+
const height = document.body.scrollHeight;
|
|
24
|
+
const blob = await toBlob(document.body, {
|
|
25
|
+
cacheBust: true,
|
|
26
|
+
pixelRatio: scale,
|
|
27
|
+
filter: (node) => node.tagName !== 'NOSCRIPT',
|
|
28
|
+
});
|
|
29
|
+
if (!blob) {
|
|
30
|
+
throw new Error('Failed to create blob from html-to-image');
|
|
31
|
+
}
|
|
32
|
+
const buffer = await blob.arrayBuffer();
|
|
33
|
+
return {
|
|
34
|
+
image: buffer,
|
|
35
|
+
width: width * scale,
|
|
36
|
+
height: height * scale,
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
// Use html2canvas for Safari/Firefox
|
|
40
|
+
const { default: html2canvas } = await import('html2canvas');
|
|
10
41
|
const canvas = await html2canvas(document.body, {
|
|
11
42
|
useCORS: true,
|
|
12
43
|
allowTaint: true,
|
|
13
44
|
backgroundColor: null,
|
|
14
|
-
scale
|
|
45
|
+
scale,
|
|
46
|
+
});
|
|
47
|
+
return new Promise((resolve, reject) => {
|
|
48
|
+
canvas.toBlob((blob) => {
|
|
49
|
+
if (!blob) {
|
|
50
|
+
reject(new Error('Failed to create blob from canvas'));
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
blob.arrayBuffer().then((buffer) => {
|
|
54
|
+
resolve({
|
|
55
|
+
image: buffer,
|
|
56
|
+
width: canvas.width,
|
|
57
|
+
height: canvas.height,
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
}, 'image/png');
|
|
15
61
|
});
|
|
16
|
-
return {
|
|
17
|
-
image: canvas.toDataURL('image/png'),
|
|
18
|
-
width: canvas.width,
|
|
19
|
-
height: canvas.height,
|
|
20
|
-
};
|
|
21
62
|
}
|
|
22
63
|
function postScreenshotToParent(data) {
|
|
23
64
|
try {
|
|
24
65
|
if (typeof window !== 'undefined' &&
|
|
25
66
|
window.parent &&
|
|
26
67
|
window.parent !== window) {
|
|
27
|
-
window.parent.postMessage(data, '*');
|
|
68
|
+
window.parent.postMessage(data, '*', [data.image]);
|
|
28
69
|
}
|
|
29
70
|
}
|
|
30
71
|
catch {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Screenshot.web.js","sourceRoot":"","sources":["../../src/dev/Screenshot.web.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"Screenshot.web.js","sourceRoot":"","sources":["../../src/dev/Screenshot.web.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibecodeapp/sdk",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.7",
|
|
4
4
|
"description": "SDK for Vibecodeapp.com - Web polyfills and Metro configuration for React Native",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -41,11 +41,13 @@
|
|
|
41
41
|
"@stardazed/streams-text-encoding": "^1.0.2",
|
|
42
42
|
"assert": "^2.1.0",
|
|
43
43
|
"html2canvas": "^1.4.1",
|
|
44
|
+
"html-to-image": "^1.11.11",
|
|
44
45
|
"p-limit": "^3.1.0"
|
|
45
46
|
},
|
|
46
47
|
"devDependencies": {
|
|
47
48
|
"@biomejs/biome": "^2.3.8",
|
|
48
49
|
"@types/bun": "^1.3.4",
|
|
50
|
+
"@types/html2canvas": "^1.0.0",
|
|
49
51
|
"@types/react": "19.1.11",
|
|
50
52
|
"react": "19.1.0",
|
|
51
53
|
"react-native": "0.81.4",
|
|
@@ -58,8 +60,15 @@
|
|
|
58
60
|
"react-native-web": "*",
|
|
59
61
|
"react-native-safe-area-context": "*",
|
|
60
62
|
"react-native-svg-transformer": "*",
|
|
61
|
-
"metro-cache": "*",
|
|
62
63
|
"expo-status-bar": "*"
|
|
63
64
|
},
|
|
65
|
+
"peerDependenciesMeta": {
|
|
66
|
+
"react-native-web": {
|
|
67
|
+
"optional": true
|
|
68
|
+
},
|
|
69
|
+
"react-native-svg-transformer": {
|
|
70
|
+
"optional": true
|
|
71
|
+
}
|
|
72
|
+
},
|
|
64
73
|
"type": "module"
|
|
65
74
|
}
|