@wyndlass/app-sdk 0.0.0 → 1.1.0

package/templates/vanilla/src/app.ts

@@ -0,0 +1,59 @@
+// __APP_NAME__: a heading and the time on one page, the weather on the next, built on Wyndlass's app SDK.
+// Everything it draws comes from the layout's clock (now()), so the designer's seek and pause show the right moment.
+import { WyndlassApp, color, contextOf, data, kept, type DataAnswer, type weather } from "@wyndlass/app-sdk";
+import css from "./app.css";
+
+/** How long each of the two pages shows. */
+const PAGE_MS = 8_000;
+/** How often the weather is asked for again. */
+const EVERY_MS = 10 * 60_000;
+
+export default class App extends WyndlassApp {
+  #pages: HTMLElement[] = [];
+  #heading!: HTMLElement;
+  #time!: HTMLElement;
+  #weather!: HTMLElement;
+  #answer?: DataAnswer<weather.Weather>;
+  #askedAt = -Infinity;
+  #format?: Intl.DateTimeFormat;
+
+  protected mount() {
+    this.css(css);
+    this.style.setProperty("--accent", color(this.prop("accent", "#4f8cff"), "#4f8cff"));
+    this.root.innerHTML = `<section class="page"><h1></h1><time></time></section><section class="page" hidden><div data-weather></div></section>`;
+    this.#pages = [...this.root.querySelectorAll<HTMLElement>(".page")];
+    this.#heading = this.root.querySelector("h1")!;
+    this.#time = this.root.querySelector("time")!;
+    this.#weather = this.root.querySelector("[data-weather]")!;
+    this.#heading.textContent = this.prop("heading", "Good morning");
+    this.#format = new Intl.DateTimeFormat(this.locale, { timeZone: this.timeZone, hour: "numeric", minute: "2-digit", ...(this.prop("seconds", false) ? { second: "2-digit" } : {}) });
+    // The answer the screen kept, at once: the app is ready without waiting for the network.
+    this.#answer = kept<weather.Weather>(this, "weather", this.#params());
+    if (this.#answer) this.ready();
+  }
+
+  /** The weather for the screen's place, or Winnipeg's where there is none (the designer's sample). */
+  #params() {
+    const place = contextOf(this)?.place ?? { lat: 49.9, lon: -97.14 };
+    return { lat: place.lat, lon: place.lon, units: this.prop("units", "metric") };
+  }
+
+  protected draw(epochMs: number) {
+    if (epochMs - this.#askedAt >= EVERY_MS) {
+      this.#askedAt = epochMs;
+      data<weather.Weather>(this, "weather", this.#params())
+        .then(answer => { this.#answer = answer; this.update(this.now()); }, () => undefined)
+        .finally(() => this.ready());
+    }
+    const page = Math.floor(Math.max(0, epochMs - this.startedAt()) / PAGE_MS) % 2;
+    this.#pages.forEach((p, i) => { p.hidden = i !== page; });
+    this.#time.textContent = this.#format!.format(epochMs);
+    const w = this.#answer?.data;
+    this.#weather.innerHTML = w
+      ? `<div class="temperature">${Math.round(w.current.temperature)}°${w.units === "imperial" ? "F" : "C"}</div><div class="condition">${w.current.condition.replace(/-/g, " ")}</div>`
+      : `<div class="none">The weather is on its way.</div>`;
+  }
+
+  /** Two pages of PAGE_MS each, for a layout that turns its enter and exit with them. */
+  paging() { return { count: 2, ms: PAGE_MS }; }
+}

package/templates/vanilla/src/env.d.ts

@@ -0,0 +1,13 @@
+// A CSS file the source imports is its text, for css(): pack bundles it so.
+declare module "*.css" {
+  const css: string;
+  export default css;
+}
+
+// An image the source imports is a data URL, inlined by pack: for an <img>'s src or a style set from code.
+declare module "*.png" { const url: string; export default url; }
+declare module "*.jpg" { const url: string; export default url; }
+declare module "*.jpeg" { const url: string; export default url; }
+declare module "*.gif" { const url: string; export default url; }
+declare module "*.webp" { const url: string; export default url; }
+declare module "*.svg" { const url: string; export default url; }

package/templates/vanilla/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}