feat: suporrt SSR mode

Author: kimcoder

CHANGELOG.md

@@ -1,24 +1,34 @@
 # Change Log
 
-2.0.0 (November 15, 2020)
+### 2.1.1 (June 16, 2021)
+
+- fix issue in SSR mode
+
+### 2.0.0 (November 15, 2020)
+
 - development by typescript
 - migration functional component
 
-1.0.4 (June 22, 2020)
-- add 'onClick' props. 
-  - can handle callback when image was clicked 
+### 1.0.4 (June 22, 2020)
+
+- add 'onClick' props.
+  - can handle callback when image was clicked
+
+### 1.0.3 (March 30, 2020)
 
-1.0.3 (March 30, 2020)
 - modify props types about width and height. ( number -> string or number )
   - can set value like this. '100%' or '100px' or 100
 
-1.0.2 (October 08, 2018)
+### 1.0.2 (October 08, 2018)
+
 - add index.d.ts (for typescript).
 
-1.0.1 (September 20, 2018)
+### 1.0.1 (September 20, 2018)
+
 - release component.
 
-1.0.0 (September 7, 2018)
+### 1.0.0 (September 7, 2018)
+
 - initial setup for development environment.
 - config rollup for making react component.
-- config webpack for local testing.
+- config webpack for local testing.

README.md

@@ -16,7 +16,8 @@ Simple ImageSlider Component for ReactJS v17<br>
 - Just Two Elements will be used. (for display images)
 - Support GPU Render, by default.
 - Support Image Preload.
-- Selectable Navgation Styles.
+- Support SSR. ( server-side-rendering )
+- Selectable Navigation Styles.
 
 # Live demo
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-image-slider",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "description": "simple image slider component for react",
   "main": "dist/index.js",
   "scripts": {
@@ -44,7 +44,7 @@
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.11.4",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-image": "^2.0.5",
     "@rollup/plugin-typescript": "^6.1.0",

rollup.config.js

@@ -8,7 +8,7 @@ export default {
   input: 'src/index.ts',
   output: {
     dir: 'dist',
-    format: 'esm'
+    format: 'cjs'
   },
   plugins: [typescript({ exclude: 'example/*' }), getBabelOutputPlugin({ presets: ['@babel/preset-env'] }), image({ limit: 1000 })],
   external

src/ImageSliderBullets.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import styles from './ImageSliderStyle';
 
 type Props = {

src/ImageSliderPreLoader.ts

@@ -2,10 +2,22 @@ const ImageSliderPreLoader = (() => {
   const loadedUrl: { [key: string]: boolean } = {};
   const loadQueue: Array<string> = [];
   const loaderCount = 3;
-  const loaderPool: Array<HTMLImageElement> = new Array(loaderCount).fill(0).map(() => new Image());
+  let loaderPool: Array<HTMLImageElement>;
 
+  const init = () => {
+    if (typeof Image !== 'function') return;
+
+    loaderPool = new Array(loaderCount).fill(0).map(() => new Image());
+  };
+
+  init();
   return {
     load: (url: string) => {
+      if (!loaderPool) {
+        init();
+        return;
+      }
+
       if (!url || loadedUrl[url]) {
         return;
       }