add method to get raw scripts urls in script manager

src/__tests__/react-amphtml.spec.tsx

@@ -49,6 +49,29 @@ 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',
+      ]),
+    );
+  });
+
   it('can specify versions of script tags', (): void => {
     const ampScripts = new AmpScripts();
     mount(
@@ -61,13 +84,12 @@ 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([
+        'https://cdn.ampproject.org/v0/amp-mustache-0.2.js',
+      ]),
+    );
   });
 
   it('warns on invalid versions of script tags', (): void => {
@@ -161,7 +183,7 @@ describe('react-amphtml', (): void => {
           change: ['AMP.setState({ myState: { input: event.value } })'],
         }}
       >
-        {(props: ActionOnProps): ReactElement => <input {...props as any} />}
+        {(props: ActionOnProps): ReactElement => <input {...(props as any)} />}
       </AmpHelpers.Action>,
     );
 
@@ -187,7 +209,7 @@ describe('react-amphtml', (): void => {
             }}
           >
             {(props1: ActionOnProps): ReactElement => (
-              <input {...props1 as any} />
+              <input {...(props1 as any)} />
             )}
           </AmpHelpers.Action>
         )}
@@ -323,17 +345,15 @@ describe('react-amphtml', (): void => {
     const validator = await amphtmlValidator.getInstance();
     const result = validator.validateString(htmlPage);
 
-    result.errors.forEach(
-      ({ line, col, message, specUrl, severity }): void => {
-        // eslint-disable-next-line no-console
-        (severity === 'ERROR' ? console.error : console.warn)(
-          // eslint-disable-line no-console
-          `line ${line}, col ${col}: ${message} ${
-            specUrl ? ` (see ${specUrl})` : ''
-          }`,
-        );
-      },
-    );
+    result.errors.forEach(({ line, col, message, specUrl, severity }): void => {
+      // eslint-disable-next-line no-console
+      (severity === 'ERROR' ? console.error : console.warn)(
+        // eslint-disable-line no-console
+        `line ${line}, col ${col}: ${message} ${
+          specUrl ? ` (see ${specUrl})` : ''
+        }`,
+      );
+    });
 
     expect(result.status).toBe('PASS');
   });

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 })}
     />
   );
 };

src/setup/AmpScripts.tsx

@@ -1,20 +1,19 @@
 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 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 +25,28 @@ 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(): string[] {
+    return Array.from(this.scripts.values()).map(
+      ({ specName, version, src }): string => {
+        return getScriptSource({ extension: specName, version, src });
+      },
     );
   }
 
   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
+        />
+      ),
+    );
   }
 }