lint, refactor, rename, add example with background

Yankovsky · Yankovsky · commit f2007a944c59 · 2020-08-21T17:54:38.000+03:00
diff --git a/example/react-entry.tsx b/example/react-entry.tsx
@@ -2,44 +2,61 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { PictureSmart } from '../src/react';
 import { backgroundCssSmart } from '../src/utils/backgroundCss';
-import { getOriginal } from '../src/utils'
+import { getOriginal } from '../src/utils';
 
 // Adds 'webp' class to html element if the browser supports webp.
-import '../src/utils/webpDetector'
+import '../src/utils/webpDetector';
 
 const oneImageForAllBreakpoints = require.context('./images/oneImageForAllBreakpoints');
 const differentBreakpoints = require.context('./images/differentBreakpoints');
 
-const oneImageForAllBreakpointsWithoutResize = require.context('./images/oneImageForAllBreakpoints?dontresize');
+const imageWithoutResize = require.context('./images/oneImageForAllBreakpoints?dontresize');
 
-// Usage example getOriginal ()
-const myImageDataDontresize = require('./images/oneImageForAllBreakpoints/all.png?dontresize')
-const myImageData = require('./images/oneImageForAllBreakpoints/all.png')
+const myImageData = require('./images/oneImageForAllBreakpoints/all.png');
+const myImageWithoutResizeData = require('./images/oneImageForAllBreakpoints/all.png?dontresize');
 
-console.log(getOriginal(myImageData))
-console.log(getOriginal(myImageDataDontresize))
+// Usage example getOriginal ()
+console.log(getOriginal(myImageData));
+console.log(getOriginal(myImageWithoutResizeData));
 
 ReactDOM.render(
   <div>
     <h1>Example usage of csssr.images</h1>
 
     <h2>As picture tag</h2>
+
     <h3>One image for all resolutions</h3>
-    <PictureSmart requireImages={oneImageForAllBreakpointsWithoutResize} alt="One image for all resolutions" />
     <PictureSmart requireImages={oneImageForAllBreakpoints} alt="One image for all resolutions" />
+
     <h3>Image with different breakpoints</h3>
     <PictureSmart requireImages={differentBreakpoints} alt="Image with different breakpoints" />
+
+    <h3>Image without resize</h3>
+    <PictureSmart
+      requireImages={imageWithoutResize}
+      alt="Image without resize"
+    />
+
     <h2>As background css</h2>
+
     <h3>One image for all resolutions</h3>
     <div className="one-image-for-all-resolutions" style={{ width: '100%', height: '100%' }}>
       One image for all resolutions on background
     </div>
     <style>{backgroundCssSmart('.one-image-for-all-resolutions', oneImageForAllBreakpoints)}</style>
+
     <h3>Different breakpoints</h3>
     <div className="different-breakpoints" style={{ width: '100%', height: '100%' }}>
       Image with different breakpoints on background
     </div>
     <style>{backgroundCssSmart('.different-breakpoints', differentBreakpoints)}</style>
+
+    <h3>Image without resize</h3>
+
+    <div className=".image-without-resize" style={{ width: '100%', height: '100%' }}>
+      Image without resize on background
+    </div>
+    <style>{backgroundCssSmart('.image-without-resize', imageWithoutResize)}</style>
   </div>,
   document.getElementById('app'),
 );
diff --git a/example/webpack.config.ts b/example/webpack.config.ts
@@ -1,7 +1,52 @@
 import path from 'path';
 import webpack from 'webpack';
-const ip = require('ip')
+import ip from 'ip';
 import { Plugin } from '../src/webpack';
+import { Dpr } from '../src/types';
+
+const handleImagesForOriginalPixelRatio = (originalPixelRatio: Dpr) => {
+  return {
+    use: [
+      {
+        loader: path.resolve(__dirname, '../src/index.ts'),
+        options: {
+          breakpoints: [
+            {
+              name: 'mobile',
+              maxWidth: 767,
+            },
+            {
+              name: 'tablet',
+              minWidth: 768,
+              maxWidth: 1279,
+            },
+            {
+              name: 'desktop',
+              minWidth: 1280,
+            },
+          ],
+          imgproxy: {
+            disable: false,
+            imagesHost: process.env.HOST || `http://${ip.address()}:8081`,
+            host: process.env.IMGPROXY_HOST || 'http://localhost:8080',
+          },
+          originalPixelRatio,
+        },
+      },
+      {
+        loader: 'file-loader',
+        options: {
+          publicPath: '/build',
+          name:
+            process.env.NODE_ENV === 'development'
+              ? '[path][name].[ext]'
+              : '[path][name]-[hash:8].[ext]',
+          esModule: false,
+        },
+      },
+    ],
+  };
+};
 
 const config: webpack.Configuration = {
   mode: 'production',
@@ -27,87 +72,10 @@ const config: webpack.Configuration = {
         oneOf: [
           {
             resourceQuery: /dontresize/,
-            // TODO reuse
-            use: [
-              {
-                loader: path.resolve(__dirname, '../src/index.ts'),
-                options: {
-                  breakpoints: [
-                    {
-                      name: 'mobile',
-                      maxWidth: 767,
-                    },
-                    {
-                      name: 'tablet',
-                      minWidth: 768,
-                      maxWidth: 1279,
-                    },
-                    {
-                      name: 'desktop',
-                      minWidth: 1280,
-                    },
-                  ],
-                  imgproxy: {
-                    disable: false,
-                    imagesHost: process.env.HOST || `http://${ip.address()}:8081`,
-                    host: process.env.IMGPROXY_HOST || 'http://localhost:8080',
-                  },
-                  originalPixelRatio: '1x',
-                },
-              },
-              {
-                loader: 'file-loader',
-                options: {
-                  publicPath: '/build',
-                  name:
-                    process.env.NODE_ENV === 'development'
-                      ? '[path][name].[ext]'
-                      : '[path][name]-[hash:8].[ext]',
-                  esModule: false,
-                },
-              },
-            ],
+            ...handleImagesForOriginalPixelRatio('1x'),
           },
           {
-            use: [
-              {
-                loader: path.resolve(__dirname, '../src/index.ts'),
-                options: {
-                  breakpoints: [
-                    {
-                      name: 'mobile',
-                      maxWidth: 767,
-                    },
-                    {
-                      name: 'tablet',
-                      minWidth: 768,
-                      maxWidth: 1279,
-                    },
-                    {
-                      name: 'desktop',
-                      minWidth: 1280,
-                    },
-                  ],
-                  imgproxy: {
-                    disable: false,
-                    imagesHost: process.env.HOST || `http://${ip.address()}:8081`,
-                    host: process.env.IMGPROXY_HOST || 'http://localhost:8080',
-                  },
-                  originalPixelRatio: '3x',
-                },
-              },
-              {
-                loader: 'file-loader',
-                options: {
-                  publicPath: '/build',
-                  name:
-                    process.env.NODE_ENV === 'development'
-                      ? '[path][name].[ext]'
-                      : '[path][name]-[hash:8].[ext]',
-                  esModule: false,
-                },
-              },
-            ]
+            ...handleImagesForOriginalPixelRatio('3x'),
           },
         ],
       },
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
+    "@types/ip": "^1.1.0",
     "imgproxy": "^0.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
diff --git a/src/types.ts b/src/types.ts
@@ -1,15 +1,15 @@
 export type Dpr = '1x' | '2x' | '3x';
 
 export type CompressionRatio = {
-  "1x": number;
-  "2x"?: number;
-  "3x"?: number;
-}
+  '1x': number;
+  '2x'?: number;
+  '3x'?: number;
+};
 
 export type SrcSet = {
-  "1x": string;
-  "2x"?: string;
-  "3x"?: string;
+  '1x': string;
+  '2x'?: string;
+  '3x'?: string;
 };
 
 export type ExtensionSrcSet = {
diff --git a/src/utils/getCompressionRatio.ts b/src/utils/getCompressionRatio.ts
@@ -1,17 +1,17 @@
-import { Dpr, CompressionRatio } from '../types'
+import { Dpr, CompressionRatio } from '../types';
 
 // [1x, 2x] -> {1x: 0.5, 2x: 0}
 
 export const getCompressionRatio = (pixelRatios: Dpr[]): CompressionRatio => {
   const length = pixelRatios.length;
 
   return pixelRatios.reduce((acc, item, index) => {
-      if (index + 1 === length) {
-        acc[item]= 0
-        return acc
-      }
+    if (index + 1 === length) {
+      acc[item] = 0;
+      return acc;
+    }
 
-      acc[item] = (index + 1) / length
-      return acc
-  },{} as CompressionRatio)
-}
+    acc[item] = (index + 1) / length;
+    return acc;
+  }, {} as CompressionRatio);
+};
diff --git a/src/utils/getOriginal.ts b/src/utils/getOriginal.ts
@@ -3,5 +3,5 @@ import { BreakpointSource } from '../types';
 export const getOriginal = (source: BreakpointSource): string | undefined => {
   const srcSet = source.srcSets[source.srcSets.length - 1].srcSet;
 
-  return srcSet['3x'] || srcSet['2x'] || srcSet['1x']
-}
+  return srcSet['3x'] || srcSet['2x'] || srcSet['1x'];
+};
diff --git a/src/utils/getPixelRations.ts b/src/utils/getPixelRations.ts
@@ -1,10 +1,14 @@
 import { Dpr } from '../types';
 
-export const getPixelRations = (originalPixelRatio: Dpr):Dpr[] => {
+export const getPixelRations = (originalPixelRatio: Dpr): Dpr[] => {
   switch (originalPixelRatio) {
-    case '1x': return ['1x']
-    case '2x': return ['1x','2x']
-    case '3x': return ['1x', '2x', '3x']
-    default: return ['1x']
+    case '1x':
+      return ['1x'];
+    case '2x':
+      return ['1x', '2x'];
+    case '3x':
+      return ['1x', '2x', '3x'];
+    default:
+      return ['1x'];
   }
-}
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -3,5 +3,5 @@ export { getBreakpointMedia } from './getBreakpointMedia';
 export { getSrcSetString } from './getSrcSetString';
 export { getSources } from './getSources';
 export { getOriginal } from './getOriginal';
-export { getPixelRations } from './getPixelRations'
-export { getCompressionRatio } from './getCompressionRatio'
+export { getPixelRations } from './getPixelRations';
+export { getCompressionRatio } from './getCompressionRatio';
diff --git a/src/utils/webpDetector.ts b/src/utils/webpDetector.ts
@@ -1,13 +1,15 @@
 // https://stackoverflow.com/a/27232658
 
 const canUseWebp = (): boolean => {
-  const canvas = document.createElement('canvas')
-  canvas.width = canvas.height = 1
-  return Boolean(canvas.toDataURL &&
-    canvas.toDataURL('image/webp') &&
-    canvas.toDataURL('image/webp').indexOf('image/webp') === 5)
-}
+  const canvas = document.createElement('canvas');
+  canvas.width = canvas.height = 1;
+  return Boolean(
+    canvas.toDataURL &&
+      canvas.toDataURL('image/webp') &&
+      canvas.toDataURL('image/webp').indexOf('image/webp') === 5,
+  );
+};
 
 if (canUseWebp()) {
-  document.documentElement.classList.add('webp')
+  document.documentElement.classList.add('webp');
 }
diff --git a/src/webpack/imgproxyUrlBuilder.ts b/src/webpack/imgproxyUrlBuilder.ts
@@ -1,13 +1,17 @@
 import Imgproxy from 'imgproxy';
-import { Dpr, SrcSet } from '../types'
-import { getCompressionRatio } from '../utils'
+import { Dpr, SrcSet } from '../types';
+import { getCompressionRatio } from '../utils';
 
 type ImgproxyUrlBuilderConfig = {
   imagesHost: string;
   host: string;
 };
 
-export type BuildUrlsForPixelRatios = (pixelRatios: Dpr[], imagePath: string, extension: string) => SrcSet;
+export type BuildUrlsForPixelRatios = (
+  pixelRatios: Dpr[],
+  imagePath: string,
+  extension: string,
+) => SrcSet;
 
 export const getImgproxyUrlBuilder = ({
   imagesHost,
@@ -26,11 +30,11 @@ export const getImgproxyUrlBuilder = ({
   };
 
   return (pixelRatios: Dpr[], imagePath: string, extension: string): SrcSet => {
-    const compressionsRatio = getCompressionRatio(pixelRatios)
+    const compressionsRatio = getCompressionRatio(pixelRatios);
 
     return pixelRatios.reduce((acc, item) => {
-      acc[item] = buildImgproxyUrl(imagePath, compressionsRatio[item] || 0, extension)
-      return acc
-    }, {} as SrcSet)
-  }
+      acc[item] = buildImgproxyUrl(imagePath, compressionsRatio[item] || 0, extension);
+      return acc;
+    }, {} as SrcSet);
+  };
 };
diff --git a/src/webpack/loader.ts b/src/webpack/loader.ts
diff --git a/src/webpack/loaderOptionsSchema.ts b/src/webpack/loaderOptionsSchema.ts
