Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 38a0952

Browse filesBrowse files
jdeniaujdeniau
committed
extract repl worker script to a proper file
1 parent c81ea79 commit 38a0952
Copy full SHA for 38a0952

File tree

4 files changed

+169
-97
lines changed
Filter options

4 files changed

+169
-97
lines changed

‎website/src/repl/Repl.tsx

Copy file name to clipboardExpand all lines: website/src/repl/Repl.tsx
+4-97Lines changed: 4 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -16,103 +16,10 @@ function Repl({ defaultValue, onRun }: Props): JSX.Element {
1616
const workerRef = useRef<Worker | null>(null);
1717

1818
useEffect(() => {
19-
const workerScript = `
20-
importScripts('https://cdn.jsdelivr.net/npm/immutable@5.1.1', 'https://cdn.jsdelivr.net/npm/@jdeniau/immutable-devtools@0.2.0');
21-
22-
// extract all Immutable exports to have them available in the worker automatically
23-
const {
24-
version,
25-
Collection,
26-
Iterable,
27-
Seq,
28-
Map,
29-
OrderedMap,
30-
List,
31-
Stack,
32-
Set,
33-
OrderedSet,
34-
PairSorting,
35-
Record,
36-
Range,
37-
Repeat,
38-
is,
39-
fromJS,
40-
hash,
41-
isImmutable,
42-
isCollection,
43-
isKeyed,
44-
isIndexed,
45-
isAssociative,
46-
isOrdered,
47-
isPlainObject,
48-
isValueObject,
49-
isSeq,
50-
isList,
51-
isMap,
52-
isOrderedMap,
53-
isStack,
54-
isSet,
55-
isOrderedSet,
56-
isRecord,
57-
get,
58-
getIn,
59-
has,
60-
hasIn,
61-
merge,
62-
mergeDeep,
63-
mergeWith,
64-
mergeDeepWith,
65-
remove,
66-
removeIn,
67-
set,
68-
setIn,
69-
update,
70-
updateIn,
71-
} = Immutable;
72-
73-
immutableDevTools(Immutable);
74-
75-
// hack to get the formatters from immutable-devtools as they are not exported, but they modify the "global" variable
76-
const immutableFormaters = globalThis.devtoolsFormatters;
77-
78-
// console.log(immutableFormaters)
79-
80-
function normalizeResult(result) {
81-
const formatter = immutableFormaters.find((formatter) => formatter.header(result));
82-
83-
if (!formatter) {
84-
return undefined;
85-
}
86-
87-
return {
88-
header: formatter.header(result),
89-
body: formatter.hasBody(result) ? formatter.body(result) : undefined,
90-
}
91-
}
92-
93-
self.onmessage = function(event) {
94-
let timeoutId = setTimeout(() => {
95-
self.postMessage({ error: "Execution timed out" });
96-
self.close();
97-
}, 2000);
98-
99-
try {
100-
const result = eval(event.data);
101-
clearTimeout(timeoutId);
102-
103-
self.postMessage({ output: normalizeResult(result) });
104-
} catch (error) {
105-
console.log(error);
106-
clearTimeout(timeoutId);
107-
self.postMessage({ error: String(error) });
108-
}
109-
};
110-
`;
111-
112-
const workerBlob = new Blob([workerScript], {
113-
type: 'application/javascript',
114-
});
115-
workerRef.current = new Worker(URL.createObjectURL(workerBlob));
19+
// Create a worker from the external worker.js file
20+
workerRef.current = new Worker(
21+
new URL('../worker/index.ts', import.meta.url)
22+
);
11623

11724
return () => {
11825
workerRef.current?.terminate();

‎website/src/worker/index.ts

Copy file name to clipboard
+100Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/// <reference lib="webworker" />
2+
import type * as ImmutableModule from '../../../type-definitions/immutable.js';
3+
import normalizeResult, { DevToolsFormatter } from './normalizeResult';
4+
5+
// Declare Immutable and immutableDevTools as they come from external scripts
6+
declare const Immutable: typeof ImmutableModule;
7+
8+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
9+
declare function immutableDevTools(immutable: any): void;
10+
11+
// Declare globalThis.devtoolsFormatters
12+
declare global {
13+
// eslint-disable-next-line no-var
14+
var devtoolsFormatters: DevToolsFormatter[];
15+
}
16+
17+
importScripts(
18+
'https://cdn.jsdelivr.net/npm/immutable@5.1.1',
19+
'https://cdn.jsdelivr.net/npm/@jdeniau/immutable-devtools@0.2.0'
20+
);
21+
22+
// extract all Immutable exports to have them available in the worker automatically
23+
/* eslint-disable @typescript-eslint/no-unused-vars */
24+
const {
25+
// @ts-expect-error type is not exported but runtime is OK
26+
version,
27+
Collection,
28+
// @ts-expect-error type is not exported but runtime is OK
29+
// Note: Iterable is deprecated, alias for Collection
30+
Iterable,
31+
Seq,
32+
Map,
33+
OrderedMap,
34+
List,
35+
Stack,
36+
Set,
37+
OrderedSet,
38+
PairSorting,
39+
Record,
40+
Range,
41+
Repeat,
42+
is,
43+
fromJS,
44+
hash,
45+
isImmutable,
46+
isCollection,
47+
isKeyed,
48+
isIndexed,
49+
isAssociative,
50+
isOrdered,
51+
// @ts-expect-error type is not exported but runtime is OK
52+
isPlainObject,
53+
isValueObject,
54+
isSeq,
55+
isList,
56+
isMap,
57+
isOrderedMap,
58+
isStack,
59+
isSet,
60+
isOrderedSet,
61+
isRecord,
62+
get,
63+
getIn,
64+
has,
65+
hasIn,
66+
merge,
67+
mergeDeep,
68+
mergeWith,
69+
mergeDeepWith,
70+
remove,
71+
removeIn,
72+
set,
73+
setIn,
74+
update,
75+
updateIn,
76+
} = Immutable;
77+
/* eslint-disable @typescript-eslint/no-unused-vars */
78+
79+
immutableDevTools(Immutable);
80+
81+
// hack to get the formatters from immutable-devtools as they are not exported, but they modify the "global" variable
82+
const immutableFormaters = globalThis.devtoolsFormatters;
83+
84+
self.onmessage = function (event) {
85+
const timeoutId = setTimeout(() => {
86+
self.postMessage({ error: 'Execution timed out' });
87+
self.close();
88+
}, 2000);
89+
90+
try {
91+
const result = eval(event.data);
92+
clearTimeout(timeoutId);
93+
94+
self.postMessage({ output: normalizeResult(immutableFormaters, result) });
95+
} catch (error) {
96+
console.log(error);
97+
clearTimeout(timeoutId);
98+
self.postMessage({ error: String(error) });
99+
}
100+
};

‎website/src/worker/jsonml-types.ts

Copy file name to clipboard
+29Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* TypeScript types representing a JsonML grammar
3+
*
4+
* This represents a JSON-based markup language where elements are represented as arrays:
5+
* - First element is the tag name
6+
* - Second element (optional) is an attributes object
7+
* - Remaining elements are children
8+
*/
9+
10+
// Basic types
11+
type TagName = string;
12+
type AttributeName = string;
13+
type AttributeValue = string | number | boolean | null;
14+
15+
// Attributes
16+
// type Attribute = [AttributeName, AttributeValue];
17+
// type AttributeList = Attribute[];
18+
export type Attributes = Record<AttributeName, AttributeValue>;
19+
20+
// Elements
21+
export type Element =
22+
| [TagName, Attributes, ...Element[]] // [tag-name, attributes, element-list]
23+
| [TagName, Attributes] // [tag-name, attributes]
24+
| [TagName, ...Element[]] // [tag-name, element-list]
25+
| [TagName] // [tag-name]
26+
| string; // string
27+
28+
// Element list is just a list of elements
29+
export type JsonMLElementList = Element[];

‎website/src/worker/normalizeResult.ts

Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Attributes, Element, JsonMLElementList } from './jsonml-types';
2+
3+
export interface DevToolsFormatter {
4+
header: (obj: unknown) => JsonMLElementList | null;
5+
hasBody: (obj: unknown) => boolean;
6+
body: (obj: unknown) => JsonMLElementList | null;
7+
}
8+
9+
export interface ObjectForConsole {
10+
header: JsonMLElementList | null;
11+
body: JsonMLElementList | null;
12+
}
13+
14+
// console.log(immutableFormaters)
15+
export default function normalizeResult(
16+
immutableFormaters: Array<DevToolsFormatter>,
17+
result: unknown
18+
): ObjectForConsole {
19+
const formatter = immutableFormaters.find((formatter) =>
20+
formatter.header(result)
21+
);
22+
23+
if (!formatter) {
24+
return {
25+
header: ['span', JSON.stringify(result)],
26+
body: null,
27+
};
28+
}
29+
30+
const body = formatter.hasBody(result) ? formatter.body(result) : null;
31+
32+
return {
33+
header: formatter.header(result),
34+
body,
35+
};
36+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.