@histoire/controls 0.8.1 → 0.8.4

package/.histoire/dist/assets/bundle-sandbox.f56c0808.js

@@ -0,0 +1,84 @@
+import { S as reactive, aa as parseQuery, r as ref, D as createApp, E as createPinia, w as watch, c as computed, p as onMounted, _ as h } from "./vendor.31c91490.js";
+import { m as mapFile, f as files, r as registerGlobalComponents, b as toRawDeep, h as histoireConfig, i as isDark, d as applyStateToVariant } from "./global-components.d165b38c.js";
+import { S as STATE_SYNC, P as PREVIEW_SETTINGS_SYNC, a as SANDBOX_READY, _ as _sfc_main } from "./const.36730b48.js";
+var sandbox = "";
+const receivedSettings = reactive({});
+function applyPreviewSettings(settings) {
+  Object.assign(receivedSettings, settings);
+}
+const query = parseQuery(window.location.search);
+const file = ref(mapFile(files.find((f) => f.id === query.storyId)));
+const app = createApp({
+  name: "SandboxApp",
+  setup() {
+    const story = computed(() => file.value.story);
+    const variant = computed(() => {
+      var _a;
+      return (_a = story.value) == null ? void 0 : _a.variants.find((v) => v.id === query.variantId);
+    });
+    let synced = false;
+    let mounted = false;
+    window.addEventListener("message", (event) => {
+      var _a, _b;
+      if (((_a = event.data) == null ? void 0 : _a.type) === STATE_SYNC) {
+        if (!mounted)
+          return;
+        synced = true;
+        applyStateToVariant(variant.value, event.data.state);
+      } else if (((_b = event.data) == null ? void 0 : _b.type) === PREVIEW_SETTINGS_SYNC) {
+        applyPreviewSettings(event.data.settings);
+      }
+    });
+    watch(() => variant.value.state, (value) => {
+      var _a;
+      if (synced && mounted) {
+        synced = false;
+        return;
+      }
+      (_a = window.parent) == null ? void 0 : _a.postMessage({
+        type: STATE_SYNC,
+        state: toRawDeep(value)
+      });
+    }, {
+      deep: true
+    });
+    onMounted(() => {
+      mounted = true;
+    });
+    return {
+      story,
+      variant
+    };
+  },
+  render() {
+    return [
+      h("div", { class: "htw-sandbox-hidden" }, [
+        h(file.value.component, {
+          story: file.value.story
+        })
+      ]),
+      this.story && this.variant ? h(_sfc_main, {
+        story: this.story,
+        variant: this.variant,
+        onReady: () => {
+          var _a;
+          (_a = window.parent) == null ? void 0 : _a.postMessage({
+            type: SANDBOX_READY
+          });
+        }
+      }) : null
+    ];
+  }
+});
+app.use(createPinia());
+registerGlobalComponents(app);
+app.mount("#app");
+watch(isDark, (value) => {
+  if (value) {
+    document.documentElement.classList.add(histoireConfig.sandboxDarkClass);
+  } else {
+    document.documentElement.classList.remove(histoireConfig.sandboxDarkClass);
+  }
+}, {
+  immediate: true
+});