From f7a42020b36e754d3544c8c29a2d4907851be048 Mon Sep 17 00:00:00 2001 From: Marius Andra Date: Tue, 1 Jun 2021 13:19:38 +0200 Subject: [PATCH] Plugin editor types (#4468) * add @posthog/plugin-scaffold type to plugin editor, simplify plugin * make functions async * have same config type as config json * ignore raw-loader ts errors * remove monaco webpack plugin * Add example `console.log` to `onEvent` * Escape backticks inside backticks Co-authored-by: Michael Matloka --- .../src/scenes/plugins/edit/PluginSource.tsx | 60 ++++++++++------ package.json | 6 +- webpack.config.js | 4 -- yarn.lock | 68 +++++++++---------- 4 files changed, 77 insertions(+), 61 deletions(-) diff --git a/frontend/src/scenes/plugins/edit/PluginSource.tsx b/frontend/src/scenes/plugins/edit/PluginSource.tsx index dab4f5b0b4b..28689d872e9 100644 --- a/frontend/src/scenes/plugins/edit/PluginSource.tsx +++ b/frontend/src/scenes/plugins/edit/PluginSource.tsx @@ -2,30 +2,36 @@ import React, { useEffect } from 'react' import { useActions, useValues } from 'kea' import { pluginsLogic } from 'scenes/plugins/pluginsLogic' import { Button, Form, Input } from 'antd' -import MonacoEditor from 'react-monaco-editor' +import MonacoEditor from '@monaco-editor/react' import { Drawer } from 'lib/components/Drawer' -const defaultSource = `// /* Runs on every event */ -function processEvent(event, { config }) { - // Some events (like $identify) don't have properties - if (event.properties) { - event.properties['hello'] = \`Hello \${config.name || 'world'}\` - } +// @ts-ignore +import SCAFFOLD_index from '!raw-loader!@posthog/plugin-scaffold/dist/index.d.ts' +// @ts-ignore +import SCAFFOLD_errors from '!raw-loader!@posthog/plugin-scaffold/dist/errors.d.ts' +// @ts-ignore +import SCAFFOLD_types from '!raw-loader!@posthog/plugin-scaffold/dist/types.d.ts' + +const defaultSource = `// Learn more about plugins at: https://posthog.com/docs/plugins/overview +import { Plugin } from '@posthog/plugin-scaffold' + +type MyPluginType = Plugin<{ + config: { + username: string + }, + global: {}, +}> + +const MyPlugin: MyPluginType = { + setupPlugin: async (meta) => { - // Return the event to ingest, return nothing to discard - return event + }, + onEvent: async (event, meta) => { + console.log(\`Event \${event.event} has been processed!\`) + }, } -// /* Ran whenever the plugin VM initialises */ -// function setupPlugin (meta) { -// -// } - -// /* Runs once every full hour */ -// function runEveryHour(meta) { -// const weather = await (await fetch('https://weather.example.api/?city=New+York')).json() -// posthog.capture('weather', { degrees: weather.deg, fahrenheit: weather.us }) -// } +export default MyPlugin ` const defaultConfig = [ @@ -104,12 +110,26 @@ export function PluginSource(): JSX.Element { { + monaco.languages.typescript.typescriptDefaults.addExtraLib( + `declare module '@posthog/plugin-scaffold' { ${SCAFFOLD_index} }`, + 'file:///node_modules/@types/@posthog/plugin-scaffold/index.d.ts' + ) + monaco.languages.typescript.typescriptDefaults.addExtraLib( + `declare module '@posthog/plugin-scaffold' { ${SCAFFOLD_types} }`, + 'file:///node_modules/@types/@posthog/plugin-scaffold/types.d.ts' + ) + monaco.languages.typescript.typescriptDefaults.addExtraLib( + `declare module '@posthog/plugin-scaffold' { ${SCAFFOLD_errors} }`, + 'file:///node_modules/@types/@posthog/plugin-scaffold/errors.d.ts' + ) + }} />