Skip to content

Commit 2b02041

Browse files
chana-bananachana-banana
committed
feat(stackblitz): break into smaller pieces
1 parent dd8cd89 commit 2b02041

File tree

2 files changed

+36
-63
lines changed

2 files changed

+36
-63
lines changed

‎integrations/stackblitz/src/index.tsx

+4-35
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { createIntegration, createComponent } from '@gitbook/runtime';
22

3-
const defaultContent = 'Starter Javascript Project';
3+
import { fetchHTML } from './stackblitz';
4+
5+
const defaultContent = '//TODO: Starter Javascript Project';
46

57
const diagramBlock = createComponent<
68
{
@@ -17,6 +19,7 @@ const diagramBlock = createComponent<
1719
};
1820
},
1921
async render(element, { environment }) {
22+
await fetchHTML();
2023
const { editable } = element.context;
2124
const { content } = element.state;
2225

@@ -69,39 +72,5 @@ const diagramBlock = createComponent<
6972
// project[template] = Can be one of: typescript, angular-cli, create-react-app, javascript
7073

7174
export default createIntegration({
72-
fetch: async () => {
73-
return new Response(
74-
`<html lang='en'>
75-
<head></head>
76-
<body>
77-
78-
<form id='mainForm' method='post' action='https://stackblitz.com/run' target='_self'>
79-
<input type='hidden' name='project[files][index.ts]' value="import { Observable } from 'rxjs/Observable';
80-
import 'rxjs/add/observable/fromEvent';
81-
import 'rxjs/add/operator/scan';
82-
83-
var button = document.querySelector('button');
84-
Observable.fromEvent(button, 'click')
85-
.scan((count: number) => count + 1, 0)
86-
.subscribe(count => console.log(\`Clicked times\`));
87-
">
88-
<input type='hidden' name='project[files][index.html]' value='<button>Click Me</button>
89-
'>
90-
<input type='hidden' name='project[description]' value='RxJS Example'>
91-
<input type='hidden' name='project[dependencies]' value='{&quot;rxjs&quot;:&quot;5.5.6&quot;}'>
92-
<input type='hidden' name='project[template]' value='typescript'>
93-
<input type='hidden' name='project[settings]' value='{&quot;compile&quot;:{&quot;clearConsole&quot;:false}}'>
94-
</form>
95-
<script>document.getElementById("mainForm").submit();</script>
96-
97-
</body></html>`,
98-
{
99-
headers: {
100-
'Content-Type': 'text/html',
101-
'Cache-Control': 'public, max-age=86400',
102-
},
103-
}
104-
);
105-
},
10675
components: [diagramBlock],
10776
});

‎integrations/stackblitz/src/stackblitz.ts

+32-28
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
1-
import sdk from '@stackblitz/sdk';
1+
export const fetchHTML = async () => {
2+
const html = `<html lang='en'>
3+
<head></head>
4+
<body>
5+
<form id='mainForm' method='post' action='https://stackblitz.com/run' target='_self'>
6+
<input type='hidden' name='project[files][index.ts]' value="import { Observable } from 'rxjs/Observable';
7+
import 'rxjs/add/observable/fromEvent';
8+
import 'rxjs/add/operator/scan';
29
3-
export const createProject = async () => {
4-
try {
5-
await sdk.embedProject(
6-
'stackblitz',
7-
{
8-
title: 'Node Starter',
9-
description: 'A basic Node.js project',
10-
template: 'node',
11-
files: {
12-
'index.js': `console.log('Hello World!');`,
13-
'package.json': `{
14-
"name": "my-project",
15-
"scripts": { "hello": "node index.js", "start": "serve node_modules" },
16-
"dependencies": { "serve": "^14.0.0" },
17-
"stackblitz": { "installDependencies": true, "startCommand": "npm start" },
18-
}`,
19-
},
20-
},
21-
{
22-
clickToLoad: true,
23-
openFile: 'index.js',
24-
terminalHeight: 50,
25-
}
26-
);
27-
} catch (e) {
28-
console.log('ERROR_CAUGHT: ', e);
29-
}
10+
var button = document.querySelector('button');
11+
Observable.fromEvent(button, 'click')
12+
.scan((count: number) => count + 1, 0)
13+
.subscribe(count => console.log(\`Clicked times\`));
14+
">
15+
<input type='hidden' name='project[files][index.html]' value='<button>Click Me</button>
16+
'>
17+
<input type='hidden' name='project[description]' value='RxJS Example'>
18+
<input type='hidden' name='project[dependencies]' value='{&quot;rxjs&quot;:&quot;5.5.6&quot;}'>
19+
<input type='hidden' name='project[template]' value='typescript'>
20+
<input type='hidden' name='project[settings]' value='{&quot;compile&quot;:{&quot;clearConsole&quot;:false}}'>
21+
</form>
22+
<script>document.getElementById("mainForm").submit();</script>
23+
</body>
24+
</html>`;
25+
26+
const response = new Response(html, {
27+
headers: {
28+
'Content-Type': 'text/html',
29+
'Cache-Control': 'public, max-age=86400',
30+
},
31+
});
32+
33+
return response;
3034
};

0 commit comments

Comments
 (0)