add ability to use resources in yarn playground

blurymind · Sep 13, 2024 · 8161c8a · 8161c8a
1 parent 47ca7b8
commit 8161c8a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 12 deletions.
diff --git 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) {
     </head>
     <body>
       <script id="yarnDataJson">
-        const yarnData = ${yarnData};
-        const y = {yarnData: ${yarnData}};
+        const yarnData = ${JSON.stringify(yarnData)};
+        const y = {
+          yarnData, resources: ${JSON.stringify(volatileResources)},
+          getRes: function(resMapKey, resKey) {
+            if(resMapKey in this.resources && resKey in this.resources[resMapKey] && 'src' in this.resources[resMapKey][resKey]) {
+              return this.resources[resMapKey][resKey].src;
+            }
+            return ''
+          },
+        };
       </script>
       ${data.html || data.body || ''}
       ${getStoryParserModuleCode(data.parser)}
@@ -508,6 +513,36 @@ export var Plugins = function (app) {
     </body>
   `}
 
+  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
@@ -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
@@ -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
@@ -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);