This example demonstrates BigInt factorization in a separate browser thread using a WPC Class.
1import { worker } from 'vovk';
2
3@worker()
4export default class HelloWorker {
5 /**
6 * Factorizes a large number into its prime factors
7 * @param number - the large number to factorize
8 */
9 static factorize(number: bigint): bigint[] {
10 let factors: bigint[] = [];
11 if (number < 2n) {
12 return [number];
13 }
14
15 while (number % 2n === 0n) {
16 factors.push(2n);
17 number /= 2n;
18 }
19
20 for (let i = 3n; i * i <= number; i += 2n) {
21 while (number % i === 0n) {
22 factors.push(i);
23 number /= i;
24 }
25 }
26
27 if (number > 1n) {
28 factors.push(number); // Remaining number is a prime factor
29 }
30
31 return factors;
32 }
33}
1import { worker } from 'vovk';
2
3@worker()
4export default class HelloWorker {
5 /**
6 * Factorizes a large number into its prime factors
7 * @param number - the large number to factorize
8 */
9 static factorize(number: bigint): bigint[] {
10 let factors: bigint[] = [];
11 if (number < 2n) {
12 return [number];
13 }
14
15 while (number % 2n === 0n) {
16 factors.push(2n);
17 number /= 2n;
18 }
19
20 for (let i = 3n; i * i <= number; i += 2n) {
21 while (number % i === 0n) {
22 factors.push(i);
23 number /= i;
24 }
25 }
26
27 if (number > 1n) {
28 factors.push(number); // Remaining number is a prime factor
29 }
30
31 return factors;
32 }
33}
1import { worker } from 'vovk';
2
3@worker()
4export default class HelloWorker {
5 /**
6 * Factorizes a large number into its prime factors
7 * @param number - the large number to factorize
8 */
9 static factorize(number: bigint): bigint[] {
10 let factors: bigint[] = [];
11 if (number < 2n) {
12 return [number];
13 }
14
15 while (number % 2n === 0n) {
16 factors.push(2n);
17 number /= 2n;
18 }
19
20 for (let i = 3n; i * i <= number; i += 2n) {
21 while (number % i === 0n) {
22 factors.push(i);
23 number /= i;
24 }
25 }
26
27 if (number > 1n) {
28 factors.push(number); // Remaining number is a prime factor
29 }
30
31 return factors;
32 }
33}
1import { worker } from 'vovk';
2
3@worker()
4export default class HelloWorker {
5 /**
6 * Factorizes a large number into its prime factors
7 * @param number - the large number to factorize
8 */
9 static factorize(number: bigint): bigint[] {
10 let factors: bigint[] = [];
11 if (number < 2n) {
12 return [number];
13 }
14
15 while (number % 2n === 0n) {
16 factors.push(2n);
17 number /= 2n;
18 }
19
20 for (let i = 3n; i * i <= number; i += 2n) {
21 while (number % i === 0n) {
22 factors.push(i);
23 number /= i;
24 }
25 }
26
27 if (number > 1n) {
28 factors.push(number); // Remaining number is a prime factor
29 }
30
31 return factors;
32 }
33}
1'use client';
2import { type FormEvent, useEffect, useState } from 'react';
3import { HelloWorker } from 'vovk-client';
4
5export default function WorkerExample() {
6 const isMobile = typeof document !== 'undefined' && 'ontouchstart' in document.documentElement;
7 const [value, setValue] = useState(
8 // use smaller number on mobile devices
9 isMobile ? '333944026345847228099687' : '337751842839865299034216387'
10 );
11 const [result, setResult] = useState<bigint[]>();
12 const [isCalculating, setIsCalculating] = useState(false);
13 const regExp = /^-?\d+$/;
14
15 useEffect(() => {
16 HelloWorker.employ(new Worker(new URL('../../modules/worker/HelloWorker.ts', import.meta.url)));
17 }, []);
18
19 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
20 e.preventDefault();
21 if (!regExp.test(value)) return;
22 setIsCalculating(true);
23 setResult(await HelloWorker.factorize(BigInt(value)));
24 setIsCalculating(false);
25 };
26
27 return (
28 <form onSubmit={onSubmit}>
29 <div className="input-group">
30 <input
31 type="text"
32 placeholder="Type a large number..."
33 value={value}
34 onChange={(e) => setValue(e.currentTarget.value)}
35 />
36 <button disabled={!regExp.test(value) || isCalculating}>
37 {isCalculating ? 'Calculating...' : 'Factorize'}
38 </button>
39 </div>
40 <div className="break-all max-h-96 overflow-auto">
41 {result?.map((factor, index) => <div key={index}>{factor.toString()}</div>)}
42 </div>
43 </form>
44 );
45}
1'use client';
2import { type FormEvent, useEffect, useState } from 'react';
3import { HelloWorker } from 'vovk-client';
4
5export default function WorkerExample() {
6 const isMobile = typeof document !== 'undefined' && 'ontouchstart' in document.documentElement;
7 const [value, setValue] = useState(
8 // use smaller number on mobile devices
9 isMobile ? '333944026345847228099687' : '337751842839865299034216387'
10 );
11 const [result, setResult] = useState<bigint[]>();
12 const [isCalculating, setIsCalculating] = useState(false);
13 const regExp = /^-?\d+$/;
14
15 useEffect(() => {
16 HelloWorker.employ(new Worker(new URL('../../modules/worker/HelloWorker.ts', import.meta.url)));
17 }, []);
18
19 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
20 e.preventDefault();
21 if (!regExp.test(value)) return;
22 setIsCalculating(true);
23 setResult(await HelloWorker.factorize(BigInt(value)));
24 setIsCalculating(false);
25 };
26
27 return (
28 <form onSubmit={onSubmit}>
29 <div className="input-group">
30 <input
31 type="text"
32 placeholder="Type a large number..."
33 value={value}
34 onChange={(e) => setValue(e.currentTarget.value)}
35 />
36 <button disabled={!regExp.test(value) || isCalculating}>
37 {isCalculating ? 'Calculating...' : 'Factorize'}
38 </button>
39 </div>
40 <div className="break-all max-h-96 overflow-auto">
41 {result?.map((factor, index) => <div key={index}>{factor.toString()}</div>)}
42 </div>
43 </form>
44 );
45}
1'use client';
2import { type FormEvent, useEffect, useState } from 'react';
3import { HelloWorker } from 'vovk-client';
4
5export default function WorkerExample() {
6 const isMobile = typeof document !== 'undefined' && 'ontouchstart' in document.documentElement;
7 const [value, setValue] = useState(
8 // use smaller number on mobile devices
9 isMobile ? '333944026345847228099687' : '337751842839865299034216387'
10 );
11 const [result, setResult] = useState<bigint[]>();
12 const [isCalculating, setIsCalculating] = useState(false);
13 const regExp = /^-?\d+$/;
14
15 useEffect(() => {
16 HelloWorker.employ(new Worker(new URL('../../modules/worker/HelloWorker.ts', import.meta.url)));
17 }, []);
18
19 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
20 e.preventDefault();
21 if (!regExp.test(value)) return;
22 setIsCalculating(true);
23 setResult(await HelloWorker.factorize(BigInt(value)));
24 setIsCalculating(false);
25 };
26
27 return (
28 <form onSubmit={onSubmit}>
29 <div className="input-group">
30 <input
31 type="text"
32 placeholder="Type a large number..."
33 value={value}
34 onChange={(e) => setValue(e.currentTarget.value)}
35 />
36 <button disabled={!regExp.test(value) || isCalculating}>
37 {isCalculating ? 'Calculating...' : 'Factorize'}
38 </button>
39 </div>
40 <div className="break-all max-h-96 overflow-auto">
41 {result?.map((factor, index) => <div key={index}>{factor.toString()}</div>)}
42 </div>
43 </form>
44 );
45}
1'use client';
2import { type FormEvent, useEffect, useState } from 'react';
3import { HelloWorker } from 'vovk-client';
4
5export default function WorkerExample() {
6 const isMobile = typeof document !== 'undefined' && 'ontouchstart' in document.documentElement;
7 const [value, setValue] = useState(
8 // use smaller number on mobile devices
9 isMobile ? '333944026345847228099687' : '337751842839865299034216387'
10 );
11 const [result, setResult] = useState<bigint[]>();
12 const [isCalculating, setIsCalculating] = useState(false);
13 const regExp = /^-?\d+$/;
14
15 useEffect(() => {
16 HelloWorker.employ(new Worker(new URL('../../modules/worker/HelloWorker.ts', import.meta.url)));
17 }, []);
18
19 const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
20 e.preventDefault();
21 if (!regExp.test(value)) return;
22 setIsCalculating(true);
23 setResult(await HelloWorker.factorize(BigInt(value)));
24 setIsCalculating(false);
25 };
26
27 return (
28 <form onSubmit={onSubmit}>
29 <div className="input-group">
30 <input
31 type="text"
32 placeholder="Type a large number..."
33 value={value}
34 onChange={(e) => setValue(e.currentTarget.value)}
35 />
36 <button disabled={!regExp.test(value) || isCalculating}>
37 {isCalculating ? 'Calculating...' : 'Factorize'}
38 </button>
39 </div>
40 <div className="break-all max-h-96 overflow-auto">
41 {result?.map((factor, index) => <div key={index}>{factor.toString()}</div>)}
42 </div>
43 </form>
44 );
45}