Merge pull request #277 from microsoft/plugins

Plugins

Author: Orta

packages/create-typescript-playground-plugin/template/scripts/getDTS.js

@@ -21,13 +21,15 @@ const go = async () => {
     mkdirSync(vendor)
   }
 
-  await getFileAndStoreLocally(
-    'https://www.typescriptlang.org/v2/js/sandbox/tsWorker.d.ts',
-    join(vendor, 'tsWorker.d.ts')
-  )
+  const host = 'https://www.typescriptlang.org/v2'
+  // const host = "http://localhost:8000";
+
+  await getFileAndStoreLocally(host + '/js/sandbox/tsWorker.d.ts', join(vendor, 'tsWorker.d.ts'))
+
+  await getFileAndStoreLocally(host + '/js/playground/pluginUtils.d.ts', join(vendor, 'pluginUtils.d.ts'))
 
   await getFileAndStoreLocally(
-    'https://www.typescriptlang.org/v2/js/sandbox/vendor/typescript-vfs.d.ts',
+    host + '/js/sandbox/vendor/typescript-vfs.d.ts',
     join(vendor, 'typescript-vfs.d.ts'),
     text => {
       const removeImports = text.replace('/// <reference types="lz-string" />', '')
@@ -36,36 +38,28 @@ const go = async () => {
     }
   )
 
-  await getFileAndStoreLocally(
-    'https://www.typescriptlang.org/v2/js/sandbox/index.d.ts',
-    join(vendor, 'sandbox.d.ts'),
-    text => {
-      const removeImports = text.replace(/^import/g, '// import').replace(/\nimport/g, '// import')
-      const replaceTSVFS = removeImports.replace(
-        "// import * as tsvfs from './vendor/typescript-vfs'",
-        "import * as tsvfs from './typescript-vfs'"
-      )
-      const removedLZ = replaceTSVFS.replace('lzstring: typeof lzstring', '// lzstring: typeof lzstring')
-      const addedTsWorkerImport = 'import { TypeScriptWorker } from "./tsWorker";' + removedLZ
-      return addedTsWorkerImport
-    }
-  )
+  await getFileAndStoreLocally(host + '/js/sandbox/index.d.ts', join(vendor, 'sandbox.d.ts'), text => {
+    const removeImports = text.replace(/^import/g, '// import').replace(/\nimport/g, ']\n// import')
+    const replaceTSVFS = removeImports.replace(
+      "// import * as tsvfs from './vendor/typescript-vfs'",
+      "\nimport * as tsvfs from './typescript-vfs'"
+    )
+    const removedLZ = replaceTSVFS.replace('lzstring: typeof lzstring', '// lzstring: typeof lzstring')
+    const addedTsWorkerImport = 'import { TypeScriptWorker } from "./tsWorker";' + removedLZ
+    return addedTsWorkerImport
+  })
 
-  await getFileAndStoreLocally(
-    'https://www.typescriptlang.org/v2/js/playground/index.d.ts',
-    join(vendor, '/playground.d.ts'),
-    text => {
-      const replaceSandbox = text.replace(/typescript-sandbox/g, './sandbox')
-      const replaceTSVFS = replaceSandbox.replace(
-        /typescriptlang-org\/static\/js\/sandbox\/vendor\/typescript-vfs/g,
-        './typescript-vfs'
-      )
-      const removedLZ = replaceTSVFS.replace('lzstring: typeof', '// lzstring: typeof')
-      const removedWorker = removedLZ.replace('getWorkerProcess', '// getWorkerProcess')
-      const removedUI = removedWorker.replace('ui:', '// ui:')
-      return removedUI
-    }
-  )
+  await getFileAndStoreLocally(host + '/js/playground/index.d.ts', join(vendor, '/playground.d.ts'), text => {
+    const replaceSandbox = text.replace(/typescript-sandbox/g, './sandbox')
+    const replaceTSVFS = replaceSandbox.replace(
+      /typescriptlang-org\/static\/js\/sandbox\/vendor\/typescript-vfs/g,
+      './typescript-vfs'
+    )
+    const removedLZ = replaceTSVFS.replace('lzstring: typeof', '// lzstring: typeof')
+    const removedWorker = removedLZ.replace('getWorkerProcess', '// getWorkerProcess')
+    const removedUI = removedWorker.replace('ui:', '// ui:')
+    return removedUI
+  })
 }
 
 go()

packages/create-typescript-playground-plugin/template/src/index.ts

@@ -1,40 +1,45 @@
-const customPlugin: import('./vendor/playground').PlaygroundPlugin = {
-  id: 'my-plugin',
-  displayName: 'New Plugin',
-
-  // This is called synchronously when a your plugin is about to be
-  // presented in a tab. Container is a blank div in the sidebar
-  // for you to present data in.
-  didMount: (sandbox, container) => {
-    console.log('Showing new plugin')
-
-    const p = document.createElement('p')
-    p.textContent = 'Playground plugin defaults'
-    container.appendChild(p)
-
-    const startButton = document.createElement('input')
-    startButton.type = 'button'
-    startButton.value = 'Change the code in the editor'
-    container.appendChild(startButton)
-
-    startButton.onclick = () => {
-      sandbox.setText('You clicked the button!')
-    }
-  },
-
-  // This is called occasionally as text changes in monaco,
-  // it does not directly map 1 keyup to once run of the function
-  // because it is intentionally called at most once every 0.3 seconds
-  // and then will always run at the end.
-  modelChangedDebounce: async (sandbox, _model) => {
-    //
-  },
-
-  // Gives you a chance to remove anything set up,
-  // the container itself if wiped of children after this.
-  didUnmount: () => {
-    console.log('Removing plugin')
-  },
+import type { PlaygroundPlugin, PluginUtils } from "./vendor/playground"
+
+const makePlugin = (utils: PluginUtils) => {
+  const customPlugin: PlaygroundPlugin = {
+    id: 'example',
+    displayName: 'Dev Example',
+    didMount: (sandbox, container) => {
+      console.log('Showing new plugin')
+
+      const p = (str: string) => utils.el(str, "p", container);
+      const h4 = (str: string) => utils.el(str, "h4", container);
+
+      h4("Example Plugin")
+
+      p("This plugin has a button which changes the text in the editor, click below to test it.")
+
+      const startButton = document.createElement('input')
+      startButton.type = 'button'
+      startButton.value = 'Change the code in the editor'
+      container.appendChild(startButton)
+
+      startButton.onclick = () => {
+        sandbox.setText('// You clicked the button!')
+      }
+    },
+
+    // This is called occasionally as text changes in monaco,
+    // it does not directly map 1 keyup to once run of the function
+    // because it is intentionally called at most once every 0.3 seconds
+    // and then will always run at the end.
+    modelChangedDebounce: async (_sandbox, _model) => {
+      // Do some work with the new text
+    },
+
+    // Gives you a chance to remove anything set up,
+    // the container itself if wiped of children after this.
+    didUnmount: () => {
+      console.log('Removing plugin')
+    },
+  }
+
+  return customPlugin
 }
 
-export default customPlugin
+export default makePlugin

packages/playground/src/createConfigDropdown.ts

@@ -1,6 +1,4 @@
-import { Playground } from '.'
-
-type Sandbox = ReturnType<typeof import('typescript-sandbox').createTypeScriptSandbox>
+type Sandbox = import('typescript-sandbox').Sandbox
 type Monaco = typeof import('monaco-editor')
 
 type OptionsSummary = {

packages/playground/src/createElements.ts

@@ -1,6 +1,6 @@
 import { PlaygroundPlugin } from '.'
 
-type Sandbox = ReturnType<typeof import('typescript-sandbox').createTypeScriptSandbox>
+type Sandbox = import('typescript-sandbox').Sandbox
 
 export const createDragBar = () => {
   const sidebar = document.createElement('div')

packages/playground/src/exporter.ts

@@ -1,6 +1,6 @@
 import { UI } from './createUI'
 
-type Sandbox = ReturnType<typeof import('typescript-sandbox').createTypeScriptSandbox>
+type Sandbox = import('typescript-sandbox').Sandbox
 type CompilerOptions = import('monaco-editor').languages.typescript.CompilerOptions
 
 export const createExporter = (sandbox: Sandbox, monaco: typeof import('monaco-editor'), ui: UI) => {

packages/playground/src/index.ts

@@ -1,4 +1,4 @@
-type Sandbox = ReturnType<typeof import('typescript-sandbox').createTypeScriptSandbox>
+type Sandbox = import('typescript-sandbox').Sandbox
 type Monaco = typeof import('monaco-editor')
 
 declare const window: any
@@ -22,6 +22,8 @@ import { ExampleHighlighter } from './monaco/ExampleHighlight'
 import { createConfigDropdown, updateConfigDropdownForCompilerOptions } from './createConfigDropdown'
 import { showErrors } from './sidebar/showErrors'
 import { optionsPlugin, allowConnectingToLocalhost, activePlugins } from './sidebar/options'
+import { createUtils, PluginUtils } from './pluginUtils'
+export { PluginUtils } from './pluginUtils'
 
 export type PluginFactory = {
   (i: (key: string, components?: any) => string): PlaygroundPlugin
@@ -345,6 +347,35 @@ export const setupPlayground = (
   console.log('\twindow.sandbox', window.sandbox)
   console.log('\twindow.playground', window.playground)
 
+  /** A plugin */
+  const activateExternalPlugin = (
+    plugin: PlaygroundPlugin | ((utils: PluginUtils) => PlaygroundPlugin),
+    autoActivate: boolean
+  ) => {
+    let readyPlugin: PlaygroundPlugin
+    // Can either be a factory, or object
+    if (typeof plugin === 'function') {
+      const utils = createUtils(sandbox)
+      readyPlugin = plugin(utils)
+    } else {
+      readyPlugin = plugin
+    }
+
+    if (autoActivate) {
+      console.log(readyPlugin)
+    }
+
+    playground.registerPlugin(readyPlugin)
+
+    // Auto-select the dev plugin
+    const pluginWantsFront = readyPlugin.shouldBeSelected && readyPlugin.shouldBeSelected()
+
+    if (pluginWantsFront || autoActivate) {
+      // Auto-select the dev plugin
+      activatePlugin(readyPlugin, currentPlugin(), sandbox, tabBar, container)
+    }
+  }
+
   // Dev mode plugin
   if (allowConnectingToLocalhost()) {
     window.exports = {}
@@ -354,11 +385,14 @@ export const setupPlayground = (
       const re = window.require
       re(['local/index'], (devPlugin: any) => {
         console.log('Set up dev plugin from localhost:5000')
-        console.log(devPlugin)
-        playground.registerPlugin(devPlugin)
-
-        // Auto-select the dev plugin
-        activatePlugin(devPlugin, currentPlugin(), sandbox, tabBar, container)
+        try {
+          activateExternalPlugin(devPlugin, true)
+        } catch (error) {
+          console.error(error)
+          setTimeout(() => {
+            ui.flashInfo('Error: Could not load dev plugin from localhost:5000')
+          }, 700)
+        }
       })
     } catch (error) {
       console.error('Problem loading up the dev plugin')
@@ -371,12 +405,7 @@ export const setupPlayground = (
       // @ts-ignore
       const re = window.require
       re([`unpkg/${plugin.module}@latest/dist/index`], (devPlugin: PlaygroundPlugin) => {
-        playground.registerPlugin(devPlugin)
-
-        // Auto-select the dev plugin
-        if (devPlugin.shouldBeSelected && devPlugin.shouldBeSelected()) {
-          activatePlugin(devPlugin, currentPlugin(), sandbox, tabBar, container)
-        }
+        activateExternalPlugin(devPlugin, true)
       })
     } catch (error) {
       console.error('Problem loading up the plugin:', plugin)

packages/playground/src/pluginUtils.ts

@@ -0,0 +1,102 @@
+import type { Sandbox } from 'typescript-sandbox'
+import type { Node } from "typescript"
+
+/** Creates a set of util functions which is exposed to Plugins to make it easier to build consistent UIs */
+export const createUtils = (sb: any) => {
+  const sandbox: Sandbox = sb 
+  const ts = sandbox.ts
+
+  const requireURL = (path: string) => {
+    // https://unpkg.com/browse/typescript-playground-presentation-mode@0.0.1/dist/x.js => unpkg/browse/typescript-playground-presentation-mode@0.0.1/dist/x
+    const isDev = document.location.host.includes('localhost')
+    const prefix = isDev ? 'local/' : 'unpkg/typescript-playground-presentation-mode/dist/'
+    return prefix + path
+  }
+
+  const el = (str: string, el: string, container: Element) => {
+    const para = document.createElement(el)
+    para.innerHTML = str
+    container.appendChild(para)
+  }
+
+  const createASTTree = (node: Node) => {
+    const div = document.createElement('div')
+    div.className = "ast"
+
+    const infoForNode = (node: Node) => {
+      const name = ts.SyntaxKind[node.kind]
+      return {
+        name,
+      }
+    }
+
+    const renderLiteralField = (key: string, value: string) => {
+      const li = document.createElement('li')
+      li.innerHTML = `${key}: ${value}`
+      return li
+    }
+
+    const renderSingleChild = (key: string, value: Node) => {
+      const li = document.createElement('li')
+      li.innerHTML = `${key}: <strong>${ts.SyntaxKind[value.kind]}</strong>`
+      return li
+    }
+
+    const renderManyChildren = (key: string, value: Node[]) => {
+      const li = document.createElement('li')
+      const nodes = value.map(n => "<strong>&nbsp;&nbsp;" + ts.SyntaxKind[n.kind] + "<strong>").join("<br/>") 
+      li.innerHTML = `${key}: [<br/>${nodes}</br>]`
+      return li
+    }
+  
+    const renderItem = (parentElement: Element, node: Node) => {
+      const ul = document.createElement('ul')
+      parentElement.appendChild(ul)
+      ul.className = 'ast-tree'
+
+      const info = infoForNode(node)
+  
+      const li = document.createElement('li')
+      ul.appendChild(li)
+  
+      const a = document.createElement('a')
+      a.textContent = info.name 
+      li.appendChild(a)
+  
+      const properties = document.createElement('ul')
+      properties.className = 'ast-tree'
+      li.appendChild(properties)
+
+      Object.keys(node).forEach(field => {
+        if (typeof field === "function") return
+        if (field === "parent" || field === "flowNode") return
+
+        const value = (node as any)[field] 
+        if (typeof value === "object" && Array.isArray(value) && "pos" in value[0] && "end" in value[0]) {
+          //  Is an array of Nodes
+          properties.appendChild(renderManyChildren(field, value))
+        } else if (typeof value === "object" && "pos" in value && "end" in value) {
+          // Is a single child property
+          properties.appendChild(renderSingleChild(field, value))
+        } else {
+          properties.appendChild(renderLiteralField(field, value))
+        }
+      })  
+    }
+  
+    renderItem(div, node)
+    return div
+  }
+
+
+  return {
+    /** Use this to make a few dumb element generation funcs */    
+    el,
+    /** Get a relative URL for something in your dist folder depending on if you're in dev mode or not */
+    requireURL,
+    /** Returns a div which has an interactive AST a TypeScript AST by passing in the root node */
+    createASTTree
+  }
+}
+
+export type PluginUtils = ReturnType<typeof createUtils>