From 104733914ac31176b416a133e57e3fcd921eeb76 Mon Sep 17 00:00:00 2001 From: Dongwoo Gim Date: Sun, 1 Dec 2019 08:09:26 +0800 Subject: [PATCH] refactor(v2): convert `@docusaurus/plugin-ideal-image` to TypeScript (#2011) * refactor @docusaurus/plugin-ideal-image refactor @docusaurus/plugin-ideal-image * Update react-ideal-image.d.ts * Update types.ts * Update IdealImage.tsx * Update package.json --- .eslintignore | 1 + .gitignore | 1 + .prettierignore | 3 +- .../@types/react-ideal-image.d.ts | 28 +++++++++++++ .../package.json | 8 +++- .../src/{index.js => index.ts} | 9 ++-- .../theme/{IdealImage.js => IdealImage.tsx} | 8 ++-- .../src/types.ts | 41 +++++++++++++++++++ .../tsconfig.json | 11 +++++ 9 files changed, 102 insertions(+), 8 deletions(-) create mode 100644 packages/docusaurus-plugin-ideal-image/@types/react-ideal-image.d.ts rename packages/docusaurus-plugin-ideal-image/src/{index.js => index.ts} (80%) rename packages/docusaurus-plugin-ideal-image/src/theme/{IdealImage.js => IdealImage.tsx} (81%) create mode 100644 packages/docusaurus-plugin-ideal-image/src/types.ts create mode 100644 packages/docusaurus-plugin-ideal-image/tsconfig.json diff --git a/.eslintignore b/.eslintignore index a8ca421a6c..9097f5d545 100644 --- a/.eslintignore +++ b/.eslintignore @@ -17,3 +17,4 @@ packages/docusaurus-plugin-content-blog/lib/ packages/docusaurus-plugin-content-docs/lib/ packages/docusaurus-plugin-content-pages/lib/ packages/docusaurus-plugin-sitemap/lib/ +packages/docusaurus-plugin-ideal-image/lib/ diff --git a/.gitignore b/.gitignore index b405ce5a52..556bae3405 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,4 @@ packages/docusaurus-plugin-content-blog/lib/ packages/docusaurus-plugin-content-docs/lib/ packages/docusaurus-plugin-content-pages/lib/ packages/docusaurus-plugin-sitemap/lib/ +packages/docusaurus-plugin-ideal-image/lib/ diff --git a/.prettierignore b/.prettierignore index a74d4b9bb1..4463310545 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,4 +8,5 @@ packages/docusaurus-init/lib/ packages/docusaurus-plugin-content-blog/lib/ packages/docusaurus-plugin-content-docs/lib/ packages/docusaurus-plugin-content-pages/lib/ -packages/docusaurus-plugin-sitemap/lib/ \ No newline at end of file +packages/docusaurus-plugin-sitemap/lib/ +packages/docusaurus-plugin-ideal-image/lib/ diff --git a/packages/docusaurus-plugin-ideal-image/@types/react-ideal-image.d.ts b/packages/docusaurus-plugin-ideal-image/@types/react-ideal-image.d.ts new file mode 100644 index 0000000000..057611f3e4 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/@types/react-ideal-image.d.ts @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +declare module '@endiliey/react-ideal-image' { + interface SrcType { + width: number; + src?: string; + size?: number; + format?: 'webp' | 'jpeg'; + } + + export interface IdealImageProps { + alt?: string; + className?: string; + height: number; + width: number; + placeholder: {color: string} | {lqip: string}; + src: string; + srcSet: SrcType[]; + } + + const IdealImage: React.ComponentType; + export default IdealImage; +} diff --git a/packages/docusaurus-plugin-ideal-image/package.json b/packages/docusaurus-plugin-ideal-image/package.json index 909ac0f69d..86a095a23e 100644 --- a/packages/docusaurus-plugin-ideal-image/package.json +++ b/packages/docusaurus-plugin-ideal-image/package.json @@ -2,11 +2,17 @@ "name": "@docusaurus/plugin-ideal-image", "version": "2.0.0-alpha.36", "description": "Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder)", - "main": "src/index.js", + "main": "lib/index.js", + "scripts": { + "tsc": "tsc" + }, "publishConfig": { "access": "public" }, "license": "MIT", + "devDependencies": { + "@docusaurus/types": "^2.0.0-alpha.36" + }, "dependencies": { "@endiliey/lqip-loader": "^3.0.2", "@endiliey/react-ideal-image": "^0.0.11", diff --git a/packages/docusaurus-plugin-ideal-image/src/index.js b/packages/docusaurus-plugin-ideal-image/src/index.ts similarity index 80% rename from packages/docusaurus-plugin-ideal-image/src/index.js rename to packages/docusaurus-plugin-ideal-image/src/index.ts index d5ae68dcba..f35d291aec 100644 --- a/packages/docusaurus-plugin-ideal-image/src/index.js +++ b/packages/docusaurus-plugin-ideal-image/src/index.ts @@ -4,10 +4,13 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ +import {LoadContext} from '@docusaurus/types'; +import {PluginOptions} from './types'; +import {Configuration} from 'webpack'; -const path = require('path'); +import path from 'path'; -module.exports = function(context, options) { +export = function(_context: LoadContext, options: PluginOptions) { const isProd = process.env.NODE_ENV === 'production'; return { name: 'docusaurus-plugin-ideal-image', @@ -16,7 +19,7 @@ module.exports = function(context, options) { return path.resolve(__dirname, './theme'); }, - configureWebpack(config, isServer) { + configureWebpack(_config: Configuration, isServer: boolean) { return { module: { rules: [ diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.tsx similarity index 81% rename from packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js rename to packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.tsx index 99ed4d9b23..ecb0508d38 100644 --- a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.js +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage.tsx @@ -4,10 +4,12 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ + import React from 'react'; +import {ImageProps} from '../types'; import IdealImage from '@endiliey/react-ideal-image'; -function Image(props) { +const Image: React.FC = props => { const {alt, className, img} = props; return ( ({ + srcSet={img.src.images.map((image: any) => ({ ...image, src: image.path, }))} /> ); -} +}; export default Image; diff --git a/packages/docusaurus-plugin-ideal-image/src/types.ts b/packages/docusaurus-plugin-ideal-image/src/types.ts new file mode 100644 index 0000000000..b0019955a3 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/types.ts @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +export interface PluginOptions { + /** + * Filename template for output files. + */ + name?: string; + /** + * Specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default sizes array in the loader options in your webpack.config.js. + */ + sizes?: number[]; + /** + * Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up) + */ + size?: number; + /** + * As an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you. + */ + min?: number; + /** + * See min above + */ + max?: number; + /** + * Configure the number of images generated between min and max (inclusive) + */ + steps?: number; + /** + * JPEG compression quality + */ + quality?: number; +} + +export interface ImageProps extends React.ImgHTMLAttributes<{}> { + img: any; +} diff --git a/packages/docusaurus-plugin-ideal-image/tsconfig.json b/packages/docusaurus-plugin-ideal-image/tsconfig.json new file mode 100644 index 0000000000..6fead23031 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "incremental": true, + "tsBuildInfoFile": "./lib/.tsbuildinfo", + "rootDir": "src", + "outDir": "lib", + "jsx": "react", + "typeRoots": ["@types"], + } +}