init new docs, major lint/tsconfig refactor (#42)

.changeset/slow-avocados-check.md

@@ -0,0 +1,6 @@
+---
+"docs": patch
+"web": patch
+---
+
+init new docs, major lint/tsconfig refactor

.eslintrc.js

@@ -0,0 +1,15 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["eslint-config-custom/library.js"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  root: true,
+  parserOptions: {
+    project: [
+      "./tsconfig.json",
+      "./packages/*/tsconfig.json",
+      "./apps/*/tsconfig.json",
+    ],
+  },
+};

.github/workflows/publish_pages.yml

@@ -43,7 +43,7 @@ jobs:
       - name: Build Docs
         run: pnpm run build --filter docs
       - name: Build Web
-        run: pnpm run build --filter web && mv ./apps/docs/dist ./apps/web/out/docs
+        run: pnpm run build --filter web && mv ./apps/docs/dist ./apps/web/out/legacy/docs
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact

README.md

@@ -6,14 +6,10 @@
 
 ## Table of Contents
 
-<!--toc:start-->
-
 - [About this project](#about-this-project)
 - [Packages](#packages)
 - [Installation](#installation)
 
-<!--toc:end-->
-
 ---
 
 ## About this project
@@ -23,13 +19,13 @@ WebGPU-Kit aims to provide varying levels of abstraction around the webGPU spec.
 The [core] package is intended to be a small wrapper around webGPU to reduce boilerplate and
 to make construction and execution of pipelines more straight-forward.
 
-The `forward` package is intended to be yet another small wrapper around the core package that
+The forward package is intended to be yet another small wrapper around the core package that
 exposes an API for a forward rendering solution akin to Three.js.
 
 Other packages are planned to expose additional APIs:
 
-- `shaders`: contains reusable, configurable wgsl shader chunks
-- `react`: contains react bindings for the core/forward packages
+- shaders: contains reusable, configurable wgsl shader chunks
+- react: contains react bindings for the core/forward packages
 
 ## Packages
 

apps/docs/package.json

@@ -3,13 +3,19 @@
   "version": "0.0.4",
   "description": "Documentation for the webgpu-kit packages",
   "private": true,
+  "files": [
+    "dist"
+  ],
+  "main": "dist/out.json",
   "scripts": {
     "build": "typedoc"
   },
   "devDependencies": {
     "typedoc-plugin-resolve-external": "^0.2.1",
     "@webgpu/types": "0.1.34",
-    "tsconfig": "*",
+    "@webgpu-kit/core": "workspace:*",
+    "tsconfig": "workspace:*",
+    "typedoc": "npm:@jberesford/typedoc@0.25.10",
     "typescript": "^5.2.2"
   }
 }

apps/docs/typedoc.base.json

@@ -1,5 +1,12 @@
 {
   "$schema": "https://typedoc.org/schema.json",
   "plugin": ["typedoc-plugin-resolve-external"],
+  "entryPointStrategy": "resolve",
+  "categorizeByGroup": true,
+  "excludeInternal": true,
+  "externalModulemap": {
+    "@webgpu/types": "https://gpuweb.github.io/types/"
+  },
+  "exclude": ["**/node_modules/**/*", "**/*.test.ts"],
   "logLevel": "Verbose"
 }

apps/docs/typedoc.json

@@ -1,17 +1,10 @@
 {
-  "extends": "./typedoc.base.json",
+  "$schema": "https://typedoc.org/schema.json",
+  "extends": ["./typedoc.base.json"],
   "name": "webgpu-kit",
   "out": "./dist",
-  "entryPoints": ["../../packages/core/src/*.ts"],
-  "entryPointStrategy": "resolve",
-  "categorizeByGroup": true,
-  "excludeInternal": true,
-  "exclude": [
-    "**/node_modules/**/*",
-    "**/*.test.ts",
-    "../../packages/core/src/index.ts"
-  ],
-  "externalModulemap": {
-    "@webgpu/types": "https://gpuweb.github.io/types/"
-  }
+  "json": "dist/out.json",
+  "entryPoints": ["../../packages/core/", "../../packages/shaders/"],
+  "entryPointStrategy": "packages",
+  "readme": "../../README.md"
 }

apps/web/.eslintrc.js

@@ -1,9 +1,15 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["custom/next"],
+  root: true,
+  extends: ["eslint-config-custom/next.js"],
+  ignorePatterns: ["next.config.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
   rules: {
     "no-bitwise": "off",
     "no-undef": "off",
     "no-unsafe-call": "off",
   },
-  root: true,
 };

apps/web/app/docs/[type]/[id]/page.tsx

@@ -0,0 +1,42 @@
+import { notFound } from "next/navigation";
+import { allGroups } from "../../reflection-utils";
+import { ClassView } from "./views/class";
+import { FunctionView } from "./views/function";
+import { ModuleView } from "./views/module";
+import { TypeView } from "./views/type";
+
+export type ViewParams = {
+  type: string;
+  id: string;
+};
+
+export type View = (props: { params: ViewParams }) => JSX.Element;
+
+const views: Record<string, View | undefined> = {
+  classes: ClassView,
+  modules: ModuleView,
+  types: TypeView,
+  functions: FunctionView,
+};
+
+export default function Page(props: { params: ViewParams }): JSX.Element {
+  const { type } = props.params;
+  const View = views[type];
+
+  if (!View) {
+    console.error(`No view for type: ${type}`);
+    notFound();
+  }
+
+  return (
+    <div>
+      <View params={props.params} />
+    </div>
+  );
+}
+
+export function generateStaticParams(): ViewParams[] {
+  return Array.from(allGroups)
+    .map(([type, ids]) => ids.map((id) => ({ type, id })))
+    .flat();
+}

apps/web/app/docs/[type]/[id]/views/class.module.scss

@@ -0,0 +1,7 @@
+@use "./item.module.scss";
+
+main.class {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}

apps/web/app/docs/[type]/[id]/views/class.tsx

@@ -0,0 +1,74 @@
+import {
+  getReflectionById,
+  parseConstructorSignatures,
+  parseMethodsSignatures,
+  parseProperties,
+} from "@/app/docs/reflection-utils";
+import { ViewParams } from "../page";
+import { CommentContent } from "@/app/docs/components/comment-content";
+import { Signature } from "@/app/docs/components/signature";
+import { Property } from "@/app/docs/components/property";
+import styles from "./class.module.scss";
+import { Item } from "./item";
+
+export function ClassView(props: { params: ViewParams }): JSX.Element {
+  const { id } = props.params;
+  const reflection = getReflectionById(parseInt(id));
+
+  if (!reflection) {
+    throw new Error(`Reflection not found for id: ${id}`);
+  }
+
+  const { comment } = reflection;
+
+  const ctorSignatures = parseConstructorSignatures(reflection);
+  const properties = parseProperties(reflection);
+  const methodSignatures = parseMethodsSignatures(reflection);
+
+  return (
+    <main className={styles.class}>
+      <div>
+        <h1>{reflection.name}</h1>
+        {comment !== undefined && <CommentContent comment={comment} />}
+      </div>
+
+      {ctorSignatures.length > 0 ? (
+        <div className={styles.group}>
+          <h3>Constructors</h3>
+
+          {ctorSignatures.map((signature) => (
+            <Item key={signature.id} className={styles.item}>
+              <Signature signature={signature} />
+            </Item>
+          ))}
+        </div>
+      ) : null}
+
+      {properties.length > 0 ? (
+        <div className={styles.group}>
+          <h3>Properties</h3>
+
+          {properties.map((reflection) => (
+            <Item key={reflection.id} className={styles.item}>
+              <h3>{reflection.name}</h3>
+              <Property reflection={reflection} />
+            </Item>
+          ))}
+        </div>
+      ) : null}
+
+      {methodSignatures.length > 0 ? (
+        <div className={styles.group}>
+          <h3>Methods</h3>
+
+          {methodSignatures.map((signature) => (
+            <Item key={signature.id} className={styles.item}>
+              <h3>{signature.name}</h3>
+              <Signature signature={signature} showName />
+            </Item>
+          ))}
+        </div>
+      ) : null}
+    </main>
+  );
+}

apps/web/app/docs/[type]/[id]/views/function.module.scss

@@ -0,0 +1 @@
+@use "./item.module.scss";

apps/web/app/docs/[type]/[id]/views/function.tsx

@@ -0,0 +1,40 @@
+import { ReflectionKind } from "@/app/docs/reflection-utils";
+import {
+  getReflectionById,
+  getReflectionsByKind,
+} from "../../../reflection-utils";
+import { Signature } from "../../../components/signature";
+import styles from "./function.module.scss";
+import { Item } from "./item";
+
+type Params = {
+  id: string;
+};
+
+export function FunctionView(props: { params: Params }): JSX.Element {
+  const reflection = getReflectionById(parseInt(props.params.id));
+
+  if (reflection === undefined) {
+    throw new Error(`Reflection not found for id: ${props.params.id}`);
+  }
+
+  const signatures = reflection.signatures || [];
+
+  return (
+    <div className={styles.group}>
+      <h1>{reflection.name}</h1>
+
+      {signatures.map((signature) => (
+        <Item key={signature.id} className={styles.item}>
+          <Signature signature={signature} />
+        </Item>
+      ))}
+    </div>
+  );
+}
+
+export function generateStaticParams(): Params[] {
+  return getReflectionsByKind(ReflectionKind.Module).map((reflection) => ({
+    id: reflection.id.toString(),
+  }));
+}

apps/web/app/docs/[type]/[id]/views/item.module.scss

@@ -0,0 +1,14 @@
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  border-left: solid 1px #333;
+  padding-left: 1rem;
+}

apps/web/app/docs/[type]/[id]/views/item.tsx

@@ -0,0 +1,9 @@
+import styles from "./item.module.scss";
+
+export function Item(props: JSX.IntrinsicElements["div"]): JSX.Element {
+  const { className, ...rest } = props;
+
+  const classes = `${className} ${styles.item}`;
+
+  return <div className={classes} {...rest} />;
+}

apps/web/app/docs/[type]/[id]/views/module.module.scss

@@ -0,0 +1,41 @@
+.module {
+  padding-top: 1rem;
+
+  h1 {
+    font-size: 2.5rem;
+  }
+
+  .group {
+    margin: 1.5rem 0;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .groupItem {
+      display: flex;
+      align-items: center;
+      margin: 0.5rem 0;
+      gap: 0.5rem;
+    }
+
+    h2 {
+      font-size: 1.85rem;
+    }
+
+    h3 {
+      opacity: 0.8;
+      font-weight: 400;
+    }
+
+    h4 {
+      font-size: 0.8rem;
+      font-weight: 400;
+      color: white;
+      border: 1px solid #555;
+      border-radius: 10px;
+      padding: 0.25em 0.5em;
+    }
+  }
+}