Load preview only when needed

README.md

@@ -21,7 +21,6 @@ From now on you will be able to see generated blueprints in debug panel for all
 ```neon
 formBlueprints:
 	indentation: '    ' # change indentation to spaces
-	preview: false # don't render preview
 
 	# add custom templates
 	templates:

src/BlueprintsExtension.php

@@ -24,7 +24,6 @@ class BlueprintsExtension extends CompilerExtension
 
 	private $defaults = [
 		'indentation' => "\t",
-		'showPreview' => true,
 		'templates' => [
 			TableTemplate::class,
 			LineBreaksTemplate::class,
@@ -78,7 +77,6 @@ public function beforeCompile()
 		$panelDefinition = $builder->addDefinition($this->prefix('panel'))
 			->setFactory(BlueprintsPanel::class, [
 				$builder->parameters['tempDir'] . '/form-blueprints',
-				$this->config['showPreview'],
 				$this->config['templates']
 			]);
 

src/BlueprintsPanel.panel.phtml

@@ -89,15 +89,14 @@ use Tracy\Helpers;
 					</div>
 				</aside>
 				<main>
-					<?php ?>
 					<div class="tab-row">
 						<div class="tab" data-tab-name="latte" data-target-hide=".detail" data-target-show=".detail-latte">
 							Latte
 						</div>
 						<div class="tab" data-tab-name="css" data-target-hide=".detail" data-target-show=".detail-css">
 							CSS
 						</div>
-						<div class="tab" data-tab-name="preview" data-target-hide=".detail" data-target-show=".detail-preview"<?= !$this->showPreview ? ' hidden' : '' ?>>
+						<div class="tab" data-tab-name="preview" data-target-hide=".detail" data-target-show=".detail-preview">
 							Preview
 						</div>
 					</div>
@@ -112,9 +111,6 @@ use Tracy\Helpers;
 						<pre class="auto-resizable"><code class="language-latte"><?= $latteEscaped ?></code></pre>
 					</div>
 					<div class="detail detail-preview auto-resizable" hidden>
-						<p class="preview-unavailable-text" <?= $this->getCurrentForm()->isAnchored() ? ' hidden' : '' ?>>
-							Preview is not available, form was not attached to a presener.
-						</p>
 						<template><?= $preview ?></template>
 					</div>
 					<div class="detail detail-css" hidden>
@@ -194,11 +190,12 @@ use Tracy\Helpers;
 					}
 				}
 
-				function reloadCurrentForm(root, options = {}) {
+				function reloadCurrentForm(root, templateOptions = {}) {
 					var params = {
 						formId: getSelectedFormId(root),
 						templateName: getSelectedTemplateName(root),
-						options: options,
+						options: templateOptions,
+						renderPreview: root.querySelector('.tab-selected').dataset.tabName === 'preview',
 					};
 
 					var tracyRefreshOld = window.TracyAutoRefresh;
@@ -220,7 +217,6 @@ use Tracy\Helpers;
 							root.querySelector('.detail-latte pre code').innerHTML = data['latte'];
 							root.querySelector('.select-range-list').innerHTML = data['selectRangeListHtml'];
 							root.querySelector('.detail-preview div').shadowRoot.querySelector('body').innerHTML = data['preview'];
-							root.querySelector('.preview-unavailable-text').hidden = data['preview'] !== null;
 							root.querySelector('.detail-css pre code').textContent = data['styles'];
 							addCommonListeners(root);
 							prismHighlight(root);
@@ -276,10 +272,7 @@ use Tracy\Helpers;
 
 				// put contents of <template> elements to shadow element (for isolated styles)
 				var shadow = isolateToShadow(panel.querySelector('template'));
-				var previewTemplate = shadow.querySelector('.detail-preview template');
-				if (previewTemplate) {
-					isolateToShadow(previewTemplate, true);
-				}
+				isolateToShadow(shadow.querySelector('.detail-preview template'), true);
 
 				// form switching
 				shadow.querySelectorAll('.form-link').forEach(function (el) {
@@ -303,6 +296,9 @@ use Tracy\Helpers;
 						shadow.querySelectorAll(el.dataset.targetHide).forEach(el => el.hidden = true);
 						shadow.querySelectorAll(el.dataset.targetShow).forEach(el => el.hidden = false);
 						window.localStorage.setItem('form-blueprints-last-tab-name', el.dataset.tabName);
+						if (el.dataset.tabName === 'preview') {
+							reloadCurrentForm(shadow);
+						}
 						updateAutoResizable(shadow, panel);
 					});
 				});
@@ -311,6 +307,9 @@ use Tracy\Helpers;
 				var lastTabName = window.localStorage.getItem('form-blueprints-last-tab-name') || 'latte';
 				shadow.querySelector('.tab[data-tab-name=' + lastTabName).classList.add('tab-selected');
 				shadow.querySelector('.detail-' + lastTabName).hidden = false;
+				if (lastTabName === 'preview') {
+					reloadCurrentForm(shadow);
+				}
 
 				// auto resize according to panel
 				new ResizeObserver(() => updateAutoResizable(shadow, panel)).observe(panel);

src/BlueprintsPanel.php

@@ -25,8 +25,6 @@ class BlueprintsPanel implements IBarPanel
 
 	private $tempDir;
 
-	private $showPreview;
-
 	/** @var Template[] */
 	private $templates;
 
@@ -46,10 +44,9 @@ class BlueprintsPanel implements IBarPanel
 	/**
 	 * @param Template[] $templates
 	 */
-	public function __construct(string $tempDir, bool $showPreview, array $templates, BlueprintsGenerator $generator, ILatteFactory $latteFactory)
+	public function __construct(string $tempDir, array $templates, BlueprintsGenerator $generator, ILatteFactory $latteFactory)
 	{
 		$this->tempDir = $tempDir;
-		$this->showPreview = $showPreview;
 		$this->templates = $templates;
 		$this->generator = $generator;
 		$this->latteFactory = $latteFactory;
@@ -111,7 +108,7 @@ private function handleAjaxRequest()
 			$this->session['lastTemplateName'] = $params['templateName'];
 			$this->session['lastFormId'] = $params['formId'];
 			$this->session['lastOptions'] = $template->getOptions() + ($this->session['lastOptions'] ?? []);
-			[$blueprintFile, $latte, $preview, $selectRangeListHtml] = $this->prepareBlueprint($form, $template);
+			[$blueprintFile, $latte, $preview, $selectRangeListHtml] = $this->prepareBlueprint($form, $template, $params['renderPreview']);
 			$response = [
 				'templateOptions' => (string) $this->createTemplateOptions($template),
 				'blueprintFileEditorUri' => Helpers::editorUri($blueprintFile),
@@ -130,22 +127,15 @@ private function handleAjaxRequest()
 	}
 
 
-	private function prepareBlueprint(Form $form, Template $template): array
+	private function prepareBlueprint(Form $form, Template $template, bool $renderPreview = false): array
 	{
 		$latte = $this->generator->generate($form, $template);
 		$file = $this->tempDir . '/' . $this->getFormId($form) . '-' . preg_replace('~[^a-z0-9]+~i', '-', $template->getName()) . '.latte';
 		FileSystem::write($file, SelectMarkerHelpers::removeMarkers($latte));
 		$selectRangeListHtml = implode(' | ', Arrays::map(SelectMarkerHelpers::getMarkerNames($latte), fn($name, $i) => (Html::el('a', ['href' => '#', 'data-index' => $i])->setText($name))));
-
 		$latte = htmlspecialchars($latte);
 		$latte = SelectMarkerHelpers::replaceMarkers($latte, '<span class="select-range" data-name="$1">', '</span>');
-
-		if ($this->showPreview) {
-			$preview = $form->isAnchored() ? $template->getStyles() . $template->createPreviewWrap()->setHtml($this->renderLatteFileToString($form, $file)) : null;
-		} else {
-			$preview = '';
-		}
-
+		$preview = $renderPreview ? $this->createPreview($file, $form, $template) : null;
 		return [realpath($file), $latte, $preview, $selectRangeListHtml];
 	}
 
@@ -171,6 +161,13 @@ public function isExpired($file, $time): bool
 	}
 
 
+	private function createPreview(string $latteFile, Form $form, Template $template): string
+	{
+		return $form->isAnchored() ? $template->getStyles() . $template->createPreviewWrap()->setHtml($this->renderLatteFileToString($form, $latteFile))
+			: '<p>Preview is not available, form was not attached to a presener.</p>';
+	}
+
+
 	private function createTemplateOptions(Template $template): Html
 	{
 		$html = new Html;

tests/testApp/app/config.neon

@@ -9,7 +9,6 @@ extensions:
 	formBlueprints: Daku\Nette\FormBlueprints\BlueprintsExtension
 
 formBlueprints:
-#	showPreview: false
 #	indentation: '  '
 #	templates:
 #		- Daku\Nette\FormBlueprints\Templates\TableTemplate