Merge pull request #3 from phucbm/npm-package

Release npm package version

.babelrc.json

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.eslintrc.json

@@ -0,0 +1,48 @@
+{
+  "rules": {
+    "prefer-template": "off",
+    "no-var": 1,
+    "no-unused-vars": 1,
+    "camelcase": 1,
+    "no-nested-ternary": 1,
+    "no-console": 1,
+    "no-template-curly-in-string": 1,
+    "no-self-compare": 1,
+    "import/prefer-default-export": 0,
+    "arrow-body-style": 1,
+    "import/no-extraneous-dependencies": [
+      "off",
+      {
+        "devDependencies": false
+      }
+    ]
+  },
+  "ignorePatterns": [
+    "dist",
+    "node_modules",
+    "webpack.*",
+    "config/paths.js"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "prettier"
+  ],
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "config/webpack.common.js"
+      }
+    }
+  }
+}

.gitignore

@@ -1,4 +1,4 @@
-/package-lock.json
-/node_modules/
+**/.DS_Store
+/node_modules
 /.idea/
-/dist/
+/package-lock.json

.npmignore

@@ -0,0 +1,11 @@
+.idea
+.gitignore
+.babelrc.json
+.eslintrc.json
+.prettierrc.json
+jsconfig.json
+/src
+/examples
+/config
+/public
+postcss.config.js

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": false
+}

README.md

@@ -1,43 +1,49 @@
 # 🦄 Cursor.js
 
-> ### JavaScript + GreenSock customize mouse cursor with inertia for modern browsers.
+> ### Customize mouse cursor completely with JS, powered by GSAP.
 
-[![release](https://badgen.net/github/release/phucbm/Cursor.js/?cache=600)](https://github.com/phucbm/lipsum-generator/releases/latest)
+[![npm-version](https://badgen.net/npm/v/gsap-cursor?cache=600)](https://www.npmjs.com/package/gsap-cursor)
+[![total-download](https://badgen.net/npm/dt/gsap-cursor?cache=600)](https://www.npmjs.com/package/gsap-cursor)
 [![Made in Vietnam](https://raw.githubusercontent.com/webuild-community/badge/master/svg/made.svg)](https://webuild.community)
 [![jsdelivr](https://data.jsdelivr.com/v1/package/gh/phucbm/Cursor.js/badge?style=rounded)](https://www.jsdelivr.com/package/gh/phucbm/Cursor.js)
 [![license](https://badgen.net/github/license/phucbm/Cursor.js/)](https://github.com/phucbm/Cursor.js/blob/main/LICENSE)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/9d9b7120-8c9d-486d-b53e-7fa938ce5c78/deploy-status)](https://app.netlify.com/sites/cursorjs/deploys)
 
+Key features:
 
-Features include:
+- Customize native cursor with JS.
+- Update cursor style when hover on specific elements.
 
-- Change native cursor using **GreenSock**.
-- Change cursor **style based on hover targets**.
+Demo 👉 https://cursorjs.netlify.app
+
+![Screen Recording 2022-01-23 at 20 44 49](https://user-images.githubusercontent.com/14942380/150682675-cda01eca-f8d9-4faf-9cd3-611a9ca550e2.gif)
 
 ## Installation
 
-```html
-<!-- GreenSock -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
+### From NPM
 
-<!-- Cursor.js -->
-<script src="https://cdn.jsdelivr.net/gh/phucbm/cursor.js/src/cursor.min.js"></script>
+```shell
+npm i gsap-cursor
 ```
 
-Demo 👉 https://cursorjs.netlify.app
+```js
+import {Cursor} from "gsap-cursor";
 
-![Screen Recording 2022-01-23 at 20 44 49](https://user-images.githubusercontent.com/14942380/150682675-cda01eca-f8d9-4faf-9cd3-611a9ca550e2.gif)
+new Cursor();
+```
 
-## Usage
+### From CDN
 
-Default style
+```html
+<!-- UNPKG (GSAP included) -->
+<script src="https://unpkg.com/gsap-cursor/dist/gsap-cursor.min.js"></script>
+```
 
 ```js
-// init
 new Cursor();
 ```
 
-Custom style
+## Configuration
 
 ```js
 const config = {
@@ -96,16 +102,26 @@ const cursor = new Cursor(config);
 
 ## Deployment
 
-Install gulp
+### Development
 
 ```shell
 npm install
 ```
 
-And start server
+```shell
+npm run dev
+```
+
+### Production
+
+```shell
+npm run build
+```
+
+### Publish to NPM
 
 ```shell
-gulp serve
+npm run publish
 ```
 
 ## License

config/paths.js

@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = {
+  // Source files
+  src: path.resolve(__dirname, '../src'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../dist'),
+
+  // Static files that get copied to build folder
+  public: path.resolve(__dirname, '../public'),
+}

config/webpack.common.js

@@ -0,0 +1,74 @@
+const {CleanWebpackPlugin} = require('clean-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const paths = require('./paths')
+
+module.exports = {
+    // Where webpack looks to start building the bundle
+    entry: [paths.src + '/index.js'],
+
+    // Where webpack outputs the assets and bundles
+    output: {
+        path: paths.build,
+        filename: '[name].bundle.js',
+        publicPath: '/',
+    },
+
+    // Customize the webpack build process
+    plugins: [
+        // Removes/cleans build folders and unused assets when rebuilding
+        new CleanWebpackPlugin(),
+
+        // Copies files from target to destination folder
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: paths.public,
+                    to: 'assets',
+                    globOptions: {
+                        ignore: ['*.DS_Store'],
+                    },
+                    noErrorOnMissing: true,
+                },
+            ],
+        }),
+
+        // Generates an HTML file from a template
+        // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
+        new HtmlWebpackPlugin({
+            inject: true,
+            hash: true,
+            title: 'webpack Boilerplate',
+            favicon: paths.src + '/images/favicon.png',
+            template: paths.src + '/template.html', // template file
+            filename: 'index.html', // output file
+        }),
+    ],
+
+    // Determine how modules within the project are treated
+    module: {
+        rules: [
+            // JavaScript: Use Babel to transpile JavaScript files
+            {test: /\.js$/, use: ['babel-loader']},
+
+            // Images: Copy image files to build folder
+            {test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource'},
+
+            // Fonts and SVGs: Inline files
+            {test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline'},
+
+            // HTML
+            {test: /\.html$/i, loader: "html-loader",},
+        ],
+    },
+
+    resolve: {
+        modules: [paths.src, 'node_modules'],
+        extensions: ['.js', '.jsx', '.json'],
+        alias: {
+            '@': paths.src,
+            assets: paths.public,
+        },
+    },
+}

config/webpack.dev.js

@@ -0,0 +1,38 @@
+const {merge} = require('webpack-merge')
+
+const common = require('./webpack.common')
+
+module.exports = merge(common, {
+  // Set the mode to development or production
+  mode: 'development',
+
+  // Control how source maps are generated
+  devtool: 'inline-source-map',
+
+  // Spin up a server for quick development
+  devServer: {
+    historyApiFallback: true,
+    open: true,
+    compress: true,
+    hot: true,
+    port: 8080,
+  },
+
+  module: {
+    rules: [
+      // Styles: Inject CSS into the head with source maps
+      {
+        test: /\.(sass|scss|css)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {sourceMap: true, importLoaders: 1, modules: false},
+          },
+          {loader: 'postcss-loader', options: {sourceMap: true}},
+          {loader: 'sass-loader', options: {sourceMap: true}},
+        ],
+      },
+    ],
+  },
+})

config/webpack.prod.js

@@ -0,0 +1,55 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const {merge} = require('webpack-merge')
+
+const paths = require('./paths')
+const common = require('./webpack.common')
+
+module.exports = merge(common, {
+    mode: 'production',
+    devtool: false,
+    output: {
+        path: paths.build,
+        publicPath: '/',
+        filename: 'js/[name].[contenthash].bundle.js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(sass|scss|css)$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 2,
+                            sourceMap: false,
+                            modules: false,
+                        },
+                    },
+                    'postcss-loader',
+                    'sass-loader',
+                ],
+            },
+        ],
+    },
+    plugins: [
+        // Extracts CSS into separate files
+        new MiniCssExtractPlugin({
+            filename: 'styles/[name].[contenthash].css',
+            chunkFilename: '[id].css',
+        }),
+    ],
+    optimization: {
+        minimize: true,
+        minimizer: [new CssMinimizerPlugin(), '...'],
+        runtimeChunk: {
+            name: 'runtime',
+        },
+    },
+    performance: {
+        hints: false,
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000,
+    },
+})

config/webpack.umd.js

@@ -0,0 +1,28 @@
+const CopyPlugin = require("copy-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+    devtool: false,
+    entry: "./src/js/cursor.js",
+    output: {
+        filename: 'gsap-cursor.min.js',
+        libraryTarget: 'umd',
+        umdNamedDefine: true,
+        // prevent error: `Uncaught ReferenceError: self is not define`
+        globalObject: 'this',
+    },
+    plugins: [
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: "./src/js/cursor.js",
+                    to: "./gsap-cursor.module.js"
+                },
+            ],
+        }),
+    ],
+    optimization: {
+        minimizer: [new TerserPlugin({extractComments: false})],
+    },
+};