Enable custom origins for SDK (#1236)

* enable custom origins * bump version Co-authored-by: Eric Simons <[email protected]>
stackblitz · May 12, 2020 · 0f8ea11 · 0f8ea11
1 parent 34fd072
commit 0f8ea11
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/sdk/package-lock.json b/sdk/package-lock.json
diff --git a/sdk/package.json b/sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stackblitz/sdk",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "",
   "main": "./bundles/sdk.js",
   "module": "./bundles/sdk.m.js",
@@ -23,6 +23,6 @@
   "devDependencies": {
     "microbundle": "^0.3.1",
     "typedoc": "^0.10.0",
-    "typescript": "^2.6.2"
+    "typescript": "^2.9.2"
   }
 }
diff --git a/sdk/src/generate.ts b/sdk/src/generate.ts
@@ -1,8 +1,7 @@
 import { Project, EmbedOptions, OpenOptions } from './interfaces';
-import { buildProjectQuery, openTarget } from './helpers';
+import { buildProjectQuery, openTarget, getOrigin } from './helpers';
 
 const SUPPORTED_TEMPLATES = ['typescript', 'create-react-app', 'angular-cli', 'javascript', 'polymer'];
-const RUN_URL = 'https://stackblitz.com/run';
 
 function createHiddenInput(name: string, value: string){
   const input = document.createElement('input');
@@ -49,7 +48,7 @@ function createProjectForm(project: Project){
 
 export function createProjectFrameHTML(project: Project, options?: EmbedOptions){
   const form = createProjectForm(project);
-  form.action = RUN_URL + buildProjectQuery(options);
+  form.action = `${getOrigin(options)}/run` + buildProjectQuery(options);
   form.id = 'sb';
 
   const html = `<html><head><title></title></head><body>${
@@ -61,7 +60,7 @@ export function createProjectFrameHTML(project: Project, options?: EmbedOptions)
 
 export function openProject(project: Project, options?: OpenOptions){
   const form = createProjectForm(project);
-  form.action = RUN_URL + buildProjectQuery(options);
+  form.action = `${getOrigin(options)}/run` + buildProjectQuery(options);
   form.target = openTarget(options);
 
   document.body.appendChild(form);

diff --git a/sdk/src/helpers.ts b/sdk/src/helpers.ts
@@ -1,5 +1,10 @@
 import { ProjectOptions, EmbedOptions, OpenOptions } from './interfaces';
 
+export function getOrigin(options?: ProjectOptions | OpenOptions | EmbedOptions) {
+  if (options && options.origin) return options.origin;
+  return 'https://stackblitz.com';
+}
+
 const DEFAULT_FRAME_HEIGHT = '300';
 
 export function genID() {

diff --git a/sdk/src/index.ts b/sdk/src/index.ts
@@ -2,7 +2,7 @@ import { VM } from './VM';
 import { Project, OpenOptions, EmbedOptions } from './interfaces';
 import { Connection, getConnection } from './connection';
 import { openProject, createProjectFrameHTML } from './generate';
-import { replaceAndEmbed, buildProjectQuery, elementFromElementOrId, openTarget } from './helpers';
+import { replaceAndEmbed, buildProjectQuery, elementFromElementOrId, openTarget, getOrigin } from './helpers';
 
 const StackBlitzSDK = {
   connect: (frameEl: HTMLIFrameElement) => {
@@ -26,20 +26,20 @@ const StackBlitzSDK = {
 
   // Open in new tab methods
   openGithubProject: (repoSlug: string, options?: OpenOptions) => {
-    window.open(`https://stackblitz.com/github/${repoSlug}${buildProjectQuery(options)}`, openTarget(options));
+    window.open(`${getOrigin(options)}/github/${repoSlug}${buildProjectQuery(options)}`, openTarget(options));
   },
   openProject: (project: Project, options?: OpenOptions) => {
     openProject(project, options);
   },
   openProjectId: (projectId: string, options?: OpenOptions) => {
-    window.open(`https://stackblitz.com/edit/${projectId}${buildProjectQuery(options)}`, openTarget(options));
+    window.open(`${getOrigin(options)}/edit/${projectId}${buildProjectQuery(options)}`, openTarget(options));
   },
 
   // Embed on page methods
   embedGithubProject: (elementOrId: string | HTMLElement, repoSlug: string, options?: EmbedOptions) => {
     const element = elementFromElementOrId(elementOrId);
     const frame = document.createElement('iframe');
-    frame.src = `https://stackblitz.com/github/${repoSlug}${buildProjectQuery(options)}`;
+    frame.src = `${getOrigin(options)}/github/${repoSlug}${buildProjectQuery(options)}`;
 
     replaceAndEmbed(element, frame, options);
 
@@ -60,7 +60,7 @@ const StackBlitzSDK = {
   embedProjectId: (elementOrId: string | HTMLElement, projectId: string, options?: EmbedOptions) => {
     const element = elementFromElementOrId(elementOrId);
     const frame = document.createElement('iframe');
-    frame.src = `https://stackblitz.com/edit/${projectId}${buildProjectQuery(options)}`;
+    frame.src = `${getOrigin(options)}/edit/${projectId}${buildProjectQuery(options)}`;
 
     replaceAndEmbed(element, frame, options);
 

diff --git a/sdk/src/interfaces.ts b/sdk/src/interfaces.ts
@@ -28,6 +28,7 @@ export interface ProjectOptions {
   openFile?: string;
   hideDevTools?: boolean;
   devToolsHeight?: number;
+  origin?: string;
 }
 
 export interface OpenOptions extends ProjectOptions {