@charcoal-ui/icons 1.0.0 → 1.0.1-alpha.0

package/dist/PixivIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixivIcon.d.ts","sourceRoot":"","sources":["../src/PixivIcon.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAQ3C,MAAM,WAAW,aAAc,SAAQ,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;CAAG;AAExE,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,EACvE,WAAW,CACZ;IACD,IAAI,EAAE,MAAM,aAAa,CAAA;IACzB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IACnC,4BAA4B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAI9C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAID,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,aAAa,EAAE,aAAa,CAAC,CAAA;AACnE,aAAK,QAAQ,GAAG,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,GAC9C,KAAK,GACL,IAAI,CAAA;AAER,qBAAa,SAAU,SAAQ,WAAW;IACxC,MAAM,CAAC,QAAQ,CAAC,OAAO,gBAAe;IAEtC,MAAM,CAAC,MAAM,CACX,GAAG,EAAE,QAAQ,SAAS,IAAI,GACtB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAChC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAe5B,MAAM,KAAK,kBAAkB,6DAE5B;IAED,OAAO,CAAC,UAAU,CAAC,CAAQ;IAC3B,OAAO,CAAC,QAAQ,CAAC,CAAsB;IAEvC,IAAI,KAAK;;;;MAqBR;IAED,IAAI,gBAAgB,kBAiBnB;IAED,IAAI,UAAU,WA0Bb;;IAOD,iBAAiB;IAKjB,oBAAoB;IAKpB,wBAAwB;IAIxB,MAAM;IAwBN,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,gBAAgB;CAgBzB"}
+{"version":3,"file":"PixivIcon.d.ts","sourceRoot":"","sources":["../src/PixivIcon.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAQ3C,MAAM,WAAW,aAAc,SAAQ,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC;CAAG;AAExE,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,EACvE,WAAW,CACZ;IACD,IAAI,EAAE,MAAM,aAAa,CAAA;IACzB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IACnC,4BAA4B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAI9C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAID,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,aAAa,EAAE,aAAa,CAAC,CAAA;AACnE,aAAK,QAAQ,GAAG,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,GAC9C,KAAK,GACL,IAAI,CAAA;AAER,qBAAa,SAAU,SAAQ,WAAW;IACxC,MAAM,CAAC,QAAQ,CAAC,OAAO,gBAAe;IAEtC,MAAM,CAAC,MAAM,CACX,GAAG,EAAE,QAAQ,SAAS,IAAI,GACtB,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAChC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAe5B,MAAM,KAAK,kBAAkB,6DAE5B;IAED,OAAO,CAAC,UAAU,CAAC,CAAQ;IAC3B,OAAO,CAAC,QAAQ,CAAC,CAAsB;IAEvC,IAAI,KAAK;;;;MAqBR;IAED,IAAI,gBAAgB,kBAiBnB;IAED,IAAI,UAAU,WA0Bb;;IAOD,iBAAiB;IAKjB,oBAAoB;IAKpB,wBAAwB;IAIxB,MAAM;IAyBN,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,gBAAgB;CAgBzB"}

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/loaders.ts","../src/PixivIcon.ts","../src/index.ts"],"sourcesContent":["const cache = new Map<string, string>()\n\ninterface SvgModule {\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  __esModule: true\n  default: string\n}\n\nexport class PixivIconLoadError extends Error {\n  constructor(message?: string) {\n    super(message)\n    Object.setPrototypeOf(this, new.target)\n  }\n}\n\nfunction createLoader(getPath: (attributeName: string) => Promise<string>) {\n  return async function getSvgString(attributeName: string): Promise<string> {\n    if (cache.has(attributeName)) {\n      return cache.get(attributeName)!\n    }\n\n    const rawSvg = await getPath(attributeName)\n      .then((path) => fetch(path))\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(\n            `Failed to fetch <pixiv-icon name=\"${attributeName}\">`\n          )\n        }\n\n        return response.text()\n      })\n\n    cache.set(attributeName, rawSvg)\n\n    return rawSvg\n  }\n}\n\nexport type Loader = ReturnType<typeof createLoader>\n\nconst loadFromRawUrl: Loader = createLoader((attributeName) =>\n  Promise.resolve(attributeName)\n)\n\nconst loadFromFile: Loader = createLoader(async (attributeName) => {\n  const [size, name] = attributeName.split('/')\n\n  const { default: filename } = (await import(\n    `../svg/${encodeURIComponent(size)}/${encodeURIComponent(name)}.svg`\n  )) as SvgModule\n\n  return filename\n})\n\nexport const loaders = { loadFromRawUrl, loadFromFile }\n","import { html, render } from 'lit-html'\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'\nimport type React from 'react'\nimport { KnownIconFile } from './filenames'\nimport { loaders as defaultLoaders, Loader } from './loaders'\nconst { loadFromFile, loadFromRawUrl } = defaultLoaders\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'\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\nconst loaders = new Map<string, Loader>()\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  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    Object.entries(map).forEach(([name, url]) => {\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      loaders.set(name, function customLoader() {\n        return loadFromRawUrl(url)\n      })\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\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  connectedCallback() {\n    this.render()\n    this.update()\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  attributeChangedCallback() {\n    this.update()\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    return render(\n      html`\n        <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        ${this.svgContent !== undefined\n          ? unsafeSVG(this.svgContent)\n          : html`<svg viewBox=\"0 0 ${size} ${size}\"></svg>`}\n      `,\n      this.shadowRoot!\n    )\n  }\n\n  private update() {\n    void this.waitUntilVisible().then(async () => {\n      const { name } = this.props\n      const loader = loaders.get(name) ?? loadFromFile\n\n      this.svgContent = await loader(name)\n      this.render()\n    })\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        ([first]) => {\n          if (first.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 { PixivIcon, Props } from './PixivIcon'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { PixivIconLoadError } from './loaders'\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\n// TODO: HMR対応\nif (!window.customElements.get(PixivIcon.tagName)) {\n  window.PixivIcon = PixivIcon\n  window.customElements.define(PixivIcon.tagName, PixivIcon)\n}\n"],"names":["cache","Map","PixivIconLoadError","message","_this","Object","setPrototypeOf","Error","createLoader","getPath","attributeName","has","get","then","path","fetch","response","ok","text","rawSvg","set","loaders","loadFromRawUrl","Promise","resolve","loadFromFile","split","name","encodeURIComponent","defaultLoaders","attributes","PixivIcon","svgContent","observer","attachShadow","mode","extend","map","entries","forEach","url","includes","TypeError","connectedCallback","this","render","update","disconnectedCallback","disconnect","undefined","attributeChangedCallback","size","forceResizedSize","scaledSize","html","unsafeSVG","shadowRoot","waitUntilVisible","_this2","props","loader","_this3","IntersectionObserver","isIntersecting","rootMargin","ROOT_MARGIN","observe","partial","fromEntries","attribute","_this4","getAttribute","scale","Number","HTMLElement","tagName","window","customElements","define"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/loaders.ts","../src/PixivIcon.ts","../src/index.ts"],"sourcesContent":["const cache = new Map<string, string>()\n\ninterface SvgModule {\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  __esModule: true\n  default: string\n}\n\nexport class PixivIconLoadError extends Error {\n  constructor(message?: string) {\n    super(message)\n    Object.setPrototypeOf(this, new.target)\n  }\n}\n\nfunction createLoader(getPath: (attributeName: string) => Promise<string>) {\n  return async function getSvgString(attributeName: string): Promise<string> {\n    if (cache.has(attributeName)) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      return cache.get(attributeName)!\n    }\n\n    const rawSvg = await getPath(attributeName)\n      .then((path) => fetch(path))\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(\n            `Failed to fetch <pixiv-icon name=\"${attributeName}\">`\n          )\n        }\n\n        return response.text()\n      })\n\n    cache.set(attributeName, rawSvg)\n\n    return rawSvg\n  }\n}\n\nexport type Loader = ReturnType<typeof createLoader>\n\nconst loadFromRawUrl: Loader = createLoader((attributeName) =>\n  Promise.resolve(attributeName)\n)\n\nconst loadFromFile: Loader = createLoader(async (attributeName) => {\n  const [size, name] = attributeName.split('/')\n\n  const { default: filename } = (await import(\n    `../svg/${encodeURIComponent(size)}/${encodeURIComponent(name)}.svg`\n  )) as SvgModule\n\n  return filename\n})\n\nexport const loaders = { loadFromRawUrl, loadFromFile }\n","import { html, render } from 'lit-html'\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'\nimport type React from 'react'\nimport { KnownIconFile } from './filenames'\nimport { loaders as defaultLoaders, Loader } from './loaders'\nconst { loadFromFile, loadFromRawUrl } = defaultLoaders\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'\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\nconst loaders = new Map<string, Loader>()\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  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    Object.entries(map).forEach(([name, url]) => {\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      loaders.set(name, function customLoader() {\n        return loadFromRawUrl(url)\n      })\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\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  connectedCallback() {\n    this.render()\n    this.update()\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  attributeChangedCallback() {\n    this.update()\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    return render(\n      html`\n        <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        ${this.svgContent !== undefined\n          ? unsafeSVG(this.svgContent)\n          : html`<svg viewBox=\"0 0 ${size} ${size}\"></svg>`}\n      `,\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      this.shadowRoot!\n    )\n  }\n\n  private update() {\n    void this.waitUntilVisible().then(async () => {\n      const { name } = this.props\n      const loader = loaders.get(name) ?? loadFromFile\n\n      this.svgContent = await loader(name)\n      this.render()\n    })\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        ([first]) => {\n          if (first.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 { PixivIcon, Props } from './PixivIcon'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { PixivIconLoadError } from './loaders'\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\n// TODO: HMR対応\nif (!window.customElements.get(PixivIcon.tagName)) {\n  window.PixivIcon = PixivIcon\n  window.customElements.define(PixivIcon.tagName, PixivIcon)\n}\n"],"names":["cache","Map","PixivIconLoadError","message","_this","Object","setPrototypeOf","Error","createLoader","getPath","attributeName","has","get","then","path","fetch","response","ok","text","rawSvg","set","loaders","loadFromRawUrl","Promise","resolve","loadFromFile","split","name","encodeURIComponent","defaultLoaders","attributes","PixivIcon","svgContent","observer","attachShadow","mode","extend","map","entries","forEach","url","includes","TypeError","connectedCallback","this","render","update","disconnectedCallback","disconnect","undefined","attributeChangedCallback","size","forceResizedSize","scaledSize","html","unsafeSVG","shadowRoot","waitUntilVisible","_this2","props","loader","_this3","IntersectionObserver","isIntersecting","rootMargin","ROOT_MARGIN","observe","partial","fromEntries","attribute","_this4","getAttribute","scale","Number","HTMLElement","tagName","window","customElements","define"],"mappings":"u9DAAA,IAAMA,EAAQ,IAAIC,IAQLC,2BACX,WAAYC,gBACVC,cAAMD,SACNE,OAAOC,yLAHX,gCAAwCC,QAOxC,SAASC,EAAaC,GACpB,gBAAmCC,OACjC,OAAIV,EAAMW,IAAID,mBAELV,EAAMY,IAAIF,oBAGED,EAAQC,GAC1BG,KAAK,SAACC,UAASC,MAAMD,KACrBD,KAAK,SAACG,GACL,IAAKA,EAASC,GACZ,UAAUf,uCAC6BQ,QAIzC,OAAOM,EAASE,wBATdC,GAcN,OAFAnB,EAAMoB,IAAIV,EAAeS,GAElBA,IApBT,oCA0BF,QAcaE,EAAU,CAAEC,eAdMd,EAAa,SAACE,UAC3Ca,QAAQC,QAAQd,KAauBe,aAVZjB,WAAoBE,OAC/C,MAAqBA,EAAcgB,MAAM,KAA5BC,2CAGDC,6BAA4BA,mBAAmBD,mGAG3D,mBAPuC,kCAGF,SC5C/BF,EAAiCI,EAAjCJ,aAAcH,EAAmBO,EAAnBP,eAEhBQ,EAAa,CAAC,OAAQ,QAAS,8BAoB/BT,EAAU,IAAIpB,IAOP8B,2BAkGX,0BACE3B,sBA1EM4B,oBACAC,gBA0EN7B,EAAK8B,aAAa,CAAEC,KAAM,oBAjGrBC,OAAP,SACEC,GAIAhC,OAAOiC,QAAQD,GAAKE,QAAQ,gBAAEZ,OAAMa,OAClC,IAAKb,EAAKc,SAAS,KACjB,UAAUC,UACLf,yEAIPN,EAAQD,IAAIO,EAAM,WAChB,OAAOL,EAAekB,QAhB9B,iCAuGEG,kBAAA,WACEC,KAAKC,SACLD,KAAKE,YAGPC,qBAAA,+BACOd,aAAUe,aACfJ,KAAKX,cAAWgB,KAGlBC,yBAAA,WACEN,KAAKE,YAGPD,OAAA,iBACQM,WAAOP,KAAKQ,oBAAoBR,KAAKS,WAE3C,OAAOR,SACLS,gRAIgBH,OAQQF,IAApBL,KAAKZ,WACHuB,YAAUX,KAAKZ,YACfsB,uDAAyBH,EAAQA,IAGvCP,KAAKY,eAIDV,OAAA,iBAEaF,UADTa,mBAAmB5C,0BACnBc,EAAS+B,EAAKC,MAAdhC,KACFiC,WAASvC,EAAQT,IAAIe,MAASF,yBAEZmC,EAAOjC,qBAA/B+B,EAAK1B,aACL0B,EAAKb,WALF,wCASCY,iBAAA,sBACN,WAAWlC,QAAc,SAACC,GACxBqC,EAAK5B,SAAW,IAAI6B,qBAClB,uBACYC,0BACRF,EAAK5B,aAAUe,aACfa,EAAK5B,cAAWgB,EAChBzB,MAGJ,CAAEwC,WAAeC,SAGnBJ,EAAK5B,SAASiC,QAAQL,2CAhJ1B,WACE,OAAO/B,0BAMT,sBACQqC,EAAU9D,OAAO+D,YACrBtC,EAAWO,IAAI,SAACgC,SAAc,CAACA,EAAWC,EAAKC,aAAaF,OAGxD1C,EAAOwC,EAAQxC,KAErB,GAAa,OAATA,EACF,UAAUe,UAAU,gCAGtB,IAAKf,EAAKc,SAAS,KACjB,UAAUC,UACLf,yEAIP,YACKwC,GACHxC,KAAAA,kCAIJ,WACE,GAAiD,OAA7CiB,KAAKe,MAAM,8BACb,YAGF,IAAOR,EAAQP,KAAKe,MAAMhC,KAAKD,MAAM,QAC/B8C,EAAQC,OAAO7B,KAAKe,MAAM,+BAEhC,MACO,WADCR,KAEQqB,EAILC,OAAOtB,GAAQqB,0BAK5B,iBACSrB,EAAQP,KAAKe,MAAMhC,KAAKD,MAAM,QAE/B8C,EAAQC,gBAAO7B,KAAKe,MAAMa,SAAS,KAEzC,OAAQrB,GACN,IAAK,SACH,WAAQqB,QAWV,IAAK,KACH,OAAOC,OAAOtB,GAAQqB,EAGxB,QACE,OAAOC,OAAOtB,yGA7FSuB,cAAlB3C,EACK4C,QAAU,aCjBvBC,OAAOC,eAAejE,IAAImB,EAAU4C,WACvCC,OAAO7C,UAAYA,EACnB6C,OAAOC,eAAeC,OAAO/C,EAAU4C,QAAS5C"}

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/loaders.ts","../src/PixivIcon.ts","../src/index.ts"],"sourcesContent":["const cache = new Map<string, string>()\n\ninterface SvgModule {\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  __esModule: true\n  default: string\n}\n\nexport class PixivIconLoadError extends Error {\n  constructor(message?: string) {\n    super(message)\n    Object.setPrototypeOf(this, new.target)\n  }\n}\n\nfunction createLoader(getPath: (attributeName: string) => Promise<string>) {\n  return async function getSvgString(attributeName: string): Promise<string> {\n    if (cache.has(attributeName)) {\n      return cache.get(attributeName)!\n    }\n\n    const rawSvg = await getPath(attributeName)\n      .then((path) => fetch(path))\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(\n            `Failed to fetch <pixiv-icon name=\"${attributeName}\">`\n          )\n        }\n\n        return response.text()\n      })\n\n    cache.set(attributeName, rawSvg)\n\n    return rawSvg\n  }\n}\n\nexport type Loader = ReturnType<typeof createLoader>\n\nconst loadFromRawUrl: Loader = createLoader((attributeName) =>\n  Promise.resolve(attributeName)\n)\n\nconst loadFromFile: Loader = createLoader(async (attributeName) => {\n  const [size, name] = attributeName.split('/')\n\n  const { default: filename } = (await import(\n    `../svg/${encodeURIComponent(size)}/${encodeURIComponent(name)}.svg`\n  )) as SvgModule\n\n  return filename\n})\n\nexport const loaders = { loadFromRawUrl, loadFromFile }\n","import { html, render } from 'lit-html'\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'\nimport type React from 'react'\nimport { KnownIconFile } from './filenames'\nimport { loaders as defaultLoaders, Loader } from './loaders'\nconst { loadFromFile, loadFromRawUrl } = defaultLoaders\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'\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\nconst loaders = new Map<string, Loader>()\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  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    Object.entries(map).forEach(([name, url]) => {\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      loaders.set(name, function customLoader() {\n        return loadFromRawUrl(url)\n      })\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\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  connectedCallback() {\n    this.render()\n    this.update()\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  attributeChangedCallback() {\n    this.update()\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    return render(\n      html`\n        <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        ${this.svgContent !== undefined\n          ? unsafeSVG(this.svgContent)\n          : html`<svg viewBox=\"0 0 ${size} ${size}\"></svg>`}\n      `,\n      this.shadowRoot!\n    )\n  }\n\n  private update() {\n    void this.waitUntilVisible().then(async () => {\n      const { name } = this.props\n      const loader = loaders.get(name) ?? loadFromFile\n\n      this.svgContent = await loader(name)\n      this.render()\n    })\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        ([first]) => {\n          if (first.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 { PixivIcon, Props } from './PixivIcon'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { PixivIconLoadError } from './loaders'\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\n// TODO: HMR対応\nif (!window.customElements.get(PixivIcon.tagName)) {\n  window.PixivIcon = PixivIcon\n  window.customElements.define(PixivIcon.tagName, PixivIcon)\n}\n"],"names":["cache","Map","PixivIconLoadError","Error","constructor","message","super","Object","setPrototypeOf","this","createLoader","getPath","attributeName","has","get","rawSvg","then","path","fetch","response","ok","text","set","loaders","Promise","resolve","async","size","name","split","default","filename","encodeURIComponent","loadFromFile","loadFromRawUrl","defaultLoaders","attributes","PixivIcon","HTMLElement","static","map","entries","forEach","url","includes","TypeError","observedAttributes","props","partial","fromEntries","attribute","getAttribute","forceResizedSize","scale","Number","scaledSize","svgContent","observer","attachShadow","mode","connectedCallback","render","update","disconnectedCallback","disconnect","undefined","attributeChangedCallback","html","unsafeSVG","shadowRoot","waitUntilVisible","_this","loader","IntersectionObserver","first","isIntersecting","rootMargin","observe","tagName","window","customElements","define"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/loaders.ts","../src/PixivIcon.ts","../src/index.ts"],"sourcesContent":["const cache = new Map<string, string>()\n\ninterface SvgModule {\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  __esModule: true\n  default: string\n}\n\nexport class PixivIconLoadError extends Error {\n  constructor(message?: string) {\n    super(message)\n    Object.setPrototypeOf(this, new.target)\n  }\n}\n\nfunction createLoader(getPath: (attributeName: string) => Promise<string>) {\n  return async function getSvgString(attributeName: string): Promise<string> {\n    if (cache.has(attributeName)) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      return cache.get(attributeName)!\n    }\n\n    const rawSvg = await getPath(attributeName)\n      .then((path) => fetch(path))\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(\n            `Failed to fetch <pixiv-icon name=\"${attributeName}\">`\n          )\n        }\n\n        return response.text()\n      })\n\n    cache.set(attributeName, rawSvg)\n\n    return rawSvg\n  }\n}\n\nexport type Loader = ReturnType<typeof createLoader>\n\nconst loadFromRawUrl: Loader = createLoader((attributeName) =>\n  Promise.resolve(attributeName)\n)\n\nconst loadFromFile: Loader = createLoader(async (attributeName) => {\n  const [size, name] = attributeName.split('/')\n\n  const { default: filename } = (await import(\n    `../svg/${encodeURIComponent(size)}/${encodeURIComponent(name)}.svg`\n  )) as SvgModule\n\n  return filename\n})\n\nexport const loaders = { loadFromRawUrl, loadFromFile }\n","import { html, render } from 'lit-html'\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'\nimport type React from 'react'\nimport { KnownIconFile } from './filenames'\nimport { loaders as defaultLoaders, Loader } from './loaders'\nconst { loadFromFile, loadFromRawUrl } = defaultLoaders\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'\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\nconst loaders = new Map<string, Loader>()\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  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    Object.entries(map).forEach(([name, url]) => {\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      loaders.set(name, function customLoader() {\n        return loadFromRawUrl(url)\n      })\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\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  connectedCallback() {\n    this.render()\n    this.update()\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  attributeChangedCallback() {\n    this.update()\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    return render(\n      html`\n        <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        ${this.svgContent !== undefined\n          ? unsafeSVG(this.svgContent)\n          : html`<svg viewBox=\"0 0 ${size} ${size}\"></svg>`}\n      `,\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      this.shadowRoot!\n    )\n  }\n\n  private update() {\n    void this.waitUntilVisible().then(async () => {\n      const { name } = this.props\n      const loader = loaders.get(name) ?? loadFromFile\n\n      this.svgContent = await loader(name)\n      this.render()\n    })\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        ([first]) => {\n          if (first.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 { PixivIcon, Props } from './PixivIcon'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { PixivIconLoadError } from './loaders'\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\n// TODO: HMR対応\nif (!window.customElements.get(PixivIcon.tagName)) {\n  window.PixivIcon = PixivIcon\n  window.customElements.define(PixivIcon.tagName, PixivIcon)\n}\n"],"names":["cache","Map","PixivIconLoadError","Error","constructor","message","super","Object","setPrototypeOf","this","createLoader","getPath","attributeName","has","get","rawSvg","then","path","fetch","response","ok","text","set","loaders","Promise","resolve","async","size","name","split","default","filename","encodeURIComponent","loadFromFile","loadFromRawUrl","defaultLoaders","attributes","PixivIcon","HTMLElement","static","map","entries","forEach","url","includes","TypeError","observedAttributes","props","partial","fromEntries","attribute","getAttribute","forceResizedSize","scale","Number","scaledSize","svgContent","observer","attachShadow","mode","connectedCallback","render","update","disconnectedCallback","disconnect","undefined","attributeChangedCallback","html","unsafeSVG","shadowRoot","waitUntilVisible","_this","loader","IntersectionObserver","first","isIntersecting","rootMargin","observe","tagName","window","customElements","define"],"mappings":"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"}

package/dist/index.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.js","sources":["../src/loaders.ts","../src/PixivIcon.ts","../src/index.ts"],"sourcesContent":["const cache = new Map<string, string>()\n\ninterface SvgModule {\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  __esModule: true\n  default: string\n}\n\nexport class PixivIconLoadError extends Error {\n  constructor(message?: string) {\n    super(message)\n    Object.setPrototypeOf(this, new.target)\n  }\n}\n\nfunction createLoader(getPath: (attributeName: string) => Promise<string>) {\n  return async function getSvgString(attributeName: string): Promise<string> {\n    if (cache.has(attributeName)) {\n      return cache.get(attributeName)!\n    }\n\n    const rawSvg = await getPath(attributeName)\n      .then((path) => fetch(path))\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(\n            `Failed to fetch <pixiv-icon name=\"${attributeName}\">`\n          )\n        }\n\n        return response.text()\n      })\n\n    cache.set(attributeName, rawSvg)\n\n    return rawSvg\n  }\n}\n\nexport type Loader = ReturnType<typeof createLoader>\n\nconst loadFromRawUrl: Loader = createLoader((attributeName) =>\n  Promise.resolve(attributeName)\n)\n\nconst loadFromFile: Loader = createLoader(async (attributeName) => {\n  const [size, name] = attributeName.split('/')\n\n  const { default: filename } = (await import(\n    `../svg/${encodeURIComponent(size)}/${encodeURIComponent(name)}.svg`\n  )) as SvgModule\n\n  return filename\n})\n\nexport const loaders = { loadFromRawUrl, loadFromFile }\n","import { html, render } from 'lit-html'\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'\nimport type React from 'react'\nimport { KnownIconFile } from './filenames'\nimport { loaders as defaultLoaders, Loader } from './loaders'\nconst { loadFromFile, loadFromRawUrl } = defaultLoaders\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'\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\nconst loaders = new Map<string, Loader>()\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  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    Object.entries(map).forEach(([name, url]) => {\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      loaders.set(name, function customLoader() {\n        return loadFromRawUrl(url)\n      })\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\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  connectedCallback() {\n    this.render()\n    this.update()\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  attributeChangedCallback() {\n    this.update()\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    return render(\n      html`\n        <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        ${this.svgContent !== undefined\n          ? unsafeSVG(this.svgContent)\n          : html`<svg viewBox=\"0 0 ${size} ${size}\"></svg>`}\n      `,\n      this.shadowRoot!\n    )\n  }\n\n  private update() {\n    void this.waitUntilVisible().then(async () => {\n      const { name } = this.props\n      const loader = loaders.get(name) ?? loadFromFile\n\n      this.svgContent = await loader(name)\n      this.render()\n    })\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        ([first]) => {\n          if (first.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 { PixivIcon, Props } from './PixivIcon'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { PixivIconLoadError } from './loaders'\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\n// TODO: HMR対応\nif (!window.customElements.get(PixivIcon.tagName)) {\n  window.PixivIcon = PixivIcon\n  window.customElements.define(PixivIcon.tagName, PixivIcon)\n}\n"],"names":["cache","Map","PixivIconLoadError","message","_this","Object","setPrototypeOf","Error","createLoader","getPath","attributeName","has","get","then","path","fetch","response","ok","text","rawSvg","set","loaders","loadFromRawUrl","Promise","resolve","loadFromFile","split","name","import","encodeURIComponent","defaultLoaders","attributes","PixivIcon","svgContent","observer","attachShadow","mode","extend","map","entries","forEach","url","includes","TypeError","connectedCallback","this","render","update","disconnectedCallback","disconnect","undefined","attributeChangedCallback","size","forceResizedSize","scaledSize","html","unsafeSVG","shadowRoot","waitUntilVisible","_this2","props","loader","_this3","IntersectionObserver","isIntersecting","rootMargin","ROOT_MARGIN","observe","partial","fromEntries","attribute","_this4","getAttribute","scale","Number","HTMLElement","tagName","window","customElements","define"],"mappings":"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"}
+{"version":3,"file":"index.module.js","sources":["../src/loaders.ts","../src/PixivIcon.ts","../src/index.ts"],"sourcesContent":["const cache = new Map<string, string>()\n\ninterface SvgModule {\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  __esModule: true\n  default: string\n}\n\nexport class PixivIconLoadError extends Error {\n  constructor(message?: string) {\n    super(message)\n    Object.setPrototypeOf(this, new.target)\n  }\n}\n\nfunction createLoader(getPath: (attributeName: string) => Promise<string>) {\n  return async function getSvgString(attributeName: string): Promise<string> {\n    if (cache.has(attributeName)) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      return cache.get(attributeName)!\n    }\n\n    const rawSvg = await getPath(attributeName)\n      .then((path) => fetch(path))\n      .then((response) => {\n        if (!response.ok) {\n          throw new PixivIconLoadError(\n            `Failed to fetch <pixiv-icon name=\"${attributeName}\">`\n          )\n        }\n\n        return response.text()\n      })\n\n    cache.set(attributeName, rawSvg)\n\n    return rawSvg\n  }\n}\n\nexport type Loader = ReturnType<typeof createLoader>\n\nconst loadFromRawUrl: Loader = createLoader((attributeName) =>\n  Promise.resolve(attributeName)\n)\n\nconst loadFromFile: Loader = createLoader(async (attributeName) => {\n  const [size, name] = attributeName.split('/')\n\n  const { default: filename } = (await import(\n    `../svg/${encodeURIComponent(size)}/${encodeURIComponent(name)}.svg`\n  )) as SvgModule\n\n  return filename\n})\n\nexport const loaders = { loadFromRawUrl, loadFromFile }\n","import { html, render } from 'lit-html'\nimport { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'\nimport type React from 'react'\nimport { KnownIconFile } from './filenames'\nimport { loaders as defaultLoaders, Loader } from './loaders'\nconst { loadFromFile, loadFromRawUrl } = defaultLoaders\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'\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\nconst loaders = new Map<string, Loader>()\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  static extend(\n    map: Extended extends true\n      ? Record<ExtendedIconFile, string>\n      : Record<string, string>\n  ) {\n    Object.entries(map).forEach(([name, url]) => {\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      loaders.set(name, function customLoader() {\n        return loadFromRawUrl(url)\n      })\n    })\n  }\n\n  static get observedAttributes() {\n    return attributes\n  }\n\n  private svgContent?: string\n  private observer?: IntersectionObserver\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  connectedCallback() {\n    this.render()\n    this.update()\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  attributeChangedCallback() {\n    this.update()\n  }\n\n  render() {\n    const size = this.forceResizedSize ?? this.scaledSize\n\n    return render(\n      html`\n        <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        ${this.svgContent !== undefined\n          ? unsafeSVG(this.svgContent)\n          : html`<svg viewBox=\"0 0 ${size} ${size}\"></svg>`}\n      `,\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      this.shadowRoot!\n    )\n  }\n\n  private update() {\n    void this.waitUntilVisible().then(async () => {\n      const { name } = this.props\n      const loader = loaders.get(name) ?? loadFromFile\n\n      this.svgContent = await loader(name)\n      this.render()\n    })\n  }\n\n  private waitUntilVisible() {\n    return new Promise<void>((resolve) => {\n      this.observer = new IntersectionObserver(\n        ([first]) => {\n          if (first.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 { PixivIcon, Props } from './PixivIcon'\nexport { PixivIcon, type KnownIconType, type Props } from './PixivIcon'\nexport { PixivIconLoadError } from './loaders'\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\n// TODO: HMR対応\nif (!window.customElements.get(PixivIcon.tagName)) {\n  window.PixivIcon = PixivIcon\n  window.customElements.define(PixivIcon.tagName, PixivIcon)\n}\n"],"names":["cache","Map","PixivIconLoadError","message","_this","Object","setPrototypeOf","Error","createLoader","getPath","attributeName","has","get","then","path","fetch","response","ok","text","rawSvg","set","loaders","loadFromRawUrl","Promise","resolve","loadFromFile","split","name","import","encodeURIComponent","defaultLoaders","attributes","PixivIcon","svgContent","observer","attachShadow","mode","extend","map","entries","forEach","url","includes","TypeError","connectedCallback","this","render","update","disconnectedCallback","disconnect","undefined","attributeChangedCallback","size","forceResizedSize","scaledSize","html","unsafeSVG","shadowRoot","waitUntilVisible","_this2","props","loader","_this3","IntersectionObserver","isIntersecting","rootMargin","ROOT_MARGIN","observe","partial","fromEntries","attribute","_this4","getAttribute","scale","Number","HTMLElement","tagName","window","customElements","define"],"mappings":"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"}

package/dist/loaders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loaders.d.ts","sourceRoot":"","sources":["../src/loaders.ts"],"names":[],"mappings":"AAQA,qBAAa,kBAAmB,SAAQ,KAAK;gBAC/B,OAAO,CAAC,EAAE,MAAM;CAI7B;AAED,iBAAS,YAAY,CAAC,OAAO,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,mBACrB,MAAM,KAAG,QAAQ,MAAM,CAAC,CAqB3E;AAED,oBAAY,MAAM,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;AAgBpD,eAAO,MAAM,OAAO;oCAvCgC,MAAM,KAAG,QAAQ,MAAM,CAAC;kCAAxB,MAAM,KAAG,QAAQ,MAAM,CAAC;CAuCrB,CAAA"}
+{"version":3,"file":"loaders.d.ts","sourceRoot":"","sources":["../src/loaders.ts"],"names":[],"mappings":"AAQA,qBAAa,kBAAmB,SAAQ,KAAK;gBAC/B,OAAO,CAAC,EAAE,MAAM;CAI7B;AAED,iBAAS,YAAY,CAAC,OAAO,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,mBACrB,MAAM,KAAG,QAAQ,MAAM,CAAC,CAsB3E;AAED,oBAAY,MAAM,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;AAgBpD,eAAO,MAAM,OAAO;oCAxCgC,MAAM,KAAG,QAAQ,MAAM,CAAC;kCAAxB,MAAM,KAAG,QAAQ,MAAM,CAAC;CAwCrB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/icons",
-  "version": "1.0.0",
+  "version": "1.0.1-alpha.0",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "addc6d8f443865a8b56327ef9a4ff2e69942a30b"
+  "gitHead": "09667dc786134bbfb4348b686ec4fdf571d327d2"
 }

package/src/PixivIcon.ts

@@ -169,6 +169,7 @@ export class PixivIcon extends HTMLElement {
           ? unsafeSVG(this.svgContent)
           : html`<svg viewBox="0 0 ${size} ${size}"></svg>`}
       `,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       this.shadowRoot!
     )
   }

package/src/loaders.ts

@@ -16,6 +16,7 @@ export class PixivIconLoadError extends Error {
 function createLoader(getPath: (attributeName: string) => Promise<string>) {
   return async function getSvgString(attributeName: string): Promise<string> {
     if (cache.has(attributeName)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       return cache.get(attributeName)!
     }