Fix some fields like Hyper and Vizy not showing in preview correctly

src/base/Element.php

@@ -491,9 +491,10 @@ public static function defineEagerLoadingMap(): array
  return [];
  }
 
- public static function generateCompareHtml(?ElementInterface $element, array $diffSummary, string $type): string
+ public static function generateCompareHtml(?ElementInterface $element, array $diffSummary, string $type): array
  {
  $html = '';
+ $js = '';
  $view = Craft::$app->getView();
 
  // Required when testing outside of the CP (using the URLs directly)
@@ -510,7 +511,10 @@ public static function generateCompareHtml(?ElementInterface $element, array $di
  $fieldsService->getFieldForPreview($field, $element, $type);
  }
 
+ // Render the form, despite us not needing the HTML, we need to fetch any JS used to append it
+ Craft::$app->getView()->startJsBuffer();
  $form = $fieldLayout->createForm($element, true);
+ $js = Craft::$app->getView()->clearJsBuffer();
 
  // Get any custom field tabs for the element, and any extra defined class
  $tabHtml = '';
@@ -553,6 +557,19 @@ public static function generateCompareHtml(?ElementInterface $element, array $di
  $url = $view->getAssetManager()->getActualAssetUrl($bundle, $cssFile);
  $html .= '<link href="' . $url . '" rel="stylesheet">';
  }
+
+ foreach ($bundle->js as $jsFile) {
+ $type = 'script';
+
+ if (is_array($jsFile)) {
+ $type = $jsFile['type'] ?? $type;
+
+ $jsFile = $jsFile[array_keys($jsFile)[0]];
+ }
+
+ $url = $view->getAssetManager()->getActualAssetUrl($bundle, $jsFile);
+ $js = '<script type="' . $type . '" src="' . $url . '"></script>' . $js;
+ }
  }
  }
 
@@ -625,7 +642,7 @@ public static function generateCompareHtml(?ElementInterface $element, array $di
  // Fix dropdown fields (selectize) being hidden
  $crawler->filter('.selectize.select select')->removeAttribute('style');
 
- return $crawler->saveHTML();
+ return ['html' => $crawler->saveHTML(), 'js' => $js];
  }
 
 

src/elements/GlobalSet.php

@@ -117,7 +117,7 @@ public static function defineImportFieldTabs(ElementInterface $element, string $
  ];
  }
 
- public static function generateCompareHtml(?ElementInterface $element, array $diffs, string $type): string
+ public static function generateCompareHtml(?ElementInterface $element, array $diffs, string $type): array
  {
  // Special-case to fetch the same field layout which isn't carried over
  if ($type == 'new') {

src/services/Import.php

@@ -258,6 +258,8 @@ public function getImportPreview(string $id, array $data): array
  {
  $oldHtml = '';
  $newHtml = '';
+ $oldJs = '';
+ $newJs = '';
 
  $differ = new ElementDiffer();
 
@@ -349,13 +351,20 @@ public function getImportPreview(string $id, array $data): array
  // Generate the old/new summary of attributes and fields
  $diffSummary = $differ->getSummaryFieldIndicators($diffs);
 
- $oldHtml = $elementType::generateCompareHtml($currentElement, $diffSummary, 'old');
- $newHtml = $elementType::generateCompareHtml($newElement, $diffSummary, 'new');
+ $oldHtmlData = $elementType::generateCompareHtml($currentElement, $diffSummary, 'old');
+ $newHtmlData = $elementType::generateCompareHtml($newElement, $diffSummary, 'new');
+
+ $oldHtml = $oldHtmlData['html'] ?? null;
+ $newHtml = $newHtmlData['html'] ?? null;
+ $oldJs = $oldHtmlData['js'] ?? null;
+ $newJs = $newHtmlData['js'] ?? null;
  }
 
  return [
  'old' => $oldHtml,
  'new' => $newHtml,
+ 'oldJs' => $oldJs,
+ 'newJs' => $newJs,
  ];
  }
 

src/web/assets/app/dist/manifest.json

@@ -3,48 +3,48 @@
  "file": "assets/zen-d2f702f3.css",
  "src": "app/src/js/zen.css"
  },
- "app/src/js/svg/icon-bg.svg?raw": {
- "file": "assets/icon-bg-ea6a9226.js",
- "src": "app/src/js/svg/icon-bg.svg?raw",
+ "app/src/js/svg/error-large.svg?raw": {
+ "file": "assets/error-large-8d98bc34.js",
+ "src": "app/src/js/svg/error-large.svg?raw",
  "isDynamicEntry": true
  },
  "app/src/js/svg/chevron-right.svg?raw": {
  "file": "assets/chevron-right-5695932b.js",
  "src": "app/src/js/svg/chevron-right.svg?raw",
  "isDynamicEntry": true
  },
- "app/src/js/svg/koi.svg?raw": {
- "file": "assets/koi-a426d3b2.js",
- "src": "app/src/js/svg/koi.svg?raw",
- "isDynamicEntry": true
- },
- "app/src/js/svg/error-large.svg?raw": {
- "file": "assets/error-large-8d98bc34.js",
- "src": "app/src/js/svg/error-large.svg?raw",
+ "app/src/js/svg/icon-bg.svg?raw": {
+ "file": "assets/icon-bg-ea6a9226.js",
+ "src": "app/src/js/svg/icon-bg.svg?raw",
  "isDynamicEntry": true
  },
  "app/src/js/svg/arrow-circle.svg?raw": {
  "file": "assets/arrow-circle-afeab343.js",
  "src": "app/src/js/svg/arrow-circle.svg?raw",
  "isDynamicEntry": true
  },
- "app/src/js/svg/export.svg?raw": {
- "file": "assets/export-bcd80af8.js",
- "src": "app/src/js/svg/export.svg?raw",
- "isDynamicEntry": true
- },
  "app/src/js/svg/success-large.svg?raw": {
  "file": "assets/success-large-9c1960a9.js",
  "src": "app/src/js/svg/success-large.svg?raw",
  "isDynamicEntry": true
  },
+ "app/src/js/svg/koi.svg?raw": {
+ "file": "assets/koi-a426d3b2.js",
+ "src": "app/src/js/svg/koi.svg?raw",
+ "isDynamicEntry": true
+ },
+ "app/src/js/svg/export.svg?raw": {
+ "file": "assets/export-bcd80af8.js",
+ "src": "app/src/js/svg/export.svg?raw",
+ "isDynamicEntry": true
+ },
  "app/src/js/svg/import.svg?raw": {
  "file": "assets/import-c23d45c4.js",
  "src": "app/src/js/svg/import.svg?raw",
  "isDynamicEntry": true
  },
  "app/src/js/zen.js": {
- "file": "assets/zen-ff4e00cd.js",
+ "file": "assets/zen-8e98a6c7.js",
  "src": "app/src/js/zen.js",
  "isEntry": true,
  "dynamicImports": [

src/web/assets/app/src/js/components/import/ConfigurePreview.vue

@@ -108,6 +108,15 @@ export default {
  setTimeout(() => {
  Craft.initUiElements(this.$el);
 
+ // In case we have any JS to initialize for some fields.
+ if (this.data.newJs) {
+ Craft.appendBodyHtml(this.data.newJs);
+ }
+
+ if (this.data.oldJs) {
+ Craft.appendBodyHtml(this.data.oldJs);
+ }
+
  // Fix element select images not working without jQuery
  this.$el.querySelectorAll('.elementselect .elements').forEach((elements) => {
  new Craft.ElementThumbLoader().load($(elements));