From fd6fce4dc9639f73d10a84012326ca148fa367a7 Mon Sep 17 00:00:00 2001
From: Kushal Niroula <niroulakushal31@gmail.com>
Date: Tue, 22 Feb 2022 19:31:54 +0545
Subject: [PATCH] feat(sfc-playground): add ability to disable automatic url
 generation

---
 packages/sfc-playground/src/App.vue    |  8 +++++---
 packages/sfc-playground/src/Header.vue | 25 +++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index df91bb5af74..68c33738ee8 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Header from './Header.vue'
 import { Repl, ReplStore } from '@vue/repl'
-import { watchEffect } from 'vue'
+import { watchEffect, ref } from 'vue'
 
 const setVH = () => {
   document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
@@ -23,12 +23,14 @@ const sfcOptions = {
   }
 }
 
+const autoUrl = ref(true);
+
 // persist state
-watchEffect(() => history.replaceState({}, '', store.serialize()))
+watchEffect(() => autoUrl.value && history.replaceState({}, '', store.serialize()))
 </script>
 
 <template>
-  <Header :store="store" />
+  <Header :store="store" v-model:auto-url="autoUrl" />
   <Repl
     @keydown.ctrl.s.prevent
     @keydown.meta.s.prevent
diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index fe65d8af7ae..174f9536484 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { downloadProject } from './download/download'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, defineEmits, computed } from 'vue'
 import Sun from './icons/Sun.vue'
 import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
@@ -8,13 +8,19 @@ import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
 
 // @ts-ignore
-const { store } = defineProps(['store'])
+const { store, autoUrl } = defineProps(['store', 'autoUrl'])
+const emit = defineEmits(['update:autoUrl']);
 
 const currentCommit = __COMMIT__
 const activeVersion = ref(`@${currentCommit}`)
 const publishedVersions = ref<string[]>()
 const expanded = ref(false)
 
+const autoUrlRef = computed({
+  get: () => autoUrl,
+  set: value => emit("update:autoUrl", value)
+});
+
 async function toggle() {
   expanded.value = !expanded.value
   if (!publishedVersions.value) {
@@ -91,6 +97,10 @@ async function fetchVersions(): Promise<string[]> {
       <span>Vue SFC Playground</span>
     </h1>
     <div class="links">
+      <div class="url-generation">
+        <input type="checkbox" v-model="autoUrlRef" id="auto-url">
+        <label for="auto-url">Auto URL</label>
+      </div>
       <div class="version" @click.stop>
         <span class="active-version" @click="toggle">
           Version: {{ activeVersion }}
@@ -288,4 +298,15 @@ h1 img {
 .github {
   margin: 0 2px;
 }
+
+.url-generation {
+  display: flex;
+  flex-direction: row;
+  margin: 0 2px;
+  align-items: center;
+  gap: 2px;
+  border-right: 2px solid var(--border);
+  padding: 5px;
+  user-select: none;
+}
 </style>