more optimization

packages/app/package.json

@@ -10,7 +10,7 @@
     "@noble/hashes": "^1.2.0",
     "@protobufjs/base64": "^1.1.2",
     "@reduxjs/toolkit": "^1.9.1",
-    "@scure/bip32": "^1.1.5",
+    "@scure/bip32": "^1.3.0",
     "@scure/bip39": "^1.1.1",
     "@snort/nostr": "^1.0.0",
     "@szhsin/react-menu": "^3.3.1",

packages/app/src/Element/Textarea.tsx

@@ -3,7 +3,6 @@ import "./Textarea.css";
 
 import { useIntl } from "react-intl";
 import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
-import emoji from "@jukben/emoji-search";
 import TextareaAutosize from "react-textarea-autosize";
 import { NostrPrefix } from "@snort/nostr";
 
@@ -61,8 +60,10 @@ const Textarea = (props: TextareaProps) => {
     return await UserCache.search(token);
   };
 
-  const emojiDataProvider = (token: string) => {
-    return emoji(token)
+  const emojiDataProvider = async (token: string) => {
+    const emoji = await import("@jukben/emoji-search");
+    return emoji
+      .default(token)
       .slice(0, 5)
       .map(({ name, char }) => ({ name, char }));
   };

packages/app/src/IntlProvider.tsx

@@ -1,22 +1,7 @@
-import { type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { IntlProvider as ReactIntlProvider } from "react-intl";
 
 import enMessages from "translations/en.json";
-import esMessages from "translations/es_ES.json";
-import zhMessages from "translations/zh_CN.json";
-import twMessages from "translations/zh_TW.json";
-import jaMessages from "translations/ja_JP.json";
-import frMessages from "translations/fr_FR.json";
-import huMessages from "translations/hu_HU.json";
-import idMessages from "translations/id_ID.json";
-import arMessages from "translations/ar_SA.json";
-import itMessages from "translations/it_IT.json";
-import deMessages from "translations/de_DE.json";
-import ruMessages from "translations/ru_RU.json";
-import svMessages from "translations/sv_SE.json";
-import hrMessages from "translations/hr_HR.json";
-import taINMessages from "translations/ta_IN.json";
-
 import useLogin from "Hooks/useLogin";
 
 const DefaultLocale = "en-US";
@@ -24,65 +9,76 @@ const DefaultLocale = "en-US";
 const getMessages = (locale: string) => {
   const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0];
 
-  const matchLang = (lng: string) => {
+  const matchLang = async (lng: string) => {
     switch (lng) {
       case "es-ES":
       case "es":
-        return esMessages;
+        return (await import("translations/es_ES.json")).default;
       case "zh-CN":
       case "zh-Hans-CN":
       case "zh":
-        return zhMessages;
+        return (await import("translations/zh_CN.json")).default;
       case "zh-TW":
-        return twMessages;
+        return (await import("translations/zh_TW.json")).default;
       case "ja-JP":
       case "ja":
-        return jaMessages;
+        return (await import("translations/ja_JP.json")).default;
       case "fr-FR":
       case "fr":
-        return frMessages;
+        return (await import("translations/fr_FR.json")).default;
       case "hu-HU":
       case "hu":
-        return huMessages;
+        return (await import("translations/hu_HU.json")).default;
       case "id-ID":
       case "id":
-        return idMessages;
+        return (await import("translations/id_ID.json")).default;
       case "ar-SA":
       case "ar":
-        return arMessages;
+        return (await import("translations/ar_SA.json")).default;
       case "it-IT":
       case "it":
-        return itMessages;
+        return (await import("translations/it_IT.json")).default;
       case "de-DE":
       case "de":
-        return deMessages;
+        return (await import("translations/de_DE.json")).default;
       case "ru-RU":
       case "ru":
-        return ruMessages;
+        return (await import("translations/ru_RU.json")).default;
       case "sv-SE":
       case "sv":
-        return svMessages;
+        return (await import("translations/sv_SE.json")).default;
       case "hr-HR":
       case "hr":
-        return hrMessages;
+        return (await import("translations/hr_HR.json")).default;
       case "ta-IN":
       case "ta":
-        return taINMessages;
+        return (await import("translations/ta_IN.json")).default;
       case DefaultLocale:
       case "en":
         return enMessages;
     }
   };
 
-  return matchLang(locale) ?? matchLang(truncatedLocale) ?? enMessages;
+  return matchLang(locale) ?? matchLang(truncatedLocale) ?? Promise.resolve(enMessages);
 };
 
 export const IntlProvider = ({ children }: { children: ReactNode }) => {
   const { language } = useLogin().preferences;
   const locale = language ?? getLocale();
+  const [messages, setMessages] = useState<Record<string, string>>(enMessages);
+
+  useEffect(() => {
+    getMessages(locale)
+      .then(x => {
+        if (x) {
+          setMessages(x);
+        }
+      })
+      .catch(console.error);
+  }, [language]);
 
   return (
-    <ReactIntlProvider locale={locale} messages={getMessages(locale)}>
+    <ReactIntlProvider locale={locale} messages={messages}>
       {children}
     </ReactIntlProvider>
   );

packages/app/src/Pages/settings/Preferences.tsx

@@ -1,8 +1,7 @@
 import "./Preferences.css";
 
 import { FormattedMessage, useIntl } from "react-intl";
-import emoji from "@jukben/emoji-search";
-
+import { useEffect, useState } from "react";
 import useLogin from "Hooks/useLogin";
 import { DefaultPreferences, updatePreferences, UserPreferences } from "Login";
 import { DefaultImgProxy } from "Const";
@@ -32,6 +31,14 @@ const PreferencesPage = () => {
   const { formatMessage } = useIntl();
   const login = useLogin();
   const perf = login.preferences;
+  const [emoji, setEmoji] = useState<Array<{ name: string; char: string }>>([]);
+
+  useEffect(() => {
+    (async () => {
+      const emoji = await import("@jukben/emoji-search");
+      setEmoji(emoji.default("").map(a => ({ name: a.name, char: a.char })));
+    })();
+  }, []);
 
   return (
     <div className="preferences">
@@ -319,7 +326,7 @@ const PreferencesPage = () => {
               <option value="+">
                 + <FormattedMessage {...messages.Default} />
               </option>
-              {emoji("").map(({ name, char }) => {
+              {emoji.map(({ name, char }) => {
                 return (
                   <option value={char}>
                     {name} {char}

packages/app/webpack.config.js

@@ -2,7 +2,7 @@
 
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 const ESLintPlugin = require("eslint-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
@@ -78,7 +78,35 @@ const config = {
   optimization: {
     usedExports: true,
     chunkIds: "deterministic",
-    minimizer: ["...", new CssMinimizerPlugin()],
+    minimize: isProduction,
+    minimizer: [
+      "...",
+      // same as https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js
+      new TerserPlugin({
+        terserOptions: {
+          parse: {
+            ecma: 8,
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            comparisons: false,
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          keep_classnames: isProduction,
+          keep_fnames: isProduction,
+          output: {
+            ecma: 5,
+            comments: false,
+            ascii_only: true,
+          },
+        },
+      }),
+      new CssMinimizerPlugin(),
+    ],
   },
   resolve: {
     extensions: [".tsx", ".ts", ".jsx", ".js", "..."],

packages/nostr/package.json

@@ -4,8 +4,8 @@
   "main": "dist/lib.js",
   "types": "dist/src/index.d.ts",
   "scripts": {
-    "build": "rm -rf dist && webpack",
-    "watch": "rm -rf dist && webpack -w",
+    "build": "webpack --mode=production",
+    "watch": "webpack -w",
     "clean": "rm -rf dist",
     "test": "ts-mocha --type-check -j 1 --timeout 5s test/test.*.ts",
     "test-browser": "ts-node test/browser/server.ts",

packages/nostr/webpack.config.js

@@ -1,19 +1,23 @@
 const fs = require("fs")
 
+const isProduction = process.env.NODE_ENV == "production";
+
 const entry = {
   lib: "./src/index.ts",
 }
-
-for (const file of fs.readdirSync("./test/")) {
-  if (/.ts$/.test(file)) {
-    const name = file.replace(/.ts$/, "")
-    entry[`test/${name}`] = `./test/${file}`
+if (!isProduction) {
+  for (const file of fs.readdirSync("./test/")) {
+    if (/.ts$/.test(file)) {
+      const name = file.replace(/.ts$/, "")
+      entry[`test/${name}`] = `./test/${file}`
+    }
   }
 }
 
 module.exports = {
   mode: process.env.NODE_ENV || "development",
-  devtool: "inline-source-map",
+  target: "browserslist",
+  devtool: isProduction ? "source-map" : "eval",
   entry,
   resolve: {
     extensions: [".ts", ".js"],
@@ -27,9 +31,13 @@ module.exports = {
   output: {
     filename: "[name].js",
     path: `${__dirname}/dist`,
+    clean: true,
     library: {
       type: "umd",
       name: "Nostr",
     },
   },
+  optimization: {
+    usedExports: true,
+  },
 }

yarn.lock

@@ -1565,20 +1565,13 @@
     "@lightninglabs/lnc-core" "0.2.3-alpha"
     crypto-js "4.1.1"
 
-"@noble/curves@^1.0.0":
+"@noble/curves@^1.0.0", "@noble/curves@~1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.0.0.tgz#e40be8c7daf088aaf291887cbc73f43464a92932"
   integrity sha512-2upgEu0iLiDVDZkNLeFV2+ht0BAVgQnEmCk6JsOch9Rp8xfkMCbvbAZlA2pBHQc73dbl+vFOXfqkf4uemdn0bw==
   dependencies:
     "@noble/hashes" "1.3.0"
 
-"@noble/curves@~0.8.3":
-  version "0.8.3"
-  resolved "https://registry.npmjs.org/@noble/curves/-/curves-0.8.3.tgz"
-  integrity sha512-OqaOf4RWDaCRuBKJLDURrgVxjLmneGsiCXGuzYB5y95YithZMA6w4uk34DHSm0rKMrrYiaeZj48/81EvaAScLQ==
-  dependencies:
-    "@noble/hashes" "1.3.0"
-
 "@noble/hashes@1.3.0", "@noble/hashes@^1.2.0", "@noble/hashes@~1.3.0":
   version "1.3.0"
   resolved "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.0.tgz"
@@ -1924,12 +1917,12 @@
   resolved "https://registry.npmjs.org/@scure/base/-/base-1.1.1.tgz"
   integrity sha512-ZxOhsSyxYwLJj3pLZCefNitxsj093tb2vq90mp2txoYeBqbcjDjqFhyM8eUjq/uFm6zJ+mUuqxlS2FkuSY1MTA==
 
-"@scure/bip32@^1.1.5":
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/@scure/bip32/-/bip32-1.2.0.tgz"
-  integrity sha512-O+vT/hBVk+ag2i6j2CDemwd1E1MtGt+7O1KzrPNsaNvSsiEK55MyPIxJIMI2PS8Ijj464B2VbQlpRoQXxw1uHg==
+"@scure/bip32@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@scure/bip32/-/bip32-1.3.0.tgz#6c8d980ef3f290987736acd0ee2e0f0d50068d87"
+  integrity sha512-bcKpo1oj54hGholplGLpqPHRbIsnbixFtc06nwuNM5/dwSXOq/AAYoIBRsBmnZJSdfeNW5rnff7NTAz3ZCqR9Q==
   dependencies:
-    "@noble/curves" "~0.8.3"
+    "@noble/curves" "~1.0.0"
     "@noble/hashes" "~1.3.0"
     "@scure/base" "~1.1.0"