From 5479d3ec6ee1f9eee3a8577d45f34592b8ffbefd Mon Sep 17 00:00:00 2001 From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com> Date: Mon, 8 Apr 2024 20:09:15 +0800 Subject: [PATCH] chore: web build size optimization (#5071) * chore: deploy test web fix: update nginx.conf fix: support https * fix: support wasm gzip * chore: optimize web build size * fix: code review --- .github/workflows/deploy_test_web.yaml | 73 +++++ .github/workflows/web2_ci.yaml | 17 +- frontend/appflowy_web_app/.eslintignore | 3 +- frontend/appflowy_web_app/.eslintignore.web | 3 +- frontend/appflowy_web_app/Dockerfile | 23 ++ frontend/appflowy_web_app/README.md | 71 +++++ frontend/appflowy_web_app/beta.env | 3 + frontend/appflowy_web_app/nginx.conf | 78 ++++++ frontend/appflowy_web_app/package.json | 9 +- frontend/appflowy_web_app/pnpm-lock.yaml | 249 ++++++++++++++++++ frontend/appflowy_web_app/src/AppTheme.tsx | 5 +- .../services/js-services/auth.service.ts | 7 +- .../services/wasm-services/cloud.service.ts | 45 ++-- .../src/components/auth/LoginButtonGroup.tsx | 12 +- .../src/components/auth/ProtectedRoutes.tsx | 15 +- .../appflowy_web_app/src/stores/app/slice.ts | 78 +++--- frontend/appflowy_web_app/test.env | 3 + frontend/appflowy_web_app/vite.config.ts | 89 +++++-- 18 files changed, 684 insertions(+), 99 deletions(-) create mode 100644 .github/workflows/deploy_test_web.yaml create mode 100644 frontend/appflowy_web_app/Dockerfile create mode 100644 frontend/appflowy_web_app/beta.env create mode 100644 frontend/appflowy_web_app/nginx.conf create mode 100644 frontend/appflowy_web_app/test.env diff --git a/.github/workflows/deploy_test_web.yaml b/.github/workflows/deploy_test_web.yaml new file mode 100644 index 0000000000..12d25d3d25 --- /dev/null +++ b/.github/workflows/deploy_test_web.yaml @@ -0,0 +1,73 @@ +name: Deploy Web (Test) + +on: + push: + branches: + - build/test + - main +env: + NODE_VERSION: "18.16.0" + PNPM_VERSION: "8.5.0" + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true + +jobs: + deploy: + runs-on: ubuntu-latest + env: + SSH_PRIVATE_KEY: ${{ secrets.WEB_TEST_SSH_PRIVATE_KEY }} + REMOTE_HOST: ${{ secrets.WEB_TEST_REMOTE_HOST }} + REMOTE_USER: ${{ secrets.WEB_TEST_REMOTE_USER }} + SSL_CERTIFICATE: ${{ secrets.WEB_TEST_SSL_CERTIFICATE }} + SSL_CERTIFICATE_KEY: ${{ secrets.WEB_TEST_SSL_CERTIFICATE_KEY }} + ENV_FILE: test.env + steps: + - uses: actions/checkout@v4 + - name: setup node + uses: actions/setup-node@v3 + with: + node-version: ${{ env.NODE_VERSION }} + - name: setup pnpm + uses: pnpm/action-setup@v2 + with: + version: ${{ env.PNPM_VERSION }} + - name: Node_modules cache + uses: actions/cache@v2 + with: + path: frontend/appflowy_web_app/node_modules + key: node-modules-${{ runner.os }} + - name: install frontend dependencies + working-directory: frontend/appflowy_web_app + run: | + pnpm install + - name: copy env file + working-directory: frontend/appflowy_web_app + run: | + cp ${{ env.ENV_FILE }} .env + - name: test and lint + working-directory: frontend/appflowy_web_app + run: | + pnpm run lint + - name: build + working-directory: frontend/appflowy_web_app + run: | + pnpm run build + - name: generate SSL certificate + run: | + echo "${{ env.SSL_CERTIFICATE }}" > nginx-signed.crt + echo "${{ env.SSL_CERTIFICATE_KEY }}" > nginx-signed.key + - name: Deploy to EC2 + uses: easingthemes/ssh-deploy@main + with: + SSH_PRIVATE_KEY: ${{ env.SSH_PRIVATE_KEY }} + ARGS: "-rlgoDzvc -i" + SOURCE: "frontend/appflowy_web_app/dist frontend/appflowy_web_app/Dockerfile frontend/appflowy_web_app/nginx.conf frontend/appflowy_web_app/.env nginx-signed.crt nginx-signed.key" + REMOTE_HOST: ${{ env.REMOTE_HOST }} + REMOTE_USER: ${{ env.REMOTE_USER }} + EXCLUDE: "frontend/appflowy_web_app/dist/, frontend/appflowy_web_app/node_modules/" + SCRIPT_AFTER: | + docker build -t appflowy-web-app . + docker rm -f appflowy-web-app || true + docker run -d -p 80:80 -p 443:443 --name appflowy-web-app appflowy-web-app diff --git a/.github/workflows/web2_ci.yaml b/.github/workflows/web2_ci.yaml index 31d6f5d8b3..d134cd712f 100644 --- a/.github/workflows/web2_ci.yaml +++ b/.github/workflows/web2_ci.yaml @@ -47,6 +47,7 @@ jobs: with: path: frontend/appflowy_web_app/node_modules key: node-modules-${{ runner.os }} + - name: install frontend dependencies working-directory: frontend/appflowy_web_app run: | @@ -55,7 +56,19 @@ jobs: working-directory: frontend/appflowy_web_app run: | pnpm run lint - - name: build + - name: build and analyze working-directory: frontend/appflowy_web_app run: | - pnpm run build \ No newline at end of file + pnpm run analyze >> analyze-size.txt + - name: Upload analyze-size.txt + uses: actions/upload-artifact@v4 + with: + name: analyze-size.txt + path: frontend/appflowy_web_app/analyze-size.txt + retention-days: 30 + - name: Upload stats.html + uses: actions/upload-artifact@v4 + with: + name: stats.html + path: frontend/appflowy_web_app/dist/stats.html + retention-days: 30 diff --git a/frontend/appflowy_web_app/.eslintignore b/frontend/appflowy_web_app/.eslintignore index 7827beec6c..6061ede6d5 100644 --- a/frontend/appflowy_web_app/.eslintignore +++ b/frontend/appflowy_web_app/.eslintignore @@ -3,4 +3,5 @@ dist/ src-tauri/ .eslintrc.cjs tsconfig.json -**/backend/** \ No newline at end of file +**/backend/** +vite.config.ts \ No newline at end of file diff --git a/frontend/appflowy_web_app/.eslintignore.web b/frontend/appflowy_web_app/.eslintignore.web index d13ba84467..4cee523276 100644 --- a/frontend/appflowy_web_app/.eslintignore.web +++ b/frontend/appflowy_web_app/.eslintignore.web @@ -3,4 +3,5 @@ dist/ src-tauri/ .eslintrc.cjs tsconfig.json -src/application/services/tauri-services/ \ No newline at end of file +src/application/services/tauri-services/ +vite.config.ts \ No newline at end of file diff --git a/frontend/appflowy_web_app/Dockerfile b/frontend/appflowy_web_app/Dockerfile new file mode 100644 index 0000000000..e7094ffe14 --- /dev/null +++ b/frontend/appflowy_web_app/Dockerfile @@ -0,0 +1,23 @@ +FROM node:latest + +RUN apt-get update && \ + apt-get install -y nginx + +RUN addgroup --system nginx && \ + adduser --system --no-create-home --disabled-login --ingroup nginx nginx + +RUN apt-get clean && rm -rf /var/lib/apt/lists/* + + +COPY dist/ /usr/share/nginx/html/ + +COPY nginx.conf /etc/nginx/nginx.conf + +COPY nginx-signed.crt /etc/ssl/certs/nginx-signed.crt +COPY nginx-signed.key /etc/ssl/private/nginx-signed.key + +RUN chown -R nginx:nginx /etc/ssl/certs/nginx-signed.crt /etc/ssl/private/nginx-signed.key + +EXPOSE 80 443 + +CMD ["nginx", "-g", "daemon off;"] diff --git a/frontend/appflowy_web_app/README.md b/frontend/appflowy_web_app/README.md index fa55e54fbc..f5ac3e4832 100644 --- a/frontend/appflowy_web_app/README.md +++ b/frontend/appflowy_web_app/README.md @@ -194,6 +194,77 @@ Don't modify the theme file in `frontend/appflowy_web_app/src/styles/variables` } ``` +### ๐Ÿ“ฆ Deployment + +Use the AppFlowy CI/CD pipeline to deploy the application to the test and production environments. + +- Push the changes to the main branch +- Deploy Test Environment + - Automatically, the test environment will be deployed if merged to the main branch or build/test branch +- Deploy Production Environment + - Navigate to the Actions tab + - Click on the workflow and select the Run workflow + - Enter the options + - Click on the Run workflow button + +#### ๐Ÿ“ฆ Deployment (Self-Hosted) + +##### Pre-requisites + +Please ensure you have learned about: + +- [Deploy Web application on AWS Cloud using EC2 Instance](https://www.youtube.com/watch?v=gWVIIU1ev0Y) +- [How to Install and Use Rsync Command](https://operavps.com/docs/install-rsync-command-in-linux/) +- [How to Use ssh-keygen to Generate a New SSH Key?](https://www.ssh.com/academy/ssh/keygen) +- [Linux post-installation steps for Docker Engine](https://docs.docker.com/engine/install/linux-postinstall/) +- [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html) + +And then follow the steps below: + +1. Ensure you have the following installed on your server: + - Docker: [Install Docker](https://docs.docker.com/engine/install/) + - Rsync: [Install Rsync](https://operavps.com/docs/install-rsync-command-in-linux/) + +2. Create a new user for deploy, and generate an SSH key for the user + + ```bash + sudo adduser appflowy(or any name) + sudo su - appflowy + mkdir ~/.ssh + chmod 700 ~/.ssh + ssh-keygen -t rsa + chmod 600 ~/.ssh/authorized_keys + # add the user to the docker group, to run docker commands without sudo + sudo usermod -aG docker ${USER} + ``` + - visit the `~/.ssh/id_rsa` and `~/.ssh/id_rsa.pub` to get the private and public key respectively + - add the public key to the `~/.ssh/authorized_keys` file + - ensure the private key is kept safe + - exit and login back to the server with the new + user: `ssh -i your-existing-key.pem ec2-user@your-instance-public-dns` + +3. Clone the AppFlowy repository + +4. Set the following secrets in your + repository, have to + know [Using secrets in GitHub Actions](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions) + +> Note: Test Environment: prefix the secret with `WEB_TEST_` and Production Environment: prefix the secret with `WEB_` + +> for example, `WEB_TEST_SSH_PRIVATE_KEY` and `WEB_SSH_PRIVATE_KEY` + +- `SSH_PRIVATE_KEY`: The private key generated in step 2: cat ~/.ssh/id_rsa +- `REMOTE_HOST`: The host of the server: `your-instance-public-dns` or `your-instance-ip` +- `REMOTE_USER`: The user created in step 2: `appflowy` +- `SSL_CERTIFICATE`: The SSL certificate for the + server - [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html) +- `SSL_CERTIFICATE_KEY`: The SSL certificate key for the + server - [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html) + +5. Run the deployment workflow to deploy the application(production or test environment) + +> Note: the test server will **automatically** deploy if merged to the main branch or build/test branch + ### ๐Ÿงช Testing > To be Continued... diff --git a/frontend/appflowy_web_app/beta.env b/frontend/appflowy_web_app/beta.env new file mode 100644 index 0000000000..ab31b57db7 --- /dev/null +++ b/frontend/appflowy_web_app/beta.env @@ -0,0 +1,3 @@ +AF_WS_URL=wss://beta.appflowy.cloud/ws/v1 +AF_BASE_URL=https://beta.appflowy.cloud +AF_GOTRUE_URL=https://beta.appflowy.cloud/gotrue \ No newline at end of file diff --git a/frontend/appflowy_web_app/nginx.conf b/frontend/appflowy_web_app/nginx.conf new file mode 100644 index 0000000000..a426f7faa2 --- /dev/null +++ b/frontend/appflowy_web_app/nginx.conf @@ -0,0 +1,78 @@ +# nginx.conf +user nginx; +worker_processes auto; + +error_log /var/log/nginx/error.log notice; +pid /var/run/nginx.pid; + +events { + worker_connections 1024; +} + +http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + + log_format main '$remote_addr - $remote_user [$time_local] "$request" ' + '$status $body_bytes_sent "$http_referer" ' + '"$http_user_agent" "$http_x_forwarded_for"'; + + access_log /var/log/nginx/access.log main; + + sendfile on; + #tcp_nopush on; + + keepalive_timeout 65; + + gzip on; + + gzip_static on; + + gzip_http_version 1.0; + + gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript application/wasm; + + # Existing server block for HTTP + server { + listen 80; + server_name localhost; + #server_name appflowy.com *.appflowy.com; + + location / { + return 301 https://$host$request_uri; + } + + } + + # Additional server block for HTTPS + server { + listen 443 ssl http2; + listen [::]:443 ssl http2; + server_name localhost; + #server_name appflowy.com *.appflowy.com; + + ssl_certificate /etc/ssl/certs/nginx-signed.crt; + ssl_certificate_key /etc/ssl/private/nginx-signed.key; + + ssl_session_cache shared:SSL:1m; + ssl_session_timeout 5m; + + ssl_ciphers HIGH:!aNULL:!MD5; + ssl_prefer_server_ciphers on; + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + } + + error_page 404 /404.html; + location = /404.html { + root /usr/share/nginx/html; + } + + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } + } +} diff --git a/frontend/appflowy_web_app/package.json b/frontend/appflowy_web_app/package.json index 7fb9b5bddf..3ab82541d5 100644 --- a/frontend/appflowy_web_app/package.json +++ b/frontend/appflowy_web_app/package.json @@ -14,7 +14,8 @@ "tauri:dev": "tauri dev", "css:variables": "node style-dictionary/config.cjs", "sync:i18n": "node scripts/i18n.cjs", - "link:client-api": "rm -rf node_modules/.vite && node scripts/create-symlink.cjs" + "link:client-api": "rm -rf node_modules/.vite && node scripts/create-symlink.cjs", + "analyze": "ANALYZE_MODE=true vite build" }, "dependencies": { "@appflowyinc/client-api-wasm": "^0.0.2", @@ -117,6 +118,7 @@ "postcss": "^8.4.21", "prettier": "2.8.4", "prettier-plugin-tailwindcss": "^0.2.2", + "rollup-plugin-visualizer": "^5.12.0", "style-dictionary": "^3.9.2", "tailwindcss": "^3.2.7", "ts-jest": "^29.1.1", @@ -125,7 +127,10 @@ "typescript": "4.9.5", "uuid": "^9.0.0", "vite": "^5.2.0", + "vite-plugin-compression2": "^1.0.0", + "vite-plugin-importer": "^0.2.5", "vite-plugin-svgr": "^3.2.0", - "vite-plugin-terminal": "^1.2.0" + "vite-plugin-terminal": "^1.2.0", + "vite-plugin-total-bundle-size": "^1.0.7" } } diff --git a/frontend/appflowy_web_app/pnpm-lock.yaml b/frontend/appflowy_web_app/pnpm-lock.yaml index f6386be35a..f1cc2195ee 100644 --- a/frontend/appflowy_web_app/pnpm-lock.yaml +++ b/frontend/appflowy_web_app/pnpm-lock.yaml @@ -297,6 +297,9 @@ devDependencies: prettier-plugin-tailwindcss: specifier: ^0.2.2 version: 0.2.2(prettier@2.8.4) + rollup-plugin-visualizer: + specifier: ^5.12.0 + version: 5.12.0 style-dictionary: specifier: ^3.9.2 version: 3.9.2 @@ -321,12 +324,21 @@ devDependencies: vite: specifier: ^5.2.0 version: 5.2.0(@types/node@20.11.30)(sass@1.70.0) + vite-plugin-compression2: + specifier: ^1.0.0 + version: 1.0.0 + vite-plugin-importer: + specifier: ^0.2.5 + version: 0.2.5 vite-plugin-svgr: specifier: ^3.2.0 version: 3.2.0(typescript@4.9.5)(vite@5.2.0) vite-plugin-terminal: specifier: ^1.2.0 version: 1.2.0(vite@5.2.0) + vite-plugin-total-bundle-size: + specifier: ^1.0.7 + version: 1.0.7(vite@5.2.0) packages: @@ -2916,6 +2928,10 @@ packages: - debug dev: false + /b4a@1.6.6: + resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==} + dev: true + /babel-jest@29.6.2(@babel/core@7.24.3): resolution: {integrity: sha512-BYCzImLos6J3BH/+HvUCHG1dTf2MzmAB4jaVxHV+29RZLjR29XuYTmsf2sdDwkrb+FczkGo3kOhE7ga6sI0P4A==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -2951,6 +2967,12 @@ packages: transitivePeerDependencies: - supports-color + /babel-plugin-import@1.13.8: + resolution: {integrity: sha512-36babpjra5m3gca44V6tSTomeBlPA7cHUynrE2WiQIm3rEGD9xy28MKsx5IdO45EbnpJY7Jrgd00C6Dwt/l/2Q==} + dependencies: + '@babel/helper-module-imports': 7.24.3 + dev: true + /babel-plugin-istanbul@6.1.1: resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==} engines: {node: '>=8'} @@ -3013,6 +3035,12 @@ packages: /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + /bare-events@2.2.2: + resolution: {integrity: sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==} + requiresBuild: true + dev: true + optional: true + /binary-extensions@2.3.0: resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} engines: {node: '>=8'} @@ -3039,6 +3067,12 @@ packages: dependencies: fill-range: 7.0.1 + /browserify-zlib@0.1.4: + resolution: {integrity: sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==} + dependencies: + pako: 0.2.9 + dev: true + /browserslist@4.23.0: resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -3124,6 +3158,11 @@ packages: ansi-styles: 4.3.0 supports-color: 7.2.0 + /chalk@5.3.0: + resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==} + engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} + dev: true + /change-case@4.1.2: resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==} dependencies: @@ -3254,6 +3293,10 @@ packages: /convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + /core-util-is@1.0.3: + resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} + dev: true + /cosmiconfig@7.1.0: resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} engines: {node: '>=10'} @@ -3480,6 +3523,11 @@ packages: es-errors: 1.3.0 gopd: 1.0.1 + /define-lazy-prop@2.0.0: + resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==} + engines: {node: '>=8'} + dev: true + /define-properties@1.2.1: resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} engines: {node: '>= 0.4'} @@ -3623,6 +3671,15 @@ packages: tslib: 2.6.2 dev: true + /duplexify@3.7.1: + resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==} + dependencies: + end-of-stream: 1.4.4 + inherits: 2.0.4 + readable-stream: 2.3.8 + stream-shift: 1.0.3 + dev: true + /dynamic-dedupe@0.3.0: resolution: {integrity: sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==} dependencies: @@ -3655,6 +3712,12 @@ packages: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} dev: true + /end-of-stream@1.4.4: + resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==} + dependencies: + once: 1.4.0 + dev: true + /entities@4.5.0: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} @@ -4016,6 +4079,10 @@ packages: resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} dev: false + /fast-fifo@1.3.2: + resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==} + dev: true + /fast-glob@3.3.2: resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} engines: {node: '>=8.6.0'} @@ -4289,6 +4356,18 @@ packages: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} dev: true + /gunzip-maybe@1.4.2: + resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==} + hasBin: true + dependencies: + browserify-zlib: 0.1.4 + is-deflate: 1.0.0 + is-gzip: 1.0.0 + peek-stream: 1.1.3 + pumpify: 1.5.1 + through2: 2.0.5 + dev: true + /has-bigints@1.0.2: resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==} dev: true @@ -4522,6 +4601,16 @@ packages: dependencies: has-tostringtag: 1.0.2 + /is-deflate@1.0.0: + resolution: {integrity: sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==} + dev: true + + /is-docker@2.2.1: + resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==} + engines: {node: '>=8'} + hasBin: true + dev: true + /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} @@ -4540,6 +4629,11 @@ packages: dependencies: is-extglob: 2.1.1 + /is-gzip@1.0.0: + resolution: {integrity: sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==} + engines: {node: '>=0.10.0'} + dev: true + /is-hotkey@0.2.0: resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==} dev: false @@ -4619,6 +4713,17 @@ packages: call-bind: 1.0.7 dev: true + /is-wsl@2.2.0: + resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==} + engines: {node: '>=8'} + dependencies: + is-docker: 2.2.1 + dev: true + + /isarray@1.0.0: + resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==} + dev: true + /isarray@2.0.5: resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==} dev: true @@ -5586,6 +5691,15 @@ packages: dependencies: mimic-fn: 2.1.0 + /open@8.4.2: + resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==} + engines: {node: '>=12'} + dependencies: + define-lazy-prop: 2.0.0 + is-docker: 2.2.1 + is-wsl: 2.2.0 + dev: true + /optionator@0.9.3: resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==} engines: {node: '>= 0.8.0'} @@ -5627,6 +5741,10 @@ packages: resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==} engines: {node: '>=6'} + /pako@0.2.9: + resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==} + dev: true + /param-case@3.0.4: resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==} dependencies: @@ -5699,6 +5817,14 @@ packages: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} engines: {node: '>=8'} + /peek-stream@1.1.3: + resolution: {integrity: sha512-FhJ+YbOSBb9/rIl2ZeE/QHEsWn7PqNYt8ARAY3kIgNGOk13g9FGyIY6JIl/xB/3TFRVoTv5as0l11weORrTekA==} + dependencies: + buffer-from: 1.1.2 + duplexify: 3.7.1 + through2: 2.0.5 + dev: true + /performance-now@2.1.0: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} dev: false @@ -5888,6 +6014,10 @@ packages: engines: {node: '>=6'} dev: false + /process-nextick-args@2.0.1: + resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} + dev: true + /prompts@2.4.2: resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} engines: {node: '>= 6'} @@ -5919,6 +6049,21 @@ packages: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} dev: true + /pump@2.0.1: + resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==} + dependencies: + end-of-stream: 1.4.4 + once: 1.4.0 + dev: true + + /pumpify@1.5.1: + resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==} + dependencies: + duplexify: 3.7.1 + inherits: 2.0.4 + pump: 2.0.1 + dev: true + /punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -5935,6 +6080,10 @@ packages: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true + /queue-tick@1.0.1: + resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==} + dev: true + /quick-lru@5.1.1: resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==} engines: {node: '>=10'} @@ -6411,6 +6560,18 @@ packages: pify: 2.3.0 dev: true + /readable-stream@2.3.8: + resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==} + dependencies: + core-util-is: 1.0.3 + inherits: 2.0.4 + isarray: 1.0.0 + process-nextick-args: 2.0.1 + safe-buffer: 5.1.2 + string_decoder: 1.1.1 + util-deprecate: 1.0.2 + dev: true + /readdirp@3.6.0: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} @@ -6517,6 +6678,22 @@ packages: glob: 7.2.3 dev: true + /rollup-plugin-visualizer@5.12.0: + resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==} + engines: {node: '>=14'} + hasBin: true + peerDependencies: + rollup: 2.x || 3.x || 4.x + peerDependenciesMeta: + rollup: + optional: true + dependencies: + open: 8.4.2 + picomatch: 2.3.1 + source-map: 0.7.4 + yargs: 17.7.2 + dev: true + /rollup@4.13.2: resolution: {integrity: sha512-MIlLgsdMprDBXC+4hsPgzWUasLO9CE4zOkj/u6j+Z6j5A4zRY+CtiXAdJyPtgCsc42g658Aeh1DlrdVEJhsL2g==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} @@ -6563,6 +6740,10 @@ packages: isarray: 2.0.5 dev: true + /safe-buffer@5.1.2: + resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==} + dev: true + /safe-regex-test@1.0.3: resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==} engines: {node: '>= 0.4'} @@ -6761,6 +6942,11 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} + /source-map@0.7.4: + resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} + engines: {node: '>= 8'} + dev: true + /sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} @@ -6770,6 +6956,19 @@ packages: dependencies: escape-string-regexp: 2.0.0 + /stream-shift@1.0.3: + resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==} + dev: true + + /streamx@2.16.1: + resolution: {integrity: sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==} + dependencies: + fast-fifo: 1.3.2 + queue-tick: 1.0.1 + optionalDependencies: + bare-events: 2.2.2 + dev: true + /string-length@4.0.2: resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==} engines: {node: '>=10'} @@ -6839,6 +7038,12 @@ packages: es-object-atoms: 1.0.0 dev: true + /string_decoder@1.1.1: + resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==} + dependencies: + safe-buffer: 5.1.2 + dev: true + /strip-ansi@6.0.1: resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} engines: {node: '>=8'} @@ -6972,6 +7177,14 @@ packages: - ts-node dev: true + /tar-stream@3.1.7: + resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==} + dependencies: + b4a: 1.6.6 + fast-fifo: 1.3.2 + streamx: 2.16.1 + dev: true + /test-exclude@6.0.0: resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==} engines: {node: '>=8'} @@ -6984,6 +7197,13 @@ packages: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true + /through2@2.0.5: + resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==} + dependencies: + readable-stream: 2.3.8 + xtend: 4.0.2 + dev: true + /tiny-invariant@1.3.1: resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==} dev: false @@ -7386,6 +7606,26 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false + /vite-plugin-compression2@1.0.0: + resolution: {integrity: sha512-42XNp6FjxE0JIecxj1fdi770pLhYm3MJhBUAod9EszTgDg9C4LDOgBzWcj/0K52KfJrpRXwUsWV6kqTDuoCfLA==} + dependencies: + '@rollup/pluginutils': 5.1.0 + gunzip-maybe: 1.4.2 + tar-stream: 3.1.7 + transitivePeerDependencies: + - rollup + dev: true + + /vite-plugin-importer@0.2.5: + resolution: {integrity: sha512-6OtqJmVwnfw8+B4OIh7pIdXs+jLkN7g5PIqmZdpgrMYjIFMiZrcMB1zlyUQSTokKGC90KwXviO/lq1hcUBUG3Q==} + dependencies: + '@babel/core': 7.24.3 + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.3) + babel-plugin-import: 1.13.8 + transitivePeerDependencies: + - supports-color + dev: true + /vite-plugin-svgr@3.2.0(typescript@4.9.5)(vite@5.2.0): resolution: {integrity: sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==} peerDependencies: @@ -7418,6 +7658,15 @@ packages: - supports-color dev: true + /vite-plugin-total-bundle-size@1.0.7(vite@5.2.0): + resolution: {integrity: sha512-ritAi5hRcuNonHP1wquvzqkZHGpOqRpWiMoEQQDJ3DLYuuVAS3THKyIGv7QSGig5nT+xuMYTLUamBu3Legaipg==} + peerDependencies: + vite: '>=5.0.0' + dependencies: + chalk: 5.3.0 + vite: 5.2.0(@types/node@20.11.30)(sass@1.70.0) + dev: true + /vite-plugin-wasm@3.3.0(vite@5.2.0): resolution: {integrity: sha512-tVhz6w+W9MVsOCHzxo6SSMSswCeIw4HTrXEi6qL3IRzATl83jl09JVO1djBqPSwfjgnpVHNLYcaMbaDX5WB/pg==} peerDependencies: diff --git a/frontend/appflowy_web_app/src/AppTheme.tsx b/frontend/appflowy_web_app/src/AppTheme.tsx index b55daaa9c9..3e3259b86d 100644 --- a/frontend/appflowy_web_app/src/AppTheme.tsx +++ b/frontend/appflowy_web_app/src/AppTheme.tsx @@ -1,7 +1,8 @@ import React, { useMemo } from 'react'; -import { createTheme, ThemeProvider } from '@mui/material'; +import createTheme from '@mui/material/styles/createTheme'; +import ThemeProvider from '@mui/material/styles/ThemeProvider'; -function AppTheme({ children }: { +function AppTheme ({ children }: { children: React.ReactNode; }) { const isDark = false; diff --git a/frontend/appflowy_web_app/src/application/services/js-services/auth.service.ts b/frontend/appflowy_web_app/src/application/services/js-services/auth.service.ts index 917d6cafe3..032c2b5b80 100644 --- a/frontend/appflowy_web_app/src/application/services/js-services/auth.service.ts +++ b/frontend/appflowy_web_app/src/application/services/js-services/auth.service.ts @@ -4,7 +4,6 @@ import { HttpClient } from '@/application/services/js-services/http/client'; import { ACCESS_TOKEN_NAME, REFRESH_TOKEN_NAME, TOKEN_TYPE_NAME } from '@/application/services/js-services/http/const'; import { AFWasmService } from '@/application/services/wasm-services'; - export class JSAuthService implements AuthService { constructor (private httpClient: HttpClient, private wasmService: AFWasmService) { @@ -35,9 +34,9 @@ export class JSAuthService implements AuthService { }; signinWithEmailPassword = async (email: string, password: string): Promise => { - await this.wasmService.cloudService.signIn(email, password); - return Promise.reject('Not implemented'); - // return this.httpClient.signInWithEmailPassword(email, password); + // await this.wasmService.cloudService.signIn(email, password); + // return Promise.reject('Not implemented'); + return this.httpClient.signInWithEmailPassword(email, password); }; signOut = async (): Promise => { diff --git a/frontend/appflowy_web_app/src/application/services/wasm-services/cloud.service.ts b/frontend/appflowy_web_app/src/application/services/wasm-services/cloud.service.ts index 5eb4032f47..aa8855391e 100644 --- a/frontend/appflowy_web_app/src/application/services/wasm-services/cloud.service.ts +++ b/frontend/appflowy_web_app/src/application/services/wasm-services/cloud.service.ts @@ -1,35 +1,36 @@ import { CloudServiceConfig } from '@/application/services/wasm-services/cloud.type'; -import { ClientAPI } from '@appflowyinc/client-api-wasm'; + +// import { ClientAPI } from '@appflowyinc/client-api-wasm'; export class CloudService { - private client?: ClientAPI; + // private client?: ClientAPI; constructor (private config: CloudServiceConfig) { // Do nothing } async init () { - this.client = ClientAPI.new({ - base_url: this.config.baseURL, - ws_addr: this.config.wsURL, - gotrue_url: this.config.gotrueURL, - device_id: this.config.deviceId, - client_id: this.config.clientId, - configuration: { - compression_quality: 8, - compression_buffer_size: 10240, - }, - }); + // this.client = ClientAPI.new({ + // base_url: this.config.baseURL, + // ws_addr: this.config.wsURL, + // gotrue_url: this.config.gotrueURL, + // device_id: this.config.deviceId, + // client_id: this.config.clientId, + // configuration: { + // compression_quality: 8, + // compression_buffer_size: 10240, + // }, + // }); } - async signIn (email: string, password: string) { - try { - const res = await this.client?.sign_in_password(email, password); - - console.log(res); - } catch (error) { - console.error(error); - } - } + // async signIn (email: string, password: string) { + // try { + // const res = await this.client?.sign_in_password(email, password); + // + // console.log(res); + // } catch (error) { + // console.error(error); + // } + // } } diff --git a/frontend/appflowy_web_app/src/components/auth/LoginButtonGroup.tsx b/frontend/appflowy_web_app/src/components/auth/LoginButtonGroup.tsx index 49bb649b2a..27cdf746e1 100644 --- a/frontend/appflowy_web_app/src/components/auth/LoginButtonGroup.tsx +++ b/frontend/appflowy_web_app/src/components/auth/LoginButtonGroup.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'; import { useAuth } from './auth.hooks'; import { ProviderType } from '@/application/services/user.type'; import { useState } from 'react'; -import { EmailOutlined } from '@mui/icons-material'; +import EmailOutlined from '@mui/icons-material/EmailOutlined'; import SignInWithEmail from './SignInWithEmail'; export const LoginButtonGroup = () => { @@ -24,7 +24,7 @@ export const LoginButtonGroup = () => { color={'inherit'} variant={'outlined'} > - + {t('signIn.signInWithEmail')} - setOpenSignInWithEmail(false)} /> + setOpenSignInWithEmail(false)}/> ); }; diff --git a/frontend/appflowy_web_app/src/components/auth/ProtectedRoutes.tsx b/frontend/appflowy_web_app/src/components/auth/ProtectedRoutes.tsx index 96a95c2343..33782e9724 100644 --- a/frontend/appflowy_web_app/src/components/auth/ProtectedRoutes.tsx +++ b/frontend/appflowy_web_app/src/components/auth/ProtectedRoutes.tsx @@ -4,12 +4,13 @@ import { currentUserActions, LoginState } from '@/stores/currentUser/slice'; import { useAppDispatch } from '@/stores/store'; import { getPlatform } from '@/utils/platform'; import SplashScreen from '@/components/auth/SplashScreen'; -import { CircularProgress, Portal } from '@mui/material'; +import CircularProgress from '@mui/material/CircularProgress'; +import Portal from '@mui/material/Portal'; import { ReactComponent as Logo } from '@/assets/logo.svg'; const TauriAuth = lazy(() => import('@/components/tauri/TauriAuth')); -function ProtectedRoutes() { +function ProtectedRoutes () { const { currentUser, checkUser } = useAuth(); const isLoading = currentUser?.loginState === LoginState.LOADING; @@ -32,15 +33,15 @@ function ProtectedRoutes() { return (
{checked ? ( - + ) : (
- +
)} - {isLoading && } - {platform.isTauri && } + {isLoading && } + {platform.isTauri && }
); } @@ -67,7 +68,7 @@ const StartLoading = () => { return (
- +
); diff --git a/frontend/appflowy_web_app/src/stores/app/slice.ts b/frontend/appflowy_web_app/src/stores/app/slice.ts index 2aac422b83..dee62a6fc7 100644 --- a/frontend/appflowy_web_app/src/stores/app/slice.ts +++ b/frontend/appflowy_web_app/src/stores/app/slice.ts @@ -1,36 +1,42 @@ -import { AFServiceConfig } from '@/application/services/services.type'; -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; - -const defaultConfig: AFServiceConfig = { - cloudConfig: { - baseURL: import.meta.env.DEV - ? import.meta.env.AF_BASE_URL || 'https://test.appflowy.cloud' - : 'https://beta.appflowy.cloud', - gotrueURL: import.meta.env.DEV - ? import.meta.env.AF_GOTRUE_URL || 'https://test.appflowy.cloud/gotrue' - : 'https://beta.appflowy.cloud/gotrue', - wsURL: import.meta.env.DEV - ? import.meta.env.AF_WS_URL || 'wss://test.appflowy.cloud/ws/v1' - : 'wss://beta.appflowy.cloud/ws/v1', - }, -}; - -export interface AppState { - appConfig: AFServiceConfig; -} - -const initialState: AppState = { - appConfig: defaultConfig, -}; - -export const slice = createSlice({ - name: 'app', - initialState, - reducers: { - setAppConfig: (state, action: PayloadAction) => { - state.appConfig = action.payload; - }, - }, -}); - -export const { setAppConfig } = slice.actions; \ No newline at end of file +import { AFServiceConfig } from '@/application/services/services.type'; +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; + +const defaultConfig: AFServiceConfig = { + cloudConfig: { + baseURL: import.meta.env.AF_BASE_URL + ? import.meta.env.AF_BASE_URL + : import.meta.env.DEV + ? 'https://test.appflowy.cloud' + : 'https://beta.appflowy.cloud', + gotrueURL: import.meta.env.AF_GOTRUE_URL + ? import.meta.env.AF_GOTRUE_URL + : import.meta.env.DEV + ? 'https://test.appflowy.cloud/gotrue' + : 'https://beta.appflowy.cloud/gotrue', + wsURL: import.meta.env.AF_WS_URL + ? import.meta.env.AF_WS_URL + : import.meta.env.DEV + ? 'wss://test.appflowy.cloud/ws/v1' + : 'wss://beta.appflowy.cloud/ws/v1', + }, +}; + +export interface AppState { + appConfig: AFServiceConfig; +} + +const initialState: AppState = { + appConfig: defaultConfig, +}; + +export const slice = createSlice({ + name: 'app', + initialState, + reducers: { + setAppConfig: (state, action: PayloadAction) => { + state.appConfig = action.payload; + }, + }, +}); + +export const { setAppConfig } = slice.actions; diff --git a/frontend/appflowy_web_app/test.env b/frontend/appflowy_web_app/test.env new file mode 100644 index 0000000000..89e2936fab --- /dev/null +++ b/frontend/appflowy_web_app/test.env @@ -0,0 +1,3 @@ +AF_WS_URL=wss://test.appflowy.cloud/ws/v1 +AF_BASE_URL=https://test.appflowy.cloud +AF_GOTRUE_URL=https://test.appflowy.cloud/gotrue \ No newline at end of file diff --git a/frontend/appflowy_web_app/vite.config.ts b/frontend/appflowy_web_app/vite.config.ts index 13971b0709..457db5df6e 100644 --- a/frontend/appflowy_web_app/vite.config.ts +++ b/frontend/appflowy_web_app/vite.config.ts @@ -2,7 +2,12 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import svgr from 'vite-plugin-svgr'; import wasm from 'vite-plugin-wasm'; +import { visualizer } from 'rollup-plugin-visualizer'; +import { compression } from 'vite-plugin-compression2'; +import usePluginImport from 'vite-plugin-importer'; +import { totalBundleSize } from 'vite-plugin-total-bundle-size'; +const isDev = process.env.NODE_ENV === 'development'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ @@ -34,6 +39,32 @@ export default defineConfig({ }, }, }), + usePluginImport({ + libraryName: '@mui/material', + libraryDirectory: '', + camel2DashComponentName: false, + style: false, + }), + usePluginImport({ + libraryName: '@mui/icons-material', + libraryDirectory: '', + camel2DashComponentName: false, + style: false, + }), + process.env.ANALYZE_MODE ? + visualizer({ + emitFile: true, + }) : undefined, + process.env.ANALYZE_MODE ? totalBundleSize({ + fileNameRegex: /\.(js|css)$/, + calculateGzip: false, + }) : undefined, + !process.env.ANALYZE_MODE ? + compression({ + threshold: 1024, + deleteOriginalAssets: true, + }) : undefined, + ], // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build` // prevent vite from obscuring rust errors @@ -45,27 +76,53 @@ export default defineConfig({ watch: { ignored: ['**/__tests__/**'], }, - // proxy: { - // '/api': { - // target: 'https://test.appflowy.cloud', - // changeOrigin: true, - // secure: false, - // }, - // }, + cors: false, }, envPrefix: ['AF', 'TAURI_'], build: process.env.TAURI_MODE ? { - // Tauri supports es2021 - target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13', - // don't minify for debug builds - minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, - // produce sourcemaps for debug builds - sourcemap: !!process.env.TAURI_DEBUG, - } + // Tauri supports es2021 + target: process.env.TAURI_PLATFORM === 'windows' ? 'chrome105' : 'safari13', + // don't minify for debug builds + minify: !process.env.TAURI_DEBUG ? 'esbuild' : false, + // produce sourcemaps for debug builds + sourcemap: !!process.env.TAURI_DEBUG, + } : { - target: `esnext`, - }, + target: `esnext`, + terserOptions: !isDev ? { + compress: { + keep_infinity: true, + drop_console: true, + drop_debugger: true, + }, + } : {}, + reportCompressedSize: false, + sourcemap: isDev, + rollupOptions: !isDev ? { + output: { + chunkFileNames: 'js/[name]-[hash].js', + entryFileNames: 'js/[name]-[hash].js', + assetFileNames: '[ext]/[name]-[hash].[ext]', + manualChunks (id) { + if (id.includes(('@mui'))) { + return 'mui'; + } + if (id.includes('react-dom') || id.includes('react-is') || id.includes('react')) { + return 'react-framework'; + } + if (id.includes('@tauri-apps')) { + return 'tauri-api'; + } + + if (id.includes('node_modules')) { + return id.toString().split('node_modules/')[1].split('/')[0].toString(); + } + + }, + }, + } : {}, + }, resolve: { alias: [ { find: 'src/', replacement: `${__dirname}/src/` },