Sandpack

integrations/sandpack/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": ["@gitbook/eslint-config/integration"]
+}

integrations/sandpack/gitbook-manifest.yaml

@@ -0,0 +1,17 @@
+name: sandpack
+title: Sandpack
+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: sandpack
+    title: Sandpack
+    description: TODO Sandpack description
+secrets: {}

integrations/sandpack/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "sandpack",
+  "private": true,
+  "scripts": {
+    "lint": "eslint ./**/*.ts*",
+    "typecheck": "tsc --noEmit",
+    "publish-integrations-staging": "gitbook publish ."
+  },
+  "devDependencies": {
+    "@gitbook/cli": "^0.8.0",
+    "@gitbook/runtime": "latest"
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-client": "^2.6.7",
+    "@gitbook/api": "^0.3.0",
+    "static-browser-server": "^1.0.5"
+  }
+}

integrations/sandpack/src/index.tsx

@@ -0,0 +1,26 @@
+import { createComponent, createIntegration, RuntimeContext } from '@gitbook/runtime';
+
+import { getPreviewUrl } from './sandpack';
+
+const embedBlock = createComponent<{ url?: string }, {}, {}, RuntimeContext>({
+    componentId: 'sandpack',
+
+    async render(element, context) {
+        const previewUrl = await getPreviewUrl();
+
+        return (
+            <block>
+                <webframe
+                    source={{
+                        url: previewUrl,
+                    }}
+                    aspectRatio={16 / 9}
+                />
+            </block>
+        );
+    },
+});
+
+export default createIntegration({
+    components: [embedBlock],
+});

integrations/sandpack/src/sandpack.ts

@@ -0,0 +1,19 @@
+import { PreviewController } from 'static-browser-server';
+
+export const getPreviewUrl = async () => {
+    const files = new Map([['index.html', 'Hello world!']]);
+
+    const controller = new PreviewController({
+        baseUrl: 'https://preview.sandpack-static-server.codesandbox.io',
+        // Function to get the file content for the server this can also be async
+        getFileContent: (filepath) => {
+            const content = files.get(filepath);
+            if (!content) {
+                throw new Error('File not found');
+            }
+            return content;
+        },
+    });
+
+    return await controller.initPreview();
+};

integrations/sandpack/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "@gitbook/tsconfig/integration.json"
+}