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
This commit is contained in:
Dongwoo Gim 2019-12-01 08:09:26 +08:00 committed by Yangshun Tay
parent 39e9e755c3
commit 104733914a
9 changed files with 102 additions and 8 deletions

View file

@ -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: [

View file

@ -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<ImageProps> = props => {
const {alt, className, img} = props;
return (
<IdealImage
@ -18,12 +20,12 @@ function Image(props) {
width={img.src.width || 100}
placeholder={{lqip: img.preSrc}}
src={img.src.src}
srcSet={img.src.images.map(image => ({
srcSet={img.src.images.map((image: any) => ({
...image,
src: image.path,
}))}
/>
);
}
};
export default Image;

View file

@ -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;
}