WEBDEV-8509: Migrate iaux-item-metadata into elements

demo/app-root.ts

@@ -4,13 +4,12 @@ import { customElement } from 'lit/decorators.js';
 // Lit's html`` tag cannot render variable tag names directly.
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
-const storyModules = import.meta.glob(
-  ['../src/elements/**/*-story.ts', '../src/labs/**/*-story.ts'],
-  { eager: true }
-);
+const storyModules = import.meta.glob(['../src/**/*-story.ts'], {
+  eager: true,
+});
 
 const storyEntries = Object.keys(storyModules)
-  .map(path => {
+  .map((path) => {
     const labs = path.includes('/src/labs/');
     const parts = path.split('/');
     const filename = parts[parts.length - 1]; // e.g. "ia-button-story.ts"
@@ -19,13 +18,15 @@ const storyEntries = Object.keys(storyModules)
   })
   .sort((a, b) => a.tag.localeCompare(b.tag));
 
-const productionEntries = storyEntries.filter(e => !e.labs);
-const labsEntries = storyEntries.filter(e => e.labs);
+const productionEntries = storyEntries.filter((e) => !e.labs);
+const labsEntries = storyEntries.filter((e) => e.labs);
 const ALL_ENTRIES = [...productionEntries, ...labsEntries];
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
-  createRenderRoot() { return this; }
+  createRenderRoot() {
+    return this;
+  }
 
   private _observer?: IntersectionObserver;
   private _abortController = new AbortController();
@@ -34,65 +35,80 @@ export class AppRoot extends LitElement {
     return html`
       <nav id="ia-sidebar">
         <h2>Production-Ready</h2>
-        ${productionEntries.map(e => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
+        ${productionEntries.map(
+          (e) => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`,
+        )}
         <h2>Labs 🧪</h2>
-        ${labsEntries.map(e => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
+        ${labsEntries.map((e) => html`<a href="#${e.id}">&lt;${e.tag}&gt;</a>`)}
       </nav>
       <div id="ia-content">
         <h1>Internet Archive Elements</h1>
         <h2>Production-Ready Elements</h2>
-        ${productionEntries.map(e => html`
-          <div id="${e.id}" class="ia-anchor">
-            ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
-          </div>
-        `)}
+        ${productionEntries.map(
+          (e) => html`
+            <div id="${e.id}" class="ia-anchor">
+              ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
+            </div>
+          `,
+        )}
         <h2>Labs Elements</h2>
-        ${labsEntries.map(e => html`
-          <div id="${e.id}" class="ia-anchor">
-            ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
-          </div>
-        `)}
+        ${labsEntries.map(
+          (e) => html`
+            <div id="${e.id}" class="ia-anchor">
+              ${unsafeHTML(`<${e.storyTag}></${e.storyTag}>`)}
+            </div>
+          `,
+        )}
       </div>
     `;
   }
 
   firstUpdated() {
-    const allIds = ALL_ENTRIES.map(e => e.id);
+    const allIds = ALL_ENTRIES.map((e) => e.id);
 
     const links = Object.fromEntries(
-      allIds.map(id => [id, this.querySelector(`#ia-sidebar a[href="#${id}"]`)])
+      allIds.map((id) => [
+        id,
+        this.querySelector(`#ia-sidebar a[href="#${id}"]`),
+      ]),
     );
 
     const visible = new Set<string>();
 
     // Only anchors in the top 30% of the viewport count as "active".
     // The first (topmost) visible anchor wins.
     this._observer = new IntersectionObserver(
-      entries => {
+      (entries) => {
         for (const entry of entries) {
           if (entry.isIntersecting) visible.add(entry.target.id);
           else visible.delete(entry.target.id);
         }
-        const activeId = allIds.find(id => visible.has(id)) ?? allIds[0];
-        allIds.forEach(id => links[id]?.classList.toggle('active', id === activeId));
+        const activeId = allIds.find((id) => visible.has(id)) ?? allIds[0];
+        allIds.forEach((id) =>
+          links[id]?.classList.toggle('active', id === activeId),
+        );
       },
       { rootMargin: '0px 0px -70% 0px' },
     );
 
-    allIds.forEach(id => {
+    allIds.forEach((id) => {
       const el = document.getElementById(id);
       if (el) this._observer!.observe(el);
     });
 
-    allIds.forEach(id => {
-      links[id]?.addEventListener('click', (e: Event) => {
-        e.preventDefault();
-        const el = document.getElementById(id);
-        if (el) {
-          const top = el.getBoundingClientRect().top + window.scrollY;
-          window.scrollTo({ top: Math.max(0, top - 16), behavior: 'smooth' });
-        }
-      }, { signal: this._abortController.signal });
+    allIds.forEach((id) => {
+      links[id]?.addEventListener(
+        'click',
+        (e: Event) => {
+          e.preventDefault();
+          const el = document.getElementById(id);
+          if (el) {
+            const top = el.getBoundingClientRect().top + window.scrollY;
+            window.scrollTo({ top: Math.max(0, top - 16), behavior: 'smooth' });
+          }
+        },
+        { signal: this._abortController.signal },
+      );
     });
   }
 

package.json

@@ -32,7 +32,8 @@
     "@lit/localize": "^0.12.2",
     "lit": "^2.8.0 || ^3.3.2",
     "magic-snowflakes": "^7.0.2",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "typescript-memoize": "^1.1.1"
   },
   "devDependencies": {
     "@open-wc/testing-helpers": "^3.0.1",

src/models/item-metadata/file.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from 'vitest';
+
+import { File } from './file';
+
+describe('File', () => {
+  test('can be instantiated with an object', () => {
+    const file = new File({ name: 'foo.jpg' });
+    expect(file.name).toBe('foo.jpg');
+  });
+
+  test('properly instantiates modeled fields', () => {
+    const file = new File({
+      name: 'foo.jpg',
+      size: '1234',
+      length: '1:23',
+      height: '1080',
+      width: '1920',
+      track: '1',
+    });
+    expect(file.size).toBe(1234);
+    expect(file.length).toBe(83);
+    expect(file.height).toBe(1080);
+    expect(file.width).toBe(1920);
+    expect(file.track).toBe(1);
+  });
+
+  test('external_identifier can be a single value', () => {
+    const file = new File({ name: 'foo.jpg', external_identifier: 'bar' });
+    expect(file.external_identifier).toBe('bar');
+  });
+
+  test('external_identifier can be an array', () => {
+    const file = new File({
+      name: 'foo.jpg',
+      external_identifier: ['foo', 'bar'],
+    });
+    expect(file.external_identifier).toEqual(['foo', 'bar']);
+  });
+
+  test('handles falsy values properly', () => {
+    const file = new File({
+      name: 'foo.jpg',
+      size: 0,
+      track: 0,
+    });
+    expect(file.size).toBeDefined();
+    expect(file.size).toBe(0);
+    expect(file.track).toBeDefined();
+    expect(file.track).toBe(0);
+  });
+
+  test('parses mtime properly', () => {
+    const file = new File({
+      name: 'foo.jpg',
+      mtime: '1639591034',
+    });
+    expect(file.mtime).toBeDefined();
+    expect(file.mtime instanceof Date).toBe(true);
+    expect(file.mtime?.getTime()).toBe(1639591034000);
+  });
+});

src/models/item-metadata/file.ts

@@ -0,0 +1,109 @@
+import { Memoize } from 'typescript-memoize';
+
+import { Byte, ByteParser } from '@src/parsers/field-types/byte';
+import { Duration, DurationParser } from '@src/parsers/field-types/duration';
+import { NumberParser } from '@src/parsers/field-types/number';
+
+/**
+ * This represents an Internet Archive File
+ *
+ * @export
+ * @class File
+ */
+export class File {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  readonly rawValue: Readonly<Record<string, any>>;
+
+  get name(): string {
+    return this.rawValue.name;
+  }
+
+  get source(): string {
+    return this.rawValue.source;
+  }
+
+  get btih(): string {
+    return this.rawValue.btih;
+  }
+
+  get md5(): string {
+    return this.rawValue.md5;
+  }
+
+  get format(): string {
+    return this.rawValue.format;
+  }
+
+  @Memoize() get mtime(): Date | undefined {
+    if (this.rawValue.mtime == null) {
+      return undefined;
+    }
+    const numberValue = NumberParser.shared.parseValue(this.rawValue.mtime);
+    if (numberValue) {
+      return new Date(numberValue * 1000);
+    }
+  }
+
+  get crc32(): string {
+    return this.rawValue.crc32;
+  }
+
+  get sha1(): string {
+    return this.rawValue.sha1;
+  }
+
+  get original(): string | undefined {
+    return this.rawValue.original;
+  }
+
+  @Memoize() get size(): Byte | undefined {
+    return this.rawValue.size != null
+      ? ByteParser.shared.parseValue(this.rawValue.size)
+      : undefined;
+  }
+
+  get title(): string | undefined {
+    return this.rawValue.title;
+  }
+
+  @Memoize() get length(): Duration | undefined {
+    return this.rawValue.length != null
+      ? DurationParser.shared.parseValue(this.rawValue.length)
+      : undefined;
+  }
+
+  @Memoize() get height(): number | undefined {
+    return this.rawValue.height != null
+      ? NumberParser.shared.parseValue(this.rawValue.height)
+      : undefined;
+  }
+
+  @Memoize() get width(): number | undefined {
+    return this.rawValue.width != null
+      ? NumberParser.shared.parseValue(this.rawValue.width)
+      : undefined;
+  }
+
+  @Memoize() get track(): number | undefined {
+    return this.rawValue.track != null
+      ? NumberParser.shared.parseValue(this.rawValue.track)
+      : undefined;
+  }
+
+  get external_identifier(): string | string[] | undefined {
+    return this.rawValue.external_identifier;
+  }
+
+  get creator(): string | undefined {
+    return this.rawValue.creator;
+  }
+
+  get album(): string | undefined {
+    return this.rawValue.album;
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  constructor(json: Record<string, any> = {}) {
+    this.rawValue = json;
+  }
+}