chore: fmt

ncpa0 · Jul 24, 2024 · 638d3f5 · 638d3f5
1 parent 86de195
commit 638d3f5
Show file tree

Hide file tree

Showing 20 changed files with 150 additions and 123 deletions.
diff --git a/dprint.json b/dprint.json
@@ -1,15 +1,9 @@
 {
-  "typescript": {
-  },
-  "json": {
-  },
-  "markdown": {
-  },
-  "excludes": [
-    "**/node_modules",
-    "**/*-lock.json",
-    "/.yarn/**/*"
-  ],
+  "lineWidth": 80,
+  "typescript": {},
+  "json": {},
+  "markdown": {},
+  "excludes": ["**/node_modules", "**/*-lock.json", "/.yarn/**/*"],
   "plugins": [
     "https://plugins.dprint.dev/typescript-0.88.3.wasm",
     "https://plugins.dprint.dev/json-0.19.0.wasm",

diff --git a/scripts/build-service-workers.cjs b/scripts/build-service-workers.cjs
@@ -43,8 +43,8 @@ async function buildServiceWorkers(outDir) {
       sourcemap: IS_DEV ? "inline" : false,
       platform: "browser",
       define: {
-      	__DEV__: String(IS_DEV),
-      }
+        __DEV__: String(IS_DEV),
+      },
     });
   }));
 }

diff --git a/scripts/build.cjs b/scripts/build.cjs
@@ -104,9 +104,9 @@ build()
           if (ev === "addDir") return;
 
           if (
-            fPath.includes("src/assets") &&
-            !fPath.includes("src/assets/js") &&
-            !fPath.includes("src/assets/css")
+            fPath.includes("src/assets")
+            && !fPath.includes("src/assets/js")
+            && !fPath.includes("src/assets/css")
           ) {
             console.log(
               `Asset changed, copying (${path.relative(p("."), fPath)})`,

diff --git a/scripts/tmpl-builder.cjs b/scripts/tmpl-builder.cjs
@@ -9,7 +9,8 @@ const { ExtFilesCtx } = require("./external-files-context.cjs");
 const crypto = require("crypto");
 
 function createHash(data, len) {
-  return crypto.createHash("shake256", { outputLength: len }).update(data).digest("hex");
+  return crypto.createHash("shake256", { outputLength: len }).update(data)
+    .digest("hex");
 }
 
 const IS_DEV = process.argv.includes("--dev");
@@ -53,7 +54,9 @@ module.exports.buildTemplate = async function buildTemplate(template, outDir) {
   const Component = modExports.default;
 
   if (typeof Component !== "function") {
-    throw new Error(`Template ${tsxFilename} does not export a default function.`);
+    throw new Error(
+      `Template ${tsxFilename} does not export a default function.`,
+    );
   }
 
   /** @type {{ contents: string; outFile: string }[]} */
@@ -63,12 +66,18 @@ module.exports.buildTemplate = async function buildTemplate(template, outDir) {
     switch (type) {
       case "css": {
         const fPath = `/assets/css/${hashedName}.css`;
-        registeredExtFiles.push({ contents, outFile: path.join(outDir, fPath) });
+        registeredExtFiles.push({
+          contents,
+          outFile: path.join(outDir, fPath),
+        });
         return fPath;
       }
       case "js": {
         const fPath = `/assets/js/${hashedName}.js`;
-        registeredExtFiles.push({ contents, outFile: path.join(outDir, fPath) });
+        registeredExtFiles.push({
+          contents,
+          outFile: path.join(outDir, fPath),
+        });
         return fPath;
       }
     }
@@ -77,7 +86,11 @@ module.exports.buildTemplate = async function buildTemplate(template, outDir) {
   let html;
   try {
     html = await renderToHtmlAsync(
-      jsx(ExtFilesCtx.Provider, { value: { register: registerExternalFile } }, jsx(Component, {})),
+      jsx(
+        ExtFilesCtx.Provider,
+        { value: { register: registerExternalFile } },
+        jsx(Component, {}),
+      ),
       { pretty: true },
     );
   } catch (e) {

diff --git a/src/components/code-sample.tsx b/src/components/code-sample.tsx
@@ -12,7 +12,10 @@ declare global {
   }
 }
 
-export async function CodeSample(props: JSXTE.PropsWithChildren<{}>, componentApi: ComponentApi) {
+export async function CodeSample(
+  props: JSXTE.PropsWithChildren<{}>,
+  componentApi: ComponentApi,
+) {
   const asString = componentApi.render(<>{props.children}</>, { pretty: true });
   const formatted = (await prettier.format(asString, {
     parser: "html",

diff --git a/src/components/example.tsx b/src/components/example.tsx
@@ -1,7 +1,7 @@
 import { Button, Typography } from "adwavecss";
 import { cls } from "../utils/cls";
-import { url } from "../utils/url";
 import { escapeHtml } from "../utils/escape-html";
+import { url } from "../utils/url";
 
 export function Example(
   props: JSXTE.PropsWithChildren<{
@@ -38,13 +38,11 @@ export function ExampleSection(
               Button.flat,
               Button.square,
             )}
-            onclick={
-              /* js */ `
+            onclick={/* js */ `
               const href = new window.URL(window.location.href);
               href.hash = this.dataset.anchor;
               navigator.clipboard.writeText(href.toString());
-            `
-            }
+            `}
           >
             <img id="link-dark" src={url("assets/link-dark.svg")} />
             <img id="link-light" src={url("assets/link-light.svg")} />

diff --git a/src/components/font-size-selector.client.ts b/src/components/font-size-selector.client.ts
@@ -3,12 +3,15 @@ class FontSizeSelector extends HTMLDivElement {
   previewElement!: HTMLButtonElement;
 
   connectedCallback() {
-    const browserDefault = this.currentFontSize = this.getBrowserDefaultFontSize();
+    const browserDefault = this.currentFontSize = this
+      .getBrowserDefaultFontSize();
     this.loadFromLocalStorage();
 
     const btnDecrease = this.querySelector("#btn-decrease")!;
     const btnIncrease = this.querySelector("#btn-increase")!;
-    this.previewElement = this.querySelector(".font-size-preview") as HTMLButtonElement;
+    this.previewElement = this.querySelector(
+      ".font-size-preview",
+    ) as HTMLButtonElement;
 
     btnDecrease.addEventListener("click", this.handleDecrease);
     btnIncrease.addEventListener("click", this.handleIncrease);
@@ -58,4 +61,6 @@ class FontSizeSelector extends HTMLDivElement {
   };
 }
 
-window.customElements.define("font-size-selector", FontSizeSelector, { extends: "div" });
+window.customElements.define("font-size-selector", FontSizeSelector, {
+  extends: "div",
+});
diff --git a/src/components/theme-switcher.client.ts b/src/components/theme-switcher.client.ts
@@ -12,7 +12,9 @@ class PersistentStorage {
   private static THEME_KEY = "theme";
 
   public static getTheme() {
-    const localStorageTheme = localStorage.getItem(this.THEME_KEY) as Theme | null;
+    const localStorageTheme = localStorage.getItem(this.THEME_KEY) as
+      | Theme
+      | null;
     if (localStorageTheme) {
       return localStorageTheme;
     }
@@ -24,7 +26,9 @@ class PersistentStorage {
 }
 
 function getCurrentTheme(): Theme {
-  const theme = Array.from(document.body.classList.values()).find(c => c.endsWith("theme"));
+  const theme = Array.from(document.body.classList.values()).find(c =>
+    c.endsWith("theme")
+  );
   if (theme) {
     return theme as Theme;
   }

diff --git a/src/layout.tsx b/src/layout.tsx
@@ -25,52 +25,25 @@ export function Layout(
     <html>
       <head>
         <meta charset="utf-8" />
-        <meta
-          http-equiv="x-ua-compatible"
-          content="IE=edge"
-        />
-        <title>{props.title ? `ADWave Docs - ${props.title}` : "ADWave Docs"}</title>
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1"
-        />
-        <Style
-          dirname={__dirname}
-          path="./index.css"
-        />
-        <Style
-          dirname={__dirname}
-          path="../../ADWaveCSS/dist/styles.css"
-        />
-        <Style
-          dirname={__dirname}
-          path="./components/code-sample.css"
-        />
-        <Style
-          dirname={__dirname}
-          path="./components/example.css"
-        />
-        <Style
-          dirname={__dirname}
-          path="./components/font-size-selector.css"
-        />
-        <Style
-          dirname={__dirname}
-          path="./components/navbar.css"
-        />
-        <Style
-          dirname={__dirname}
-          path="./components/theme-switcher.css"
-        />
+        <meta http-equiv="x-ua-compatible" content="IE=edge" />
+        <title>
+          {props.title ? `ADWave Docs - ${props.title}` : "ADWave Docs"}
+        </title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Style dirname={__dirname} path="./index.css" />
+        <Style dirname={__dirname} path="../../adwavecss/dist/styles.css" />
+        <Style dirname={__dirname} path="./components/code-sample.css" />
+        <Style dirname={__dirname} path="./components/example.css" />
+        <Style dirname={__dirname} path="./components/font-size-selector.css" />
+        <Style dirname={__dirname} path="./components/navbar.css" />
+        <Style dirname={__dirname} path="./components/theme-switcher.css" />
         <Script
           dirname={__dirname}
           path="./service-workers/register.client.ts"
           type="iife"
           buildOptions={{
             define: {
-              SERVICE_WORKERS: JSON.stringify([
-                url("request-cache.sw.js"),
-              ]),
+              SERVICE_WORKERS: JSON.stringify([url("request-cache.sw.js")]),
             },
           }}
         />
@@ -89,29 +62,16 @@ export function Layout(
           path="./components/code-sample.client.ts"
           type="iife"
         />
-        <Script
-          package="highlight.js"
-          type="global"
-        />
+        <Script package="highlight.js" type="global" />
         <Script package="adwaveui" type="iife" />
-        <Script
-          dirname={__dirname}
-          path="./htmx.ts"
-          type="iife"
-        />
+        <Script dirname={__dirname} path="./htmx.ts" type="iife" />
       </head>
       <body hx-ext="preload" class={cls(Box.box, Theme.dark)}>
-        <div
-          id="root"
-          class={Box.box}
-        >
+        <div id="root" class={Box.box}>
           <div class="flexbox navbar-container">
             <Navbar activePage={props.activePage} />
           </div>
-          <div
-            id="example-view"
-            class="flexbox"
-          >
+          <div id="example-view" class="flexbox">
             {props.children}
           </div>
         </div>

diff --git a/src/script.tsx b/src/script.tsx
@@ -82,7 +82,10 @@ export type ScriptProps =
     }
   );
 
-export const Script = async (props: ScriptProps, componentApi: ComponentApi) => {
+export const Script = async (
+  props: ScriptProps,
+  componentApi: ComponentApi,
+) => {
   const { type = "module", onLoad = () => {}, buildOptions = {} } = props;
 
   const options: esbuild.BuildOptions = {
@@ -130,7 +133,11 @@ export const Script = async (props: ScriptProps, componentApi: ComponentApi) =>
   contents = `/* ${options.entryPoints[0]} */\n${contents}`;
 
   const extFiles = componentApi.ctx.getOrFail(EFC.ExtFilesCtx);
-  const src = extFiles.register(contents, props.package ?? path.basename(props.path), "js");
+  const src = extFiles.register(
+    contents,
+    props.package ?? path.basename(props.path),
+    "js",
+  );
 
   return (
     <script

diff --git a/src/service-workers/register.client.ts b/src/service-workers/register.client.ts
@@ -2,7 +2,10 @@ declare global {
   const SERVICE_WORKERS: string[];
 }
 
-if ("serviceWorker" in navigator && window.location.hostname.endsWith(".github.io")) {
+if (
+  "serviceWorker" in navigator
+  && window.location.hostname.endsWith(".github.io")
+) {
   window.addEventListener("load", () => {
     SERVICE_WORKERS.forEach((swUrl) => {
       navigator.serviceWorker.register(swUrl).then(registration => {

diff --git a/src/style.tsx b/src/style.tsx
@@ -39,14 +39,20 @@ export const Style = async (
 
   if (result.errors.length > 0) throw new Error(result.errors[0]!.text);
 
-  const contents = `/* ${options.entryPoints[0]} */\n${result.outputFiles![0]!.text.trim()}`;
+  const contents = `/* ${options.entryPoints[0]} */\n${
+    result.outputFiles![0]!.text.trim()
+  }`;
 
   if (props.inline) {
     return <style>{contents}</style>;
   }
 
   const extFiles = componentApi.ctx.getOrFail(EFC.ExtFilesCtx);
-  const src = extFiles.register(contents, props.package ?? path.basename(props.path), "css");
+  const src = extFiles.register(
+    contents,
+    props.package ?? path.basename(props.path),
+    "css",
+  );
 
   return (
     <link

diff --git a/src/templates/example-page/card.tsx b/src/templates/example-page/card.tsx
@@ -15,10 +15,17 @@ export default function CardExample() {
             </div>
           </CodeSample>
         </ExampleSection>
-        <ExampleSection label="Activable Card" description="Hover the mouse over the card to see it change color.">
+        <ExampleSection
+          label="Activable Card"
+          description="Hover the mouse over the card to see it change color."
+        >
           <CodeSample>
             <div class="box" style="padding: 2em">
-              <div class={cls(Card.card, Card.activable)} style="width: 100px; height:100px"></div>
+              <div
+                class={cls(Card.card, Card.activable)}
+                style="width: 100px; height:100px"
+              >
+              </div>
             </div>
           </CodeSample>
         </ExampleSection>

diff --git a/src/templates/example-page/checkbox.tsx b/src/templates/example-page/checkbox.tsx
@@ -16,8 +16,17 @@ export default function CheckboxExample() {
         <ExampleSection label="Disabled Checkbox">
           <CodeSample>
             <div style="display: grid; grid-template-columns: 1fr 1fr; justify-items: center;">
-              <input type="checkbox" class={cls(Checkbox.checkbox, Checkbox.disabled)} disabled />
-              <input type="checkbox" class={cls(Checkbox.checkbox, Checkbox.disabled)} disabled checked />
+              <input
+                type="checkbox"
+                class={cls(Checkbox.checkbox, Checkbox.disabled)}
+                disabled
+              />
+              <input
+                type="checkbox"
+                class={cls(Checkbox.checkbox, Checkbox.disabled)}
+                disabled
+                checked
+              />
             </div>
           </CodeSample>
         </ExampleSection>