diff --git a/.gitignore b/.gitignore index db0c3e8198af..dbe67409fe08 100644 --- a/.gitignore +++ b/.gitignore @@ -30,24 +30,16 @@ yarn-error.log* /kumascript/coverage/ /kumascript/node_modules/ /testing/node_modules/ -/build/*.js /build/*.js.map /client/build -/client/src/**/*.js /client/src/**/*.js.map -/content/*.js /content/*.js.map -/filecheck/*.js /filecheck/*.js.map -/kumascript/*.js /kumascript/*.js.map -/markdown/*.js /markdown/*.js.map -/server/*.js /server/*.js.map /ssr/dist/ /ssr/*.js.map -/tool/*.js /tool/*.js.map # These are an effect of the dumper still producing all locales diff --git a/client/config/webpack.config.js b/client/config/webpack.config.js index 61670a3174a2..f6d1b7375c4a 100644 --- a/client/config/webpack.config.js +++ b/client/config/webpack.config.js @@ -1,3 +1,4 @@ +// @ts-nocheck import path from "node:path"; import { fileURLToPath } from "node:url"; diff --git a/client/package.json b/client/package.json index 87fcd41de3fd..9c8f2ac86ad8 100644 --- a/client/package.json +++ b/client/package.json @@ -24,14 +24,20 @@ ] }, "eslintConfig": { - "extends": "react-app", + "extends": [ + "react-app", + "plugin:wc/best-practice", + "plugin:lit/all" + ], "rules": { + "lit/no-template-map": "off", "react/jsx-no-target-blank": [ "error", { "allowReferrer": true } - ] + ], + "wc/guard-super-call": "off" } }, "jest": { diff --git a/client/pwa/webpack.config.js b/client/pwa/webpack.config.js index 33c7f7fa4a4d..8663fa8840bd 100644 --- a/client/pwa/webpack.config.js +++ b/client/pwa/webpack.config.js @@ -1,3 +1,4 @@ +// @ts-nocheck import { fileURLToPath } from "node:url"; import { execSync } from "node:child_process"; import webpack from "webpack"; diff --git a/client/src/community/contributor-list.ts b/client/src/community/contributor-list.js similarity index 78% rename from client/src/community/contributor-list.ts rename to client/src/community/contributor-list.js index 79cc1d0143b4..7bb9da45a948 100644 --- a/client/src/community/contributor-list.ts +++ b/client/src/community/contributor-list.js @@ -1,18 +1,10 @@ import { LitElement, html } from "lit"; -import { customElement } from "lit/decorators.js"; import styles from "./contributor-list.scss?css" with { type: "css" }; -interface ContributorData { - name: string; - github: string; - org?: string; -} +/** @import { ContributorData } from "./types" */ -@customElement("contributor-list") export class ContributorList extends LitElement { - _contributors: ContributorData[] = []; - static properties = { _contributors: { state: true }, }; @@ -21,8 +13,14 @@ export class ContributorList extends LitElement { constructor() { super(); + /** @type {ContributorData[]} */ + this._contributors = []; + } + + _onChildrenChanged() { const contributorList = this.querySelector("ul"); - const randomContributors: ContributorData[] = []; + /** @type {ContributorData[]} */ + const randomContributors = []; if (contributorList) { const contributors = [...contributorList.querySelectorAll("li")]; for (let index = 0; index < 8; index++) { @@ -47,6 +45,16 @@ export class ContributorList extends LitElement { } } + connectedCallback() { + super.connectedCallback(); + this._onChildrenChanged(); + new MutationObserver(() => this._onChildrenChanged()).observe(this, { + subtree: true, + childList: true, + characterData: true, + }); + } + render() { return html`
@@ -84,7 +92,7 @@ export class ContributorList extends LitElement { ?.split("/") .slice(-1)}`; return html`
  • - + (array: Array) { +customElements.define("contributor-list", ContributorList); + +/** + * @template T + * @param {Array} array + */ +function popRandom(array) { const i = Math.floor(Math.random() * array.length); // mutate the array: return array.splice(i, 1)[0]; diff --git a/client/src/community/types.d.ts b/client/src/community/types.d.ts new file mode 100644 index 000000000000..7fb5a60a340b --- /dev/null +++ b/client/src/community/types.d.ts @@ -0,0 +1,5 @@ +export interface ContributorData { + name: string; + github: string; + org?: string; +} diff --git a/client/src/curriculum/scrim-inline.ts b/client/src/curriculum/scrim-inline.js similarity index 72% rename from client/src/curriculum/scrim-inline.ts rename to client/src/curriculum/scrim-inline.js index 7bab646ab3bf..894e7d529599 100644 --- a/client/src/curriculum/scrim-inline.ts +++ b/client/src/curriculum/scrim-inline.js @@ -1,41 +1,53 @@ -import { html, LitElement, PropertyValues } from "lit"; -import { customElement } from "lit/decorators.js"; +import { html, LitElement, nothing } from "lit"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; -import { StyleInfo, styleMap } from "lit/directives/style-map.js"; +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"; +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"; -@customElement("scrim-inline") class ScrimInline extends LitElement { - url?: string; - _fullUrl?: string; - _scrimId?: string; - - img?: string; - _imgStyle: StyleInfo = {}; - - scrimTitle?: string; - - _fullscreen = false; - _scrimLoaded = false; - static properties = { url: { type: String }, img: { type: String }, - scrimTitle: { type: String }, + scrimTitle: { type: String, attribute: "scrimtitle" }, _fullscreen: { state: true }, _scrimLoaded: { state: true }, }; static styles = styles; - willUpdate(changedProperties: PropertyValues) { + constructor() { + super(); + /** @type {string | undefined} */ + this.url = undefined; + /** @type {string | undefined} */ + this._fullUrl = undefined; + /** @type {string | undefined} */ + this._scrimId = undefined; + + /** @type {string | undefined} */ + this.img = undefined; + /** @type {import("lit/directives/style-map.js").StyleInfo} */ + this._imgStyle = {}; + + /** @type {string | undefined} */ + this.scrimTitle = undefined; + + /** @type {boolean} */ + this._fullscreen = false; + /** @type {boolean} */ + this._scrimLoaded = false; + } + + /** + * @param {import("lit").PropertyValues} changedProperties + */ + willUpdate(changedProperties) { if (changedProperties.has("url")) { if (this.url) { const url = new URL(this.url); @@ -60,7 +72,7 @@ class ScrimInline extends LitElement { render() { if (!this.url || !this._fullUrl) { - return html``; + return nothing; } return html` @@ -70,13 +82,13 @@ class ScrimInline extends LitElement { Clicking will load content from scrimba.com ` : html` @@ -111,7 +123,7 @@ class ScrimInline extends LitElement {
    • ` : null}