@charcoal-ui/icons 4.2.0 → 4.3.0-beta.0

package/dist/PixivIcon.story.d.ts

@@ -1,7 +1,7 @@
 import { Props } from '.';
-import type { StoryObj } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, Props>;
-export default _default;
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<Props>;
+export default meta;
 export declare const Default: StoryObj<Props>;
 export declare const WithAttributes: StoryObj<Props>;
 export declare const WithUnsafe: StoryObj<Props>;

package/dist/PixivIcon.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixivIcon.story.d.ts","sourceRoot":"","sources":["../src/PixivIcon.story.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,EAAE,MAAM,GAAG,CAAA;AAEpC,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAOtD,wBA8CgB;AAkEhB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAEnC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,KAAK,CAe1C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,KAAK,CAqBtC,CAAA"}
+{"version":3,"file":"PixivIcon.story.d.ts","sourceRoot":"","sources":["../src/PixivIcon.story.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,EAAE,MAAM,GAAG,CAAA;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAOtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,KAAK,CA8CrB,CAAA;AAED,eAAe,IAAI,CAAA;AAkEnB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,KAAK,CAEnC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,KAAK,CAe1C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,KAAK,CAqBtC,CAAA"}

package/dist/index.cjs.js

@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -179,6 +183,9 @@ if (__SERVER__ || !CAN_USE_DOM) {
 var attributes = ["name", "scale", "unsafe-non-guideline-scale"];
 var ROOT_MARGIN = 50;
 var PixivIcon = class extends HTMLElement {
+  /**
+   * NOTE: icon content should be sanitized before pass to extend()
+   */
   static extend(map) {
     (0, import_warning.default)(!__SERVER__, "Using `PixivIcon.extend()` on server has no effect");
     if (__SERVER__) {

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/PixivIcon.ts","../src/charcoalIconFiles.ts","../src/loaders/PixivIconLoadError.ts","../src/loaders/CharcoalIconFilesLoader.ts","../src/loaders/CustomIconLoader.ts","../src/loaders/index.ts","../src/ssr.ts"],"sourcesContent":["import { PixivIcon, Props } from './PixivIcon'\nimport { __SERVER__ } from './ssr'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { KNOWN_ICON_FILES } from './charcoalIconFiles'\nexport { PixivIconLoadError } from './loaders/PixivIconLoadError'\n\ndeclare global {\n  interface Window {\n    PixivIcon: typeof PixivIcon\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'pixiv-icon': Props\n    }\n  }\n}\n\nif (!__SERVER__) {\n  // TODO: HMR対応\n  if (!window.customElements.get(PixivIcon.tagName)) {\n    window.PixivIcon = PixivIcon\n    window.customElements.define(PixivIcon.tagName, PixivIcon)\n  }\n}\n","import type React from 'react'\nimport warning from 'warning'\nimport { KnownIconFile } from './charcoalIconFiles'\nimport { getIcon, addCustomIcon } from './loaders'\nimport { __SERVER__ } from './ssr'\n\nconst attributes = ['name', 'scale', 'unsafe-non-guideline-scale'] as const\n\nconst ROOT_MARGIN = 50\n\nexport interface KnownIconType extends Record<KnownIconFile, unknown> {}\n\nexport interface Props\n  extends Omit<\n    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,\n    'className' | 'css'\n  > {\n  name: keyof KnownIconType\n  scale?: 1 | 2 | 3 | '1' | '2' | '3'\n  'unsafe-non-guideline-scale'?: number | string\n\n  // CustomElements は className が使えない。class と書く必要がある\n  // https://ja.reactjs.org/docs/web-components.html#using-web-components-in-react\n  class?: string\n}\n\ntype ExtendedIconFile = Exclude<keyof KnownIconType, KnownIconFile>\ntype Extended = [ExtendedIconFile] extends [never] // NOTE: ExtendedIconFileがneverならKnownIconTypeは拡張されていない\n  ? false\n  : true\n\nexport class PixivIcon extends HTMLElement {\n  static readonly tagName = 'pixiv-icon'\n\n  /**\n   * NOTE: icon content should be sanitized before pass to extend()\n   */\n  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    warning(!__SERVER__, 'Using `PixivIcon.extend()` on server has no effect')\n    if (__SERVER__) {\n      return\n    }\n\n    Object.entries(map).forEach(([name, filePathOrUrl]) => {\n      if (!name.includes('/')) {\n        throw new TypeError(\n          `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n        )\n      }\n\n      addCustomIcon(name, filePathOrUrl)\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\n  private isVisible = false\n\n  get props() {\n    const partial = Object.fromEntries(\n      attributes.map((attribute) => [attribute, this.getAttribute(attribute)])\n    ) as Record<(typeof attributes)[number], string | null>\n\n    const name = partial.name\n\n    if (name === null) {\n      throw new TypeError('property \"name\" is required.')\n    }\n\n    if (!name.includes('/')) {\n      throw new TypeError(\n        `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n      )\n    }\n\n    return {\n      ...partial,\n      name,\n    }\n  }\n\n  get forceResizedSize() {\n    if (this.props['unsafe-non-guideline-scale'] === null) {\n      return null\n    }\n\n    const [size] = this.props.name.split('/')\n    const scale = Number(this.props['unsafe-non-guideline-scale'])\n\n    switch (size) {\n      case 'Inline': {\n        return 16 * scale\n      }\n\n      default: {\n        return Number(size) * scale\n      }\n    }\n  }\n\n  get scaledSize() {\n    const [size] = this.props.name.split('/')\n\n    const scale = Number(this.props.scale ?? '1')\n\n    switch (size) {\n      case 'Inline': {\n        switch (scale) {\n          case 2: {\n            return 32\n          }\n\n          default: {\n            return 16\n          }\n        }\n      }\n\n      case '24': {\n        return Number(size) * scale\n      }\n\n      default: {\n        return Number(size)\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    this.attachShadow({ mode: 'open' })\n  }\n\n  async connectedCallback() {\n    this.render()\n    await this.waitUntilVisible()\n    this.isVisible = true\n    await this.loadSvg(this.props.name)\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.isVisible = false\n  }\n\n  attributeChangedCallback(\n    attr: string,\n    _oldValue: string | null,\n    newValue: string\n  ) {\n    // 非表示の場合はロードしない\n    if (!this.isVisible) {\n      return\n    }\n\n    // name が変更された場合必ず再読み込みを試みる\n    if (attr === 'name') {\n      void this.loadSvg(newValue)\n      return\n    }\n\n    // SVG が読み込み済み && scale などの変更だけならそこだけ反映すればいい\n    if (this.svgContent !== undefined) {\n      this.render()\n      return\n    }\n\n    // まだ SVG が読み込めてないなら load\n    void this.loadSvg(this.props.name)\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    if (!Number.isFinite(size)) {\n      throw new TypeError(`icon size must not be NaN`)\n    }\n\n    const style = `<style>\n  :host {\n    display: inline-flex;\n    --size: ${size}px;\n  }\n\n  svg {\n    width: var(--size);\n    height: var(--size);\n  }\n</style>`\n\n    const svg =\n      this.svgContent !== undefined\n        ? this.svgContent\n        : `<svg viewBox=\"0 0 ${size} ${size}\"></svg>`\n\n    // NOTE: User should sanitize the svg content before passing to charcoal.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.shadowRoot!.innerHTML = style + svg\n  }\n\n  private async loadSvg(name: string) {\n    this.svgContent = await getIcon(name)\n    this.render()\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        (entries) => {\n          // In Chromium based browsers, multiple entries can be returned even only observe once.\n          // Here, we don't care about the entry time but only if isIntersecting happened.\n          const isIntersecting = entries.some((entry) => entry.isIntersecting)\n          if (isIntersecting) {\n            this.observer?.disconnect()\n            this.observer = undefined\n            resolve()\n          }\n        },\n        { rootMargin: `${ROOT_MARGIN}px` }\n      )\n\n      this.observer.observe(this)\n    })\n  }\n}\n","import charcoalIconFiles from '@charcoal-ui/icon-files'\n\nexport default charcoalIconFiles\nexport type KnownIconFile = keyof typeof charcoalIconFiles\nexport const KNOWN_ICON_FILES = Object.keys(\n  charcoalIconFiles\n) as KnownIconFile[]\n\nexport function isKnownIconFile(name: string): name is KnownIconFile {\n  return name in charcoalIconFiles\n}\n","export class PixivIconLoadError extends Error {\n  constructor(name: string, cause: unknown) {\n    const message = formatMessage(name, cause)\n\n    super(message, { cause })\n    this.name = 'PixivIconLoadError'\n    Object.setPrototypeOf(this, new.target.prototype)\n  }\n}\n\nfunction formatMessage(name: string, cause: unknown) {\n  const message = `Failed to fetch <pixiv-icon name=\"${name}\">`\n  if (cause == null) {\n    return message\n  }\n\n  if (cause instanceof Error) {\n    return `${message}: ${cause.toString()})`\n  }\n\n  return `${message}: ${JSON.stringify(cause)})`\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\nimport charcoalIconFiles, { KnownIconFile } from '../charcoalIconFiles'\n\n/**\n * `@charcoal-ui/icon-files` に収録されているアイコンを取ってくる\n */\nexport class CharcoalIconFilesLoader implements Loadable {\n  private _name: KnownIconFile\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: KnownIconFile) {\n    this._name = name\n  }\n\n  get importIconFile() {\n    return charcoalIconFiles[this._name]\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = this.importIconFile()\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\n\n/**\n * `PixivIcon.extend()` で登録されたカスタムのアイコンを取得する\n */\nexport class CustomIconLoader implements Loadable {\n  private _name: string\n  private _filePathOrUrl: string\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: string, filePathOrUrl: string) {\n    this._name = name\n    this._filePathOrUrl = filePathOrUrl\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = fetch(this._filePathOrUrl)\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(this._name, 'Response is not ok')\n        }\n\n        return response.text()\n      })\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        if (e instanceof PixivIconLoadError) {\n          throw e\n        }\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { isKnownIconFile } from '../charcoalIconFiles'\nimport { CharcoalIconFilesLoader } from './CharcoalIconFilesLoader'\nimport { CustomIconLoader } from './CustomIconLoader'\nimport { Loadable } from './Loadable'\nimport { PixivIconLoadError } from './PixivIconLoadError'\n\n/**\n * icon をロードするオブジェクトのプール。Loader のインスタンスは作り次第ここに入れる\n *\n * 同じアイコンへの複数回のリクエストが起きないためには、Loader がこの中でユニークでないと行けない\n */\nconst loaders = new Map<string, Loadable>()\n\nexport function addCustomIcon(name: string, filePathOrUrl: string) {\n  loaders.set(name, new CustomIconLoader(name, filePathOrUrl))\n}\n\nexport async function getIcon(name: string) {\n  const loader = resolveIconLoader(name)\n  if (loader == null) {\n    throw new PixivIconLoadError(name, 'Loader was not found')\n  }\n\n  return loader.fetch().catch((e) => {\n    if (e instanceof PixivIconLoadError) {\n      throw e\n    }\n\n    throw new PixivIconLoadError(name, e)\n  })\n}\n\nfunction resolveIconLoader(name: string) {\n  // 登録済み or キャッシュ済みの場合\n  // addCustomIcon で登録された CustomIconLoader は常にこっちを通る\n  const registeredLoader = loaders.get(name)\n  if (registeredLoader) {\n    return registeredLoader\n  }\n\n  // `@charcoal-ui/icon-files` に収録されているアイコンにはこれを返す\n  if (isKnownIconFile(name)) {\n    const charcoalIconFilesLoader = new CharcoalIconFilesLoader(name)\n\n    loaders.set(name, charcoalIconFilesLoader)\n    return charcoalIconFilesLoader\n  }\n\n  // 存在しないアイコンにはこれを返す\n  return null\n}\n","export const __SERVER__ = typeof window === 'undefined'\n\nconst CAN_USE_DOM = typeof HTMLElement !== 'undefined'\n\n// Workaround: `extends HTMLElement` の形式でないとbabelのトランスパイルがおかしくなる\nif (__SERVER__ || !CAN_USE_DOM) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.HTMLElement = class {} as any\n}\n"],"mappings":"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","names":["charcoalIconFiles","warning"]}
+{"version":3,"sources":["../src/index.ts","../src/PixivIcon.ts","../src/charcoalIconFiles.ts","../src/loaders/PixivIconLoadError.ts","../src/loaders/CharcoalIconFilesLoader.ts","../src/loaders/CustomIconLoader.ts","../src/loaders/index.ts","../src/ssr.ts"],"sourcesContent":["import { PixivIcon } from './PixivIcon'\nimport { __SERVER__ } from './ssr'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { KNOWN_ICON_FILES } from './charcoalIconFiles'\nexport { PixivIconLoadError } from './loaders/PixivIconLoadError'\n\ndeclare global {\n  interface Window {\n    PixivIcon: typeof PixivIcon\n  }\n}\n\ndeclare module 'react' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'pixiv-icon': import('./PixivIcon').Props\n    }\n  }\n}\n\nif (!__SERVER__) {\n  // TODO: HMR対応\n  if (!window.customElements.get(PixivIcon.tagName)) {\n    window.PixivIcon = PixivIcon\n    window.customElements.define(PixivIcon.tagName, PixivIcon)\n  }\n}\n","import type React from 'react'\nimport warning from 'warning'\nimport { KnownIconFile } from './charcoalIconFiles'\nimport { getIcon, addCustomIcon } from './loaders'\nimport { __SERVER__ } from './ssr'\n\nconst attributes = ['name', 'scale', 'unsafe-non-guideline-scale'] as const\n\nconst ROOT_MARGIN = 50\n\nexport interface KnownIconType extends Record<KnownIconFile, unknown> {}\n\nexport interface Props\n  extends Omit<\n    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,\n    'className' | 'css'\n  > {\n  name: keyof KnownIconType\n  scale?: 1 | 2 | 3 | '1' | '2' | '3'\n  'unsafe-non-guideline-scale'?: number | string\n\n  // CustomElements は className が使えない。class と書く必要がある\n  // https://ja.reactjs.org/docs/web-components.html#using-web-components-in-react\n  class?: string\n}\n\ntype ExtendedIconFile = Exclude<keyof KnownIconType, KnownIconFile>\ntype Extended = [ExtendedIconFile] extends [never] // NOTE: ExtendedIconFileがneverならKnownIconTypeは拡張されていない\n  ? false\n  : true\n\nexport class PixivIcon extends HTMLElement {\n  static readonly tagName = 'pixiv-icon'\n\n  /**\n   * NOTE: icon content should be sanitized before pass to extend()\n   */\n  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    warning(!__SERVER__, 'Using `PixivIcon.extend()` on server has no effect')\n    if (__SERVER__) {\n      return\n    }\n\n    Object.entries(map).forEach(([name, filePathOrUrl]) => {\n      if (!name.includes('/')) {\n        throw new TypeError(\n          `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n        )\n      }\n\n      addCustomIcon(name, filePathOrUrl)\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\n  private isVisible = false\n\n  get props() {\n    const partial = Object.fromEntries(\n      attributes.map((attribute) => [attribute, this.getAttribute(attribute)])\n    ) as Record<(typeof attributes)[number], string | null>\n\n    const name = partial.name\n\n    if (name === null) {\n      throw new TypeError('property \"name\" is required.')\n    }\n\n    if (!name.includes('/')) {\n      throw new TypeError(\n        `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n      )\n    }\n\n    return {\n      ...partial,\n      name,\n    }\n  }\n\n  get forceResizedSize() {\n    if (this.props['unsafe-non-guideline-scale'] === null) {\n      return null\n    }\n\n    const [size] = this.props.name.split('/')\n    const scale = Number(this.props['unsafe-non-guideline-scale'])\n\n    switch (size) {\n      case 'Inline': {\n        return 16 * scale\n      }\n\n      default: {\n        return Number(size) * scale\n      }\n    }\n  }\n\n  get scaledSize() {\n    const [size] = this.props.name.split('/')\n\n    const scale = Number(this.props.scale ?? '1')\n\n    switch (size) {\n      case 'Inline': {\n        switch (scale) {\n          case 2: {\n            return 32\n          }\n\n          default: {\n            return 16\n          }\n        }\n      }\n\n      case '24': {\n        return Number(size) * scale\n      }\n\n      default: {\n        return Number(size)\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    this.attachShadow({ mode: 'open' })\n  }\n\n  async connectedCallback() {\n    this.render()\n    await this.waitUntilVisible()\n    this.isVisible = true\n    await this.loadSvg(this.props.name)\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.isVisible = false\n  }\n\n  attributeChangedCallback(\n    attr: string,\n    _oldValue: string | null,\n    newValue: string\n  ) {\n    // 非表示の場合はロードしない\n    if (!this.isVisible) {\n      return\n    }\n\n    // name が変更された場合必ず再読み込みを試みる\n    if (attr === 'name') {\n      void this.loadSvg(newValue)\n      return\n    }\n\n    // SVG が読み込み済み && scale などの変更だけならそこだけ反映すればいい\n    if (this.svgContent !== undefined) {\n      this.render()\n      return\n    }\n\n    // まだ SVG が読み込めてないなら load\n    void this.loadSvg(this.props.name)\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    if (!Number.isFinite(size)) {\n      throw new TypeError(`icon size must not be NaN`)\n    }\n\n    const style = `<style>\n  :host {\n    display: inline-flex;\n    --size: ${size}px;\n  }\n\n  svg {\n    width: var(--size);\n    height: var(--size);\n  }\n</style>`\n\n    const svg =\n      this.svgContent !== undefined\n        ? this.svgContent\n        : `<svg viewBox=\"0 0 ${size} ${size}\"></svg>`\n\n    // NOTE: User should sanitize the svg content before passing to charcoal.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.shadowRoot!.innerHTML = style + svg\n  }\n\n  private async loadSvg(name: string) {\n    this.svgContent = await getIcon(name)\n    this.render()\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        (entries) => {\n          // In Chromium based browsers, multiple entries can be returned even only observe once.\n          // Here, we don't care about the entry time but only if isIntersecting happened.\n          const isIntersecting = entries.some((entry) => entry.isIntersecting)\n          if (isIntersecting) {\n            this.observer?.disconnect()\n            this.observer = undefined\n            resolve()\n          }\n        },\n        { rootMargin: `${ROOT_MARGIN}px` }\n      )\n\n      this.observer.observe(this)\n    })\n  }\n}\n","import charcoalIconFiles from '@charcoal-ui/icon-files'\n\nexport default charcoalIconFiles\nexport type KnownIconFile = keyof typeof charcoalIconFiles\nexport const KNOWN_ICON_FILES = Object.keys(\n  charcoalIconFiles\n) as KnownIconFile[]\n\nexport function isKnownIconFile(name: string): name is KnownIconFile {\n  return name in charcoalIconFiles\n}\n","export class PixivIconLoadError extends Error {\n  constructor(name: string, cause: unknown) {\n    const message = formatMessage(name, cause)\n\n    super(message, { cause })\n    this.name = 'PixivIconLoadError'\n    Object.setPrototypeOf(this, new.target.prototype)\n  }\n}\n\nfunction formatMessage(name: string, cause: unknown) {\n  const message = `Failed to fetch <pixiv-icon name=\"${name}\">`\n  if (cause == null) {\n    return message\n  }\n\n  if (cause instanceof Error) {\n    return `${message}: ${cause.toString()})`\n  }\n\n  return `${message}: ${JSON.stringify(cause)})`\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\nimport charcoalIconFiles, { KnownIconFile } from '../charcoalIconFiles'\n\n/**\n * `@charcoal-ui/icon-files` に収録されているアイコンを取ってくる\n */\nexport class CharcoalIconFilesLoader implements Loadable {\n  private _name: KnownIconFile\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: KnownIconFile) {\n    this._name = name\n  }\n\n  get importIconFile() {\n    return charcoalIconFiles[this._name]\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = this.importIconFile()\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\n\n/**\n * `PixivIcon.extend()` で登録されたカスタムのアイコンを取得する\n */\nexport class CustomIconLoader implements Loadable {\n  private _name: string\n  private _filePathOrUrl: string\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: string, filePathOrUrl: string) {\n    this._name = name\n    this._filePathOrUrl = filePathOrUrl\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = fetch(this._filePathOrUrl)\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(this._name, 'Response is not ok')\n        }\n\n        return response.text()\n      })\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        if (e instanceof PixivIconLoadError) {\n          throw e\n        }\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { isKnownIconFile } from '../charcoalIconFiles'\nimport { CharcoalIconFilesLoader } from './CharcoalIconFilesLoader'\nimport { CustomIconLoader } from './CustomIconLoader'\nimport { Loadable } from './Loadable'\nimport { PixivIconLoadError } from './PixivIconLoadError'\n\n/**\n * icon をロードするオブジェクトのプール。Loader のインスタンスは作り次第ここに入れる\n *\n * 同じアイコンへの複数回のリクエストが起きないためには、Loader がこの中でユニークでないと行けない\n */\nconst loaders = new Map<string, Loadable>()\n\nexport function addCustomIcon(name: string, filePathOrUrl: string) {\n  loaders.set(name, new CustomIconLoader(name, filePathOrUrl))\n}\n\nexport async function getIcon(name: string) {\n  const loader = resolveIconLoader(name)\n  if (loader == null) {\n    throw new PixivIconLoadError(name, 'Loader was not found')\n  }\n\n  return loader.fetch().catch((e) => {\n    if (e instanceof PixivIconLoadError) {\n      throw e\n    }\n\n    throw new PixivIconLoadError(name, e)\n  })\n}\n\nfunction resolveIconLoader(name: string) {\n  // 登録済み or キャッシュ済みの場合\n  // addCustomIcon で登録された CustomIconLoader は常にこっちを通る\n  const registeredLoader = loaders.get(name)\n  if (registeredLoader) {\n    return registeredLoader\n  }\n\n  // `@charcoal-ui/icon-files` に収録されているアイコンにはこれを返す\n  if (isKnownIconFile(name)) {\n    const charcoalIconFilesLoader = new CharcoalIconFilesLoader(name)\n\n    loaders.set(name, charcoalIconFilesLoader)\n    return charcoalIconFilesLoader\n  }\n\n  // 存在しないアイコンにはこれを返す\n  return null\n}\n","export const __SERVER__ = typeof window === 'undefined'\n\nconst CAN_USE_DOM = typeof HTMLElement !== 'undefined'\n\n// Workaround: `extends HTMLElement` の形式でないとbabelのトランスパイルがおかしくなる\nif (__SERVER__ || !CAN_USE_DOM) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.HTMLElement = class {} as any\n}\n"],"mappings":"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","names":["charcoalIconFiles","warning"]}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { PixivIcon, Props } from './PixivIcon';
+import { PixivIcon } from './PixivIcon';
 export { PixivIcon, type KnownIconType, type Props } from './PixivIcon';
 export { KNOWN_ICON_FILES } from './charcoalIconFiles';
 export { PixivIconLoadError } from './loaders/PixivIconLoadError';
@@ -6,9 +6,11 @@ declare global {
     interface Window {
         PixivIcon: typeof PixivIcon;
     }
-    export namespace JSX {
+}
+declare module 'react' {
+    namespace JSX {
         interface IntrinsicElements {
-            'pixiv-icon': Props;
+            'pixiv-icon': import('./PixivIcon').Props;
         }
     }
 }

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,EAAE,OAAO,SAAS,CAAA;KAC5B;IAGD,MAAM,WAAW,GAAG,CAAC;QACnB,UAAU,iBAAiB;YACzB,YAAY,EAAE,KAAK,CAAA;SACpB;KACF;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,SAAS,EAAE,OAAO,SAAS,CAAA;KAC5B;CACF;AAED,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAiB,GAAG,CAAC;QACnB,UAAU,iBAAiB;YACzB,YAAY,EAAE,OAAO,aAAa,EAAE,KAAK,CAAA;SAC1C;KACF;CACF"}

package/dist/index.esm.js

@@ -147,6 +147,9 @@ if (__SERVER__ || !CAN_USE_DOM) {
 var attributes = ["name", "scale", "unsafe-non-guideline-scale"];
 var ROOT_MARGIN = 50;
 var PixivIcon = class extends HTMLElement {
+  /**
+   * NOTE: icon content should be sanitized before pass to extend()
+   */
   static extend(map) {
     warning(!__SERVER__, "Using `PixivIcon.extend()` on server has no effect");
     if (__SERVER__) {

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PixivIcon.ts","../src/charcoalIconFiles.ts","../src/loaders/PixivIconLoadError.ts","../src/loaders/CharcoalIconFilesLoader.ts","../src/loaders/CustomIconLoader.ts","../src/loaders/index.ts","../src/ssr.ts","../src/index.ts"],"sourcesContent":["import type React from 'react'\nimport warning from 'warning'\nimport { KnownIconFile } from './charcoalIconFiles'\nimport { getIcon, addCustomIcon } from './loaders'\nimport { __SERVER__ } from './ssr'\n\nconst attributes = ['name', 'scale', 'unsafe-non-guideline-scale'] as const\n\nconst ROOT_MARGIN = 50\n\nexport interface KnownIconType extends Record<KnownIconFile, unknown> {}\n\nexport interface Props\n  extends Omit<\n    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,\n    'className' | 'css'\n  > {\n  name: keyof KnownIconType\n  scale?: 1 | 2 | 3 | '1' | '2' | '3'\n  'unsafe-non-guideline-scale'?: number | string\n\n  // CustomElements は className が使えない。class と書く必要がある\n  // https://ja.reactjs.org/docs/web-components.html#using-web-components-in-react\n  class?: string\n}\n\ntype ExtendedIconFile = Exclude<keyof KnownIconType, KnownIconFile>\ntype Extended = [ExtendedIconFile] extends [never] // NOTE: ExtendedIconFileがneverならKnownIconTypeは拡張されていない\n  ? false\n  : true\n\nexport class PixivIcon extends HTMLElement {\n  static readonly tagName = 'pixiv-icon'\n\n  /**\n   * NOTE: icon content should be sanitized before pass to extend()\n   */\n  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    warning(!__SERVER__, 'Using `PixivIcon.extend()` on server has no effect')\n    if (__SERVER__) {\n      return\n    }\n\n    Object.entries(map).forEach(([name, filePathOrUrl]) => {\n      if (!name.includes('/')) {\n        throw new TypeError(\n          `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n        )\n      }\n\n      addCustomIcon(name, filePathOrUrl)\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\n  private isVisible = false\n\n  get props() {\n    const partial = Object.fromEntries(\n      attributes.map((attribute) => [attribute, this.getAttribute(attribute)])\n    ) as Record<(typeof attributes)[number], string | null>\n\n    const name = partial.name\n\n    if (name === null) {\n      throw new TypeError('property \"name\" is required.')\n    }\n\n    if (!name.includes('/')) {\n      throw new TypeError(\n        `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n      )\n    }\n\n    return {\n      ...partial,\n      name,\n    }\n  }\n\n  get forceResizedSize() {\n    if (this.props['unsafe-non-guideline-scale'] === null) {\n      return null\n    }\n\n    const [size] = this.props.name.split('/')\n    const scale = Number(this.props['unsafe-non-guideline-scale'])\n\n    switch (size) {\n      case 'Inline': {\n        return 16 * scale\n      }\n\n      default: {\n        return Number(size) * scale\n      }\n    }\n  }\n\n  get scaledSize() {\n    const [size] = this.props.name.split('/')\n\n    const scale = Number(this.props.scale ?? '1')\n\n    switch (size) {\n      case 'Inline': {\n        switch (scale) {\n          case 2: {\n            return 32\n          }\n\n          default: {\n            return 16\n          }\n        }\n      }\n\n      case '24': {\n        return Number(size) * scale\n      }\n\n      default: {\n        return Number(size)\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    this.attachShadow({ mode: 'open' })\n  }\n\n  async connectedCallback() {\n    this.render()\n    await this.waitUntilVisible()\n    this.isVisible = true\n    await this.loadSvg(this.props.name)\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.isVisible = false\n  }\n\n  attributeChangedCallback(\n    attr: string,\n    _oldValue: string | null,\n    newValue: string\n  ) {\n    // 非表示の場合はロードしない\n    if (!this.isVisible) {\n      return\n    }\n\n    // name が変更された場合必ず再読み込みを試みる\n    if (attr === 'name') {\n      void this.loadSvg(newValue)\n      return\n    }\n\n    // SVG が読み込み済み && scale などの変更だけならそこだけ反映すればいい\n    if (this.svgContent !== undefined) {\n      this.render()\n      return\n    }\n\n    // まだ SVG が読み込めてないなら load\n    void this.loadSvg(this.props.name)\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    if (!Number.isFinite(size)) {\n      throw new TypeError(`icon size must not be NaN`)\n    }\n\n    const style = `<style>\n  :host {\n    display: inline-flex;\n    --size: ${size}px;\n  }\n\n  svg {\n    width: var(--size);\n    height: var(--size);\n  }\n</style>`\n\n    const svg =\n      this.svgContent !== undefined\n        ? this.svgContent\n        : `<svg viewBox=\"0 0 ${size} ${size}\"></svg>`\n\n    // NOTE: User should sanitize the svg content before passing to charcoal.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.shadowRoot!.innerHTML = style + svg\n  }\n\n  private async loadSvg(name: string) {\n    this.svgContent = await getIcon(name)\n    this.render()\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        (entries) => {\n          // In Chromium based browsers, multiple entries can be returned even only observe once.\n          // Here, we don't care about the entry time but only if isIntersecting happened.\n          const isIntersecting = entries.some((entry) => entry.isIntersecting)\n          if (isIntersecting) {\n            this.observer?.disconnect()\n            this.observer = undefined\n            resolve()\n          }\n        },\n        { rootMargin: `${ROOT_MARGIN}px` }\n      )\n\n      this.observer.observe(this)\n    })\n  }\n}\n","import charcoalIconFiles from '@charcoal-ui/icon-files'\n\nexport default charcoalIconFiles\nexport type KnownIconFile = keyof typeof charcoalIconFiles\nexport const KNOWN_ICON_FILES = Object.keys(\n  charcoalIconFiles\n) as KnownIconFile[]\n\nexport function isKnownIconFile(name: string): name is KnownIconFile {\n  return name in charcoalIconFiles\n}\n","export class PixivIconLoadError extends Error {\n  constructor(name: string, cause: unknown) {\n    const message = formatMessage(name, cause)\n\n    super(message, { cause })\n    this.name = 'PixivIconLoadError'\n    Object.setPrototypeOf(this, new.target.prototype)\n  }\n}\n\nfunction formatMessage(name: string, cause: unknown) {\n  const message = `Failed to fetch <pixiv-icon name=\"${name}\">`\n  if (cause == null) {\n    return message\n  }\n\n  if (cause instanceof Error) {\n    return `${message}: ${cause.toString()})`\n  }\n\n  return `${message}: ${JSON.stringify(cause)})`\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\nimport charcoalIconFiles, { KnownIconFile } from '../charcoalIconFiles'\n\n/**\n * `@charcoal-ui/icon-files` に収録されているアイコンを取ってくる\n */\nexport class CharcoalIconFilesLoader implements Loadable {\n  private _name: KnownIconFile\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: KnownIconFile) {\n    this._name = name\n  }\n\n  get importIconFile() {\n    return charcoalIconFiles[this._name]\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = this.importIconFile()\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\n\n/**\n * `PixivIcon.extend()` で登録されたカスタムのアイコンを取得する\n */\nexport class CustomIconLoader implements Loadable {\n  private _name: string\n  private _filePathOrUrl: string\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: string, filePathOrUrl: string) {\n    this._name = name\n    this._filePathOrUrl = filePathOrUrl\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = fetch(this._filePathOrUrl)\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(this._name, 'Response is not ok')\n        }\n\n        return response.text()\n      })\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        if (e instanceof PixivIconLoadError) {\n          throw e\n        }\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { isKnownIconFile } from '../charcoalIconFiles'\nimport { CharcoalIconFilesLoader } from './CharcoalIconFilesLoader'\nimport { CustomIconLoader } from './CustomIconLoader'\nimport { Loadable } from './Loadable'\nimport { PixivIconLoadError } from './PixivIconLoadError'\n\n/**\n * icon をロードするオブジェクトのプール。Loader のインスタンスは作り次第ここに入れる\n *\n * 同じアイコンへの複数回のリクエストが起きないためには、Loader がこの中でユニークでないと行けない\n */\nconst loaders = new Map<string, Loadable>()\n\nexport function addCustomIcon(name: string, filePathOrUrl: string) {\n  loaders.set(name, new CustomIconLoader(name, filePathOrUrl))\n}\n\nexport async function getIcon(name: string) {\n  const loader = resolveIconLoader(name)\n  if (loader == null) {\n    throw new PixivIconLoadError(name, 'Loader was not found')\n  }\n\n  return loader.fetch().catch((e) => {\n    if (e instanceof PixivIconLoadError) {\n      throw e\n    }\n\n    throw new PixivIconLoadError(name, e)\n  })\n}\n\nfunction resolveIconLoader(name: string) {\n  // 登録済み or キャッシュ済みの場合\n  // addCustomIcon で登録された CustomIconLoader は常にこっちを通る\n  const registeredLoader = loaders.get(name)\n  if (registeredLoader) {\n    return registeredLoader\n  }\n\n  // `@charcoal-ui/icon-files` に収録されているアイコンにはこれを返す\n  if (isKnownIconFile(name)) {\n    const charcoalIconFilesLoader = new CharcoalIconFilesLoader(name)\n\n    loaders.set(name, charcoalIconFilesLoader)\n    return charcoalIconFilesLoader\n  }\n\n  // 存在しないアイコンにはこれを返す\n  return null\n}\n","export const __SERVER__ = typeof window === 'undefined'\n\nconst CAN_USE_DOM = typeof HTMLElement !== 'undefined'\n\n// Workaround: `extends HTMLElement` の形式でないとbabelのトランスパイルがおかしくなる\nif (__SERVER__ || !CAN_USE_DOM) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.HTMLElement = class {} as any\n}\n","import { PixivIcon, Props } from './PixivIcon'\nimport { __SERVER__ } from './ssr'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { KNOWN_ICON_FILES } from './charcoalIconFiles'\nexport { PixivIconLoadError } from './loaders/PixivIconLoadError'\n\ndeclare global {\n  interface Window {\n    PixivIcon: typeof PixivIcon\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'pixiv-icon': Props\n    }\n  }\n}\n\nif (!__SERVER__) {\n  // TODO: HMR対応\n  if (!window.customElements.get(PixivIcon.tagName)) {\n    window.PixivIcon = PixivIcon\n    window.customElements.define(PixivIcon.tagName, PixivIcon)\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/PixivIcon.ts","../src/charcoalIconFiles.ts","../src/loaders/PixivIconLoadError.ts","../src/loaders/CharcoalIconFilesLoader.ts","../src/loaders/CustomIconLoader.ts","../src/loaders/index.ts","../src/ssr.ts","../src/index.ts"],"sourcesContent":["import type React from 'react'\nimport warning from 'warning'\nimport { KnownIconFile } from './charcoalIconFiles'\nimport { getIcon, addCustomIcon } from './loaders'\nimport { __SERVER__ } from './ssr'\n\nconst attributes = ['name', 'scale', 'unsafe-non-guideline-scale'] as const\n\nconst ROOT_MARGIN = 50\n\nexport interface KnownIconType extends Record<KnownIconFile, unknown> {}\n\nexport interface Props\n  extends Omit<\n    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,\n    'className' | 'css'\n  > {\n  name: keyof KnownIconType\n  scale?: 1 | 2 | 3 | '1' | '2' | '3'\n  'unsafe-non-guideline-scale'?: number | string\n\n  // CustomElements は className が使えない。class と書く必要がある\n  // https://ja.reactjs.org/docs/web-components.html#using-web-components-in-react\n  class?: string\n}\n\ntype ExtendedIconFile = Exclude<keyof KnownIconType, KnownIconFile>\ntype Extended = [ExtendedIconFile] extends [never] // NOTE: ExtendedIconFileがneverならKnownIconTypeは拡張されていない\n  ? false\n  : true\n\nexport class PixivIcon extends HTMLElement {\n  static readonly tagName = 'pixiv-icon'\n\n  /**\n   * NOTE: icon content should be sanitized before pass to extend()\n   */\n  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    warning(!__SERVER__, 'Using `PixivIcon.extend()` on server has no effect')\n    if (__SERVER__) {\n      return\n    }\n\n    Object.entries(map).forEach(([name, filePathOrUrl]) => {\n      if (!name.includes('/')) {\n        throw new TypeError(\n          `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n        )\n      }\n\n      addCustomIcon(name, filePathOrUrl)\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\n  private isVisible = false\n\n  get props() {\n    const partial = Object.fromEntries(\n      attributes.map((attribute) => [attribute, this.getAttribute(attribute)])\n    ) as Record<(typeof attributes)[number], string | null>\n\n    const name = partial.name\n\n    if (name === null) {\n      throw new TypeError('property \"name\" is required.')\n    }\n\n    if (!name.includes('/')) {\n      throw new TypeError(\n        `${name} is not a valid icon name. \"name\" must be named like [size]/[Name].`\n      )\n    }\n\n    return {\n      ...partial,\n      name,\n    }\n  }\n\n  get forceResizedSize() {\n    if (this.props['unsafe-non-guideline-scale'] === null) {\n      return null\n    }\n\n    const [size] = this.props.name.split('/')\n    const scale = Number(this.props['unsafe-non-guideline-scale'])\n\n    switch (size) {\n      case 'Inline': {\n        return 16 * scale\n      }\n\n      default: {\n        return Number(size) * scale\n      }\n    }\n  }\n\n  get scaledSize() {\n    const [size] = this.props.name.split('/')\n\n    const scale = Number(this.props.scale ?? '1')\n\n    switch (size) {\n      case 'Inline': {\n        switch (scale) {\n          case 2: {\n            return 32\n          }\n\n          default: {\n            return 16\n          }\n        }\n      }\n\n      case '24': {\n        return Number(size) * scale\n      }\n\n      default: {\n        return Number(size)\n      }\n    }\n  }\n\n  constructor() {\n    super()\n    this.attachShadow({ mode: 'open' })\n  }\n\n  async connectedCallback() {\n    this.render()\n    await this.waitUntilVisible()\n    this.isVisible = true\n    await this.loadSvg(this.props.name)\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.isVisible = false\n  }\n\n  attributeChangedCallback(\n    attr: string,\n    _oldValue: string | null,\n    newValue: string\n  ) {\n    // 非表示の場合はロードしない\n    if (!this.isVisible) {\n      return\n    }\n\n    // name が変更された場合必ず再読み込みを試みる\n    if (attr === 'name') {\n      void this.loadSvg(newValue)\n      return\n    }\n\n    // SVG が読み込み済み && scale などの変更だけならそこだけ反映すればいい\n    if (this.svgContent !== undefined) {\n      this.render()\n      return\n    }\n\n    // まだ SVG が読み込めてないなら load\n    void this.loadSvg(this.props.name)\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    if (!Number.isFinite(size)) {\n      throw new TypeError(`icon size must not be NaN`)\n    }\n\n    const style = `<style>\n  :host {\n    display: inline-flex;\n    --size: ${size}px;\n  }\n\n  svg {\n    width: var(--size);\n    height: var(--size);\n  }\n</style>`\n\n    const svg =\n      this.svgContent !== undefined\n        ? this.svgContent\n        : `<svg viewBox=\"0 0 ${size} ${size}\"></svg>`\n\n    // NOTE: User should sanitize the svg content before passing to charcoal.\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.shadowRoot!.innerHTML = style + svg\n  }\n\n  private async loadSvg(name: string) {\n    this.svgContent = await getIcon(name)\n    this.render()\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        (entries) => {\n          // In Chromium based browsers, multiple entries can be returned even only observe once.\n          // Here, we don't care about the entry time but only if isIntersecting happened.\n          const isIntersecting = entries.some((entry) => entry.isIntersecting)\n          if (isIntersecting) {\n            this.observer?.disconnect()\n            this.observer = undefined\n            resolve()\n          }\n        },\n        { rootMargin: `${ROOT_MARGIN}px` }\n      )\n\n      this.observer.observe(this)\n    })\n  }\n}\n","import charcoalIconFiles from '@charcoal-ui/icon-files'\n\nexport default charcoalIconFiles\nexport type KnownIconFile = keyof typeof charcoalIconFiles\nexport const KNOWN_ICON_FILES = Object.keys(\n  charcoalIconFiles\n) as KnownIconFile[]\n\nexport function isKnownIconFile(name: string): name is KnownIconFile {\n  return name in charcoalIconFiles\n}\n","export class PixivIconLoadError extends Error {\n  constructor(name: string, cause: unknown) {\n    const message = formatMessage(name, cause)\n\n    super(message, { cause })\n    this.name = 'PixivIconLoadError'\n    Object.setPrototypeOf(this, new.target.prototype)\n  }\n}\n\nfunction formatMessage(name: string, cause: unknown) {\n  const message = `Failed to fetch <pixiv-icon name=\"${name}\">`\n  if (cause == null) {\n    return message\n  }\n\n  if (cause instanceof Error) {\n    return `${message}: ${cause.toString()})`\n  }\n\n  return `${message}: ${JSON.stringify(cause)})`\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\nimport charcoalIconFiles, { KnownIconFile } from '../charcoalIconFiles'\n\n/**\n * `@charcoal-ui/icon-files` に収録されているアイコンを取ってくる\n */\nexport class CharcoalIconFilesLoader implements Loadable {\n  private _name: KnownIconFile\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: KnownIconFile) {\n    this._name = name\n  }\n\n  get importIconFile() {\n    return charcoalIconFiles[this._name]\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = this.importIconFile()\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { PixivIconLoadError } from './PixivIconLoadError'\nimport { Loadable } from './Loadable'\n\n/**\n * `PixivIcon.extend()` で登録されたカスタムのアイコンを取得する\n */\nexport class CustomIconLoader implements Loadable {\n  private _name: string\n  private _filePathOrUrl: string\n  private _resultSvg: string | undefined = undefined\n  private _promise: Promise<string> | undefined = undefined\n\n  constructor(name: string, filePathOrUrl: string) {\n    this._name = name\n    this._filePathOrUrl = filePathOrUrl\n  }\n\n  async fetch(): Promise<string> {\n    if (this._resultSvg !== undefined) {\n      return this._resultSvg\n    }\n\n    if (this._promise) {\n      return this._promise\n    }\n\n    this._promise = fetch(this._filePathOrUrl)\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(this._name, 'Response is not ok')\n        }\n\n        return response.text()\n      })\n      .then((svg) => {\n        this._resultSvg = svg\n        return this._resultSvg\n      })\n      .catch((e) => {\n        if (e instanceof PixivIconLoadError) {\n          throw e\n        }\n        throw new PixivIconLoadError(this._name, e)\n      })\n      .finally(() => {\n        this._promise = undefined\n      })\n\n    return this._promise\n  }\n}\n","import { isKnownIconFile } from '../charcoalIconFiles'\nimport { CharcoalIconFilesLoader } from './CharcoalIconFilesLoader'\nimport { CustomIconLoader } from './CustomIconLoader'\nimport { Loadable } from './Loadable'\nimport { PixivIconLoadError } from './PixivIconLoadError'\n\n/**\n * icon をロードするオブジェクトのプール。Loader のインスタンスは作り次第ここに入れる\n *\n * 同じアイコンへの複数回のリクエストが起きないためには、Loader がこの中でユニークでないと行けない\n */\nconst loaders = new Map<string, Loadable>()\n\nexport function addCustomIcon(name: string, filePathOrUrl: string) {\n  loaders.set(name, new CustomIconLoader(name, filePathOrUrl))\n}\n\nexport async function getIcon(name: string) {\n  const loader = resolveIconLoader(name)\n  if (loader == null) {\n    throw new PixivIconLoadError(name, 'Loader was not found')\n  }\n\n  return loader.fetch().catch((e) => {\n    if (e instanceof PixivIconLoadError) {\n      throw e\n    }\n\n    throw new PixivIconLoadError(name, e)\n  })\n}\n\nfunction resolveIconLoader(name: string) {\n  // 登録済み or キャッシュ済みの場合\n  // addCustomIcon で登録された CustomIconLoader は常にこっちを通る\n  const registeredLoader = loaders.get(name)\n  if (registeredLoader) {\n    return registeredLoader\n  }\n\n  // `@charcoal-ui/icon-files` に収録されているアイコンにはこれを返す\n  if (isKnownIconFile(name)) {\n    const charcoalIconFilesLoader = new CharcoalIconFilesLoader(name)\n\n    loaders.set(name, charcoalIconFilesLoader)\n    return charcoalIconFilesLoader\n  }\n\n  // 存在しないアイコンにはこれを返す\n  return null\n}\n","export const __SERVER__ = typeof window === 'undefined'\n\nconst CAN_USE_DOM = typeof HTMLElement !== 'undefined'\n\n// Workaround: `extends HTMLElement` の形式でないとbabelのトランスパイルがおかしくなる\nif (__SERVER__ || !CAN_USE_DOM) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  globalThis.HTMLElement = class {} as any\n}\n","import { PixivIcon } from './PixivIcon'\nimport { __SERVER__ } from './ssr'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { KNOWN_ICON_FILES } from './charcoalIconFiles'\nexport { PixivIconLoadError } from './loaders/PixivIconLoadError'\n\ndeclare global {\n  interface Window {\n    PixivIcon: typeof PixivIcon\n  }\n}\n\ndeclare module 'react' {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  export namespace JSX {\n    interface IntrinsicElements {\n      'pixiv-icon': import('./PixivIcon').Props\n    }\n  }\n}\n\nif (!__SERVER__) {\n  // TODO: HMR対応\n  if (!window.customElements.get(PixivIcon.tagName)) {\n    window.PixivIcon = PixivIcon\n    window.customElements.define(PixivIcon.tagName, PixivIcon)\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons",
-  "version": "4.2.0",
+  "version": "4.3.0-beta.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -21,22 +21,23 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@storybook/react": "^8.0.5",
+    "@storybook/react": "^8.5.5",
     "@types/react": "^18.3.3",
     "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
-    "@types/webpack-env": "^1.18.1",
+    "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
+    "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.11",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.1"
   },
   "dependencies": {
-    "@charcoal-ui/icon-files": "^4.2.0",
+    "@charcoal-ui/icon-files": "4.3.0-beta.0",
     "warning": "^4.0.3"
   },
   "files": [
@@ -52,5 +53,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/icons"
   },
-  "gitHead": "45c93231d4b0feffe8f3a6bef2cdab96302c8eb4"
+  "gitHead": "864fc9a6c8ad391df01c7765ab0dff66842c612d"
 }

package/src/PixivIcon.story.tsx

@@ -11,7 +11,7 @@ PixivIcon.extend({
   '16/TestIconThatNeverExists': TestIconThatNeverExists,
 })
 
-export default {
+const meta: Meta<Props> = {
   title: 'Icons/PixivIcon (<pixiv-icon>)',
   argTypes: {
     color: {
@@ -57,7 +57,9 @@ export default {
       <Global />
     </>
   ),
-} as Meta<Props>
+}
+
+export default meta
 
 const groupedIcons = KNOWN_ICON_FILES.reduce<Record<string, KnownIconFile[]>>(
   (map, icon) => {

package/src/PixivIcon.test.tsx

@@ -17,7 +17,7 @@ describe('PixivIcon', () => {
   })
 
   it('can createElement()', () => {
-    expect(icon).toBeInstanceOf(PixivIcon)
+    expect(icon.constructor.name).toBe('PixivIcon')
   })
 
   // describe('loaders', () => {

package/src/index.ts

@@ -1,4 +1,4 @@
-import { PixivIcon, Props } from './PixivIcon'
+import { PixivIcon } from './PixivIcon'
 import { __SERVER__ } from './ssr'
 export { PixivIcon, type KnownIconType, type Props } from './PixivIcon'
 export { KNOWN_ICON_FILES } from './charcoalIconFiles'
@@ -8,11 +8,13 @@ declare global {
   interface Window {
     PixivIcon: typeof PixivIcon
   }
+}
 
+declare module 'react' {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   export namespace JSX {
     interface IntrinsicElements {
-      'pixiv-icon': Props
+      'pixiv-icon': import('./PixivIcon').Props
     }
   }
 }