Some more 5.2 examples

Author: kerrishotts

ui-playground/plugin/manifest.json

@@ -3,11 +3,39 @@
     "name": "HTML Playground",
     "version": "1.0.0",
     "main": "index.html",
-    "manifestVersion": 4,
-    "host": {
-        "app": "PS",
-        "minVersion": "22.0.0"
+    "manifestVersion": 5,
+    "requiredPermissions": {
+        "allowCodeGenerationFromStrings": true,
+        "webivew": {
+            "allow": "yes"
+        },
+		"launchProcess": "request"
+    },
+    "featureFlags": {
+        "experimentalTableV1Support": true
+    },
+    "host": [
+        {
+        "app": "UXPS",
+        "minVersion": "1.0.0"
     },
+        {
+        "app": "UXPT",
+        "minVersion": "0.1.0"
+    },
+    {
+        "app": "PS",
+        "minVersion": "22.0.0",
+        "data": {
+            "apiVersion": 1
+        }
+    }, {
+        "app": "XD",
+        "minVersion": "36.0.0"
+    }, {
+        "app": "exotest",
+        "minVersion": "1.0.0"
+    }],
     "strings": {
         "plugin-title": { "default": "HTML Playground" },
         "about-command": { "default": "About" },

ui-playground/src/App.css

@@ -1,10 +1,8 @@
 .tabbar {
     display: flex;
     flex: 0 0 auto;
-    padding: 12px;
+    padding: 4px 0;
     background-color: rgba(0,0,0,.25);
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
     flex-wrap: wrap;
 }
 .tabsection {
@@ -13,11 +11,15 @@
     flex-direction: row;
     flex-wrap: wrap;
 }
-.tabsection:nth-of-type(2) {
+.tabsection:nth-of-type(3) {
     justify-content: flex-end;
 }
 
-.tabsection * {
+.tabsection > * {
+    margin: 0 4px;
+}
+
+.tabsection sp-checkbox {
     margin: 0 4px;
 }
 
@@ -32,18 +34,21 @@
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    padding: 16px;
 }
 
 .editor * {
     flex: 1 1 auto;
 }
 
-textarea {
-    appearance: none;
-    position: relative;
-    border-radius: 4px;
-    padding: 16px;
+.preview {
+    overflow: auto;
+    height: 200px;
+}
+
+.editor textarea, .editor sp-textarea {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 1px;
 }
 
 .err {
@@ -55,9 +60,7 @@ textarea {
     color: white;
     fill: currentColor;
     padding: 16px;
-    margin: 24px;
     margin-top: 0;
-    border-radius: 4px;
 }
 .err svg {
     flex: 0 0 auto;
@@ -72,4 +75,30 @@ textarea {
     color: white;
 }
 
+.sideLabel {
+    position: relative;
+    margin-left: 50px;    
+    width: 150px;
+}
+
+.sideLabel sp-label {
+    position: absolute;
+    left: -50px;
+    line-height: 24px;
+}
 
+.info {
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    padding: 0 16px;
+}
+.info > * {
+    margin: 0 8px;
+}
+i {
+    font-style: italic;
+}
+sp-overlay {
+    display: inline-block; 
+}

ui-playground/src/App.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Sval from "sval";
+const Babel = require ("@babel/standalone");
 
 import "./App.css";
 
@@ -30,17 +31,25 @@ export class App extends AutoUpdatingPanel {
     }
 
     executeCode() {
+        const store = this.props.store;
         try {
-            const code = `"use strict";${this.props.store.js}`;
+            store.error = "";
+            const strictCode =`"use strict";${this.props.store.js}`;
+            const code = store.jsx ? Babel.transform(strictCode, {presets: ["env", "react"]}).code : strictCode;
             const interpreter = new Sval(options);
+            interpreter.import("React", require("react"));
+            interpreter.import("ReactDOM", require("react-dom"));
             interpreter.import("uxp", require("uxp"));
             interpreter.import("os", require("os"));
-            interpreter.import("rootNode", this.root.current)
+            interpreter.import("rootNode", document.querySelector("#__preview__") || this.root.current);
+            interpreter.import("console", Object.assign({}, console, {
+                log (...msg) {store.error = msg.join(""); },
+                error (...msg) {store.error = "ERROR: " + msg.join(""); }
+            }));
             interpreter.run(code);
-            this.props.store.error = "";
         }
         catch(err) {
-            this.props.store.error = err.message;
+            store.error = err.message;
         }
     }
 

ui-playground/src/components/About.jsx

@@ -18,7 +18,7 @@ export class About extends React.Component {
                 </sp-body>
                 <sp-body class="well">
                     <sp-icon name="ui:InfoSmall" size="s"></sp-icon>
-                    This plugin does _not_ support running React code. You may need to make some adjustments before
+                    This plugin does <i>not</i> support running React code. You may need to make some adjustments before
                     writing your plugin using React based on any findings here.
                 </sp-body>
                 <sp-detail>VERSIONS</sp-detail>

ui-playground/src/components/DropdownMenu.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { WC } from "../components/WC.jsx";
+
+export function DropdownMenu({label, items, onClick} = {}) {
+
+    function menuItemClicked(e) {
+        const target = e.target;
+        const whichMenu = target.id;
+
+        // if no id, then we can't do anything with it -- bail
+        if (!whichMenu) return;
+
+        // basic debouncing
+        if (target.getAttribute("ignore")) return;
+        target.setAttribute("ignore", "ignore");
+
+        const menuEl = target.parentElement;
+        const popover = menuEl.parentElement;
+
+        // BUG: even though the popover is open, it shows as false. Setting it to false
+        // won't close the popover because the value hasn't changed. This bit of hacky
+        // code corrects this by forcing the popover open (does nothing really, since it
+        // already is), and then we can safely hide it.
+        popover.open = true;
+        setTimeout(() => {
+            // close the popover
+            popover.open = false;
+
+            // clear the selected item
+            menuEl.selectedIndex = -1;
+
+            const item = items.find(({id: candidateId, handler}={}) => candidateId === whichMenu);
+            if (item && item.handler) {
+                // add a timeout in case we have a dialog -- show it too fast and it and the popover
+                // start having issues
+                setTimeout(() => item.handler(), 100);
+            }
+        }, 16);
+
+        // clear the flag for debounce
+        setTimeout(() => {
+            target.removeAttribute("ignore");
+        }, 100);
+    }
+
+    function transformItems(items) {
+        return items.map(({id, label}={}) => label !== "-" ? <sp-menu-item id={id} key={id}>{label}</sp-menu-item> 
+                                                        : <sp-divider></sp-divider>);
+    }
+
+    return (<WC onClick={menuItemClicked}>
+        <sp-overlay style={{display: "inline-block"}}>
+            <sp-action-button size="s" slot="trigger" quiet>{label}</sp-action-button>
+            <sp-popover size="s" offset="0" placement="bottom" alignment="bottom" appearance="none" slot="click">
+                <sp-menu size="s" style={{width: "200px"}}>
+                    {transformItems(items)}
+                </sp-menu>
+            </sp-popover>
+        </sp-overlay>
+    </WC>);
+}

ui-playground/src/components/Icons.jsx

@@ -1,5 +1,10 @@
 import React from "react";
 
+export const SmallPlayIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 18 18" width="14">
+        <path  d="M4.73,2H3.5a.5.5,0,0,0-.5.5v13a.5.5,0,0,0,.5.5H4.73a1,1,0,0,0,.5035-.136l11.032-6.433a.5.5,0,0,0,0-.862L5.2335,2.136A1,1,0,0,0,4.73,2Z" />
+    </svg>
+);
 export const PlayIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
         <path  d="M4.73,2H3.5a.5.5,0,0,0-.5.5v13a.5.5,0,0,0,.5.5H4.73a1,1,0,0,0,.5035-.136l11.032-6.433a.5.5,0,0,0,0-.862L5.2335,2.136A1,1,0,0,0,4.73,2Z" />

ui-playground/src/constants.js

@@ -2,7 +2,9 @@ export const VIEWS = {
     HTML: "html",
     STYLES: "styles",
     JS: "js",
+    PREVIEW: "preview",
     0: "html",
     1: "styles",
-    2: "js"
+    2: "js",
+    3: "preview"
 };

ui-playground/src/index.jsx

@@ -27,4 +27,4 @@ entrypoints.setup({
   commands: {
     showAbout: aboutController
   },
-});
+});