Merge pull request #34 from spring-media/embed-content-renderer

Add embed-content component for embedding arbitrary html content

src/embed-utils/README.md

@@ -21,7 +21,7 @@ loadScript('https://some-domain.com/some-script.js').then(() => console.log('loa
 ### `getScriptSrcFromOembedHTML`
 
 ```typescript
-getScriptSrcFromOembedHTML(html: string, fallback: string): string | null
+getScriptSrcFromOembedHTML(html: string): string | null
 ```
 
 Get the script source from given (oEmbed) html string.
@@ -33,93 +33,3 @@ const someOembedHTML = '<div></div><script async src="https://some-oembed-provid
 
 console.log(getScriptSrcFromOembedHTML(someOembedHTML, 'https://domain.com/fallback.js')); // https://some-oembed-provider.com
 ```
-
-## Instagram
-
-### `libraryIsAvailable`
-
-```typescript
-libraryIsAvailable(): boolean
-````
-
-Checks whether the Instagram embeds library (`window.instgrm.Embeds`) is present.
-
-```javascript
-import { instagram } from '@spring-media/red-sourcepoint-cmp/dist/esm/embed-utils';
-
-console.log(instagram.libraryIsAvailable())
-```
-
-### `processEmbeds`
-
-```typescript
-processEmbeds(): void
-```
-
-Calls `window.instgrm.Embeds.process()` if available.
-
-```javascript
-import { instagram } from '@spring-media/red-sourcepoint-cmp/dist/esm/embed-utils';
-
-instagram.processEmbeds();
-```
-
-## Twitter
-
-### `libraryIsAvailable`
-
-```typescript
-libraryIsAvailable(): boolean
-````
-
-Checks whether the Twitter embeds library (`window.twttr.widgets`) is present.
-
-```javascript
-import { twitter } from '@spring-media/red-sourcepoint-cmp/dist/esm/embed-utils';
-
-console.log(twitter.libraryIsAvailable())
-```
-
-### `processEmbeds`
-
-```typescript
-processEmbeds(): void
-```
-
-Calls `window.twttr.widgets.load()` if available.
-
-```javascript
-import { twitter } from '@spring-media/red-sourcepoint-cmp/dist/esm/embed-utils';
-
-twitter.processEmbeds(/* optional html element */);
-```
-
-## Iframely
-
-### `libraryIsAvailable`
-
-```typescript
-libraryIsAvailable(): boolean
-````
-
-Checks whether the Iframely embeds library (`window.iframely`) is present.
-
-```javascript
-import { iframely } from '@spring-media/red-sourcepoint-cmp/dist/esm/embed-utils';
-
-console.log(iframely.libraryIsAvailable())
-```
-
-### `processEmbeds`
-
-```typescript
-processEmbeds(): void
-```
-
-Calls `window.iframely.load()` if available.
-
-```javascript
-import { iframely } from '@spring-media/red-sourcepoint-cmp/dist/esm/embed-utils';
-
-iframely.processEmbeds();
-```

src/embed-utils/index.test.ts

@@ -4,6 +4,6 @@ describe('embed-utils index', () => {
     const imports = require('./index');
     const keys = Object.keys(imports);
 
-    expect(keys).toEqual(['instagram', 'twitter', 'iframely', 'getScriptSrcFromOembedHTML', 'loadScript']);
+    expect(keys).toEqual(['getScriptSrcFromOembedHTML', 'loadScript']);
   });
 });

src/embed-utils/index.ts

@@ -1,5 +1,2 @@
-export * as instagram from './instagram';
-export * as twitter from './twitter';
-export * as iframely from './iframely';
 export * from './oembed';
 export * from './script-loader';

src/embed-utils/oembed.test.ts

@@ -3,16 +3,16 @@ import { getScriptSrcFromOembedHTML } from './oembed';
 describe('oembed utilities', () => {
   describe('getScriptSrcFromOembedHTML', () => {
     it.each([
-      ['script.js', '<script async src="script.js"></script>', 'fallback'],
-      ['script.js', '<script async src="script.js"/>', 'fallback'],
-      ['script.js', '<script async src=" script.js "></script>', 'fallback'],
-      ['script.js', '<script async src= " script.js "></script>', 'fallback'],
-      ['script.js', `<script async src='script.js'></script>`, 'fallback'],
-      ['fallback', `<scrip async src='script.js'></scrip>`, 'fallback'],
-      ['fallback', '<script src="script.js"></script>', 'fallback'],
-      ['fallback', '', 'fallback'],
-    ])('should return %s for input: %s', (expected, input, fallback) => {
-      expect(getScriptSrcFromOembedHTML(input, fallback)).toBe(expected);
+      ['script.js', '<script async src="script.js"></script>'],
+      ['script.js', '<script async src="script.js"/>'],
+      ['script.js', '<script async src=" script.js "></script>'],
+      ['script.js', '<script async src= " script.js "></script>'],
+      ['script.js', `<script async src='script.js'></script>`],
+      [null, `<scrip async src='script.js'></scrip>`],
+      [null, '<script src="script.js"></script>'],
+      [null, ''],
+    ])('should return %s for input: %s', (expected, input) => {
+      expect(getScriptSrcFromOembedHTML(input)).toBe(expected);
     });
   });
 });

src/embed-utils/oembed.ts

@@ -1,5 +1,5 @@
-export const getScriptSrcFromOembedHTML = (html: string, fallback: string): string => {
+export const getScriptSrcFromOembedHTML = (html: string): string | null => {
   const src = html.match(/script async src\s*=\s*["'](.+?)["']/);
 
-  return src ? src[1].trim() : fallback;
+  return src ? src[1].trim() : null;
 };

src/embed-utils/script-loader.ts

@@ -1,5 +1,9 @@
 export const loadScript = (src: string): Promise<void> => {
   return new Promise((resolve, reject) => {
+    if (document.head.querySelector(`[src="${src}"]`)) {
+      return resolve();
+    }
+
     const script = document.createElement('script');
 
     script.async = true;