GitbookIO · chana-banana · May 29, 2023 · May 29, 2023 · May 29, 2023 · May 31, 2023
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,8 @@ yarn-error.log*
 # turbo
 .turbo
 
-.env
+.env
+
+.idea
+
+.gitbook-dev.yaml
diff --git a/integrations/stackblitz/.eslintrc.json b/integrations/stackblitz/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+    "extends": ["@gitbook/eslint-config/integration"]
+}
diff --git a/integrations/stackblitz/assets/stackblitz-logo.png b/integrations/stackblitz/assets/stackblitz-logo.png
diff --git a/integrations/stackblitz/gitbook-manifest.yaml b/integrations/stackblitz/gitbook-manifest.yaml
@@ -0,0 +1,21 @@
+name: stackblitz
+title: Stackblitz
+icon: ./assets/stackblitz-logo.png
+organization: the-delta-integrations
+visibility: private
+description: ''
+script: src/index.tsx
+scopes:
+  - space:content:read
+  - space:content:write
+  - space:metadata:read
+  - space:metadata:write
+  - space:views:read
+blocks:
+  - id: diagram
+    title: Stackblitz
+    description: TODO Stackblitz Integration Description
+    markdown:
+      codeblock: stackblitz
+      body: content
+secrets: {}
diff --git a/integrations/stackblitz/package-lock.json b/integrations/stackblitz/package-lock.json
diff --git a/integrations/stackblitz/package.json b/integrations/stackblitz/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "stackblitz",
+  "private": true,
+  "scripts": {
+    "lint": "eslint ./**/*.ts*",
+    "typecheck": "tsc --noEmit",
+    "publish-integrations-staging": "gitbook publish ."
+  },
+  "devDependencies": {
+    "@gitbook/api": "latest",
+    "@gitbook/cli": "^0.8.0",
+    "@gitbook/runtime": "latest"
+  },
+  "dependencies": {
+    "@stackblitz/sdk": "^1.9.0"
+  }
+}
diff --git a/integrations/stackblitz/src/index.tsx b/integrations/stackblitz/src/index.tsx
@@ -0,0 +1,76 @@
+import { createIntegration, createComponent } from '@gitbook/runtime';
+
+import { fetchHTML } from './stackblitz';
+
+const defaultContent = '//TODO: Starter Javascript Project';
+
+const diagramBlock = createComponent<
+    {
+        content?: string;
+    },
+    {
+        content: string;
+    }
+>({
+    componentId: 'diagram',
+    initialState: (props) => {
+        return {
+            content: props.content || defaultContent,
+        };
+    },
+    async render(element, { environment }) {
+        await fetchHTML();
+        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>
+                {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({
+    components: [diagramBlock],
+});
diff --git a/integrations/stackblitz/src/stackblitz.ts b/integrations/stackblitz/src/stackblitz.ts
@@ -0,0 +1,34 @@
+export const fetchHTML = async () => {
+    const html = `<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>`;
+
+    const response = new Response(html, {
+        headers: {
+            'Content-Type': 'text/html',
+            'Cache-Control': 'public, max-age=86400',
+        },
+    });
+
+    return response;
+};
diff --git a/integrations/stackblitz/tsconfig.json b/integrations/stackblitz/tsconfig.json
@@ -0,0 +1,3 @@
+{
+    "extends": "@gitbook/tsconfig/integration.json"
+}
diff --git a/package-lock.json b/package-lock.json
-Original file line number
+Diff line change
@@ @@ -36,4 +36,8 @@ yarn-error.log* @@
     # turbo
     .turbo
-    .env
+    .env
+    .idea
+    .gitbook-dev.yaml