feat(sfc-playground): add ability to disable automatic url generation

Author: niroula-kushal

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

packages/sfc-playground/src/Header.vue

@@ -1,20 +1,26 @@
 <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'
 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>