mirror of
https://github.com/upscayl/upscayl.git
synced 2024-11-12 01:40:53 +01:00
Updated project
This commit is contained in:
Nayam Amarshe
commit
6c18b7eeb3
12
.github/FUNDING.yml
vendored
Normal file
12
.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: [iamWing]
|
||||
patreon: # Replace with a single Patreon username
|
||||
open_collective: # Replace with a single Open Collective username
|
||||
ko_fi: # Replace with a single Ko-fi username
|
||||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
||||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: ['https://paypal.me/iamWing0w0']
|
||||
31
.gitignore
vendored
Normal file
31
.gitignore
vendored
Normal file
@ -0,0 +1,31 @@
|
||||
.vscode/
|
||||
coverage/
|
||||
dist/
|
||||
node_modules/
|
||||
out/
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Windows thumbnail cache files
|
||||
Thumbs.db
|
||||
|
||||
# OS X files
|
||||
.DS_Store
|
||||
._*
|
||||
165
CHANGELOG_PRE_V4.md
Normal file
165
CHANGELOG_PRE_V4.md
Normal file
@ -0,0 +1,165 @@
|
||||
# Changelog (pre `v4`)
|
||||
All notable changes up to `v3.0.0` are documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [3.0.0] - 2020-12-26
|
||||
### Added
|
||||
- NPM packages `react-router` & `react-router-dom` to package dependencies.
|
||||
- NPM package `eslint-plugin-react-hooks` to `devDependencies` as required by
|
||||
the updated version of `eslint-config-airbnb`.
|
||||
- NPM package `copy-webpack-plugin` to `devDependencies` as replacement of
|
||||
`copy-pkg-json-webpack-plugin`.
|
||||
- NPM packages `@typescript-eslint/eslint-plugin` & `@typescript-eslint/parser`
|
||||
to `devDependencies` for using ESLint to lint TypeScript.
|
||||
|
||||
### Changed
|
||||
- __Project is now being developed based on Node.js `v14 (LTS)`.__
|
||||
- Minor version upgrades on package dependencies:
|
||||
- `eslint-import-resolver-webpack` - `0.11.1` -> `0.13.0`
|
||||
- `eslint-plugin-import` - `2.18.2` -> `2.22.1`
|
||||
- `eslint-plugin-jsx-a11y` - `6.2.3` -> `6.4.1`
|
||||
- `eslint-plugin-react` - `7.17.0` -> ``7.21.5`
|
||||
- `lodash` - `4.17.15` -> `4.17.20`
|
||||
- Major version upgrades on package dependencies:
|
||||
- `react` & `react-dom` - `16.12.0` -> `17.0.1`
|
||||
- `cross-env` - `5.2.1` -> `7.0.3`
|
||||
- `css-loader` - `1.0.1` -> `5.0.1`
|
||||
- `electron` - `3.1.13` -> `11.1.1`
|
||||
- `electron-builder` - `20.44.4` -> `22.9.1`
|
||||
- `eslint` - `5.16.0` -> `7.16.0`
|
||||
- `eslint-config-airbnb` - `17.1.1` -> `18.2.1`
|
||||
- `file-loader` - `2.0.0` -> `6.2.0`
|
||||
- `html-webpack-plugin` - `3.2.0` -> `4.5.0`
|
||||
- `mocha` - `5.2.0` -> `8.2.1`
|
||||
- `rimraf` - `2.7.1` -> `3.0.2`
|
||||
- `source-map-loader` - `0.2.4` -> `2.0.0`
|
||||
- `spectron` - `5.0.0` -> `13.0.0`
|
||||
- `style-loader` - `0.23.1` -> `2.0.0`
|
||||
- `ts-loader` - `5.4.5` -> `8.0.12`
|
||||
- `ts-node` - `7.0.1` -> `9.1.1`
|
||||
- `typescript` - `3.7.2` - > `4.1.3`
|
||||
- `webpack` - `4.41.2` -> `5.11.0`
|
||||
- `webpack-cli` - `3.3.10` -> `4.3.0`
|
||||
- Moved `@types` packages from `dependencies` to `devDependencies` as those
|
||||
have no need to be included in production builds.
|
||||
- Commands of NPM scripts `dev` & `prod` to make them work with Webpack 5.
|
||||
- Migrated to ESLint from TSLint.
|
||||
- Updated prefix of internal paths from `@` to `_` to avoid confusions with
|
||||
scoped NPM packages.
|
||||
- Indentation for `.ts` files is now set as `2` spaces instead of `4`.
|
||||
- `electron-builder` settings:
|
||||
- `win`:
|
||||
- Enabled `asar`. _(turn it off if the executable built doesn't work)_
|
||||
- Disabled one click installer.
|
||||
- Allowed custom installation directory in the installer built.
|
||||
- `mac`:
|
||||
- Changed build target back to `dmg`.
|
||||
- `buildVersion` is now being used as build number instead of just another
|
||||
parameter for semantic version number.
|
||||
- Updated section `Known issues` in `README`.
|
||||
|
||||
### Fixed
|
||||
- ESLint errors/warnings on `main.ts` & `renderer.tsx`.
|
||||
- `electron-builder` fails to build `dmg` on `macOS` (issue
|
||||
[electron-builder #3990])by upgrading the package version to `> 21.2.0`.
|
||||
|
||||
### Removed
|
||||
- NPM package `copy-pkg-json-webpack-plugin` as it doesn't work with Webpack 5
|
||||
and seems not very well maintained.
|
||||
- NPM packages `acorn` & `ajv` from `devDependencies` as they're not being used
|
||||
in this boilerplate.
|
||||
- NPM packages `tslint` & `tslint-microsoft-contrib` as TSLint is now
|
||||
deprecated.
|
||||
|
||||
## [2.0.2] - 2019-12-02
|
||||
`v2.0.2` is a minor hotfix release fixed the documentation error and build
|
||||
error on `macOS Catalina(10.15+)`.
|
||||
|
||||
### Added
|
||||
- Extended README section `Getting started` with `npm start` command
|
||||
description.
|
||||
- README section `Known issue`.
|
||||
|
||||
### Changed
|
||||
- Minor version upgrades on package dependencies.
|
||||
- `macOS` build target to `pkg` from default `dmg` due to no 32-bit apps
|
||||
support from `macOS Catalina` that caused `electron-builder` fails to build
|
||||
`dmg` image on `macOS` prior to `electron-builder@21.2.0`.
|
||||
_`pkg` build is unaffected and is used as a workaround for the current version
|
||||
prior to the major version upgrades on dependencies in next release._
|
||||
_Related issue: [electron-builder #3990](https://github.com/electron-userland/electron-builder/issues/3990)_
|
||||
|
||||
### Fixed
|
||||
- [Issue #2] - incorrect command `npm run install` to `npm install` in `README`.
|
||||
|
||||
## [2.0.1] - 2018-02-05
|
||||
`v2.0.1` is a minor hotfix release patched the `NODE_ENV` not set on Windows
|
||||
issue.
|
||||
|
||||
### Added
|
||||
- Package `cross-env` as `devDependencies`.
|
||||
- README section "Author".
|
||||
|
||||
### Fixed
|
||||
- NPM scripts won't set environment variables on Windows issue.
|
||||
|
||||
## 2.0.0 - 2018-02-04
|
||||
`v2.0.0` is a major release that most part of the boilerplate has been rewritten.
|
||||
|
||||
### Added
|
||||
- ESLint for code checking on Javascript files.
|
||||
- Airbnb's extensible `.eslintrc` package & its' peer dependencies.
|
||||
- `.eslintrc` that extends Airbnb's config and has customised rules configured.
|
||||
- _Rule `no-default-export` is set for JavaScript files to align with
|
||||
TypeScript._
|
||||
- ESLint plugin `eslint-import-resolver-webpack` for ESLint to resolve path
|
||||
aliases set in Webpack config.
|
||||
- Webpack plugin `copy-pkg-json-webpack-plugin` to generate a `package.json`
|
||||
file and pack into Webpack's bundled package for production.
|
||||
- Build commands `build:mac` & `build:win` to package & build the installer of
|
||||
your Electron app for macOS & Windows using `electron-builder`.
|
||||
- README section "Building the installer for your Electron app" & sub-section
|
||||
"Extra options".
|
||||
|
||||
### Changed
|
||||
- Refactored Webpack config file to have `mainConfig` & `rendererConfig`
|
||||
cleaned up, and set mode by environment variable.
|
||||
- `.gitignore` to ignore folder `out/` which will be auto-generated during the
|
||||
build process.
|
||||
- README section "How does it work?" is now renamed to "Getting started" &
|
||||
completed the documentation of this section.
|
||||
- README section "Folder structure" to reflect the changes in `v2.0.0`.
|
||||
|
||||
### Fixed
|
||||
- CSS files fail to inject into views issue by setting Webpack to use
|
||||
`style-loader` alongside with `css-loader` to bundle the files in Webpack
|
||||
config file.
|
||||
- `baseUrl` in `tsconfig.json` points to root directory incorrectly issue.
|
||||
Corrected to current directory so VSCode can resolves the path aliases
|
||||
correctly.
|
||||
|
||||
### Removed
|
||||
- Redux & React-Redux related settings, including packages listed on
|
||||
`devDependencies`, path aliases & folders listed in folder structure.
|
||||
- Since Electron's built-in IPC & basic React states should be enough to get
|
||||
the works done, and most Electron apps which have their application logic
|
||||
runs on Electron's `main` process rather then `renderer` process actually
|
||||
don't need React-Redux, `redux` & `react-redux` are no longer included in
|
||||
this boilerplate.
|
||||
- Redux & React-Redux can still be used on this boilerplate by installing the
|
||||
package yourself. For details, please refer to the corresponding library's
|
||||
documents, there's no different than working on any other project which
|
||||
isn't based on this boilerplate.
|
||||
- Separated Webpack config files for `development` & `production` mode.
|
||||
|
||||
[Unreleased]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v3.0.0...HEAD
|
||||
[2.0.1]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.0...v2.0.1
|
||||
[2.0.2]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.1...v2.0.2
|
||||
[3.0.0]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v2.0.2...v3.0.0
|
||||
|
||||
[Issue #2]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues/2
|
||||
[electron-builder #3990]: https://github.com/electron-userland/electron-builder/issues/3990
|
||||
91
CHANGELOG_V4+.md
Normal file
91
CHANGELOG_V4+.md
Normal file
@ -0,0 +1,91 @@
|
||||
# Changelog `v4+`
|
||||
All notable changes to this project on `v4+` will be documented in this file.
|
||||
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [v4.0.0] - 2022-07-22
|
||||
### Added
|
||||
- Jest as default unit testing framework, with sample test suite for `main`.
|
||||
- Integrated Electron preload pattern.
|
||||
- NPM scripts:
|
||||
- `watch-test` to run Jest in watch mode.
|
||||
- `next-rc`, `next-patch`, `next-minor` & `next-major` for quick
|
||||
package version number advance.
|
||||
|
||||
### Changed
|
||||
- Webpack will now take the module path alias from `tsconfig.json` and set it
|
||||
for you thanks to `tsconfig-paths-webpack-plugin`. Manually set up in Webpack
|
||||
config is no longer needed.
|
||||
- `tsconfig` now configured to use `ES2020` features, with module resolution
|
||||
set to `Node16` to match the NodeJS version used by Electron.
|
||||
- Migrated to the new `createRoot` API introduced in React `v18`.
|
||||
- Some APIs changed in Electron `main` entry script:
|
||||
- `mainWindow` now use `loadFile` API instead of `loadURL`.
|
||||
- Replaced `app.on('ready')` with `app.whenReady()` to align with syntax from
|
||||
[Electron official quick start guide](https://www.electronjs.org/docs/latest/tutorial/quick-start).
|
||||
- `electron-builder` now configured to build `universal` `dmg` for mac, 32 &
|
||||
64 bit `exe` for Windows.
|
||||
- Moved `electron-builder`, Webpack & Webpack-related packages to
|
||||
`optionalDependencies`.
|
||||
- Revamped `README`.
|
||||
- __*Starting from this version, the maintenance schedule will be on a monthly
|
||||
update basis to keep the package dependencies up to date and keep the
|
||||
development going.*__
|
||||
|
||||
### Fixed
|
||||
- Allow to use `import default` statement on non ES modules (e.g. React,
|
||||
lodash) by enabling `esModuleInterop` in `tsconfig`.
|
||||
[#14](https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues/14)
|
||||
|
||||
### Removed
|
||||
- Mocha in favour of Jest.
|
||||
- Spectron as it ahs been deprecated.
|
||||
*See - [Spectron Deprecation Notice](https://www.electronjs.org/blog/spectron-deprecation-notice)*
|
||||
|
||||
### Updates on package dependencies
|
||||
### Added
|
||||
- `@types/jest`, `jest`, `ts-jest`, `eslint-plugin-jest` *- Jest support*
|
||||
- `eslint-config-airbnb-typescript` *- Enhance Airbnb's rules in TypeScript*
|
||||
- `ts-config-paths-webpack-plugin` *- Load `tsconfig` path alias into Webpack
|
||||
config*
|
||||
|
||||
### Updated
|
||||
- Major version updates:
|
||||
- `react` & `react-dom` - `17.0.1` -> `18.2.0`
|
||||
- `@types/react` - `17.0.0` -> `18.0.15`
|
||||
- `@types/react-dom` - `17.0.0` -> `18.0.6`
|
||||
- `@typescript-eslint/eslint-plugin` & `@typescript-eslint/parser` -
|
||||
`4.11.0` -> `5.30.7`
|
||||
- `electron` - `11.1.1` -> `19.0.9`
|
||||
- `eslint-config-airbnb` - `18.2.1` -> `19.0.4`
|
||||
- `copy-webpack-plugin` - `7.0.0` -> `11.0.0`
|
||||
- `css-loader` - `5.0.1` -> `6.7.1`
|
||||
- `electron-builder` - `22.9.1` -> `23.1.0`
|
||||
- `html-webpack-plugin` - `4.5.0` -> `5.5.0`
|
||||
- `style-loader` - `2.0.0` -> `3.3.1`
|
||||
- `ts-loader` - `8.0.12` -> `9.3.1`
|
||||
- `ts-config-paths` - `3.9.0` -> `4.0.0`
|
||||
- Minor & patch version updates:
|
||||
- `eslint-import-resolver-webpack` - `0.13.0` -> `0.13.2`
|
||||
- `eslint-plugin-import` - `2.22.1` -> `2.26.0`
|
||||
- `eslint-plugin-jsx-a11y` - `6.4.1` -> `6.6.1`
|
||||
- `eslint-plugin-react` - `7.21.5` -> `7.30.1`
|
||||
- `eslint-plugin-react-hoots` - `4.2.0` -> `4.6.0`
|
||||
- `lodash` - `4.17.20` -> `4.17.21`
|
||||
- `webpack` - `5.11.0` -> `5.73.0`
|
||||
- `webpack-cli` - `4.3.0` -> `4.10.0`
|
||||
|
||||
### Removed
|
||||
- `react-router`, `react-router-dom`, `@types/react-router`,
|
||||
`@types/react-router-dom`
|
||||
|
||||
*\- Not being used in any part of the boilerplate*
|
||||
- `@types/mocha`, `mocha`, `ts-node` *- Replaced by `@types/jest`, `jest` &
|
||||
`ts-jest`*
|
||||
- `spectron` *- Deprecated package; No replacement*
|
||||
|
||||
[Unreleased]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v4.0.0...HEAD
|
||||
[v4.0.0]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare/v3.0.0...v4.0.0
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 Devtography
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
275
README.md
Normal file
275
README.md
Normal file
@ -0,0 +1,275 @@
|
||||
# Electron-React-TypeScript-Webpack-Boilerplate
|
||||
A boilerplate that let you instantly start working on your next [Electron] app
|
||||
in [TypeScript] with no time wasted messing with the config files.
|
||||
|
||||
- Ready to use [Electron] project template with [React], [Webpack] and
|
||||
[TypeScript] seamlessly integrated.
|
||||
- [ESLint] set up with TypeScript, Airbnb's rules, and [Jest] support.
|
||||
- [Jest] integrated and configured.
|
||||
- [`electron-builder`] for app packaging, with basic build config for Windows
|
||||
macOS included.
|
||||
- Clean, easy to read and alter config files. No config file is hidden behind
|
||||
yet another script!
|
||||
- Monthly maintenance to keep things up to date!
|
||||
|
||||
*This boilerplate is tested on the latest macOS and Windows. If anything
|
||||
doesn't work, please [file an issue].*
|
||||
|
||||
### Maintenance schedule
|
||||
Starting from `v4.0.0`, the project maintenance will become much more regular.
|
||||
A new release will be published on a monthly basis to keep the package
|
||||
dependencies, package configurations and APIs / syntax up to date.
|
||||
|
||||
Maintenance work will begin on 1st of each month, and expect the new version to
|
||||
be released within the first week of the month. New features from different
|
||||
tools integrated in this boilerplate might not always be implemented at once,
|
||||
especially on experimental features. If you want any particular feature to be
|
||||
implemented, please [file an issue], or consider make a [new pull request].
|
||||
|
||||
### Development plan
|
||||
- [ ] Create a `create-react-app`-like package initialiser __!!!__
|
||||
- [ ] Integrate another end-to-end testing framework to replace [Spectron]
|
||||
- [ ] Migrate to Webpack 5 `Asset Modules`
|
||||
|
||||
---
|
||||
|
||||
## 🚨 🚧 CAUTION 🚧 🚨
|
||||
- [Spectron] has officially been deprecated by the [Electron] team on
|
||||
February 1, 2022, thus, its' integration has also been dropped from this
|
||||
boilerplate on `v4+`.
|
||||
|
||||
A replacement will be integrated in future version (pending for `v5`).
|
||||
Currently evaluating different options including [Playwright] and
|
||||
[WebdriverIO].
|
||||
|
||||
*See - [Spectron Deprecation Notice]*
|
||||
|
||||
- `mocha` has been dropped and replaced by [Jest] on `v4+`. If you're using
|
||||
`mocha` as your unit testing framework, please reference to `package.json`
|
||||
from [`v3.0.0`].
|
||||
|
||||
---
|
||||
|
||||
## Getting started
|
||||
1. Clone this repository, or if you're hosting your Electron project on GitHub,
|
||||
click [`Use this template`] to create a new project.
|
||||
|
||||
2. Edit the following fields in `package.json` for your own project:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "your-project-name",
|
||||
"version": "whatever-you-like",
|
||||
"description": "your-own-description",
|
||||
"build": {
|
||||
"appId": "your-app-id",
|
||||
"productName": "your-product-name",
|
||||
"buildVersion": "your-build-number"
|
||||
},
|
||||
"author": "who's-the-author?",
|
||||
"license": "if-you-don't-want-to-use-MIT",
|
||||
"repository": "type-and-link-of-your-repo",
|
||||
"bugs": "issue-page-of-your-repo",
|
||||
"homepage": "homepage-of-your-repo"
|
||||
}
|
||||
```
|
||||
|
||||
3. `npm install` to install the dependencies.
|
||||
|
||||
*Please note that `optionalDependencies` should only be omitted on your
|
||||
CI/CD pipeline for unit testing. It's meant to save some bandwidth. You'll
|
||||
need all the packages listed for development.*
|
||||
|
||||
Done! Now run `npm run dev` to start the Webpack in development and watch mode.
|
||||
It's time to start working on your project.
|
||||
|
||||
Be aware that starting Webpack will only compile your files to `dist` folder
|
||||
but won't start the Electron app. Use `npm start` command to start your
|
||||
Electron app once the files are compiled.
|
||||
|
||||
__*Starting from `v4.0.0`, you no longer need to manually config your module
|
||||
path alias in `webpack.config.js`. All module path alias set in `tsconfig.json`
|
||||
will be configured in Webpack automatically thanks to [`tsconfig-paths`] and
|
||||
[`tsconfig-paths-webpack-plugin`].*__
|
||||
|
||||
## Build your Electron app package
|
||||
Different from the official [Electron quick start guide], this boilerplate uses
|
||||
[`electron-builder`] instead of [Electron Forge] to package your Electron app.
|
||||
|
||||
By default, the build configuration in `package.json` is configured to build the
|
||||
mac universal package (for Apple Silicon & Intel based machines) and Windows
|
||||
`exe` installer (both 32 & 64 bit). You should not need to change anything in
|
||||
the build script other than supplying the app icon unless you need to sign your
|
||||
code/package or build for Linux.
|
||||
|
||||
For code signing and notarization, or to build for Linux, please read
|
||||
[`electron-builder`'s document] for configuring the build script.
|
||||
|
||||
To package your Electron app, run `npm run prod` to get your code compiled in
|
||||
`production` mode, then use `npm run build:(win|mac)` to build the package.
|
||||
|
||||
## Known issues
|
||||
- [`electron-builder`] packages the file into Electron's `asar` archive format
|
||||
by default. Based on past experiences with old Electron & `electron-builder`
|
||||
versions, this might lead to runtime error on Windows while launching the
|
||||
installed Electron app.
|
||||
|
||||
One way to verify this issue is to build the mac package and see if your app
|
||||
runs fine on mac. If it's the case, you can override the `asar` archive
|
||||
option in the build configuration in `package.json` by adding `asar: false`
|
||||
in `win` section.
|
||||
|
||||
This solution isn't ideal but since `asar` archiving is
|
||||
meant to improve performance of reading files if bundler like Webpack is not
|
||||
being used. The app packaging workflow defined in this boilerplate already
|
||||
uses Webpack to minify your code in `production` builds, so there shouldn't
|
||||
be any significant performance different with `asar` archiving disabled.
|
||||
|
||||
## Project folders & files
|
||||
- `dist/` - [Webpack] output location
|
||||
|
||||
__Contents will be flushed automatically on execution of `npm run <dev|prod>`
|
||||
script.__
|
||||
|
||||
- `out/` - [`electron-builder`] output location
|
||||
|
||||
- `public/` - Global static assets.
|
||||
- `index.html` - Template for `HTML Webpack Plugin`
|
||||
|
||||
Update the value of `<title>` tag to change the default window title.
|
||||
|
||||
- `style.css` - `CSS` file location sample
|
||||
|
||||
Not much defined in this file. You can either put your `CSS` settings here
|
||||
or use any other tools you prefer.
|
||||
|
||||
- `src/` - Folder for all your source code
|
||||
- `main/` - For modules which run on the `main` process.
|
||||
- `main.ts` - [Electron] `main` process entry point
|
||||
|
||||
- `preload` - Preload scripts go here
|
||||
- `ipc-api.ts` - APIs for IPC between `main` & `renderer`
|
||||
|
||||
Consider convert this module into a collection of submodules if you have
|
||||
many APIs for IPC. See example as below:
|
||||
```ts
|
||||
// ipc-api/index.ts
|
||||
import submoduleA from './submodule-a';
|
||||
import submoduleB from './submodule-b';
|
||||
|
||||
export default { ...submoduleA, ...submoduleB };
|
||||
|
||||
// ipc-api/submodule-a.ts
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
function a { ipcRenderer.send('a'); }
|
||||
|
||||
export default { a };
|
||||
|
||||
// ipc-api/submodule-b.ts
|
||||
import { ipcRenderer } from 'electron';
|
||||
|
||||
function b { ipcRenderer.send('b'); }
|
||||
|
||||
export default { b };
|
||||
```
|
||||
|
||||
- `preload.ts` - [Electron] preload script entry point
|
||||
|
||||
There should be no need to modify this file unless you want to use other
|
||||
key(s) for your IPC APIs. By default, all APIs defined in `ipc-api`
|
||||
module are exposed under key `ipcApi` in `contextBridge`.
|
||||
|
||||
- `renderer/` - Where the frontend scripts stay
|
||||
- `App.tsx` - Root [React] component
|
||||
- `renderer.tsx` - [Electron] `renderer` process entry point
|
||||
|
||||
*`public/style.css` imported here. Change it if you want.*
|
||||
|
||||
- `types/` - Home for self-defined `.d.ts` files
|
||||
- `global.d.ts` - Extends global scope interfaces
|
||||
|
||||
This file includes ambient declaration for calling the IPC APIs defined in
|
||||
`preload/ipc-api` from the `renderer`. Remember __NOT__ to remove this
|
||||
part, otherwise TypeScript will tell you `type not exist`. However, if
|
||||
you've opted to use a different key other than `ipcAPI` in the preload
|
||||
script, __DO__ remember to update this file to match your own settings.
|
||||
|
||||
- `utils/` - Place to store the helper scripts
|
||||
- `node-env.ts` - Shortcut to determine `NODE` environment
|
||||
|
||||
- `tests/` - Unit testing files location
|
||||
|
||||
To avoid test files mixing up with the source code, [Jest] is configured to
|
||||
look for test file(s) within this folder only.
|
||||
|
||||
File name of the test files can either be `[filename].test.tsx` or
|
||||
`[filename].spec.ts(x)`. `js(x)` can also be used for test files, but I assume
|
||||
you'd use TypeScript if you're using this boilerplate.
|
||||
|
||||
- `main/main.spec.ts` - Sample test file for `src/main/main`
|
||||
- `tsconfig.json` - TypeScript config file for `tests` module
|
||||
- `.eslintignore` - [ESLint] ignore file
|
||||
- `.eslintrc` - [ESLint] config file
|
||||
|
||||
Configured to use Airbnb's rules with [TypeScript] supported, and rules for
|
||||
[Jest] applied.
|
||||
|
||||
- `.gitignore` - Git ignore file
|
||||
- `CHANGELOG_PRE_V4.md` - Changelog of this boilerplate prior to `v4.0.0`
|
||||
- `CHANGELOG_V4+.md` - Changelog of this boilerplate from `v4.0.0` onwards
|
||||
- `jest.config.js` - [Jest] config file
|
||||
- `LICENSE` - MIT license
|
||||
- `package-lock.json`
|
||||
- `package.json`
|
||||
|
||||
Includes basic build config for `electron-builder`. It's likely that you'll
|
||||
have to personalise the build config when it comes to the time you're about
|
||||
to release your app. Please read [`electron-builder`'s document] for the
|
||||
build config setup guides.
|
||||
|
||||
- `README.md`
|
||||
- `tsconfig.json` - [TypeScript] config file
|
||||
|
||||
Module path aliases are configured here. [Jest] & [Webpack] will pick up the
|
||||
alias settings here to config their own. No need to manually config in Jest
|
||||
& Webpack again.
|
||||
|
||||
- `webpack.config.json` - [Webpack] config file
|
||||
|
||||
Includes configurations targetting `electron-main`, `electron-preload`, and
|
||||
`electron-renderer` respectively.
|
||||
|
||||
## Author
|
||||
[Wing Chau](https://github.com/iamWing) [@Devtography](https://github.com/Devtography)
|
||||
|
||||
## Donation
|
||||
Maintaining this project takes time, lots of cups of coffee, and I do it for
|
||||
free. Consider buy me coffee via [donations]. 100% of donation will fund my
|
||||
coffee buying budget for quality coffee beans from great roasters I know 😉 ☕️️
|
||||
|
||||
## License
|
||||
Electron React TypeScript Webpack Boilerplate is open source software
|
||||
[licensed as MIT](LICENSE).
|
||||
|
||||
[Electron]: https://www.electronjs.org
|
||||
[React]: https://reactjs.org
|
||||
[Webpack]: https://webpack.js.org
|
||||
[TypeScript]: https://www.typescriptlang.org
|
||||
[ESLint]: http://eslint.org
|
||||
[Jest]: https://jestjs.io
|
||||
[`electron-builder`]: https://github.com/electron-userland/electron-builder
|
||||
[file an issue]: https://www.electronjs.org
|
||||
[new pull request]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/compare
|
||||
[Spectron]: https://github.com/electron-userland/spectron
|
||||
[Playwright]: https://playwright.dev
|
||||
[WebdriverIO]: https://webdriver.io
|
||||
[Spectron Deprecation Notice]: https://www.electronjs.org/blog/spectron-deprecation-notice
|
||||
[`v3.0.0`]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/releases/tag/v3.0.0
|
||||
[`Use this template`]: https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/generate
|
||||
[`tsconfig-paths`]: https://github.com/dividab/tsconfig-paths
|
||||
[`tsconfig-paths-webpack-plugin`]: https://github.com/dividab/tsconfig-paths-webpack-plugin
|
||||
[Electron quick start guide]: https://www.electronjs.org/docs/latest/tutorial/quick-start
|
||||
[Electron Forge]: https://github.com/electron-userland/electron-forge
|
||||
[`electron-builder`'s document]: https://www.electron.build
|
||||
[donations]: https://github.com/sponsors/iamWing
|
||||
30
jest.config.js
Normal file
30
jest.config.js
Normal file
@ -0,0 +1,30 @@
|
||||
const { pathsToModuleNameMapper } = require('ts-jest')
|
||||
const { compilerOptions } = require('./tsconfig.json')
|
||||
|
||||
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
|
||||
module.exports = config = {
|
||||
testEnvironment: 'node',
|
||||
globals: {
|
||||
'ts-jest': {
|
||||
tsconfig: 'tsconfig.json',
|
||||
},
|
||||
},
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
|
||||
moduleNameMapper: pathsToModuleNameMapper(
|
||||
compilerOptions.paths,
|
||||
{ prefix: '<rootDir>/' },
|
||||
),
|
||||
modulePathIgnorePatterns: [
|
||||
'<rootDir>/dist',
|
||||
'<rootDir>/node_modules',
|
||||
'<rootDir>/out',
|
||||
],
|
||||
transform: {
|
||||
'^.+\\.(ts|tsx)$': 'ts-jest',
|
||||
},
|
||||
testMatch: [
|
||||
'**/tests/**/*.(spec|test).(ts?(x)|js?(x))',
|
||||
],
|
||||
collectCoverage: true,
|
||||
verbose: true,
|
||||
};
|
||||
89
package.json
Normal file
89
package.json
Normal file
@ -0,0 +1,89 @@
|
||||
{
|
||||
"name": "electron-react-typescript-webpack-boilerplate",
|
||||
"version": "4.0.0",
|
||||
"description": "Pre-configured boilerplate for Electron + React + TypeScript",
|
||||
"main": "./dist/main.bundle.js",
|
||||
"scripts": {
|
||||
"start": "electron ./dist/main.bundle.js",
|
||||
"webpack:dev": "rimraf dist && cross-env NODE_ENV=development webpack --watch --progress --color",
|
||||
"prod": "rimraf dist && cross-env NODE_ENV=production webpack --progress --color",
|
||||
"test": "cross-env NODE_ENV=test jest",
|
||||
"watch-test": "npm run test -- --watchAll",
|
||||
"next-rc": "npm --no-git-tag-version version prerelease --preid=rc",
|
||||
"next-patch": "npm --no-git-tag-version version patch",
|
||||
"next-minor": "npm --no-git-tag-version version minor",
|
||||
"next-major": "npm --no-git-tag-version version major",
|
||||
"build:win": "electron-builder build --win",
|
||||
"build:mac": "electron-builder build --mac"
|
||||
},
|
||||
"build": {
|
||||
"appId": "com.devtography.electron_boilerplate",
|
||||
"productName": "Electron+React+TypeScript Boilerplate",
|
||||
"directories": {
|
||||
"app": "./dist/",
|
||||
"output": "./out/"
|
||||
},
|
||||
"mac": {
|
||||
"target": {
|
||||
"target": "dmg",
|
||||
"arch": "universal"
|
||||
}
|
||||
},
|
||||
"win": {
|
||||
"target": {
|
||||
"target": "nsis",
|
||||
"arch": [
|
||||
"x64",
|
||||
"ia32"
|
||||
]
|
||||
}
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"allowToChangeInstallationDirectory": true
|
||||
},
|
||||
"buildVersion": "1"
|
||||
},
|
||||
"author": "Wing Chau @Devtography",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tensorflow/tfjs": "^3.19.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-dropzone": "^14.2.2",
|
||||
"upscaler": "^1.0.0-beta.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jest": "^28.1.6",
|
||||
"@types/react": "^18.0.15",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"electron": "^19.0.9",
|
||||
"jest": "^28.1.3",
|
||||
"ts-jest": "^28.0.7",
|
||||
"typescript": "^4.7.4"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"electron-builder": "^23.1.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"lodash": "^4.17.21",
|
||||
"rimraf": "^3.0.2",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-loader": "^9.3.1",
|
||||
"tsconfig-paths": "^4.0.0",
|
||||
"tsconfig-paths-webpack-plugin": "^3.5.2",
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-cli": "^4.10.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Devtography/electron-react-typescript-webpack-boilerplate"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/Devtography/electron-react-typescript-webpack-boilerplate/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Devtography/electron-react-typescript-webpack-boilerplate#readme"
|
||||
}
|
||||
13
public/index.html
Normal file
13
public/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hello World!</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" class="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3
public/style.css
Normal file
3
public/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
.app {
|
||||
color: grey;
|
||||
}
|
||||
68
src/main/main.ts
Normal file
68
src/main/main.ts
Normal file
@ -0,0 +1,68 @@
|
||||
/**
|
||||
* Entry point of the Election app.
|
||||
*/
|
||||
import * as path from "path";
|
||||
import * as nodeEnv from "_utils/node-env";
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { BrowserWindow, app, ipcMain } from "electron";
|
||||
|
||||
let mainWindow: Electron.BrowserWindow | undefined;
|
||||
|
||||
function createWindow() {
|
||||
// Create the browser window.
|
||||
mainWindow = new BrowserWindow({
|
||||
height: 600,
|
||||
width: 800,
|
||||
webPreferences: {
|
||||
devTools: nodeEnv.dev,
|
||||
preload: path.join(__dirname, "./preload.bundle.js"),
|
||||
webSecurity: nodeEnv.prod,
|
||||
nodeIntegration: true,
|
||||
},
|
||||
});
|
||||
|
||||
// and load the index.html of the app.
|
||||
mainWindow.loadFile("index.html").finally(() => {
|
||||
/* no action */
|
||||
});
|
||||
|
||||
// Emitted when the window is closed.
|
||||
mainWindow.on("closed", () => {
|
||||
mainWindow = undefined;
|
||||
});
|
||||
}
|
||||
app.commandLine.appendSwitch("ignore-gpu-blacklist");
|
||||
app
|
||||
.whenReady()
|
||||
.then(() => {
|
||||
if (nodeEnv.dev || nodeEnv.prod) createWindow();
|
||||
|
||||
app.on("activate", () => {
|
||||
if (BrowserWindow.getAllWindows.length === 0) createWindow();
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
/* no action */
|
||||
});
|
||||
|
||||
app.on("window-all-closed", () => {
|
||||
if (process.platform !== "darwin") app.quit();
|
||||
});
|
||||
|
||||
// const getUpscaledImage = async () => {
|
||||
// const file = fs.readFileSync(path.resolve(__dirname, "./image.png"));
|
||||
// const image = tf.node.decodeImage(file, 3);
|
||||
// const tensor = await upscaler.upscale(image, {
|
||||
// output: "tensor",
|
||||
// patchSize: 64,
|
||||
// padding: 6,
|
||||
// });
|
||||
// image.dispose();
|
||||
// const upscaledTensor = await tf.node.encodePng(tensor);
|
||||
// tensor.dispose();
|
||||
// return upscaledTensor;
|
||||
// };
|
||||
|
||||
ipcMain.on("hello", async () => {});
|
||||
|
||||
export const exportedForTests = nodeEnv.test ? { createWindow } : undefined;
|
||||
4
src/preload/preload.ts
Normal file
4
src/preload/preload.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { contextBridge } from "electron";
|
||||
import { ipcRenderer } from "electron";
|
||||
|
||||
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer);
|
||||
121
src/renderer/App.css
Normal file
121
src/renderer/App.css
Normal file
@ -0,0 +1,121 @@
|
||||
body {
|
||||
padding: 40px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
display: flex;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#root {
|
||||
display: flex;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
cursor: move; /* fallback if grab cursor is unsupported */
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 40px;
|
||||
border: 5px dotted #ddd;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.app {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.original-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.original img {
|
||||
transition-duration: 1.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #ddd;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
button:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
border-right: none;
|
||||
}
|
||||
button:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background: #c4c4ff;
|
||||
}
|
||||
|
||||
.display {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.display .image-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.display .scaled-up img {
|
||||
display: block;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
.dragOverlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dragger {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
position: absolute;
|
||||
transform: translate(50px 0);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
}
|
||||
.interpolation {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
182
src/renderer/App.tsx
Normal file
182
src/renderer/App.tsx
Normal file
@ -0,0 +1,182 @@
|
||||
import Upscaler from "upscaler";
|
||||
import React, { useCallback, useState, useEffect, useRef } from "react";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import "./App.css";
|
||||
|
||||
const upscaler = new Upscaler();
|
||||
function App() {
|
||||
const [src, setSrc] = useState<string>();
|
||||
const [originalSize, setOriginalSize] = useState({ width: 0, height: 0 });
|
||||
const [scale, setScale] = useState(1);
|
||||
const [interpolation, setInterpolation] = useState("bicubic");
|
||||
const [upscaledImageSrc, setUpscaledImageSrc] = useState<string>();
|
||||
const [displayUpscaledImageSrc, setDisplayUpscaledImageSrc] = useState(false);
|
||||
const [dragX, setDragX] = useState(0.5);
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const container = useRef<HTMLDivElement>();
|
||||
const onDrop = useCallback((acceptedFiles) => {
|
||||
const file = acceptedFiles[0];
|
||||
const fr = new FileReader();
|
||||
fr.onload = async () => {
|
||||
setSrc(fr.result as string);
|
||||
};
|
||||
fr.readAsDataURL(file);
|
||||
}, []);
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
|
||||
useEffect(() => {
|
||||
if (src) {
|
||||
const img = new Image();
|
||||
img.crossOrigin = "anonymous";
|
||||
img.src = src;
|
||||
img.onload = () => {
|
||||
upscaler.upscale(img).then(setUpscaledImageSrc);
|
||||
const width = img.width;
|
||||
const height = img.height;
|
||||
setOriginalSize({
|
||||
width,
|
||||
height,
|
||||
});
|
||||
};
|
||||
}
|
||||
}, [src]);
|
||||
|
||||
useEffect(() => {
|
||||
if (originalSize) {
|
||||
let upscaledImageSrcTimer;
|
||||
const timer = setTimeout(() => {
|
||||
setScale(3);
|
||||
upscaledImageSrcTimer = setTimeout(() => {
|
||||
setDisplayUpscaledImageSrc(true);
|
||||
}, 1200);
|
||||
}, 300);
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
clearTimeout(upscaledImageSrcTimer);
|
||||
};
|
||||
}
|
||||
}, [originalSize]);
|
||||
|
||||
const startDragging = () => {
|
||||
setDragging(true);
|
||||
};
|
||||
|
||||
const drag = (e) => {
|
||||
if (dragging) {
|
||||
const offsetWidth = container.current.offsetWidth;
|
||||
const x = e.clientX - (window.innerWidth - offsetWidth) / 2 - 10;
|
||||
setDragX(x / offsetWidth);
|
||||
}
|
||||
};
|
||||
|
||||
const stopDragging = () => {
|
||||
console.log("stop");
|
||||
setDragging(false);
|
||||
};
|
||||
|
||||
if (src) {
|
||||
const left = dragX * 100;
|
||||
return (
|
||||
<div
|
||||
className="original-image"
|
||||
style={{
|
||||
width: originalSize ? originalSize.width * scale : null,
|
||||
}}
|
||||
>
|
||||
<div className="header">
|
||||
{displayUpscaledImageSrc && (
|
||||
<>
|
||||
<div className="interpolation">
|
||||
<button
|
||||
className={interpolation === "none" ? "active" : null}
|
||||
onClick={() => setInterpolation("none")}
|
||||
>
|
||||
None
|
||||
</button>
|
||||
<button
|
||||
className={interpolation === "bicubic" ? "active" : null}
|
||||
onClick={() => setInterpolation("bicubic")}
|
||||
>
|
||||
Bicubic interpolation
|
||||
</button>
|
||||
</div>
|
||||
<div>Upscaled image</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="display"
|
||||
style={{
|
||||
width: originalSize ? originalSize.width * scale : null,
|
||||
height: originalSize ? originalSize.height * scale : null,
|
||||
}}
|
||||
>
|
||||
{displayUpscaledImageSrc && (
|
||||
<div
|
||||
className="dragOverlay"
|
||||
ref={container}
|
||||
onMouseMove={drag}
|
||||
onMouseUp={stopDragging}
|
||||
>
|
||||
<div
|
||||
className="dragger"
|
||||
onMouseDown={startDragging}
|
||||
style={{
|
||||
left: `calc(${left}%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="image-container original">
|
||||
<img
|
||||
src={src}
|
||||
alt="Original"
|
||||
width={originalSize ? originalSize.width * scale : null}
|
||||
style={{
|
||||
imageRendering: interpolation === "none" ? "pixelated" : null,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{displayUpscaledImageSrc && (
|
||||
<div
|
||||
className="image-container scaled-up"
|
||||
style={{
|
||||
width: `${100 - left}%`,
|
||||
left: `${left}%`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
left: ((originalSize.width * scale * left) / 100) * -1,
|
||||
}}
|
||||
alt="Upscaled"
|
||||
src={upscaledImageSrc}
|
||||
width={originalSize ? originalSize.width * scale : null}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{displayUpscaledImageSrc && <p>Resized to 3x</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dropzone" {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
{isDragActive ? (
|
||||
<p>Drop the files here ...</p>
|
||||
) : (
|
||||
<p>Drag 'n' drop some files here, or click to select files</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<div className="app">
|
||||
<h1>React Demo Integration</h1>
|
||||
<App />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
BIN
src/renderer/image.jpg
Normal file
BIN
src/renderer/image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
13
src/renderer/renderer.tsx
Normal file
13
src/renderer/renderer.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* React renderer.
|
||||
*/
|
||||
// Import the styles here to process them with webpack
|
||||
import "_public/style.css";
|
||||
|
||||
import App from "_renderer/App";
|
||||
import * as React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
const container = document.getElementById("app");
|
||||
const root = createRoot(container!);
|
||||
root.render(<App />);
|
||||
10
src/types/global.d.ts
vendored
Normal file
10
src/types/global.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
import { ipcRenderer } from "electron";
|
||||
declare global {
|
||||
interface Window {
|
||||
/** APIs for Electron IPC */
|
||||
ipcRenderer?: typeof ipcRenderer;
|
||||
}
|
||||
}
|
||||
|
||||
// Makes TS sees this as an external modules so we can extend the global scope.
|
||||
export {};
|
||||
12
src/utils/node-env.ts
Normal file
12
src/utils/node-env.ts
Normal file
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Predefined NODE_ENV values
|
||||
*/
|
||||
|
||||
/** `NODE_ENV=production` */
|
||||
export const prod = process.env.NODE_ENV === 'production';
|
||||
|
||||
/** `NODE_ENV=development` */
|
||||
export const dev = process.env.NODE_ENV === 'development';
|
||||
|
||||
/** `NODE_ENV=test` */
|
||||
export const test = process.env.NODE_ENV === 'test';
|
||||
25
tests/main/main.spec.ts
Normal file
25
tests/main/main.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { exportedForTests } from '_main/main';
|
||||
import { BrowserWindow } from 'electron';
|
||||
|
||||
jest.mock('electron', () => ({
|
||||
app: {
|
||||
on: jest.fn(),
|
||||
whenReady: jest.fn(() => Promise.resolve()),
|
||||
},
|
||||
ipcMain: { on: jest.fn() },
|
||||
BrowserWindow: jest.fn().mockImplementation(() => ({
|
||||
loadFile: jest.fn(() => Promise.resolve()),
|
||||
on: jest.fn(),
|
||||
})),
|
||||
}));
|
||||
|
||||
test('Private props exported for unit tests', () => {
|
||||
expect(exportedForTests).toBeDefined();
|
||||
});
|
||||
|
||||
test('func createWindow()', () => {
|
||||
const { createWindow } = exportedForTests!;
|
||||
|
||||
createWindow();
|
||||
expect(BrowserWindow).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
7
tests/tsconfig.json
Normal file
7
tests/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["./**/*"]
|
||||
}
|
||||
28
tsconfig.json
Normal file
28
tsconfig.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": false,
|
||||
"allowJs": true,
|
||||
"baseUrl": ".",
|
||||
"module": "ES2020",
|
||||
"moduleResolution": "Node16",
|
||||
|
||||
"noImplicitAny": false,
|
||||
"paths": {
|
||||
"_/*": ["src/*"],
|
||||
"_public/*": ["public/*"],
|
||||
"_main/*": ["src/main/*"],
|
||||
"_preload/*": ["src/preload/*"],
|
||||
"_renderer/*": ["src/renderer/*"],
|
||||
"_types/*": ["src/types/*"],
|
||||
"_utils/*": ["src/utils/*"],
|
||||
"_tests/*": ["tests/*"]
|
||||
},
|
||||
"typeRoots": ["./node_modules/@types", "./src/types"],
|
||||
"sourceMap": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react",
|
||||
"target": "ES2020"
|
||||
},
|
||||
"include": ["src/**/*", "tests/**/*"]
|
||||
}
|
||||
95
webpack.config.js
Normal file
95
webpack.config.js
Normal file
@ -0,0 +1,95 @@
|
||||
const lodash = require('lodash');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
|
||||
const path = require('path');
|
||||
|
||||
function srcPaths(src) {
|
||||
return path.join(__dirname, src);
|
||||
}
|
||||
|
||||
const isEnvProduction = process.env.NODE_ENV === 'production';
|
||||
const isEnvDevelopment = process.env.NODE_ENV === 'development';
|
||||
|
||||
// #region Common settings
|
||||
const commonConfig = {
|
||||
devtool: isEnvDevelopment ? 'source-map' : false,
|
||||
mode: isEnvProduction ? 'production' : 'development',
|
||||
output: { path: srcPaths('dist') },
|
||||
node: { __dirname: false, __filename: false },
|
||||
resolve: {
|
||||
extensions: ['.js', '.json', '.ts', '.tsx'],
|
||||
plugins: [new TsconfigPathsPlugin({
|
||||
configFile: './tsconfig.json',
|
||||
extensions: ['.js', '.json', '.ts', '.tsx'],
|
||||
})],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(ts|tsx)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'ts-loader',
|
||||
},
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.(jpg|png|svg|ico|icns)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[path][name].[ext]',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
// #endregion
|
||||
|
||||
const mainConfig = lodash.cloneDeep(commonConfig);
|
||||
mainConfig.entry = './src/main/main.ts';
|
||||
mainConfig.target = 'electron-main';
|
||||
mainConfig.output.filename = 'main.bundle.js';
|
||||
mainConfig.plugins = [
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: 'package.json',
|
||||
to: 'package.json',
|
||||
transform: (content, _path) => {
|
||||
const jsonContent = JSON.parse(content);
|
||||
const electronVersion = jsonContent.devDependencies.electron;
|
||||
|
||||
delete jsonContent.devDependencies;
|
||||
delete jsonContent.optionalDependencies;
|
||||
delete jsonContent.scripts;
|
||||
delete jsonContent.build;
|
||||
|
||||
jsonContent.main = './main.bundle.js';
|
||||
jsonContent.scripts = { start: 'electron ./main.bundle.js' };
|
||||
jsonContent.devDependencies = { electron: electronVersion }
|
||||
|
||||
return JSON.stringify(jsonContent, undefined, 2);
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
];
|
||||
|
||||
const preloadConfig = lodash.cloneDeep(commonConfig);
|
||||
preloadConfig.entry = './src/preload/preload.ts';
|
||||
preloadConfig.target = 'electron-preload';
|
||||
preloadConfig.output.filename = 'preload.bundle.js';
|
||||
|
||||
const rendererConfig = lodash.cloneDeep(commonConfig);
|
||||
rendererConfig.entry = './src/renderer/renderer.tsx';
|
||||
rendererConfig.target = 'electron-renderer';
|
||||
rendererConfig.output.filename = 'renderer.bundle.js';
|
||||
rendererConfig.plugins = [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.resolve(__dirname, './public/index.html'),
|
||||
}),
|
||||
];
|
||||
|
||||
module.exports = [mainConfig, preloadConfig, rendererConfig];
|
||||
Loading…
Reference in New Issue
Block a user