chore: replace svelte-readme with custom Vite app

Author: metonym

.gitignore

@@ -1,3 +1,3 @@
 .DS_Store
 dist
-node_modules
+node_modules

README.md

@@ -47,6 +47,8 @@ Bind to the `state` prop to determine if the current tab is currently visible or
 
 In the following example, switch to a different tab in the same browser window. The page title should change from "visible" to "hidden."
 
+<!-- render:Basic -->
+
 ```svelte
 <script>
   import VisibilityChange from "svelte-visibility-change";
@@ -65,7 +67,7 @@ In the following example, switch to a different tab in the same browser window.
 
 You can also bind to the boolean `visible` and `hidden` props.
 
-```svelte no-eval
+```svelte
 <script>
   import VisibilityChange from "svelte-visibility-change";
 
@@ -80,6 +82,8 @@ You can also bind to the boolean `visible` and `hidden` props.
 
 An alternative to binding to props is to listen to the `on:visible` and `on:hidden` dispatched events.
 
+<!-- render:Events -->
+
 ```svelte
 <script>
   import VisibilityChange from "svelte-visibility-change";
@@ -101,7 +105,7 @@ This component dispatches an `on:change` event whenever a [visibilitychange](htt
 
 **Note:** unlike `on:visible`, this event only fires when the page visibility changes _after the component has mounted._
 
-```svelte no-eval
+```svelte
 <VisibilityChange
   on:change={({ detail }) => {
     console.log(detail.state); // "visible" | "hidden"
@@ -117,7 +121,7 @@ An alternative to the `VisibilityChange` component is the `visibilityChange` act
 
 The action only dispatches a "change" event with the same `event.detail` signature.
 
-```svelte no-eval
+```svelte
 <script>
   import { visibilityChange } from "svelte-visibility-change";
 </script>
@@ -129,7 +133,8 @@ The action only dispatches a "change" event with the same `event.detail` signatu
     console.log(detail.visible); // boolean
     console.log(detail.hidden); // boolean
   }}
-/>
+>
+</div>
 ```
 
 ## API

bun.lock

@@ -23,17 +23,23 @@
     }
   },
   "scripts": {
-    "dev": "rollup -cw",
-    "build": "rollup -c",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "test": "vitest"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/svelte": "^5.2.7",
+    "github-markdown-css": "^5.8.1",
     "jsdom": "^26.0.0",
+    "marked": "^15.0.7",
+    "marked-base-url": "^1.1.6",
+    "marked-highlight": "^2.2.1",
+    "shiki": "^3.2.1",
     "svelte": "^5.25.2",
-    "svelte-readme": "^3.6.3",
     "typescript": "^5.8.2",
+    "vite": "^6.2.2",
     "vitest": "^3.0.9"
   },
   "repository": {

package.json

@@ -0,0 +1,149 @@
+import { Marked } from "marked";
+import { baseUrl } from "marked-base-url";
+import { markedHighlight } from "marked-highlight";
+import fsp from "node:fs/promises";
+import path from "node:path";
+import { codeToHtml } from "shiki";
+import type { Plugin } from "vite";
+
+type PluginReadmeOptions = {
+  title: string;
+  description: string;
+  watchDir: string;
+  baseUrl: string;
+};
+
+export const pluginReadme = (options: PluginReadmeOptions): Plugin => {
+  const watchDir = path.join(__dirname, options.watchDir);
+  let base = "/";
+
+  const marked = new Marked(
+    markedHighlight({
+      async: true,
+      async highlight(code, lang) {
+        const highlightedCode = await codeToHtml(code, {
+          lang,
+          theme: "github-dark",
+        });
+
+        return `{@html ${JSON.stringify(highlightedCode)}}\n`;
+      },
+    }),
+    baseUrl(options.baseUrl),
+    {
+      renderer: {
+        html(html) {
+          if (html.text.includes("render:")) {
+            // Parse the name from the comment (after "render:")
+            const regex = /<!--\s*render:(\w+)\s*-->/;
+            const match = html.text.match(regex);
+            const componentName = match?.[1];
+
+            if (!componentName) {
+              return html.text;
+            }
+
+            return `<div class="code-demo"><${componentName} /></div>`;
+          }
+          return html.text;
+        },
+        code(code) {
+          // Shiki returns a string with the code wrapped in a <pre> tag.
+          // We need to return the code without the extra <pre> tag.
+          return code.text;
+        },
+      },
+      gfm: true,
+      breaks: true,
+    },
+  );
+
+  return {
+    name: "vite:process-readme",
+
+    // Run before the Svelte plugin.
+    enforce: "pre",
+    configureServer(server) {
+      server.watcher.add(watchDir);
+    },
+    handleHotUpdate({ file, server }) {
+      // If a README.md file changed, force reload the page
+      // This ensures clean state and no duplicate scripts.
+      if (file.endsWith("README.md")) {
+        server.ws.send({ type: "full-reload" });
+        return [];
+      }
+
+      // If a Svelte component in the watched directory changed,
+      // let the Svelte plugin handle the HMR.
+      if (file.startsWith(watchDir) && file.endsWith(".svelte")) {
+        return;
+      }
+    },
+    configResolved(config) {
+      // Get the base URL from Vite config.
+      base = config.base;
+    },
+    transformIndexHtml(html) {
+      return `<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="${options.description}"
+    />
+    <link rel="icon" type="image/svg+xml" href="${base}favicon.svg" />
+    <title>${options.title}</title>
+    <style>
+      html {
+        color-scheme: dark;
+      }
+
+      main {
+        max-width: 960px;
+        margin: auto;
+        padding: 0 1rem;
+      }
+
+      .markdown-body pre.shiki {
+        border-radius: 0;
+      }
+
+      .code-demo {
+        padding: 1rem;
+        border: 1px solid #24292e;
+      }
+    </style>
+  </head>
+
+  <body class="markdown-body">
+    <main id="readme"></main>
+    ${html}
+  </body>
+</html>
+`;
+    },
+    async transform(code, id) {
+      if (id.endsWith("README.md")) {
+        let imports = "";
+
+        const watchedFiles = await fsp.readdir(
+          path.join(__dirname, options.watchDir),
+        );
+
+        for (const file of watchedFiles) {
+          if (file.endsWith(".svelte")) {
+            const moduleName = file.replace(".svelte", "");
+            imports += `import ${moduleName} from "${options.watchDir}/${file}";\n`;
+          }
+        }
+
+        const importsBlock = `<script>${imports}</script>`;
+        const html = await marked.parse(code);
+
+        return importsBlock + html;
+      }
+    },
+  };
+};

plugin-readme.ts

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import VisibilityChange from "svelte-visibility-change";
+
+  let state: "visible" | "hidden";
+
+  $: if (typeof window !== "undefined") {
+    document.title = state;
+  }
+</script>
+
+<VisibilityChange bind:state />

rollup.config.js

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import VisibilityChange from "svelte-visibility-change";
+
+  let events: string[] = [];
+</script>
+
+<VisibilityChange
+  on:visible={() => (events = [...events, "on:visible"])}
+  on:hidden={() => (events = [...events, "on:hidden"])}
+/>
+
+{events.join(", ")}

tests/examples/Basic.svelte

@@ -0,0 +1,7 @@
+<script type="module">
+  import "github-markdown-css/github-markdown-dark.css";
+  import { mount } from "svelte";
+  import Readme from "../README.md";
+
+  mount(Readme, { target: document.getElementById("readme") });
+</script>

tests/examples/Events.svelte

@@ -2,14 +2,16 @@
   "compilerOptions": {
     "noEmit": true,
     "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitAny": true,
     "verbatimModuleSyntax": true,
     "isolatedModules": true,
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "strict": true,
     "types": ["svelte", "vitest/globals"],
@@ -18,5 +20,5 @@
       "svelte-visibility-change/*": ["./src/*"]
     }
   },
-  "include": ["src", "tests"]
+  "include": ["src", "tests", "plugin-readme.ts", "vite.config.ts"]
 }