browser-playground-core 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +114 -0
- package/dist/index.d.ts +114 -0
- package/dist/index.js +1252 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1206 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +40 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type VirtualFileSystem = Record<string, string>;
|
|
4
|
+
type PlaygroundMode = 'code' | 'form';
|
|
5
|
+
type PlaygroundRuntime = 'react' | 'dom';
|
|
6
|
+
type PlaygroundPlugin = {
|
|
7
|
+
name: string;
|
|
8
|
+
beforeCompile?: (code: string) => string | Promise<string>;
|
|
9
|
+
afterCompile?: (result: CompileResult) => CompileResult | Promise<CompileResult>;
|
|
10
|
+
setupMonaco?: (monaco: any) => void | Promise<void>;
|
|
11
|
+
transformVirtualFiles?: (ctx: {
|
|
12
|
+
files: VirtualFileSystem;
|
|
13
|
+
entryFile: string;
|
|
14
|
+
}) => {
|
|
15
|
+
files: VirtualFileSystem;
|
|
16
|
+
entryFile: string;
|
|
17
|
+
} | null | Promise<{
|
|
18
|
+
files: VirtualFileSystem;
|
|
19
|
+
entryFile: string;
|
|
20
|
+
} | null>;
|
|
21
|
+
extendCompileConfig?: (config: PlaygroundCompileConfig, ctx: {
|
|
22
|
+
files: VirtualFileSystem;
|
|
23
|
+
entryFile: string;
|
|
24
|
+
}) => PlaygroundCompileConfig | void;
|
|
25
|
+
runtimeGlobals?: (ctx: {
|
|
26
|
+
runtime: PlaygroundRuntime;
|
|
27
|
+
}) => Record<string, any> | Promise<Record<string, any>>;
|
|
28
|
+
};
|
|
29
|
+
type CompileResult = {
|
|
30
|
+
code: string | null;
|
|
31
|
+
error: string | null;
|
|
32
|
+
runtime?: PlaygroundRuntime;
|
|
33
|
+
runtimeGlobalNames?: string[];
|
|
34
|
+
};
|
|
35
|
+
type PlaygroundCompileConfig = {
|
|
36
|
+
runtime: PlaygroundRuntime;
|
|
37
|
+
allowedBareImports: string[];
|
|
38
|
+
rollupExternal: string[];
|
|
39
|
+
rollupGlobals: Record<string, string>;
|
|
40
|
+
iifeName: string;
|
|
41
|
+
};
|
|
42
|
+
type PlaygroundProps = {
|
|
43
|
+
initialCode?: string;
|
|
44
|
+
initialFiles?: VirtualFileSystem;
|
|
45
|
+
entryFile?: string;
|
|
46
|
+
plugins?: PlaygroundPlugin[];
|
|
47
|
+
dependencies?: Record<string, any>;
|
|
48
|
+
height?: number | string;
|
|
49
|
+
showFileTree?: boolean;
|
|
50
|
+
fileTreeDefaultOpen?: boolean;
|
|
51
|
+
fileTreeWidth?: number | string;
|
|
52
|
+
mode?: PlaygroundMode;
|
|
53
|
+
formValue?: unknown;
|
|
54
|
+
onFormValueChange?: (nextValue: unknown) => void;
|
|
55
|
+
renderForm?: (args: {
|
|
56
|
+
value: unknown;
|
|
57
|
+
onChange?: (nextValue: unknown) => void;
|
|
58
|
+
}) => React.ReactNode;
|
|
59
|
+
};
|
|
60
|
+
type PlaygroundProviderProps = PlaygroundProps & {
|
|
61
|
+
children: React.ReactNode;
|
|
62
|
+
};
|
|
63
|
+
type PlaygroundContextValue = {
|
|
64
|
+
files: VirtualFileSystem;
|
|
65
|
+
activeFilePath: string;
|
|
66
|
+
setActiveFilePath: (path: string) => void;
|
|
67
|
+
updateFile: (path: string, code: string) => void;
|
|
68
|
+
code: string;
|
|
69
|
+
setCode: (value: string) => void;
|
|
70
|
+
isCompiling: boolean;
|
|
71
|
+
error: string | null;
|
|
72
|
+
runtime: PlaygroundRuntime;
|
|
73
|
+
renderedComponent: React.ComponentType | null;
|
|
74
|
+
renderedDomModule: {
|
|
75
|
+
mount: (el: HTMLElement) => any;
|
|
76
|
+
unmount?: () => any;
|
|
77
|
+
} | null;
|
|
78
|
+
plugins: PlaygroundPlugin[];
|
|
79
|
+
};
|
|
80
|
+
type PlaygroundPaneProps = {
|
|
81
|
+
height?: number | string;
|
|
82
|
+
className?: string;
|
|
83
|
+
style?: React.CSSProperties;
|
|
84
|
+
};
|
|
85
|
+
type PlaygroundRenderProps = PlaygroundPaneProps;
|
|
86
|
+
type PlaygroundEditorProps = PlaygroundPaneProps & {
|
|
87
|
+
language?: string;
|
|
88
|
+
showFileTree?: boolean;
|
|
89
|
+
fileTreeDefaultOpen?: boolean;
|
|
90
|
+
fileTreeWidth?: number | string;
|
|
91
|
+
};
|
|
92
|
+
type PlaygroundFileTreeProps = PlaygroundPaneProps & {
|
|
93
|
+
width?: number | string;
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
declare const Playground: React.FC<PlaygroundProps>;
|
|
97
|
+
|
|
98
|
+
declare const defaultSnippet = "import React from 'react';\n\ntype GreetingProps = { name: string };\n\nconst Card: React.FC<GreetingProps> = ({ name }) => {\n return (\n <div style={{ padding: '16px', borderRadius: '12px', background: '#0f172a', color: '#e2e8f0' }}>\n <h2 style={{ margin: 0 }}>Hello, {name}</h2>\n <p style={{ marginTop: 8 }}>You can edit this code to see live updates.</p>\n </div>\n );\n};\n\nexport default function Preview() {\n return (\n <div style={{ display: 'grid', gap: '12px', padding: '8px' }}>\n <Card name=\"Playground\" />\n <Card name=\"React\" />\n </div>\n );\n}\n";
|
|
99
|
+
declare const PlaygroundProvider: React.FC<PlaygroundProviderProps>;
|
|
100
|
+
declare const usePlayground: () => PlaygroundContextValue;
|
|
101
|
+
|
|
102
|
+
declare const PlaygroundEditor: React.FC<PlaygroundEditorProps>;
|
|
103
|
+
|
|
104
|
+
declare const PlaygroundFileTree: React.FC<PlaygroundFileTreeProps>;
|
|
105
|
+
|
|
106
|
+
declare const PlaygroundRender: React.FC<PlaygroundRenderProps>;
|
|
107
|
+
|
|
108
|
+
declare function compileUserCode(rawCode: string, plugins?: PlaygroundPlugin[]): Promise<CompileResult>;
|
|
109
|
+
declare function compileVirtualFiles(rawFiles: VirtualFileSystem, entryFile: string, plugins?: PlaygroundPlugin[], options?: {
|
|
110
|
+
dependencies?: string[];
|
|
111
|
+
}): Promise<CompileResult>;
|
|
112
|
+
declare function bundleWithRollup(source: string): Promise<string>;
|
|
113
|
+
|
|
114
|
+
export { type CompileResult, Playground, type PlaygroundCompileConfig, type PlaygroundContextValue, PlaygroundEditor, type PlaygroundEditorProps, PlaygroundFileTree, type PlaygroundFileTreeProps, type PlaygroundMode, type PlaygroundPaneProps, type PlaygroundPlugin, type PlaygroundProps, PlaygroundProvider, type PlaygroundProviderProps, PlaygroundRender, type PlaygroundRenderProps, type PlaygroundRuntime, type VirtualFileSystem, bundleWithRollup, compileUserCode, compileVirtualFiles, defaultSnippet, usePlayground };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type VirtualFileSystem = Record<string, string>;
|
|
4
|
+
type PlaygroundMode = 'code' | 'form';
|
|
5
|
+
type PlaygroundRuntime = 'react' | 'dom';
|
|
6
|
+
type PlaygroundPlugin = {
|
|
7
|
+
name: string;
|
|
8
|
+
beforeCompile?: (code: string) => string | Promise<string>;
|
|
9
|
+
afterCompile?: (result: CompileResult) => CompileResult | Promise<CompileResult>;
|
|
10
|
+
setupMonaco?: (monaco: any) => void | Promise<void>;
|
|
11
|
+
transformVirtualFiles?: (ctx: {
|
|
12
|
+
files: VirtualFileSystem;
|
|
13
|
+
entryFile: string;
|
|
14
|
+
}) => {
|
|
15
|
+
files: VirtualFileSystem;
|
|
16
|
+
entryFile: string;
|
|
17
|
+
} | null | Promise<{
|
|
18
|
+
files: VirtualFileSystem;
|
|
19
|
+
entryFile: string;
|
|
20
|
+
} | null>;
|
|
21
|
+
extendCompileConfig?: (config: PlaygroundCompileConfig, ctx: {
|
|
22
|
+
files: VirtualFileSystem;
|
|
23
|
+
entryFile: string;
|
|
24
|
+
}) => PlaygroundCompileConfig | void;
|
|
25
|
+
runtimeGlobals?: (ctx: {
|
|
26
|
+
runtime: PlaygroundRuntime;
|
|
27
|
+
}) => Record<string, any> | Promise<Record<string, any>>;
|
|
28
|
+
};
|
|
29
|
+
type CompileResult = {
|
|
30
|
+
code: string | null;
|
|
31
|
+
error: string | null;
|
|
32
|
+
runtime?: PlaygroundRuntime;
|
|
33
|
+
runtimeGlobalNames?: string[];
|
|
34
|
+
};
|
|
35
|
+
type PlaygroundCompileConfig = {
|
|
36
|
+
runtime: PlaygroundRuntime;
|
|
37
|
+
allowedBareImports: string[];
|
|
38
|
+
rollupExternal: string[];
|
|
39
|
+
rollupGlobals: Record<string, string>;
|
|
40
|
+
iifeName: string;
|
|
41
|
+
};
|
|
42
|
+
type PlaygroundProps = {
|
|
43
|
+
initialCode?: string;
|
|
44
|
+
initialFiles?: VirtualFileSystem;
|
|
45
|
+
entryFile?: string;
|
|
46
|
+
plugins?: PlaygroundPlugin[];
|
|
47
|
+
dependencies?: Record<string, any>;
|
|
48
|
+
height?: number | string;
|
|
49
|
+
showFileTree?: boolean;
|
|
50
|
+
fileTreeDefaultOpen?: boolean;
|
|
51
|
+
fileTreeWidth?: number | string;
|
|
52
|
+
mode?: PlaygroundMode;
|
|
53
|
+
formValue?: unknown;
|
|
54
|
+
onFormValueChange?: (nextValue: unknown) => void;
|
|
55
|
+
renderForm?: (args: {
|
|
56
|
+
value: unknown;
|
|
57
|
+
onChange?: (nextValue: unknown) => void;
|
|
58
|
+
}) => React.ReactNode;
|
|
59
|
+
};
|
|
60
|
+
type PlaygroundProviderProps = PlaygroundProps & {
|
|
61
|
+
children: React.ReactNode;
|
|
62
|
+
};
|
|
63
|
+
type PlaygroundContextValue = {
|
|
64
|
+
files: VirtualFileSystem;
|
|
65
|
+
activeFilePath: string;
|
|
66
|
+
setActiveFilePath: (path: string) => void;
|
|
67
|
+
updateFile: (path: string, code: string) => void;
|
|
68
|
+
code: string;
|
|
69
|
+
setCode: (value: string) => void;
|
|
70
|
+
isCompiling: boolean;
|
|
71
|
+
error: string | null;
|
|
72
|
+
runtime: PlaygroundRuntime;
|
|
73
|
+
renderedComponent: React.ComponentType | null;
|
|
74
|
+
renderedDomModule: {
|
|
75
|
+
mount: (el: HTMLElement) => any;
|
|
76
|
+
unmount?: () => any;
|
|
77
|
+
} | null;
|
|
78
|
+
plugins: PlaygroundPlugin[];
|
|
79
|
+
};
|
|
80
|
+
type PlaygroundPaneProps = {
|
|
81
|
+
height?: number | string;
|
|
82
|
+
className?: string;
|
|
83
|
+
style?: React.CSSProperties;
|
|
84
|
+
};
|
|
85
|
+
type PlaygroundRenderProps = PlaygroundPaneProps;
|
|
86
|
+
type PlaygroundEditorProps = PlaygroundPaneProps & {
|
|
87
|
+
language?: string;
|
|
88
|
+
showFileTree?: boolean;
|
|
89
|
+
fileTreeDefaultOpen?: boolean;
|
|
90
|
+
fileTreeWidth?: number | string;
|
|
91
|
+
};
|
|
92
|
+
type PlaygroundFileTreeProps = PlaygroundPaneProps & {
|
|
93
|
+
width?: number | string;
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
declare const Playground: React.FC<PlaygroundProps>;
|
|
97
|
+
|
|
98
|
+
declare const defaultSnippet = "import React from 'react';\n\ntype GreetingProps = { name: string };\n\nconst Card: React.FC<GreetingProps> = ({ name }) => {\n return (\n <div style={{ padding: '16px', borderRadius: '12px', background: '#0f172a', color: '#e2e8f0' }}>\n <h2 style={{ margin: 0 }}>Hello, {name}</h2>\n <p style={{ marginTop: 8 }}>You can edit this code to see live updates.</p>\n </div>\n );\n};\n\nexport default function Preview() {\n return (\n <div style={{ display: 'grid', gap: '12px', padding: '8px' }}>\n <Card name=\"Playground\" />\n <Card name=\"React\" />\n </div>\n );\n}\n";
|
|
99
|
+
declare const PlaygroundProvider: React.FC<PlaygroundProviderProps>;
|
|
100
|
+
declare const usePlayground: () => PlaygroundContextValue;
|
|
101
|
+
|
|
102
|
+
declare const PlaygroundEditor: React.FC<PlaygroundEditorProps>;
|
|
103
|
+
|
|
104
|
+
declare const PlaygroundFileTree: React.FC<PlaygroundFileTreeProps>;
|
|
105
|
+
|
|
106
|
+
declare const PlaygroundRender: React.FC<PlaygroundRenderProps>;
|
|
107
|
+
|
|
108
|
+
declare function compileUserCode(rawCode: string, plugins?: PlaygroundPlugin[]): Promise<CompileResult>;
|
|
109
|
+
declare function compileVirtualFiles(rawFiles: VirtualFileSystem, entryFile: string, plugins?: PlaygroundPlugin[], options?: {
|
|
110
|
+
dependencies?: string[];
|
|
111
|
+
}): Promise<CompileResult>;
|
|
112
|
+
declare function bundleWithRollup(source: string): Promise<string>;
|
|
113
|
+
|
|
114
|
+
export { type CompileResult, Playground, type PlaygroundCompileConfig, type PlaygroundContextValue, PlaygroundEditor, type PlaygroundEditorProps, PlaygroundFileTree, type PlaygroundFileTreeProps, type PlaygroundMode, type PlaygroundPaneProps, type PlaygroundPlugin, type PlaygroundProps, PlaygroundProvider, type PlaygroundProviderProps, PlaygroundRender, type PlaygroundRenderProps, type PlaygroundRuntime, type VirtualFileSystem, bundleWithRollup, compileUserCode, compileVirtualFiles, defaultSnippet, usePlayground };
|