chore: update stencil version, fix breaks, enable prerendering

Author: harrysolovay

.eslintrc

@@ -38,7 +38,7 @@
         "watch": "multiline"
       }
     ],
-    "@stencil/element-type": 2,
+    "@stencil/element-type": 0,
     "@stencil/host-data-deprecated": 2,
     "@stencil/methods-must-be-public": 2,
     "@stencil/no-unused-watch": 2,

capi/package.json

@@ -12,7 +12,7 @@
     "fast-glob": "^3.1.1",
     "front-matter": "^3.1.0",
     "fs-extra": "^8.1.0",
-    "marked": "^0.8.0",
+    "marked": "0.8.0",
     "parse5": "^5.1.1",
     "prismjs": "^1.19.0",
     "traverse": "^0.6.6",

capi/src/write/get-page.ts

@@ -19,10 +19,10 @@ export async function getPage(config: t.Config, ctx: t.Ctx): Promise<void> {
           .writeLine(`import * as t from "./types";`)
           .blankLine()
           .writeLine(
-            "export async function getPage(route: string): Promise<t.Page> {",
+            "export function getPage(route: string): Promise<t.Page> | undefined {",
           )
-          .writeLine(`  return (() => {`)
-          .writeLine("    switch(route) {");
+          .writeLine(`  const pending = (() => {`)
+          .writeLine("    switch (route) {");
 
         for (const [srcPath, pathDeduction] of ctx.pathDeductionBySrcPath) {
           if (pathDeduction.route) {
@@ -39,7 +39,12 @@ export async function getPage(config: t.Config, ctx: t.Ctx): Promise<void> {
 
         writer
           .writeLine("    }")
-          .writeLine(`  })().then((response) => response.json());`)
+          .writeLine(`  })();`)
+          .writeLine(`  return pending`)
+          .writeLine(
+            `    ? pending.then((response) => response.json()) as Promise<t.Page>`,
+          )
+          .writeLine(`    : undefined;`)
           .writeLine("}");
       },
       {overwrite: true},

capi/src/write/stencil-renderer.ts

@@ -12,7 +12,7 @@ export async function stencilRenderer(config: t.Config): Promise<void> {
  */
     
 import {h} from "@stencil/core";
-import {VNode} from "@stencil/core/dist/declarations";
+import {VNode} from "@stencil/core";
 import {OrText, HyperscriptNode, Props} from "./types";
 
 export type HyperscriptResult = OrText<VNode>;

client/src/amplify-ui/responsive-grid/responsive-grid.tsx

@@ -17,6 +17,7 @@ export class AmplifyResponsiveGrid {
 
   @State() computedStyle?: string;
 
+  // @ts-ignore
   @Watch("columnCountByBreakpoint")
   computeStyle() {
     this.computedStyle = cx(

client/src/amplify-ui/sidebar-layout/sidebar-layout-sidebar/sidebar-layout-sidebar.tsx

@@ -15,7 +15,9 @@ export class AmplifySidebarLayoutSidebar {
   ref?: HTMLElement | null;
   setRef = (ref: HTMLElement | null) => (this.ref = ref);
 
+  // @ts-ignore
   @Listen("mousedown", {target: "window"})
+  // @ts-ignore
   @Listen("touchstart", {target: "window"})
   clickListener(e: Event) {
     if (this.inView) {

client/src/amplify-ui/toc/toc-content/toc-content.tsx

@@ -4,7 +4,7 @@ import {SetContent} from "../toc.types";
 
 @Component({tag: "amplify-toc-contents", shadow: false})
 export class AmplifyTOCContent {
-  @Element() content?: HTMLAmplifyTocContentsElement;
+  @Element() content?: HTMLElement;
   /**
    * Sets `content` prop within parent `amplify-toc-provider`,
    * which propogates into the provider's child `amplify-toc` instances

client/src/amplify-ui/toc/toc-provider/toc-provider.tsx

@@ -20,6 +20,7 @@ export class AmplifyTOCProvider {
       this.content.querySelectorAll("h2, h3"),
     ).filter((e) => headingIsVisible(e)) as HTMLElement[]);
 
+  // @ts-ignore
   @Watch("content")
   bindToContent() {
     this.setElements();

client/src/amplify-ui/toc/toc/toc.tsx

@@ -24,7 +24,9 @@ export class AmplifyTOC {
   @State() activeLinkI?: number;
   previous?: number;
 
+  // @ts-ignore
   @Listen("scroll", {target: "window"})
+  // @ts-ignore
   @Listen("resize", {target: "window"})
   setActiveLink() {
     if (this.elements) {