@webiny/app-sdk-playground 6.3.0 → 6.4.0-beta.0
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/PermissionsSchema.js +22 -14
- package/PermissionsSchema.js.map +1 -1
- package/SecurityPermission.js +11 -14
- package/SecurityPermission.js.map +1 -1
- package/index.js +42 -41
- package/index.js.map +1 -1
- package/package.json +8 -8
- package/plugins/Playground.js +31 -43
- package/plugins/Playground.js.map +1 -1
- package/plugins/components/CodeEditor.js +48 -59
- package/plugins/components/CodeEditor.js.map +1 -1
- package/plugins/components/OutputLine.js +14 -15
- package/plugins/components/OutputLine.js.map +1 -1
- package/plugins/components/OutputPanel.js +19 -22
- package/plugins/components/OutputPanel.js.map +1 -1
- package/plugins/components/PlaygroundToolbar.js +23 -29
- package/plugins/components/PlaygroundToolbar.js.map +1 -1
- package/plugins/consoleCapture.js +61 -66
- package/plugins/consoleCapture.js.map +1 -1
- package/plugins/declarations/cms.js +2 -2
- package/plugins/declarations/cms.js.map +1 -1
- package/plugins/declarations/common.js +2 -2
- package/plugins/declarations/common.js.map +1 -1
- package/plugins/declarations/fileManager.js +2 -2
- package/plugins/declarations/fileManager.js.map +1 -1
- package/plugins/declarations/languages.js +2 -2
- package/plugins/declarations/languages.js.map +1 -1
- package/plugins/declarations/tasks.js +2 -2
- package/plugins/declarations/tasks.js.map +1 -1
- package/plugins/declarations/tenantManager.js +2 -2
- package/plugins/declarations/tenantManager.js.map +1 -1
- package/plugins/defaultCode.js +2 -2
- package/plugins/defaultCode.js.map +1 -1
- package/plugins/sdkGlobalDeclaration.js +2 -13
- package/plugins/sdkGlobalDeclaration.js.map +1 -1
- package/plugins/types.js +2 -2
- package/plugins/types.js.map +1 -1
- package/plugins/useCodeExecution.js +45 -59
- package/plugins/useCodeExecution.js.map +1 -1
- package/plugins/useMonacoEditor.js +43 -48
- package/plugins/useMonacoEditor.js.map +1 -1
- package/plugins/useResizableSplit.js +35 -38
- package/plugins/useResizableSplit.js.map +1 -1
- package/routes.js +6 -5
- package/routes.js.map +1 -1
package/PermissionsSchema.js
CHANGED
|
@@ -1,18 +1,26 @@
|
|
|
1
1
|
import { createPermissionSchema } from "@webiny/app-admin";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
const DEV_TOOLS_PERMISSIONS_SCHEMA = createPermissionSchema({
|
|
3
|
+
prefix: "dev-tools",
|
|
4
|
+
fullAccess: true,
|
|
5
|
+
entities: [
|
|
6
|
+
{
|
|
7
|
+
id: "graphql-playground",
|
|
8
|
+
title: "GraphQL Playground",
|
|
9
|
+
permission: "dev-tools.graphql-playground.*",
|
|
10
|
+
scopes: [
|
|
11
|
+
"full"
|
|
12
|
+
]
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
id: "sdk-playground",
|
|
16
|
+
title: "SDK Playground",
|
|
17
|
+
permission: "dev-tools.sdk-playground.*",
|
|
18
|
+
scopes: [
|
|
19
|
+
"full"
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
]
|
|
16
23
|
});
|
|
24
|
+
export { DEV_TOOLS_PERMISSIONS_SCHEMA };
|
|
17
25
|
|
|
18
26
|
//# sourceMappingURL=PermissionsSchema.js.map
|
package/PermissionsSchema.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"PermissionsSchema.js","sources":["../src/PermissionsSchema.ts"],"sourcesContent":["import { createPermissionSchema } from \"@webiny/app-admin\";\n\nexport const DEV_TOOLS_PERMISSIONS_SCHEMA = createPermissionSchema({\n prefix: \"dev-tools\",\n fullAccess: true,\n entities: [\n {\n id: \"graphql-playground\",\n title: \"GraphQL Playground\",\n permission: \"dev-tools.graphql-playground.*\",\n scopes: [\"full\"]\n },\n {\n id: \"sdk-playground\",\n title: \"SDK Playground\",\n permission: \"dev-tools.sdk-playground.*\",\n scopes: [\"full\"]\n }\n ]\n});\n"],"names":["DEV_TOOLS_PERMISSIONS_SCHEMA","createPermissionSchema"],"mappings":";AAEO,MAAMA,+BAA+BC,uBAAuB;IAC/D,QAAQ;IACR,YAAY;IACZ,UAAU;QACN;YACI,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,QAAQ;gBAAC;aAAO;QACpB;QACA;YACI,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,QAAQ;gBAAC;aAAO;QACpB;KACH;AACL"}
|
package/SecurityPermission.js
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import react from "react";
|
|
2
2
|
import { AdminConfig } from "@webiny/app-admin";
|
|
3
|
-
import { ReactComponent
|
|
3
|
+
import { ReactComponent } from "@webiny/icons/developer_mode.svg";
|
|
4
4
|
import { DEV_TOOLS_PERMISSIONS_SCHEMA } from "./PermissionsSchema.js";
|
|
5
|
-
const {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
schema: DEV_TOOLS_PERMISSIONS_SCHEMA
|
|
15
|
-
}));
|
|
16
|
-
};
|
|
5
|
+
const { Security: Security } = AdminConfig;
|
|
6
|
+
const SecurityPermission = ()=>/*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Security.Permissions, {
|
|
7
|
+
name: "dev-tools",
|
|
8
|
+
title: "Dev Tools",
|
|
9
|
+
description: "Manage Dev Tools access.",
|
|
10
|
+
icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
|
|
11
|
+
schema: DEV_TOOLS_PERMISSIONS_SCHEMA
|
|
12
|
+
}));
|
|
13
|
+
export { SecurityPermission };
|
|
17
14
|
|
|
18
15
|
//# sourceMappingURL=SecurityPermission.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"SecurityPermission.js","sources":["../src/SecurityPermission.tsx"],"sourcesContent":["import React from \"react\";\nimport { AdminConfig } from \"@webiny/app-admin\";\nimport { ReactComponent as DevToolsIcon } from \"@webiny/icons/developer_mode.svg\";\nimport { DEV_TOOLS_PERMISSIONS_SCHEMA } from \"./PermissionsSchema.js\";\n\nconst { Security } = AdminConfig;\n\nexport const SecurityPermission = () => {\n return (\n <AdminConfig>\n <Security.Permissions\n name=\"dev-tools\"\n title=\"Dev Tools\"\n description=\"Manage Dev Tools access.\"\n icon={<DevToolsIcon />}\n schema={DEV_TOOLS_PERMISSIONS_SCHEMA}\n />\n </AdminConfig>\n );\n};\n"],"names":["Security","AdminConfig","SecurityPermission","DevToolsIcon","DEV_TOOLS_PERMISSIONS_SCHEMA"],"mappings":";;;;AAKA,MAAM,EAAEA,UAAAA,QAAQ,EAAE,GAAGC;AAEd,MAAMC,qBAAqB,IACvB,WAAP,GACI,oBAACD,aAAWA,MAAAA,WAAAA,GACR,oBAACD,SAAS,WAAW;QACjB,MAAK;QACL,OAAM;QACN,aAAY;QACZ,oBAAM,oBAACG,gBAAYA;QACnB,QAAQC"}
|
package/index.js
CHANGED
|
@@ -1,47 +1,48 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { ReactComponent
|
|
4
|
-
import { ReactComponent as
|
|
1
|
+
import react, { memo } from "react";
|
|
2
|
+
import { AdminConfig, AdminLayout, HasPermission, useRouter } from "@webiny/app-admin";
|
|
3
|
+
import { ReactComponent } from "@webiny/icons/code.svg";
|
|
4
|
+
import { ReactComponent as developer_mode_svg_ReactComponent } from "@webiny/icons/developer_mode.svg";
|
|
5
5
|
import Playground from "./plugins/Playground.js";
|
|
6
6
|
import { SecurityPermission } from "./SecurityPermission.js";
|
|
7
7
|
import { Routes } from "./routes.js";
|
|
8
|
-
const {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
8
|
+
const { Route: Route, Menu: Menu } = AdminConfig;
|
|
9
|
+
const SdkPlaygroundExtension = ()=>{
|
|
10
|
+
const router = useRouter();
|
|
11
|
+
return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SecurityPermission, null), /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Menu, {
|
|
12
|
+
name: "dev-tools",
|
|
13
|
+
hideIfEmpty: true,
|
|
14
|
+
pin: "end",
|
|
15
|
+
element: /*#__PURE__*/ react.createElement(Menu.Item, {
|
|
16
|
+
text: "Dev Tools",
|
|
17
|
+
icon: /*#__PURE__*/ react.createElement(Menu.Item.Icon, {
|
|
18
|
+
label: "Dev Tools",
|
|
19
|
+
element: /*#__PURE__*/ react.createElement(developer_mode_svg_ReactComponent, null)
|
|
20
|
+
})
|
|
21
|
+
})
|
|
22
|
+
}), /*#__PURE__*/ react.createElement(HasPermission, {
|
|
23
|
+
any: [
|
|
24
|
+
"dev-tools.*",
|
|
25
|
+
"dev-tools.sdk-playground.*"
|
|
26
|
+
]
|
|
27
|
+
}, /*#__PURE__*/ react.createElement(Menu, {
|
|
28
|
+
name: "dev-tools.sdk",
|
|
29
|
+
parent: "dev-tools",
|
|
30
|
+
element: /*#__PURE__*/ react.createElement(Menu.Link, {
|
|
31
|
+
text: "SDK Playground",
|
|
32
|
+
to: router.getLink(Routes.SdkPlayground),
|
|
33
|
+
icon: /*#__PURE__*/ react.createElement(Menu.Link.Icon, {
|
|
34
|
+
label: "SDK Playground",
|
|
35
|
+
element: /*#__PURE__*/ react.createElement(ReactComponent, null)
|
|
36
|
+
})
|
|
37
|
+
})
|
|
38
|
+
})), /*#__PURE__*/ react.createElement(Route, {
|
|
39
|
+
route: Routes.SdkPlayground,
|
|
40
|
+
element: /*#__PURE__*/ react.createElement(AdminLayout, {
|
|
41
|
+
title: "SDK Playground"
|
|
42
|
+
}, /*#__PURE__*/ react.createElement(Playground, null))
|
|
43
|
+
})));
|
|
44
44
|
};
|
|
45
|
-
|
|
45
|
+
const SdkPlayground = /*#__PURE__*/ memo(SdkPlaygroundExtension);
|
|
46
|
+
export { SdkPlayground };
|
|
46
47
|
|
|
47
48
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport { useRouter, AdminConfig, AdminLayout, HasPermission } from \"@webiny/app-admin\";\nimport { ReactComponent as CodeIcon } from \"@webiny/icons/code.svg\";\nimport { ReactComponent as DevToolsIcon } from \"@webiny/icons/developer_mode.svg\";\nimport Playground from \"./plugins/Playground.js\";\nimport { SecurityPermission } from \"./SecurityPermission.js\";\nimport { Routes } from \"./routes.js\";\n\nconst { Route, Menu } = AdminConfig;\n\nconst SdkPlaygroundExtension = () => {\n const router = useRouter();\n\n return (\n <>\n <SecurityPermission />\n <AdminConfig>\n <Menu\n name={\"dev-tools\"}\n hideIfEmpty={true}\n pin={\"end\"}\n element={\n <Menu.Item\n text={\"Dev Tools\"}\n icon={<Menu.Item.Icon label=\"Dev Tools\" element={<DevToolsIcon />} />}\n />\n }\n />\n <HasPermission any={[\"dev-tools.*\", \"dev-tools.sdk-playground.*\"]}>\n <Menu\n name={\"dev-tools.sdk\"}\n parent={\"dev-tools\"}\n element={\n <Menu.Link\n text={\"SDK Playground\"}\n to={router.getLink(Routes.SdkPlayground)}\n icon={\n <Menu.Link.Icon label=\"SDK Playground\" element={<CodeIcon />} />\n }\n />\n }\n />\n </HasPermission>\n\n <Route\n route={Routes.SdkPlayground}\n element={\n <AdminLayout title={\"SDK Playground\"}>\n <Playground />\n </AdminLayout>\n }\n />\n </AdminConfig>\n </>\n );\n};\n\nexport const SdkPlayground = memo(SdkPlaygroundExtension);\n"],"names":["Route","Menu","AdminConfig","SdkPlaygroundExtension","router","useRouter","SecurityPermission","DevToolsIcon","HasPermission","Routes","CodeIcon","AdminLayout","Playground","SdkPlayground","memo"],"mappings":";;;;;;;AAQA,MAAM,EAAEA,OAAAA,KAAK,EAAEC,MAAAA,IAAI,EAAE,GAAGC;AAExB,MAAMC,yBAAyB;IAC3B,MAAMC,SAASC;IAEf,OAAO,WAAP,GACI,wDACI,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAACJ,aAAWA,MAAAA,WAAAA,GACR,oBAACD,MAAIA;QACD,MAAM;QACN,aAAa;QACb,KAAK;QACL,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,oBAAM,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAY,uBAAS,oBAACM,mCAAYA;;;sBAI1E,oBAACC,eAAaA;QAAC,KAAK;YAAC;YAAe;SAA6B;qBAC7D,oBAACP,MAAIA;QACD,MAAM;QACN,QAAQ;QACR,uBACI,oBAACA,KAAK,IAAI;YACN,MAAM;YACN,IAAIG,OAAO,OAAO,CAACK,OAAO,aAAa;YACvC,oBACI,oBAACR,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAM;gBAAiB,uBAAS,oBAACS,gBAAQA;;;uBAO7E,oBAACV,OAAKA;QACF,OAAOS,OAAO,aAAa;QAC3B,uBACI,oBAACE,aAAWA;YAAC,OAAO;yBAChB,oBAACC,YAAUA;;AAOvC;AAEO,MAAMC,gBAAgB,WAAHA,GAAGC,KAAKX"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/app-sdk-playground",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.0-beta.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./index.js",
|
|
@@ -14,17 +14,17 @@
|
|
|
14
14
|
"license": "MIT",
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@monaco-editor/react": "4.7.0",
|
|
17
|
-
"@webiny/admin-ui": "6.
|
|
18
|
-
"@webiny/app": "6.
|
|
19
|
-
"@webiny/app-admin": "6.
|
|
20
|
-
"@webiny/icons": "6.
|
|
21
|
-
"@webiny/sdk": "6.
|
|
17
|
+
"@webiny/admin-ui": "6.4.0-beta.0",
|
|
18
|
+
"@webiny/app": "6.4.0-beta.0",
|
|
19
|
+
"@webiny/app-admin": "6.4.0-beta.0",
|
|
20
|
+
"@webiny/icons": "6.4.0-beta.0",
|
|
21
|
+
"@webiny/sdk": "6.4.0-beta.0",
|
|
22
22
|
"monaco-editor": "0.53.0",
|
|
23
23
|
"react": "18.3.1",
|
|
24
24
|
"react-dom": "18.3.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@webiny/build-tools": "6.
|
|
27
|
+
"@webiny/build-tools": "6.4.0-beta.0",
|
|
28
28
|
"rimraf": "6.1.3",
|
|
29
29
|
"typescript": "6.0.3"
|
|
30
30
|
},
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"access": "public",
|
|
33
33
|
"directory": "dist"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "a545d7529828af07d08d49c3da1bcb967483b9ce"
|
|
36
36
|
}
|
package/plugins/Playground.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import react, { useState } from "react";
|
|
2
2
|
import { defaultSdkCode } from "./defaultCode.js";
|
|
3
3
|
import { useCodeExecution } from "./useCodeExecution.js";
|
|
4
4
|
import { useMonacoEditor } from "./useMonacoEditor.js";
|
|
@@ -6,48 +6,36 @@ import { useResizableSplit } from "./useResizableSplit.js";
|
|
|
6
6
|
import { PlaygroundToolbar } from "./components/PlaygroundToolbar.js";
|
|
7
7
|
import { CodeEditor } from "./components/CodeEditor.js";
|
|
8
8
|
import { OutputPanel } from "./components/OutputPanel.js";
|
|
9
|
-
const Playground = ()
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
className: "flex flex-1 overflow-hidden",
|
|
38
|
-
ref: splitRef
|
|
39
|
-
}, /*#__PURE__*/React.createElement(CodeEditor, {
|
|
40
|
-
code: code,
|
|
41
|
-
editorPct: editorPct,
|
|
42
|
-
isRunning: isRunning,
|
|
43
|
-
onCodeChange: setCode,
|
|
44
|
-
onBeforeMount: handleBeforeMount,
|
|
45
|
-
onMount: handleEditorDidMount,
|
|
46
|
-
onDividerMouseDown: handleDividerMouseDown
|
|
47
|
-
}), /*#__PURE__*/React.createElement(OutputPanel, {
|
|
48
|
-
output: output
|
|
49
|
-
})));
|
|
9
|
+
const Playground = ()=>{
|
|
10
|
+
const [code, setCode] = useState(defaultSdkCode);
|
|
11
|
+
const { splitRef, editorPct, handleDividerMouseDown } = useResizableSplit();
|
|
12
|
+
const { editorRef, handleBeforeMount, handleEditorDidMount, handleFormat } = useMonacoEditor(()=>handleRun());
|
|
13
|
+
const { output, isRunning, handleRun } = useCodeExecution(code, editorRef);
|
|
14
|
+
return /*#__PURE__*/ react.createElement("div", {
|
|
15
|
+
className: "flex flex-col bg-gray-100",
|
|
16
|
+
style: {
|
|
17
|
+
height: "calc(100vh - 45px)"
|
|
18
|
+
}
|
|
19
|
+
}, /*#__PURE__*/ react.createElement(PlaygroundToolbar, {
|
|
20
|
+
isRunning: isRunning,
|
|
21
|
+
onRun: handleRun,
|
|
22
|
+
onFormat: handleFormat
|
|
23
|
+
}), /*#__PURE__*/ react.createElement("div", {
|
|
24
|
+
className: "flex flex-1 overflow-hidden",
|
|
25
|
+
ref: splitRef
|
|
26
|
+
}, /*#__PURE__*/ react.createElement(CodeEditor, {
|
|
27
|
+
code: code,
|
|
28
|
+
editorPct: editorPct,
|
|
29
|
+
isRunning: isRunning,
|
|
30
|
+
onCodeChange: setCode,
|
|
31
|
+
onBeforeMount: handleBeforeMount,
|
|
32
|
+
onMount: handleEditorDidMount,
|
|
33
|
+
onDividerMouseDown: handleDividerMouseDown
|
|
34
|
+
}), /*#__PURE__*/ react.createElement(OutputPanel, {
|
|
35
|
+
output: output
|
|
36
|
+
})));
|
|
50
37
|
};
|
|
51
|
-
|
|
38
|
+
const plugins_Playground = Playground;
|
|
39
|
+
export default plugins_Playground;
|
|
52
40
|
|
|
53
41
|
//# sourceMappingURL=Playground.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"plugins/Playground.js","sources":["../../src/plugins/Playground.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { defaultSdkCode } from \"./defaultCode.js\";\nimport { useCodeExecution } from \"./useCodeExecution.js\";\nimport { useMonacoEditor } from \"./useMonacoEditor.js\";\nimport { useResizableSplit } from \"./useResizableSplit.js\";\nimport { PlaygroundToolbar } from \"./components/PlaygroundToolbar.js\";\nimport { CodeEditor } from \"./components/CodeEditor.js\";\nimport { OutputPanel } from \"./components/OutputPanel.js\";\n\nconst Playground: React.FC = () => {\n const [code, setCode] = useState(defaultSdkCode);\n const { splitRef, editorPct, handleDividerMouseDown } = useResizableSplit();\n const { editorRef, handleBeforeMount, handleEditorDidMount, handleFormat } = useMonacoEditor(\n () => handleRun()\n );\n const { output, isRunning, handleRun } = useCodeExecution(code, editorRef);\n\n return (\n <div className=\"flex flex-col bg-gray-100\" style={{ height: \"calc(100vh - 45px)\" }}>\n <PlaygroundToolbar isRunning={isRunning} onRun={handleRun} onFormat={handleFormat} />\n <div className=\"flex flex-1 overflow-hidden\" ref={splitRef}>\n <CodeEditor\n code={code}\n editorPct={editorPct}\n isRunning={isRunning}\n onCodeChange={setCode}\n onBeforeMount={handleBeforeMount}\n onMount={handleEditorDidMount}\n onDividerMouseDown={handleDividerMouseDown}\n />\n <OutputPanel output={output} />\n </div>\n </div>\n );\n};\n\nexport default Playground;\n"],"names":["Playground","code","setCode","useState","defaultSdkCode","splitRef","editorPct","handleDividerMouseDown","useResizableSplit","editorRef","handleBeforeMount","handleEditorDidMount","handleFormat","useMonacoEditor","handleRun","output","isRunning","useCodeExecution","PlaygroundToolbar","CodeEditor","OutputPanel"],"mappings":";;;;;;;;AASA,MAAMA,aAAuB;IACzB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAASC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,sBAAsB,EAAE,GAAGC;IACxD,MAAM,EAAEC,SAAS,EAAEC,iBAAiB,EAAEC,oBAAoB,EAAEC,YAAY,EAAE,GAAGC,gBACzE,IAAMC;IAEV,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAEF,SAAS,EAAE,GAAGG,iBAAiBhB,MAAMQ;IAEhE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;QAA4B,OAAO;YAAE,QAAQ;QAAqB;qBAC7E,oBAACS,mBAAiBA;QAAC,WAAWF;QAAW,OAAOF;QAAW,UAAUF;sBACrE,oBAAC;QAAI,WAAU;QAA8B,KAAKP;qBAC9C,oBAACc,YAAUA;QACP,MAAMlB;QACN,WAAWK;QACX,WAAWU;QACX,cAAcd;QACd,eAAeQ;QACf,SAASC;QACT,oBAAoBJ;sBAExB,oBAACa,aAAWA;QAAC,QAAQL;;AAIrC;AAEA,2BAAef"}
|
|
@@ -1,62 +1,51 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import react from "react";
|
|
2
|
+
import _monaco_editor_react from "@monaco-editor/react";
|
|
3
3
|
import { OverlayLoader } from "@webiny/admin-ui";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
tabSize: 4,
|
|
51
|
-
insertSpaces: true,
|
|
52
|
-
formatOnPaste: true,
|
|
53
|
-
formatOnType: true,
|
|
54
|
-
suggest: {
|
|
55
|
-
showKeywords: true,
|
|
56
|
-
showSnippets: true
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}));
|
|
60
|
-
};
|
|
4
|
+
const CodeEditor = ({ code, editorPct, isRunning, onCodeChange, onBeforeMount, onMount, onDividerMouseDown })=>/*#__PURE__*/ react.createElement("div", {
|
|
5
|
+
className: "relative overflow-hidden border-r border-gray-200",
|
|
6
|
+
style: {
|
|
7
|
+
flex: "none",
|
|
8
|
+
width: `${editorPct}%`
|
|
9
|
+
},
|
|
10
|
+
onMouseMove: (e)=>{
|
|
11
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
12
|
+
e.currentTarget.style.cursor = e.clientX >= rect.right - 4 ? "col-resize" : "";
|
|
13
|
+
},
|
|
14
|
+
onMouseLeave: (e)=>{
|
|
15
|
+
e.currentTarget.style.cursor = "";
|
|
16
|
+
},
|
|
17
|
+
onMouseDown: (e)=>{
|
|
18
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
19
|
+
if (e.clientX >= rect.right - 4) onDividerMouseDown(e);
|
|
20
|
+
}
|
|
21
|
+
}, isRunning && /*#__PURE__*/ react.createElement(OverlayLoader, {
|
|
22
|
+
text: "Running code..."
|
|
23
|
+
}), /*#__PURE__*/ react.createElement(_monaco_editor_react, {
|
|
24
|
+
height: "100%",
|
|
25
|
+
defaultLanguage: "typescript",
|
|
26
|
+
value: code,
|
|
27
|
+
onChange: (value)=>value && onCodeChange(value),
|
|
28
|
+
beforeMount: onBeforeMount,
|
|
29
|
+
onMount: onMount,
|
|
30
|
+
options: {
|
|
31
|
+
minimap: {
|
|
32
|
+
enabled: false
|
|
33
|
+
},
|
|
34
|
+
renderLineHighlight: "none",
|
|
35
|
+
fontSize: 14,
|
|
36
|
+
automaticLayout: true,
|
|
37
|
+
scrollBeyondLastLine: false,
|
|
38
|
+
wordWrap: "on",
|
|
39
|
+
tabSize: 4,
|
|
40
|
+
insertSpaces: true,
|
|
41
|
+
formatOnPaste: true,
|
|
42
|
+
formatOnType: true,
|
|
43
|
+
suggest: {
|
|
44
|
+
showKeywords: true,
|
|
45
|
+
showSnippets: true
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}));
|
|
49
|
+
export { CodeEditor };
|
|
61
50
|
|
|
62
51
|
//# sourceMappingURL=CodeEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"plugins/components/CodeEditor.js","sources":["../../../src/plugins/components/CodeEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport Editor from \"@monaco-editor/react\";\nimport type { OnMount, BeforeMount } from \"@monaco-editor/react\";\nimport { OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface CodeEditorProps {\n code: string;\n editorPct: number;\n isRunning: boolean;\n onCodeChange: (value: string) => void;\n onBeforeMount: BeforeMount;\n onMount: OnMount;\n onDividerMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const CodeEditor: React.FC<CodeEditorProps> = ({\n code,\n editorPct,\n isRunning,\n onCodeChange,\n onBeforeMount,\n onMount,\n onDividerMouseDown\n}) => {\n return (\n <div\n className=\"relative overflow-hidden border-r border-gray-200\"\n style={{ flex: \"none\", width: `${editorPct}%` }}\n onMouseMove={e => {\n const rect = e.currentTarget.getBoundingClientRect();\n e.currentTarget.style.cursor = e.clientX >= rect.right - 4 ? \"col-resize\" : \"\";\n }}\n onMouseLeave={e => {\n e.currentTarget.style.cursor = \"\";\n }}\n onMouseDown={e => {\n const rect = e.currentTarget.getBoundingClientRect();\n if (e.clientX >= rect.right - 4) {\n onDividerMouseDown(e);\n }\n }}\n >\n {isRunning && <OverlayLoader text=\"Running code...\" />}\n <Editor\n height=\"100%\"\n defaultLanguage=\"typescript\"\n value={code}\n onChange={value => value && onCodeChange(value)}\n beforeMount={onBeforeMount}\n onMount={onMount}\n options={{\n minimap: { enabled: false },\n renderLineHighlight: \"none\",\n fontSize: 14,\n automaticLayout: true,\n scrollBeyondLastLine: false,\n wordWrap: \"on\",\n tabSize: 4,\n insertSpaces: true,\n formatOnPaste: true,\n formatOnType: true,\n suggest: {\n showKeywords: true,\n showSnippets: true\n }\n }}\n />\n </div>\n );\n};\n"],"names":["CodeEditor","code","editorPct","isRunning","onCodeChange","onBeforeMount","onMount","onDividerMouseDown","e","rect","OverlayLoader","Editor","value"],"mappings":";;;AAeO,MAAMA,aAAwC,CAAC,EAClDC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,YAAY,EACZC,aAAa,EACbC,OAAO,EACPC,kBAAkB,EACrB,GACU,WAAP,GACI,oBAAC;QACG,WAAU;QACV,OAAO;YAAE,MAAM;YAAQ,OAAO,GAAGL,UAAU,CAAC,CAAC;QAAC;QAC9C,aAAaM,CAAAA;YACT,MAAMC,OAAOD,EAAE,aAAa,CAAC,qBAAqB;YAClDA,EAAE,aAAa,CAAC,KAAK,CAAC,MAAM,GAAGA,EAAE,OAAO,IAAIC,KAAK,KAAK,GAAG,IAAI,eAAe;QAChF;QACA,cAAcD,CAAAA;YACVA,EAAE,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG;QACnC;QACA,aAAaA,CAAAA;YACT,MAAMC,OAAOD,EAAE,aAAa,CAAC,qBAAqB;YAClD,IAAIA,EAAE,OAAO,IAAIC,KAAK,KAAK,GAAG,GAC1BF,mBAAmBC;QAE3B;OAECL,aAAa,WAAbA,GAAa,oBAACO,eAAaA;QAAC,MAAK;sBAClC,oBAACC,sBAAMA;QACH,QAAO;QACP,iBAAgB;QAChB,OAAOV;QACP,UAAUW,CAAAA,QAASA,SAASR,aAAaQ;QACzC,aAAaP;QACb,SAASC;QACT,SAAS;YACL,SAAS;gBAAE,SAAS;YAAM;YAC1B,qBAAqB;YACrB,UAAU;YACV,iBAAiB;YACjB,sBAAsB;YACtB,UAAU;YACV,SAAS;YACT,cAAc;YACd,eAAe;YACf,cAAc;YACd,SAAS;gBACL,cAAc;gBACd,cAAc;YAClB;QACJ"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
className: "text-gray-400 text-[11px]"
|
|
15
|
-
}, "[", new Date(message.timestamp).toLocaleTimeString(), "]"), " ", message.message);
|
|
1
|
+
import react from "react";
|
|
2
|
+
const OutputLine = ({ message })=>{
|
|
3
|
+
const colorClasses = {
|
|
4
|
+
log: "text-gray-800",
|
|
5
|
+
error: "text-red-700",
|
|
6
|
+
warn: "text-orange-600",
|
|
7
|
+
info: "text-blue-600"
|
|
8
|
+
};
|
|
9
|
+
return /*#__PURE__*/ react.createElement("div", {
|
|
10
|
+
className: `font-mono text-[13px] mb-1 whitespace-pre-wrap break-words ${colorClasses[message.type]}`
|
|
11
|
+
}, /*#__PURE__*/ react.createElement("span", {
|
|
12
|
+
className: "text-gray-400 text-[11px]"
|
|
13
|
+
}, "[", new Date(message.timestamp).toLocaleTimeString(), "]"), " ", message.message);
|
|
16
14
|
};
|
|
15
|
+
export { OutputLine };
|
|
17
16
|
|
|
18
17
|
//# sourceMappingURL=OutputLine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"plugins/components/OutputLine.js","sources":["../../../src/plugins/components/OutputLine.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ConsoleMessage } from \"../types.js\";\n\nexport const OutputLine: React.FC<{ message: ConsoleMessage }> = ({ message }) => {\n const colorClasses: Record<ConsoleMessage[\"type\"], string> = {\n log: \"text-gray-800\",\n error: \"text-red-700\",\n warn: \"text-orange-600\",\n info: \"text-blue-600\"\n };\n\n return (\n <div\n className={`font-mono text-[13px] mb-1 whitespace-pre-wrap break-words ${colorClasses[message.type]}`}\n >\n <span className=\"text-gray-400 text-[11px]\">\n [{new Date(message.timestamp).toLocaleTimeString()}]\n </span>{\" \"}\n {message.message}\n </div>\n );\n};\n"],"names":["OutputLine","message","colorClasses","Date"],"mappings":";AAGO,MAAMA,aAAoD,CAAC,EAAEC,OAAO,EAAE;IACzE,MAAMC,eAAuD;QACzD,KAAK;QACL,OAAO;QACP,MAAM;QACN,MAAM;IACV;IAEA,OAAO,WAAP,GACI,oBAAC;QACG,WAAW,CAAC,2DAA2D,EAAEA,YAAY,CAACD,QAAQ,IAAI,CAAC,EAAE;qBAErG,oBAAC;QAAK,WAAU;OAA4B,KACtC,IAAIE,KAAKF,QAAQ,SAAS,EAAE,kBAAkB,IAAG,MAC/C,KACPA,QAAQ,OAAO;AAG5B"}
|
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
import
|
|
1
|
+
import react from "react";
|
|
2
2
|
import { OutputLine } from "./OutputLine.js";
|
|
3
3
|
import { MIN_PANE_PCT } from "../types.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
message: msg
|
|
23
|
-
}))));
|
|
24
|
-
};
|
|
4
|
+
const OutputPanel = ({ output })=>/*#__PURE__*/ react.createElement("div", {
|
|
5
|
+
className: "bg-white flex flex-col overflow-hidden",
|
|
6
|
+
style: {
|
|
7
|
+
flex: 1,
|
|
8
|
+
width: "auto",
|
|
9
|
+
minWidth: `${MIN_PANE_PCT}%`
|
|
10
|
+
}
|
|
11
|
+
}, /*#__PURE__*/ react.createElement("div", {
|
|
12
|
+
className: "p-2 border-b border-gray-200 font-bold"
|
|
13
|
+
}, "Output"), /*#__PURE__*/ react.createElement("div", {
|
|
14
|
+
className: "p-2 overflow-auto flex-1"
|
|
15
|
+
}, 0 === output.length ? /*#__PURE__*/ react.createElement("div", {
|
|
16
|
+
className: "text-gray-400 italic"
|
|
17
|
+
}, 'Click "Run Code" to see output here...') : output.map((msg, index)=>/*#__PURE__*/ react.createElement(OutputLine, {
|
|
18
|
+
key: index,
|
|
19
|
+
message: msg
|
|
20
|
+
}))));
|
|
21
|
+
export { OutputPanel };
|
|
25
22
|
|
|
26
23
|
//# sourceMappingURL=OutputPanel.js.map
|