Merge pull request #42 from lucasecdb/feat/raw-scripts

Add method to get raw scripts urls in script manager
dfrankland · Aug 8, 2019 · 278302f · 278302f
2 parents cfd10d1 + 71435f5
commit 278302f
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 20 deletions.
diff --git a/src/__tests__/react-amphtml.spec.tsx b/src/__tests__/react-amphtml.spec.tsx
@@ -49,6 +49,31 @@ describe('react-amphtml', (): void => {
     expect(wrapper.find('script').length).toBe(4);
   });
 
+  it('should be able to statically export script sources', (): void => {
+    const ampScripts = new AmpScripts();
+    mount(
+      <AmpScriptsManager ampScripts={ampScripts}>
+        <div>
+          <Amp.AmpYoutube />
+          <Amp.AmpScript src="test.js" />
+          <Amp.AmpAccordion />
+        </div>
+      </AmpScriptsManager>,
+    );
+
+    const ampScriptSources = ampScripts.getScripts();
+
+    expect(ampScriptSources).toEqual(
+      expect.arrayContaining(
+        [
+          'https://cdn.ampproject.org/v0/amp-youtube-latest.js',
+          'https://cdn.ampproject.org/v0/amp-script-latest.js',
+          'https://cdn.ampproject.org/v0/amp-accordion-latest.js',
+        ].map((src): any => expect.objectContaining({ src })),
+      ),
+    );
+  });
+
   it('can specify versions of script tags', (): void => {
     const ampScripts = new AmpScripts();
     mount(
@@ -61,13 +86,14 @@ describe('react-amphtml', (): void => {
       </AmpScriptsManager>,
     );
 
-    const ampScriptElements = ampScripts.getScriptElements();
-    const wrapper = mount(<div>{ampScriptElements}</div>);
-    expect(
-      wrapper
-        .find('script[src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"]')
-        .exists(),
-    ).toBe(true);
+    const ampScriptsSources = ampScripts.getScripts();
+    expect(ampScriptsSources).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          src: 'https://cdn.ampproject.org/v0/amp-mustache-0.2.js',
+        }),
+      ]),
+    );
   });
 
   it('warns on invalid versions of script tags', (): void => {

diff --git a/src/amphtml/components/Script.tsx b/src/amphtml/components/Script.tsx
@@ -11,23 +11,45 @@ export interface ScriptProps {
   type?: string;
 }
 
+interface ScriptSource {
+  src?: string;
+  extension?: string;
+  version?: string;
+}
+
+export const getScriptSource = ({
+  src = '',
+  extension = '',
+  version = 'latest',
+}: ScriptSource): string => {
+  if (src) {
+    return src;
+  }
+
+  return `https://cdn.ampproject.org/v0/${extension}-${version}.js`;
+};
+
 const Script: React.FunctionComponent<ScriptProps> = ({
   src,
   extension,
   version,
   isCustomTemplate,
+  ...otherProps
 }): ReactElement | null => {
   if (!src && (!extension || !version)) return null;
+
   const props = src
-    ? {}
+    ? otherProps
     : {
+        ...otherProps,
         [`custom-${isCustomTemplate ? 'template' : 'element'}`]: extension,
       };
+
   return (
     <script
       async
       {...props}
-      src={src || `https://cdn.ampproject.org/v0/${extension}-${version}.js`}
+      src={getScriptSource({ src, extension, version })}
     />
   );
 };

diff --git a/src/setup/AmpScripts.tsx b/src/setup/AmpScripts.tsx
@@ -1,20 +1,24 @@
 import React, { ReactElement } from 'react';
 import { Script, ScriptProps } from '../amphtml/amphtml';
+import { getScriptSource } from '../amphtml/components/Script';
 import { AMP, AMP_SRCS, Formats } from '../constants';
 
+export interface ScriptSource {
+  src: string;
+  extension: string;
+}
+
 export default class AmpScripts {
-  private scripts: Map<string, ReactElement>;
+  private scripts: Map<string, ScriptProps>;
 
   public constructor(htmlFormat: Formats = AMP) {
     this.scripts = new Map([
       [
         htmlFormat,
-        <Script
-          async
-          key={htmlFormat}
-          specName={htmlFormat}
-          src={AMP_SRCS[htmlFormat]}
-        />,
+        {
+          specName: htmlFormat,
+          src: AMP_SRCS[htmlFormat],
+        },
       ],
     ]);
   }
@@ -26,13 +30,31 @@ export default class AmpScripts {
     extension: ScriptProps['specName'];
     version?: ScriptProps['version'];
   }): void {
-    this.scripts.set(
-      extension,
-      <Script async key={extension} specName={extension} version={version} />,
+    this.scripts.set(extension, { specName: extension, version });
+  }
+
+  public getScripts(): ScriptSource[] {
+    return Array.from(this.scripts.values()).map(
+      ({ specName, version, src }): ScriptSource => {
+        return {
+          src: getScriptSource({ extension: specName, version, src }),
+          extension: specName,
+        };
+      },
     );
   }
 
   public getScriptElements(): ReactElement[] {
-    return [...this.scripts.values()];
+    return [...this.scripts.values()].map(
+      ({ specName, version, src }): ReactElement => (
+        <Script
+          key={specName}
+          src={src}
+          specName={specName}
+          version={version}
+          async
+        />
+      ),
+    );
   }
 }