From 4361dfbcb7fb77187f7f95704de8ab8bb341b39b Mon Sep 17 00:00:00 2001
From: Aliaksandr Bazukevich <alex.baz88@gmail.com>
Date: Wed, 6 Mar 2024 17:21:58 +0100
Subject: [PATCH 1/2] feat(preview): removed 'isolation' marker from preview
 plugin

---
 site/views/examples/example/form.njk |  2 +-
 src/core/preview/preview.tsx         | 24 +++++++++---------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/site/views/examples/example/form.njk b/site/views/examples/example/form.njk
index a53c5c90..3ecc1cd9 100644
--- a/site/views/examples/example/form.njk
+++ b/site/views/examples/example/form.njk
@@ -32,7 +32,7 @@ title: Example with form
     };
   </script>
 
-  <uip-preview class="centered-content" resizable isolation></uip-preview>
+  <uip-preview class="centered-content" resizable></uip-preview>
 
   <uip-settings resizable vertical="@+sm" target=".demo-form">
     <uip-bool-setting label="Email validation" target="#email" mode="append" attribute="class" value="validation-input"></uip-bool-setting>
diff --git a/src/core/preview/preview.tsx b/src/core/preview/preview.tsx
index dedefee1..cf4db66d 100644
--- a/src/core/preview/preview.tsx
+++ b/src/core/preview/preview.tsx
@@ -18,17 +18,13 @@ import type {ESLIntersectionEvent} from '@exadel/esl/modules/esl-event-listener/
  */
 export class UIPPreview extends UIPPlugin {
   static is = 'uip-preview';
-  static observedAttributes: string[] = ['dir', 'resizable', 'isolation', 'isolation-template'];
+  static observedAttributes: string[] = ['dir', 'resizable'];
 
   /** Sync height with inner iframe content height */
   @prop(true) public resizeLoop: boolean;
 
-  /** Marker to use iframe isolated rendering */
-  @attr({parser: parseBoolean, serializer: toBooleanAttribute}) public isolation: boolean;
-  /** Marker to use iframe isolated rendering */
+  /** Marker to force iframe rerendering */
   @attr({parser: parseBoolean, serializer: toBooleanAttribute}) public forceUpdate: boolean;
-  /** Template to use for isolated rendering */
-  @attr({defaultValue: 'default'}) public isolationTemplate: string;
 
   protected _iframeResizeRAF: number = 0;
 
@@ -70,15 +66,13 @@ export class UIPPreview extends UIPPlugin {
   protected override attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void {
     if (attrName === 'resizable' && newVal === null) this.clearInlineSize();
     if (attrName === 'dir') this.updateDir();
-    if (attrName === 'isolation' || attrName === 'isolation-template') {
-      this.$$on(this._onIframeLoad);
-      this._onRootStateChange();
-    }
   }
 
   protected update(e?: UIPChangeEvent): void {
-    if (!this.isolation) return this.writeContent();
-    if (!e || e.jsChanges.length || this.forceUpdate) this.writeContentIsolated();
+    const isolated = this.model!.activeSnippet?.isolated || false;
+
+    if (!isolated) return this.writeContent();
+    if (!e || this.forceUpdate || e.force) this.writeContentIsolated();
     this._onIframeLoad();
   }
 
@@ -134,8 +128,7 @@ export class UIPPreview extends UIPPlugin {
 
   @listen({
     event: 'load',
-    target: ($this: UIPPreview) => $this.$iframe,
-    condition: ($this: UIPPreview) => $this.isolation
+    target: ($this: UIPPreview) => $this.$iframe
   })
   protected _onIframeLoad(): void {
     if (!this.$iframe.contentWindow) return;
@@ -143,7 +136,8 @@ export class UIPPreview extends UIPPlugin {
     const title = this.model!.activeSnippet?.label || 'UI Playground';
     const script = UIPJSRenderingPreprocessors.preprocess(this.model!.js);
     const content = UIPHTMLRenderingPreprocessors.preprocess(this.model!.html);
-    const html = UIPRenderingTemplatesService.render(this.isolationTemplate, {title, content, script});
+    const isolatedTemplate = this.model!.activeSnippet?.isolatedTemplate || 'default';
+    const html = UIPRenderingTemplatesService.render(isolatedTemplate, {title, content, script});
 
     this.$iframe.contentWindow?.document.close();
     this.$iframe.contentWindow?.document.write(html);

From 60991ebb1ddc079ab63b783df75071bb676bcc20 Mon Sep 17 00:00:00 2001
From: Aliaksandr Bazukevich <alex.baz88@gmail.com>
Date: Wed, 6 Mar 2024 17:23:28 +0100
Subject: [PATCH 2/2] feat(snippet): added 'uip-isolated' marker on snippet to
 track if it should render in iframe;

---
 site/views/examples/example/form.njk  |  2 +-
 site/views/examples/example/image.njk |  2 +-
 src/core/base/model.change.ts         |  7 ++++++-
 src/core/base/model.ts                |  9 +++++----
 src/core/base/snippet.ts              | 11 +++++++++++
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/site/views/examples/example/form.njk b/site/views/examples/example/form.njk
index 3ecc1cd9..1478ab33 100644
--- a/site/views/examples/example/form.njk
+++ b/site/views/examples/example/form.njk
@@ -5,7 +5,7 @@ title: Example with form
 <uip-root>
   <uip-snippets class="uip-toolbar"></uip-snippets>
 
-  <script type="text/html" uip-snippet label="Example with form">
+  <script type="text/html" uip-snippet uip-isolated label="Example with form">
     <form class="demo-form">
       <div class="form-section">
         <label for="name">Name: </label>
diff --git a/site/views/examples/example/image.njk b/site/views/examples/example/image.njk
index aaf92bba..f6a9b979 100644
--- a/site/views/examples/example/image.njk
+++ b/site/views/examples/example/image.njk
@@ -6,7 +6,7 @@ title: Example with image
     <uip-snippets dropdown-view="all"></uip-snippets>
     <uip-theme-toggle></uip-theme-toggle>
   </div>
-  <script type="text/html" uip-snippet label="Example with image">
+  <script type="text/html" uip-snippet uip-isolated label="Example with image">
     <img class="demo-img" alt="patrick" src="{{ '/assets/patrick.png' | url }}" height="500" width="500">
   </script>
   <script type="text/html" uip-snippet label="Example with image link">
diff --git a/src/core/base/model.change.ts b/src/core/base/model.change.ts
index 2315f657..b37710cb 100644
--- a/src/core/base/model.change.ts
+++ b/src/core/base/model.change.ts
@@ -7,10 +7,11 @@ import type {UIPStateModel} from './model';
 export type UIPChangeInfo = {
   modifier: UIPPlugin | UIPRoot;
   type: 'html' | 'js';
+  force?: boolean;
 };
 
 export class UIPChangeEvent extends Event {
-  public readonly target: UIPRoot;
+  public override readonly target: UIPRoot;
 
   public constructor(
     type: string,
@@ -25,6 +26,10 @@ export class UIPChangeEvent extends Event {
     return this.target.model;
   }
 
+  public get force(): boolean {
+    return this.changes.some((change) => change.force);
+  }
+
   public get jsChanges(): UIPChangeInfo[] {
     return this.changes.filter((change) => change.type === 'js');
   }
diff --git a/src/core/base/model.ts b/src/core/base/model.ts
index b584e1fa..5e6e2e91 100644
--- a/src/core/base/model.ts
+++ b/src/core/base/model.ts
@@ -60,7 +60,7 @@ export class UIPStateModel extends SyntheticEventTarget {
     const script = UIPJSNormalizationPreprocessors.preprocess(js);
     if (this._js === script) return;
     this._js = script;
-    this._changes.push({modifier, type: 'js'});
+    this._changes.push({modifier, type: 'js', force: true});
     this.dispatchChange();
   }
 
@@ -68,13 +68,14 @@ export class UIPStateModel extends SyntheticEventTarget {
    * Sets current markup state to the passed one
    * @param markup - new state
    * @param modifier - plugin, that initiates the change
+   * @param force - marker, that indicates if html changes require iframe rerender
    */
-  public setHtml(markup: string, modifier: UIPPlugin | UIPRoot): void {
+  public setHtml(markup: string, modifier: UIPPlugin | UIPRoot, force: boolean = false): void {
     const html = UIPHTMLNormalizationPreprocessors.preprocess(markup);
     const root = new DOMParser().parseFromString(html, 'text/html').body;
     if (!root || root.innerHTML.trim() !== this.html.trim()) {
       this._html = root;
-      this._changes.push({modifier, type: 'html'});
+      this._changes.push({modifier, type: 'html', force});
       this.dispatchChange();
     }
   }
@@ -120,7 +121,7 @@ export class UIPStateModel extends SyntheticEventTarget {
   ): void {
     if (!snippet) return;
     this._snippets.forEach((s) => (s.active = s === snippet));
-    this.setHtml(snippet.html, modifier);
+    this.setHtml(snippet.html, modifier, true);
     this.setJS(snippet.js, modifier);
     this.dispatchEvent(
       new CustomEvent('uip:model:snippet:change', {detail: this})
diff --git a/src/core/base/snippet.ts b/src/core/base/snippet.ts
index ae758386..a7f76bfd 100644
--- a/src/core/base/snippet.ts
+++ b/src/core/base/snippet.ts
@@ -33,6 +33,17 @@ export class UIPSnippetItem {
     return this.$elementJS ? this.$elementJS.innerHTML : '';
   }
 
+  /** @returns template to use for isolated rendering */
+  @memoize()
+  public get isolatedTemplate(): string {
+    return this.$element.getAttribute('isolated-template') || '';
+  }
+
+  /** @returns if snippet should preview in isolated iframe */
+  public get isolated(): boolean {
+    return this.$element.hasAttribute('uip-isolated');
+  }
+
   /** @returns snippet's anchor id */
   public get anchor(): string | null {
     return this.$element.getAttribute('anchor');