Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 06cee37

Browse files
catarakcatarak
committed
Connect console messages from iframe to editor frame
1 parent 2dc6529 commit 06cee37

File tree

5 files changed

+97
-75
lines changed

5 files changed

+97
-75
lines changed

‎client/modules/Preview/EmbedFrame.jsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,7 @@ import {
1919
EXTERNAL_LINK_REGEX,
2020
NOT_EXTERNAL_LINK_REGEX
2121
} from '../../../server/utils/fileUtils';
22-
import {
23-
hijackConsoleErrorsScript,
24-
startTag,
25-
getAllScriptOffsets
26-
} from '../../utils/consoleUtils';
22+
import { startTag, getAllScriptOffsets } from '../../utils/consoleUtils';
2723
import { registerFrame, MessageTypes } from '../../utils/dispatcher';
2824

2925
import { getHTMLFile } from '../IDE/reducers/files';
@@ -86,7 +82,6 @@ function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
8682

8783
function resolveCSSLinksInString(content, files) {
8884
let newContent = content;
89-
console.log(content);
9085
let cssFileStrings = content.match(STRING_REGEX);
9186
cssFileStrings = cssFileStrings || [];
9287
cssFileStrings.forEach((cssFileString) => {
@@ -293,11 +288,12 @@ function injectLocalFiles(files, htmlFile) {
293288
const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
294289
scriptOffs = getAllScriptOffsets(sketchDocString);
295290
const consoleErrorsScript = sketchDoc.createElement('script');
296-
consoleErrorsScript.innerHTML = hijackConsoleErrorsScript(
297-
JSON.stringify(scriptOffs)
298-
);
291+
consoleErrorsScript.innerHTML = `
292+
window.offs = ${JSON.stringify(scriptOffs)};
293+
window.editorOrigin = '${getConfig('EDITOR_URL')}';
294+
`;
299295
addLoopProtect(sketchDoc);
300-
sketchDoc.head.insertBefore(consoleErrorsScript, sketchDoc.head.firstElement);
296+
sketchDoc.head.prepend(consoleErrorsScript);
301297

302298
return `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
303299
}

‎client/modules/Preview/previewIndex.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ const App = () => {
2424
const [state, dispatch] = useReducer(filesReducer, [], initialState);
2525
const [isPlaying, setIsPlaying] = useState(false);
2626
function handleMessageEvent(message) {
27-
console.log('embedframe received message event');
2827
const { type, payload } = message;
2928
switch (type) {
3029
case MessageTypes.FILES:

‎client/utils/consoleUtils.js

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,8 @@
1-
import { EXTERNAL_LINK_REGEX } from '../../server/utils/fileUtils';
2-
3-
export const hijackConsoleErrorsScript = (offs) => {
4-
const s = `
5-
function getScriptOff(line) {
6-
var offs = ${offs};
7-
var l = 0;
8-
var file = '';
9-
for (var i=0; i<offs.length; i++) {
10-
var n = offs[i][0];
11-
if (n < line && n > l) {
12-
l = n;
13-
file = offs[i][1];
14-
}
15-
}
16-
return [line - l, file];
17-
}
18-
// catch reference errors, via http://stackoverflow.com/a/12747364/2994108
19-
window.onerror = function (msg, url, lineNumber, columnNo, error) {
20-
var string = msg.toLowerCase();
21-
var substring = "script error";
22-
var data = {};
23-
if (url.match(${EXTERNAL_LINK_REGEX}) !== null && error.stack){
24-
var errorNum = error.stack.split('about:srcdoc:')[1].split(':')[0];
25-
var fileInfo = getScriptOff(errorNum);
26-
data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
27-
} else {
28-
var fileInfo = getScriptOff(lineNumber);
29-
data = msg + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
30-
}
31-
window.parent.postMessage([{
32-
log: [{
33-
method: 'error',
34-
data: [data],
35-
id: Date.now().toString()
36-
}],
37-
source: fileInfo[1]
38-
}], '*');
39-
return false;
40-
};
41-
// catch rejected promises
42-
window.onunhandledrejection = function (event) {
43-
if (event.reason && event.reason.message && event.reason.stack){
44-
var errorNum = event.reason.stack.split('about:srcdoc:')[1].split(':')[0];
45-
var fileInfo = getScriptOff(errorNum);
46-
var data = event.reason.message + ' (' + fileInfo[1] + ': line ' + fileInfo[0] + ')';
47-
window.parent.postMessage([{
48-
log: [{
49-
method: 'error',
50-
data: [data],
51-
id: Date.now().toString()
52-
}],
53-
source: fileInfo[1]
54-
}], '*');
55-
}
56-
};
57-
`;
58-
return s;
59-
};
60-
611
export const startTag = '@fs-';
622

633
export const getAllScriptOffsets = (htmlFile) => {
644
const offs = [];
65-
const hijackConsoleErrorsScriptLength = 52;
5+
const hijackConsoleErrorsScriptLength = 2;
666
const embeddedJSStart = 'script crossorigin=""';
677
let foundJSScript = true;
688
let foundEmbeddedJS = true;

‎client/utils/previewEntry.js

Lines changed: 89 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
import loopProtect from 'loop-protect';
22
import { Hook, Decode, Encode } from 'console-feed';
33
import evaluateExpression from './evaluateExpression';
4+
import { EXTERNAL_LINK_REGEX } from '../../server/utils/fileUtils';
5+
6+
// should postMessage user the dispatcher? does the parent window need to
7+
// be registered as a frame? or a just a listener?
8+
9+
// could maybe send these as a message idk
10+
// const { editor } = window;
11+
const editor = window.parent.parent;
12+
const { editorOrigin } = window;
13+
// const editorOrigin = '*';
14+
// const editorOrigin = 'http://localhost:8000';
15+
// so this works??
16+
// maybe i have to pass the parent window??? idk man
417

518
window.loopProtect = loopProtect;
619

@@ -17,12 +30,13 @@ setInterval(() => {
1730
messages: consoleBuffer,
1831
source: 'sketch'
1932
};
20-
window.parent.postMessage(message, window.origin);
33+
editor.postMessage(message, editorOrigin);
2134
consoleBuffer.length = 0;
2235
}
2336
}, LOGWAIT);
2437

2538
function handleMessageEvent(e) {
39+
// maybe don't need this?? idk!
2640
if (window.origin !== e.origin) return;
2741
const { data } = e;
2842
const { source, messages } = data;
@@ -34,15 +48,87 @@ function handleMessageEvent(e) {
3448
const resultMessages = [
3549
{ log: Encode({ method: error ? 'error' : 'result', data: [result] }) }
3650
];
37-
window.parent.postMessage(
51+
editor.postMessage(
3852
{
3953
messages: resultMessages,
4054
source: 'sketch'
4155
},
42-
window.origin
56+
editorOrigin
4357
);
4458
});
4559
}
4660
}
4761

4862
window.addEventListener('message', handleMessageEvent);
63+
64+
function getScriptOff(line) {
65+
const { offs } = window;
66+
let l = 0;
67+
let file = '';
68+
for (let i = 0; i < offs.length; i += 1) {
69+
const n = offs[i][0];
70+
if (n < line && n > l) {
71+
l = n;
72+
[, file] = offs[i];
73+
}
74+
}
75+
return [line - l, file];
76+
}
77+
// catch reference errors, via http://stackoverflow.com/a/12747364/2994108
78+
window.onerror = function onError(msg, url, lineNumber, columnNo, error) {
79+
// var string = msg.toLowerCase();
80+
// var substring = "script error";
81+
let data = {};
82+
let fileInfo;
83+
if (url.match(EXTERNAL_LINK_REGEX) !== null && error.stack) {
84+
const errorNum = error.stack.split('about:srcdoc:')[1].split(':')[0];
85+
fileInfo = getScriptOff(errorNum);
86+
data = `${msg} (${fileInfo[1]}: line ${fileInfo[0]})`;
87+
} else {
88+
fileInfo = getScriptOff(lineNumber);
89+
data = `${msg} (${fileInfo[1]}: line ${fileInfo[0]})`;
90+
}
91+
editor.postMessage(
92+
{
93+
source: fileInfo[1],
94+
messages: [
95+
{
96+
log: [
97+
{
98+
method: 'error',
99+
data: [data],
100+
id: Date.now().toString()
101+
}
102+
]
103+
}
104+
]
105+
},
106+
editorOrigin
107+
);
108+
return false;
109+
};
110+
// catch rejected promises
111+
window.onunhandledrejection = function onUnhandledRejection(event) {
112+
if (event.reason && event.reason.message && event.reason.stack) {
113+
const errorNum = event.reason.stack.split('about:srcdoc:')[1].split(':')[0];
114+
const fileInfo = getScriptOff(errorNum);
115+
const data = `${event.reason.message} (${fileInfo[1]}: line ${fileInfo[0]})`;
116+
editor.postMessage(
117+
{
118+
source: fileInfo[1],
119+
messages: [
120+
{
121+
log: [
122+
{
123+
method: 'error',
124+
data: [data],
125+
id: Date.now().toString()
126+
}
127+
]
128+
}
129+
]
130+
},
131+
editorOrigin
132+
);
133+
}
134+
};

‎server/views/previewIndex.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ function renderPreviewIndex() {
1919
? `${assetsManifest['/previewScripts.js']}`
2020
: '/previewScripts.js'
2121
}';
22+
window.process.env.EDITOR_URL = '${process.env.EDITOR_URL}';
2223
</script>
2324
</head>
2425
<body>

0 commit comments

Comments
 (0)