diff --git a/.prettierrc b/.prettierrc index 9e4b342..cd44a2f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ { - "semi": false, + "semi": true, "printWidth": 120, "singleQuote": true, "trailingComma": "es5", - "bracketSpacing": false + "bracketSpacing": true } diff --git a/package-lock.json b/package-lock.json index 187127c..f91f9da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,13 @@ "version": "2.0.0", "license": "MIT", "dependencies": { - "browser-monads-ts": "^1.2.5", - "clsx": "^1.1.1" + "@radix-ui/react-aspect-ratio": "^0.1.4", + "@stitches/react": "^1.2.7", + "browser-monads-ts": "^1.2.5" }, "devDependencies": { "@parcel/packager-ts": "^2.3.2", + "@parcel/reporter-bundle-analyzer": "^2.3.2", "@parcel/transformer-typescript-types": "^2.3.2", "@types/react": "^17.0.39", "parcel": "^2.3.2", @@ -122,6 +124,17 @@ "node": ">=4" } }, + "node_modules/@babel/runtime": { + "version": "7.17.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz", + "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==", + "dependencies": { + "regenerator-runtime": "^0.13.4" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@parcel/bundler-default": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.3.2.tgz", @@ -718,6 +731,25 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/@parcel/reporter-bundle-analyzer": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.3.2.tgz", + "integrity": "sha512-ZsIH6iThwf4aTb56FKuqL2WuuvSM94JBFJzwNcKS5WfwXtWPlLWfhiCBmBqUaKqZBork6N9z+AQAnZByXUh4oA==", + "dev": true, + "dependencies": { + "@parcel/plugin": "2.3.2", + "@parcel/utils": "2.3.2", + "nullthrows": "^1.1.1" + }, + "engines": { + "node": ">= 12.0.0", + "parcel": "^2.3.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@parcel/reporter-cli": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.3.2.tgz", @@ -1221,6 +1253,61 @@ "@parcel/core": "^2.3.2" } }, + "node_modules/@radix-ui/react-aspect-ratio": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-0.1.4.tgz", + "integrity": "sha512-he70ch76Y6X9BsNYp5Z7ZUpq1008mdoECW39KaNxp19C9R/ary2vWdUNrdXv77tmGNUt+Xyu/vc1CWk//sHUmg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.4" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz", + "integrity": "sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz", + "integrity": "sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "0.1.2" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.2.tgz", + "integrity": "sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "0.1.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0" + } + }, + "node_modules/@stitches/react": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.7.tgz", + "integrity": "sha512-6AxpUag7OW55ANzRnuy7R15FEyQeZ66fytVo3BBilFIU0mfo3t49CAMcEAL/A1SbhSj/FCdWkn/XrbjGBTJTzg==", + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/@swc/helpers": { "version": "0.2.14", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.2.14.tgz", @@ -1434,14 +1521,6 @@ "node": ">=0.8" } }, - "node_modules/clsx": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", - "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==", - "engines": { - "node": ">=6" - } - }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -2807,8 +2886,7 @@ "node_modules/regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "node_modules/resolve-from": { "version": "4.0.0", @@ -3138,6 +3216,14 @@ } } }, + "@babel/runtime": { + "version": "7.17.2", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz", + "integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, "@parcel/bundler-default": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.3.2.tgz", @@ -3508,6 +3594,17 @@ "@parcel/types": "2.3.2" } }, + "@parcel/reporter-bundle-analyzer": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.3.2.tgz", + "integrity": "sha512-ZsIH6iThwf4aTb56FKuqL2WuuvSM94JBFJzwNcKS5WfwXtWPlLWfhiCBmBqUaKqZBork6N9z+AQAnZByXUh4oA==", + "dev": true, + "requires": { + "@parcel/plugin": "2.3.2", + "@parcel/utils": "2.3.2", + "nullthrows": "^1.1.1" + } + }, "@parcel/reporter-cli": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.3.2.tgz", @@ -3822,6 +3919,47 @@ "nullthrows": "^1.1.1" } }, + "@radix-ui/react-aspect-ratio": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-0.1.4.tgz", + "integrity": "sha512-he70ch76Y6X9BsNYp5Z7ZUpq1008mdoECW39KaNxp19C9R/ary2vWdUNrdXv77tmGNUt+Xyu/vc1CWk//sHUmg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "0.1.4" + } + }, + "@radix-ui/react-compose-refs": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz", + "integrity": "sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-primitive": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz", + "integrity": "sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "0.1.2" + } + }, + "@radix-ui/react-slot": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.2.tgz", + "integrity": "sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "0.1.0" + } + }, + "@stitches/react": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@stitches/react/-/react-1.2.7.tgz", + "integrity": "sha512-6AxpUag7OW55ANzRnuy7R15FEyQeZ66fytVo3BBilFIU0mfo3t49CAMcEAL/A1SbhSj/FCdWkn/XrbjGBTJTzg==", + "requires": {} + }, "@swc/helpers": { "version": "0.2.14", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.2.14.tgz", @@ -3988,11 +4126,6 @@ "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", "dev": true }, - "clsx": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", - "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" - }, "color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -4943,8 +5076,7 @@ "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" }, "resolve-from": { "version": "4.0.0", diff --git a/package.json b/package.json index 9293e6d..a11e0db 100644 --- a/package.json +++ b/package.json @@ -25,16 +25,19 @@ "scripts": { "clean": "rimraf .parcel-cache dist", "prebuild": "npm run clean", - "build": "NODE_ENV=production parcel build", + "build": "NODE_ENV=production parcel build --reporter @parcel/reporter-bundle-analyzer", + "prestart": "npm run clean", "start": "parcel watch", "test": "jest" }, "dependencies": { - "browser-monads-ts": "^1.2.5", - "clsx": "^1.1.1" + "@radix-ui/react-aspect-ratio": "^0.1.4", + "@stitches/react": "^1.2.7", + "browser-monads-ts": "^1.2.5" }, "devDependencies": { "@parcel/packager-ts": "^2.3.2", + "@parcel/reporter-bundle-analyzer": "^2.3.2", "@parcel/transformer-typescript-types": "^2.3.2", "@types/react": "^17.0.39", "parcel": "^2.3.2", diff --git a/src/components/icons/youtube-icon.tsx b/src/components/icons/youtube-icon.tsx new file mode 100644 index 0000000..4d9d880 --- /dev/null +++ b/src/components/icons/youtube-icon.tsx @@ -0,0 +1,20 @@ +// Dependencies +import * as React from 'react'; + +function YouTubeIcon(props: React.SVGProps) { + return ( + + + + + + ); +} + +export { YouTubeIcon }; diff --git a/src/components/react-youtube-lite/index.ts b/src/components/react-youtube-lite/index.ts new file mode 100644 index 0000000..f2e5984 --- /dev/null +++ b/src/components/react-youtube-lite/index.ts @@ -0,0 +1 @@ +export { default as ReactYouTubeLite } from './react-youtube-lite'; diff --git a/src/components/react-youtube-lite/react-youtube-lite.styles.ts b/src/components/react-youtube-lite/react-youtube-lite.styles.ts new file mode 100644 index 0000000..c91d51d --- /dev/null +++ b/src/components/react-youtube-lite/react-youtube-lite.styles.ts @@ -0,0 +1,48 @@ +// Dependencies +import * as AspectRatio from '@radix-ui/react-aspect-ratio'; + +// Internals +import { YouTubeIcon } from '../icons/youtube-icon'; +import { styled } from '../../stitches.config'; + +const StyledAspectRatio = styled(AspectRatio.Root, { + backgroundColor: '#000', + backgroundPosition: 'center', + backgroundSize: 'cover', + contain: 'content', + cursor: 'pointer', + '&::before': { + content: '""', + backgroundImage: + 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==)', + backgroundRepeat: 'repeat-x', + backgroundPosition: 'top', + boxSizing: 'border-box', + display: 'block', + height: 60, + paddingBottom: 50, + position: 'absolute', + top: 0, + transition: 'all 0.2s cubic-bezier(0, 0, 0.2, 1)', + width: '100%', + }, +}); + +const StyledYouTubeIcon = styled(YouTubeIcon, { + color: '#212121', + height: 'auto', + left: '50%', + opacity: 0.8, + position: 'absolute', + top: '50%', + transform: 'translate3d(-50%, -50%, 0)', + transition: 'color 0.2s cubic-bezier(0, 0, 0.2, 1)', + width: 70, + zIndex: 1, + [`${StyledAspectRatio}:hover &`]: { + backgroundColor: '#f00', + opacity: 1, + }, +}); + +export { StyledAspectRatio, StyledYouTubeIcon }; diff --git a/src/components/react-youtube-lite.tsx b/src/components/react-youtube-lite/react-youtube-lite.tsx similarity index 50% rename from src/components/react-youtube-lite.tsx rename to src/components/react-youtube-lite/react-youtube-lite.tsx index 133b2d1..7e47d50 100644 --- a/src/components/react-youtube-lite.tsx +++ b/src/components/react-youtube-lite/react-youtube-lite.tsx @@ -1,21 +1,24 @@ // Dependencies -import * as React from "react"; -import clsx from "clsx"; +import * as React from 'react'; // Internals -import { addPrefetch } from "../utils/add-prefetch"; -import { getYouTubeId } from "../utils/get-youtube-id"; -import type { ReactYouTubeLiteProps } from "../types"; +import { StyledAspectRatio, StyledYouTubeIcon } from './react-youtube-lite.styles'; +import { addPrefetch } from '../../utils/add-prefetch'; +import { getYouTubeId } from '../../utils/get-youtube-id'; +import type { ReactYouTubeLiteProps } from '../../types'; function RenderReactYouTubeLite( { url, + aspectRatio = 16 / 9, + css, customThumbnail, iframeProps, noCookie, playlist, poster, title, + ...props }: ReactYouTubeLiteProps, ref: React.ForwardedRef ) { @@ -24,12 +27,8 @@ function RenderReactYouTubeLite( let videoId = encodeURIComponent(getYouTubeId(url)); let posterUrl = - typeof customThumbnail === "string" - ? customThumbnail - : `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`; - let youtubeUrl = noCookie - ? "https://www.youtube-nocookie.com" - : "https://www.youtube.com"; + typeof customThumbnail === 'string' ? customThumbnail : `https://i.ytimg.com/vi/${videoId}/${poster}.jpg`; + let youtubeUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'; let iframeSrc = !playlist ? `${youtubeUrl}/embed/${videoId}?autoplay=1` : `${youtubeUrl}/embed/videoseries?list=${videoId}`; @@ -38,13 +37,13 @@ function RenderReactYouTubeLite( if (preconnected) return; // The iframe document and the majority of its subresources are all taken directly from youtube.com. - addPrefetch("preconnect", "https://www.youtube-nocookie.com"); + addPrefetch('preconnect', 'https://www.youtube-nocookie.com'); // The botguard script can be found on google.com. - addPrefetch("preconnect", "https://www.google.com"); + addPrefetch('preconnect', 'https://www.google.com'); // These ad-related domains may or may not be on the critical path. Domain-specific throttling could be used to confirm. - addPrefetch("preconnect", "https://googleads.g.doubleclick.net"); - addPrefetch("preconnect", "https://static.doubleclick.net"); + addPrefetch('preconnect', 'https://googleads.g.doubleclick.net'); + addPrefetch('preconnect', 'https://static.doubleclick.net'); setPreconnected(true); }; @@ -56,30 +55,34 @@ function RenderReactYouTubeLite( }; return ( -
- -
+ + {iframe ? ( + + ) : null} + ); } const ReactYouTubeLite = React.forwardRef(RenderReactYouTubeLite); -export { ReactYouTubeLite }; +export default ReactYouTubeLite; diff --git a/src/index.ts b/src/index.ts index a610523..9499370 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1 @@ -export * from "./components/react-youtube-lite"; -export * from "./types/index.d"; +export * from './components/react-youtube-lite'; diff --git a/src/stitches.config.ts b/src/stitches.config.ts new file mode 100644 index 0000000..b3c429b --- /dev/null +++ b/src/stitches.config.ts @@ -0,0 +1,4 @@ +// Dependencies +import { createStitches } from '@stitches/react'; + +export let { styled } = createStitches(); diff --git a/src/types/index.d.ts b/src/types/index.d.ts deleted file mode 100644 index 9d38110..0000000 --- a/src/types/index.d.ts +++ /dev/null @@ -1,91 +0,0 @@ -interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<"div"> { - /** - * This can be either an url to a video or a video ID. - */ - url: string; - /** - * The class used to hide the elements when the iframe is already renderer - * - * @default "lty-playbt" - */ - activatedClass?: string; - /** - * If `https://static.doubleclick.net` is enabled or not - * - * @default true - */ - adNetwork?: boolean; - /** - * Implements a `padding-bottom` to generate the size of the iframe - * - * - `aspect-ratio-none`: 0 - * - `aspect-ratio-square`: 100% - * - `aspect-ratio-16/9`: 56.25% - * - `aspect-ratio-4/3`: 75% - * - `aspect-ratio-21/9`: 42.86% - * - * @default "aspect-ratio-16/9" - */ - aspectRatio?: - | "aspect-ratio-none" - | "aspect-ratio-square" - | "aspect-ratio-16/9" - | "aspect-ratio-4/3" - | "aspect-ratio-21/9"; - /** - * A custom thumbnail image url to show instead of the original youtube thumbnail - * - * @default false - */ - customThumbnail?: string; - iframeProps?: React.ComponentPropsWithoutRef<"iframe">; - /** - * If you use GDPR and don't want YouTube cookies enable this option - * - * @default false - */ - noCookie?: boolean; - /** - * Class for youtube play button - * - * @default "lty-playbtn" - */ - playerClass?: string; - /** - * If the video URL contains a playlist or not - * - * @default false - */ - playlist?: boolean; - /** - * The different quality to show the poster - * see: https://developers.google.com/youtube/v3/docs/thumbnails - * for more information - * - * @default "hqdefault" - */ - poster?: - | "maxresdefault" - | "0" - | "1" - | "2" - | "3" - | "default" - | "hqdefault" - | "mqdefault" - | "sddefault"; - /** - * The `data-title` to insert in the `iframe` - * - * @default "React YouTube Lite" - */ - title?: string; - /** - * Default classes to put container responsive - * - * @default "ryt-lite embed-responsive" - */ - wrapperClass?: string; -} - -export { ReactYouTubeLiteProps }; diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..865e980 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,58 @@ +// Dependencies +import type * as React from 'react'; +import type * as Stitches from '@stitches/react'; + +interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> { + /** + * This can be either an url to a video or a video ID. + */ + url: string; + /** + * The aspect ratio of the video. + * + * @default 16/9 + */ + aspectRatio?: number; + /** + * It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. + */ + css?: Stitches.CSS; + /** + * A custom thumbnail image url to show instead of the original youtube thumbnail + * + * @default false + */ + customThumbnail?: string; + /** + * Properties of the iframe element. + */ + iframeProps?: React.ComponentPropsWithoutRef<'iframe'>; + /** + * If you use GDPR and don't want YouTube cookies enable this option + * + * @default false + */ + noCookie?: boolean; + /** + * If the video URL contains a playlist or not + * + * @default false + */ + playlist?: boolean; + /** + * The different quality to show the poster + * see: https://developers.google.com/youtube/v3/docs/thumbnails + * for more information + * + * @default "hqdefault" + */ + poster?: 'maxresdefault' | '0' | '1' | '2' | '3' | 'default' | 'hqdefault' | 'mqdefault' | 'sddefault'; + /** + * The `data-title` to insert in the `iframe` + * + * @default "React YouTube Lite" + */ + title?: string; +} + +export { ReactYouTubeLiteProps }; diff --git a/src/utils/add-prefetch.ts b/src/utils/add-prefetch.ts index d37db38..0d6784a 100644 --- a/src/utils/add-prefetch.ts +++ b/src/utils/add-prefetch.ts @@ -1,14 +1,14 @@ // Dependencies -import { document } from "browser-monads-ts"; +import { document } from 'browser-monads-ts'; function addPrefetch(rel: string, href: string, as?: string) { - let linkEl = document.createElement("link"); + let linkEl = document.createElement('link'); - linkEl.setAttribute("rel", rel); - linkEl.setAttribute("href", href); + linkEl.setAttribute('rel', rel); + linkEl.setAttribute('href', href); if (as) { - linkEl.setAttribute("as", as); + linkEl.setAttribute('as', as); } document.head.appendChild(linkEl); diff --git a/tsconfig.json b/tsconfig.json index c2f1ab2..ee8c5d6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,25 +2,13 @@ "include": ["src"], "compilerOptions": { "target": "es5", - "module": "esnext", - "lib": ["dom", "esnext"], - "importHelpers": true, - "declaration": true, - "sourceMap": true, + "module": "commonjs", + "jsx": "react", "rootDir": "./src", "strict": true, - "noImplicitAny": true, - "strictNullChecks": true, - "strictFunctionTypes": true, - "strictPropertyInitialization": true, - "noImplicitThis": true, - "alwaysStrict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "moduleResolution": "node", - "jsx": "react", - "esModuleInterop": true + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": ["es2018", "dom"] } }