diff --git a/src/public/plugins/index.js b/src/public/plugins/index.js index 24ce10a9..0a0cb872 100644 --- a/src/public/plugins/index.js +++ b/src/public/plugins/index.js @@ -365,11 +365,8 @@ export var Plugins = function (app) { const body = func.toString().slice(entire.indexOf("{") + 1, entire.lastIndexOf("}")); return body; } - const getVolatileResources = () => { ///todo - - } - const getPreviewHtml = (data, otherFiles, yarnData = {}) => { + const getPreviewHtmlRender = (data, otherFiles, yarnData = {}, volatileResources) => { // todo get volatile resources // includes: ['some-other-file.js'] - with moduleName (can be used to create an instance) or no moduleName (just dump script body) @@ -406,8 +403,16 @@ export var Plugins = function (app) { ${data.html || data.body || ''} ${getStoryParserModuleCode(data.parser)} @@ -508,6 +513,36 @@ export var Plugins = function (app) { `} + const getVolatileResources = async () => { + return new Promise((resolve,reject)=> { + getVolatileResourcesList().then(resourcesList => { + const result = {} + try{ + const resourcesListArray = Array.from(resourcesList) + resourcesListArray.forEach((resourceName, index) => { + getVloatileResource(resourceName).then(data=> { + result[resourceName.split('.')[0]] = JSON.parse(data.content); + if(index === resourcesListArray.length - 1) resolve(result); + }) + }) + } catch(e) { + console.error(e); + reject(e); + } + }) + }) + } + + const getPreviewHtml = async (data, otherFiles, yarnData = {}) => { + return getVolatileResources().then(volatileResources => { + console.log("GOT resources --- ", {volatileResources}) + return getPreviewHtmlRender(data, otherFiles, yarnData = {}, volatileResources); + }).catch(()=> { + return getPreviewHtmlRender(data, otherFiles, yarnData = {}, {}); + }) + + } + const pluginApiMethods = { app, createButton, diff --git a/src/public/plugins/plugin-editor.js b/src/public/plugins/plugin-editor.js index f9e1ba92..9e459adf 100644 --- a/src/public/plugins/plugin-editor.js +++ b/src/public/plugins/plugin-editor.js @@ -294,7 +294,10 @@ export var PluginEditor = function ({ console.log({ outputData: data }) // just in case to prevent getting stuck with bad code if(!this.hasTestedOnce) return; - document.getElementById('plugin-output-previewer').srcdoc = getPreviewHtml(data, this.volatilePlugins, this.yarnData); + getPreviewHtml(data, this.volatilePlugins, this.yarnData).then(output => { + document.getElementById('plugin-output-previewer').srcdoc = output; + }) + // document.getElementById('plugin-output-previewer').srcdoc = getPreviewHtml(data, this.volatilePlugins, this.yarnData); document.getElementById('plugin-output-previewer').onload = () => { console.log("LOADED") onLoad(); diff --git a/src/public/plugins/resources-editor.js b/src/public/plugins/resources-editor.js index 3846fed7..63a19ea4 100644 --- a/src/public/plugins/resources-editor.js +++ b/src/public/plugins/resources-editor.js @@ -114,7 +114,7 @@ export var ResourcesEditor = function({ }; this.onCommitResourceFiles = newContent => { - this.isBusy('Uploading changes to gist...'); + this.isBusy(`${this.selectedResourcesJson} Uploading changes to gist...`); document.querySelector('resources-component').setIsLocked(true); app.data.storage.editGistFile(this.selectedResourcesJson, newContent).then(({ok, gistId, file}) => { if(!gistId) { @@ -130,8 +130,10 @@ export var ResourcesEditor = function({ time: 1000, }); this.resourcesFileUrl = file.raw_url; + console.log({file}) document.querySelector('resources-component').setIsNew(false); - document.querySelector('resources-component').setFileContent(file); + document.querySelector('resources-component').setFileContent({...file, content: newContent}); + this.isBusy(''); } else { ToastWc.show({ type: 'error', @@ -309,7 +311,7 @@ export var ResourcesEditor = function({ width: `${window.innerWidth - 20}px`, onBeforeOpen: () => {}, onAfterClose: () => { - // updateUrlParams('selectedResource', '') + updateUrlParams('selectedResource', '') }, onOpen: () => { this.isBusy = (message) => { @@ -349,7 +351,9 @@ export var ResourcesEditor = function({ }) } if(action === 'push'){ - getVloatileResource().then(result=> this.onCommitResourceFiles(result.content)) + getVloatileResource(this.selectedResourcesJson).then(result=> { + this.onCommitResourceFiles(result.content) + }) } }); this.initResourcesComponent = (file) => { diff --git a/src/public/web-components.js b/src/public/web-components.js index 9b1dfa10..9939b6b3 100644 --- a/src/public/web-components.js +++ b/src/public/web-components.js @@ -533,7 +533,6 @@ class ResourcesComponent extends HTMLElement { this.isPointerDown = true; shadowRoot.getElementById('resources-editor-select').focus(); if(evt.target.className !== 'select-option') return; - console.log('is control down --> ',this.isControlDown) if(!this.isControlDown) shadowRoot.getElementById('resources-editor-select').childNodes.forEach(item => item.removeAttribute('data-selected')); // evt.target.setAttribute('data-selected', true) toggleItemSelected(evt.target);