Skip to content

Commit

Permalink
add method to get raw scripts urls in script manager
Browse files Browse the repository at this point in the history
lucasecdb committed Aug 7, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent cfd10d1 commit d51340b
Showing 3 changed files with 89 additions and 33 deletions.
60 changes: 40 additions & 20 deletions src/__tests__/react-amphtml.spec.tsx
Original file line number Diff line number Diff line change
@@ -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');
});
26 changes: 24 additions & 2 deletions src/amphtml/components/Script.tsx
Original file line number Diff line number Diff line change
@@ -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 })}
/>
);
};
36 changes: 25 additions & 11 deletions src/setup/AmpScripts.tsx
Original file line number Diff line number Diff line change
@@ -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
/>
),
);
}
}

0 comments on commit d51340b

Please sign in to comment.