drewdaemon · drewdaemon · Apr 26, 2022 · Apr 26, 2022 · Apr 26, 2022
diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
@@ -329,6 +329,10 @@ The plugin exposes the static DefaultEditorController class to consume.
 |WARNING: Missing README.
 
 
+|{kib-repo}blob/{branch}/src/plugins/vis_type_script/README.md[visTypeScript]
+|This plugin defines the script-based visualization type. Users can use JavaScript and the popular D3 library to build script-based custom visualizations directly in Kibana.
+
+
 |{kib-repo}blob/{branch}/src/plugins/vis_types/table/README.md[visTypeTable]
 |Contains the data table visualization, that allows presenting data in a simple table format.
 

diff --git a/package.json b/package.json
@@ -194,6 +194,7 @@
     "@mapbox/mapbox-gl-draw": "1.3.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@reduxjs/toolkit": "^1.6.1",
+    "@remote-ui/rpc": "1.3.0",
     "@slack/webhook": "^5.0.4",
     "@turf/along": "6.0.1",
     "@turf/area": "6.0.1",

diff --git a/src/plugins/vis_type_script/README.md b/src/plugins/vis_type_script/README.md
@@ -10,6 +10,7 @@ Add the following to `kibana.yml` (**DO NOT USE IN PRODUCTION**):
 
 ```yml
 csp.warnLegacyBrowsers: false
+csp.strict: false
 csp.script_src:
   - 'unsafe-inline'
   - 'https://unpkg.com/'

diff --git a/src/plugins/vis_type_script/public/renderer/index.tsx b/src/plugins/vis_type_script/public/renderer/index.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { createEndpoint, fromIframe } from '@remote-ui/rpc';
 
 import './index.scss';
 
@@ -22,8 +23,31 @@ const getSandboxDocument = (script: string) => {
       <head>
         <meta http-equiv="content-security-policy" content="default-src none; script-src 'nonce-${nonce}' ${d3Url}">
         <script src="${d3Url}"></script>
+        <script nonce="${nonce}" type="module">
+          //  TODO: probably can't leave this using type=module
+          import { createEndpoint, fromInsideIframe } from "https://unpkg.com/@remote-ui/rpc@1.3.0/index.mjs";
+
+          const endpoint = createEndpoint(fromInsideIframe());
+
+          const KIBANA_API = {
+            searchEs: () => {
+              console.log('Calling search inside an iframe')
+              endpoint.call.searchEs();
+            }
+          }
+
+          endpoint.expose({
+             onUpdate: () => {
+                console.log('Running an update from an iframe')
+             }
+          })
+
+
+          window.KIBANA_API = KIBANA_API;
+        </script>
+
         <script nonce="${nonce}">window.addEventListener('load', () => {${script}})</script>
-      </head>  
+      </head>
       <body></body>
     <html>
     `;
@@ -34,8 +58,28 @@ export const ScriptRenderer: React.FunctionComponent<{ script: string }> = ({
 }: {
   script: string;
 }) => {
+  const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
+
+  React.useEffect(() => {
+    if (!iframeRef.current) throw new Error('Iframe init error');
+    const iframeEl = iframeRef.current;
+    const endpoint = createEndpoint<{ onUpdate: () => void }>(fromIframe(iframeEl));
+
+    endpoint.expose({
+      searchEs: () => {
+        // eslint-disable-next-line no-console
+        console.log('Running search from parent');
+      },
+    });
+
+    // eslint-disable-next-line no-console
+    console.log('Calling on update from parent');
+    endpoint.call.onUpdate();
+  }, []);
+
   return (
     <iframe
+      ref={iframeRef}
       className="script-based-visualization-renderer"
       title="script-based-visualization-renderer"
       srcDoc={getSandboxDocument(visualizationScript)}

diff --git a/yarn.lock b/yarn.lock
@@ -4113,6 +4113,11 @@
     redux-thunk "^2.3.0"
     reselect "^4.0.0"
 
+"@remote-ui/rpc@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@remote-ui/rpc/-/rpc-1.3.0.tgz#e9469803e8024707f096bd52041fdfe61154dac8"
+  integrity sha512-tO0nYON8IhErx/DYxufo7ccwnSh1Vo5mS41HAjUQ+fCctNmRABug0tjvCdOq1E6R6JAq1EbxN0U5w+7pYMcaFg==
+
 "@rushstack/node-core-library@3.43.2":
   version "3.43.2"
   resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.43.2.tgz#f067371a94fd92ed8f9d9aa8201c5e9e17a19f0f"