= {
8 | angular: {
9 | github: 'gothinkster/angular-realworld-example-app',
10 | openFile: 'README.md',
11 | },
12 | vite: {
13 | github: 'vitejs/vite/tree/main/packages/create-vite/template-vanilla',
14 | openFile: 'index.html',
15 | },
16 | };
17 |
18 | let selectedRepo: Repo = REPOS.angular;
19 |
20 | /**
21 | * Embed the project
22 | */
23 | async function embedProject() {
24 | sdk.embedGithubProject('embed', selectedRepo.github, {
25 | height: 400,
26 | openFile: selectedRepo.openFile,
27 | });
28 | }
29 |
30 | /**
31 | * Open the project in a new window on StackBlitz
32 | */
33 | function openProject() {
34 | sdk.openGithubProject(selectedRepo.github, {
35 | openFile: selectedRepo.openFile,
36 | });
37 | }
38 |
39 | function setRepo(value: string) {
40 | selectedRepo = REPOS[value];
41 | // if already embedded, update the embed
42 | if (document.getElementById('embed')?.nodeName === 'IFRAME') {
43 | embedProject();
44 | }
45 | }
46 |
47 | function setup() {
48 | const select = document.querySelector('[name=set-repo]');
49 | const embedButton = document.querySelector('[name=embed-project]');
50 | const openButton = document.querySelector('[name=open-project]');
51 | select!.addEventListener('change', (event) => {
52 | setRepo((event.target as HTMLSelectElement).value);
53 | });
54 | embedButton!.addEventListener('click', embedProject);
55 | openButton!.addEventListener('click', openProject);
56 | }
57 |
58 | setup();
59 |
--------------------------------------------------------------------------------
/examples/open-embed-github-project/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sdk-example-open-embed-github-project",
3 | "description": "Demo of the StackBlitz SDK's methods for opening & embedding Github projects.",
4 | "version": "0.0.0",
5 | "private": true,
6 | "dependencies": {
7 | "@stackblitz/sdk": "^1.8.1"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/examples/open-embed-github-project/styles.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | text-align: center;
4 | font-family: system-ui, sans-serif;
5 | color: black;
6 | background-color: white;
7 | }
8 |
9 | body {
10 | height: 100%;
11 | margin: 0;
12 | display: flex;
13 | flex-direction: column;
14 | }
15 |
16 | h1 {
17 | margin: 1rem;
18 | font-size: 1.25rem;
19 | }
20 |
21 | nav {
22 | margin: 1rem;
23 | font-size: 0.9rem;
24 | }
25 |
26 | select,
27 | button {
28 | margin: 0.2em;
29 | padding: 0.2em 0.5em;
30 | font-size: inherit;
31 | font-family: inherit;
32 | }
33 |
34 | #embed {
35 | display: flex;
36 | flex: 1 1 60%;
37 | flex-direction: column;
38 | justify-content: center;
39 | overflow: hidden;
40 | width: 100%;
41 | height: auto;
42 | margin: 0;
43 | border: 0;
44 | }
45 |
46 | #embed > p {
47 | width: min(300px, 100%);
48 | margin: 2rem auto;
49 | padding: 4rem 1rem;
50 | border: dashed 2px #ccc;
51 | border-radius: 0.5em;
52 | font-size: 85%;
53 | color: #777;
54 | }
55 |
--------------------------------------------------------------------------------
/examples/open-embed-project-id/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | StackBlitz SDK - Open and embed a StackBlitz project
5 |
6 |
7 |
8 |
9 |
10 |
11 | Open and embed a StackBlitz project
12 |
16 |
17 |
18 |
Embed will go here
19 |
21 |
Embed will go here
22 |
Hello World
`,
12 | 'styles.css': `body { color: lime }`,
13 | },
14 | };
15 |
16 | // Embed a project and retrieve a snapshot of its files
17 | const fs1 = await page.evaluate(
18 | async ([project]) => {
19 | const vm = await window.StackBlitzSDK.embedProject('embed', project);
20 | const fs = await vm.getFsSnapshot();
21 | return fs;
22 | },
23 | [project]
24 | );
25 |
26 | expect(fs1).not.toBe(null);
27 | expect(fs1).toEqual(project.files);
28 |
29 | // Modify project files using the VM
30 | await page.evaluate(async () => {
31 | const vm = await window.StackBlitzSDK.connect(
32 | document.getElementById('embed') as HTMLIFrameElement
33 | );
34 | const currentFs = await vm.getFsSnapshot();
35 | await vm.applyFsDiff({
36 | destroy: ['styles.css'],
37 | create: {
38 | 'index.html': currentFs!['index.html'].replace('World', 'Playwright'),
39 | 'index.js': `console.log('Yo')`,
40 | },
41 | });
42 | });
43 |
44 | // Check that files were modified
45 | const fs2 = await page.evaluate(async () => {
46 | const vm = await window.StackBlitzSDK.connect(
47 | document.getElementById('embed') as HTMLIFrameElement
48 | );
49 | return await vm.getFsSnapshot();
50 | });
51 |
52 | expect(fs2!['styles.css']).toBeUndefined();
53 | expect(fs2!['index.js']).toContain('console.log');
54 | expect(fs2!['index.html']).toBe(`Hello Playwright
`);
55 | });
56 |
--------------------------------------------------------------------------------
/test/e2e/openProject.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from '@playwright/test';
2 |
3 | test('openProjectId can navigate in same tab', async ({ page }) => {
4 | await page.goto('/test/pages/blank.html');
5 |
6 | await Promise.all([
7 | page.waitForNavigation({ waitUntil: 'commit' }),
8 | page.evaluate(() => {
9 | window.StackBlitzSDK.openProjectId('js', {
10 | clickToLoad: true,
11 | newWindow: false,
12 | origin: 'https://example.com',
13 | });
14 | }),
15 | ]);
16 |
17 | expect(page.url()).toBe('https://example.com/edit/js?ctl=1');
18 | });
19 |
20 | test('openProjectId can navigate in new tab', async ({ page }) => {
21 | await page.goto('/test/pages/blank.html');
22 | const originalUrl = page.url();
23 |
24 | const [popup] = await Promise.all([
25 | page.waitForEvent('popup'),
26 | page.evaluate(() => {
27 | window.StackBlitzSDK.openProjectId('js', {
28 | newWindow: true,
29 | openFile: 'App.jsx',
30 | origin: 'https://example.com',
31 | });
32 | }),
33 | ]);
34 |
35 | const newUrl = await popup.evaluate('location.href');
36 |
37 | expect(page.url()).toBe(originalUrl);
38 | expect(newUrl).toBe('https://example.com/edit/js?file=App.jsx');
39 | });
40 |
--------------------------------------------------------------------------------
/test/embed/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Mock StackBlitz Embed
5 |
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test/embed/index.ts:
--------------------------------------------------------------------------------
1 | import { getRequestHandler } from '$test/server/request';
2 | import { getTestProject } from '$test/unit/utils/project';
3 |
4 | import './styles.css';
5 |
6 | function getProjectData() {
7 | const data = document.getElementById('project-data')?.innerHTML || 'null';
8 | return JSON.parse(data) || getTestProject();
9 | }
10 |
11 | window.addEventListener('message', (event: MessageEvent) => {
12 | if (event.data.action === 'SDK_INIT' && typeof event.data.id === 'string') {
13 | const project = getProjectData();
14 | const handleRequest = getRequestHandler(project);
15 | const sdkChannel = new MessageChannel();
16 |
17 | sdkChannel.port1.onmessage = function (event) {
18 | const message = handleRequest(event.data);
19 | if (message) {
20 | this.postMessage(message);
21 | }
22 | };
23 |
24 | window.parent.postMessage(
25 | {
26 | action: 'SDK_INIT_SUCCESS',
27 | id: event.data.id,
28 | payload: {
29 | previewOrigin: project.template === 'node' ? null : 'https://test.stackblitz.io',
30 | },
31 | },
32 | '*',
33 | [sdkChannel.port2]
34 | );
35 | }
36 | });
37 |
--------------------------------------------------------------------------------
/test/embed/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | color: #ccc;
3 | background-color: #202327;
4 | }
5 |
--------------------------------------------------------------------------------
/test/env.d.ts:
--------------------------------------------------------------------------------
1 | interface Window {
2 | StackBlitzSDK: typeof import('@stackblitz/sdk').default;
3 | }
4 |
5 | type StackBlitzSDK = typeof import('@stackblitz/sdk').default;
6 |
--------------------------------------------------------------------------------
/test/pages/blank.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | @stackblitz/sdk
6 |
7 |
8 |
9 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/test/pages/index.ts:
--------------------------------------------------------------------------------
1 | import StackBlitzSDK from '@stackblitz/sdk';
2 |
3 | (window as any).StackBlitzSDK = StackBlitzSDK;
4 |
--------------------------------------------------------------------------------
/test/server/handlers/dependencies.ts:
--------------------------------------------------------------------------------
1 | import { HandleRequest } from '../types';
2 |
3 | export const SDK_GET_DEPS_SNAPSHOT: HandleRequest = (_data, { error, success, getProject }) => {
4 | const { template, files = {}, dependencies = {} } = getProject();
5 |
6 | const appDeps: Record = {};
7 |
8 | if (template === 'node') {
9 | if (!files['package.json']) {
10 | return error(`Could not find package.json in project with template 'node'`);
11 | }
12 | try {
13 | const { dependencies, devDependencies } = JSON.parse(files['package.json']);
14 | Object.assign(appDeps, dependencies, devDependencies);
15 | } catch (err) {
16 | return error(`Could not parse package.json in project with template 'node'`);
17 | }
18 | } else {
19 | const rand = (max: number) => Math.floor(Math.random() * (max + 1));
20 | for (const name of Object.keys(dependencies || {})) {
21 | appDeps[name] = [rand(12), rand(20), rand(9)].join('.');
22 | }
23 | }
24 |
25 | return success(appDeps);
26 | };
27 |
--------------------------------------------------------------------------------
/test/server/handlers/editor.ts:
--------------------------------------------------------------------------------
1 | import type { HandleRequest } from '../types';
2 | import { isTheme, isView, fileToPanes, filterPanes } from '../validation';
3 |
4 | export const SDK_SET_UI_THEME: HandleRequest = (data, { success, patchState }) => {
5 | const newTheme = data.payload.theme;
6 |
7 | if (isTheme(newTheme)) {
8 | patchState((state) => {
9 | state.theme = newTheme;
10 | });
11 | }
12 |
13 | return success();
14 | };
15 |
16 | export const SDK_SET_UI_VIEW: HandleRequest = (data, { success, patchState }) => {
17 | const newView = data.payload.view;
18 |
19 | if (isView(newView)) {
20 | patchState((state) => {
21 | state.view = newView;
22 | });
23 | }
24 |
25 | return success();
26 | };
27 |
28 | export const SDK_TOGGLE_SIDEBAR: HandleRequest = (data, { success, patchState }) => {
29 | const visible = data.payload.visible;
30 |
31 | if (typeof visible === 'boolean') {
32 | patchState((state) => {
33 | state.sidebarVisible = visible;
34 | });
35 | }
36 |
37 | return success();
38 | };
39 |
40 | export const SDK_OPEN_FILE: HandleRequest = (data, { error, success, getProject, patchState }) => {
41 | const { files } = getProject();
42 |
43 | const rawPanes = fileToPanes(data.payload.path);
44 | const editorPanes = filterPanes(rawPanes, files);
45 |
46 | // Error if we have zero valid files
47 | if (!editorPanes.length) {
48 | return error(
49 | `No file found for: ${rawPanes
50 | .flat()
51 | .map((p) => `'${p}'`)
52 | .join(', ')}`
53 | );
54 | }
55 |
56 | patchState((state) => {
57 | state.editorPanes = editorPanes;
58 | });
59 |
60 | return success();
61 | };
62 |
63 | export const SDK_SET_CURRENT_FILE: HandleRequest = (
64 | data,
65 | { error, success, getProject, patchState }
66 | ) => {
67 | const { path } = data.payload;
68 | const { files } = getProject();
69 |
70 | // Check that we have this file
71 | if (typeof files[path] !== 'string') {
72 | return error(`File not found: '${path}'`);
73 | }
74 |
75 | patchState((state) => {
76 | state.currentFile = path;
77 | });
78 |
79 | return success();
80 | };
81 |
--------------------------------------------------------------------------------
/test/server/handlers/fs.ts:
--------------------------------------------------------------------------------
1 | import type { HandleRequest } from '../types';
2 |
3 | export const SDK_GET_FS_SNAPSHOT: HandleRequest = (_data, { success, getProject }) => {
4 | return success(getProject().files);
5 | };
6 |
7 | export const SDK_APPLY_FS_DIFF: HandleRequest = (
8 | { payload },
9 | { success, getProject, patchProject }
10 | ) => {
11 | const updatedFiles = { ...getProject().files, ...payload.create };
12 | for (const path of payload.destroy) {
13 | delete updatedFiles[path];
14 | }
15 | patchProject((project) => (project.files = updatedFiles));
16 |
17 | return success();
18 | };
19 |
--------------------------------------------------------------------------------
/test/server/handlers/init.ts:
--------------------------------------------------------------------------------
1 | import { HandleRequest } from '../types';
2 |
3 | export const SDK_INIT: HandleRequest = (_data, { success, getProject }) => {
4 | return success({
5 | previewOrigin: getProject().template === 'node' ? null : 'https://test.stackblitz.io/',
6 | });
7 | };
8 |
--------------------------------------------------------------------------------
/test/server/handlers/preview.ts:
--------------------------------------------------------------------------------
1 | import { cleanPreviewPath } from '../validation';
2 | import type { HandleRequest } from '../types';
3 |
4 | export const SDK_GET_PREVIEW_URL: HandleRequest = (_data, { error, success, getState }) => {
5 | const { previewUrl } = getState();
6 |
7 | if (!previewUrl) {
8 | return error('No preview URL found');
9 | }
10 |
11 | return success({ url: previewUrl });
12 | };
13 |
14 | export const SDK_SET_PREVIEW_URL: HandleRequest = (
15 | data,
16 | { error, success, getProject, getState, patchState }
17 | ) => {
18 | const { template } = getProject();
19 | const { previewUrl } = getState();
20 |
21 | const newPath = cleanPreviewPath(data.payload.path);
22 | if (!newPath) {
23 | return error(`Invalid path '${data.payload.path}'`);
24 | }
25 |
26 | if (template === 'node' && !previewUrl) {
27 | return error('Server not running');
28 | }
29 |
30 | if (previewUrl) {
31 | const newUrl = new URL(previewUrl);
32 | newUrl.pathname = newPath;
33 | patchState((state) => {
34 | state.previewUrl = newUrl.toString();
35 | });
36 | }
37 |
38 | return success();
39 | };
40 |
--------------------------------------------------------------------------------
/test/server/request.ts:
--------------------------------------------------------------------------------
1 | import cloneDeep from 'lodash/cloneDeep';
2 |
3 | import type { Project, ProjectOptions } from '$src/interfaces';
4 |
5 | import type {
6 | AppState,
7 | AppStateContext,
8 | HandleRequest,
9 | HandleRootRequest,
10 | MessageContext,
11 | RequestData,
12 | ProjectContext,
13 | InitRequestData,
14 | AnyRequestData,
15 | InitResponseData,
16 | } from './types';
17 | import { fileToPanes, filterPanes } from './validation';
18 |
19 | import * as dependenciesHandlers from './handlers/dependencies';
20 | import * as editorHandlers from './handlers/editor';
21 | import * as fsHandlers from './handlers/fs';
22 | import * as previewHandlers from './handlers/preview';
23 |
24 | const handlers: Record = {
25 | ...dependenciesHandlers,
26 | ...editorHandlers,
27 | ...fsHandlers,
28 | ...previewHandlers,
29 | };
30 |
31 | export function getRequestHandler(
32 | project: Project,
33 | options: ProjectOptions = {}
34 | ): HandleRootRequest {
35 | const projectContext = getProjectContext(project);
36 | const appStateContext = getAppStateContext(project, options);
37 |
38 | return (data) => {
39 | if (isInitRequest(data)) {
40 | const response: InitResponseData = {
41 | action: 'SDK_INIT_SUCCESS',
42 | id: data.id,
43 | payload: {
44 | previewOrigin:
45 | projectContext.getProject().template === 'node' ? null : 'https://test.stackblitz.io',
46 | },
47 | };
48 | return response;
49 | }
50 |
51 | if (isVmRequest(data)) {
52 | const context = {
53 | ...appStateContext,
54 | ...projectContext,
55 | ...getMessageContext(data),
56 | };
57 | if (typeof handlers[data.type] === 'function') {
58 | return handlers[data.type](data, context);
59 | }
60 | return context.error('NOT IMPLEMENTED');
61 | }
62 |
63 | return null;
64 | };
65 | }
66 |
67 | function isInitRequest(data: AnyRequestData): data is InitRequestData {
68 | return data.action === 'SDK_INIT' && typeof data.id === 'string';
69 | }
70 |
71 | function isVmRequest(data: AnyRequestData): data is RequestData {
72 | return typeof data.type === 'string' && data.type.startsWith('SDK_');
73 | }
74 |
75 | function getMessageContext(data: RequestData): MessageContext {
76 | return {
77 | error(msg) {
78 | return {
79 | type: `${data.type}_FAILURE`,
80 | payload: { __reqid: data.payload.__reqid, __success: false, __error: msg },
81 | };
82 | },
83 | success(payload) {
84 | return {
85 | type: `${data.type}_SUCCESS`,
86 | payload: { __reqid: data.payload.__reqid, __success: true, ...payload },
87 | };
88 | },
89 | };
90 | }
91 |
92 | export function getProjectContext(originalProject: Project): ProjectContext {
93 | const project = cloneDeep(originalProject);
94 |
95 | return {
96 | getProject() {
97 | return project;
98 | },
99 | patchProject(patchFn) {
100 | patchFn(project);
101 | },
102 | };
103 | }
104 |
105 | export function getAppStateContext(project: Project, options: ProjectOptions): AppStateContext {
106 | const isNode = project.template === 'node';
107 |
108 | const openFile = options.openFile ?? Object.keys(project.files)[0];
109 | const panes: AppState['editorPanes'] = filterPanes(fileToPanes(openFile), project.files);
110 |
111 | const state: AppState = {
112 | editorPanes: panes,
113 | currentFile: panes.flat()[0],
114 | previewUrl: isNode ? undefined : 'https://test.stackblitz.io/',
115 | theme: options.theme ?? 'default',
116 | view: options.view ?? 'default',
117 | sidebarVisible: options.showSidebar ?? false,
118 | };
119 |
120 | return {
121 | getState() {
122 | return state;
123 | },
124 | patchState(patchFn) {
125 | patchFn(state);
126 | },
127 | };
128 | }
129 |
--------------------------------------------------------------------------------
/test/server/types.ts:
--------------------------------------------------------------------------------
1 | import type { Project } from '$src/interfaces';
2 |
3 | export interface InitRequestData {
4 | action: 'SDK_INIT';
5 | id: string;
6 | }
7 |
8 | export interface InitResponseData {
9 | action: 'SDK_INIT_SUCCESS';
10 | id: string;
11 | payload: {
12 | previewOrigin: string | null;
13 | };
14 | }
15 |
16 | export interface RequestData {
17 | type: `SDK_${string}`;
18 | payload: {
19 | __reqid: string;
20 | [key: string]: any;
21 | };
22 | }
23 |
24 | export type AnyRequestData = Partial;
25 |
26 | export interface ResponseData {
27 | type: string;
28 | payload: {
29 | __reqid: string;
30 | __success: boolean;
31 | __error?: string;
32 | [key: string]: any;
33 | };
34 | }
35 |
36 | export interface AppState {
37 | currentFile?: string;
38 | editorPanes: string[][];
39 | previewUrl?: string;
40 | sidebarVisible: boolean;
41 | view: 'default' | 'editor' | 'preview';
42 | theme: 'default' | 'light' | 'dark';
43 | }
44 |
45 | export interface AppStateContext {
46 | getState(): AppState;
47 | patchState(patchFn: (state: AppState) => void): void;
48 | }
49 |
50 | export interface ProjectContext {
51 | getProject(): Project;
52 | patchProject(patchFn: (project: Project) => void): void;
53 | }
54 |
55 | export interface MessageContext {
56 | error(msg: string): ResponseData;
57 | success(payload?: Record): ResponseData;
58 | }
59 |
60 | export type HandlerContext = AppStateContext & ProjectContext & MessageContext;
61 |
62 | export type HandleRequest = (data: RequestData, context: HandlerContext) => ResponseData;
63 |
64 | export type HandleRootRequest = (data: AnyRequestData) => InitResponseData | ResponseData | null;
65 |
--------------------------------------------------------------------------------
/test/server/validation.ts:
--------------------------------------------------------------------------------
1 | import type { OpenFileOption } from '$src/interfaces';
2 |
3 | export function isTheme(input: any) {
4 | return ['default', 'dark', 'light'].includes(input);
5 | }
6 |
7 | export function isView(input: any) {
8 | return ['default', 'editor', 'preview'].includes(input);
9 | }
10 |
11 | export function fileToPanes(file: OpenFileOption): string[][] {
12 | const files = Array.isArray(file) ? file : [file];
13 | return files
14 | .filter((path) => typeof path === 'string')
15 | .map((path) => path.split(','))
16 | .filter((paths) => paths.length > 0);
17 | }
18 |
19 | export function filterPanes(panes: string[][], files: Record): string[][] {
20 | const fileExists = (path: string) => typeof files[path] === 'string';
21 | return panes.map((pane) => pane.filter(fileExists)).filter((pane) => pane.length > 0);
22 | }
23 |
24 | export function cleanPreviewPath(input: any): string {
25 | if (typeof input === 'string') {
26 | let path = decodeURIComponent(input).split(/#\?/)[0].trim();
27 | if (path.length > 0 && !path.startsWith('/')) {
28 | path = '/' + path;
29 | }
30 | return path;
31 | }
32 | return '';
33 | }
34 |
--------------------------------------------------------------------------------
/test/unit/__snapshots__/generate.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`createProjectFrameHTML > generates a HTML document string 1`] = `
4 | "
5 |
6 |
7 |
8 |
13 |
14 |
15 | "
16 | `;
17 |
--------------------------------------------------------------------------------
/test/unit/__snapshots__/lib.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`openProject > injects a form to open project in new page 1`] = `
4 | NamedNodeMap {
5 | "action": "https://stackblitz.com/run",
6 | "method": "POST",
7 | "style": "display:none!important;",
8 | "target": "_blank",
9 | }
10 | `;
11 |
--------------------------------------------------------------------------------
/test/unit/__snapshots__/vm.spec.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`vm.getDependencies > node project with package.json 1`] = `
4 | {
5 | "lodash": "^4",
6 | "rxjs": "^7",
7 | "serve": "^12",
8 | "vite": "^3",
9 | }
10 | `;
11 |
--------------------------------------------------------------------------------
/test/unit/generate.spec.ts:
--------------------------------------------------------------------------------
1 | /** @vitest-environment happy-dom */
2 | import { afterEach, describe, expect, test, vi } from 'vitest';
3 |
4 | import { createProjectForm, createProjectFrameHTML, openNewProject } from '$src/generate';
5 | import { useMockConsole, restoreConsole } from './utils/console';
6 | import { formValue, makeContainer, removeContainer } from './utils/dom';
7 | import { getTestProject } from './utils/project';
8 |
9 | const cleanUp = () => {
10 | restoreConsole();
11 | removeContainer();
12 | };
13 |
14 | describe('createProjectFrameHTML', () => {
15 | afterEach(cleanUp);
16 |
17 | test('generates a HTML document string', () => {
18 | const html = createProjectFrameHTML(getTestProject());
19 | expect(html).toBeTypeOf('string');
20 | expect(html).toMatchSnapshot();
21 | });
22 |
23 | test('generated HTML contains a form', () => {
24 | const parent = makeContainer();
25 | parent.innerHTML = createProjectFrameHTML(getTestProject(), {
26 | view: 'editor',
27 | terminalHeight: 50,
28 | });
29 |
30 | // Check for form element
31 | const form = parent.querySelector('form')!;
32 | expect(form).toBeInstanceOf(HTMLFormElement);
33 | expect(form.getAttribute('action')).toBe(
34 | 'https://stackblitz.com/run?embed=1&view=editor&terminalHeight=50'
35 | );
36 | });
37 | });
38 |
39 | describe('createProjectForm', () => {
40 | afterEach(cleanUp);
41 |
42 | test('generates a form element', () => {
43 | const project = getTestProject({
44 | title: 'My Test Project',
45 | dependencies: { cowsay: '1.5.0' },
46 | settings: { compile: { clearConsole: false } },
47 | });
48 | const form = createProjectForm(project);
49 | const value = (name: string) => formValue(form, name);
50 |
51 | // Check input values
52 | expect(value('project[title]')).toBe('My Test Project');
53 | expect(value('project[description]')).toBe(undefined);
54 | expect(value('project[template]')).toBe(project.template);
55 | expect(value('project[dependencies]')).toBe(JSON.stringify(project.dependencies));
56 | expect(value('project[settings]')).toBe(JSON.stringify(project.settings));
57 | expect(value('project[files][package.json]')).toBe(project.files['package.json']);
58 | expect(value('project[files][index.js]')).toBe(project.files['index.js']);
59 | });
60 |
61 | test('warns on unknown template type', () => {
62 | const console = useMockConsole();
63 | const warnSpy = vi.spyOn(console, 'warn');
64 |
65 | const project = getTestProject({ template: 'doesntexist' as any });
66 | const form = createProjectForm(project);
67 | const value = (name: string) => formValue(form, name);
68 |
69 | // Unknown template value is accepted by triggers a warning
70 | expect(value('project[template]')).toBe('doesntexist');
71 | expect(warnSpy).toHaveBeenCalledWith(
72 | `Unsupported project.template: must be one of 'angular-cli', 'create-react-app', 'html', 'javascript', 'node', 'polymer', 'typescript', 'vue'`
73 | );
74 | });
75 |
76 | test('ignores dependencies for node template', () => {
77 | const console = useMockConsole();
78 | const warnSpy = vi.spyOn(console, 'warn');
79 |
80 | const project = getTestProject({
81 | template: 'node',
82 | dependencies: { serve: '^12' },
83 | });
84 | const form = createProjectForm(project);
85 | const value = (name: string) => formValue(form, name);
86 |
87 | // Unknown template value is accepted by triggers a warning
88 | expect(value('project[template]')).toBe('node');
89 | expect(value('project[dependencies]')).toBe(undefined);
90 | expect(warnSpy).toHaveBeenCalledWith(
91 | `Invalid project.dependencies: dependencies must be provided as a 'package.json' file when using the 'node' template.`
92 | );
93 | });
94 | });
95 |
96 | describe('openNewProject', () => {
97 | test('cleans up after itself', () => {
98 | const project = getTestProject();
99 |
100 | expect(document.body.children.length).toBe(0);
101 | expect(() => openNewProject(project)).not.toThrow();
102 | expect(document.body.children.length).toBe(0);
103 | });
104 | });
105 |
--------------------------------------------------------------------------------
/test/unit/helpers.spec.ts:
--------------------------------------------------------------------------------
1 | /** @vitest-environment happy-dom */
2 | import { afterEach, describe, expect, test } from 'vitest';
3 |
4 | import { DEFAULT_FRAME_HEIGHT } from '$src/constants';
5 | import { embedUrl, findElement, genID, openTarget, openUrl, replaceAndEmbed } from '$src/helpers';
6 | import { h, makeContainer, removeContainer } from './utils/dom';
7 |
8 | describe('embedUrl', () => {
9 | test('works with custom origins', () => {
10 | expect(embedUrl('/edit/test', { origin: 'http://localhost:8000' })).toBe(
11 | 'http://localhost:8000/edit/test?embed=1'
12 | );
13 | expect(embedUrl('/edit/test', { origin: 'http://localhost:8000/' })).toBe(
14 | 'http://localhost:8000/edit/test?embed=1'
15 | );
16 | });
17 |
18 | test('turns config into URL query parameters', () => {
19 | expect(
20 | embedUrl('/edit/test', {
21 | clickToLoad: true,
22 | openFile: 'index.js',
23 | theme: 'dark',
24 | crossOriginIsolated: true,
25 | })
26 | ).toBe('https://stackblitz.com/edit/test?embed=1&ctl=1&file=index.js&theme=dark&corp=1');
27 | });
28 |
29 | test('allows removing the embed=1 query parameter', () => {
30 | expect(embedUrl('/edit/test', { forceEmbedLayout: false })).toBe(
31 | 'https://stackblitz.com/edit/test'
32 | );
33 | });
34 | });
35 |
36 | describe('findElement', () => {
37 | afterEach(removeContainer);
38 |
39 | test('returns HTML elements as-is', () => {
40 | const div = h('div');
41 | expect(findElement(div)).toBe(div);
42 | });
43 |
44 | test('finds HTML elements by id', () => {
45 | const div = makeContainer().appendChild(h('div', { id: 'test' }));
46 | expect(findElement('test')).toBe(div);
47 | });
48 |
49 | test('throws when element cannot be found', () => {
50 | expect(() => findElement('test')).toThrowError("Could not find element with id 'test'");
51 | });
52 |
53 | test('throws with invalid input', () => {
54 | expect(() => findElement(Math.PI as any)).toThrowError('Invalid element: 3.141592653589793');
55 | });
56 | });
57 |
58 | describe('genID', () => {
59 | function findCollisions(generator: () => string, count = 0) {
60 | const generated: Record = {};
61 | const collisions: string[] = [];
62 | while (count > 0) {
63 | const item = generator();
64 | if (generated[item]) collisions.push(item);
65 | generated[item] = true;
66 | count--;
67 | }
68 | return {
69 | all: Object.keys(generated),
70 | collisions,
71 | };
72 | }
73 |
74 | test('doesn’t produce collisions for a low number of values', () => {
75 | const RUN_COUNT = 1_000;
76 | const { all, collisions } = findCollisions(genID, RUN_COUNT);
77 | expect(all.length).toBe(RUN_COUNT);
78 | expect(collisions.length).toBe(0);
79 | });
80 | });
81 |
82 | describe('openTarget', () => {
83 | test('translates the newWindow option', () => {
84 | expect(openTarget()).toBe('_blank');
85 | expect(openTarget({ newWindow: true })).toBe('_blank');
86 | expect(openTarget({ newWindow: false })).toBe('_self');
87 | });
88 | });
89 |
90 | describe('openUrl', () => {
91 | test('works with custom origins', () => {
92 | expect(openUrl('/edit/test', { origin: 'http://localhost:8000/' })).toBe(
93 | 'http://localhost:8000/edit/test'
94 | );
95 | });
96 |
97 | test('turns config into URL query parameters', () => {
98 | expect(openUrl('/edit/test', { clickToLoad: true, openFile: ['index.js', 'README.md'] })).toBe(
99 | 'https://stackblitz.com/edit/test?ctl=1&file=index.js&file=README.md'
100 | );
101 | });
102 |
103 | test('allows adding the embed=1 query parameter', () => {
104 | expect(openUrl('/edit/test', { forceEmbedLayout: true })).toBe(
105 | 'https://stackblitz.com/edit/test?embed=1'
106 | );
107 | });
108 | });
109 |
110 | describe('replaceAndEmbed', () => {
111 | afterEach(removeContainer);
112 |
113 | test('throws with invalid input', () => {
114 | const target = h('div') as HTMLDivElement;
115 | const iframe = h('iframe', { src: 'about:blank' }) as HTMLIFrameElement;
116 |
117 | expect(() => {
118 | replaceAndEmbed(target, undefined as any);
119 | }).toThrowError('Invalid Element');
120 |
121 | expect(() => {
122 | replaceAndEmbed(undefined as any, iframe);
123 | }).toThrowError('Invalid Element');
124 |
125 | // Still throws because the target element has not parent
126 | expect(() => {
127 | replaceAndEmbed(target, iframe);
128 | }).toThrowError('Invalid Element');
129 |
130 | // Attach target element to document
131 | makeContainer().append(target);
132 | expect(() => {
133 | replaceAndEmbed(target, iframe);
134 | }).not.toThrow();
135 | });
136 |
137 | test('replaces target element with iframe', () => {
138 | const embedSrc = 'https://stackblitz.com/edit/test?embed=1';
139 | const target = h('div', {
140 | id: 'embed',
141 | class: 'test',
142 | 'data-old': 'true',
143 | });
144 | const iframe = h('iframe', {
145 | src: embedSrc,
146 | 'data-new': 'true',
147 | }) as HTMLIFrameElement;
148 |
149 | makeContainer().append(target);
150 | replaceAndEmbed(target!, iframe);
151 | const found = document.getElementById('embed')!;
152 |
153 | expect(found).toBe(iframe);
154 | expect(found.className).toBe('test');
155 | expect(found.getAttribute('src')).toBe(embedSrc);
156 | expect(found.getAttribute('data-old')).toBe(null);
157 | expect(found.getAttribute('data-new')).toBe('true');
158 | });
159 |
160 | test('sets default iframe dimensions', () => {
161 | const div = makeContainer().appendChild(h('div'));
162 | const iframe = h('iframe', { src: 'https://example.com/' });
163 |
164 | replaceAndEmbed(div, iframe as HTMLIFrameElement);
165 |
166 | expect(iframe.getAttribute('height')).toBe(String(DEFAULT_FRAME_HEIGHT));
167 | expect(iframe.getAttribute('width')).toBe(null);
168 | expect(iframe.style.width).toBe('100%');
169 | });
170 |
171 | test('sets iframe dimensions from EmbedOptions', () => {
172 | const div = makeContainer().appendChild(h('div'));
173 | const iframe = h('iframe', { src: 'https://example.com/' });
174 |
175 | replaceAndEmbed(div, iframe as HTMLIFrameElement, { width: 500, height: 500 });
176 |
177 | expect(iframe.getAttribute('height')).toBe('500');
178 | expect(iframe.getAttribute('width')).toBe('500');
179 | expect(iframe.getAttribute('style')).toBe(null);
180 | });
181 | });
182 |
--------------------------------------------------------------------------------
/test/unit/lib.spec.ts:
--------------------------------------------------------------------------------
1 | /** @vitest-environment happy-dom */
2 | import { describe, expect, test, vi } from 'vitest';
3 |
4 | import { connect, openGithubProject, openProject, openProjectId } from '$src/lib';
5 | import { getTestProject } from './utils/project';
6 |
7 | /**
8 | * Cannot test a working use case for connect or or all the embed* methods using happy-dom,
9 | * due to iframes not having a contentWindow and Window objects not having postMessage
10 | */
11 | describe('connect', () => {
12 | test('rejects if target is not an iframe', async () => {
13 | const div = document.createElement('div');
14 | await expect(connect(div as any)).rejects.toBe(`Provided element is not an iframe.`);
15 | });
16 | });
17 |
18 | describe('openProject', () => {
19 | test('injects a form to open project in new page', () => {
20 | const project = getTestProject();
21 |
22 | // Spy on openProject doing DOM mutations
23 | let form: HTMLFormElement;
24 | const observerCb = vi.fn(([record]: MutationRecord[]) => {
25 | if (!record || form) return;
26 | record.addedNodes.forEach((node) => {
27 | if (node instanceof HTMLFormElement) {
28 | form = node;
29 | }
30 | });
31 | });
32 | const observer = new MutationObserver(observerCb);
33 | observer.observe(document.body, {
34 | childList: true,
35 | attributes: false,
36 | subtree: true,
37 | });
38 |
39 | expect(() => openProject(project)).not.toThrow();
40 |
41 | // We expect to have seen 2 DOM mutations (add then remove form)
42 | expect(observerCb).toHaveBeenCalledTimes(2);
43 |
44 | // We expect to have seen a form
45 | expect(form!).toBeInstanceOf(HTMLFormElement);
46 | expect(form!.attributes).toMatchSnapshot();
47 |
48 | observer.disconnect();
49 | observerCb.mockRestore();
50 | });
51 | });
52 |
53 | describe('openProjectId', () => {
54 | test('calls window.open', () => {
55 | const openSpy = vi.spyOn(window, 'open');
56 |
57 | openProjectId('js');
58 | expect(openSpy).toBeCalledWith('https://stackblitz.com/edit/js', '_blank');
59 |
60 | openProjectId('js', {
61 | origin: 'https://example.com',
62 | newWindow: false,
63 | openFile: 'src/index.js',
64 | });
65 | expect(openSpy).toBeCalledWith('https://example.com/edit/js?file=src%2Findex.js', '_self');
66 |
67 | openSpy.mockRestore();
68 | });
69 | });
70 |
71 | describe('openGithubProject', () => {
72 | test('calls window.open', () => {
73 | const openSpy = vi.spyOn(window, 'open');
74 |
75 | openGithubProject('stackblitz/sdk');
76 | expect(openSpy).toBeCalledWith('https://stackblitz.com/github/stackblitz/sdk', '_blank');
77 |
78 | openGithubProject('stackblitz/docs', { newWindow: false, hideExplorer: true });
79 | expect(openSpy).toBeCalledWith(
80 | 'https://stackblitz.com/github/stackblitz/docs?hideExplorer=1',
81 | '_self'
82 | );
83 |
84 | openSpy.mockRestore();
85 | });
86 | });
87 |
--------------------------------------------------------------------------------
/test/unit/params.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, test } from 'vitest';
2 |
3 | import {
4 | ParamOptions,
5 | booleanParam,
6 | buildParams,
7 | enumParam,
8 | generators,
9 | percentParam,
10 | stringParams,
11 | trueParam,
12 | } from '$src/params';
13 |
14 | describe('params formats', () => {
15 | test('trueParam accepts true only', () => {
16 | expect(trueParam('_test')).toBe('');
17 | expect(trueParam('_test', 1 as any)).toBe('');
18 | expect(trueParam('_test', false)).toBe('');
19 | expect(trueParam('_test', true)).toBe('_test=1');
20 | });
21 |
22 | test('booleanParam accepts true and false', () => {
23 | expect(booleanParam('_test')).toBe('');
24 | expect(booleanParam('_test', 'yes' as any)).toBe('');
25 | expect(booleanParam('_test', false)).toBe('_test=0');
26 | expect(booleanParam('_test', true)).toBe('_test=1');
27 | });
28 |
29 | test('percentParam clamps and rounds number values', () => {
30 | expect(percentParam('_test')).toBe('');
31 | expect(percentParam('_test', '50%' as any)).toBe('');
32 | expect(percentParam('_test', 0 / 0)).toBe('');
33 | // It accepts integers
34 | expect(percentParam('_test', 0)).toBe('_test=0');
35 | expect(percentParam('_test', 33)).toBe('_test=33');
36 | expect(percentParam('_test', 100)).toBe('_test=100');
37 | // It rounds values
38 | expect(percentParam('_test', Math.PI)).toBe('_test=3');
39 | expect(percentParam('_test', 49.5001)).toBe('_test=50');
40 | // It clamps values
41 | expect(percentParam('_test', -50)).toBe('_test=0');
42 | expect(percentParam('_test', 150)).toBe('_test=100');
43 | });
44 |
45 | test('stringParams', () => {
46 | expect(stringParams('_test', '')).toBe('');
47 | expect(stringParams('_test', 'hello')).toBe('_test=hello');
48 | expect(stringParams('_test', 'a/../b?c&d')).toBe('_test=a%2F..%2Fb%3Fc%26d');
49 | expect(stringParams('_test', ['hello', 'beautiful', 'world'])).toBe(
50 | '_test=hello&_test=beautiful&_test=world'
51 | );
52 | });
53 |
54 | test('enumParam drops invalid options', () => {
55 | const options = ['yes', 'no', 'maybe?'];
56 | expect(enumParam('_test')).toBe('');
57 | expect(enumParam('_test', 'yes', options)).toBe('_test=yes');
58 | expect(enumParam('_test', 'nope', options)).toBe('');
59 | expect(enumParam('_test', 'maybe?', options)).toBe('_test=maybe%3F');
60 | });
61 | });
62 |
63 | describe('buildParams', () => {
64 | test('ignores unknown options', () => {
65 | expect(buildParams()).toBe('');
66 | expect(buildParams({})).toBe('');
67 | expect(buildParams({ boop: 'boop', height: 50 } as any)).toBe('');
68 | expect(buildParams({ boop: 'boop', showSidebar: true } as any)).toBe('?showSidebar=1');
69 | });
70 |
71 | test('ignores unknown options', () => {
72 | expect(buildParams({})).toBe('');
73 | expect(buildParams({ boop: 'boop', height: 50 } as any)).toBe('');
74 | expect(buildParams({ boop: 'boop', showSidebar: true } as any)).toBe('?showSidebar=1');
75 | expect(buildParams({ origin: 'https://example.com' } as any)).toBe('');
76 | });
77 |
78 | test('doesn’t output undefined or default values', () => {
79 | const options: ParamOptions = {
80 | clickToLoad: false,
81 | devToolsHeight: NaN,
82 | forceEmbedLayout: false,
83 | hideDevTools: false,
84 | hideExplorer: false,
85 | hideNavigation: false,
86 | openFile: '',
87 | organization: undefined,
88 | showSidebar: undefined,
89 | sidebarView: 'default',
90 | startScript: undefined,
91 | terminalHeight: NaN,
92 | theme: 'default',
93 | view: 'default',
94 | zenMode: false,
95 | crossOriginIsolated: false,
96 | };
97 | // Check that we are testing all options
98 | expect(Object.keys(options).sort()).toStrictEqual(Object.keys(generators).sort());
99 | // Check that default and undefined values don't output anything
100 | expect(buildParams(options)).toBe('');
101 | });
102 |
103 | test('outputs non-default values for known options', () => {
104 | const options: ParamOptions = {
105 | clickToLoad: true,
106 | devToolsHeight: 100,
107 | forceEmbedLayout: true,
108 | hideDevTools: true,
109 | hideExplorer: true,
110 | hideNavigation: true,
111 | openFile: ['src/index.js,src/styles.css', 'package.json'],
112 | organization: { name: 'stackblitz', provider: 'github' },
113 | showSidebar: true,
114 | sidebarView: 'search',
115 | startScript: 'dev:serve',
116 | terminalHeight: 50,
117 | theme: 'light',
118 | view: 'preview',
119 | zenMode: true,
120 | crossOriginIsolated: true,
121 | };
122 | // Check that we are testing all options
123 | expect(Object.keys(options).sort()).toStrictEqual(Object.keys(generators).sort());
124 | // Check that all values end up in the query string
125 | // (Comparing sorted arrays instead of strings to make failures readable.)
126 | expect(buildParams(options).split('&').sort()).toStrictEqual(
127 | [
128 | '?ctl=1',
129 | 'devtoolsheight=100',
130 | 'embed=1',
131 | 'hidedevtools=1',
132 | 'hideExplorer=1',
133 | 'hideNavigation=1',
134 | 'file=src%2Findex.js%2Csrc%2Fstyles.css',
135 | 'file=package.json',
136 | 'orgName=stackblitz',
137 | 'orgProvider=github',
138 | 'showSidebar=1',
139 | 'sidebarView=search',
140 | 'startScript=dev%3Aserve',
141 | 'terminalHeight=50',
142 | 'theme=light',
143 | 'view=preview',
144 | 'zenMode=1',
145 | 'corp=1',
146 | ].sort()
147 | );
148 | });
149 | });
150 |
--------------------------------------------------------------------------------
/test/unit/rdc.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, test } from 'vitest';
2 |
3 | import { RDC } from '$src/rdc';
4 |
5 | function getRdc({ error, delay }: { error?: string; delay?: number } = {}) {
6 | const channel = new MessageChannel();
7 |
8 | channel.port1.onmessage = function (event) {
9 | const message = getResponseMessage({ ...event.data, error });
10 | setTimeout(() => this.postMessage(message), delay);
11 | };
12 |
13 | return new RDC(channel.port2);
14 | }
15 |
16 | function getResponseMessage({
17 | type,
18 | payload,
19 | error,
20 | }: {
21 | type: string;
22 | payload: any;
23 | error?: string;
24 | }) {
25 | const response = {
26 | type: `${type}_${error ? 'ERROR' : 'SUCCESS'}`,
27 | payload: {
28 | __reqid: payload.__reqid,
29 | __success: !error,
30 | },
31 | };
32 | if (error) {
33 | (response.payload as any).__error = error;
34 | }
35 | if (payload.value) {
36 | (response.payload as any).value = payload.value;
37 | }
38 | return response;
39 | }
40 |
41 | describe('RDC', () => {
42 | test('receives a success value', async () => {
43 | const rdc = getRdc({});
44 | await expect(
45 | rdc.request({
46 | type: 'TEST',
47 | payload: {},
48 | })
49 | ).resolves.toBe(null);
50 | await expect(
51 | rdc.request({
52 | type: 'TEST',
53 | payload: { value: 100 },
54 | })
55 | ).resolves.toEqual({ value: 100 });
56 | });
57 |
58 | test('receives a value after a delay', async () => {
59 | const rdc = getRdc({ delay: 20 });
60 | await expect(
61 | rdc.request({
62 | type: 'TEST',
63 | payload: {},
64 | })
65 | ).resolves.toBe(null);
66 | });
67 |
68 | test('receives an error message', async () => {
69 | const rdc = getRdc({ error: 'something went wrong' });
70 | await expect(rdc.request({ type: 'TEST', payload: {} })).rejects.toBe(
71 | 'TEST_ERROR: something went wrong'
72 | );
73 | });
74 | });
75 |
--------------------------------------------------------------------------------
/test/unit/utils/console.ts:
--------------------------------------------------------------------------------
1 | const originalConsole = globalThis.console;
2 |
3 | const mockConsole: Partial = {
4 | log(...args) {},
5 | warn(...args) {},
6 | error(...args) {},
7 | table(...args) {},
8 | };
9 |
10 | export function useMockConsole() {
11 | globalThis.console = mockConsole as typeof originalConsole;
12 | return mockConsole;
13 | }
14 |
15 | export function restoreConsole() {
16 | globalThis.console = originalConsole;
17 | }
18 |
--------------------------------------------------------------------------------
/test/unit/utils/dom.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Build a HTMLElement with attributes
3 | */
4 | export function h(name: string, attrs: Record = {}) {
5 | const element = document.createElement(name);
6 | for (const [key, val] of Object.entries(attrs)) {
7 | element.setAttribute(key, val);
8 | }
9 | return element;
10 | }
11 |
12 | export function formValue(form: HTMLFormElement, name: string): string | undefined {
13 | const inputs = form.querySelectorAll('[name]');
14 | for (const input of inputs) {
15 | if (input.name === name) return input.value;
16 | }
17 | }
18 |
19 | const TEST_CONTAINER_ID = '__TEST_CONTAINER__';
20 |
21 | function findContainer(): HTMLDivElement | null {
22 | return document.getElementById(TEST_CONTAINER_ID) as HTMLDivElement | null;
23 | }
24 |
25 | export function makeContainer(): HTMLDivElement {
26 | let container = findContainer();
27 | if (!container) {
28 | container = h('div', { id: TEST_CONTAINER_ID }) as HTMLDivElement;
29 | document.body.append(container);
30 | }
31 | return container;
32 | }
33 |
34 | export function removeContainer() {
35 | findContainer()?.remove();
36 | }
37 |
--------------------------------------------------------------------------------
/test/unit/utils/project.ts:
--------------------------------------------------------------------------------
1 | import type { Project } from '$src/index';
2 |
3 | export function getTestProject(project?: Partial): Project {
4 | return {
5 | title: 'Test Project',
6 | template: 'javascript',
7 | files: {
8 | 'package.json': `{
9 | "dependencies": {"cowsay": "1.5.0"}
10 | }`,
11 | 'index.js': `import cowsay from 'cowsay';
12 | console.log(cowsay('Hello world!'));
13 | `,
14 | },
15 | ...project,
16 | };
17 | }
18 |
--------------------------------------------------------------------------------
/test/unit/vm.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, test } from 'vitest';
2 |
3 | import type { Project, FsDiff } from '$src/index';
4 | import { VM } from '$src/vm';
5 | import { getRequestHandler } from '$test/server/request';
6 | import { getTestProject } from '$test/unit/utils/project';
7 |
8 | async function getVm(project: Project, { delay = 0 }: { delay?: number } = {}) {
9 | const channel = new MessageChannel();
10 | const handleRequest = getRequestHandler(project);
11 |
12 | channel.port2.onmessage = function (event) {
13 | const response = handleRequest(event.data);
14 | setTimeout(() => this.postMessage(response), delay);
15 | };
16 |
17 | return new VM(channel.port1, {
18 | previewOrigin: project.template === 'node' ? undefined : 'https://test.stackblitz.io',
19 | });
20 | }
21 |
22 | describe('vm.getFsSnapshot', () => {
23 | test('returns null with no files', async () => {
24 | const files: Project['files'] = {};
25 | const vm = await getVm(getTestProject({ files }));
26 |
27 | await expect(vm.getFsSnapshot()).resolves.toBe(null);
28 | });
29 |
30 | test('returns files', async () => {
31 | const files: Project['files'] = { a: 'aaaa', b: 'bbbb' };
32 | const vm = await getVm(getTestProject({ files }));
33 |
34 | await expect(vm.getFsSnapshot()).resolves.toEqual(files);
35 | });
36 | });
37 |
38 | describe('vm.applyFsDiff', () => {
39 | test('throws on invalid diff', async () => {
40 | const vm = await getVm(getTestProject());
41 |
42 | expect(() => vm.applyFsDiff(null as any)).toThrowError(
43 | 'Invalid diff object: expected diff.create to be an object.'
44 | );
45 |
46 | expect(() => vm.applyFsDiff({ destroy: [] } as any)).toThrowError(
47 | 'Invalid diff object: expected diff.create to be an object.'
48 | );
49 |
50 | expect(() => vm.applyFsDiff({ create: {} } as any)).toThrowError(
51 | 'Invalid diff object: expected diff.destroy to be an array.'
52 | );
53 | });
54 |
55 | test('can add a file', async () => {
56 | const files: Project['files'] = {
57 | 'index.js': 'Console.warn("Hello world!")',
58 | };
59 | const diff: FsDiff = {
60 | create: {
61 | 'new.js': '/* Hello */',
62 | },
63 | destroy: [],
64 | };
65 |
66 | const vm = await getVm(getTestProject({ files }));
67 | await expect(vm.applyFsDiff(diff)).resolves.toBe(null);
68 |
69 | const snapshot = vm.getFsSnapshot();
70 | await expect(snapshot.then((files) => Object.keys(files!).length)).resolves.toBe(2);
71 | await expect(snapshot.then((files) => files!['index.js'])).resolves.toBe(files['index.js']);
72 | await expect(snapshot.then((files) => files!['new.js'])).resolves.toBe(diff.create['new.js']);
73 | });
74 |
75 | test('can delete a file', async () => {
76 | const files: Project['files'] = {
77 | 'src/index.js': 'Console.warn("Hello world!")',
78 | };
79 | const diff: FsDiff = {
80 | create: {},
81 | destroy: ['src/index.js'],
82 | };
83 | const vm = await getVm(getTestProject({ files }));
84 |
85 | await expect(vm.applyFsDiff(diff)).resolves.toBe(null);
86 | await expect(vm.getFsSnapshot()).resolves.toBe(null);
87 | });
88 | });
89 |
90 | describe('vm.getDependencies', () => {
91 | test('project with no dependencies', async () => {
92 | const project = getTestProject({ dependencies: undefined });
93 | const vm = await getVm(project);
94 |
95 | await expect(vm.getDependencies()).resolves.toBe(null);
96 | });
97 |
98 | test('project with dependencies', async () => {
99 | const project = getTestProject({
100 | dependencies: {
101 | lodash: '^4.17.10',
102 | rxjs: '^7.5.0',
103 | },
104 | });
105 | const vm = await getVm(project);
106 | const depNames = vm.getDependencies().then((deps) => Object.keys(deps!));
107 |
108 | // We should get original dependencies
109 | await expect(depNames).resolves.toContain('lodash');
110 | await expect(depNames).resolves.toContain('rxjs');
111 | // … but with different version specifiers
112 | await expect(vm.getDependencies()).resolves.not.toContain(project.dependencies);
113 | });
114 |
115 | test('node project with no package.json', async () => {
116 | const project = getTestProject({
117 | template: 'node',
118 | files: {},
119 | });
120 | const vm = await getVm(project);
121 |
122 | await expect(vm.getDependencies()).rejects.toBe(
123 | `SDK_GET_DEPS_SNAPSHOT_FAILURE: Could not find package.json in project with template 'node'`
124 | );
125 | });
126 |
127 | test('node project with invalid package.json', async () => {
128 | const project = getTestProject({
129 | template: 'node',
130 | files: { 'package.json': '/* whoops */' },
131 | });
132 | const vm = await getVm(project);
133 |
134 | await expect(vm.getDependencies()).rejects.toBe(
135 | `SDK_GET_DEPS_SNAPSHOT_FAILURE: Could not parse package.json in project with template 'node'`
136 | );
137 | });
138 |
139 | test('node project with package.json', async () => {
140 | const packageJson = {
141 | dependencies: { lodash: '^4', rxjs: '^7' },
142 | devDependencies: { serve: '^12', vite: '^3' },
143 | optionalDependencies: { cowsay: '^1.5' },
144 | };
145 | const project = getTestProject({
146 | template: 'node',
147 | files: {
148 | 'package.json': JSON.stringify(packageJson),
149 | },
150 | });
151 | const vm = await getVm(project);
152 | const deps = vm.getDependencies();
153 |
154 | // We should get dependencies and devDependencies merged, with original version specifiers
155 | await expect(deps).resolves.toContain(packageJson.dependencies);
156 | await expect(deps).resolves.toContain(packageJson.devDependencies);
157 | await expect(deps).resolves.toMatchSnapshot();
158 | });
159 | });
160 |
161 | describe('vm.editor', () => {
162 | test('can change the color theme', async () => {
163 | const vm = await getVm(getTestProject());
164 | await expect(vm.editor.setTheme('light')).resolves.toBe(null);
165 | await expect(vm.editor.setTheme('dark')).resolves.toBe(null);
166 | await expect(vm.editor.setTheme('default')).resolves.toBe(null);
167 | });
168 |
169 | test('can change the UI view', async () => {
170 | const vm = await getVm(getTestProject());
171 | await expect(vm.editor.setView('preview')).resolves.toBe(null);
172 | await expect(vm.editor.setView('editor')).resolves.toBe(null);
173 | await expect(vm.editor.setView('default')).resolves.toBe(null);
174 | });
175 |
176 | test('can show the sidebar', async () => {
177 | const vm = await getVm(getTestProject());
178 | await expect(vm.editor.showSidebar(true)).resolves.toBe(null);
179 | await expect(vm.editor.showSidebar(false)).resolves.toBe(null);
180 | });
181 |
182 | test('can change open files', async () => {
183 | const files = {
184 | 'index.js': 'console.log("Hello there!")',
185 | 'README.md': '# My Cool Project',
186 | };
187 | const vm = await getVm(getTestProject({ files }));
188 |
189 | await expect(vm.editor.openFile('README.md')).resolves.toBe(null);
190 | await expect(vm.editor.openFile(['index.js,README.md', 'README.md'])).resolves.toBe(null);
191 | });
192 |
193 | test('cannot open non-existing files', async () => {
194 | const files = { a: 'aaa', b: 'bbb' };
195 | const vm = await getVm(getTestProject({ files }));
196 |
197 | // But we get an error if there's no match at all
198 | await expect(vm.editor.openFile('foo.bar')).rejects.toBe(
199 | `SDK_OPEN_FILE_FAILURE: No file found for: 'foo.bar'`
200 | );
201 |
202 | // Mix of existing and non-existing files still resolves
203 | await expect(vm.editor.openFile(['index.js,b,README.md', 'package.json,a'])).resolves.toBe(
204 | null
205 | );
206 |
207 | // But we get an error if there's no match at all
208 | await expect(vm.editor.openFile(['index.js', 'foo.bar'])).rejects.toBe(
209 | `SDK_OPEN_FILE_FAILURE: No file found for: 'index.js', 'foo.bar'`
210 | );
211 | });
212 |
213 | test('can change open files', async () => {
214 | const files = { 'README.md': 'Hi.', '.stackblitzrc': '{}' };
215 | const vm = await getVm(getTestProject({ files }));
216 |
217 | await expect(vm.editor.setCurrentFile('README.md')).resolves.toBe(null);
218 | await expect(vm.editor.setCurrentFile('.gitignore')).rejects.toBe(
219 | `SDK_SET_CURRENT_FILE_FAILURE: File not found: '.gitignore'`
220 | );
221 | });
222 | });
223 |
224 | describe('vm.preview', () => {
225 | test('has origin', async () => {
226 | const vm = await getVm(getTestProject());
227 | expect(vm.preview.origin).toBe('https://test.stackblitz.io');
228 | });
229 |
230 | test('has no origin (node project)', async () => {
231 | const vm = await getVm(getTestProject({ template: 'node' }));
232 | expect(vm.preview.origin).toBe(null);
233 | });
234 |
235 | test('has preview URL', async () => {
236 | const vm = await getVm(getTestProject());
237 | await expect(vm.preview.getUrl()).resolves.toBeTypeOf('string');
238 | });
239 |
240 | test('has no preview URL (node project)', async () => {
241 | const vm = await getVm(
242 | getTestProject({
243 | template: 'node',
244 | })
245 | );
246 | await expect(vm.preview.getUrl()).rejects.toBe(
247 | `SDK_GET_PREVIEW_URL_FAILURE: No preview URL found`
248 | );
249 | });
250 |
251 | test('can set preview URL', async () => {
252 | const vm = await getVm(getTestProject({ template: 'javascript' }));
253 |
254 | // Request to modify worked
255 | await expect(vm.preview.setUrl('/about')).resolves.toBe(null);
256 |
257 | // So the URL is now changed
258 | await expect(vm.preview.getUrl()).resolves.toBe('https://test.stackblitz.io/about');
259 | });
260 |
261 | test('can only set a path', async () => {
262 | const vm = await getVm(getTestProject({ template: 'javascript' }));
263 |
264 | expect(() => vm.preview.setUrl('https://example.com/')).toThrowError(
265 | `Invalid argument: expected a path starting with '/', got 'https://example.com/'`
266 | );
267 |
268 | expect(() => vm.preview.setUrl('about/us')).toThrowError(
269 | `Invalid argument: expected a path starting with '/', got 'about/us'`
270 | );
271 | });
272 |
273 | test('cannot set preview URL (node project)', async () => {
274 | const vm = await getVm(getTestProject({ template: 'node' }));
275 |
276 | await expect(vm.preview.setUrl('/about')).rejects.toBe(
277 | 'SDK_SET_PREVIEW_URL_FAILURE: Server not running'
278 | );
279 | });
280 | });
281 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "esnext",
4 | "moduleResolution": "node",
5 | "allowSyntheticDefaultImports": true,
6 | "target": "es2018",
7 | "lib": ["es2018", "DOM", "DOM.Iterable"],
8 | "strict": true,
9 | "outDir": "./temp/tsc"
10 | },
11 | "references": [
12 | {
13 | "path": "./tsconfig.lib.json"
14 | },
15 | {
16 | "path": "./tsconfig.test.json"
17 | }
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "rootDir": "./src",
5 | "composite": true,
6 | "tsBuildInfoFile": "./temp/tsbuildinfo",
7 | "declaration": true,
8 | "declarationDir": "./types",
9 | "emitDeclarationOnly": true,
10 | "removeComments": false
11 | },
12 | "include": ["./src"]
13 | }
14 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "composite": true,
5 | "tsBuildInfoFile": "./temp/tsbuildinfo",
6 | "paths": {
7 | // Use local sources when demo and test pages import @stackblitz/sdk
8 | "@stackblitz/sdk": ["./src/index.ts"],
9 | "$src/*": ["./src/*"],
10 | "$test/*": ["./test/*"]
11 | }
12 | },
13 | "include": ["./examples", "./src", "./test"]
14 | }
15 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import ReplacePlugin from '@rollup/plugin-replace';
2 | import bodyParser from 'body-parser';
3 | import fs from 'node:fs/promises';
4 | import path from 'node:path';
5 | import querystring from 'node:querystring';
6 | import type { Plugin, UserConfig, ViteDevServer } from 'vite';
7 | import { defineConfig } from 'vite';
8 | import TSConfigPaths from 'vite-tsconfig-paths';
9 |
10 | export default defineConfig(({ mode }) => {
11 | if (!['lib', 'dev', 'test', 'e2e'].includes(mode)) {
12 | throw new Error(`Expected --mode with value 'lib', 'dev', 'test' or 'e2e'`);
13 | }
14 |
15 | if (mode === 'lib') {
16 | return libConfig();
17 | }
18 |
19 | return testConfig(mode);
20 | });
21 |
22 | /**
23 | * Config for building the SDK bundles
24 | */
25 | function libConfig(): UserConfig {
26 | return {
27 | plugins: [replaceOrigin()],
28 | build: {
29 | target: 'es2020',
30 | outDir: 'bundles',
31 | emptyOutDir: true,
32 | sourcemap: true,
33 | minify: 'esbuild',
34 | lib: {
35 | name: 'StackBlitzSDK',
36 | entry: 'src/index.ts',
37 | formats: ['cjs', 'es', 'umd'],
38 | // Override the default file names used by Vite's “Library Mode”
39 | // (https://vitejs.dev/guide/build.html#library-mode) for backwards
40 | // compatibility with microbundle's output.
41 | fileName: (format, _name) => {
42 | let suffix: string = '';
43 | if (format === 'es') suffix = '.m';
44 | if (format === 'umd') suffix = '.umd';
45 | return `sdk${suffix}.js`;
46 | },
47 | },
48 | },
49 | esbuild: {
50 | // Whitespace will not be minified for our ESM build (sdk.m.js)
51 | // because of this restriction in Vite's esbuild plugin:
52 | // https://github.com/vitejs/vite/blob/2219427f4224d75f63a1e1a0af61b32c7854604e/packages/vite/src/node/plugins/esbuild.ts#L348-L351
53 | // Instead of having mixed minified and unminified bundles, let’s ship
54 | // unminified bundles because they’re small enough (especially gzipped).
55 | minifyIdentifiers: false,
56 | minifySyntax: false,
57 | minifyWhitespace: false,
58 | },
59 | };
60 | }
61 |
62 | /**
63 | * Config for running tests and/or building or serving examples
64 | */
65 | function testConfig(mode: string): UserConfig {
66 | const isE2E = mode === 'e2e';
67 | const defaultOrigin = isE2E ? '/_embed/' : undefined;
68 |
69 | return {
70 | plugins: [
71 | replaceOrigin(process.env.STACKBLITZ_SERVER_ORIGIN ?? defaultOrigin),
72 | {
73 | name: 'custom-server-config',
74 | configureServer,
75 | },
76 | TSConfigPaths({
77 | loose: true, // allow aliases in .html files
78 | projects: [`${__dirname}/tsconfig.test.json`],
79 | }),
80 | ],
81 | build: {
82 | target: 'es2020',
83 | outDir: 'temp/build',
84 | emptyOutDir: true,
85 | rollupOptions: {
86 | input: {
87 | sdk: 'src/index.ts',
88 | embed: 'test/embed/index.html',
89 | examples: 'examples/index.html',
90 | 'example-github-project': 'examples/open-embed-github-project/index.html',
91 | 'example-project-id': 'examples/open-embed-project-id/index.html',
92 | },
93 | },
94 | },
95 | server: {
96 | port: isE2E ? 4001 : 4000,
97 | hmr: !isE2E,
98 | },
99 | test: {
100 | dir: 'test',
101 | globals: false,
102 | include: ['**/unit/**/*.spec.ts'],
103 | exclude: ['**/node_modules/**'],
104 | coverage: {
105 | provider: 'c8',
106 | include: ['**/src/**/*.ts', '**/test/server/**/*.ts'],
107 | exclude: ['**/node_modules/**'],
108 | reportsDirectory: 'temp/coverage',
109 | },
110 | },
111 | };
112 | }
113 |
114 | function replaceOrigin(origin?: string): Plugin {
115 | return ReplacePlugin({
116 | preventAssignment: true,
117 | values: {
118 | __STACKBLITZ_SERVER_ORIGIN__: JSON.stringify(origin),
119 | },
120 | });
121 | }
122 |
123 | /**
124 | * Serve a custom HTML page for requests to '/_embed/*'
125 | */
126 | function configureServer(server: ViteDevServer) {
127 | // Parse URL-encoded form data in POST requests
128 | server.middlewares.use(bodyParser.urlencoded({ extended: true }));
129 |
130 | server.middlewares.use('/_embed', async (req, res, next) => {
131 | const pathname = req.url && new URL(req.url, 'http://localhost/').pathname;
132 | const ext = pathname && path.parse(pathname).ext;
133 |
134 | if (ext === '' || ext === '.html') {
135 | const content = await fs.readFile(`${__dirname}/test/embed/index.html`);
136 | const html = content.toString().replace('{{PROJECT_DATA}}', getProjectDataString(req));
137 | res.statusCode = 200;
138 | res.end(html);
139 | } else {
140 | next();
141 | }
142 | });
143 |
144 | server.middlewares.use('/examples', async (req, res, next) => {
145 | if (req.url.includes('?')) {
146 | const query = querystring.parse(req.url.split('?').pop());
147 |
148 | if (query.corp === '1') {
149 | res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
150 | res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
151 | }
152 | }
153 |
154 | next();
155 | });
156 | }
157 |
158 | function getProjectDataString(req: any): string {
159 | if (req.method === 'POST' && req.body?.project) {
160 | const project = {
161 | ...req.body.project,
162 | };
163 |
164 | if (typeof project.settings === 'string') {
165 | project.settings = JSON.parse(project.settings);
166 | }
167 |
168 | return JSON.stringify(project, null, 2);
169 | }
170 |
171 | return 'null';
172 | }
173 |
--------------------------------------------------------------------------------