mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-24 20:17:50 +02:00
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:
parent
39e9e755c3
commit
104733914a
9 changed files with 102 additions and 8 deletions
|
@ -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: [
|
|
@ -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;
|
41
packages/docusaurus-plugin-ideal-image/src/types.ts
Normal file
41
packages/docusaurus-plugin-ideal-image/src/types.ts
Normal 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;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue