refactor: TypeScript, SCSS and Parcel (#7)

Co-authored-by: ksqsf <i@ksqsf.moe>

.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'standard'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module'
+  },
+  plugins: [
+    '@typescript-eslint',
+    'eslint-plugin-html'
+  ],
+  rules: {
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-undef": 0,
+  }
+}

.github/workflows/ci.yml

@@ -32,6 +32,20 @@ jobs:
         with:
           submodules: true
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Install node dependencies
+        run: |
+          npm i -g pnpm
+          pnpm i
+
+      - name: Lint and Check type
+        run: |
+          pnpm run lint
+          pnpm run check
+
       - name: Install dependencies
         run: |
           brew install ninja

.gitignore

@@ -2,3 +2,7 @@
 build
 cache
 include/html_template.hpp
+node_modules
+pnpm-lock.yaml
+dist
+.parcel-cache

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard-scss"
+}

CMakeLists.txt

@@ -15,14 +15,27 @@ pkg_check_modules(NlohmannJson REQUIRED IMPORTED_TARGET "nlohmann_json")
 
 include_directories(webview)
 add_custom_target(patch_webview
-    COMMAND git reset --hard
-    COMMAND git apply "${PROJECT_SOURCE_DIR}/patches/webview.patch"
+    COMMAND
+      [ ! -f "${PROJECT_SOURCE_DIR}/.patched" ]
+        && git reset --hard
+        && git apply "${PROJECT_SOURCE_DIR}/patches/webview.patch"
+        && touch "${PROJECT_SOURCE_DIR}/.patched"
+      || [ -f "${PROJECT_SOURCE_DIR}/.patched" ]
     WORKING_DIRECTORY "${PROJECT_SOURCE_DIR}/webview"
+    COMMENT "Patching webview..."
 )
 
-file(READ "${PROJECT_SOURCE_DIR}/index.html" HTML_TEMPLATE)
-configure_file("${PROJECT_SOURCE_DIR}/include/html_template.hpp.in"
-    "${PROJECT_SOURCE_DIR}/include/html_template.hpp"
+file(GLOB HTML_SOURCES CONFIGURE_DEPENDS "page/*")
+add_custom_command(
+    OUTPUT ${PROJECT_SOURCE_DIR}/include/html_template.hpp
+    COMMAND pnpm run clean && pnpm run build
+    COMMAND xxd -n HTML_TEMPLATE -i "${PROJECT_SOURCE_DIR}/dist/index.html" > "${PROJECT_SOURCE_DIR}/include/html_template.hpp"
+    DEPENDS ${HTML_SOURCES}
+    WORKING_DIRECTORY ${PROJECT_SOURCE_DIR}
+    COMMENT "Generating the HTML template..."
+)
+add_custom_target(GenerateHTML ALL
+    DEPENDS ${PROJECT_SOURCE_DIR}/include/html_template.hpp
 )
 
 add_subdirectory(src)

README.md

@@ -5,11 +5,22 @@ powered by [webview](https://github.com/webview/webview).
 
 It can be developed independently of fcitx5.
 
-## Tweak style
-To change style, you don't need to build the project.
-Just edit [index.html](index.html) and view it in a browser.
+## Install Node dependencies
 
-On macOS, it's best to use Safari since the real candidate window is rendered by WebKit.
+You may use [nvm](https://github.com/nvm-sh/nvm)
+to install node, then
+
+```sh
+npm i -g pnpm
+pnpm i
+```
+
+## Tweak style
+```sh
+npm run dev
+```
+Open http://localhost:1234 with Safari,
+as the real candidate window on macOS is rendered by WebKit.
 
 Execute the following JavaScript code to show candidates and more:
 ```js
@@ -28,6 +39,10 @@ setCandidates([], [], -1)
 updateInputPanel("", "A", "")
 ```
 
+To change style, just edit [user.scss](./page/user.scss) and refresh the page.
+In order to override predefined style in [macos.scss](./page/macos.scss),
+add `div` to the selectors so it has higher precedence.
+
 ## Build
 ```sh
 ./install-deps.sh

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "fcitx5-webview",
+  "version": "0.1.0",
+  "description": "Candidate window for desktop, based on webview",
+  "type": "module",
+  "scripts": {
+    "dev": "parcel page/index.html",
+    "lint": "pnpm run eslint && pnpm run stylelint",
+    "lint:fix": "pnpm run eslint:fix && pnpm run stylelint:fix",
+    "eslint": "eslint --ext .ts,.html page",
+    "eslint:fix": "eslint --fix --ext .ts,.html page",
+    "stylelint": "stylelint page/*.scss",
+    "stylelint:fix": "stylelint --fix page/*.scss",
+    "check": "tsc --noEmit",
+    "clean": "rm -rf dist .parcel-cache",
+    "build": "parcel build page/index.html"
+  },
+  "license": "GPL-3.0-or-later",
+  "devDependencies": {
+    "@parcel/transformer-sass": "2.11.0",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "eslint": "^8.56.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-html": "^7.1.0",
+    "parcel": "^2.11.0",
+    "stylelint": "^16.2.0",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "typescript": "^5.3.3"
+  }
+}