fix(bindgen): run functionName preRun on init

The constructor or the event could come first.
InsightSoftwareConsortium · Sep 27, 2023 · 7386b74 · 7386b74
1 parent 7b05e3c
commit 7386b74
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 42 deletions.
diff --git a/packages/compare-images/typescript/test/browser/demo-app/compare-double-images-controller.ts b/packages/compare-images/typescript/test/browser/demo-app/compare-double-images-controller.ts
@@ -147,19 +147,21 @@ class CompareDoubleImagesController  {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: 'compareDoubleImages' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === 'compareDoubleImages') {
+        tabGroup.show('compareDoubleImages-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#compareDoubleImagesInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/packages/compare-images/typescript/test/browser/demo-app/vector-magnitude-controller.ts b/packages/compare-images/typescript/test/browser/demo-app/vector-magnitude-controller.ts
@@ -88,19 +88,21 @@ class VectorMagnitudeController  {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: 'vectorMagnitude' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === 'vectorMagnitude') {
+        tabGroup.show('vectorMagnitude-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#vectorMagnitudeInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/...ages/compress-stringify/typescript/test/browser/demo-app/compress-stringify-controller.ts b/...ages/compress-stringify/typescript/test/browser/demo-app/compress-stringify-controller.ts
@@ -94,19 +94,21 @@ class CompressStringifyController  {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: 'compressStringify' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === 'compressStringify') {
+        tabGroup.show('compressStringify-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#compressStringifyInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/packages/compress-stringify/typescript/test/browser/demo-app/index.ts b/packages/compress-stringify/typescript/test/browser/demo-app/index.ts
@@ -8,8 +8,6 @@ compressStringify.setPipelinesBaseUrl(pipelinesBaseUrl)
 const pipelineWorkerUrl: string | URL | null = new URL('/web-workers/pipeline.worker.js', document.location.origin).href
 compressStringify.setPipelineWorkerUrl(pipelineWorkerUrl)
 
-import './compress-stringify-controller.js'
-import './parse-string-decompress-controller.js'
 
 const params = new URLSearchParams(window.location.search)
 if (!params.has('functionName')) {
@@ -18,3 +16,5 @@ if (!params.has('functionName')) {
   url.search = params
   window.history.replaceState({ functionName: 'compressStringify' }, '', url)
 }
+import './compress-stringify-controller.js'
+import './parse-string-decompress-controller.js'
diff --git a/...compress-stringify/typescript/test/browser/demo-app/parse-string-decompress-controller.ts b/...compress-stringify/typescript/test/browser/demo-app/parse-string-decompress-controller.ts
@@ -84,19 +84,21 @@ class ParseStringDecompressController  {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: 'parseStringDecompress' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === 'parseStringDecompress') {
+        tabGroup.show('parseStringDecompress-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#parseStringDecompressInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/...es/dicom/typescript/test/browser/demo-app/apply-presentation-state-to-image-controller.ts b/...es/dicom/typescript/test/browser/demo-app/apply-presentation-state-to-image-controller.ts
@@ -133,19 +133,21 @@ class ApplyPresentationStateToImageController  {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: 'applyPresentationStateToImage' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === 'applyPresentationStateToImage') {
+        tabGroup.show('applyPresentationStateToImage-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#applyPresentationStateToImageInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/packages/dicom/typescript/test/browser/demo-app/index.ts b/packages/dicom/typescript/test/browser/demo-app/index.ts
@@ -8,12 +8,6 @@ dicom.setPipelinesBaseUrl(pipelinesBaseUrl)
 const pipelineWorkerUrl: string | URL | null = new URL('/web-workers/pipeline.worker.js', document.location.origin).href
 dicom.setPipelineWorkerUrl(pipelineWorkerUrl)
 
-import './apply-presentation-state-to-image-controller.js'
-import './read-dicom-encapsulated-pdf-controller.js'
-import './structured-report-to-html-controller.js'
-import './structured-report-to-text-controller.js'
-import './read-dicom-tags-controller.js'
-import './read-image-dicom-file-series-controller.js'
 
 const params = new URLSearchParams(window.location.search)
 if (!params.has('functionName')) {
@@ -22,3 +16,9 @@ if (!params.has('functionName')) {
   url.search = params
   window.history.replaceState({ functionName: 'applyPresentationStateToImage' }, '', url)
 }
+import './apply-presentation-state-to-image-controller.js'
+import './read-dicom-encapsulated-pdf-controller.js'
+import './structured-report-to-html-controller.js'
+import './structured-report-to-text-controller.js'
+import './read-dicom-tags-controller.js'
+import './read-image-dicom-file-series-controller.js'
diff --git a/packages/dicom/typescript/test/browser/demo-app/read-dicom-tags-controller.ts b/packages/dicom/typescript/test/browser/demo-app/read-dicom-tags-controller.ts
@@ -92,19 +92,21 @@ class ReadDicomTagsController  {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: 'readDicomTags' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === 'readDicomTags') {
+        tabGroup.show('readDicomTags-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#readDicomTagsInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/packages/dicom/typescript/test/browser/demo-app/structured-report-to-text-controller.ts b/packages/dicom/typescript/test/browser/demo-app/structured-report-to-text-controller.ts
@@ -164,19 +164,21 @@ class StructuredReportToTextController  {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: 'structuredReportToText' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === 'structuredReportToText') {
+        tabGroup.show('structuredReportToText-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#structuredReportToTextInputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/src/bindgen/typescript/demo/interface-functions-demo-typescript.js b/src/bindgen/typescript/demo/interface-functions-demo-typescript.js
@@ -154,19 +154,21 @@ class ${functionNamePascalCase}Model {
           const url = new URL(document.location)
           url.search = params
           window.history.replaceState({ functionName: '${functionName}' }, '', url)
+          await preRun()
         }
-        await preRun()
       }
     }
 
     const tabGroup = document.querySelector('sl-tab-group')
     tabGroup.addEventListener('sl-tab-show', onSelectTab)
-    document.addEventListener('DOMContentLoaded', () => {
+    function onInit() {
       const params = new URLSearchParams(window.location.search)
       if (params.has('functionName') && params.get('functionName') === '${functionName}') {
+        tabGroup.show('${functionName}-panel')
         preRun()
       }
-    })
+    }
+    onInit()
 
     const runButton = document.querySelector('#${functionName}Inputs sl-button[name="run"]')
     runButton.addEventListener('click', async (event) => {

diff --git a/src/bindgen/typescript/typescript-bindings.js b/src/bindgen/typescript/typescript-bindings.js
@@ -39,6 +39,7 @@ function typescriptBindings (outputDir, buildDir, wasmBinaries, options, forNode
   let demoFunctionsHtml = ''
   let pipelinesFunctionsTabs = ''
   let demoFunctionsTypeScript = ''
+
   const allUsedInterfaceTypes = new Set()
 
   const packageName = options.packageName
@@ -102,7 +103,17 @@ function typescriptBindings (outputDir, buildDir, wasmBinaries, options, forNode
     const moduleCamelCase = camelCase(parsedPath.name)
     const modulePascalCase = `${moduleCamelCase[0].toUpperCase()}${moduleCamelCase.substring(1)}`
     const functionName = camelCase(interfaceJson.name)
-    firstFunctionName = firstFunctionName || functionName
+    if (!firstFunctionName) {
+      firstFunctionName = functionName
+      demoFunctionsTypeScript += `\nconst params = new URLSearchParams(window.location.search)
+if (!params.has('functionName')) {
+  params.set('functionName', '${firstFunctionName}')
+  const url = new URL(document.location)
+  url.search = params
+  window.history.replaceState({ functionName: '${firstFunctionName}' }, '', url)
+}
+`
+    }
 
     const useCamelCase = true
     const functionDemoHtml = interfaceFunctionsDemoHtml(interfaceJson, functionName, useCamelCase)
@@ -144,15 +155,6 @@ function typescriptBindings (outputDir, buildDir, wasmBinaries, options, forNode
     readmePipelines += readmeResult
   })
 
-  demoFunctionsTypeScript += `\nconst params = new URLSearchParams(window.location.search)
-if (!params.has('functionName')) {
-  params.set('functionName', '${firstFunctionName}')
-  const url = new URL(document.location)
-  url.search = params
-  window.history.replaceState({ functionName: '${firstFunctionName}' }, '', url)
-}
-`
-
   if (allUsedInterfaceTypes.size > 0) {
     indexContent += '\n'
     allUsedInterfaceTypes.forEach(iType => indexContent += `export type { ${iType} } from 'itk-wasm'\n`)