Add a typescript version of the old js-example with basic HTML

2022-11-04 11:27:40 +00:00
parent 2dc45fda1e
commit eb18b49f3e
12 changed files with 509 additions and 0 deletions
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/react"]
+}
@@ -0,0 +1,98 @@
+# Example with React + Typescript + Webpack 5 + MUI
+
+An example of using default Webpack and Typescript settings with React and MUI, including theming.
+
+You can use this example as a seed for a new project.
+
+Remember to build the dependency packages from the root of this repo by running:
+
+```
+yarn
+yarn build
+```
+
+If you need to make changes to the dependency packages, you can run `yarn watch` in that package to watch for chagnes and build them. This project will pick up the changes in the built package and hot-reload / recompile.
+
+## Features
+
+### Yarn workspaces
+
+Packages from `ts-packages` are shared using Yarn workspaces. Make sure you add you new project to [package.json](../../package.json) to use the shared packages.
+
+> ⚠️ **Warning**: Yarn workspaces will share all dependencies between projects and works by falling back to parent directories until a `node_modules` directory is found. So be careful when messing around with `node_modules` and resolution, because unexpected things could happen - for example, if you do not run `yarn` from the root and you have a `node_modules` in a directory that is a parent of the directory where you checkout out this repository, that `node_modules` will be used for resolving packages 🙀.
+
+### Typescript
+
+Shared Typescript config is in [tsconfig.json](./tsconfig.json), with specific production settings in [tsconfig.prod.json](./tsconfig.prod.json) that:
+
+- exclude Storybook stories and Jest tests
+- do not output typing `*.d.ts` files
+
+### Webpack
+
+Inherit config for Webpack 5 with additional tweaks including:
+
+- favicon generation from [favicon asset files](../../../../assets/favicon/favicon.png)
+- asset handling (svg, png, fonts, css, etc)
+- minification
+
+The development settings include:
+
+- `ts-loader` for quick transpilation
+- threaded type checking using `tsc`
+- hot reloading using `react-refresh`
+
+### Storybook
+
+Storybook is available in [@nymproject/react](../../../../ts-packages/react-components/src/stories/Introduction.stories.mdx) and can be run using `yarn storybook`.
+
+### MUI and theming
+
+The [Nym theme](../mui-theme/src/theme/theme.ts) provides a theme provider that you can add as follows:
+
+```typescript jsx
+export const App: React.FC = () => (
+  <AppContextProvider>
+    <AppTheme>
+      <Content />
+    </AppTheme>
+  </AppContextProvider>
+);
+
+export const AppTheme: React.FC = ({ children }) => {
+  const { mode } = useAppContext();
+
+  return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
+};
+
+export const Content: React.FC = () => {
+...
+}
+```
+
+And augment typings for the Theme by adding [mui-theme.d.ts](./src/theme/mui-theme.d.ts):
+
+```typescript
+import { Theme, ThemeOptions, Palette, PaletteOptions } from '@mui/material/styles';
+import { NymTheme, NymPaletteWithExtensions, NymPaletteWithExtensionsOptions } from '@nymproject/mui-theme';
+
+declare module '@mui/material/styles' {
+  interface Theme extends NymTheme {}
+  interface ThemeOptions extends Partial<NymTheme> {}
+  interface Palette extends NymPaletteWithExtensions {}
+  interface PaletteOptions extends NymPaletteWithExtensionsOptions {}
+}
+```
+
+Adding the above, means that any component now has the correct typings, for example, below the Nym palette interface is available for all MUI `Theme` instances with code completion for VSCode and IntelliJ:
+
+```typescript jsx
+import { Typography } from '@mui/material';
+
+...
+
+<Typography sx={{ color: (theme) => theme.palette.nym.networkExplorer.mixnodes.status.active }}>
+  The quick brown fox jumps over the white fence
+</Typography>
+
+```
@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};
@@ -0,0 +1,71 @@
+{
+  "name": "@nymproject/sdk-example-plain-html",
+  "description": "An example project that uses WASM and plain HTML",
+  "version": "1.0.0",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@nymproject/sdk": "1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-transform-async-to-generator": "^7.14.5",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.15.0",
+    "@nymproject/eslint-config-react-typescript": "^1.0.0",
+    "@nymproject/webpack": "^1.0.0",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.13.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-root-import": "^5.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
+    "dotenv-webpack": "^7.0.3",
+    "eslint": "^8.10.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-root-import": "^1.0.4",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^7.2.1",
+    "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.1.0",
+    "mini-css-extract-plugin": "^2.2.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.5.1",
+    "style-loader": "^3.2.1",
+    "thread-loader": "^3.0.4",
+    "ts-jest": "^27.0.5",
+    "ts-loader": "^9.2.5",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.6.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.64.3",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.5.0",
+    "webpack-merge": "^5.8.0"
+  },
+  "scripts": {
+    "prestart": "yarn build:dependencies",
+    "start": "webpack serve --progress --port 3000",
+    "build:dependencies": "run-p build:dependencies:nym-client-wasm build:dependencies:ts-packages",
+    "build:dependencies:nym-client-wasm": "../../packages/nym-client-wasm/scripts/build.sh",
+    "build:dependencies:ts-packages": "cd ../../../.. && yarn build",
+    "prebuild": "yarn build:dependencies",
+    "build": "webpack build --progress --config webpack.prod.js",
+    "build:dev": "webpack build --progress",
+    "build:serve": "npx serve dist",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "tsc": "tsc",
+    "tsc:watch": "tsc --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
+  }
+}
@@ -0,0 +1,62 @@
+import { NymMixnetClient } from '@nymproject/sdk';
+
+/**
+ * Create a Sphinx packet and send it to the mixnet through the gateway node.
+ *
+ * Message and recipient are taken from the values in the user interface.
+ *
+ * @param {Client} nymClient the nym client to use for message sending
+ */
+export async function sendMessageTo(client: NymMixnetClient) {
+  const message = (document.getElementById('message') as HTMLFormElement).value;
+  const recipient = (document.getElementById('recipient') as HTMLFormElement).value;
+
+  await client.client.sendMessage({ message, recipient });
+  displaySend(message);
+}
+
+/**
+ * Display messages that have been sent up the websocket. Colours them blue.
+ *
+ * @param {string} message
+ */
+function displaySend(message: string) {
+  const timestamp = new Date().toISOString().substr(11, 12);
+
+  const sendDiv = document.createElement('div');
+  const paragraph = document.createElement('p');
+  paragraph.setAttribute('style', 'color: blue');
+  const paragraphContent = document.createTextNode(`${timestamp} sent >>> ${message}`);
+  paragraph.appendChild(paragraphContent);
+
+  sendDiv.appendChild(paragraph);
+  document.getElementById('output')?.appendChild(sendDiv);
+}
+
+/**
+ * Display received text messages in the browser. Colour them green.
+ *
+ * @param {string} message
+ */
+export function displayReceived(message: string) {
+  const content = message;
+
+  const timestamp = new Date().toLocaleTimeString();
+  const receivedDiv = document.createElement('div');
+  const paragraph = document.createElement('p');
+  paragraph.setAttribute('style', 'color: green');
+  const paragraphContent = document.createTextNode(`${timestamp} received >>> ${content}`);
+  // const paragraphContent = document.createTextNode(timestamp + " received >>> " + content + ((replySurb != null) ? "Reply SURB was attached here (but we can't do anything with it yet" : " (NO REPLY-SURB AVAILABLE)"))
+  paragraph.appendChild(paragraphContent);
+  receivedDiv.appendChild(paragraph);
+  document.getElementById('output')?.appendChild(receivedDiv);
+}
+
+/**
+ * Display the nymClient's sender address in the user interface
+ *
+ * @param {Client} nymClient
+ */
+export function displaySenderAddress(address: string) {
+  (document.getElementById('sender') as HTMLFormElement).value = address;
+}
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Nym WebAssembly Demo</title>
+</head>
+
+<body>
+<p>
+  <label>Sender: </label><input disabled="true" size="85" type="text" id="sender" value="">
+</p>
+
+<p>
+  <label>Recipient: </label><input size="85" type="text" id="recipient" value="">
+</p>
+<p>
+  <label>Message: </label><input type="text" id="message" value="Hello mixnet!">
+</p>
+<p>
+  <button id="send-button">Send</button>
+</p>
+
+<p>Send messages from your browser, through the mixnet, and to the recipient using the "send" button.</p>
+<p><span style='color: blue;'>Sent</span> messages show in blue, <span style='color: green;'>received</span>
+  messages show in green.</p>
+
+<hr>
+<p>
+<div id="output"></div>
+</p>
+<script src="./bootstrap.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,58 @@
+import { createNymMixnetClient, NymMixnetClient } from '@nymproject/sdk';
+import { displayReceived, sendMessageTo, displaySenderAddress } from './dom-utils';
+
+let nym: NymMixnetClient | null = null;
+
+/**
+ * The main entry point
+ */
+async function main() {
+  nym = await createNymMixnetClient();
+
+  if (!nym) {
+    console.error('Oh no! Could not create client');
+    return;
+  }
+
+  // // mixnet v1
+  // const validatorApiUrl = 'https://validator.nymtech.net/api';
+  // const preferredGatewayIdentityKey = 'E3mvZTHQCdBvhfr178Swx9g4QG3kkRUun7YnToLMcMbM';
+
+  // mixnet v2
+  const validatorApiUrl = 'https://qwerty-validator-api.qa.nymte.ch/api'; // "http://localhost:8081";
+  const preferredGatewayIdentityKey = undefined; // '36vfvEyBzo5cWEFbnP7fqgY39kFw9PQhvwzbispeNaxL';
+
+  // subscribe to connect event, so that we can show the client's address
+  nym.events.subscribeToConnected((e) => {
+    if (e.args.address) {
+      displaySenderAddress(e.args.address);
+    }
+  });
+
+  // subscribe to message received events and show any string messages received
+  nym.events.subscribeToTextMessageReceivedEvent((e) => {
+    displayReceived(e.args.message);
+  });
+
+  const sendButton: HTMLButtonElement = document.querySelector('#send-button') as HTMLButtonElement;
+  if (sendButton) {
+    sendButton.onclick = function () {
+      if (nym) {
+        sendMessageTo(nym);
+      }
+    };
+  }
+
+  // start up the client
+  await nym.client.start({
+    clientId: 'My awesome client',
+    validatorApiUrl,
+    preferredGatewayIdentityKey,
+  });
+}
+
+// wait for the html to load
+window.addEventListener('DOMContentLoaded', () => {
+  // let's do this!
+  main();
+});
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "./dist"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "dist"
+  ]
+}
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "declaration": false
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "dist",
+    "**/*.stories.*",
+    "**/*.test.*",
+    "**/*.spec.*"
+  ]
+}
@@ -0,0 +1,31 @@
+const path = require('path');
+const { mergeWithRules } = require('webpack-merge');
+const { webpackCommon } = require('@nymproject/webpack');
+
+module.exports = mergeWithRules({
+  module: {
+    rules: {
+      test: 'match',
+      use: 'replace',
+    },
+  },
+})(
+  webpackCommon(__dirname, [
+    {
+      inject: true,
+      filename: 'index.html',
+      template: path.resolve(__dirname, 'src/index.html'),
+      chunks: ['index'],
+    },
+  ]),
+  {
+    entry: {
+      index: path.resolve(__dirname, 'src/index.ts'),
+      worker: require.resolve('@nymproject/sdk/mixnet/wasm/worker.js'),
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      publicPath: '/',
+    },
+  },
+);
@@ -0,0 +1,67 @@
+const { mergeWithRules } = require('webpack-merge');
+const webpack = require('webpack');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const ReactRefreshTypeScript = require('react-refresh-typescript');
+const commonConfig = require('./webpack.common');
+
+module.exports = mergeWithRules({
+  module: {
+    rules: {
+      test: 'match',
+      use: 'replace',
+    },
+  },
+})(commonConfig, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          getCustomTransformers: () => ({
+            before: [ReactRefreshTypeScript()],
+          }),
+          // `ts-loader` does not work with HMR unless `transpileOnly` is used.
+          // If you need type checking, `ForkTsCheckerWebpackPlugin` is an alternative.
+          transpileOnly: true,
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ReactRefreshWebpackPlugin(),
+
+    // this can be included automatically by the dev server, however build mode fails if missing
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+
+  target: 'web',
+
+  devServer: {
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+    },
+    historyApiFallback: true,
+  },
+
+  // recommended for faster rebuild
+  optimization: {
+    runtimeChunk: true,
+    removeAvailableModules: false,
+    removeEmptyChunks: false,
+    splitChunks: false,
+  },
+
+  cache: {
+    type: 'filesystem',
+    buildDependencies: {
+      // restart on config change
+      config: ['./webpack.config.js'],
+    },
+  },
+});
@@ -0,0 +1,42 @@
+const { mergeWithRules } = require('webpack-merge');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const commonConfig = require('./webpack.common');
+
+module.exports = mergeWithRules({
+  module: {
+    rules: {
+      test: 'match',
+      use: 'replace',
+    },
+  },
+})(commonConfig, {
+  mode: 'production',
+
+  // TODO: no source maps, add back
+  devtool: false,
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: ['...', new CssMinimizerPlugin()],
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css',
+    }),
+  ],
+  output: {
+    pathinfo: false,
+    filename: '[name].[contenthash].js',
+  },
+});