Merge branch 'release/v3.5.0'

.cz.yaml

@@ -2,6 +2,7 @@ commitizen:
   changelog_start_rev: v2.0.0
   name: cz_conventional_commits
   tag_format: v$version
-  version: 3.4.1
+  update_changelog_on_bump: true
+  version: 3.5.0
   version_files:
   - package.json

.editorconfig

@@ -5,6 +5,8 @@ charset = utf-8
 end_of_line = lf
 indent_style = space
 indent_size = 2
-insert_final_newline = true
 tab_width = 2
 trim_trailing_whitespace = true
+
+[*.{scss,ts,tsx}]
+insert_final_newline = true

.env.example

@@ -1,4 +1,4 @@
+PORT=8080
 GOOGLE_ANALYTICS_MEASUREMENT_ID=G-XXXXXXX
 GOOGLE_API_KEY=
-GOOGLE_CLIENT_ID=
-HANDSONTABLE_LICENSE_KEY=non-commercial-and-evaluation
+GOOGLE_CLIENT_ID=

.gitignore

@@ -213,4 +213,5 @@ $RECYCLE.BIN/
 
 # End of https://www.toptal.com/developers/gitignore/api/macos,linux,windows,node,yarn
 
+build/
 *.scss.d.ts

src/@types/asset.d.ts → @types/assets.d.ts

@@ -14,8 +14,9 @@ declare module '*.png' {
 }
 
 declare module '*.svg' {
-  const src: string;
-  export default src;
+  import type React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
 }
 
 declare module '*.webp' {

CHANGELOG.md

@@ -1,3 +1,85 @@
+## v3.5.0 (2022-04-18)
+
+### Feat
+
+- **components**: add component `FileInput`
+- **store**: add middleware `createLoadSubscriptionOnEnableListener`
+- **subscription**: allow drag & drop to sort the subscriptions
+- **subscription**: update notification template
+- **subscription**: add middleware `createLoadSubscriptionRejectedNotifier`
+- **egg**: update style
+- **gapi**: add notifications for sign in / sign out
+- **clear-data**: replace alerts with notifications
+- **text-input**: add `onClear` to enable the clear button
+- **notification**: add cloud sync notifications
+- **label-form**: update form validation
+- **subscription-maker**: update form validation
+- **subscription**: add subscription list empty message
+- **subscription**: update subscription status icon style
+- **label-form**: update layout
+- **label-info**: update layout
+- **label-info**: update layout
+- **settings**: add standalone settings modal
+
+### Refactor
+
+- **components**: update style
+- **webpack**: update configs
+- **store**: remove unnecessary remote subscription loadings
+- **store**: update `loadRemoteSubscriptions()` to `loadSubscriptions()`
+- **store**: update subscription `load()`
+- **egg**: revise imports
+- **egg**: update styles
+- **modal**: handle backdrop click only when the modal is opened
+- **subscription-maker**: make `inputErrors` non-null
+- **slideshow**: change `Slideshow` from model to component
+- **slideshow**: type casting
+- **stylesheets**: add mixin `logo()`
+- revise imports
+- **constants**: update constants
+- **manage-data**: change alerts to notifications
+- **editor**: change empty message to notification
+- **notification**: add `createLocalNotification()` to trigger `createNotification()`
+- **subscription**: update `baseRemote` schema
+- **subscription**: update `Subscription` models and schemas
+- **editor**: use the given `id` first
+- **sniping**: update user registration formatting logic
+- **hooks**: update `useScreenshot`
+- **label-form**: reuse schemas
+- **editor**: remove unnecessary dependency
+- **components**: reuse `IconLink`
+- **stylesheets**: update mixin `glow-box`
+- **components**: reuse `IconLink`
+- **label-form**: memoize preview image style
+- **components**: add component `displayName`
+- **mutation**: update to `react-dom/client` API
+- **components**: update `key`
+- **components**: replace `useElementID` with `useId`
+- **settings**: update layout
+- **components**: pass through the props for extendibility
+- **components**: remove unnecessary `{true}`
+
+### Fix
+
+- **webpack**: webpack-dev-server WebSocket connection failure
+- **subscription**: update schema `serialized`
+- **merge**: `configB.subscriptionTemplates` is `undefined`
+- **stylesheets**: missing Tailwind variables `--tw-*`
+- **settings**: `autoFocus` not working in nested modal with focus trap
+- **hooks**: incorrect ref object
+- **modal**: incorrect ref objects
+- **editor**: missing min-width
+- **cloud-sync**: unexpected notification
+- **egg**: missing CSS modules
+- **subscription**: incorrect base remote subscription `homepage` schema
+- **editor**: unexpected `click` event on the remove button (#11)
+- **label-info**: incorrect clear data button text color in light mode
+- **components**: unexpected `displayName`
+- **label-info**: label info box being blocked by YouTube preview
+- **mutation**: incorrect `AddLabelButton` usage
+- **subscription**: missing `href` in homepage button
+- **modal**: unexpected focus trap deactivation
+
 ## v3.4.1 (2022-04-05)
 
 ### Fix

README.md

@@ -11,14 +11,14 @@
 
 ## Installation / Usage
 
-For the installation steps, usage and more details, please visit [Wiki](https://github.com/kitce/libel/wiki).  
+For the installation steps, usage and more details, please visit [Wiki](https://github.com/kitce/libel/wiki).
 關於詳細介紹、安裝教學及使用教學，請閱讀 [Wiki](https://github.com/kitce/libel/wiki)。
 
 ***
 
 ## Development
 
-*This section is for developers only.  
+*This section is for developers only.
 此章節只供開發者瀏覽。*
 
 ### Install dependencies
@@ -32,7 +32,7 @@ For a smooth development experience, you may want to execute the following comma
 ### Start development
 
 ```bash
-pnpm dev
+pnpm dev:main
 ```
 
 ### SCSS module typings
@@ -41,22 +41,13 @@ pnpm dev
 pnpm type:scss[:watch]
 ```
 
-### Data hosting
-
-```bash
-pnpm data
-```
-
-*Why the data is hosted on port `20630`?*  
-*To memorize [**the death of Hong Kong**](https://en.wikipedia.org/wiki/Hong_Kong_national_security_law) on 30/6/2020*
-
 ### Install
 
 When `webpack-dev-server` completed the first compilation, follow these steps to test on [LIHKG](https://lihkg.com/):
 
-1. Install [Tampermonkey](https://www.tampermonkey.net/)
+1. Install [Tampermonkey](https://www.tampermonkey.net/) (or your favourite userscript manager)
 2. Visit [http://localhost:8080/libel.proxy.user.js](http://localhost:8080/libel.proxy.user.js)
-3. Click **Install** / **Reinstall**
+3. Click **Install** / **Reinstall** / **Update**
 4. Go back to [LIHKG](https://lihkg.com/) and reload the page
 
 Whenever you made changes and `webpack-dev-server` recompiled the files, repeat step 2 to 4.

config/config.ts

@@ -1,7 +1,16 @@
 import { homepage } from '../package.json';
 
+export enum Directory {
+  Assets = 'assets',
+  Build = 'build',
+  Data = 'data',
+  Dist = 'dist'
+};
+
+export const port = parseInt(process.env.PORT || '8080');
+
 export const dev = process.env.NODE_ENV === 'development';
-export const debugEgg = process.env.DEBUG_EGG === 'true';
+export const debugEgg = process.env.EGG === 'true';
 
-export const publicURL = dev ? 'http://localhost:8080' : `${homepage}/dist`;
-export const publicDataURL = dev ? 'http://localhost:20630' : `${homepage}/data`;
+export const publicURL = dev ? `http://localhost:${port}` : homepage;
+export const publicDataURL = `${publicURL}/${Directory.Data}`;

config/env.ts

@@ -0,0 +1,3 @@
+import dotenv from 'dotenv';
+
+dotenv.config();

config/webpack/loaders/svg-loader.ts

@@ -0,0 +1,5 @@
+const loader = {
+  loader: '@svgr/webpack'
+};
+
+export default loader;

config/webpack/plugins/environment.ts

@@ -1,22 +1,19 @@
-import dotenv from 'dotenv';
 import { EnvironmentPlugin } from 'webpack';
 
-dotenv.config();
-
 const {
+  PORT,
   GOOGLE_ANALYTICS_MEASUREMENT_ID,
   GOOGLE_API_KEY,
-  GOOGLE_CLIENT_ID,
-  HANDSONTABLE_LICENSE_KEY
+  GOOGLE_CLIENT_ID
 } = process.env;
 
 const plugin = new EnvironmentPlugin({
   NODE_ENV: 'development',
-  DEBUG_EGG: 'false',
+  EGG: 'false',
+  PORT,
   GOOGLE_ANALYTICS_MEASUREMENT_ID,
   GOOGLE_API_KEY,
-  GOOGLE_CLIENT_ID,
-  HANDSONTABLE_LICENSE_KEY
+  GOOGLE_CLIENT_ID
 });
 
 export default plugin;

config/webpack/plugins/userscript.ts

@@ -1,6 +1,11 @@
+import path from 'path';
+import { pathToFileURL } from 'url';
 import WebpackUserscript from 'webpack-userscript';
 import { author, description, displayName, homepage, repository, version } from '../../../package.json';
-import { dev } from '../../config';
+import { dev, Directory } from '../../config';
+
+const buildDirectoryPath = path.join(process.cwd(), Directory.Build);
+const baseBuildDirectoryURL = pathToFileURL(buildDirectoryPath);
 
 const plugin = new WebpackUserscript({
   headers: {
@@ -12,11 +17,22 @@ const plugin = new WebpackUserscript({
     namespace: repository.url,
     // noframes: true,
     include: 'https://lihkg.com/*',
+    exclude: [
+      // 'https://lihkg.com/me/2fa/totp/create',
+      // 'https://lihkg.com/me/auto-logout/setting',
+      // 'https://lihkg.com/me/deactivate',
+      // 'https://lihkg.com/me/login-email/edit',
+      // 'https://lihkg.com/me/password/edit',
+      // 'https://lihkg.com/me/profile/edit',
+      'https://lihkg.com/me/*',
+      'https://lihkg.com/stickers'
+    ],
     grant: 'none',
     'run-at': 'document-start'
   },
   proxyScript: {
     enable: dev,
+    baseUrl: baseBuildDirectoryURL.href,
     filename: '[name].proxy.user.js'
   }
 });

config/webpack/rules/asset.ts

@@ -1,11 +1,20 @@
-import webpack from 'webpack';
+import type webpack from 'webpack';
+import { dev } from '../../config';
+import svgLoader from '../loaders/svg-loader';
 
 export const resource: webpack.RuleSetRule = {
   test: /\.(gif|jpg|png|svg|webp)$/i,
-  type: 'asset/resource'
+  type: 'asset/resource',
+  generator: { emit: false }
 };
 
 export const source: webpack.RuleSetRule = {
   test: /\.txt$/i,
   type: 'asset/source'
 };
+
+export const svg: webpack.RuleSetRule = {
+  test: /\.svg$/i,
+  issuer: /\.[jt]sx?$/,
+  use: [svgLoader]
+};

config/webpack/rules/scss.ts

@@ -1,4 +1,4 @@
-import webpack from 'webpack';
+import type webpack from 'webpack';
 import cssLoader from '../loaders/css-loader';
 import postcssLoader from '../loaders/postcss-loader';
 import sassLoader from '../loaders/sass-loader';

config/webpack/rules/typescript.ts

@@ -1,4 +1,4 @@
-import webpack from 'webpack';
+import type webpack from 'webpack';
 import tsLoader from '../loaders/ts-loader';
 
 const rule: webpack.RuleSetRule = {

config/webpack/webpack.config.base.ts

@@ -1,7 +1,7 @@
-import webpack from 'webpack';
-import { publicURL } from './../config';
+import type webpack from 'webpack';
+import { publicURL } from '../config';
 import environment from './plugins/environment';
-import { resource, source } from './rules/asset';
+import { resource, source, svg } from './rules/asset';
 import scss from './rules/scss';
 import typescript from './rules/typescript';
 
@@ -10,12 +10,15 @@ const config: webpack.Configuration = {
     extensions: ['.ts', '.tsx', '.js']
   },
   output: {
-    publicPath: `${publicURL}/`
+    filename: '[name].js',
+    publicPath: `${publicURL}/`,
+    assetModuleFilename: '[file]'
   },
   module: {
     rules: [
       resource,
       source,
+      svg,
       scss,
       typescript
     ]

config/webpack/webpack.config.dev.ts

@@ -1,16 +1,17 @@
-import { Configuration as WebpackConfiguration } from 'webpack';
-import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
+import '../env'; // load the environment variables at the beginning
+import path from 'path';
+import type webpack from 'webpack';
 import merge from 'webpack-merge';
-import egg from './webpack.config.egg';
-import main from './webpack.config.main';
+import { Directory } from '../config';
+import { dev as egg } from './webpack.config.egg';
+import { dev as main } from './webpack.config.main';
 
-interface IConfiguration extends WebpackConfiguration {
-  devServer?: WebpackDevServerConfiguration;
-}
-
-const dev: IConfiguration = {
+const dev: webpack.Configuration = {
   mode: 'development',
-  devtool: 'eval-cheap-source-map'
+  devtool: 'eval-cheap-source-map',
+  output: {
+    path: path.join(process.cwd(), Directory.Build),
+  }
 };
 
 const config = [