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

@@ -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/

.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/

.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/
+packages/docusaurus-plugin-sitemap/lib/
+packages/docusaurus-plugin-ideal-image/lib/

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<IdealImageProps>;
+  export default IdealImage;
+}

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",

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

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

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

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"],
+  }
+}