Skip to content

Commit bae05d6

Browse files
author
jerrywu
committed
feat: add console hook to static template
1 parent 37b8aa4 commit bae05d6

15 files changed

+123
-45
lines changed

‎package.json

+29-29
Original file line numberDiff line numberDiff line change
@@ -76,67 +76,67 @@
7676
},
7777
"dependencies": {
7878
"@codemirror/autocomplete": "^6.9.0",
79-
"@codemirror/commands": "^6.2.4",
79+
"@codemirror/commands": "^6.2.5",
8080
"@codemirror/lang-css": "^6.2.1",
81-
"@codemirror/lang-html": "^6.4.5",
82-
"@codemirror/lang-javascript": "^6.1.9",
83-
"@codemirror/language": "^6.8.0",
81+
"@codemirror/lang-html": "^6.4.6",
82+
"@codemirror/lang-javascript": "^6.2.1",
83+
"@codemirror/language": "^6.9.0",
8484
"@codemirror/state": "^6.2.1",
85-
"@codemirror/view": "^6.16.0",
86-
"@codesandbox/sandpack-client": "^2.6.9",
85+
"@codemirror/view": "^6.18.1",
86+
"@codesandbox/sandpack-client": "^2.7.0",
8787
"@lezer/highlight": "^1.1.6",
8888
"@stitches/core": "^1.2.8",
89-
"ansi-to-vue3": "^0.1.1",
89+
"ansi-to-vue3": "^0.1.2",
9090
"clean-set": "^1.1.2",
9191
"dequal": "^2.0.3",
9292
"lz-string": "^1.5.0"
9393
},
9494
"devDependencies": {
95-
"@babel/core": "^7.22.10",
96-
"@babel/plugin-transform-typescript": "^7.22.10",
97-
"@babel/preset-typescript": "^7.22.5",
95+
"@babel/core": "^7.22.17",
96+
"@babel/plugin-transform-typescript": "^7.22.15",
97+
"@babel/preset-typescript": "^7.22.15",
9898
"@codemirror/lang-python": "^6.1.3",
9999
"@codemirror/legacy-modes": "^6.3.3",
100100
"@codesandbox/sandpack-themes": "^2.0.21",
101-
"@commitlint/cli": "^17.6.7",
102-
"@commitlint/config-conventional": "^17.6.7",
103-
"@swc/core": "^1.3.75",
104-
"@testing-library/jest-dom": "^5.17.0",
101+
"@commitlint/cli": "^17.7.1",
102+
"@commitlint/config-conventional": "^17.7.0",
103+
"@swc/core": "^1.3.84",
104+
"@testing-library/jest-dom": "^6.1.3",
105105
"@testing-library/user-event": "^14.4.3",
106106
"@testing-library/vue": "^7.0.0",
107107
"@types/lz-string": "^1.5.0",
108-
"@types/node": "^20.4.9",
108+
"@types/node": "^20.6.0",
109109
"@typescript-eslint/eslint-plugin": "^5.62.0",
110110
"@typescript-eslint/parser": "^5.62.0",
111-
"@vitejs/plugin-vue": "^4.2.3",
112-
"@vitejs/plugin-vue-jsx": "^3.0.1",
113-
"@vitest/ui": "^0.34.1",
111+
"@vitejs/plugin-vue": "^4.3.4",
112+
"@vitejs/plugin-vue-jsx": "^3.0.2",
113+
"@vitest/ui": "^0.34.4",
114114
"@vue/babel-plugin-jsx": "^1.1.5",
115115
"@vue/eslint-config-typescript": "^11.0.3",
116116
"acorn-walk": "^8.2.0",
117117
"astring": "^1.8.6",
118-
"autoprefixer": "^10.4.14",
118+
"autoprefixer": "^10.4.15",
119119
"babel-loader": "^9.1.3",
120-
"bumpp": "^9.1.1",
120+
"bumpp": "^9.2.0",
121121
"cssnano": "^6.0.1",
122122
"esbuild-plugin-babel": "^0.2.3",
123-
"eslint": "^8.46.0",
123+
"eslint": "^8.49.0",
124124
"eslint-config-airbnb-base": "^15.0.0",
125125
"eslint-config-airbnb-typescript": "^17.1.0",
126-
"eslint-plugin-import": "^2.28.0",
126+
"eslint-plugin-import": "^2.28.1",
127127
"eslint-plugin-jsx-a11y": "^6.7.1",
128-
"eslint-plugin-vue": "^9.16.1",
128+
"eslint-plugin-vue": "^9.17.0",
129129
"husky": "^8.0.3",
130130
"jsdom": "^22.1.0",
131-
"lint-staged": "^13.2.3",
132-
"npm": "^9.8.1",
131+
"lint-staged": "^14.0.1",
132+
"npm": "^10.1.0",
133133
"shelljs": "^0.8.5",
134134
"tsup": "^7.2.0",
135-
"typescript": "^5.1.6",
135+
"typescript": "^5.2.2",
136136
"vite": "^4.4.9",
137-
"vite-plugin-windicss": "^1.9.0",
138-
"vitest": "^0.34.1",
139-
"vue-tsc": "^1.8.8"
137+
"vite-plugin-windicss": "^1.9.1",
138+
"vitest": "^0.34.4",
139+
"vue-tsc": "^1.8.10"
140140
},
141141
"peerDependencies": {
142142
"vue": ">=3.2.0"

‎playground/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"vue-router": "^4.2.4"
1515
},
1616
"devDependencies": {
17-
"@iconify-json/carbon": "^1.1.19",
17+
"@iconify-json/carbon": "^1.1.21",
1818
"@storybook/addon-actions": "~6.5.16",
1919
"@storybook/addon-docs": "~6.5.16",
2020
"@storybook/addon-essentials": "~6.5.16",

‎playground/stories/Console.stories.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -279,3 +279,48 @@ export const MaxMessageCount = () => {
279279
</>
280280
);
281281
};
282+
283+
export const StaticTemplate = () => (
284+
<Sandpack
285+
files={{
286+
'index.html': `<!DOCTYPE html>
287+
<html>
288+
<head>
289+
<title>Parcel Sandbox</title>
290+
<meta charset="UTF-8" />
291+
<link rel="stylesheet" href="/styles.css" />
292+
<script>
293+
console.log("fooo")
294+
</script>
295+
</head>
296+
<body>
297+
<h1>Hello world</h1>
298+
<button onclick="console.log(document.querySelectorAll('button'))">Log</button>
299+
<button onclick="console.log(document.querySelectorAll('button'))">Log</button>
300+
</body>
301+
</html>`,
302+
}}
303+
options={{ showConsole: true }}
304+
template="static"
305+
/>
306+
);
307+
308+
export const NodeTemplate = () => <Sandpack options={{ showConsole: true }} template="node" />;
309+
310+
export const ReactTemplate = () => (
311+
<Sandpack
312+
options={{ showConsole: true }}
313+
files={{
314+
'App.js': `import { useState } from "react"
315+
export default function App() {
316+
const foo = useState("")
317+
console.log(foo)
318+
return (
319+
<>
320+
</>
321+
)
322+
}`,
323+
}}
324+
template="react"
325+
/>
326+
);

‎src/common/LoadingOverlay.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export const LoadingOverlay = defineComponent({
139139
watch(
140140
progressMessage,
141141
() => {
142-
if (timer) clearTimeout(timer);
142+
if (timer) clearTimeout(timer as any);
143143
if (progressMessage.value?.includes('Running')) {
144144
timer = setTimeout(() => {
145145
shouldShowStdout.value = true;
@@ -150,11 +150,11 @@ export const LoadingOverlay = defineComponent({
150150
);
151151

152152
onBeforeUnmount(() => {
153-
if (timer) clearTimeout(timer);
153+
if (timer) clearTimeout(timer as any);
154154
});
155155

156156
onUnmounted(() => {
157-
if (timer) clearTimeout(timer);
157+
if (timer) clearTimeout(timer as any);
158158
});
159159

160160
return () => (

‎src/components/code-editor/data/useDelayCodeEditor.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export default function useDelayCodeEditor(props: CodeMirrorProps) {
235235
const resetEditor = () => {
236236
cmView.value?.destroy();
237237
if (timer) {
238-
clearTimeout(timer);
238+
clearTimeout(timer as any);
239239
}
240240
};
241241

‎src/components/console/utils/constraints.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const CLEAR_LOG = {
77
};
88

99
export const TRANSFORMED_TYPE_KEY = '@t';
10+
export const TRANSFORMED_TYPE_KEY_ALTERNATE = '#@t';
1011
export const CIRCULAR_REF_KEY = '@r';
1112

1213
export const MAX_LENGTH_STRING = 10000;

‎src/components/console/utils/fromConsoleToString.ts

+27
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
import {
99
TRANSFORMED_TYPE_KEY,
10+
TRANSFORMED_TYPE_KEY_ALTERNATE,
1011
MAX_NEST_LEVEL,
1112
MAX_KEYS,
1213
MAX_LENGTH_STRING,
@@ -48,6 +49,25 @@ const formatSymbols = (message: Message): any => {
4849
const transform = transformers[type];
4950

5051
return transform(message.data);
52+
} else if (
53+
typeof message === 'object' &&
54+
TRANSFORMED_TYPE_KEY_ALTERNATE in message
55+
) {
56+
const type = message[TRANSFORMED_TYPE_KEY_ALTERNATE] as TransformsTypes;
57+
const transform = transformers[type];
58+
59+
return transform(message.data);
60+
} else if (
61+
typeof message === 'object' &&
62+
message.constructor?.name === 'NodeList'
63+
) {
64+
const NodeList = {};
65+
Object.entries(message).forEach(([key, value]) => {
66+
// @ts-ignore
67+
NodeList[key] = formatSymbols(value);
68+
});
69+
70+
return NodeList;
5171
}
5272

5373
return message;
@@ -161,6 +181,13 @@ export const fromConsoleToString = (
161181
return fromConsoleToString(newMessage, references, level + 1);
162182
}
163183

184+
if (output.constructor?.name === 'NodeList') {
185+
const { length } = output;
186+
const nodes = new Array(length).fill(null).map((_, index) => fromConsoleToString(output[index], references));
187+
188+
return `NodeList(${output.length})[${nodes}]`;
189+
}
190+
164191
return objectToString(output, references, level + 1);
165192
}
166193
} catch {

‎src/components/file-explorer/util.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { ModuleListProps } from './ModuleList';
22
import { fromPropsToModules } from './util';
3+
import { expect, it, describe } from 'vitest';
34

45
const defaultProps: ModuleListProps = {
56
files: {

‎src/contexts/sandpackContext.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ const SandpackProvider = defineComponent({
345345
delete registeredIframes.value[clientId];
346346

347347
if (timeoutHook.value) {
348-
clearTimeout(timeoutHook.value);
348+
clearTimeout(timeoutHook.value as any);
349349
}
350350

351351
const unsubscribeQueuedClients = Object.values(
@@ -371,7 +371,7 @@ const SandpackProvider = defineComponent({
371371
state.bundlerState = msg.state;
372372
} else if ((msg.type === 'done' && !msg.compilatonError) || msg.type === 'connected') {
373373
if (timeoutHook.value) {
374-
clearTimeout(timeoutHook.value);
374+
clearTimeout(timeoutHook.value as any);
375375
}
376376
state.error = null;
377377
} else if (msg.type === 'action' && msg.action === 'show-error') {
@@ -400,7 +400,7 @@ const SandpackProvider = defineComponent({
400400
const timeOut = props?.options?.bundlerTimeOut ?? BUNDLER_TIMEOUT;
401401

402402
if (timeoutHook.value) {
403-
clearTimeout(timeoutHook.value);
403+
clearTimeout(timeoutHook.value as any);
404404
}
405405

406406
/**
@@ -540,7 +540,7 @@ const SandpackProvider = defineComponent({
540540
}, 50);
541541
} else {
542542
if (initializeSandpackIframeHook.value) {
543-
clearTimeout(initializeSandpackIframeHook.value);
543+
clearTimeout(initializeSandpackIframeHook.value as any);
544544
}
545545

546546
Object.keys(state.clients).map(unregisterBundler);
@@ -683,15 +683,15 @@ const SandpackProvider = defineComponent({
683683
}
684684

685685
if (timeoutHook.value) {
686-
clearTimeout(timeoutHook.value);
686+
clearTimeout(timeoutHook.value as any);
687687
}
688688

689689
if (debounceHook.value) {
690690
clearTimeout(debounceHook.value);
691691
}
692692

693693
if (initializeSandpackIframeHook.value) {
694-
clearTimeout(initializeSandpackIframeHook.value);
694+
clearTimeout(initializeSandpackIframeHook.value as any);
695695
}
696696

697697
if (intersectionObserver.value) {

‎src/hooks/useLoadingOverlayState.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,12 @@ export const useLoadingOverlayState = (props: LoadingOverlayStateProp) => {
8989
() => props.loading,
9090
],
9191
() => {
92-
if (fadeTimeout) clearTimeout(fadeTimeout);
92+
if (fadeTimeout) clearTimeout(fadeTimeout as any);
9393

9494
if (state.value === 'PRE_FADING' && !props.loading) {
9595
state.value = 'FADING';
9696
} else if (state.value === 'FADING') {
97-
if (fadeTimeout) clearTimeout(fadeTimeout);
97+
if (fadeTimeout) clearTimeout(fadeTimeout as any);
9898
fadeTimeout = setTimeout(
9999
() => {
100100
state.value = 'HIDDEN';

‎src/hooks/useSandpackPreviewProgress.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const useSandpackPreviewProgress = (
7171
if (message.type === 'done' && message.compilatonError === false) {
7272
isReady.value = true;
7373
loadingMessage.value = null;
74-
clearTimeout(timer);
74+
clearTimeout(timer as any);
7575
}
7676
}, props?.clientId);
7777
},
@@ -80,14 +80,14 @@ export const useSandpackPreviewProgress = (
8080

8181
onBeforeUnmount(() => {
8282
if (timer) {
83-
clearTimeout(timer);
83+
clearTimeout(timer as any);
8484
}
8585
if (unsubscribe) unsubscribe();
8686
});
8787

8888
onUnmounted(() => {
8989
if (timer) {
90-
clearTimeout(timer);
90+
clearTimeout(timer as any);
9191
}
9292
if (unsubscribe) unsubscribe();
9393
});

‎src/styles/styles.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { standardizeTheme, standardizeStitchesTheme } from '.';
2+
import { describe, it, expect } from 'vitest';
23

34
describe('standardizeTheme', () => {
45
it('should return the default theme', () => {

‎src/utils/array.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { shallowEqual } from './array';
2+
import { describe, it, expect } from 'vitest';
23

34
describe('shallowEqual', () => {
45
it('should be different: when the first array is longer than the second one', () => {

‎src/utils/sandpackUtils.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
* @jest-environment jsdom
33
*/
44
import { REACT_TEMPLATE } from '../templates/runtime/react';
5+
import { describe, it, expect, test } from 'vitest';
56

67
import {
78
getSandpackStateFromProps,

‎src/utils/stringUtils.test.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { calculateNearestUniquePath } from './stringUtils';
2+
import { describe, it, expect } from 'vitest';
23

34
describe('calculateNearestUniquePath', () => {
45
it('strips the leading slash from the root path', () => {

0 commit comments

Comments
 (0)