fix playground

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()));