@redvars/peacock 3.0.0

package/src/icon/icon.ts

@@ -0,0 +1,117 @@
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { fetchIcon, fetchSVG } from './datasource.js';
+import { sanitizeSvg } from '../utils.js';
+import { styles } from './icon.css.js';
+
+/**
+ * @summary Icons are visual symbols used to represent ideas, objects, or actions.
+ *
+ * @cssprop --icon-color - Controls the color of the icon.
+ * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
+ */
+export class Icon extends LitElement {
+  static styles = [styles];
+
+  @property({ type: String, reflect: true }) name?: string = 'home';
+
+  @property({ type: String, reflect: true }) src?: string;
+
+  @property({ type: String }) provider?: 'material-symbols' | 'carbon' =
+    'material-symbols';
+
+  @state()
+  private svgContent: string = '';
+
+  // loading + error states for consumers/tests
+  @state()
+  private loading: boolean = false;
+
+  @state()
+  private error: Error | null = null;
+
+  // token to avoid race conditions when multiple fetches overlap
+  private _fetchId = 0;
+
+  // optional debounce for rapid property changes
+  private _debounceTimer: number | undefined;
+
+  firstUpdated() {
+    // perform initial fetch once component is connected and rendered
+    this.__scheduleUpdate();
+  }
+
+  updated(changedProperties: any) {
+    // only refetch when name or src changed
+    if (changedProperties.has('name') || changedProperties.has('src')) {
+      this.__scheduleUpdate();
+    }
+  }
+
+  render() {
+    // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
+    return html` <div class="icon">
+      ${this.svgContent
+        ? unsafeSVG(this.svgContent)
+        : html`<slot name="fallback"></slot>`}
+    </div>`;
+  }
+
+  // small debounce to coalesce rapid changes (50ms)
+  private __scheduleUpdate() {
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer as any);
+    }
+    // @ts-ignore - setTimeout in DOM returns number
+    this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);
+  }
+
+  /**
+   * @internal
+   */
+  private async __updateSvg() {
+    this._fetchId += 1;
+    const currentId = this._fetchId;
+    this.loading = true;
+    this.error = null;
+
+    try {
+      let raw: string | undefined;
+
+      if (this.name) {
+        raw = await fetchIcon(this.name, this.provider);
+      } else if (this.src) {
+        raw = await fetchSVG(this.src);
+      } else {
+        raw = '';
+      }
+
+      // If another fetch started after this one, ignore this result
+      if (currentId !== this._fetchId) return;
+
+      if (raw) {
+        this.svgContent = sanitizeSvg(raw);
+      } else {
+        this.svgContent = '';
+      }
+    } catch (err: any) {
+      // capture and surface error, but avoid throwing
+      this.error = err instanceof Error ? err : new Error(String(err));
+      this.svgContent = '';
+      // bubble an event so consumers can react
+      this.dispatchEvent(
+        new CustomEvent('icon-error', {
+          detail: { name: this.name, src: this.src, error: this.error },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    } finally {
+      // ensure loading is cleared unless another fetch started
+      if (currentId === this._fetchId) {
+        this.loading = false;
+      }
+    }
+  }
+}

package/src/icon/p-icon.ts

@@ -0,0 +1,5 @@
+import { customElement } from 'lit/decorators.js';
+import { Icon } from './icon.js';
+
+@customElement('p-icon')
+export class IconComponent extends Icon {}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Icon } from './icon/icon.js';
+export { Avatar } from './avatar/avatar.js';

package/src/peacock-loader.ts

@@ -0,0 +1,17 @@
+// Eager loaded
+import { Icon } from './icon/icon.js';
+import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
+
+const loaderConfig: LoaderConfig = {
+  prefix: 'p',
+  components: {
+    icon: {
+      CustomElementClass: Icon,
+    },
+    avatar: {
+      importPath: './avatar/avatar.js',
+    },
+  },
+};
+
+new LoaderUtils(loaderConfig).start();

package/src/utils.ts

@@ -0,0 +1,118 @@
+export async function createCacheFetch(name: string) {
+  let cache: Cache | null = null;
+  // This map tracks requests currently being processed
+  const inFlightRequests = new Map<string, Promise<string>>();
+
+  try {
+    cache = await window.caches.open(name);
+  } catch (e) {
+    console.warn('window.caches access not allowed');
+  }
+
+  return async (url: string): Promise<string> => {
+    // 1. Check if we are already fetching this URL
+    if (inFlightRequests.has(url)) {
+      // Return the existing promise instead of starting a new one
+      return inFlightRequests.get(url)!;
+    }
+
+    // 2. Create the main logic as a promise
+    const fetchPromise = (async () => {
+      const request = new Request(url);
+
+      // Check Cache first
+      if (cache) {
+        const cachedResponse = await cache.match(request);
+        if (cachedResponse) {
+          return await cachedResponse.text();
+        }
+      }
+
+      // Prepare network request
+      const urlObj = new URL(request.url);
+      const isSameOrigin = urlObj.origin === window.location.origin;
+
+      const response = await fetch(request.url, {
+        method: 'GET',
+        mode: isSameOrigin ? 'no-cors' : 'cors',
+        credentials: isSameOrigin ? 'same-origin' : 'omit',
+      });
+
+      // --- Handle 404 ---
+      if (response.status === 404) {
+        console.error(`[Fetch Error] Resource not found (404): ${url}`);
+        return ''; // Return empty string as requested
+      }
+
+      const result = await response.text();
+
+      // Update Cache if applicable
+      if (cache && response.status === 200) {
+        // We clone the response logic by creating a new Response with the text body
+        await cache.put(
+          request,
+          new Response(result, {
+            status: response.status,
+            statusText: response.statusText,
+            headers: response.headers,
+          }),
+        );
+      }
+
+      return result;
+    })();
+
+    // 3. Store the promise in the map
+    inFlightRequests.set(url, fetchPromise);
+
+    try {
+      // 4. Wait for the result
+      return await fetchPromise;
+    } finally {
+      // 5. Clean up: Remove the promise from the map when done
+      // This ensures subsequent calls (after this one finishes) can start fresh
+      inFlightRequests.delete(url);
+    }
+  };
+}
+
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+export function sanitizeSvg(rawSvg: string) {
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+
+    // remove script tags
+    const scripts = Array.from(doc.querySelectorAll('script'));
+    scripts.forEach(n => n.remove());
+
+    // remove foreignObject and iframe-like elements
+    const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+    foreigns.forEach(n => n.remove());
+
+    // remove event handler attributes like onload, onclick, etc.
+    const all = Array.from(doc.querySelectorAll('*'));
+    all.forEach(el => {
+      const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+      attrs.forEach(a => el.removeAttribute(a.name));
+    });
+
+    const el = doc.documentElement;
+    if (!el) return '';
+
+    // serialize back to string
+    const serializer = new XMLSerializer();
+    return serializer.serializeToString(el);
+  } catch (e) {
+    // parsing failed; fall back to empty content to avoid injecting unsafe content
+    return '';
+  }
+}
+
+export const getTypography = (name: string) => `
+  font-family: var(--typography-${name}-font-family) !important;
+  font-size: var(--typography-${name}-font-size) !important;
+  font-weight: var(--typography-${name}-font-weight) !important;
+  line-height: var(--typography-${name}-line-height) !important;
+  letter-spacing: var(--typography-${name}-letter-spacing) !important;
+`;

package/test/icon.test.ts

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { Icon } from '../src/index.js';
+import '../src/p-icon.js';
+
+describe('Icon', () => {
+  it('has a default name as home', async () => {
+    const el = await fixture<Icon>(html`<p-icon></p-icon>`);
+    expect(el.name).to.equal('home');
+  });
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture<Icon>(html`<p-icon></p-icon>`);
+    await expect(el).shadowDom.to.be.accessible();
+  });
+});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noEmitOnError": true,
+    "lib": ["es2021", "dom", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.js

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.lit] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.js

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'Lit is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});