From dad6a2e3e306f436d5dbf0461c15e3378a143382 Mon Sep 17 00:00:00 2001 From: blurymind Date: Sat, 10 Aug 2024 12:44:34 +0100 Subject: [PATCH] wip output plugins --- src/public/plugins/plugin-editor.js | 96 +++++++++++++++++------------ 1 file changed, 58 insertions(+), 38 deletions(-) diff --git a/src/public/plugins/plugin-editor.js b/src/public/plugins/plugin-editor.js index 8d334e6d..65002038 100644 --- a/src/public/plugins/plugin-editor.js +++ b/src/public/plugins/plugin-editor.js @@ -1,6 +1,24 @@ import AceDiff from './ace-diff/ace-diff.min.js'; import './ace-diff/ace-diff-dark.min.css'; +const ExampleOutputFunction = ` +// To render here, the script needs to be a function that returns modules, body and script +// Example: +() => { + return { + modules: [], + body: "
", + script: () => { + console.log("VOALA") + } + } +} +` +const getPreviewHtml = (modules = [], html = "
...
", script = "") => ` + ${modules.map(item => ``)} + ${html} + +` const editorOptions = { theme: 'ace/theme/monokai', mode: 'ace/mode/javascript', @@ -8,7 +26,7 @@ const editorOptions = { enableBasicAutocompletion: true, enableLiveAutocompletion: true, }; -export var PluginEditor = function({ +export var PluginEditor = function ({ app, createButton, addSettingsItem, @@ -65,7 +83,7 @@ export var PluginEditor = function({ this.onSetEditingFile = () => { const fileName = document.getElementById('edited-plugin-file').value; getVloatilePlugins().then(volatilePlugins => { - console.log({volatilePlugins}) + console.log({ volatilePlugins }) this.volatilePlugins = volatilePlugins; let fileContents = this.volatilePlugins[fileName].content; this.editingFile = fileName; @@ -92,6 +110,29 @@ export var PluginEditor = function({ this.differ.getEditors().right.setReadOnly(this.mode === 'commit'); }); } + if (this.mode === 'test') { + const extension = new Function("parameters", `return ${fileContents}`)(); + console.log({ extensionData: extension(), fileContents }) + if (typeof extension === 'function') { + try { + const data = extension(); + if (!data) { + document.getElementById('plugin-output-previewer').value = `The function needs to return an object.. + ${ExampleOutputFunction} + ` + return; + } + document.getElementById('plugin-output-previewer').value = getPreviewHtml(data.modules || [], data.body, data.script) + } catch (e) { + document.getElementById('plugin-output-previewer').value = `${ExampleOutputFunction} + SEE CONSOLE LOGS + `; + console.error(e) + } + return + } + document.getElementById('plugin-output-previewer').value = ExampleOutputFunction; + } }); }; @@ -101,33 +142,26 @@ export var PluginEditor = function({ title: `
- ${Object.keys(this.volatilePlugins).map( - key => `` - )} + key => `` + )}
- - - + + +
`.replaceAll('\n', ''), html: `
-
function greet(name) { - return "Hello!" + name; - } -
+
@@ -135,9 +169,9 @@ export var PluginEditor = function({
-
+
`, focusConfirm: false, @@ -152,7 +186,7 @@ export var PluginEditor = function({ content: this.editor.getValue(), }); }, 600); - this.editor.getSession().on('change', function() { + this.editor.getSession().on('change', function () { onChangeDebounced(); }); const localVariables = getPluginStore(self.name); @@ -183,7 +217,7 @@ export var PluginEditor = function({ this.differ .getEditors() .left.getSession() - .on('change', function() { + .on('change', function () { onChangeFromDiffDebounced(); }); @@ -214,20 +248,6 @@ export var PluginEditor = function({ }); }; -const example =({resources}) => ({// straight to output - head: [],//goes in head - as src/style = detected by file type - body: `
`,// can have css tags,etc - resources, // passed from editor to output - script: ({resources, onLoad, modules}) => { // then to script - const {kaboom} = modules;// stuff imported from head - const myFunc=()=> { - //err - } - - const myImage = resources["imagekey"] //this returns the base64 - keep flat to save size - onLoad() - } -}) // example output const exampleOutput = `