feat(stackblitz): change to post method

chana-banana · chana-banana · commit dd8cd8905c76 · 2023-06-08T11:29:09.000+01:00
diff --git a/integrations/stackblitz/gitbook-manifest.yaml b/integrations/stackblitz/gitbook-manifest.yaml
@@ -12,7 +12,10 @@ scopes:
   - space:metadata:write
   - space:views:read
 blocks:
-  - id: stackblitz
+  - id: diagram
     title: Stackblitz
-    description: My GitBook Integration
+    description: TODO Stackblitz Integration Description
+    markdown:
+      codeblock: stackblitz
+      body: content
 secrets: {}
diff --git a/integrations/stackblitz/src/index.tsx b/integrations/stackblitz/src/index.tsx
@@ -1,53 +1,107 @@
-import {
-    createIntegration,
-    createComponent,
-    FetchEventCallback,
-    RuntimeContext,
-} from '@gitbook/runtime';
+import { createIntegration, createComponent } from '@gitbook/runtime';
 
-import { createProject } from './stackblitz';
+const defaultContent = 'Starter Javascript Project';
 
-type IntegrationContext = {} & RuntimeContext;
-
-const handleFetchEvent: FetchEventCallback<IntegrationContext> = async (request, context) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { api } = context;
-    const user = api.user.getAuthenticatedUser();
-
-    return new Response(JSON.stringify(user));
-};
-
-const exampleBlock = createComponent({
-    componentId: 'stackblitz',
+const diagramBlock = createComponent<
+    {
+        content?: string;
+    },
+    {
+        content: string;
+    }
+>({
+    componentId: 'diagram',
     initialState: (props) => {
         return {
-            message: 'Click Me',
+            content: props.content || defaultContent,
         };
     },
-    action: async (element, action, context) => {
-        switch (action.action) {
-            case 'click':
-                console.log('Button Clicked');
-                return {};
-        }
-    },
-    render: async (element, action, context) => {
-        console.log('RENDER');
-        try{
-            await createProject();
-        } catch (e) {
-            console.log(e);
-        }
+    async render(element, { environment }) {
+        const { editable } = element.context;
+        const { content } = element.state;
+
+        element.setCache({
+            maxAge: 86400,
+        });
+
+        const output = (
+            <webframe
+                source={{
+                    url: environment.integration.urls.publicEndpoint,
+                }}
+                aspectRatio={16 / 9}
+                data={{
+                    content: element.dynamicState('content'),
+                }}
+            />
+        );
+
         return (
             <block>
-                <button label={element.state.message} onPress={{ action: 'click' }} />
+                {editable ? (
+                    <codeblock
+                        state="content"
+                        content={content}
+                        syntax="stackblitz"
+                        onContentChange={{
+                            action: '@editor.node.updateProps',
+                            props: {
+                                content: element.dynamicState('content'),
+                            },
+                        }}
+                        footer={[output]}
+                    />
+                ) : (
+                    output
+                )}
             </block>
         );
     },
 });
 
+// Required Form Fields
+
+// project[title] = Project title
+// project[description] = Project description
+// project[files][FILE_PATH] = Contents of file, specify file path as key
+// project[files][ANOTHER_FILE_PATH] = Contents of file, specify file path as key
+// project[dependencies] = JSON string of dependencies field from package.json
+// project[template] = Can be one of: typescript, angular-cli, create-react-app, javascript
+
 export default createIntegration({
-    fetch: handleFetchEvent,
-    components: [exampleBlock],
-    events: {},
+    fetch: async () => {
+        return new Response(
+            `<html lang='en'>
+<head></head>
+<body>
+
+<form id='mainForm' method='post' action='https://stackblitz.com/run' target='_self'>
+<input type='hidden' name='project[files][index.ts]' value="import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/scan';
+
+var button = document.querySelector('button');
+Observable.fromEvent(button, 'click')
+  .scan((count: number) => count + 1, 0)
+  .subscribe(count => console.log(\`Clicked times\`));
+">
+<input type='hidden' name='project[files][index.html]' value='<button>Click Me</button>
+'>
+<input type='hidden' name='project[description]' value='RxJS Example'>
+<input type='hidden' name='project[dependencies]' value='{&quot;rxjs&quot;:&quot;5.5.6&quot;}'>
+<input type='hidden' name='project[template]' value='typescript'>
+<input type='hidden' name='project[settings]' value='{&quot;compile&quot;:{&quot;clearConsole&quot;:false}}'>
+</form>
+<script>document.getElementById("mainForm").submit();</script>
+
+</body></html>`,
+            {
+                headers: {
+                    'Content-Type': 'text/html',
+                    'Cache-Control': 'public, max-age=86400',
+                },
+            }
+        );
+    },
+    components: [diagramBlock],
 });
