From 139a39d65508b3d0c46c46504f55a713a7fe8a11 Mon Sep 17 00:00:00 2001 From: Xiao Lin Date: Sat, 29 Jul 2023 21:52:56 -0700 Subject: [PATCH] refactor file names and move into components dir --- .eslintrc.json | 3 +- README.md | 8 +- example/{app.js => App.jsx} | 2 +- .../ImageGallery.jsx} | 12 +- .../ImageGallery.test.js | 2 +- src/{Item.js => components/Item.jsx} | 0 src/{SVG.js => components/SVG.jsx} | 0 .../SwipeWrapper.jsx} | 0 .../controls/Fullscreen.jsx} | 2 +- .../controls/LeftNav.jsx} | 2 +- .../controls/PlayPause.jsx} | 2 +- .../controls/RightNav.jsx} | 2 +- webpack.build.js | 123 +++++++++--------- webpack.config.js | 6 +- 14 files changed, 82 insertions(+), 82 deletions(-) rename example/{app.js => App.jsx} (99%) rename src/{ImageGallery.js => components/ImageGallery.jsx} (99%) rename src/{__tests__ => components}/ImageGallery.test.js (91%) rename src/{Item.js => components/Item.jsx} (100%) rename src/{SVG.js => components/SVG.jsx} (100%) rename src/{SwipeWrapper.js => components/SwipeWrapper.jsx} (100%) rename src/{controls/Fullscreen.js => components/controls/Fullscreen.jsx} (93%) rename src/{controls/LeftNav.js => components/controls/LeftNav.jsx} (93%) rename src/{controls/PlayPause.js => components/controls/PlayPause.jsx} (93%) rename src/{controls/RightNav.js => components/controls/RightNav.jsx} (93%) diff --git a/.eslintrc.json b/.eslintrc.json index af9a4f5a..e5f74dbb 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -31,7 +31,8 @@ }, "import/resolver": { "alias": { - "map": [["src", "./src"]] + "map": [["src", "./src"]], + "extensions": [".ts", ".js", ".jsx", ".json"] } } }, diff --git a/README.md b/README.md index 959805bd..39523dab 100644 --- a/README.md +++ b/README.md @@ -176,7 +176,7 @@ class MyGallery extends React.Component { - As a prop passed into `ImageGallery` to completely override `_renderThumbInner`, see source for reference - `renderLeftNav`: Function, custom left nav component - - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/LeftNav.js) + - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/LeftNav.js) - Use this to render a custom left nav control - Args: - `onClick` callback that will slide to the previous item @@ -187,7 +187,7 @@ class MyGallery extends React.Component { ); ``` - `renderRightNav`: Function, custom right nav component - - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/RightNav.js) + - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/RightNav.js) - Use this to render a custom right nav control - Args: - `onClick` callback that will slide to the next item @@ -198,7 +198,7 @@ class MyGallery extends React.Component { ); ``` - `renderPlayPauseButton`: Function, play pause button component - - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/PlayPause.js) + - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/PlayPause.js) - Use this to render a custom play pause button - Args: - `onClick` callback that will toggle play/pause @@ -209,7 +209,7 @@ class MyGallery extends React.Component { ); ``` - `renderFullscreenButton`: Function, custom fullscreen button component - - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/Fullscreen.js) + - See [``](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/Fullscreen.js) - Use this to render a custom fullscreen button - Args: - `onClick` callback that will toggle fullscreen diff --git a/example/app.js b/example/App.jsx similarity index 99% rename from example/app.js rename to example/App.jsx index d2ff522c..1139c353 100644 --- a/example/app.js +++ b/example/App.jsx @@ -1,7 +1,7 @@ import React from "react"; import { createRoot } from "react-dom/client"; -import ImageGallery from "src/ImageGallery"; +import ImageGallery from "src/components/ImageGallery"; const PREFIX_URL = "https://raw.githubusercontent.com/xiaolin/react-image-gallery/master/static/"; diff --git a/src/ImageGallery.js b/src/components/ImageGallery.jsx similarity index 99% rename from src/ImageGallery.js rename to src/components/ImageGallery.jsx index 488ec067..76dd5e8b 100644 --- a/src/ImageGallery.js +++ b/src/components/ImageGallery.jsx @@ -6,12 +6,12 @@ import isEqual from "react-fast-compare"; import ResizeObserver from "resize-observer-polyfill"; import { LEFT, RIGHT, UP, DOWN } from "react-swipeable"; import { arrayOf, bool, func, number, oneOf, shape, string } from "prop-types"; -import Item from "src/Item"; -import Fullscreen from "src/controls/Fullscreen"; -import LeftNav from "src/controls/LeftNav"; -import RightNav from "src/controls/RightNav"; -import PlayPause from "src/controls/PlayPause"; -import SwipeWrapper from "src/SwipeWrapper"; +import Item from "src/components/Item"; +import Fullscreen from "src/components/controls/Fullscreen"; +import LeftNav from "src/components/controls/LeftNav"; +import RightNav from "src/components/controls/RightNav"; +import PlayPause from "src/components/controls/PlayPause"; +import SwipeWrapper from "src/components/SwipeWrapper"; const screenChangeEvents = [ "fullscreenchange", diff --git a/src/__tests__/ImageGallery.test.js b/src/components/ImageGallery.test.js similarity index 91% rename from src/__tests__/ImageGallery.test.js rename to src/components/ImageGallery.test.js index f24c5655..cefad79f 100644 --- a/src/__tests__/ImageGallery.test.js +++ b/src/components/ImageGallery.test.js @@ -1,7 +1,7 @@ import React from "react"; import { render, screen } from "@testing-library/react"; -import ImageGallery from "../ImageGallery"; +import ImageGallery from "./ImageGallery"; describe("", () => { const defaultProps = { diff --git a/src/Item.js b/src/components/Item.jsx similarity index 100% rename from src/Item.js rename to src/components/Item.jsx diff --git a/src/SVG.js b/src/components/SVG.jsx similarity index 100% rename from src/SVG.js rename to src/components/SVG.jsx diff --git a/src/SwipeWrapper.js b/src/components/SwipeWrapper.jsx similarity index 100% rename from src/SwipeWrapper.js rename to src/components/SwipeWrapper.jsx diff --git a/src/controls/Fullscreen.js b/src/components/controls/Fullscreen.jsx similarity index 93% rename from src/controls/Fullscreen.js rename to src/components/controls/Fullscreen.jsx index 3fde6e45..753469ca 100644 --- a/src/controls/Fullscreen.js +++ b/src/components/controls/Fullscreen.jsx @@ -1,6 +1,6 @@ import React from "react"; import { bool, func } from "prop-types"; -import SVG from "src/SVG"; +import SVG from "src/components/SVG"; const Fullscreen = React.memo(({ isFullscreen, onClick }) => { return ( diff --git a/src/controls/LeftNav.js b/src/components/controls/LeftNav.jsx similarity index 93% rename from src/controls/LeftNav.js rename to src/components/controls/LeftNav.jsx index a2a864c6..88a64e63 100644 --- a/src/controls/LeftNav.js +++ b/src/components/controls/LeftNav.jsx @@ -1,6 +1,6 @@ import React from "react"; import { bool, func } from "prop-types"; -import SVG from "src/SVG"; +import SVG from "src/components/SVG"; const LeftNav = React.memo(({ disabled, onClick }) => { return ( diff --git a/src/controls/PlayPause.js b/src/components/controls/PlayPause.jsx similarity index 93% rename from src/controls/PlayPause.js rename to src/components/controls/PlayPause.jsx index a9d03f12..80b7881e 100644 --- a/src/controls/PlayPause.js +++ b/src/components/controls/PlayPause.jsx @@ -1,6 +1,6 @@ import React from "react"; import { bool, func } from "prop-types"; -import SVG from "src/SVG"; +import SVG from "src/components/SVG"; const PlayPause = React.memo(({ isPlaying, onClick }) => { return ( diff --git a/src/controls/RightNav.js b/src/components/controls/RightNav.jsx similarity index 93% rename from src/controls/RightNav.js rename to src/components/controls/RightNav.jsx index f36aed27..54280e3d 100644 --- a/src/controls/RightNav.js +++ b/src/components/controls/RightNav.jsx @@ -1,6 +1,6 @@ import React from "react"; import { bool, func } from "prop-types"; -import SVG from "src/SVG"; +import SVG from "src/components/SVG"; const RightNav = React.memo(({ disabled, onClick }) => { return ( diff --git a/webpack.build.js b/webpack.build.js index 225a82ab..797916a4 100644 --- a/webpack.build.js +++ b/webpack.build.js @@ -1,57 +1,56 @@ - -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const RemovePlugin = require('remove-files-webpack-plugin'); +const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const RemovePlugin = require("remove-files-webpack-plugin"); const config = { - mode: 'production', + mode: "production", }; const jsOutput = Object.assign({}, config, { - entry: [ './src/ImageGallery.js', ], + entry: ["./src/components/ImageGallery.jsx"], output: { - path: path.resolve(__dirname, 'build'), - filename: 'image-gallery.js', - library: 'ImageGallery', - globalObject: 'this', - libraryTarget: 'umd', + path: path.resolve(__dirname, "build"), + filename: "image-gallery.js", + library: "ImageGallery", + globalObject: "this", + libraryTarget: "umd", }, resolve: { alias: { - src: path.resolve(__dirname, 'src/'), + src: path.resolve(__dirname, "src/"), }, - extensions: ['.js'] + extensions: [".js", ".jsx"], }, module: { rules: [ { - test: /\.js$/, + test: /\.(js|jsx)$/, exclude: /node_modules/, - loader: 'babel-loader', - } - ] + loader: "babel-loader", + }, + ], }, externals: { // Don't bundle react or react-dom react: { - commonjs: 'react', - commonjs2: 'react', - amd: 'react', - root: 'React', + commonjs: "react", + commonjs2: "react", + amd: "react", + root: "React", }, - 'react-dom': { - commonjs: 'react-dom', - commonjs2: 'react-dom', - amd: 'react-dom', - root: 'ReactDOM', + "react-dom": { + commonjs: "react-dom", + commonjs2: "react-dom", + amd: "react-dom", + root: "ReactDOM", }, }, }); const cssOutput = Object.assign({}, config, { - entry: './styles/scss/image-gallery.scss', + entry: "./styles/scss/image-gallery.scss", output: { - path: path.resolve(__dirname, 'styles/css'), + path: path.resolve(__dirname, "styles/css"), }, module: { rules: [ @@ -60,16 +59,16 @@ const cssOutput = Object.assign({}, config, { use: [ MiniCssExtractPlugin.loader, // Translates CSS into CommonJS - 'css-loader', + "css-loader", // Compiles Sass to CSS - 'sass-loader', + "sass-loader", ], - } - ] + }, + ], }, plugins: [ new MiniCssExtractPlugin({ - filename: 'image-gallery.css', + filename: "image-gallery.css", }), new RemovePlugin({ /** @@ -78,36 +77,36 @@ const cssOutput = Object.assign({}, config, { after: { test: [ { - folder: 'styles/css', + folder: "styles/css", method: (absoluteItemPath) => { - return new RegExp(/\.js$/, 'm').test(absoluteItemPath); + return new RegExp(/\.js$/, "m").test(absoluteItemPath); }, - } - ] - } + }, + ], + }, }), ], }); const jsDemoOutput = Object.assign({}, config, { - entry: [ './example/app.js', ], + entry: ["./example/App.jsx"], output: { - path: path.resolve(__dirname, 'demo'), - filename: 'demo.mini.js', + path: path.resolve(__dirname, "demo"), + filename: "demo.mini.js", }, resolve: { alias: { - src: path.resolve(__dirname, 'src/'), + src: path.resolve(__dirname, "src/"), }, - extensions: ['.js'] + extensions: [".js", ".jsx"], }, module: { rules: [ { - test: /\.js$/, - loader: 'babel-loader', - } - ] + test: /\.(js|jsx)$/, + loader: "babel-loader", + }, + ], }, plugins: [ new RemovePlugin({ @@ -117,21 +116,21 @@ const jsDemoOutput = Object.assign({}, config, { after: { test: [ { - folder: 'demo', + folder: "demo", method: (absoluteItemPath) => { return new RegExp(/\.txt$/).test(absoluteItemPath); }, - } - ] - } + }, + ], + }, }), ], }); const cssDemoOutput = Object.assign({}, config, { - entry: ['./styles/scss/image-gallery.scss', './example/app.css'], + entry: ["./styles/scss/image-gallery.scss", "./example/App.css"], output: { - path: path.resolve(__dirname, 'demo'), + path: path.resolve(__dirname, "demo"), }, module: { rules: [ @@ -140,16 +139,16 @@ const cssDemoOutput = Object.assign({}, config, { use: [ MiniCssExtractPlugin.loader, // Translates CSS into CommonJS - 'css-loader', + "css-loader", // Compiles Sass to CSS - 'sass-loader', + "sass-loader", ], - } - ] + }, + ], }, plugins: [ new MiniCssExtractPlugin({ - filename: 'demo.mini.css', + filename: "demo.mini.css", }), new RemovePlugin({ /** @@ -158,13 +157,13 @@ const cssDemoOutput = Object.assign({}, config, { after: { test: [ { - folder: 'demo', + folder: "demo", method: (absoluteItemPath) => { return new RegExp(/\.js$/).test(absoluteItemPath); }, - } - ] - } + }, + ], + }, }), ], }); diff --git a/webpack.config.js b/webpack.config.js index b359b75e..2e8f59a2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,8 +3,8 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: [ - "./example/app.js", - "./example/app.css", + "./example/App.jsx", + "./example/App.css", "./styles/scss/image-gallery.scss", ], output: { @@ -13,7 +13,7 @@ module.exports = { publicPath: "/dist/", }, resolve: { - extensions: [".js"], + extensions: [".js", ".jsx"], alias: { src: path.resolve(__dirname, "src/"), },