fix playground (#1681)

fixes #1489

- fix `Module '"sit-onyx"' has no exported member 'OnyxHeadline'` error
- version selects: show "beta" or "latest" version initially instead of
concrete version number
- support search for version selects
- persist selected onyx and typescript version (vue version is already
persisted)

I created a bug report for the `@vue/repl` package:
vuejs/repl#269

apps/playground/package.json

@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@sit-onyx/icons": "workspace:^",
-    "@vue/repl": "^4.3.1",
+    "@vue/repl": "~4.2.1",
     "@vueuse/core": "^10.11.0",
     "sit-onyx": "workspace:^"
   }

apps/playground/src/App.vue

@@ -10,7 +10,10 @@ import { useStore } from "./composables/useStore";
 const { store, onyxVersion, isLoadingOnyxVersions } = useStore();
 
 const replRef = ref<InstanceType<typeof Repl>>();
-const reloadPage = () => replRef.value?.reload();
+const reloadPage = () => {
+  replRef.value?.reload();
+  store.reloadLanguageTools?.();
+};
 
 const isDark = useDark();
 const theme = computed(() => (isDark.value ? "dark" : "light"));
@@ -39,7 +42,6 @@ const previewOptions = computed<InstanceType<typeof Repl>["previewOptions"]>(()
     the correct style.css for the onyx version is loaded -->
     <Repl
       v-if="!isLoadingOnyxVersions"
-      :key="onyxVersion"
       ref="replRef"
       :editor="Monaco"
       :theme="theme"

apps/playground/src/components/VersionSelect.vue

@@ -32,26 +32,17 @@ const filteredVersions = computed(() => {
 const options = computed<SelectOption<string>[]>(() => {
   return filteredVersions.value?.map((i) => ({ value: i, label: i })) ?? [];
 });
-
-const modelValue = computed<string>({
-  get: () => {
-    const isLatest = version.value && !version.value.includes(".");
-    if (isLatest) return options.value?.[0]?.value;
-    return options.value.find((o) => o.value === version.value)!.value;
-  },
-  set: (value: string) => {
-    version.value = value;
-  },
-});
 </script>
 
 <template>
   <OnyxSelect
-    v-model="modelValue"
+    :model-value="version ?? undefined"
     :label="props.label"
     :list-label="`Select ${props.pkg} version`"
-    placeholder="Select version"
+    :placeholder="version || 'Select version'"
     :options="options"
     density="compact"
+    with-search
+    @update:model-value="version = $event as Exclude<typeof $event, string[]>"
   />
 </template>

apps/playground/src/composables/useStore.ts

@@ -1,5 +1,5 @@
 import { mergeImportMap, useStore as useOriginalStore, useVueImportMap } from "@vue/repl";
-import { computed, ref, watchEffect } from "vue";
+import { computed, ref, watch, watchEffect } from "vue";
 import App from "../template/App.vue?raw";
 import NewFile from "../template/NewFile.vue?raw";
 import { fetchVersions } from "../utils/versions";
@@ -10,29 +10,41 @@ import { fetchVersions } from "../utils/versions";
 export const useStore = () => {
   const { vueVersion, importMap } = useVueImportMap({ vueVersion: "latest" });
 
+  const query = new URLSearchParams(location.search);
+
+  const INITIAL_ONYX_VERSION = "beta" as const;
+
   /**
    * Currently selected onyx version.
    */
-  const onyxVersion = ref("beta");
+  const onyxVersion = ref(query.get("onyxVersion") || INITIAL_ONYX_VERSION);
 
   /**
    * List of available onyx versions.
    */
-  const availableVersions = ref<string[]>([]);
+  const availableOnyxVersions = ref<string[]>([]);
 
   /**
    * Whether the list of onyx versions is loading.
    */
   const isLoadingOnyxVersions = ref(true);
 
   fetchVersions("sit-onyx")
-    .then((versions) => (availableVersions.value = versions))
+    .then((versions) => {
+      availableOnyxVersions.value = versions;
+
+      // we use a specific version here so if users share playground links for bug reproductions
+      // the exact same onyx version is used even if there are newer versions
+      if (onyxVersion.value === INITIAL_ONYX_VERSION && versions.length) {
+        onyxVersion.value = versions[0];
+      }
+    })
     .finally(() => (isLoadingOnyxVersions.value = false));
 
   const store = useOriginalStore(
     {
       vueVersion,
-      typescriptVersion: ref("latest"),
+      typescriptVersion: ref(query.get("typescriptVersion") || "latest"),
       template: ref({
         newSFC: NewFile,
         welcomeSFC: App,
@@ -50,16 +62,32 @@ export const useStore = () => {
       dependencyVersion: computed(() => {
         // the dependencyVersion must be a real version number and not a range like "alpha"
         const version =
-          onyxVersion.value.includes(".") || !availableVersions.value.length
+          onyxVersion.value.includes(".") || !availableOnyxVersions.value.length
             ? onyxVersion.value
-            : availableVersions.value[0];
+            : availableOnyxVersions.value[0];
         return { "sit-onyx": version };
       }),
     },
     // initialize repl with previously serialized state
     location.hash.slice(1),
   );
 
+  const updateQueryParam = (key: string, value: string) => {
+    const url = new URL(location.href);
+    url.searchParams.set(key, value);
+    history.pushState(null, "", url);
+  };
+
+  watch(onyxVersion, (newVersion) => {
+    updateQueryParam("onyxVersion", newVersion);
+  });
+  watch(
+    () => store.typescriptVersion,
+    (newVersion) => {
+      updateQueryParam("typescriptVersion", newVersion);
+    },
+  );
+
   // persist state in URL
   watchEffect(() => history.replaceState({}, "", store.serialize()));