feature: add typescript support

erichbehrens · Dec 10, 2019 · 4908c06 · 4908c06
1 parent 9ba11c5
commit 4908c06
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -1,8 +1,9 @@
 {
   "name": "react-animated-slider",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Animated slider component for react",
   "main": "build/index.js",
+  "typings": "build/index.d.ts",
   "files": [
     "build"
   ],
@@ -58,6 +59,7 @@
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.0",
     "css-hot-loader": "^1.4.4",
     "css-loader": "^3.2.0",
     "eslint": "^6.7.1",
@@ -77,6 +79,7 @@
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
     "react-test-renderer": "^16.4.0",
+    "typescript": "3.7.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0"

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -0,0 +1,37 @@
+interface ISliderProps {
+  children: React.ReactElement[];
+  slideIndex?: number;
+  duration?: number;
+  disabled?: boolean;
+  infinite?: boolean;
+  autoplay?: number;
+  touchDisabled?: boolean;
+  minSwipeOffset?: number;
+  previousButton?: React.ReactElement;
+  nextButton?: React.ReactElement;
+  classNames?: IClassNames;
+}
+
+interface IClassNames {
+  slider?: string;
+  previousButton?: string;
+  nextButton?: string;
+  buttonDisabled?: string;
+  track?: string;
+  slide?: string;
+  hidden?: string;
+  previous?: string;
+  next?: string;
+  animateIn?: string;
+  animateOut?: string;
+}
+
+declare module "react-animated-slider" {
+  import React from "react";
+
+  class Slider extends React.Component<
+    ISliderProps & JSX.IntrinsicElements["div"]
+  > {}
+
+  export = Slider;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,53 +2,55 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const sliderConfig = {
-	entry: {
-		index: './src/index.js',
-		horizontal: './src/css/horizontal.css',
-		vertical: './src/css/vertical.css',
-	},
-	output: {
-		path: path.resolve(__dirname, 'build'),
-		filename: '[name].js',
-		libraryTarget: 'commonjs2',
-	},
-	module: {
-		rules: [
-			{
-				test: /\.js$/,
-				include: path.resolve(__dirname, 'src'),
-				exclude: /(node_modules|bower_components|build)/,
-				use: {
-					loader: 'babel-loader',
-					options: {
-						presets: ['@babel/preset-env'],
-						plugins: [
-							'@babel/proposal-class-properties',
-							'@babel/proposal-object-rest-spread',
-							'@babel/transform-react-jsx',
-						],
-					},
-				},
-			},
-			{
-				test: /\.css$/,
-				use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
-			},
-		],
-	},
-	externals: {
-		react: 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
-	},
-	plugins: [
-		new IgnoreEmitPlugin(['horizontal.js', 'vertical.js']),
-		new CleanWebpackPlugin(),
-		new MiniCssExtractPlugin({
-			filename: '[name].css',
-			chunkFilename: '[name].css',
-		}),
-	],
+  entry: {
+    index: './src/index.js',
+    horizontal: './src/css/horizontal.css',
+    vertical: './src/css/vertical.css'
+  },
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: '[name].js',
+    libraryTarget: 'commonjs2'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.resolve(__dirname, 'src'),
+        exclude: /(node_modules|bower_components|build)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: [
+              '@babel/proposal-class-properties',
+              '@babel/proposal-object-rest-spread',
+              '@babel/transform-react-jsx'
+            ]
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+      }
+    ]
+  },
+  externals: {
+    react: 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+  },
+  plugins: [
+    new IgnoreEmitPlugin(['horizontal.js', 'vertical.js']),
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[name].css'
+    }),
+    new CopyPlugin([{ from: './src/index.d.ts', to: './index.d.ts' }])
+  ]
 };
 
 module.exports = [sliderConfig];