Skip to content

Commit c8bbb36

Browse files
kentcdoddskentcdodds
committed
add iframe-sync
1 parent 9c2e2d1 commit c8bbb36

File tree

68 files changed

+1428
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+1428
-0
lines changed

‎exercises/01.init/01.problem.static/public/iframe-sync.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// this is for the epic workshop application integration. If you're looking at
2+
// the app from the iframe in the workshop app, there's a URL bar in the app
3+
// that needs to know what the current URL in the child app is, so this bit of
4+
// code keeps them in sync.
5+
6+
if (window.parent !== window) {
7+
window.parent.postMessage(
8+
{ type: 'epicshop:loaded', url: window.location.href },
9+
'*',
10+
)
11+
function handleMessage(event) {
12+
const { type, params } = event.data
13+
if (type === 'epicshop:navigate-call') {
14+
const [distanceOrUrl, options] = params
15+
if (typeof distanceOrUrl === 'number') {
16+
window.history.go(distanceOrUrl)
17+
} else {
18+
if (options?.replace) {
19+
window.location.replace(distanceOrUrl)
20+
} else {
21+
window.location.assign(distanceOrUrl)
22+
}
23+
}
24+
}
25+
}
26+
27+
window.addEventListener('message', handleMessage)
28+
29+
const methods = ['pushState', 'replaceState', 'go', 'forward', 'back']
30+
for (const method of methods) {
31+
window.history[method] = new Proxy(window.history[method], {
32+
apply(target, thisArg, argArray) {
33+
window.parent.postMessage(
34+
{ type: 'epicshop:history-call', method, args: argArray },
35+
'*',
36+
)
37+
return target.apply(thisArg, argArray)
38+
},
39+
})
40+
}
41+
}

‎exercises/01.init/01.problem.static/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@
2121
<body>
2222
<div id="root"></div>
2323
<!-- 🐨 add a module script tag for "/ui/index.js" -->
24+
<script type="module" src="/iframe-sync.js"></script>
2425
</body>
2526
</html>

‎exercises/01.init/01.solution.static/public/iframe-sync.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// this is for the epic workshop application integration. If you're looking at
2+
// the app from the iframe in the workshop app, there's a URL bar in the app
3+
// that needs to know what the current URL in the child app is, so this bit of
4+
// code keeps them in sync.
5+
6+
if (window.parent !== window) {
7+
window.parent.postMessage(
8+
{ type: 'epicshop:loaded', url: window.location.href },
9+
'*',
10+
)
11+
function handleMessage(event) {
12+
const { type, params } = event.data
13+
if (type === 'epicshop:navigate-call') {
14+
const [distanceOrUrl, options] = params
15+
if (typeof distanceOrUrl === 'number') {
16+
window.history.go(distanceOrUrl)
17+
} else {
18+
if (options?.replace) {
19+
window.location.replace(distanceOrUrl)
20+
} else {
21+
window.location.assign(distanceOrUrl)
22+
}
23+
}
24+
}
25+
}
26+
27+
window.addEventListener('message', handleMessage)
28+
29+
const methods = ['pushState', 'replaceState', 'go', 'forward', 'back']
30+
for (const method of methods) {
31+
window.history[method] = new Proxy(window.history[method], {
32+
apply(target, thisArg, argArray) {
33+
window.parent.postMessage(
34+
{ type: 'epicshop:history-call', method, args: argArray },
35+
'*',
36+
)
37+
return target.apply(thisArg, argArray)
38+
},
39+
})
40+
}
41+
}

‎exercises/01.init/01.solution.static/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,6 @@
2020
<body>
2121
<div id="root"></div>
2222
<script type="module" src="/ui/index.js"></script>
23+
<script type="module" src="/iframe-sync.js"></script>
2324
</body>
2425
</html>

‎exercises/02.server-components/01.problem.rsc/public/iframe-sync.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// this is for the epic workshop application integration. If you're looking at
2+
// the app from the iframe in the workshop app, there's a URL bar in the app
3+
// that needs to know what the current URL in the child app is, so this bit of
4+
// code keeps them in sync.
5+
6+
if (window.parent !== window) {
7+
window.parent.postMessage(
8+
{ type: 'epicshop:loaded', url: window.location.href },
9+
'*',
10+
)
11+
function handleMessage(event) {
12+
const { type, params } = event.data
13+
if (type === 'epicshop:navigate-call') {
14+
const [distanceOrUrl, options] = params
15+
if (typeof distanceOrUrl === 'number') {
16+
window.history.go(distanceOrUrl)
17+
} else {
18+
if (options?.replace) {
19+
window.location.replace(distanceOrUrl)
20+
} else {
21+
window.location.assign(distanceOrUrl)
22+
}
23+
}
24+
}
25+
}
26+
27+
window.addEventListener('message', handleMessage)
28+
29+
const methods = ['pushState', 'replaceState', 'go', 'forward', 'back']
30+
for (const method of methods) {
31+
window.history[method] = new Proxy(window.history[method], {
32+
apply(target, thisArg, argArray) {
33+
window.parent.postMessage(
34+
{ type: 'epicshop:history-call', method, args: argArray },
35+
'*',
36+
)
37+
return target.apply(thisArg, argArray)
38+
},
39+
})
40+
}
41+
}

‎exercises/02.server-components/01.problem.rsc/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,6 @@
2525
<body>
2626
<div id="root"></div>
2727
<script type="module" src="/ui/index.js"></script>
28+
<script type="module" src="/iframe-sync.js"></script>
2829
</body>
2930
</html>

‎exercises/02.server-components/01.solution.rsc/public/iframe-sync.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// this is for the epic workshop application integration. If you're looking at
2+
// the app from the iframe in the workshop app, there's a URL bar in the app
3+
// that needs to know what the current URL in the child app is, so this bit of
4+
// code keeps them in sync.
5+
6+
if (window.parent !== window) {
7+
window.parent.postMessage(
8+
{ type: 'epicshop:loaded', url: window.location.href },
9+
'*',
10+
)
11+
function handleMessage(event) {
12+
const { type, params } = event.data
13+
if (type === 'epicshop:navigate-call') {
14+
const [distanceOrUrl, options] = params
15+
if (typeof distanceOrUrl === 'number') {
16+
window.history.go(distanceOrUrl)
17+
} else {
18+
if (options?.replace) {
19+
window.location.replace(distanceOrUrl)
20+
} else {
21+
window.location.assign(distanceOrUrl)
22+
}
23+
}
24+
}
25+
}
26+
27+
window.addEventListener('message', handleMessage)
28+
29+
const methods = ['pushState', 'replaceState', 'go', 'forward', 'back']
30+
for (const method of methods) {
31+
window.history[method] = new Proxy(window.history[method], {
32+
apply(target, thisArg, argArray) {
33+
window.parent.postMessage(
34+
{ type: 'epicshop:history-call', method, args: argArray },
35+
'*',
36+
)
37+
return target.apply(thisArg, argArray)
38+
},
39+
})
40+
}
41+
}

‎exercises/02.server-components/01.solution.rsc/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@
2121
<body>
2222
<div id="root"></div>
2323
<script type="module" src="/ui/index.js"></script>
24+
<script type="module" src="/iframe-sync.js"></script>
2425
</body>
2526
</html>

‎exercises/02.server-components/02.problem.async-components/public/iframe-sync.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// this is for the epic workshop application integration. If you're looking at
2+
// the app from the iframe in the workshop app, there's a URL bar in the app
3+
// that needs to know what the current URL in the child app is, so this bit of
4+
// code keeps them in sync.
5+
6+
if (window.parent !== window) {
7+
window.parent.postMessage(
8+
{ type: 'epicshop:loaded', url: window.location.href },
9+
'*',
10+
)
11+
function handleMessage(event) {
12+
const { type, params } = event.data
13+
if (type === 'epicshop:navigate-call') {
14+
const [distanceOrUrl, options] = params
15+
if (typeof distanceOrUrl === 'number') {
16+
window.history.go(distanceOrUrl)
17+
} else {
18+
if (options?.replace) {
19+
window.location.replace(distanceOrUrl)
20+
} else {
21+
window.location.assign(distanceOrUrl)
22+
}
23+
}
24+
}
25+
}
26+
27+
window.addEventListener('message', handleMessage)
28+
29+
const methods = ['pushState', 'replaceState', 'go', 'forward', 'back']
30+
for (const method of methods) {
31+
window.history[method] = new Proxy(window.history[method], {
32+
apply(target, thisArg, argArray) {
33+
window.parent.postMessage(
34+
{ type: 'epicshop:history-call', method, args: argArray },
35+
'*',
36+
)
37+
return target.apply(thisArg, argArray)
38+
},
39+
})
40+
}
41+
}

‎exercises/02.server-components/02.problem.async-components/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,6 @@
2121
<body>
2222
<div id="root"></div>
2323
<script type="module" src="/ui/index.js"></script>
24+
<script type="module" src="/iframe-sync.js"></script>
2425
</body>
2526
</html>

0 commit comments

Comments
 (0)