@sdeverywhere/plugin-check 0.1.5 → 0.2.1

package/template-report/src/index.ts

@@ -14,17 +14,73 @@ import { createBundle as createBaselineBundle } from '@_baseline_bundle_'
 import { createBundle as createCurrentBundle } from '@_current_bundle_'
 import { getConfigOptions } from '@_test_config_'
 
-// For "production" builds, load the summary from a JSON file that
-// was generated as part of the build process.  This makes the
-// report load almost immediately instead of running all the checks
-// in the user's browser.
-const suiteSummaryJson = __SUITE_SUMMARY_JSON__
-let suiteSummary: SuiteSummary
-if (suiteSummaryJson) {
-  suiteSummary = JSON.parse(suiteSummaryJson) as SuiteSummary
+function loadBundleName(key: string): string | undefined {
+  if (import.meta.hot) {
+    return localStorage.getItem(`sde-check-selected-bundle-${key}`)
+  } else {
+    return undefined
+  }
+}
+
+function saveBundleName(key: string, value: string): void {
+  if (import.meta.hot) {
+    localStorage.setItem(`sde-check-selected-bundle-${key}`, value)
+  }
+}
+
+// For local development mode, load the list of available baseline bundles
+type BundleModule = {
+  createBundle(): Bundle
 }
+type LoadBundle = () => Promise<Bundle>
+const availableBundles: { [key: string]: LoadBundle } = {}
+let bundleNames: string[]
+let selectedBaselineBundleName: string
+let selectedCurrentBundleName: string
+const baselinesPath = __BASELINE_BUNDLES_PATH__
+if (import.meta.hot && baselinesPath) {
+  // Restore the previously selected bundles (from before the page was reloaded)
+  selectedBaselineBundleName = loadBundleName('baseline')
+  selectedCurrentBundleName = loadBundleName('current')
+
+  // Get the available baseline bundles
+  const bundlesGlob = import.meta.glob(__BASELINE_BUNDLES_PATH__, {
+    eager: false
+  })
+  const baselineBundleNames: string[] = []
+  for (const bundleKey of Object.keys(bundlesGlob)) {
+    const loadBundle = bundlesGlob[bundleKey]
+    const bundlePathParts = bundleKey.split('/')
+    const bundleFileName = bundlePathParts[bundlePathParts.length - 1]
+    const bundleName = bundleFileName.replace('.js', '')
+    baselineBundleNames.push(bundleName)
+    availableBundles[bundleName] = async () => {
+      const module = (await loadBundle()) as BundleModule
+      return module.createBundle() as Bundle
+    }
+  }
+
+  // Alphabetize (reversed, so that newer dates are at the top of the list)
+  baselineBundleNames.sort((a, b) => {
+    return b.toLowerCase().localeCompare(a.toLowerCase())
+  })
+
+  // Always include the "current" bundle as the first option, followed by
+  // the alphabetized bundle names
+  bundleNames = ['current', ...baselineBundleNames]
+}
+
+async function initForProduction(): Promise<void> {
+  // For "production" builds, load the summary from a JSON file that
+  // was generated as part of the build process.  This makes the
+  // report load almost immediately instead of running all the checks
+  // in the user's browser.
+  const suiteSummaryJson = __SUITE_SUMMARY_JSON__
+  let suiteSummary: SuiteSummary
+  if (suiteSummaryJson) {
+    suiteSummary = JSON.parse(suiteSummaryJson) as SuiteSummary
+  }
 
-async function init() {
   // Load the bundles used by the model check/compare configuration.  We
   // always initialize the "current" bundle.
   const bundleR: Bundle = createCurrentBundle()
@@ -47,10 +103,85 @@ async function init() {
   })
 
   // Initialize the root Svelte component
-  initAppShell(checkOptions, suiteSummary)
+  initAppShell(checkOptions, {
+    suiteSummary
+  })
+}
 
-  // Initialize the overlay element used to show builder messages/errors
-  initOverlay()
+async function initForLocal(): Promise<void> {
+  async function createBundle(requestedName: string | undefined): Promise<[Bundle, string]> {
+    if (requestedName === undefined) {
+      requestedName = 'current'
+    }
+
+    // See if there is a bundle available for the requested name
+    let bundle: Bundle
+    let bundleName: string
+    if (requestedName in availableBundles) {
+      // Load the bundle for the requested name
+      const loadBundle = availableBundles[requestedName]
+      bundle = await loadBundle()
+      bundleName = requestedName
+    } else {
+      // Load the "current" bundle
+      bundle = createCurrentBundle()
+      bundleName = 'current'
+    }
+    return [bundle, bundleName]
+  }
+
+  const [bundleL, nameL] = await createBundle(selectedBaselineBundleName)
+  const [bundleR, nameR] = await createBundle(selectedCurrentBundleName)
+
+  // Prepare the model check/compare configuration
+  const checkOptions = await getConfigOptions(bundleL, bundleR, {
+    nameL,
+    nameR
+  })
+
+  // Initialize the root Svelte component
+  initAppShell(checkOptions, {
+    bundleNames
+  })
+}
+
+async function initBundlesAndUI() {
+  // Prepare options differently if in local development mode
+  if (import.meta.hot) {
+    await initForLocal()
+  } else {
+    await initForProduction()
+  }
 }
 
-init()
+// Initialize the overlay element used to show builder messages/errors
+initOverlay()
+
+// Initialize the bundles and user interface
+initBundlesAndUI()
+
+if (import.meta.hot) {
+  // Reload everything when the user chooses a new baseline or current bundle
+  document.addEventListener('sde-check-bundle', e => {
+    // Change the selected bundle
+    const info = (e as CustomEvent).detail
+    if (info.kind === 'left') {
+      saveBundleName('baseline', info.name)
+      selectedBaselineBundleName = info.name
+    } else {
+      saveBundleName('current', info.name)
+      selectedCurrentBundleName = info.name
+    }
+
+    // Before switching bundles, clear out the app-shell-container element
+    const container = document.getElementById('app-shell-container')
+    while (container.firstChild) {
+      container.removeChild(container.firstChild)
+    }
+
+    // TODO: Release resources associated with active bundles
+
+    // Reinitialize using the chosen bundles
+    initBundlesAndUI()
+  })
+}

package/template-report/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    // Use "esnext" for import.meta
+    "target": "esnext",
     // Use "es2020" for dynamic import
     "module": "es2020",
     // Emit additional JS to ease support for importing CommonJS modules
@@ -14,7 +15,6 @@
     "noImplicitAny": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    // "types": ["vite/client", "vite-plugin-glob/client"],
     "types": ["vite/client"],
     "skipLibCheck": true,
     // Use placeholders for path aliases that are configured in the Vite

package/template-tests/src/index.ts

@@ -4,11 +4,8 @@ import type { Bundle, CompareOptions, ConfigOptions, DatasetKey } from '@sdevery
 
 import { DatasetManager, ScenarioManager } from '@sdeverywhere/check-core'
 
-// Load the yaml test files.  Note that we use `vite-plugin-glob` here
-// instead of Vite's built-in `import.meta.globEager` because the plugin
-// does a better job of handling HMR when the yaml files are outside of
-// the `template-report` app root directory.
-const yamlGlob = import.meta.importGlob(__YAML_PATH__, {
+// Load the yaml test files
+const yamlGlob = import.meta.glob(__YAML_PATH__, {
   eager: true,
   as: 'raw'
 })

package/template-tests/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    // Use "esnext" for import.meta
+    "target": "esnext",
     // Use "es2020" for dynamic import
     "module": "es2020",
     // Emit additional JS to ease support for importing CommonJS modules
@@ -14,6 +15,6 @@
     "noImplicitAny": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "types": ["vite-plugin-glob/client"]
+    "types": ["vite/client"]
   }
 }