@abcnews/components-builder 0.0.1

package/dist/UpdateChecker/UpdateChecker.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import Modal from "../Modal/Modal.svelte";
+  import { onMount } from "svelte";
+
+  type NewVersion = {
+    newVersion: string;
+    thisVersion: string;
+  };
+
+  let {
+    overrideNewVersion,
+    buttonText = "Open new builder",
+  }: { overrideNewVersion: NewVersion; buttonText: string } = $props();
+
+  let newVersion = $state<NewVersion>(overrideNewVersion);
+  let isOpen = $state(!!newVersion);
+
+  /**
+   * Check for a new version of the given project
+   * @param {string} projectName - Project name (e.g. 'globey')
+   * @param {string} startingAt - Version to start checking at (e.g. '1.0.0')
+   */
+  async function newVersionCheck(projectName = "", startingAt = "") {
+    console.log("checking for new version of", projectName, { startingAt });
+    const baseUrl = `https://www.abc.net.au/res/sites/news-projects/${projectName}/`;
+    let newVersion;
+    let latestVersion = startingAt;
+    let i = 0;
+    do {
+      if (i++ > 30) {
+        // just in case something messes up
+        break;
+      }
+      const [major, minor, patch] = latestVersion.split(".");
+      const nextVersions = [
+        [1 + Number(major), 0, 0],
+        [major, 1 + Number(minor), 0],
+        [major, minor, 1 + Number(patch)],
+      ].map((version) => version.join("."));
+      const newVersions = await Promise.all(
+        nextVersions.map((version) => {
+          const url = `${baseUrl}${version}/index.html`;
+          console.info("checking new version at", url);
+          return fetch(url, { cache: "no-store" })
+            .then((response) => (response.status !== 200 ? false : version))
+            .catch(() => false);
+        }),
+      );
+
+      // @ts-ignore - there is no way for latestVersion to be `true`, only truthy.
+      latestVersion = newVersions.find(Boolean) || "";
+      if (latestVersion) {
+        newVersion = latestVersion;
+      }
+    } while (latestVersion);
+
+    return {
+      thisVersion: startingAt,
+      newVersion,
+    };
+  }
+
+  async function check() {
+    if (newVersion?.newVersion) {
+      return;
+    }
+    const [projectName, thisVersion] =
+      window.location.pathname
+        .match(/\/news-projects\/([^/]+)\/(\d+\.\d+\.\d+)/)
+        ?.slice(1) || [];
+    if (!thisVersion) {
+      return;
+    }
+    const result = await newVersionCheck(projectName, thisVersion);
+
+    if (result.newVersion) {
+      newVersion = { ...result, newVersion: String(result.newVersion) };
+      isOpen = true;
+    }
+  }
+
+  onMount(() => {
+    check();
+    window.addEventListener("focus", check);
+    const timeout = setInterval(check, 1000 * 60 * 10);
+    return () => {
+      window.removeEventListener("focus", check);
+      clearInterval(timeout);
+    };
+  });
+
+  function onClick() {
+    // @ts-ignore
+    window.location = String(Window.location).replace(
+      `/${newVersion?.thisVersion}/`,
+      `/${newVersion?.newVersion}/`,
+    );
+  }
+
+  function onClose() {
+    isOpen = false;
+  }
+</script>
+
+{#snippet Buttons()}
+  <button onclick={onClick}>{buttonText}</button>
+{/snippet}
+
+{#if isOpen && newVersion?.newVersion}
+  <Modal title="New version available" {onClose} footerChildren={Buttons}>
+    <p>
+      You are using <code>{newVersion.thisVersion}</code> but
+      <code>{newVersion.newVersion}</code> is available.
+    </p>
+
+    <p>
+      Your current state will be brought across to the new version, and you can
+      always click back to return to this page.
+    </p>
+  </Modal>
+{/if}
+
+<style>
+  p {
+    max-width: 32em;
+  }
+</style>

package/dist/UpdateChecker/UpdateChecker.svelte.d.ts

@@ -0,0 +1,11 @@
+type NewVersion = {
+    newVersion: string;
+    thisVersion: string;
+};
+type $$ComponentProps = {
+    overrideNewVersion: NewVersion;
+    buttonText: string;
+};
+declare const UpdateChecker: import("svelte").Component<$$ComponentProps, {}, "">;
+type UpdateChecker = ReturnType<typeof UpdateChecker>;
+export default UpdateChecker;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry components here

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@abcnews/components-builder",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "storybook": "storybook dev -p 6006 --ci",
+    "build-storybook": "storybook build"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.0",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/svelte": "^8.6.12",
+    "@storybook/sveltekit": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@types/node": "^20",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "publint": "^0.3.2",
+    "storybook": "^8.6.12",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.2.6"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "dependencies": {
+    "@abcnews/alternating-case-to-object": "^3.2.0",
+    "@abcnews/svelte-scrollyteller": "github:abcnews/svelte-scrollyteller#feature/future-news",
+    "async": "^3.2.6",
+    "bootstrap-icons": "^1.11.3",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.10.1",
+    "svelte-bootstrap-icons": "^3.1.2"
+  }
+}