chore(lit): move into separate folder and make tsconfig stricter (#12398

)

client/src/about/index.tsx

@@ -7,7 +7,7 @@ import { WRITER_MODE } from "../env";
 import { Prose } from "../document/ingredients/prose";
 
 import "./index.scss";
-import "./custom-elements";
+import "../lit/about";
 import { useGleanClick } from "../telemetry/glean-context";
 import { ABOUT } from "../telemetry/constants";
 

client/src/community/index.tsx

@@ -11,7 +11,7 @@ export function Community(appProps: HydrationData<any, AboutDoc>) {
   const doc = useAboutDoc(appProps);
 
   useEffect(() => {
-    import("./contributor-list");
+    import("../lit/community/contributor-list");
   }, []);
 
   return (

client/src/curriculum/landing.tsx

@@ -20,7 +20,7 @@ import scrimBg from "../assets/curriculum/landing-scrim.png";
 import { useGleanClick } from "../telemetry/glean-context";
 import { CURRICULUM } from "../telemetry/constants";
 
-const ScrimInline = lazy(() => import("./scrim-inline"));
+const ScrimInline = lazy(() => import("../lit/curriculum/scrim-inline"));
 
 export function CurriculumLanding(appProps: HydrationData<any, CurriculumDoc>) {
   const doc = useCurriculumDoc(appProps as CurriculumData);

client/src/curriculum/module.tsx

@@ -14,7 +14,7 @@ export function CurriculumModule(props: HydrationData<any, CurriculumDoc>) {
   const doc = useCurriculumDoc(props as CurriculumData);
 
   useEffect(() => {
-    import("./scrim-inline");
+    import("../lit/curriculum/scrim-inline");
   }, []);
 
   return (

client/src/community/contributor-list.scss → client/src/lit/community/contributor-list.scss

@@ -1,4 +1,4 @@
-@use "../ui/vars" as *;
+@use "../../ui/vars" as *;
 
 * {
   box-sizing: border-box;

client/src/curriculum/scrim-inline.global.css → client/src/lit/curriculum/scrim-inline.global.css

@@ -4,5 +4,5 @@
   font-display: block;
   src:
     local("BarlowCondensed-SemiBold"),
-    url("../assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
+    url("../../assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
 }

client/src/curriculum/scrim-inline.js → client/src/lit/curriculum/scrim-inline.js

@@ -4,13 +4,13 @@ import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createComponent } from "@lit/react";
 import React from "react";
-import { CURRICULUM } from "../telemetry/constants.ts";
+import { CURRICULUM } from "../../telemetry/constants.ts";
 
 import "./scrim-inline.global.css";
 import styles from "./scrim-inline.scss?css" with { type: "css" };
-import playSvg from "../assets/curriculum/scrim-play.svg?raw";
+import playSvg from "../../assets/curriculum/scrim-play.svg?raw";
 
-class ScrimInline extends LitElement {
+export class ScrimInline extends LitElement {
   static properties = {
     url: { type: String },
     img: { type: String },

client/src/curriculum/scrim-inline.scss → client/src/lit/curriculum/scrim-inline.scss

@@ -88,16 +88,16 @@ dialog {
 
 .toggle {
   &.enter {
-    mask-image: url("../assets/icons/fullscreen-enter.svg");
+    mask-image: url("../../assets/icons/fullscreen-enter.svg");
   }
 
   &.exit {
-    mask-image: url("../assets/icons/cancel.svg");
+    mask-image: url("../../assets/icons/cancel.svg");
   }
 }
 
 .external {
-  mask-image: url("../assets/icons/external.svg");
+  mask-image: url("../../assets/icons/external.svg");
   mask-size: 75%;
 }
 
@@ -109,9 +109,9 @@ dialog {
 
 .background {
   background-color: #453c78;
-  background-image: url("../assets/curriculum/scrimba-logo.svg"),
-    url("../assets/curriculum/scrim-hexagons.svg"),
-    url("../assets/curriculum/scrim-bg.png");
+  background-image: url("../../assets/curriculum/scrimba-logo.svg"),
+    url("../../assets/curriculum/scrim-hexagons.svg"),
+    url("../../assets/curriculum/scrim-bg.png");
   background-position:
     1.5em 1.5em,
     right,

client/src/lit/globals.d.ts

@@ -0,0 +1,14 @@
+import { MDNImageHistory, TeamMember } from "./about";
+import { ContributorList } from "./community/contributor-list";
+import { ScrimInline } from "./curriculum/scrim-inline";
+import { PlayConsole } from "./play/console";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mdn-image-history": MDNImageHistory;
+    "team-member": TeamMember;
+    "contributor-list": ContributorList;
+    "scrim-inline": ScrimInline;
+    "play-console": PlayConsole;
+  }
+}

client/src/lit/modules.d.ts

@@ -0,0 +1,12 @@
+// once https://github.com/microsoft/TypeScript/issues/46135 is fixed
+// we'll be able to do something like:
+// declare module '*' with {type: 'css'} {
+declare module "*?css" {
+  const sheet: CSSStyleSheet;
+  export default sheet;
+}
+
+declare module "*?raw" {
+  const src: string;
+  export default src;
+}

client/src/lit/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "es2021"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ES2020",
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ]
+  },
+  "include": ["**/*"]
+}

client/src/playground/index.tsx

@@ -21,10 +21,10 @@ import {
 import "./index.scss";
 import { PLAYGROUND_BASE_HOST } from "../env";
 import { FlagForm, ShareForm } from "./forms";
-import { ReactPlayConsole } from "./console";
+import { ReactPlayConsole } from "../lit/play/console";
 import { useGleanClick } from "../telemetry/glean-context";
 import { PLAYGROUND } from "../telemetry/constants";
-import type { VConsole } from "./types";
+import type { VConsole } from "../lit/play/types";
 
 const HTML_DEFAULT = "";
 const CSS_DEFAULT = "";

client/src/plus/collections/frequently-viewed.tsx

@@ -78,8 +78,13 @@ const sortByVisitsThenTimestampsDesc = (
   //'Each timestamp represents one visit. The first is the most recent visit.
   if (first.timestamps.length > second.timestamps.length) return -1;
   if (first.timestamps.length < second.timestamps.length) return 1;
-  if (first.timestamps[0] < second.timestamps[0]) return 1;
-  if (first.timestamps[0] > second.timestamps[0]) return -1;
+  if (
+    typeof first.timestamps[0] !== "undefined" &&
+    typeof second.timestamps[0] !== "undefined"
+  ) {
+    if (first.timestamps[0] < second.timestamps[0]) return 1;
+    if (first.timestamps[0] > second.timestamps[0]) return -1;
+  }
   return 0;
 };
 
@@ -98,7 +103,7 @@ function getNextFrequentlyViewedSerial(
 export function useFrequentlyViewed(
   limit: number = 0,
   offset: number = 10,
-  setEnd?: (bool) => void
+  setEnd?: (bool: boolean) => void
 ): FrequentlyViewedCollection {
   const [collection, setCollection] = useState<FrequentlyViewedCollection>({
     article_count: 0,
@@ -130,7 +135,7 @@ export function useFrequentlyViewed(
         ...c,
         article_count: freqViewed.length,
         items: paged,
-        updated_at: freqViewed[0]
+        updated_at: freqViewed[0]?.timestamps[0]
           ? new Date(freqViewed[0].timestamps[0]).toISOString()
           : new Date().toISOString(),
       };
@@ -208,12 +213,12 @@ export function useIncrementFrequentlyViewed(doc: Doc | undefined) {
 
     let frequentlyViewed = getFrequentlyViewed();
 
-    const index = frequentlyViewed.findIndex(
+    const foundEntry = frequentlyViewed.find(
       (entry) => entry.url === doc.mdn_url
     );
 
-    if (index !== -1) {
-      frequentlyViewed[index].timestamps.unshift(Date.now());
+    if (foundEntry) {
+      foundEntry.timestamps.unshift(Date.now());
     } else {
       const newEntry: FrequentlyViewedEntry = {
         serial: getNextFrequentlyViewedSerial(frequentlyViewed),
@@ -236,7 +241,7 @@ export function useIncrementFrequentlyViewed(doc: Doc | undefined) {
   }, [user?.isAuthenticated, doc]);
 }
 
-const filterFrequentlyViewed = (frequentlyViewed) => {
+const filterFrequentlyViewed = (frequentlyViewed: FrequentlyViewedEntry[]) => {
   //1. Remove timestamps older than 30 days.
   //2. Filter all values with no remaining timestamps
   return frequentlyViewed

client/src/react-app.d.ts

@@ -78,39 +78,3 @@ declare module "*.svg" {
   const src: string;
   export default src;
 }
-
-declare module "*?raw" {
-  const src: string;
-  export default src;
-}
-
-// once https://github.com/microsoft/TypeScript/issues/46135 is fixed
-// we'll be able to do something like:
-// declare module '*' with {type: 'css'} {
-declare module "*?css" {
-  const sheet: CSSStyleSheet;
-  export default sheet;
-}
-
-// once https://github.com/microsoft/TypeScript/issues/46135 is fixed
-// we'll be able to do something like:
-// declare module '*' with {type: 'css'} {
-declare module "*?css" {
-  const sheet: CSSStyleSheet;
-  export default sheet;
-}
-
-declare module "*.module.css" {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module "*.module.scss" {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module "*.module.sass" {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}

client/src/settings/mdn-worker.tsx

@@ -35,7 +35,7 @@ export class MDNWorker {
     this.timeout = setTimeout(() => this.autoUpdate(), 60 * 60 * 1000);
   }
 
-  messageHandler(event) {
+  messageHandler(event: MessageEvent) {
     switch (event.data.type) {
       case "pong":
         console.log("pong");

client/src/telemetry/glean-context.tsx

@@ -78,8 +78,8 @@ function glean(): GleanAnalytics {
   if (typeof window === "undefined" || !GLEAN_ENABLED) {
     //SSR return noop.
     return {
-      page: (page: PageProps) => () => {},
-      click: (element: ElementClickedProps) => {},
+      page: () => () => {},
+      click: () => {},
     };
   }
   const userIsOptedOut = document.cookie
@@ -114,8 +114,13 @@ function glean(): GleanAnalytics {
       if (page.isBaseline) {
         pageMetric.isBaseline.set(page.isBaseline);
       }
-      for (const param in page.utm) {
-        pageMetric.utm[param].set(page.utm[param]);
+      for (const param of Object.keys(page.utm) as Array<
+        keyof typeof page.utm
+      >) {
+        const value = page.utm[param];
+        if (value) {
+          pageMetric.utm[param]?.set(value);
+        }
       }
       pageMetric.httpStatus.set(page.httpStatus);
       if (page.geo) {

client/src/user-context.tsx

@@ -121,8 +121,8 @@ function getSessionStorageData() {
     }
   } catch (error: any) {
     console.warn("sessionStorage.getItem didn't work", error.toString());
-    return undefined;
   }
+  return undefined;
 }
 
 export function cleanupUserData() {
@@ -184,7 +184,7 @@ function setNoPlacementFlag(noAds: boolean) {
 export function UserDataProvider(props: { children: React.ReactNode }) {
   const { data, error, isLoading, mutate } = useSWR<User | null, Error | null>(
     DISABLE_AUTH ? null : "/api/v1/whoami",
-    async (url) => {
+    async (url: string) => {
       const response = await fetch(url);
       if (!response.ok) {
         removeSessionStorageData();

client/tsconfig.json

@@ -19,13 +19,7 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "ES2020",
-    "plugins": [
-      {
-        "name": "ts-lit-plugin",
-        "strict": true
-      }
-    ]
+    "target": "ES2020"
   },
   "include": ["src"]
 }