diff --git a/.babelrc b/.babelrc index cd99e001..9e8cac42 100644 --- a/.babelrc +++ b/.babelrc @@ -1,9 +1,7 @@ { - "presets": [ - "@babel/preset-typescript" - ], + "presets": ["@babel/preset-typescript"], "plugins": [ - "@babel/plugin-proposal-class-properties", - "@babel/plugin-proposal-object-rest-spread" + "@babel/plugin-transform-class-properties", + "@babel/plugin-transform-object-rest-spread" ] } diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..223cd160 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,9 @@ +node_modules +/pnpm-lock.yaml + +# nextron +bin +workspace + +# examples +examples diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..27a53c21 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,14 @@ +{ + "root": true, + "extends": [ + "eslint:recommended", + "next/core-web-vitals", + "plugin:@typescript-eslint/recommended", + "prettier" + ], + "plugins": ["@typescript-eslint"], + "rules": { + "@typescript-eslint/no-unused-vars": "error", + "@typescript-eslint/no-explicit-any": "error" + } +} diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 2f6fcafa..7f236679 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -9,14 +9,14 @@ # the `language` matrix defined below to confirm you have the correct set of # supported CodeQL languages. # -name: "CodeQL" +name: 'CodeQL' on: push: - branches: [ main ] + branches: [main] pull_request: # The branches below must be a subset of the branches above - branches: [ main ] + branches: [main] schedule: - cron: '45 21 * * 3' @@ -32,40 +32,40 @@ jobs: strategy: fail-fast: false matrix: - language: [ 'javascript' ] + language: ['javascript'] # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] # Learn more: # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed steps: - - name: Checkout repository - uses: actions/checkout@v2 + - name: Checkout repository + uses: actions/checkout@v2 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v1 - with: - languages: ${{ matrix.language }} - # If you wish to specify custom queries, you can do so here or in a config file. - # By default, queries listed here will override any specified in a config file. - # Prefix the list here with "+" to use these queries and those in the config file. - # queries: ./path/to/local/query, your-org/your-repo/queries@main + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + # queries: ./path/to/local/query, your-org/your-repo/queries@main - # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). - # If this step fails, then you should remove it and run the build manually (see below) - - name: Autobuild - uses: github/codeql-action/autobuild@v1 + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v1 - # ℹī¸ Command-line programs to run using the OS shell. - # 📚 https://git.io/JvXDl + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 https://git.io/JvXDl - # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines - # and modify them (or add more) to build your code if your project - # uses a compiled language + # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language - #- run: | - # make bootstrap - # make release + #- run: | + # make bootstrap + # make release - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v1 + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/.gitignore b/.gitignore index cc19e5b9..cad8dc21 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,15 @@ node_modules + +# nextron bin workspace + +# examples examples/**/yarn.lock examples/**/package-lock.json examples/**/pnpm-lock.yaml examples/**/renderer/next-env.d.ts + +# misc .idea .DS_Store diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..d24fdfc6 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npx lint-staged diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..6c59086d --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +enable-pre-post-scripts=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..223cd160 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,9 @@ +node_modules +/pnpm-lock.yaml + +# nextron +bin +workspace + +# examples +examples diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..555021be --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,7 @@ +{ + "semi": false, + "singleQuote": true, + "trailingComma": "es5", + "useTabs": false, + "tabWidth": 2 +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..fb21a8ba --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/README.md b/README.md index ae6c0775..23d2d599 100644 --- a/README.md +++ b/README.md @@ -138,9 +138,9 @@ module.exports = { // main process' webpack config webpack: (config, env) => { // do some stuff here - return config; + return config }, -}; +} ``` ## Custom Babel Config for the Main Process @@ -166,21 +166,21 @@ If we want to use some libraries that don't support SSR, we should check if the ```jsx // pages/home.jsx -import electron from 'electron'; +import electron from 'electron' const Home = () => { // we can't use `electron.ipcRenderer` directly! - const ipcRenderer = electron.ipcRenderer; + const ipcRenderer = electron.ipcRenderer // we should check it like this - const ipcRenderer = electron.ipcRenderer || false; + const ipcRenderer = electron.ipcRenderer || false if (ipcRenderer) { // we can use `electron.ipcRenderer` // because this scope is the client webpack process } -}; +} -export default Home; +export default Home ``` ### The Basic of React Hooks :) @@ -190,8 +190,8 @@ As mentioned above, we should check if the webpack process is a client because t ```jsx // pages/home.jsx -import electron from 'electron'; -import React from 'react'; +import electron from 'electron' +import React from 'react' const Home = () => { // In this scope, both of server and client processes are running @@ -201,17 +201,17 @@ const Home = () => { // componentDidMount() like // In this scope, only the client process is running - window.alert('wow'); + window.alert('wow') return () => { // componentWillUnmount() like - }; - }, []); + } + }, []) - return

Hello Nextron

; -}; + return

Hello Nextron

+} -export default Home; +export default Home ``` ## Examples @@ -403,18 +403,22 @@ $ pnpm dev ### Developing for your own project 1. Install development version of nextron + ``` $ cd nextron $ npm install $ npm run build -$ npm link +$ npm link ``` + 2. Install linked nextron in your project + ``` $ cd your-project $ npm install -D @babel/runtime-corejs3 # required for nextron $ npm link nextron ``` + 3. On every change in nextron, run `npm run build` in nextron folder and restart your project ## Maintainers ⚡ diff --git a/babel.js b/babel.js index 0daad6c5..0d2abdef 100644 --- a/babel.js +++ b/babel.js @@ -1,25 +1,34 @@ module.exports = (api) => { - api.cache(() => process.env.NODE_ENV === 'production'); + api.cache(() => process.env.NODE_ENV === 'production') return { presets: [ - [require('@babel/preset-env'), { - targets: { - node: true, + [ + require('@babel/preset-env'), + { + targets: { + node: true, + }, }, - }], + ], require('@babel/preset-typescript'), ], plugins: [ - require('@babel/plugin-proposal-class-properties'), - [require('@babel/plugin-proposal-object-rest-spread'), { - useBuiltIns: true, - }], - [require('@babel/plugin-transform-runtime'), { - corejs: 3, - helpers: true, - regenerator: true, - useESModules: false, - }], + require('@babel/plugin-transform-class-properties'), + [ + require('@babel/plugin-transform-object-rest-spread'), + { + useBuiltIns: true, + }, + ], + [ + require('@babel/plugin-transform-runtime'), + { + corejs: 3, + helpers: true, + regenerator: true, + useESModules: false, + }, + ], ], - }; -}; + } +} diff --git a/dev.js b/dev.js index 0ae08b7b..67a57582 100644 --- a/dev.js +++ b/dev.js @@ -1,65 +1,84 @@ -const fs = require('fs-extra'); -const path = require('path'); -const execa = require('execa'); -const chalk = require('chalk'); +/* eslint-disable @typescript-eslint/no-var-requires */ -const cwd = process.cwd(); +const fs = require('fs-extra') +const path = require('path') +const execa = require('execa') +const chalk = require('chalk') + +const cwd = process.cwd() async function detectPackageManager() { - let pm = 'yarn'; + let pm = 'yarn' try { - await execa(pm, ['-v']); + await execa(pm, ['-v']) } catch (_) { - pm = 'pnpm'; + pm = 'pnpm' try { - await execa(pm, ['-v']); + await execa(pm, ['-v']) } catch (_ignore) { - pm = 'npm'; + pm = 'npm' try { - await execa(pm, ['-v']); + await execa(pm, ['-v']) } catch (_) { - pm = undefined; + pm = undefined } } } if (pm === undefined) { - console.log(chalk.red('No available package manager! (`yarn`, `pnpm` or `npm` is needed)')); - process.exit(1); + console.log( + chalk.red( + 'No available package manager! (`yarn`, `pnpm` or `npm` is needed)' + ) + ) + process.exit(1) } - return pm; + return pm } -(async () => { - let example = 'basic-javascript'; +;(async () => { + let example = 'basic-javascript' if (3 <= process.argv.length) { - const newExample = process.argv[2]; + const newExample = process.argv[2] if (!fs.existsSync(path.join(cwd, `examples/${newExample}`))) { - console.log(chalk.red(`Not found examples/${newExample}`)); - console.log(''); - process.exit(1); + console.log(chalk.red(`Not found examples/${newExample}`)) + console.log('') + process.exit(1) } - example = newExample; + example = newExample } - await fs.remove('workspace'); + await fs.remove('workspace') - const ext = fs.existsSync(path.resolve(cwd, `examples/${example}/tsconfig.json`)) ? 'ts' : 'js'; - await fs.copy(path.resolve(cwd, `examples/_template/gitignore.txt`), path.join(cwd, 'workspace/.gitignore')); - await fs.copy(path.resolve(cwd, `examples/_template/${ext}`), path.join(cwd, 'workspace')); - await fs.copy(path.resolve(cwd, `examples/${example}`), path.join(cwd, 'workspace')); + const ext = fs.existsSync( + path.resolve(cwd, `examples/${example}/tsconfig.json`) + ) + ? 'ts' + : 'js' + await fs.copy( + path.resolve(cwd, `examples/_template/gitignore.txt`), + path.join(cwd, 'workspace/.gitignore') + ) + await fs.copy( + path.resolve(cwd, `examples/_template/${ext}`), + path.join(cwd, 'workspace') + ) + await fs.copy( + path.resolve(cwd, `examples/${example}`), + path.join(cwd, 'workspace') + ) - const pkg = path.join(cwd, 'workspace/package.json'); - const content = await fs.readJSON(pkg); - content.devDependencies.nextron = cwd; - await fs.writeJSON(pkg, {...content}, {spaces: 2}); + const pkg = path.join(cwd, 'workspace/package.json') + const content = await fs.readJSON(pkg) + content.devDependencies.nextron = cwd + await fs.writeJSON(pkg, { ...content }, { spaces: 2 }) - const pm = await detectPackageManager(); + const pm = await detectPackageManager() await execa(pm, ['install'], { cwd: path.join(cwd, 'workspace'), stdio: 'inherit', - }); + }) await execa(pm, ['run', 'dev'], { cwd: path.join(cwd, 'workspace'), stdio: 'inherit', - }); -})(); + }) +})() diff --git a/examples/basic-javascript/package.json b/examples/basic-javascript/package.json index 1ea035c7..7b207e04 100644 --- a/examples/basic-javascript/package.json +++ b/examples/basic-javascript/package.json @@ -18,7 +18,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/basic-javascript/renderer/next.config.js b/examples/basic-javascript/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/basic-javascript/renderer/next.config.js +++ b/examples/basic-javascript/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/basic-javascript/renderer/pages/home.jsx b/examples/basic-javascript/renderer/pages/home.jsx index 368c0133..dbee5ce8 100644 --- a/examples/basic-javascript/renderer/pages/home.jsx +++ b/examples/basic-javascript/renderer/pages/home.jsx @@ -1,6 +1,7 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import Image from 'next/image' function Home() { return ( @@ -15,10 +16,10 @@ function Home() { Go to next page

- + Logo image - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/basic-javascript/renderer/pages/next.jsx b/examples/basic-javascript/renderer/pages/next.jsx index b9f6ddb7..19bfc60f 100644 --- a/examples/basic-javascript/renderer/pages/next.jsx +++ b/examples/basic-javascript/renderer/pages/next.jsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' function Next() { return ( @@ -17,7 +17,7 @@ function Next() {

- ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/basic-typescript/package.json b/examples/basic-typescript/package.json index 13df892b..24a2e2b3 100644 --- a/examples/basic-typescript/package.json +++ b/examples/basic-typescript/package.json @@ -20,7 +20,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^4.9.4" diff --git a/examples/basic-typescript/renderer/next.config.js b/examples/basic-typescript/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/basic-typescript/renderer/next.config.js +++ b/examples/basic-typescript/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/basic-typescript/renderer/pages/home.tsx b/examples/basic-typescript/renderer/pages/home.tsx index 9bc9c554..48949b79 100644 --- a/examples/basic-typescript/renderer/pages/home.tsx +++ b/examples/basic-typescript/renderer/pages/home.tsx @@ -1,6 +1,7 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import Image from 'next/image' function Home() { return ( @@ -15,10 +16,10 @@ function Home() { Go to next page

- + Logo image - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/basic-typescript/renderer/pages/next.tsx b/examples/basic-typescript/renderer/pages/next.tsx index 165ed644..a57d1f83 100644 --- a/examples/basic-typescript/renderer/pages/next.tsx +++ b/examples/basic-typescript/renderer/pages/next.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' function Next() { return ( @@ -17,7 +17,7 @@ function Next() {

- ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/basic-typescript/renderer/tsconfig.json b/examples/basic-typescript/renderer/tsconfig.json index ec99364b..5271c238 100644 --- a/examples/basic-typescript/renderer/tsconfig.json +++ b/examples/basic-typescript/renderer/tsconfig.json @@ -1,11 +1,5 @@ { "extends": "../tsconfig.json", - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] } diff --git a/examples/basic-typescript/tsconfig.json b/examples/basic-typescript/tsconfig.json index 80757ea7..7e2d690e 100644 --- a/examples/basic-typescript/tsconfig.json +++ b/examples/basic-typescript/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -19,10 +15,5 @@ "isolatedModules": true, "jsx": "preserve" }, - "exclude": [ - "node_modules", - "renderer/next.config.js", - "app", - "dist" - ] + "exclude": ["node_modules", "renderer/next.config.js", "app", "dist"] } diff --git a/examples/custom-build-options/package.json b/examples/custom-build-options/package.json index e991b2a4..841421f3 100644 --- a/examples/custom-build-options/package.json +++ b/examples/custom-build-options/package.json @@ -24,7 +24,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/custom-build-options/renderer/next.config.js b/examples/custom-build-options/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/custom-build-options/renderer/next.config.js +++ b/examples/custom-build-options/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/custom-build-options/renderer/pages/home.jsx b/examples/custom-build-options/renderer/pages/home.jsx index 65a5e68b..e1a38661 100644 --- a/examples/custom-build-options/renderer/pages/home.jsx +++ b/examples/custom-build-options/renderer/pages/home.jsx @@ -1,6 +1,7 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import Image from 'next/image' function Home() { return ( @@ -15,10 +16,10 @@ function Home() { Go to next page

- + Logo image - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/custom-build-options/renderer/pages/next.jsx b/examples/custom-build-options/renderer/pages/next.jsx index 0728fac7..eef682e2 100644 --- a/examples/custom-build-options/renderer/pages/next.jsx +++ b/examples/custom-build-options/renderer/pages/next.jsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' function Next() { return ( @@ -17,7 +17,7 @@ function Next() {

- ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/custom-main-entry/main/app.js b/examples/custom-main-entry/main/app.js index 7a78a931..e14647a0 100644 --- a/examples/custom-main-entry/main/app.js +++ b/examples/custom-main-entry/main/app.js @@ -1 +1 @@ -import './background'; +import './background' diff --git a/examples/custom-main-entry/nextron.config.js b/examples/custom-main-entry/nextron.config.js index ab9684a6..d5893b1e 100644 --- a/examples/custom-main-entry/nextron.config.js +++ b/examples/custom-main-entry/nextron.config.js @@ -1,7 +1,8 @@ module.exports = { - webpack: (defaultConfig, env) => Object.assign(defaultConfig, { - entry: { - background: './main/app.js', - }, - }), -}; + webpack: (defaultConfig) => + Object.assign(defaultConfig, { + entry: { + background: './main/app.js', + }, + }), +} diff --git a/examples/custom-main-entry/package.json b/examples/custom-main-entry/package.json index 1ea035c7..7b207e04 100644 --- a/examples/custom-main-entry/package.json +++ b/examples/custom-main-entry/package.json @@ -18,7 +18,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/custom-main-entry/renderer/next.config.js b/examples/custom-main-entry/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/custom-main-entry/renderer/next.config.js +++ b/examples/custom-main-entry/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/custom-main-entry/renderer/pages/home.jsx b/examples/custom-main-entry/renderer/pages/home.jsx index 95fad915..4b7d423d 100644 --- a/examples/custom-main-entry/renderer/pages/home.jsx +++ b/examples/custom-main-entry/renderer/pages/home.jsx @@ -1,6 +1,7 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import Image from 'next/image' function Home() { return ( @@ -15,10 +16,10 @@ function Home() { Go to next page

- + Logo image - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/custom-main-entry/renderer/pages/next.jsx b/examples/custom-main-entry/renderer/pages/next.jsx index 3538692a..0c6170fb 100644 --- a/examples/custom-main-entry/renderer/pages/next.jsx +++ b/examples/custom-main-entry/renderer/pages/next.jsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' function Next() { return ( @@ -17,7 +17,7 @@ function Next() {

- ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/custom-renderer-port/package.json b/examples/custom-renderer-port/package.json index aa2afa87..ebabbcff 100644 --- a/examples/custom-renderer-port/package.json +++ b/examples/custom-renderer-port/package.json @@ -18,7 +18,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/custom-renderer-port/renderer/next.config.js b/examples/custom-renderer-port/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/custom-renderer-port/renderer/next.config.js +++ b/examples/custom-renderer-port/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/custom-renderer-port/renderer/pages/home.jsx b/examples/custom-renderer-port/renderer/pages/home.jsx index 5464de86..f819ddc9 100644 --- a/examples/custom-renderer-port/renderer/pages/home.jsx +++ b/examples/custom-renderer-port/renderer/pages/home.jsx @@ -1,6 +1,7 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import Image from 'next/image' function Home() { return ( @@ -15,10 +16,10 @@ function Home() { Go to next page

- + Logo image - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/custom-renderer-port/renderer/pages/next.jsx b/examples/custom-renderer-port/renderer/pages/next.jsx index 96921d43..20848f6a 100644 --- a/examples/custom-renderer-port/renderer/pages/next.jsx +++ b/examples/custom-renderer-port/renderer/pages/next.jsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' function Next() { return ( @@ -17,7 +17,7 @@ function Next() {

- ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/ipc-communication/main/background.js b/examples/ipc-communication/main/background.js index 27119779..ca2f7e83 100644 --- a/examples/ipc-communication/main/background.js +++ b/examples/ipc-communication/main/background.js @@ -1,40 +1,40 @@ -import { app, ipcMain } from 'electron'; -import serve from 'electron-serve'; -import { createWindow } from './helpers'; +import { app, ipcMain } from 'electron' +import serve from 'electron-serve' +import { createWindow } from './helpers' -const isProd = process.env.NODE_ENV === 'production'; +const isProd = process.env.NODE_ENV === 'production' if (isProd) { - serve({ directory: 'app' }); + serve({ directory: 'app' }) } else { - app.setPath('userData', `${app.getPath('userData')} (development)`); + app.setPath('userData', `${app.getPath('userData')} (development)`) } -(async () => { - await app.whenReady(); +;(async () => { + await app.whenReady() const mainWindow = createWindow('main', { width: 1000, height: 600, - }); + }) if (isProd) { - await mainWindow.loadURL('app://./home.html'); + await mainWindow.loadURL('app://./home.html') } else { - const port = process.argv[2]; - await mainWindow.loadURL(`http://localhost:${port}/home`); - mainWindow.webContents.openDevTools(); + const port = process.argv[2] + await mainWindow.loadURL(`http://localhost:${port}/home`) + mainWindow.webContents.openDevTools() } -})(); +})() app.on('window-all-closed', () => { - app.quit(); -}); + app.quit() +}) ipcMain.on('ping-pong', (event, arg) => { - event.sender.send('ping-pong', `[ipcMain] "${arg}" received asynchronously.`); -}); + event.sender.send('ping-pong', `[ipcMain] "${arg}" received asynchronously.`) +}) ipcMain.on('ping-pong-sync', (event, arg) => { - event.returnValue = `[ipcMain] "${arg}" received synchronously.`; -}); + event.returnValue = `[ipcMain] "${arg}" received synchronously.` +}) diff --git a/examples/ipc-communication/package.json b/examples/ipc-communication/package.json index 1ea035c7..7b207e04 100644 --- a/examples/ipc-communication/package.json +++ b/examples/ipc-communication/package.json @@ -18,7 +18,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/ipc-communication/renderer/pages/home.jsx b/examples/ipc-communication/renderer/pages/home.jsx index f7670b49..2dc78247 100644 --- a/examples/ipc-communication/renderer/pages/home.jsx +++ b/examples/ipc-communication/renderer/pages/home.jsx @@ -1,21 +1,25 @@ -import electron from 'electron'; -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import electron from 'electron' +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import Image from 'next/image' -const ipcRenderer = electron.ipcRenderer || false; +const ipcRenderer = electron.ipcRenderer || false function Home() { - const [message, setMessage] = React.useState('no ipc message'); + const [message, setMessage] = React.useState('no ipc message') const onClickWithIpc = () => { - ipcRenderer.send('ping-pong', 'some data from ipcRenderer'); - }; + ipcRenderer.send('ping-pong', 'some data from ipcRenderer') + } const onClickWithIpcSync = () => { - const message = ipcRenderer.sendSync('ping-pong-sync', 'some data from ipcRenderer'); - setMessage(message); - }; + const message = ipcRenderer.sendSync( + 'ping-pong-sync', + 'some data from ipcRenderer' + ) + setMessage(message) + } // If we use ipcRenderer in this scope, we must check the instance exists if (ipcRenderer) { @@ -27,16 +31,16 @@ function Home() { // register `ping-pong` event ipcRenderer.on('ping-pong', (event, data) => { - setMessage(data); - }); + setMessage(data) + }) return () => { // like componentWillUnmount() // unregister it - ipcRenderer.removeAllListeners('ping-pong'); - }; - }, []); + ipcRenderer.removeAllListeners('ping-pong') + } + }, []) return ( @@ -50,14 +54,14 @@ function Home() { Go to next page

- + Logo image

{message}

 - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/ipc-communication/renderer/pages/next.jsx b/examples/ipc-communication/renderer/pages/next.jsx index 8246b1c4..6d6c8e1a 100644 --- a/examples/ipc-communication/renderer/pages/next.jsx +++ b/examples/ipc-communication/renderer/pages/next.jsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' function Next() { return ( @@ -17,7 +17,7 @@ function Next() {

- ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/store-data/main/background.js b/examples/store-data/main/background.js index bf6e7fd9..108f4b39 100644 --- a/examples/store-data/main/background.js +++ b/examples/store-data/main/background.js @@ -1,45 +1,45 @@ -import { app, ipcMain } from 'electron'; -import serve from 'electron-serve'; -import Store from 'electron-store'; -import { createWindow } from './helpers'; +import { app, ipcMain } from 'electron' +import serve from 'electron-serve' +import Store from 'electron-store' +import { createWindow } from './helpers' -const isProd = process.env.NODE_ENV === 'production'; +const isProd = process.env.NODE_ENV === 'production' if (isProd) { - serve({ directory: 'app' }); + serve({ directory: 'app' }) } else { - app.setPath('userData', `${app.getPath('userData')} (development)`); + app.setPath('userData', `${app.getPath('userData')} (development)`) } -(async () => { - await app.whenReady(); +;(async () => { + await app.whenReady() const mainWindow = createWindow('main', { width: 1000, height: 600, - }); + }) if (isProd) { - await mainWindow.loadURL('app://./home.html'); + await mainWindow.loadURL('app://./home.html') } else { - const port = process.argv[2]; - await mainWindow.loadURL(`http://localhost:${port}/home`); - mainWindow.webContents.openDevTools(); + const port = process.argv[2] + await mainWindow.loadURL(`http://localhost:${port}/home`) + mainWindow.webContents.openDevTools() } -})(); +})() app.on('window-all-closed', () => { - app.quit(); -}); + app.quit() +}) -const store = new Store({ name: 'messages' }); +const store = new Store({ name: 'messages' }) -ipcMain.on('get-messages', (event, arg) => { - event.returnValue = store.get('messages') || []; -}); +ipcMain.on('get-messages', (event) => { + event.returnValue = store.get('messages') || [] +}) ipcMain.on('add-message', (event, arg) => { - const messages = store.get('messages') || []; - messages.push(arg); - store.set('messages', messages); -}); + const messages = store.get('messages') || [] + messages.push(arg) + store.set('messages', messages) +}) diff --git a/examples/store-data/package.json b/examples/store-data/package.json index 1ea035c7..7b207e04 100644 --- a/examples/store-data/package.json +++ b/examples/store-data/package.json @@ -18,7 +18,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/store-data/renderer/next.config.js b/examples/store-data/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/store-data/renderer/next.config.js +++ b/examples/store-data/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/store-data/renderer/pages/home.jsx b/examples/store-data/renderer/pages/home.jsx index 8cd47cab..590c2d0d 100644 --- a/examples/store-data/renderer/pages/home.jsx +++ b/examples/store-data/renderer/pages/home.jsx @@ -1,32 +1,33 @@ -import electron from 'electron'; -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import electron from 'electron' +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import Image from 'next/image' -const ipcRenderer = electron.ipcRenderer || false; +const ipcRenderer = electron.ipcRenderer || false function Home() { - const [message, setMessage] = React.useState(''); - const [messages, setMessages] = React.useState([]); + const [message, setMessage] = React.useState('') + const [messages, setMessages] = React.useState([]) - const onChange = (e) => setMessage(e.target.value); + const onChange = (e) => setMessage(e.target.value) const onSubmit = (e) => { - e.preventDefault(); + e.preventDefault() - ipcRenderer.send('add-message', message); - setMessages([...messages, message]); - setMessage(''); - }; + ipcRenderer.send('add-message', message) + setMessages([...messages, message]) + setMessage('') + } React.useEffect(() => { // like componentDidMount() - setMessages(ipcRenderer.sendSync('get-messages')); + setMessages(ipcRenderer.sendSync('get-messages')) return () => { // like componentWillUnmount() - }; - }, []); + } + }, []) return ( @@ -40,18 +41,20 @@ function Home() { Go to next page

- + Logo image

Enter your message:

 - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/with-ant-design/package.json b/examples/with-ant-design/package.json index 97fceca0..32775635 100644 --- a/examples/with-ant-design/package.json +++ b/examples/with-ant-design/package.json @@ -22,7 +22,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^4.9.4" diff --git a/examples/with-ant-design/renderer/next.config.js b/examples/with-ant-design/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/with-ant-design/renderer/next.config.js +++ b/examples/with-ant-design/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/with-ant-design/renderer/pages/_app.tsx b/examples/with-ant-design/renderer/pages/_app.tsx index a47ec580..0d71172e 100644 --- a/examples/with-ant-design/renderer/pages/_app.tsx +++ b/examples/with-ant-design/renderer/pages/_app.tsx @@ -1,18 +1,18 @@ -import React from 'react'; -import Head from 'next/head'; -import type { AppProps } from 'next/app'; +import React from 'react' +import Head from 'next/head' +import type { AppProps } from 'next/app' -import 'antd/dist/antd.css'; +import 'antd/dist/antd.css' function MyApp({ Component, pageProps }: AppProps) { return ( - + - ); + ) } -export default MyApp; +export default MyApp diff --git a/examples/with-ant-design/renderer/pages/home.tsx b/examples/with-ant-design/renderer/pages/home.tsx index 3b03c17a..e8e3235a 100644 --- a/examples/with-ant-design/renderer/pages/home.tsx +++ b/examples/with-ant-design/renderer/pages/home.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' import { Layout, Form, @@ -10,14 +10,11 @@ import { Switch, Slider, Button, -} from 'antd'; +} from 'antd' -const { - Header, - Content, -} = Layout; -const { Item: FormItem } = Form; -const { Option } = Select; +const { Header, Content } = Layout +const { Item: FormItem } = Form +const { Option } = Select function Home() { return ( @@ -33,18 +30,25 @@ function Home() { -
+ - - Link + + Link @@ -52,7 +56,7 @@ function Home() { @@ -60,40 +64,42 @@ function Home() { - + + + + - + - -
- ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/with-ant-design/renderer/pages/next.tsx b/examples/with-ant-design/renderer/pages/next.tsx index 67ca5923..d7faa07d 100644 --- a/examples/with-ant-design/renderer/pages/next.tsx +++ b/examples/with-ant-design/renderer/pages/next.tsx @@ -1,15 +1,9 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { - Layout, - Result, -} from 'antd'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import { Layout, Result } from 'antd' -const { - Header, - Content, -} = Layout; +const { Header, Content } = Layout function Next() { return ( @@ -25,14 +19,10 @@ function Next() { - + - ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/with-ant-design/renderer/tsconfig.json b/examples/with-ant-design/renderer/tsconfig.json index a86fe95c..5271c238 100644 --- a/examples/with-ant-design/renderer/tsconfig.json +++ b/examples/with-ant-design/renderer/tsconfig.json @@ -1,11 +1,5 @@ { - "extends": "../tsconfig.json", - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] -} \ No newline at end of file + "extends": "../tsconfig.json", + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/with-emotion/package.json b/examples/with-emotion/package.json index 44127e3d..e3eca7e4 100644 --- a/examples/with-emotion/package.json +++ b/examples/with-emotion/package.json @@ -23,7 +23,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^4.9.4" diff --git a/examples/with-emotion/renderer/.babelrc b/examples/with-emotion/renderer/.babelrc index 7a3cdecc..40217409 100644 --- a/examples/with-emotion/renderer/.babelrc +++ b/examples/with-emotion/renderer/.babelrc @@ -1,8 +1,4 @@ { - "presets": [ - "next/babel" - ], - "plugins": [ - "@emotion" - ] + "presets": ["next/babel"], + "plugins": ["@emotion"] } diff --git a/examples/with-emotion/renderer/components/AnimatedCard.ts b/examples/with-emotion/renderer/components/AnimatedCard.ts index d17d968b..295452e9 100644 --- a/examples/with-emotion/renderer/components/AnimatedCard.ts +++ b/examples/with-emotion/renderer/components/AnimatedCard.ts @@ -1,8 +1,8 @@ -import { keyframes } from '@emotion/react'; -import { Keyframes } from '@emotion/serialize'; -import styled from '@emotion/styled'; -import { basicStyles } from './BasicCard'; -import { hoverStyles } from './HoverableCard'; +import { keyframes } from '@emotion/react' +import { Keyframes } from '@emotion/serialize' +import styled from '@emotion/styled' +import { basicStyles } from './BasicCard' +import { hoverStyles } from './HoverableCard' export const bounce = keyframes` from { @@ -11,10 +11,10 @@ from { to { transform: scale(0.99); } -`; +` interface AnimatedCardProps { - animation: Keyframes; + animation: Keyframes } export const AnimatedCard = styled.div` @@ -23,5 +23,6 @@ export const AnimatedCard = styled.div` & code { background-color: linen; } - animation: ${(props: AnimatedCardProps) => props.animation} 0.2s infinite ease-in-out alternate; -`; + animation: ${(props: AnimatedCardProps) => props.animation} 0.2s infinite + ease-in-out alternate; +` diff --git a/examples/with-emotion/renderer/components/BasicCard.ts b/examples/with-emotion/renderer/components/BasicCard.ts index 723b3b88..2c19747a 100644 --- a/examples/with-emotion/renderer/components/BasicCard.ts +++ b/examples/with-emotion/renderer/components/BasicCard.ts @@ -1,18 +1,20 @@ -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; +import styled from '@emotion/styled' +import { css } from '@emotion/react' export const basicStyles = css` -background-color: white; -color: cornflowerblue; -border: 1px solid lightgreen; -border-right: none; -border-bottom: none; -box-shadow: 5px 5px 0 0 lightgreen, 8px 8px 0 0 lightyellow; -transition: all 0.1s linear; -margin: 3rem 0; -padding: 2rem; -`; + background-color: white; + color: cornflowerblue; + border: 1px solid lightgreen; + border-right: none; + border-bottom: none; + box-shadow: + 5px 5px 0 0 lightgreen, + 8px 8px 0 0 lightyellow; + transition: all 0.1s linear; + margin: 3rem 0; + padding: 2rem; +` export const BasicCard = styled.div` ${basicStyles}; -`; +` diff --git a/examples/with-emotion/renderer/components/HoverableCard.ts b/examples/with-emotion/renderer/components/HoverableCard.ts index 1d41d066..c2427afd 100644 --- a/examples/with-emotion/renderer/components/HoverableCard.ts +++ b/examples/with-emotion/renderer/components/HoverableCard.ts @@ -1,20 +1,22 @@ -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import { basicStyles } from './BasicCard'; +import styled from '@emotion/styled' +import { css } from '@emotion/react' +import { basicStyles } from './BasicCard' export const hoverStyles = css` -&:hover { - color: white; - background-color: lightgray; - border-color: purple; - box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue; -} -`; + &:hover { + color: white; + background-color: lightgray; + border-color: purple; + box-shadow: + -15px -15px 0 0 aqua, + -30px -30px 0 0 cornflowerblue; + } +` export const HoverableCard = styled.div` -${basicStyles}; -${hoverStyles}; -& code { - background-color: linen; -} -`; + ${basicStyles}; + ${hoverStyles}; + & code { + background-color: linen; + } +` diff --git a/examples/with-emotion/renderer/components/TitleCard.ts b/examples/with-emotion/renderer/components/TitleCard.ts index d5efc6b2..17a4486d 100644 --- a/examples/with-emotion/renderer/components/TitleCard.ts +++ b/examples/with-emotion/renderer/components/TitleCard.ts @@ -1,9 +1,9 @@ -import styled from '@emotion/styled'; -import { basicStyles } from '../components/BasicCard'; +import styled from '@emotion/styled' +import { basicStyles } from '../components/BasicCard' export const TitleCard = styled.div` ${basicStyles}; & { font-weight: bold; } -`; +` diff --git a/examples/with-emotion/renderer/next.config.js b/examples/with-emotion/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/with-emotion/renderer/next.config.js +++ b/examples/with-emotion/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/with-emotion/renderer/pages/_app.tsx b/examples/with-emotion/renderer/pages/_app.tsx index 969f9c10..b966136a 100644 --- a/examples/with-emotion/renderer/pages/_app.tsx +++ b/examples/with-emotion/renderer/pages/_app.tsx @@ -1,16 +1,16 @@ -import React from 'react'; -import type { AppProps } from 'next/app'; -import Head from 'next/head'; +import React from 'react' +import type { AppProps } from 'next/app' +import Head from 'next/head' function MyApp({ Component, pageProps }: AppProps) { return ( - + - ); + ) } -export default MyApp; +export default MyApp diff --git a/examples/with-emotion/renderer/pages/_document.tsx b/examples/with-emotion/renderer/pages/_document.tsx index bc1182d1..39fdf718 100644 --- a/examples/with-emotion/renderer/pages/_document.tsx +++ b/examples/with-emotion/renderer/pages/_document.tsx @@ -1,6 +1,6 @@ -import React from 'react'; -import Document, { Html, Head, Main, NextScript } from 'next/document'; -import { css, Global } from '@emotion/react'; +import React from 'react' +import Document, { Html, Head, Main, NextScript } from 'next/document' +import { css, Global } from '@emotion/react' class MyDocument extends Document { render() { @@ -11,7 +11,8 @@ class MyDocument extends Document { - ); + ) } } -export default MyDocument; +export default MyDocument diff --git a/examples/with-emotion/renderer/pages/home.tsx b/examples/with-emotion/renderer/pages/home.tsx index 4ecd7ac9..1ec3e7e5 100644 --- a/examples/with-emotion/renderer/pages/home.tsx +++ b/examples/with-emotion/renderer/pages/home.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { BasicCard } from '../components/BasicCard'; -import { TitleCard } from '../components/TitleCard'; -import { HoverableCard } from '../components/HoverableCard'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import { BasicCard } from '../components/BasicCard' +import { TitleCard } from '../components/TitleCard' +import { HoverableCard } from '../components/HoverableCard' function Home() { return ( @@ -23,7 +23,7 @@ function Home() { - ); -}; + ) +} -export default Home; +export default Home diff --git a/examples/with-emotion/renderer/pages/next.tsx b/examples/with-emotion/renderer/pages/next.tsx index e76aeeb9..ebb0f46c 100644 --- a/examples/with-emotion/renderer/pages/next.tsx +++ b/examples/with-emotion/renderer/pages/next.tsx @@ -1,9 +1,9 @@ -import React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { BasicCard } from '../components/BasicCard'; -import { TitleCard } from '../components/TitleCard'; -import { bounce, AnimatedCard } from '../components/AnimatedCard'; +import React from 'react' +import Head from 'next/head' +import Link from 'next/link' +import { BasicCard } from '../components/BasicCard' +import { TitleCard } from '../components/TitleCard' +import { bounce, AnimatedCard } from '../components/AnimatedCard' function Next() { return ( @@ -21,7 +21,7 @@ function Next() { Let's bounce. - ); -}; + ) +} -export default Next; +export default Next diff --git a/examples/with-emotion/renderer/tsconfig.json b/examples/with-emotion/renderer/tsconfig.json index ec99364b..5271c238 100644 --- a/examples/with-emotion/renderer/tsconfig.json +++ b/examples/with-emotion/renderer/tsconfig.json @@ -1,11 +1,5 @@ { "extends": "../tsconfig.json", - "include": [ - "next-env.d.ts", - "**/*.ts", - "**/*.tsx" - ], - "exclude": [ - "node_modules" - ] + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] } diff --git a/examples/with-emotion/tsconfig.json b/examples/with-emotion/tsconfig.json index 80757ea7..7e2d690e 100644 --- a/examples/with-emotion/tsconfig.json +++ b/examples/with-emotion/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -19,10 +15,5 @@ "isolatedModules": true, "jsx": "preserve" }, - "exclude": [ - "node_modules", - "renderer/next.config.js", - "app", - "dist" - ] + "exclude": ["node_modules", "renderer/next.config.js", "app", "dist"] } diff --git a/examples/with-material-ui/package.json b/examples/with-material-ui/package.json index 99b43f4f..e9545220 100644 --- a/examples/with-material-ui/package.json +++ b/examples/with-material-ui/package.json @@ -25,7 +25,7 @@ "electron": "^21.3.3", "electron-builder": "^23.6.0", "next": "^12.3.4", - "nextron": "^8.6.0", + "nextron": "^8.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^4.9.4" diff --git a/examples/with-material-ui/renderer/components/Link.tsx b/examples/with-material-ui/renderer/components/Link.tsx index 89c0966c..99d9f1c9 100644 --- a/examples/with-material-ui/renderer/components/Link.tsx +++ b/examples/with-material-ui/renderer/components/Link.tsx @@ -1,52 +1,71 @@ -import React from 'react'; -import clsx from 'clsx'; -import {useRouter} from 'next/router'; -import NextLink, {LinkProps as NextLinkProps} from 'next/link'; -import MuiLink, {LinkProps as MuiLinkProps} from '@mui/material/Link'; +import React from 'react' +import clsx from 'clsx' +import { useRouter } from 'next/router' +import NextLink, { LinkProps as NextLinkProps } from 'next/link' +import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link' -type NextComposedProps = React.AnchorHTMLAttributes & NextLinkProps; +type NextComposedProps = React.AnchorHTMLAttributes & + NextLinkProps -const NextComposed = React.forwardRef(function NextComposed(props: NextComposedProps, ref: React.Ref) { - const {as, href, ...other} = props; +const NextComposed = React.forwardRef(function NextComposed( + props: NextComposedProps, + ref: React.Ref +) { + const { as, href, ...other } = props - return ( - - - - ); -}); + return ( + + + + ) +}) interface LinkPropsBase { - activeClassName?: string; - innerRef?: React.Ref; - naked?: boolean; + activeClassName?: string + innerRef?: React.Ref + naked?: boolean } -type LinkProps = LinkPropsBase & NextComposedProps & Omit; +type LinkProps = LinkPropsBase & NextComposedProps & Omit function Link(props: LinkProps) { - const { - href, - activeClassName = 'active', - className: classNameProps, - innerRef, - naked, - ...other - } = props; - - const router = useRouter(); - const pathname = typeof href === 'string' ? href : (href as any).pathname; - const className = clsx(classNameProps, { - [activeClassName]: router.pathname === pathname && activeClassName, - }); - - if (naked) { - return ; - } + const { + href, + activeClassName = 'active', + className: classNameProps, + innerRef, + naked, + ...other + } = props + + const router = useRouter() + const pathname = typeof href === 'string' ? href : (href as any).pathname + const className = clsx(classNameProps, { + [activeClassName]: router.pathname === pathname && activeClassName, + }) + if (naked) { return ( - - ); + + ) + } + + return ( + + ) } -export default React.forwardRef((props, ref) => ); +export default React.forwardRef((props, ref) => ( + +)) diff --git a/examples/with-material-ui/renderer/lib/create-emotion-cache.ts b/examples/with-material-ui/renderer/lib/create-emotion-cache.ts index 82e5e48a..586d0024 100644 --- a/examples/with-material-ui/renderer/lib/create-emotion-cache.ts +++ b/examples/with-material-ui/renderer/lib/create-emotion-cache.ts @@ -1,17 +1,19 @@ -import createCache from "@emotion/cache"; +import createCache from '@emotion/cache' -const isBrowser = typeof window !== "undefined"; +const isBrowser = typeof window !== 'undefined' export default function createEmotionCache() { - let insertionPoint: HTMLElement; + let insertionPoint: HTMLElement - if (isBrowser){ - const emotionInsertionPoint = document.querySelector(`meta[name="emotion-insertion-point"]`) as HTMLElement; - insertionPoint = emotionInsertionPoint ?? undefined; - } + if (isBrowser) { + const emotionInsertionPoint = document.querySelector( + `meta[name="emotion-insertion-point"]` + ) as HTMLElement + insertionPoint = emotionInsertionPoint ?? undefined + } - return createCache({ - key: 'mui-style', - insertionPoint - }) + return createCache({ + key: 'mui-style', + insertionPoint, + }) } diff --git a/examples/with-material-ui/renderer/lib/theme.ts b/examples/with-material-ui/renderer/lib/theme.ts index 6b5342f7..f9b08f77 100644 --- a/examples/with-material-ui/renderer/lib/theme.ts +++ b/examples/with-material-ui/renderer/lib/theme.ts @@ -1,19 +1,19 @@ -import {createTheme} from '@mui/material/styles'; -import {red} from '@mui/material/colors'; +import { createTheme } from '@mui/material/styles' +import { red } from '@mui/material/colors' // Create a theme instance. const theme = createTheme({ - palette: { - primary: { - main: '#556cd6', - }, - secondary: { - main: '#19857b', - }, - error: { - main: red.A400, - }, + palette: { + primary: { + main: '#556cd6', }, -}); + secondary: { + main: '#19857b', + }, + error: { + main: red.A400, + }, + }, +}) -export default theme; +export default theme diff --git a/examples/with-material-ui/renderer/next.config.js b/examples/with-material-ui/renderer/next.config.js index a046706a..8fcb4d18 100644 --- a/examples/with-material-ui/renderer/next.config.js +++ b/examples/with-material-ui/renderer/next.config.js @@ -1,9 +1,9 @@ module.exports = { webpack: (config, { isServer }) => { if (!isServer) { - config.target = 'electron-renderer'; + config.target = 'electron-renderer' } - return config; + return config }, -}; +} diff --git a/examples/with-material-ui/renderer/pages/_app.tsx b/examples/with-material-ui/renderer/pages/_app.tsx index 9e649f70..20692501 100644 --- a/examples/with-material-ui/renderer/pages/_app.tsx +++ b/examples/with-material-ui/renderer/pages/_app.tsx @@ -1,30 +1,33 @@ -import React from 'react'; -import Head from 'next/head'; -import type {AppProps} from 'next/app'; -import {CssBaseline, ThemeProvider} from '@mui/material'; -import theme from '../lib/theme'; -import type {EmotionCache} from "@emotion/cache"; -import createEmotionCache from '../lib/create-emotion-cache'; -import {CacheProvider} from '@emotion/react'; +import React from 'react' +import Head from 'next/head' +import type { AppProps } from 'next/app' +import { CssBaseline, ThemeProvider } from '@mui/material' +import theme from '../lib/theme' +import type { EmotionCache } from '@emotion/cache' +import createEmotionCache from '../lib/create-emotion-cache' +import { CacheProvider } from '@emotion/react' -const clientSideEmotionCache = createEmotionCache(); +const clientSideEmotionCache = createEmotionCache() type MyAppProps = AppProps & { - emotionCache?: EmotionCache; + emotionCache?: EmotionCache } export default function MyApp(props: MyAppProps) { - const {Component, pageProps, emotionCache = clientSideEmotionCache} = props; + const { Component, pageProps, emotionCache = clientSideEmotionCache } = props - return ( - - - - - - - - - - ) + return ( + + + + + + + + + + ) } diff --git a/examples/with-material-ui/renderer/pages/_document.tsx b/examples/with-material-ui/renderer/pages/_document.tsx index 86a9a2f3..8a866904 100644 --- a/examples/with-material-ui/renderer/pages/_document.tsx +++ b/examples/with-material-ui/renderer/pages/_document.tsx @@ -1,84 +1,83 @@ -import React from 'react'; -import Document, {Head, Html, Main, NextScript} from 'next/document'; -import theme from '../lib/theme'; -import createEmotionCache from '../lib/create-emotion-cache'; -import createEmotionServer from '@emotion/server/create-instance'; - +import React from 'react' +import Document, { Head, Html, Main, NextScript } from 'next/document' +import theme from '../lib/theme' +import createEmotionCache from '../lib/create-emotion-cache' +import createEmotionServer from '@emotion/server/create-instance' export default class MyDocument extends Document { - render() { - return ( - - - - - - - -
- - - - ); - } + render() { + return ( + + + + + + + +
+ + + + ) + } } -MyDocument.getInitialProps = async ctx => { - // Resolution order - // - // On the server: - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. document.getInitialProps - // 4. app.render - // 5. page.render - // 6. document.render - // - // On the server with error: - // 1. document.getInitialProps - // 2. app.render - // 3. page.render - // 4. document.render - // - // On the client - // 1. app.getInitialProps - // 2. page.getInitialProps - // 3. app.render - // 4. page.render +MyDocument.getInitialProps = async (ctx) => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render - const originalRenderPage = ctx.renderPage; + const originalRenderPage = ctx.renderPage - // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. - // However, be aware that it can have global side effects. - const cache = createEmotionCache(); - const {extractCriticalToChunks} = createEmotionServer(cache); + // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. + // However, be aware that it can have global side effects. + const cache = createEmotionCache() + const { extractCriticalToChunks } = createEmotionServer(cache) - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App: any) => - function EnhanceApp(props) { - return ; - }, - }); + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App: any) => + function EnhanceApp(props) { + return + }, + }) - const initialProps = await Document.getInitialProps(ctx); - // This is important. It prevents Emotion to render invalid HTML. - // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 - const emotionStyles = extractCriticalToChunks(initialProps.html); - const emotionStyleTags = emotionStyles.styles.map((style) => ( -