v2.0.0

build-config/build-after-pack.js

@@ -0,0 +1,25 @@
+const fs = require('fs').promises
+
+// https://github.com/electron-userland/electron-builder/issues/4630
+// https://github.com/electron-userland/electron-builder/issues/4630#issuecomment-782020139
+
+module.exports = async(context) => {
+  const { electronPlatformName, appOutDir } = context
+  if (electronPlatformName !== 'darwin') return
+  const {
+    productFilename,
+    info: {
+      _metadata: { macLanguagesInfoPlistStrings },
+    },
+  } = context.packager.appInfo
+
+  const resPath = `${appOutDir}/${productFilename}.app/Contents/Resources`
+
+  // 创建APP语言包文件
+  return await Promise.all(
+    Object.entries(macLanguagesInfoPlistStrings).map(([lang, config]) => {
+      let infos = Object.entries(config).map(([k, v]) => `"${k}" = "${v}";`).join('\n')
+      return fs.writeFile(`${resPath}/${lang}.lproj/InfoPlist.strings`, infos)
+    }),
+  )
+}

build-config/main/webpack.config.base.js

@@ -5,9 +5,17 @@ module.exports = {
   target: 'electron-main',
   output: {
     filename: '[name].js',
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
     path: path.join(__dirname, '../../dist'),
   },
+  externals: [
+    'font-list',
+    'better-sqlite3',
+    'bufferutil',
+    'utf-8-validate',
+  ],
   resolve: {
     alias: {
       '@main': path.join(__dirname, '../../src/main'),
@@ -15,7 +23,7 @@ module.exports = {
       '@lyric': path.join(__dirname, '../../src/renderer-lyric'),
       '@common': path.join(__dirname, '../../src/common'),
     },
-    extensions: ['*', '.js', '.json', '.node'],
+    extensions: ['.tsx', '.ts', '.js', '.mjs', '.json', '.node'],
   },
   module: {
     rules: [
@@ -23,6 +31,11 @@ module.exports = {
         test: /\.node$/,
         use: 'node-loader',
       },
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
     ],
   },
   plugins: [

build-config/main/webpack.config.dev.js

@@ -8,15 +8,17 @@ const baseConfig = require('./webpack.config.base')
 module.exports = merge(baseConfig, {
   mode: 'development',
   entry: {
-    main: path.join(__dirname, '../../src/main/index.dev.js'),
+    main: path.join(__dirname, '../../src/main/index-dev.ts'),
+    // 'dbService.worker': path.join(__dirname, '../../src/main/worker/dbService/index.ts'),
   },
+  devtool: 'eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: '"development"',
       },
-      __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
-      __userApi: `"${path.join(__dirname, '../../src/main/modules/userApi').replace(/\\/g, '\\\\')}"`,
+      webpackStaticPath: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+      webpackUserApiPath: `"${path.join(__dirname, '../../src/main/modules/userApi').replace(/\\/g, '\\\\')}"`,
     }),
   ],
   performance: {

build-config/main/webpack.config.prod.js

@@ -5,18 +5,17 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 const baseConfig = require('./webpack.config.base')
 
-const { dependencies } = require('../../package.json')
+// const { dependencies } = require('../../package.json')
+
+const buildConfig = require('../webpack-build-config')
 
 
 module.exports = merge(baseConfig, {
   mode: 'production',
   entry: {
-    main: path.join(__dirname, '../../src/main/index.js'),
+    main: path.join(__dirname, '../../src/main/index.ts'),
+    // 'dbService.worker': path.join(__dirname, '../../src/main/worker/dbService/index.ts'),
   },
-  externals: [
-    ...Object.keys(dependencies || {}),
-    // 'font-list',
-  ],
   node: {
     __dirname: false,
     __filename: false,
@@ -25,12 +24,12 @@ module.exports = merge(baseConfig, {
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: path.join(__dirname, '../../src/main/modules/userApi/renderer'),
-          to: path.join(__dirname, '../../dist/userApi/renderer'),
+          from: path.join(__dirname, '../../src/main/modules/userApi/renderer/user-api.html'),
+          to: path.join(__dirname, '../../dist/userApi/renderer/user-api.html'),
         },
         {
-          from: path.join(__dirname, '../../src/main/modules/userApi/rendererEvent/name.js'),
-          to: path.join(__dirname, '../../dist/userApi/rendererEvent/name.js'),
+          from: path.join(__dirname, '../../src/common/theme/images/*').replace(/\\/g, '/'),
+          to: path.join(__dirname, '../../dist/theme_images/[name][ext]'),
         },
       ],
     }),
@@ -45,6 +44,6 @@ module.exports = merge(baseConfig, {
     maxAssetSize: 1024 * 1024 * 20,
   },
   optimization: {
-    minimize: false,
+    minimize: buildConfig.minimize,
   },
 })

build-config/pack.js

@@ -5,13 +5,16 @@ const del = require('del')
 const webpack = require('webpack')
 const Spinnies = require('spinnies')
 
-const mainConfig = require('./main/webpack.config.prod')
-const rendererConfig = require('./renderer/webpack.config.prod')
-const rendererLyricConfig = require('./renderer-lyric/webpack.config.prod')
+const mainConfig = './main/webpack.config.prod'
+const rendererConfig = './renderer/webpack.config.prod'
+const rendererLyricConfig = './renderer-lyric/webpack.config.prod'
+const rendererScriptConfig = './renderer-scripts/webpack.config.prod'
 
 const errorLog = chalk.bgRed.white(' ERROR ') + ' '
 const okayLog = chalk.bgGreen.white(' OKAY ') + ' '
 
+const { Worker, isMainThread, parentPort } = require('worker_threads')
+
 
 function build() {
   del.sync(['dist/**', 'build/**'])
@@ -20,6 +23,7 @@ function build() {
   spinners.add('main', { text: 'main building' })
   spinners.add('renderer', { text: 'renderer building' })
   spinners.add('renderer-lyric', { text: 'renderer-lyric building' })
+  spinners.add('renderer-scripts', { text: 'renderer-scripts building' })
   let results = ''
 
   // m.on('success', () => {
@@ -63,11 +67,35 @@ function build() {
       console.error(`\n${err}\n`)
       process.exit(1)
     }),
+    pack(rendererScriptConfig).then(result => {
+      results += result + '\n\n'
+      spinners.succeed('renderer-scripts', { text: 'renderer-scripts build success!' })
+    }).catch(err => {
+      spinners.fail('renderer-scripts', { text: 'renderer-scripts build fail :(' })
+      console.log(`\n  ${errorLog}failed to build renderer-scripts process`)
+      console.error(`\n${err}\n`)
+      process.exit(1)
+    }),
   ]).then(handleSuccess)
 }
 
 function pack(config) {
   return new Promise((resolve, reject) => {
+    const worker = new Worker(__filename)
+    const subChannel = new MessageChannel()
+    worker.postMessage({ port: subChannel.port1, config }, [subChannel.port1])
+    subChannel.port2.on('message', ({ status, message }) => {
+      switch (status) {
+        case 'success': return resolve(message)
+        case 'error': return reject(message)
+      }
+    })
+  })
+}
+
+function runPack(config) {
+  return new Promise((resolve, reject) => {
+    config = require(config)
     config.mode = 'production'
     webpack(config, (err, stats) => {
       if (err) reject(err.stack || err)
@@ -95,5 +123,22 @@ function pack(config) {
   })
 }
 
-build()
-
+if (isMainThread) build()
+else {
+  parentPort.once('message', ({ port, config }) => {
+    // assert(port instanceof MessagePort)
+    runPack(config).then((result) => {
+      port.postMessage({
+        status: 'success',
+        message: result,
+      })
+    }).catch((err) => {
+      port.postMessage({
+        status: 'error',
+        message: err,
+      })
+    }).finally(() => {
+      port.close()
+    })
+  })
+}

build-config/renderer-lyric/webpack.config.base.js

@@ -12,11 +12,13 @@ const isDev = process.env.NODE_ENV === 'development'
 module.exports = {
   target: 'electron-renderer',
   entry: {
-    'renderer-lyric': path.join(__dirname, '../../src/renderer-lyric/main.js'),
+    'renderer-lyric': path.join(__dirname, '../../src/renderer-lyric/main.ts'),
   },
   output: {
     filename: '[name].js',
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
     path: path.join(__dirname, '../../dist'),
     publicPath: 'auto',
   },
@@ -29,10 +31,25 @@ module.exports = {
       '@static': path.join(__dirname, '../../src/static'),
       '@common': path.join(__dirname, '../../src/common'),
     },
-    extensions: ['*', '.js', '.json', '.vue', '.node'],
+    extensions: ['.tsx', '.ts', '.js', '.json', '.vue', '.node'],
   },
   module: {
     rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            appendTsSuffixTo: [/\.vue$/],
+          },
+        },
+      },
       {
         test: /\.node$/,
         use: 'node-loader',
@@ -43,9 +60,8 @@ module.exports = {
         options: vueLoaderConfig,
       },
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
+        test: /\.pug$/,
+        loader: 'pug-plain-loader',
       },
       {
         test: /\.css$/,
@@ -60,20 +76,6 @@ module.exports = {
           },
         }),
       },
-      {
-        test: /\.pug$/,
-        oneOf: [
-          // Use pug-plain-loader handle .vue file
-          {
-            resourceQuery: /vue/,
-            use: ['pug-plain-loader'],
-          },
-          // Use pug-loader handle .pug file
-          {
-            use: ['pug-loader'],
-          },
-        ],
-      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         exclude: path.join(__dirname, '../../src/renderer/assets/svgs'),
@@ -130,7 +132,7 @@ module.exports = {
   plugins: [
     new HTMLPlugin({
       filename: 'lyric.html',
-      template: path.join(__dirname, '../../src/renderer-lyric/index.pug'),
+      template: path.join(__dirname, '../../src/renderer-lyric/index.html'),
       isProd: process.env.NODE_ENV == 'production',
       browser: process.browser,
       __dirname,

build-config/renderer-lyric/webpack.config.dev.js

@@ -16,7 +16,7 @@ module.exports = merge(baseConfig, {
       },
       __VUE_OPTIONS_API__: 'true',
       __VUE_PROD_DEVTOOLS__: 'false',
-      __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+      staticPath: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
     }),
   ],
   performance: {

build-config/renderer-lyric/webpack.config.prod.js

@@ -5,18 +5,19 @@ const TerserPlugin = require('terser-webpack-plugin')
 const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
+const buildConfig = require('../webpack-build-config')
 
-const { dependencies } = require('../../package.json')
+// const { dependencies } = require('../../package.json')
 
 // let whiteListedModules = ['vue']
-let whiteListedModules = ['vue', 'vue-router', 'vuex', 'vue-i18n']
+// let whiteListedModules = ['vue', 'vue-router', 'vuex', 'vue-i18n']
 
 
 module.exports = merge(baseConfig, {
   mode: 'production',
   devtool: false,
   externals: [
-    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
+    // ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
   ],
   plugins: [
     new webpack.DefinePlugin({
@@ -28,7 +29,7 @@ module.exports = merge(baseConfig, {
     }),
   ],
   optimization: {
-    minimize: false,
+    minimize: buildConfig.minimize,
     minimizer: [
       new TerserPlugin(),
       new CssMinimizerPlugin(),

build-config/renderer-scripts/webpack.config.base.js

@@ -0,0 +1,57 @@
+const path = require('path')
+const ESLintPlugin = require('eslint-webpack-plugin')
+
+module.exports = {
+  target: 'electron-renderer',
+  entry: {
+    'user-api-preload': path.join(__dirname, '../../src/main/modules/userApi/renderer/preload.js'),
+  },
+  output: {
+    filename: '[name].js',
+    library: {
+      type: 'commonjs2',
+    },
+    path: path.join(__dirname, '../../dist'),
+    publicPath: 'auto',
+  },
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, '../../src'),
+      '@main': path.join(__dirname, '../../src/main'),
+      '@renderer': path.join(__dirname, '../../src/renderer'),
+      '@lyric': path.join(__dirname, '../../src/renderer-lyric'),
+      '@static': path.join(__dirname, '../../src/static'),
+      '@common': path.join(__dirname, '../../src/common'),
+    },
+    extensions: ['.tsx', '.ts', '.js', '.json', '.vue', '.node'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            appendTsSuffixTo: [/\.vue$/],
+          },
+        },
+      },
+      {
+        test: /\.node$/,
+        use: 'node-loader',
+      },
+    ],
+  },
+  plugins: [
+    new ESLintPlugin({
+      extensions: ['js'],
+      formatter: require('eslint-formatter-friendly'),
+    }),
+  ],
+}

build-config/renderer-scripts/webpack.config.dev.js

@@ -0,0 +1,24 @@
+const path = require('path')
+const webpack = require('webpack')
+
+const { merge } = require('webpack-merge')
+
+const baseConfig = require('./webpack.config.base')
+
+module.exports = merge(baseConfig, {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"development"',
+        ELECTRON_DISABLE_SECURITY_WARNINGS: 'true',
+      },
+      staticPath: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+    }),
+  ],
+  performance: {
+    hints: false,
+  },
+})
+

build-config/renderer-scripts/webpack.config.prod.js

@@ -0,0 +1,45 @@
+// const path = require('path')
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const { merge } = require('webpack-merge')
+
+const baseConfig = require('./webpack.config.base')
+const buildConfig = require('../webpack-build-config')
+
+// const { dependencies } = require('../../package.json')
+
+// let whiteListedModules = ['vue']
+// let whiteListedModules = ['vue', 'vue-router', 'vuex', 'vue-i18n']
+
+
+module.exports = merge(baseConfig, {
+  mode: 'production',
+  devtool: false,
+  externals: [
+    // ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
+  ],
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+  ],
+  optimization: {
+    minimize: buildConfig.minimize,
+    minimizer: [
+      new TerserPlugin(),
+    ],
+  },
+  performance: {
+    maxEntrypointSize: 1024 * 1024 * 10,
+    maxAssetSize: 1024 * 1024 * 20,
+    hints: 'warning',
+  },
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+})
+
+

build-config/renderer/webpack.config.base.js

@@ -12,11 +12,13 @@ const isDev = process.env.NODE_ENV === 'development'
 module.exports = {
   target: 'electron-renderer',
   entry: {
-    renderer: path.join(__dirname, '../../src/renderer/main.js'),
+    renderer: path.join(__dirname, '../../src/renderer/main.ts'),
   },
   output: {
     filename: '[name].js',
-    libraryTarget: 'commonjs2',
+    library: {
+      type: 'commonjs2',
+    },
     path: path.join(__dirname, '../../dist'),
     publicPath: 'auto',
   },
@@ -29,10 +31,25 @@ module.exports = {
       '@static': path.join(__dirname, '../../src/static'),
       '@common': path.join(__dirname, '../../src/common'),
     },
-    extensions: ['*', '.js', '.json', '.vue', '.node'],
+    extensions: ['.tsx', '.ts', '.js', '.json', '.vue', '.node'],
   },
   module: {
     rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            appendTsSuffixTo: [/\.vue$/],
+          },
+        },
+      },
       {
         test: /\.node$/,
         use: 'node-loader',
@@ -43,9 +60,8 @@ module.exports = {
         options: vueLoaderConfig,
       },
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/,
+        test: /\.pug$/,
+        loader: 'pug-plain-loader',
       },
       {
         test: /\.css$/,
@@ -60,20 +76,6 @@ module.exports = {
           },
         }),
       },
-      {
-        test: /\.pug$/,
-        oneOf: [
-          // Use pug-plain-loader handle .vue file
-          {
-            resourceQuery: /vue/,
-            use: ['pug-plain-loader'],
-          },
-          // Use pug-loader handle .pug file
-          {
-            use: ['pug-loader'],
-          },
-        ],
-      },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         exclude: path.join(__dirname, '../../src/renderer/assets/svgs'),

build-config/renderer/webpack.config.dev.js

@@ -14,10 +14,10 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"development"',
         ELECTRON_DISABLE_SECURITY_WARNINGS: 'true',
       },
-      ENVIRONMENT: 'process.env',
+      // ENVIRONMENT: 'process.env',
       __VUE_OPTIONS_API__: 'true',
       __VUE_PROD_DEVTOOLS__: 'false',
-      __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
+      staticPath: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
     }),
   ],
   performance: {

build-config/renderer/webpack.config.prod.js

@@ -6,17 +6,18 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const { merge } = require('webpack-merge')
 
 const baseConfig = require('./webpack.config.base')
+const buildConfig = require('../webpack-build-config')
 
-const { dependencies } = require('../../package.json')
+// const { dependencies } = require('../../package.json')
 
-let whiteListedModules = ['vue', 'vue-router', 'vuex', 'vue-i18n']
+// let whiteListedModules = ['vue', 'vue-router', 'vuex', 'vue-i18n']
 
 
 module.exports = merge(baseConfig, {
   mode: 'production',
   devtool: false,
   externals: [
-    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
+    // ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)),
   ],
   plugins: [
     new CopyWebpackPlugin({
@@ -31,17 +32,21 @@ module.exports = merge(baseConfig, {
       'process.env': {
         NODE_ENV: '"production"',
       },
-      ENVIRONMENT: 'process.env',
+      // ENVIRONMENT: 'process.env',
       __VUE_OPTIONS_API__: 'true',
       __VUE_PROD_DEVTOOLS__: 'false',
     }),
   ],
   optimization: {
-    minimize: false,
+    minimize: buildConfig.minimize,
     minimizer: [
       new TerserPlugin(),
       new CssMinimizerPlugin(),
     ],
+    splitChunks: {
+      chunks: 'initial',
+      minChunks: 2,
+    },
   },
   performance: {
     maxEntrypointSize: 1024 * 1024 * 10,

build-config/runner-dev.js

@@ -13,6 +13,7 @@ const webpackHotMiddleware = require('webpack-hot-middleware')
 const mainConfig = require('./main/webpack.config.dev')
 const rendererConfig = require('./renderer/webpack.config.dev')
 const rendererLyricConfig = require('./renderer-lyric/webpack.config.dev')
+const rendererScriptConfig = require('./renderer-scripts/webpack.config.dev')
 
 let electronProcess = null
 let manualRestart = false
@@ -47,9 +48,10 @@ function startRenderer() {
       port: 9080,
       hot: true,
       historyApiFallback: true,
-      // static: {
-      //   directory: path.join(__dirname, '../'),
-      // },
+      static: {
+        directory: path.join(__dirname, '../src/common/theme/images'),
+        publicPath: '/theme_images',
+      },
       client: {
         logging: 'warn',
         overlay: true,
@@ -111,6 +113,22 @@ function startRendererLyric() {
   })
 }
 
+function startRendererScripts() {
+  return new Promise((resolve, reject) => {
+    // mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
+    // mainConfig.mode = 'development'
+    const compiler = webpack(rendererScriptConfig)
+
+    compiler.watch({}, (err, stats) => {
+      if (err) {
+        console.log(err)
+        return
+      }
+      resolve()
+    })
+  })
+}
+
 function startMain() {
   return new Promise((resolve, reject) => {
     // mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main)
@@ -175,11 +193,19 @@ function startElectron() {
   })
 }
 
+const logs = [
+  'Manifest version 2 is deprecated, and support will be removed in 2023',
+  '"Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled',
+
+  // https://github.com/electron/electron/issues/32133
+  '"Electron sandbox_bundle.js script failed to run"',
+  '"TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))",',
+]
 function electronLog(data, color) {
   let log = data.toString()
   if (/[0-9A-z]+/.test(log)) {
-    // 抑制 user api 窗口使用 data url 加载页面时 vue扩展 的报错日志刷屏的问题
-    if (color == 'red' && typeof log === 'string' && log.includes('"Extension server error: Operation failed: Permission denied", source: devtools://devtools/bundled/extensions/extensions.js')) return
+    // 抑制某些无关的报错日志
+    if (color == 'red' && typeof log === 'string' && logs.some(l => log.includes(l))) return
 
     console.log(chalk[color](log))
   }
@@ -191,6 +217,7 @@ function init() {
   spinners.add('main', { text: 'main compiling' })
   spinners.add('renderer', { text: 'renderer compiling' })
   spinners.add('renderer-lyric', { text: 'renderer-lyric compiling' })
+  spinners.add('renderer-scripts', { text: 'renderer-scripts compiling' })
   function handleSuccess(name) {
     spinners.succeed(name, { text: name + ' compile success!' })
   }
@@ -207,6 +234,10 @@ function init() {
       console.error(err.message)
       return handleFail('renderer-lyric')
     }),
+    startRendererScripts().then(() => handleSuccess('renderer-scripts')).catch((err) => {
+      console.error(err.message)
+      return handleFail('renderer-scripts')
+    }),
     startMain().then(() => handleSuccess('main')).catch(() => handleFail('main')),
   ]).then(startElectron).catch(err => {
     console.error(err)

build-config/webpack-build-config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  minimize: false,
+}