Skip to content

Commit 15a1d01

Browse files
kigawaskigawas
authored
Revamp example (#23)
1 parent abe8ca0 commit 15a1d01

11 files changed

+180
-551
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,5 @@ Cargo.lock
1616
# js stuff
1717
node_modules/
1818
dist/
19+
20+
pnpm-lock.yaml

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
- Bump dependencies
66
- Revamp type for typescript
7+
- Revamp example
78

89
## 0.2.0
910

‎README.md

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,18 @@ npm install ecies-wasm
1919
```js
2020
import init, * as ecies from "ecies-wasm";
2121

22-
init(); // if built with vite without plugin
23-
2422
const encoder = new TextEncoder();
25-
const data = encoder.encode("hello ecies🔒");
26-
27-
const [sk, pk] = ecies.generateKeypair();
28-
const encrypted = ecies.encrypt(pk, data);
29-
const decrypted = ecies.decrypt(sk, encrypted);
30-
alert("decrypted: " + decrypted);
23+
const decoder = new TextDecoder();
24+
25+
// if built with vite without plugin
26+
// can also run with bun/deno
27+
init().then(() => {
28+
const [sk, pk] = ecies.generateKeypair();
29+
const data = encoder.encode("hello ecies🔒");
30+
const encrypted = ecies.encrypt(pk, data);
31+
const decrypted = decoder.decode(ecies.decrypt(sk, encrypted));
32+
console.log("decrypted: " + decrypted);
33+
});
3134
```
3235

3336
Check [the example](./example) for how to use it in browsers.

‎example/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,11 @@ After `pkg` folder is generated, update `import` in `index.js` as:
2323
```ts
2424
import init, * as ecies from "../pkg/ecies_wasm";
2525
```
26+
27+
Or update `package.json` as:
28+
29+
```json
30+
"dependencies": {
31+
"ecies-wasm": "link:../pkg"
32+
},
33+
```

‎example/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Hello ecies</title>
6+
<title>Hello ecies-wasm</title>
77
</head>
88

99
<body>

‎example/index.js

Lines changed: 51 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,62 @@
11
// need to build with `wasm-pack build --target web`
2-
// import init, * as ecies from "../pkg/ecies_wasm";
3-
// check vite.config.js as well
2+
// check vite.config.ts as well
43
import init, * as ecies from "ecies-wasm";
4+
import "./style.css";
5+
import { bytesToHex } from "./utils";
56

6-
init();
7+
let sk, pk;
78

8-
const encoder = new TextEncoder();
9-
const data = encoder.encode("hello ecies🔒");
10-
11-
function checkOk() {
12-
const [sk, pk] = ecies.generateKeypair();
13-
14-
const encrypted = ecies.encrypt(pk, data);
15-
const decrypted = ecies.decrypt(sk, encrypted);
16-
17-
const decoder = new TextDecoder();
18-
alert(`decrypted: ${decoder.decode(decrypted)}`);
9+
init().then(() => {
10+
[sk, pk] = ecies.generateKeypair();
11+
});
1912

20-
if (decrypted.toString("hex") === data.toString("hex")) {
21-
alert("call wasm encrypt decrypt ok");
22-
} else {
23-
alert("call wasm encrypt decrypt failed");
24-
}
25-
}
2613

27-
function checkError() {
28-
const pk = Uint8Array.from([0]);
29-
try {
30-
ecies.encrypt(pk, data);
31-
} catch (e) {
32-
alert(e);
33-
}
14+
const encoder = new TextEncoder();
15+
const decoder = new TextDecoder();
16+
const text = "hello ecies-wasm🔒";
17+
18+
export function setup(encryptedElement, textElement, decryptedElement) {
19+
let encrypted;
20+
21+
encryptedElement.innerHTML = "click me to encrypt";
22+
textElement.innerHTML = text;
23+
decryptedElement.innerHTML = "click me to decrypt";
24+
25+
const _encrypt = () => {
26+
encrypted = ecies.encrypt(pk, encoder.encode(text));
27+
encryptedElement.innerHTML = "encrypted:";
28+
textElement.innerHTML = `<code>${bytesToHex(encrypted)}</code>`;
29+
decryptedElement.innerHTML = "click me to decrypt";
30+
};
31+
32+
const _decrypt = () => {
33+
encryptedElement.innerHTML = "click me to encrypt";
34+
if (encrypted) {
35+
const decrypted = decoder.decode(ecies.decrypt(sk, encrypted));
36+
textElement.innerHTML = `${decrypted}`;
37+
decryptedElement.innerHTML = "decrypted:";
38+
encrypted = undefined;
39+
} else {
40+
textElement.innerHTML = "click encrypt button first";
41+
}
42+
};
43+
encryptedElement.addEventListener("click", () => _encrypt());
44+
decryptedElement.addEventListener("click", () => _decrypt());
3445
}
3546

3647
document.querySelector("#app").innerHTML = `
37-
<h1>WASM Test</h1>
38-
<button id="ok">Check ok</button>
39-
<button id="error">Check error</button>
48+
<div>
49+
<h1>Hello ecies-wasm!</h1>
50+
<div class="card">
51+
<button id="encrypted" type="button"></button>
52+
<button id="decrypted" type="button"></button>
53+
</div>
54+
<p id="text"></p>
55+
</div>
4056
`;
4157

42-
document.getElementById("ok").addEventListener("click", () => {
43-
checkOk();
44-
});
45-
document.getElementById("error").addEventListener("click", () => {
46-
checkError();
47-
});
48-
49-
window.addEventListener("error", (event) => {
50-
// catch all other errors
51-
console.error(event);
52-
});
58+
setup(
59+
document.querySelector("#encrypted"),
60+
document.querySelector("#text"),
61+
document.querySelector("#decrypted")
62+
);

‎example/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"ecies-wasm": "^0.2.0"
1919
},
2020
"devDependencies": {
21-
"vite": "5.4.8"
21+
"vite": "^6.2.5"
2222
},
23-
"packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
23+
"packageManager": "pnpm@10.6.2+sha512.47870716bea1572b53df34ad8647b42962bc790ce2bf4562ba0f643237d7302a3d6a8ecef9e4bdfc01d23af1969aa90485d4cebb0b9638fa5ef1daef656f6c1b"
2424
}

0 commit comments

Comments
 (0)