fixed script module for multiple frames

Author: abusedmedia

src/core/MountScene.js

@@ -9,6 +9,9 @@ const MountScene = (scene) => {
   const child = sceneConfig._el
   const projectConfig = sceneConfig._projectConfig
 
+  let modInstances = []
+  const modPromises = []
+
   const initModules = (runBefore) => {
     if (sceneConfig.modules) {
       for (const k in sceneConfig.modules) {
@@ -19,7 +22,7 @@ const MountScene = (scene) => {
           if (modConfig) {
             if (!Mod.runBefore && !runBefore) {
               // eslint-disable-next-line
-              new Mod(child, modConfig, sceneConfig)
+              modPromises.push(new Mod(child, modConfig, sceneConfig))
             }
           }
         }
@@ -39,13 +42,16 @@ const MountScene = (scene) => {
     }, projectConfig._transitionDestroyDelay)
   }
 
+  sceneConfig.blocks.forEach(b => MountBlock(b))
   initModules(false)
 
-  sceneConfig.blocks.forEach(b => MountBlock(b))
+  Promise.all(modPromises).then(data => {
+    modInstances = data
 
-  startTransition()
+    startTransition()
 
-  child.classList.add('presentaSceneMounted')
+    child.classList.add('presentaSceneMounted')
+  })
 }
 
 export { MountScene }

src/core/Scene.js

@@ -9,7 +9,7 @@ const Scene = function (cont, sceneConfig, projectConfig, rootElement) {
   return new Promise(function (resolve, reject) {
     let blockInstances = []
 
-    const modInstances = []
+    let modInstances = []
     const blockPromises = []
     const preModPromises = []
 
@@ -163,6 +163,7 @@ const Scene = function (cont, sceneConfig, projectConfig, rootElement) {
     initModules(true)
 
     Promise.all(preModPromises).then(data => {
+      modInstances = data
       initBlocks()
 
       Promise.all(blockPromises).then(data => {

src/modules/script/index.js

@@ -1,6 +1,7 @@
-const appendScriptTag = (url, code) => {
+
+const appendScriptTag = (url, code, id) => {
   const ns = document.createElement('script')
-  ns.setAttribute('class', 'sdpmodulescriptcontainer')
+  ns.setAttribute('class', 'sdpmodulescriptcontainer' + id)
   ns.setAttribute('type', 'module')
   ns.setAttribute('async', '')
   ns.innerHTML = code
@@ -9,41 +10,47 @@ const appendScriptTag = (url, code) => {
 }
 
 const script = function (element, mod, config) {
-  if (config._mode === 'preview') return
+  if (!mod.forceRun && config._mode === 'preview') return
   if (config.contextType !== 'scene') return
 
+  const id = '_JSMOD_' + parseInt(Math.random() * 10000)
+  const that = this
+
+  this.destroy = () => {
+    const prev = [...document.querySelectorAll('.sdpmodulescriptcontainer' + id)]
+    prev.forEach(d => document.body.removeChild(d))
+  }
+
   return new Promise((resolve, reject) => {
     const blink = {}
     config.blocks.forEach(b => {
       blink[b.ukey] = b
     })
     blink._otherParams = config.otherParams
-    window._sdpconfigobject = blink
+    window['_sdpconfigobject' + id] = blink
 
-    window._sdpscriptexportedresult = {}
+    window['_sdpscriptexportedresult' + id] = {}
 
-    window._sdpcallbackfunc = () => {
-      console.log('_sdpcallbackfunc')
-      window._sdpcallbackfunc = null
-      window._sdpconfigobject = null
+    window['_sdpcallbackfunc' + id] = () => {
+      console.log('_sdpcallbackfunc' + id)
+      window['_sdpcallbackfunc' + id] = null
+      window['_sdpconfigobject' + id] = null
 
-      resolve()
+      resolve(that)
     }
 
-    // remove previous code modules
-    const prev = [...document.querySelectorAll('.sdpmodulescriptcontainer')]
-    prev.forEach(d => document.body.removeChild(d))
-
     let code = `
 const index = ${config.index}
-const exportedResult = window._sdpscriptexportedresult
+const exportedResult = window._sdpscriptexportedresult${id}
 
-const params = window._sdpconfigobject._otherParams
+const params = window._sdpconfigobject${id}._otherParams
     `
     config.blocks.forEach(b => {
-      code += `
-const ${b.ukey} = window._sdpconfigobject.${b.ukey}
+      if (b.ukey) {
+        code += `
+const ${b.ukey} = window._sdpconfigobject${id}.${b.ukey}
 `
+      }
     })
 
     code += `
@@ -55,22 +62,22 @@ try{
 ${mod.code}
 
 }catch(err){
-console.log('error in module', err)
+   console.log('error in module', err)
 }
 export default {}`
 
     // add the code module
     let url = URL.createObjectURL(new Blob([code], { type: 'application/javascript' }))
-    appendScriptTag(url, code)
+    appendScriptTag(url, code, id)
 
     // add the last module for callback
     const lastModule = `
 import _sdpPrivateInput from '${url}'
-window._sdpcallbackfunc()
+window._sdpcallbackfunc${id}()
 `
 
     url = URL.createObjectURL(new Blob([lastModule], { type: 'application/javascript' }))
-    appendScriptTag(url, lastModule)
+    appendScriptTag(url, lastModule, id)
   })
 }