Add Prefetch component

.gitignore

@@ -5,5 +5,5 @@ dist
 example/.cache
 .DS_Store
 .vscode
-*.js
-*.d.ts
+/*.js
+*.d.ts

src/Link.tsx

@@ -0,0 +1,34 @@
+import { createResource } from './createResource';
+
+type LinkProps = {
+ rel: string;
+ href: string;
+ as?: string;
+ media?: string;
+};
+
+export const LinkResource = createResource(
+ load,
+ ({ rel, href }) => `${rel}.${href}`
+);
+
+function load({ rel, href, as, media = 'all' }: LinkProps) {
+ return new Promise((resolve, reject) => {
+ const link = document.createElement('link');
+ link.rel = rel;
+ if (as) {
+ link.as = as;
+ }
+ link.media = media;
+ link.href = href;
+ link.onload = resolve;
+ link.onerror = reject;
+ document.body.appendChild(link);
+ });
+}
+
+export const Link: React.FC<LinkProps> = props => {
+ LinkResource.read(props);
+
+ return null;
+};

src/Prefetch.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from './Link';
+
+type PrefetchProps = {
+ href: string;
+ as: string;
+ media?: string;
+};
+
+export const Prefetch: React.FC<PrefetchProps> = props => {
+ return <Link rel="prefetch" {...props} />;
+};

src/Preload.tsx

@@ -1,35 +1,12 @@
-import { createResource } from './createResource';
+import React from 'react';
+import { Link } from './Link';
 
 type PreloadProps = {
  href: string;
  as: string;
  media?: string;
 };
 
-export const PreloadResource = createResource(
- load,
- ({ href, as }) => `${href}.${as}`
-);
-
-function load({ href, as, media = 'all' }: PreloadProps) {
- return new Promise((resolve, reject) => {
- const link = document.createElement('link');
- link.rel = 'preload';
- link.as = as;
- link.media = media;
- link.href = href;
- link.onload = resolve;
- link.onerror = reject;
- document.body.appendChild(link);
- });
-}
-
-export const Preload: React.FC<PreloadProps> = ({ children, ...rest }) => {
- PreloadResource.read(rest);
-
- if (typeof children === 'function') {
- return children();
- }
-
- return children;
+export const Preload: React.FC<PreloadProps> = props => {
+ return <Link rel="preload" {...props} />;
 };

src/Stylesheet.tsx

@@ -1,33 +1,15 @@
 import React from 'react';
-import { createResource } from './createResource';
+import { Link, LinkResource } from './Link';
 
 type StylesheetProps = {
  href: string;
  media?: string;
 };
 
-export const StylesheetResource = createResource(
- load,
- ({ href, media }) => `${href}.${media}`
-);
-
-function load({ href, media = 'all' }: StylesheetProps) {
- return new Promise((resolve, reject) => {
- const link = document.createElement('link');
- link.rel = 'stylesheet';
- link.href = href;
- link.media = media;
- link.onload = resolve;
- link.onerror = reject;
- document.body.appendChild(link);
- });
-}
-
 export const Stylesheet: React.FC<StylesheetProps> = props => {
- StylesheetResource.read(props);
- return <link {...props} />;
+ return <Link rel="stylesheet" {...props} />;
 };
 
 export function useStylesheet(props: StylesheetProps) {
- return StylesheetResource.read(props);
+ return LinkResource.read({ ...props, rel: 'stylesheet' });
 }

tests/Prefetch.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, Simulate, cleanup } from 'react-testing-library';
+import { Prefetch } from '../src/Prefetch';
+
+function App() {
+ return (
+ <React.Suspense fallback={null}>
+ <Prefetch href="href" as="script" />
+ </React.Suspense>
+ );
+}
+
+afterEach(cleanup);
+
+describe('Prefetch', () => {
+ test('renders link tag', () => {
+ const { baseElement } = render(<App />);
+ const link = baseElement.querySelector('link');
+
+ expect(link).toBeInTheDocument();
+ expect(link).toHaveAttribute('rel', 'prefetch');
+ expect(link).toHaveAttribute('href', 'href');
+ expect(link.as).toBe('script');
+ });
+});

tests/Preload.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, Simulate, cleanup } from 'react-testing-library';
+import { Preload } from '../src/Preload';
+
+function App() {
+ return (
+ <React.Suspense fallback={null}>
+ <Preload href="href" as="script" />
+ </React.Suspense>
+ );
+}
+
+afterEach(cleanup);
+
+describe('Preload', () => {
+ test('renders link tag', () => {
+ const { baseElement } = render(<App />);
+ const link = baseElement.querySelector('link');
+
+ expect(link).toBeInTheDocument();
+ expect(link).toHaveAttribute('rel', 'preload');
+ expect(link).toHaveAttribute('href', 'href');
+ expect(link.as).toBe('script'); // jsdom does not support 'as' attribute
+ });
+});

tests/Stylesheet.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, Simulate, cleanup } from 'react-testing-library';
+import { Stylesheet } from '../src/Stylesheet';
+
+function App() {
+ return (
+ <React.Suspense fallback={null}>
+ <Stylesheet href="href" />
+ </React.Suspense>
+ );
+}
+
+afterEach(cleanup);
+
+describe('Stylesheet', () => {
+ test('renders link tag', () => {
+ const { baseElement } = render(<App />);
+ const link = baseElement.querySelector('link');
+
+ expect(link).toBeInTheDocument();
+ expect(link).toHaveAttribute('rel', 'stylesheet');
+ expect(link).toHaveAttribute('href', 'href');
+ });
+});