feat: added initial StackBlitz support

Author: crutchcorn

src/__tests__/transformers/StackBlitz.js

@@ -0,0 +1,58 @@
+import cases from 'jest-in-case';
+
+import plugin from '../../';
+import { getHTML, shouldTransform } from '../../transformers/StackBlitz';
+
+import { cache, getMarkdownASTForFile, mdastToHtml } from '../helpers';
+
+cases(
+  'url validation',
+  ({ url, valid }) => {
+    expect(shouldTransform(url)).toBe(valid);
+  },
+  {
+    'non-StackBlitz url': {
+      url: 'https://not-a-stackblitz-url.com',
+      valid: false,
+    },
+    "non-StackBlitz url ending with 'stackblitz.com'": {
+      url: 'https://this-is-not-stackblitz.com',
+      valid: false,
+    },
+    "non-CodeSandbox url ending with 'stackblitz.com' having '/edit/'": {
+      url: 'https://this-is-not-stackblitz.com/edit/start-to-source-1-ng-template',
+      valid: false,
+    },
+    'embed url': {
+      url: 'https://stackblitz.com/edit/start-to-source-1-ng-template',
+      valid: true,
+    },
+    'embed url with parameters': {
+      url: 'https://stackblitz.com/edit/start-to-source-1-ng-template?file=src/app/app.component.ts',
+      valid: true,
+    },
+  }
+);
+
+test('Gets the correct StackBlitz iframe', () => {
+  const html = getHTML('https://stackblitz.com/edit/start-to-source-1-ng-template');
+
+  expect(html).toMatchInlineSnapshot(
+    `<iframe src="https://stackblitz.com/edit/start-to-source-1-ng-template?embed=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`
+  );
+});
+
+test('Plugin can transform StackBlitz links', async () => {
+  const markdownAST = getMarkdownASTForFile('StackBlitz');
+
+  const processedAST = await plugin({ cache, markdownAST });
+
+  expect(mdastToHtml(processedAST)).toMatchInlineSnapshot(`
+    <p>https://not-a-stackblitz-url.com</p>
+    <p>https://this-is-not-stackblitz.com</p>
+    <p>https://this-is-not-stackblitz.com/edit/start-to-source-1-ng-template</p>
+    <iframe src="https://stackblitz.com/edit/start-to-source-1-ng-template?embed=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+    <iframe src="https://stackblitz.com/edit/start-to-source-1-ng-template?embed=1&file=src/app/app.component.ts" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+  `);
+});

src/__tests__/transformers/__fixtures__/StackBlitz.md

@@ -0,0 +1,9 @@
+https://not-a-stackblitz-url.com
+
+https://this-is-not-stackblitz.com
+
+https://this-is-not-stackblitz.com/edit/start-to-source-1-ng-template
+
+https://stackblitz.com/edit/start-to-source-1-ng-template
+
+https://stackblitz.com/edit/start-to-source-1-ng-template?file=src/app/app.component.ts

src/transformers/StackBlitz.js

@@ -0,0 +1,28 @@
+export const shouldTransform = (url) => {
+  const { host, pathname } = new URL(url);
+
+  return (
+    ['stackblitz.com'].includes(host) &&
+    pathname.includes('/edit/')
+  );
+};
+
+export const getStackBlitzEmbedIframe = (url) => {
+  const editRegex = /(.*\/edit\/.*?)((?:\?.*$)|$)/;
+  const regexResults = editRegex.exec(url);
+  const base = regexResults[1];
+  let queryStr = regexResults[2];
+  if (queryStr) {
+    queryStr = queryStr.replace('?', '?embed=1&');
+  } else {
+    queryStr = '?embed=1';
+  }
+
+  return `${base}${queryStr}`;
+}
+
+export const getHTML = (url) => {
+  const iframeUrl = getStackBlitzEmbedIframe(url);
+
+  return `<iframe src="${iframeUrl}" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
+};

src/transformers/index.js

@@ -7,6 +7,7 @@ import * as PinterestTransformer from './Pinterest';
 import * as SlidesTransformer from './Slides';
 import * as SoundCloudTransformer from './SoundCloud';
 import * as SpotifyTransformer from './Spotify';
+import * as StackBlitzTransformer from './StackBlitz';
 import * as StreamableTransformer from './Streamable';
 import * as TestingPlaygroundTransformer from './TestingPlayground';
 import * as TwitchTransformer from './Twitch';
@@ -23,6 +24,7 @@ export const defaultTransformers = [
   SlidesTransformer,
   SoundCloudTransformer,
   SpotifyTransformer,
+  StackBlitzTransformer,
   StreamableTransformer,
   TestingPlaygroundTransformer,
   TwitchTransformer,