Website: put all components inside app (#18547)

.vscode/settings.example.json

@@ -1,5 +1,5 @@
 {
-  "[javascript][typescript][javascriptreact][typescriptreact][json][jsonc][json5][markdown][yaml][css][html]": {
+  "[javascript][typescript][javascriptreact][typescriptreact][json][jsonc][json5][markdown][yaml][css][html][vue]": {
     "editor.defaultFormatter": "prettier.prettier-vscode",
     "editor.formatOnSave": true,
   },

website/index.html

@@ -44,34 +44,8 @@
   </head>
 
   <body>
-    <header>
-      <a href="/" class="logo-wrapper">
-        <img class="logo" src="/icon.png" alt="" />
-        <h1>Prettier <span id="version"></span></h1>
-      </a>
-
-      <span class="links">
-        <a
-          class="github-button"
-          href="https://github.com/prettier/prettier"
-          data-show-count="true"
-          aria-label="Star prettier on GitHub"
-        >
-          GitHub
-        </a>
-      </span>
-    </header>
-
     <div id="root" class="playground-container"></div>
 
     <script type="module" src="./playground/index.jsx"></script>
-
-    <script
-      async
-      defer
-      src="https://buttons.github.io/buttons.js"
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    ></script>
   </body>
 </html>

website/package.json

@@ -32,6 +32,7 @@
     "clipboard": "2.0.11",
     "clsx": "2.1.1",
     "cm6-graphql": "0.2.1",
+    "github-buttons": "2.29.1",
     "graphql": "16.12.0",
     "lz-string": "1.5.0",
     "prism-react-renderer": "2.4.1",

website/playground/VersionLink.jsx

@@ -1,32 +0,0 @@
-import { Teleport } from "vue";
-
-export default function VersionLink({ version }) {
-  const match = version.match(/^pr-(\d+)$/);
-  let href;
-  if (match) {
-    href = `pull/${match[1]}`;
-  } else if (/\.0$/.test(version)) {
-    href = `releases/tag/${version}`;
-  } else {
-    href = `blob/main/CHANGELOG.md#${version.replaceAll(".", "")}`;
-  }
-
-  const formattedVersion = match ? `PR #${match[1]}` : `v${version}`;
-
-  document.title = `Prettier ${formattedVersion}`;
-
-  return (
-    <Teleport to="#version">
-      <a
-        href={`https://github.com/prettier/prettier/${href}`}
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        {formattedVersion}
-      </a>
-    </Teleport>
-  );
-}
-VersionLink.props = {
-  version: { type: String, required: true },
-};

website/playground/github-button.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { render } from "github-buttons";
+import { useTemplateRef, onMounted } from "vue";
+
+const anchorRef = useTemplateRef("anchor");
+
+onMounted(() => {
+  const anchor = anchorRef.value;
+  render(anchor, function (el) {
+    anchor.parentNode.replaceChild(el, anchor);
+  });
+});
+</script>
+
+<template>
+  <a
+    ref="anchor"
+    class="github-button"
+    href="https://github.com/prettier/prettier"
+    data-show-count="true"
+    aria-label="Star prettier on GitHub"
+  >
+    GitHub
+  </a>
+</template>

website/playground/header.vue

@@ -0,0 +1,48 @@
+<script setup>
+import GithubButton from "./github-button.vue";
+import ThemeToggle from "./theme-toggle.vue";
+import VersionLink from "./version-link.vue";
+
+const logo = "/icon.png";
+
+defineProps({
+  version: { type: String, required: true },
+});
+</script>
+
+<template>
+  <header>
+    <a href="/" class="logo-wrapper">
+      <img class="logo" :src="logo" alt="" />
+      <h1>Prettier <VersionLink :version></VersionLink></h1>
+    </a>
+
+    <span class="links">
+      <GithubButton
+        href="https://github.com/prettier/prettier"
+        dataShowCount="true"
+        class="github-button"
+        aria-label="Star prettier on GitHub"
+        >GitHub</GithubButton
+      >
+      <ThemeToggle></ThemeToggle>
+    </span>
+  </header>
+</template>
+
+<style>
+.links {
+  display: flex;
+  gap: 8px;
+  font-size: 16px;
+  align-items: flex-end;
+}
+
+.links > * {
+  display: flex;
+}
+
+.github-button span {
+  display: flex;
+}
+</style>

website/playground/index.jsx

@@ -1,52 +1,11 @@
 import "./install-service-worker.js";
 
 import { createApp, onMounted, reactive } from "vue";
-import { useTheme } from "./composables/use-theme.js";
+import Header from "./header.vue";
 import Playground from "./Playground.jsx";
 import { fixPrettierVersion } from "./utilities.js";
-import VersionLink from "./VersionLink.jsx";
 import WorkerApi from "./WorkerApi.js";
 
-function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme();
-
-  return (
-    <button
-      onClick={toggleTheme}
-      class="btn"
-      aria-label={`Switch to ${theme.value === "dark" ? "light" : "dark"} theme`}
-    >
-      {theme.value === "dark" ? (
-        <svg
-          class="theme-icon"
-          viewBox="0 0 24 24"
-          width="14"
-          height="14"
-          aria-hidden="true"
-        >
-          <path
-            fill="currentColor"
-            d="M9.37 5.51a7.4 7.4 0 009.12 9.12A7 7 0 119.37 5.51M12 3a9 9 0 108.9 7.64 5.39 5.39 0 01-9.8-3.14 5.4 5.4 0 012.26-4.4Q12.69 3 12 3"
-          />
-        </svg>
-      ) : (
-        <svg
-          class="theme-icon"
-          viewBox="0 0 24 24"
-          width="14"
-          height="14"
-          aria-hidden="true"
-        >
-          <path
-            fill="currentColor"
-            d="M12 9a1 1 0 0 1 0 6 1 1 0 0 1 0-6m0-2a5 5 0 1 0 0 10 5 5 0 0 0 0-10M2 13h2a1 1 0 0 0 0-2H2a1 1 0 0 0 0 2m18 0h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2M11 2v2a1 1 0 0 0 2 0V2a1 1 0 0 0-2 0m0 18v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-2 0M5.99 4.58a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm12.37 12.37a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm1.06-10.96a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41zM7.05 18.36a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41z"
-          />
-        </svg>
-      )}
-    </button>
-  );
-}
-
 const App = {
   name: "App",
   setup() {
@@ -72,7 +31,7 @@ const App = {
 
       return (
         <>
-          <VersionLink version={version} />
+          <Header version={version}></Header>
           <Playground
             worker={worker}
             availableOptions={availableOptions}
@@ -100,14 +59,6 @@ function augmentOption(option) {
   return option;
 }
 
-const linksContainer = document.querySelector(".links");
-if (linksContainer) {
-  const themeToggleContainer = document.createElement("div");
-  linksContainer.appendChild(themeToggleContainer);
-  const themeToggleRoot = createApp(ThemeToggle);
-  themeToggleRoot.mount(themeToggleContainer);
-}
-
 const container = document.getElementById("root");
 const root = createApp(App);
 root.mount(container);

website/playground/playground.css

@@ -88,21 +88,6 @@ header h1 {
   margin: 0;
 }
 
-#version {
-  font-size: 0.5em;
-  line-height: 0;
-  opacity: 0.5;
-}
-
-.links {
-  display: flex;
-  gap: 8px;
-  font-size: 16px;
-  align-items: center;
-}
-.links > * {
-  display: flex;
-}
 .theme-icon {
   padding-block: 2px;
 }

website/playground/theme-toggle.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useTheme } from "./composables/use-theme.js";
+
+const { theme, toggleTheme } = useTheme();
+</script>
+
+<template>
+  <button
+    @click="toggleTheme"
+    class="btn"
+    :aria-label="`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`"
+  >
+    <svg
+      class="theme-icon"
+      viewBox="0 0 24 24"
+      width="14"
+      height="14"
+      aria-hidden="true"
+      v-if="theme === 'dark'"
+    >
+      <path
+        fill="currentColor"
+        d="M9.37 5.51a7.4 7.4 0 009.12 9.12A7 7 0 119.37 5.51M12 3a9 9 0 108.9 7.64 5.39 5.39 0 01-9.8-3.14 5.4 5.4 0 012.26-4.4Q12.69 3 12 3"
+      />
+    </svg>
+    <svg
+      v-if="theme === 'light'"
+      class="theme-icon"
+      viewBox="0 0 24 24"
+      width="14"
+      height="14"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M12 9a1 1 0 0 1 0 6 1 1 0 0 1 0-6m0-2a5 5 0 1 0 0 10 5 5 0 0 0 0-10M2 13h2a1 1 0 0 0 0-2H2a1 1 0 0 0 0 2m18 0h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2M11 2v2a1 1 0 0 0 2 0V2a1 1 0 0 0-2 0m0 18v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-2 0M5.99 4.58a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm12.37 12.37a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm1.06-10.96a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41zM7.05 18.36a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41z"
+      />
+    </svg>
+  </button>
+</template>

website/playground/version-link.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed, watch, onMounted } from "vue";
+
+const props = defineProps({
+  version: { type: String, required: true },
+});
+
+const versionData = computed(() => {
+  const match = props.version.match(/^pr-(\d+)$/);
+  let href;
+  if (match) {
+    href = `pull/${match[1]}`;
+  } else if (/\.0$/.test(props.version)) {
+    href = `releases/tag/${props.version}`;
+  } else {
+    href = `blob/main/CHANGELOG.md#${props.version.replaceAll(".", "")}`;
+  }
+
+  return {
+    href,
+    formattedVersion: match ? `PR #${match[1]}` : `v${props.version}`,
+  };
+});
+
+const updateTitle = () => {
+  document.title = `Prettier ${versionData.value.formattedVersion}`;
+};
+
+watch(() => props.version, updateTitle);
+
+onMounted(updateTitle);
+</script>
+
+<template>
+  <a
+    :href="`https://github.com/prettier/prettier/${versionData.href}`"
+    target="_blank"
+    rel="noreferrer noopener"
+    class="version"
+  >
+    {{ versionData.formattedVersion }}
+  </a>
+</template>
+
+<style>
+.version {
+  font-size: 0.5em;
+  line-height: 0;
+  opacity: 0.5;
+}
+</style>

website/vite.config.mjs

@@ -9,10 +9,13 @@ import packageJson from "./package.json" with { type: "json" };
 const IS_PRODUCTION = process.env.NODE_ENV === "production";
 const IS_CI = Boolean(process.env.CI);
 const OUT_DIRECTORY = "./static/playground/";
-const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set([
+const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set(
-  "cm6-graphql",
+  [
-  "@docusaurus/preset-classic",
+    IS_PRODUCTION ? undefined : "vue",
-]);
+    "cm6-graphql",
+    "@docusaurus/preset-classic",
+  ].filter(Boolean),
+);
 
 export default defineConfig(async () => ({
   base: IS_PRODUCTION ? "/playground/" : undefined,

website/yarn.lock

@@ -7968,6 +7968,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"github-buttons@npm:2.29.1":
+  version: 2.29.1
+  resolution: "github-buttons@npm:2.29.1"
+  checksum: 10/ca7c2ad1714e68041f41d09d5ce5f35219ff5a54490158586b112e193ccaa557bb0a8bee95de8fc054879d08cc8b4985bde88dde01d8d5ca4208dd6b938615c1
+  languageName: node
+  linkType: hard
+
 "github-slugger@npm:^1.5.0":
   version: 1.5.0
   resolution: "github-slugger@npm:1.5.0"
@@ -12876,6 +12883,7 @@ __metadata:
     clsx: "npm:2.1.1"
     cm6-graphql: "npm:0.2.1"
     concurrently: "npm:9.2.1"
+    github-buttons: "npm:2.29.1"
     graphql: "npm:16.12.0"
     lz-string: "npm:1.5.0"
     prism-react-renderer: "npm:2.4.1"