Add actual, usable examples (#11)

* let's start by adding more tests 🥳 * and let's fix this hash/default source race condition, again.. * let's move these over here instead * lol I'm sorry, I need to stop trying to take shortcuts * might as well do this for the lua files, too, if we're already going down this route * and here come the actual examples 🎈 * skip rspec on draft prs, too
fx · Jun 23, 2024 · 6077a64 · 6077a64
1 parent 19a66c9
commit 6077a64
Show file tree

Hide file tree

Showing 24 changed files with 2,923 additions and 221 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -2,6 +2,11 @@ name: Test
 
 on:
   pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
   push:
     branches:
       - main
@@ -26,6 +31,7 @@ jobs:
         with:
           fail_ci_if_error: true
   rspec:
+    if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     strategy:
       matrix:

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,52 +1,17 @@
 "use client";
 
-import React, { Suspense, useEffect, useState } from "react";
+import { Header } from "@/components/header";
+import { defaultSource } from "@/components/weak-aura-editor";
+import React, { Suspense, useState } from "react";
 import "./globals.css";
-import posthog from "posthog-js";
 import { GlobalContext, PHProvider, PostHogPageview } from "./providers";
-import { Header } from "@/components/header";
-import { encode, decode } from "@/lib/utils";
-
-if (typeof window !== "undefined") {
-  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-  });
-}
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const hash = typeof window !== "undefined" ? window.location.hash : "";
-  const [source, setSource] = useState<string>(
-    `title 'Shadow Priest WhackAura'
-load spec: :shadow_priest
-hide_ooc!
-
-dynamic_group 'WhackAuras' do
-  debuff_missing 'Shadow Word: Pain'
-end`
-  );
-
-  useEffect(() => {
-    if (!source || source === "") return;
-    const base64 = encode(source);
-    if (window?.location) window.location.hash = base64;
-    history.pushState(null, "", `#${base64}`);
-  }, [source]);
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      if (!window?.location?.hash) return;
-      setSource(decode(window?.location?.hash));
-    };
-    window.addEventListener("hashchange", handleHashChange);
-    return () => {
-      window.removeEventListener("hashchange", handleHashChange);
-    };
-  }, []);
-
+  const [source, setSource] = useState<string>(defaultSource);
   return (
     <html lang="en">
       <Suspense>

diff --git a/app/page.test.tsx b/app/page.test.tsx
@@ -0,0 +1,9 @@
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+import Page from "./page";
+
+describe("Page", () => {
+  it("renders", async () => {
+    render(<Page />);
+  });
+});
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,39 +2,32 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { LuaEngine, LuaFactory } from "wasmoon";
-import { DefaultRubyVM } from "@ruby/wasm-wasi/dist/browser";
 
 import indexLua from "../public/lua/index.lua";
-import encodeLua from "../public/lua/encode.lua";
-import dkjsonLua from "../public/lua/dkjson.lua";
-import inspectLua from "../public/lua/inspect.lua";
-import libDeflateLua from "../public/lua/LibDeflate.lua";
-import libSerializeLua from "../public/lua/LibSerialize.lua";
 
-import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { Check, Loader2 } from "lucide-react";
-import { RubyVM } from "@ruby/wasm-wasi";
-import { Editor } from "@monaco-editor/react";
-import { WeakAuraEditor } from "@/components/weak-aura-editor";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { WeakAuraEditor, defaultSource } from "@/components/weak-aura-editor";
 import { initRuby } from "@/lib/compiler";
+import { Editor } from "@monaco-editor/react";
+import { RubyVM } from "@ruby/wasm-wasi";
+import { Check, Loader2 } from "lucide-react";
+import { GlobalContext } from "./providers";
+
+import assets from "../public/index.json";
+import path from "path";
 
 async function init() {
   const factory = new LuaFactory();
   const lua = await factory.createEngine();
-  const luaAssets = {
-    "LibDeflate.lua": libDeflateLua,
-    "LibSerialize.lua": libSerializeLua,
-    "dkjson.lua": dkjsonLua,
-    "inspect.lua": inspectLua,
-    "encode.lua": encodeLua,
-  };
+  const luaAssets = assets.lua.filter((path) => path !== "index.lua");
 
   await Promise.all(
-    Object.keys(luaAssets).map((name) =>
-      factory.mountFile(name, luaAssets[name])
-    )
+    luaAssets.map(async (name) => {
+      const content = await (await fetch(name)).text();
+      await factory.mountFile(path.basename(name), content);
+    })
   );
 
   await lua.doString(indexLua);
@@ -48,7 +41,7 @@ export default function Page() {
   const [weakaura, setWeakaura] = useState<string>();
 
   const setJson = useCallback(
-    (json) => _setJson(JSON.stringify(JSON.parse(json), null, 2)),
+    (json: string) => _setJson(JSON.stringify(JSON.parse(json), null, 2)),
     []
   );
 

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -5,7 +5,7 @@ import { PostHogProvider } from "posthog-js/react";
 import { usePathname, useSearchParams } from "next/navigation";
 import { createContext, useEffect } from "react";
 
-if (typeof window !== "undefined") {
+if (typeof process !== "undefined" && typeof window !== "undefined") {
   posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
     api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
     capture_pageview: false, // Disable automatic pageview capture, as we capture manually

diff --git a/components/header.tsx b/components/header.tsx
@@ -1,16 +1,47 @@
 "use client";
 
+import { GlobalContext } from "@/app/providers";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuList,
 } from "@/components/ui/navigation-menu";
 import { Share } from "lucide-react";
+import { useContext, useMemo } from "react";
 import { useCopyToClipboard } from "usehooks-ts";
+import assets from "../public/index.json";
 import { Button } from "./ui/button";
 
 export function Header() {
   const [_, copy] = useCopyToClipboard();
+  const { source, setSource } = useContext(GlobalContext);
+
+  const exampleItems = useMemo(
+    () =>
+      assets.examples.map((path) => {
+        const frontMatter = assets.frontMatter[path];
+        return (
+          <MenubarItem
+            key={path}
+            onClick={async () => {
+              const content = await (await fetch(path)).text();
+              console.log(content, source);
+              setSource(content);
+            }}
+          >
+            {frontMatter?.title || path}
+          </MenubarItem>
+        );
+      }),
+    []
+  );
 
   return (
     <header className="dark text-white sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 mb-4 p-2">
@@ -19,6 +50,13 @@ export function Header() {
           WeakAuras
         </h1>
 
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>Examples</MenubarTrigger>
+            <MenubarContent>{exampleItems}</MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>