-
+export default {
+ title: 'Explore form',
+ decorators: [i18n, bundleDecorator(mockExploreBundle)]
+}
+
+export const Default = () => (
+
+
- ))
+)
+
+Default.story = {
+ name: 'default'
+}
diff --git a/src/components/graph-crumb/GraphCrumb.js b/src/components/graph-crumb/GraphCrumb.jsx
similarity index 91%
rename from src/components/graph-crumb/GraphCrumb.js
rename to src/components/graph-crumb/GraphCrumb.jsx
index 7837a308..49b1fc28 100644
--- a/src/components/graph-crumb/GraphCrumb.js
+++ b/src/components/graph-crumb/GraphCrumb.jsx
@@ -1,7 +1,8 @@
import React from 'react'
+
+import { getCodecOrNull } from '../../lib/cid'
import Cid from '../cid/Cid'
import { colorForNode } from '../object-info/ObjectInfo'
-import { getCodecOrNull } from '../../lib/cid'
const GraphCrumb = ({ cid, pathBoundaries, localPath, hrefBase = '#/explore', className = '', ...props }) => {
const [first, ...rest] = pathBoundaries
@@ -14,18 +15,22 @@ const GraphCrumb = ({ cid, pathBoundaries, localPath, hrefBase = '#/explore', cl
- {first ? (
+ {first
+ ? (
- ) : null}
- {localPath && pathBoundaries.length === 0 ? (
+ )
+ : null}
+ {localPath && pathBoundaries.length === 0
+ ? (
- ) : null}
+ )
+ : null}
{rest.map((link, i) => {
const nextHrefBase = calculateHrefBase(hrefBase, cid, pathBoundaries, i + 1)
@@ -42,7 +47,8 @@ const GraphCrumb = ({ cid, pathBoundaries, localPath, hrefBase = '#/explore', cl
{parts.map((p, i) => {
diff --git a/src/components/graph-crumb/GraphCrumb.stories.js b/src/components/graph-crumb/GraphCrumb.stories.js
deleted file mode 100644
index abb7b4a6..00000000
--- a/src/components/graph-crumb/GraphCrumb.stories.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { checkA11y } from '@storybook/addon-a11y'
-
-import GraphCrumb from './GraphCrumb'
-
-storiesOf('IPLD Graph Crumbs', module)
- .addDecorator(checkA11y)
- .add('lots of paths', () => (
-
-
- ))
diff --git a/src/components/graph-crumb/GraphCrumb.stories.jsx b/src/components/graph-crumb/GraphCrumb.stories.jsx
new file mode 100644
index 00000000..6b3ee96d
--- /dev/null
+++ b/src/components/graph-crumb/GraphCrumb.stories.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import GraphCrumb from './GraphCrumb'
+
+export default {
+ title: 'IPLD Graph Crumbs'
+ // decorators: [checkA11y],
+}
+
+export const LotsOfPaths = () => (
+
+
+)
+
+LotsOfPaths.story = {
+ name: 'lots of paths'
+}
diff --git a/src/components/graph/IpldGraph.js b/src/components/graph/IpldGraph.jsx
similarity index 100%
rename from src/components/graph/IpldGraph.js
rename to src/components/graph/IpldGraph.jsx
diff --git a/src/components/graph/IpldGraph.stories.js b/src/components/graph/IpldGraph.stories.js
deleted file mode 100644
index aec12775..00000000
--- a/src/components/graph/IpldGraph.stories.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import IpldGraphCytoscape from './IpldGraphCytoscape'
-
-import dagNodeA from '../object-info/fixtures/object-info-8-links.json'
-import dagNodeB from '../object-info/fixtures/object-info-36-links.json'
-// import dagNodeC from '../object-info/fixtures/object-info-1240-links.json'
-import dagNodeD from '../object-info/fixtures/object-info-0-links.json'
-
-storiesOf('IPLD Graph', module)
- .add('cytoscape 8 links', () => (
-
- ))
- .add('cytoscape 36 links', () => (
-
- ))
- .add('cytoscape 0 links', () => (
-
- ))
diff --git a/src/components/graph/IpldGraph.stories.jsx b/src/components/graph/IpldGraph.stories.jsx
new file mode 100644
index 00000000..4ca578c8
--- /dev/null
+++ b/src/components/graph/IpldGraph.stories.jsx
@@ -0,0 +1,50 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+
+import IpldGraphCytoscape from './IpldGraphCytoscape'
+import dagNodeD from '../object-info/fixtures/object-info-0-links.json'
+import dagNodeB from '../object-info/fixtures/object-info-36-links.json'
+import dagNodeA from '../object-info/fixtures/object-info-8-links.json'
+
+export default {
+ title: 'IPLD Graph'
+}
+
+export const Cytoscape8Links = () => (
+
+)
+
+Cytoscape8Links.story = {
+ name: 'cytoscape 8 links'
+}
+
+export const Cytoscape36Links = () => (
+
+)
+
+Cytoscape36Links.story = {
+ name: 'cytoscape 36 links'
+}
+
+export const Cytoscape0Links = () => (
+
+)
+
+Cytoscape0Links.story = {
+ name: 'cytoscape 0 links'
+}
diff --git a/src/components/graph/IpldGraphCytoscape.js b/src/components/graph/IpldGraphCytoscape.jsx
similarity index 98%
rename from src/components/graph/IpldGraphCytoscape.js
rename to src/components/graph/IpldGraphCytoscape.jsx
index 84432db8..7fe94232 100644
--- a/src/components/graph/IpldGraphCytoscape.js
+++ b/src/components/graph/IpldGraphCytoscape.jsx
@@ -1,6 +1,7 @@
-import React from 'react'
import cytoscape from 'cytoscape'
import dagre from 'cytoscape-dagre'
+import React from 'react'
+
import { getCodecOrNull } from '../../lib/cid'
import { colorForNode } from '../object-info/ObjectInfo'
@@ -96,8 +97,8 @@ export default class IpldGraphCytoscape extends React.Component {
]
const cy = cytoscape({
- elements: elements,
- container: container,
+ elements,
+ container,
...graphOpts
})
diff --git a/src/components/graph/LoadableIpldGraph.js b/src/components/graph/LoadableIpldGraph.jsx
similarity index 66%
rename from src/components/graph/LoadableIpldGraph.js
rename to src/components/graph/LoadableIpldGraph.jsx
index 30b28ed1..85dd9f19 100644
--- a/src/components/graph/LoadableIpldGraph.js
+++ b/src/components/graph/LoadableIpldGraph.jsx
@@ -1,9 +1,10 @@
-import React from 'react'
import Loadable from '@loadable/component'
-import ComponentLoader from '../loader/ComponentLoader.js'
+import React from 'react'
+
+import ComponentLoader from '../loader/ComponentLoader'
const LoadableSettingsPage = Loadable(() => import('./IpldGraphCytoscape'),
- { fallback:
}
+ { fallback:
}
)
export default LoadableSettingsPage
diff --git a/src/components/loader/ComponentLoader.js b/src/components/loader/ComponentLoader.jsx
similarity index 88%
rename from src/components/loader/ComponentLoader.js
rename to src/components/loader/ComponentLoader.jsx
index 5621b1d9..8a718cc6 100644
--- a/src/components/loader/ComponentLoader.js
+++ b/src/components/loader/ComponentLoader.jsx
@@ -1,6 +1,7 @@
import React from 'react'
-import Box from '../box/Box.js'
+
import { Loader } from './Loader'
+import Box from '../box/Box'
const ComponentLoader = () => (
diff --git a/src/components/loader/ComponentLoader.stories.js b/src/components/loader/ComponentLoader.stories.js
deleted file mode 100644
index b411fc0e..00000000
--- a/src/components/loader/ComponentLoader.stories.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { checkA11y } from '@storybook/addon-a11y'
-// import { action } from '@storybook/addon-actions'
-import { withKnobs, boolean } from '@storybook/addon-knobs'
-
-import ComponentLoader from './ComponentLoader'
-
-storiesOf('Loader', module)
- .addDecorator(checkA11y)
- .addDecorator(withKnobs)
- .add('ComponentLoader', () => (
-
-
- ))
diff --git a/src/components/loader/ComponentLoader.stories.jsx b/src/components/loader/ComponentLoader.stories.jsx
new file mode 100644
index 00000000..5fd50cb3
--- /dev/null
+++ b/src/components/loader/ComponentLoader.stories.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import ComponentLoader from './ComponentLoader'
+
+export default {
+ title: 'Loader'
+}
+
+export const _ComponentLoader = () => (
+
+
+)
+
+_ComponentLoader.story = {
+ name: 'ComponentLoader'
+}
diff --git a/src/components/loader/Loader.js b/src/components/loader/Loader.jsx
similarity index 99%
rename from src/components/loader/Loader.js
rename to src/components/loader/Loader.jsx
index bfec332f..bd56c563 100644
--- a/src/components/loader/Loader.js
+++ b/src/components/loader/Loader.jsx
@@ -1,4 +1,5 @@
import React from 'react'
+
import './Loader.css'
export const Loader = ({ color = 'light', ...props }) => {
diff --git a/src/components/object-info/LinksTable.js b/src/components/object-info/LinksTable.jsx
similarity index 99%
rename from src/components/object-info/LinksTable.js
rename to src/components/object-info/LinksTable.jsx
index 7b7b05ca..ad2f2921 100644
--- a/src/components/object-info/LinksTable.js
+++ b/src/components/object-info/LinksTable.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import { Table, Column, AutoSizer } from 'react-virtualized'
+
import './LinksTable.css'
class LinksTable extends React.Component {
diff --git a/src/components/object-info/ObjectInfo.js b/src/components/object-info/ObjectInfo.jsx
similarity index 73%
rename from src/components/object-info/ObjectInfo.js
rename to src/components/object-info/ObjectInfo.jsx
index ab7e910c..a7ace2ad 100644
--- a/src/components/object-info/ObjectInfo.js
+++ b/src/components/object-info/ObjectInfo.jsx
@@ -1,8 +1,12 @@
-import React from 'react'
-import { withTranslation } from 'react-i18next'
import { ObjectInspector, chromeLight } from '@tableflip/react-inspector'
import filesize from 'filesize'
+import { CID } from 'multiformats'
+import React from 'react'
+import { withTranslation } from 'react-i18next'
+
import LinksTable from './LinksTable'
+import getCodecNameFromCode from '../../lib/get-codec-name-from-code'
+
const humansize = filesize.partial({ round: 0 })
const objectInspectorTheme = {
@@ -16,8 +20,20 @@ const objectInspectorTheme = {
}
// TODO: Use https://github.com/multiformats/multicodec/blob/master/table.csv to get full name.
+/**
+ * Note that existing colors were added into the "Mass Editor" at colordesigner.io:
+ *
+ * * #28CA9F
+ * * #244e66
+ * * #378085
+ * * #f14e32
+ * * #383838
+ *
+ * And then hamt-sharded-directory was set to #9f28ca which was listed under "Color Harmonies - Triad" on 2023-05-22
+ */
const nodeStyles = {
- 'dag-cbor': { shortName: 'CBOR', name: 'dag-cbor', color: '#28CA9F' },
+ 'dag-cbor': { shortName: 'CBOR', name: 'dag-cbor', color: '#378085' },
+ 'dag-json': { shortName: 'JSON', name: 'dag-json', color: '#378065' },
'dag-pb': { shortName: 'PB', name: 'dag-pb', color: '#244e66' },
'git-raw': { shortName: 'GIT', name: 'Git', color: '#378085' },
'raw': { shortName: 'RAW', name: 'Raw Block', color: '#f14e32' }, // eslint-disable-line quote-props
@@ -25,7 +41,8 @@ const nodeStyles = {
'eth-block-list': { shortName: 'ETH', name: 'Ethereum Block List', color: '#383838' },
'eth-tx-trie': { shortName: 'ETH', name: 'Ethereum Tx Trie', color: '#383838' },
'eth-tx': { shortName: 'ETH', name: 'Ethereum Tx', color: '#383838' },
- 'eth-state-trie': { shortName: 'ETH', name: 'Ethereum State Trie', color: '#383838' }
+ 'eth-state-trie': { shortName: 'ETH', name: 'Ethereum State Trie', color: '#383838' },
+ 'hamt-sharded-directory': { shortName: 'PB+H', name: 'HAMT-Sharded dag-pb Directory', color: '#244e66' }
}
export function shortNameForNode (type) {
@@ -63,17 +80,27 @@ const DagNodeIcon = ({ type, ...props }) => (
)
const ObjectInfo = ({ t, tReady, className, type, cid, localPath, size, data, links, format, onLinkClick, gatewayUrl, publicGatewayUrl, ...props }) => {
+ const isUnixFs = format === 'unixfs' && data.type && ['directory', 'file'].some(x => x === data.type)
+ let nodeStyleType = type
+
+ if (!isNaN(type) || isUnixFs || nameForNode(type) === 'DAG Node') {
+ nodeStyleType = getCodecNameFromCode(CID.parse(cid).code) ?? type
+ }
+
return (
-
-
+
- {nameForNode(type)}
+ {nameForNode(nodeStyleType)}
- {format === 'unixfs' ? (
+ {format === 'unixfs'
+ ? (
UnixFS
- ) : null}
- {format === 'unixfs' && data.type && ['directory', 'file'].some(x => x === data.type) ? (
+ )
+ : null}
+ {isUnixFs
+ ? (
{gatewayUrl && gatewayUrl !== publicGatewayUrl && (
@@ -84,44 +111,57 @@ const ObjectInfo = ({ t, tReady, className, type, cid, localPath, size, data, li
{t('ObjectInfo.publicGateway')}
)}
- ) : null}
+ )
+ : null}
- {!cid ? null : (
+ {!cid
+ ? null
+ : (
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
CID
{cid}
- )}
- {!size ? null : (
+ )}
+ {!size
+ ? null
+ : (
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
Size
{humansize(size)}
- )}
+ )}
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
Links
{links ? ({links.length}) : 'No Links'}
+ {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
Data
{data ? null : 'No data'}
- {!data ? null : (
+ {!data
+ ? null
+ : (
- )}
+ )}
- )}
+ )}
)
}
diff --git a/src/components/object-info/ObjectInfo.stories.js b/src/components/object-info/ObjectInfo.stories.js
deleted file mode 100644
index bd4265f3..00000000
--- a/src/components/object-info/ObjectInfo.stories.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import { checkA11y } from '@storybook/addon-a11y'
-import i18n from '../../i18n-decorator'
-
-import ObjectInfo from './ObjectInfo'
-
-// Sample DagNode info
-// (await ipfs.object.get('QmQPXjxdsxM7PKp1HVZ3oAXVKLSXoZXFG5CY1evPe4UGCB')).toJSON()
-import dagNodeA from './fixtures/object-info-8-links.json'
-import dagNodeB from './fixtures/object-info-36-links.json'
-import dagNodeC from './fixtures/object-info-1240-links.json'
-
-storiesOf('IPLD Node Info', module)
- .addDecorator(checkA11y)
- .addDecorator(i18n)
- .add('cid v0 dag-pb', () => (
- (stream: ReadableStream) => AsyncIterable
+ }
+ const toIterable: toIterable
+ export default toIterable
+}
+
+interface OldIpldFormat {
+ util: {
+ serialize: (obj: unknown) => Promise
+ deserialize: (bytes: Uint8Array) => Promise
+
+ codec: number
+ defaultHashAlg: number
+ // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+ cid: import('multiformats').CID
+ }
+ codec: number
+ resolver: {
+ resolve: (bytes: Uint8Array, path: string) => Promise
+ tree: (bytes: Uint8Array) => Promise
+ }
+ defaultHashAlg: number
+}
+declare module 'ipld-git' {
+ const defaultExport: OldIpldFormat
+ export default defaultExport
+}
diff --git a/src/i18n-decorator.js b/src/i18n-decorator.jsx
similarity index 99%
rename from src/i18n-decorator.js
rename to src/i18n-decorator.jsx
index c9264dac..f9c32889 100644
--- a/src/i18n-decorator.js
+++ b/src/i18n-decorator.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import { I18nextProvider } from 'react-i18next'
+
import i18n from './i18n'
export default function i18nDecorator (fn) {
diff --git a/src/i18n.js b/src/i18n.js
index 94f55ac5..f77b72d9 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,9 +1,9 @@
import i18n from 'i18next'
-import ICU from 'i18next-icu'
+import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-chained-backend'
-import LocalStorageBackend from 'i18next-localstorage-backend'
import HttpBackend from 'i18next-http-backend'
-import LanguageDetector from 'i18next-browser-languagedetector'
+import ICU from 'i18next-icu'
+import LocalStorageBackend from 'i18next-localstorage-backend'
i18n
.use(ICU)
@@ -18,7 +18,7 @@ i18n
backendOptions: [
{ // LocalStorageBackend
defaultVersion: 'v1',
- expirationTime: (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') ? 1 : 7 * 24 * 60 * 60 * 1000
+ expirationTime: (!import.meta.env.NODE_ENV || import.meta.env.NODE_ENV === 'development') ? 1 : 7 * 24 * 60 * 60 * 1000
},
{ // HttpBackend
// ensure a relative path is used to look up the locales, so it works when loaded from /ipfs/
@@ -35,7 +35,7 @@ i18n
zh: ['zh-CN', 'en'],
default: ['en']
},
- debug: process.env.DEBUG,
+ debug: import.meta.env.DEBUG,
// react i18next special options (optional)
react: {
useSuspense: false,
diff --git a/src/icons/GlyphSmallCancel.js b/src/icons/GlyphSmallCancel.jsx
similarity index 100%
rename from src/icons/GlyphSmallCancel.js
rename to src/icons/GlyphSmallCancel.jsx
diff --git a/src/icons/StrokeIpld.js b/src/icons/StrokeIpld.jsx
similarity index 100%
rename from src/icons/StrokeIpld.js
rename to src/icons/StrokeIpld.jsx
diff --git a/src/index.js b/src/index.js
index cc326ed2..f823a405 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,11 +1,12 @@
-import StartExploringPage from './components/StartExploringPage'
-import ExplorePage from './components/LoadableExplorePage.js'
-import IpldExploreForm from './components/explore/IpldExploreForm.js'
-import IpldCarExploreForm from './components/explore/IpldCarExploreForm.js'
+import exploreBundle from './bundles/explore'
+import heliaBundle from './bundles/helia'
import CidInfo from './components/cid-info/CidInfo'
+import IpldCarExploreForm from './components/explore/IpldCarExploreForm'
+import IpldExploreForm from './components/explore/IpldExploreForm'
import IpldGraph from './components/graph/LoadableIpldGraph'
+import ExplorePage from './components/LoadableExplorePage'
import ObjectInfo from './components/object-info/ObjectInfo'
-import exploreBundle from './bundles/explore'
+import StartExploringPage from './components/StartExploringPage'
export {
StartExploringPage,
@@ -15,5 +16,6 @@ export {
CidInfo,
IpldGraph,
ObjectInfo,
- exploreBundle
+ exploreBundle,
+ heliaBundle
}
diff --git a/src/lib/base-importer.ts b/src/lib/base-importer.ts
new file mode 100644
index 00000000..a6898c55
--- /dev/null
+++ b/src/lib/base-importer.ts
@@ -0,0 +1,21 @@
+import { bases } from 'multiformats/basics'
+
+export default async function baseImporter (prefix: T): Promise {
+ // handle for CIDv0
+ if (prefix === 'Q') {
+ return bases.base58btc
+ }
+
+ const base = Object.values(bases).find((base) => {
+ if (base.prefix === prefix) {
+ return true
+ }
+ return false
+ })
+
+ if (base != null) {
+ return base
+ }
+
+ throw new Error(`unknown multibase prefix '${prefix}'`)
+}
diff --git a/src/lib/cid.js b/src/lib/cid.js
index f4768980..2d1259e0 100644
--- a/src/lib/cid.js
+++ b/src/lib/cid.js
@@ -1,7 +1,7 @@
-import { CID } from 'multiformats'
import * as dagCbor from '@ipld/dag-cbor'
-import * as dagPb from '@ipld/dag-pb'
import * as dagJson from '@ipld/dag-json'
+import * as dagPb from '@ipld/dag-pb'
+import { CID } from 'multiformats'
/**
* @template {string} Prefix
diff --git a/src/lib/cid.test.js b/src/lib/cid.test.js
index 75ca7d78..490893df 100644
--- a/src/lib/cid.test.js
+++ b/src/lib/cid.test.js
@@ -1,10 +1,12 @@
/* global describe it expect */
// @ts-check
-import { toCidOrNull, getCodecOrNull, getCodeOrNull, toCidStrOrNull } from './cid'
-import * as multiformats from 'multiformats'
+import crypto from 'crypto'
+
import * as dagCbor from '@ipld/dag-cbor'
import * as dagPb from '@ipld/dag-pb'
-import crypto from 'crypto'
+import * as multiformats from 'multiformats'
+
+import { toCidOrNull, getCodecOrNull, getCodeOrNull, toCidStrOrNull } from './cid'
const { CID, hasher, bytes } = multiformats
@@ -26,7 +28,7 @@ const createCID = async (value, codec, hasher) => {
const digest = await hasher.digest(codec.encode(value))
return CID.create(1, codec.code, digest)
} catch (err) {
- console.log('Failed to create CID', value, err)
+ console.error('Failed to create CID', value, err)
return null
}
}
diff --git a/src/lib/codec-importer.ts b/src/lib/codec-importer.ts
new file mode 100644
index 00000000..b24a5630
--- /dev/null
+++ b/src/lib/codec-importer.ts
@@ -0,0 +1,32 @@
+import type { PBNode } from '@ipld/dag-pb'
+import { type BlockCodec } from 'multiformats/codecs/interface'
+
+import getCodecNameFromCode from './get-codec-name-from-code'
+
+type CodecDataTypes = PBNode | Uint8Array
+interface CodecImporterResponse extends Pick, 'decode'> {
+}
+
+export default async function codecImporter (codecCode: number): Promise> {
+ const codecName = getCodecNameFromCode(codecCode)
+ switch (codecName) {
+ case 'dag-cbor':
+ return import('@ipld/dag-cbor')
+ case 'dag-pb':
+ // @ts-expect-error - return types need normalizing
+ return import('@ipld/dag-pb')
+ case 'git-raw':
+ return {
+ decode: (await import('ipld-git')).default.util.deserialize
+ }
+ case 'raw':
+ // @ts-expect-error - return types need normalizing
+ return import('multiformats/codecs/raw')
+ case 'json':
+ return import('multiformats/codecs/json')
+ case 'dag-json':
+ return import('@ipld/dag-json')
+ default:
+ throw new Error(`unsupported codec: ${codecCode}=${getCodecNameFromCode(codecCode)}`)
+ }
+}
diff --git a/src/lib/extract-info.ts b/src/lib/extract-info.ts
new file mode 100644
index 00000000..9b1f0721
--- /dev/null
+++ b/src/lib/extract-info.ts
@@ -0,0 +1,51 @@
+import { type CID } from 'multiformats'
+
+import getCodecNameFromCode from './get-codec-name-from-code'
+import { decodeCid } from '../components/cid-info/decode-cid'
+
+const toHex = (bytes: Uint8Array): string => Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength).toString('hex').toUpperCase()
+
+interface ExtractedInfo {
+ base: string
+ codecName: string
+ hashFn: string
+ hashFnCode: string
+ hashLengthCode: number
+ hashLengthInBits: number
+ hashValue: string
+ hashValueIn32CharChunks: string[][]
+ humanReadable: string
+}
+export default async function extractInfo (cid: CID): Promise {
+ const cidInfo = await decodeCid(cid)
+ if (cidInfo == null) {
+ throw new Error(`CID could not be decoded for CID '${cid.toString()}'`)
+ }
+ const hashFn = cidInfo.multihash.name
+ const hashFnCode = cidInfo.multihash.code.toString(16)
+ const hashLengthCode = cidInfo.multihash.size
+ const hashLengthInBits = cidInfo.multihash.size * 8
+ const hashValue = toHex(cidInfo.multihash.digest)
+ const hashValueIn32CharChunks = hashValue.split('').reduce((resultArray, item, index) => {
+ const chunkIndex = Math.floor(index / 32)
+ if (resultArray[chunkIndex] == null) {
+ resultArray[chunkIndex] = [] // start a new chunk
+ }
+ resultArray[chunkIndex].push(item)
+ return resultArray
+ }, [])
+ const codecName = getCodecNameFromCode(cidInfo.cid.code)
+
+ const humanReadable = `${cidInfo.multibase.name} - cidv${cidInfo.cid.version} - ${codecName} - ${hashFn}~${hashLengthInBits}~${hashValue}`
+ return {
+ base: cidInfo.multibase.name,
+ codecName,
+ hashFn,
+ hashFnCode,
+ hashLengthCode,
+ hashLengthInBits,
+ hashValue,
+ hashValueIn32CharChunks,
+ humanReadable
+ }
+}
diff --git a/src/lib/get-codec-for-cid.ts b/src/lib/get-codec-for-cid.ts
new file mode 100644
index 00000000..4bc86d3a
--- /dev/null
+++ b/src/lib/get-codec-for-cid.ts
@@ -0,0 +1,126 @@
+import type { PBLink, PBNode } from '@ipld/dag-pb'
+import { CID } from 'multiformats'
+
+import codecImporter from './codec-importer.js'
+import getCodecNameFromCode from './get-codec-name-from-code'
+import { isPBNode } from './guards'
+import { ensureLeadingSlash } from './helpers'
+import type { ResolveType } from '../types'
+
+interface CodecWrapper {
+ decode: (bytes: Uint8Array) => DecodedType
+ resolve: (path: string, bytes: Uint8Array) => Promise>
+}
+
+interface DecodeFn {
+ (bytes: Uint8Array): T
+}
+
+/**
+ * Resolve a path in a decoded object
+ *
+ * @see https://github.com/ipld/js-blockcodec-to-ipld-format/blob/13ad9bc518e232527078e27f0807ad3392b33698/src/index.js#L38-L55
+ * @param decodeFn
+ * @returns
+ */
+const resolveFn = (decodeFn: DecodeFn) => (buf: Uint8Array, path: string): ResolveType => {
+ let value = decodeFn(buf)
+ const entries = path.split('/').filter(x => x)
+
+ while (entries.length > 0) {
+ const entry = entries.shift()
+ if (entry == null) {
+ throw new Error('Not found')
+ }
+ value = value[entry]
+ if (typeof value === 'undefined') {
+ throw new Error('Not found')
+ }
+
+ if (CID.asCID(value) != null) {
+ const remainderPath = entries.length > 0 ? ensureLeadingSlash(entries.join('/')) : ''
+ return { value, remainderPath }
+ }
+ }
+
+ return { value, remainderPath: '' }
+}
+
+interface CodecResolverFn {
+ (node: PBNode | unknown, path: string): Promise>
+}
+
+const codecResolverMap: Record = {
+ 'dag-pb': async (node, path) => {
+ if (!isPBNode(node)) {
+ throw new Error('node is not a PBNode')
+ }
+ const pathSegments = path.split('/')
+ let firstPathSegment = pathSegments.splice(1, 1)[0]
+ if (firstPathSegment === 'Links') {
+ firstPathSegment = `${firstPathSegment}/${pathSegments.splice(1, 1)[0]}`
+ }
+ let remainderPath = pathSegments.join('/')
+
+ let link = node.Links.find((link: PBLink) => link.Name === firstPathSegment)
+ if ((link == null) && firstPathSegment?.includes('Links')) {
+ const linkIndex = Number(firstPathSegment.split('/')[1])
+ link = node.Links[linkIndex]
+ }
+
+ let value = node as PBNode | PBLink
+ if (link != null) {
+ value = link
+ } else {
+ // we didn't find a link, add the firstPathSegment back to remainderPath.
+ remainderPath = [firstPathSegment, ...pathSegments].join('/').replace('//', '/')
+ }
+
+ return {
+ value,
+ remainderPath
+ }
+ }
+}
+
+export default async function getCodecForCid (cid: CID): Promise {
+ // determine the codec code for the CID
+ const codecCode = cid.code
+ if (codecCode === undefined) {
+ throw new Error(`CID codec code is undefined for CID '${cid.toString()}'`)
+ }
+
+ const codecName = getCodecNameFromCode(codecCode)
+ const codec = await codecImporter(codecCode)
+
+ const decode = (bytes: Uint8Array): unknown => {
+ if (codec.decode != null) {
+ return codec.decode(bytes)
+ }
+
+ throw new Error(`codec ${codecCode}=${codecName} does not have a decode function`)
+ }
+
+ return {
+ decode,
+ resolve: async (path: string, bytes: Uint8Array) => {
+ if (codecResolverMap[codecName] != null) {
+ try {
+ return await codecResolverMap[codecName](decode(bytes), path)
+ } catch (err) {
+ console.error(err)
+ console.error('error resolving path for cid with codecResolverMap', cid, path)
+ // allow the resolver to fail and fall through to the next resolver
+ }
+ }
+ try {
+ const resolverFn = resolveFn(decode)
+ return resolverFn(bytes, path)
+ } catch (err) {
+ console.error('error resolving path for cid with resolveFn', cid, path)
+ }
+
+ throw new Error(`codec ${codecCode}=${codecName} does not have a resolve function`)
+ }
+ }
+}
diff --git a/src/lib/get-codec-name-from-code.ts b/src/lib/get-codec-name-from-code.ts
new file mode 100644
index 00000000..f42032c2
--- /dev/null
+++ b/src/lib/get-codec-name-from-code.ts
@@ -0,0 +1,21 @@
+import multicodecs from 'multicodec'
+
+export default function getCodecNameFromCode (code: number): string {
+ switch (code) {
+ case multicodecs.DAG_CBOR:
+ return 'dag-cbor'
+ case multicodecs.DAG_PB:
+ return 'dag-pb'
+ case multicodecs.GIT_RAW:
+ return 'git-raw'
+ case multicodecs.RAW:
+ return 'raw'
+ case multicodecs.JSON:
+ return 'json'
+ case multicodecs.DAG_JSON:
+ return 'dag-json'
+ default:
+ // TODO: Remove dependency on multicodecs
+ return multicodecs.codeToName[code as multicodecs.CodecCode]
+ }
+}
diff --git a/src/lib/get-raw-block.ts b/src/lib/get-raw-block.ts
new file mode 100644
index 00000000..128cd082
--- /dev/null
+++ b/src/lib/get-raw-block.ts
@@ -0,0 +1,135 @@
+import type { Helia } from '@helia/interface'
+import { type IPFSHTTPClient } from 'kubo-rpc-client'
+import { CID } from 'multiformats'
+import type { Version as CIDVersion } from 'multiformats/cid'
+
+import getHasherForCode from './hash-importer.js'
+
+async function getCidFromBytes (bytes: Uint8Array, cidVersion: CIDVersion, codecCode: number, multihashCode: number): Promise {
+ const hasher = await getHasherForCode(multihashCode)
+
+ try {
+ const hash = await hasher.digest(bytes)
+ return CID.create(cidVersion, codecCode, hash)
+ } catch (err) {
+ console.error('could not create cid from bytes', err)
+ }
+
+ return '' as any as CID
+}
+
+async function getRawBlockFromGateway (url: string | URL, cid: CID, signal: AbortSignal): Promise {
+ const gwUrl = new URL(url)
+
+ gwUrl.pathname = `/ipfs/${cid.toString()}`
+ gwUrl.search = '?format=raw' // necessary as not every gateway supports dag-cbor, but every should support sending raw block as-is
+ try {
+ const res = await fetch(gwUrl.toString(), {
+ signal,
+ headers: {
+ // also set header, just in case ?format= is filtered out by some reverse proxy
+ Accept: 'application/vnd.ipld.raw'
+ },
+ cache: 'force-cache'
+ })
+ if (!res.ok) {
+ throw new Error(`unable to fetch raw block for CID ${cid} from gateway ${gwUrl.toString()}`)
+ }
+ return new Uint8Array(await res.arrayBuffer())
+ } catch (cause) {
+ console.error('cause', cause)
+ throw new Error(`unable to fetch raw block for CID ${cid}`)
+ }
+}
+
+/**
+ * This method validates that the block we got from the gateway has the same CID as the one we requested
+ */
+export async function verifyBytes (providedCid: CID, bytes: Uint8Array): Promise {
+ try {
+ const cid = await getCidFromBytes(bytes, providedCid.version, providedCid.code, providedCid.multihash.code)
+
+ if (cid.toString() !== providedCid.toString()) {
+ throw new Error(`CID mismatch, expected '${providedCid.toString()}' but got '${cid.toString()}'`)
+ }
+ } catch (err) {
+ console.error('unable to verify bytes', err)
+ throw err
+ }
+}
+
+/**
+ * allow users to disable fetching from gateways by setting 'explore.ipld.gatewayEnabled' to false in localStorage
+ *
+ * @returns {boolean}
+ */
+function ensureGatewayFetchEnabled (): boolean {
+ console.info('import.meta.env.NODE_ENV: ', import.meta.env.NODE_ENV)
+ console.info(
+ "🎛️ Customise whether ipld-explorer-components fetches content from gateways by setting an `explore.ipld.gatewayEnabled` value to true/false in localStorage. e.g. localStorage.setItem('explore.ipld.gatewayEnabled', false) -- NOTE: defaults to true"
+ )
+ const gatewayEnabledSetting = localStorage.getItem('explore.ipld.gatewayEnabled')
+
+ return gatewayEnabledSetting != null ? JSON.parse(gatewayEnabledSetting) : true
+}
+
+export async function getBlockFromAnyGateway (cid: CID, signal: AbortSignal, moreGateways: string[] = []): Promise {
+ if (!ensureGatewayFetchEnabled()) {
+ throw new Error('Fetching from gateways is disabled')
+ }
+ const gateways = moreGateways.concat(defaultGateways)
+ for (const url of gateways) {
+ if (signal.aborted) {
+ throw new Error('aborted')
+ }
+ try {
+ const rawBlock = await getRawBlockFromGateway(url, cid, signal)
+ try {
+ await verifyBytes(cid, rawBlock)
+ return rawBlock
+ } catch (err) {
+ console.error('unable to verify block from gateway', url)
+ continue
+ }
+ } catch (err) {
+ console.error('unable to get block from gateway', err)
+ // ignore the error
+ }
+ }
+ throw new Error('Could not get block from any gateway')
+}
+
+const defaultGateways = ['https://ipfs.io', 'https://dweb.link']
+
+/**
+ * Method for getting a raw block either with helia or https://docs.ipfs.tech/reference/http/gateway/#trusted-vs-trustless
+ * inspiration from https://github.com/ipfs-shipyard/ipfs-geoip/blob/466cd9d6454098c0fcf998b2217225099a654695/src/lookup.js#L18
+ */
+export async function getRawBlock (helia: Helia, kuboClient: IPFSHTTPClient, cid: CID, timeout = 30000): Promise {
+ const abortController = new AbortController()
+
+ try {
+ if (await helia.blockstore.has(cid)) {
+ // If we've gotten the block before, we can just return it.
+ return await helia.blockstore.get(cid)
+ }
+
+ const timeoutId = setTimeout(() => { abortController.abort('Request timed out') }, timeout)
+ const rawBlock = await Promise.any([kuboClient.block.get(cid), getBlockFromAnyGateway(cid, abortController.signal), helia.blockstore.get(cid, { signal: abortController.signal })])
+ abortController.abort('Content obtained') // abort any other requests.
+ clearTimeout(timeoutId)
+
+ /**
+ * if we got the block from the gateway, verifyBytes is called, and we can safely store the block.
+ * if we got the block from helia, helia's blockstore should already have the block.
+ */
+ if (!await helia.blockstore.has(cid)) {
+ await helia.blockstore.put(cid, rawBlock)
+ }
+
+ return rawBlock
+ } catch (err) {
+ console.error('unable to get raw block', err)
+ throw err
+ }
+}
diff --git a/src/lib/guards.ts b/src/lib/guards.ts
new file mode 100644
index 00000000..acfb9af7
--- /dev/null
+++ b/src/lib/guards.ts
@@ -0,0 +1,13 @@
+import type { PBLink, PBNode } from '@ipld/dag-pb'
+
+export function isNotNullish (value: T): value is NonNullable {
+ return value != null
+}
+
+export function isPBNode (value: unknown): value is PBNode {
+ return isNotNullish(value) && typeof value === 'object' && (value as PBNode).Data != null && (value as PBNode).Links != null
+}
+
+export function isPBLink (value: unknown): value is PBLink {
+ return isNotNullish(value) && typeof value === 'object' && (value as PBLink).Hash != null
+}
diff --git a/src/lib/hash-importer.ts b/src/lib/hash-importer.ts
new file mode 100644
index 00000000..5f13a491
--- /dev/null
+++ b/src/lib/hash-importer.ts
@@ -0,0 +1,36 @@
+/* global globalThis */
+import { keccak256 } from 'js-sha3'
+import { type Hasher, from } from 'multiformats/hashes/hasher'
+import * as sha2 from 'multiformats/hashes/sha2'
+
+type SupportedHashers = typeof sha2.sha256 | typeof sha2.sha512 | Hasher<'keccak-256', 27> | Hasher<'sha1', 17>
+export default async function getHasherForCode (code: number): Promise {
+ switch (code) {
+ case sha2.sha256.code:
+ return sha2.sha256
+ case sha2.sha512.code:
+ return sha2.sha512
+ case 17:
+ // git hasher uses sha1. see ipld-git/src/util.js
+ return from({
+ name: 'sha1',
+ code,
+ encode: async (data: Uint8Array) => {
+ const crypto = globalThis.crypto ?? (await import('crypto')).webcrypto
+ const hashBuffer = await crypto.subtle.digest('SHA-1', data)
+ return new Uint8Array(hashBuffer)
+ }
+ })
+ case 27: // keccak-256
+ return from({
+ name: 'keccak-256',
+ code,
+ encode: async (data: Uint8Array) => {
+ return new Uint8Array(keccak256.arrayBuffer(data))
+ }
+ })
+
+ default:
+ throw new Error(`unknown multihasher code '${code}'`)
+ }
+}
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
new file mode 100644
index 00000000..0c5e7118
--- /dev/null
+++ b/src/lib/helpers.ts
@@ -0,0 +1,20 @@
+import { type Helia } from '@helia/interface'
+import { CID, type MultihashDigest } from 'multiformats'
+import { sha256 } from 'multiformats/hashes/sha2'
+
+export function ensureLeadingSlash (str: string): string {
+ if (str.startsWith('/')) return str
+ return `/${str}`
+}
+
+export interface DigestFn {
+ (data: Uint8Array): Promise>
+}
+
+export async function addDagNodeToHelia (helia: Helia, codec: { encode: (n: T) => Uint8Array, code: number }, node: T, digestFn?: DigestFn): Promise {
+ const encodedNode = codec.encode(node)
+ const hash = digestFn != null ? await digestFn(encodedNode) : await sha256.digest(encodedNode)
+ const cid = CID.createV1(codec.code, hash)
+
+ return helia.blockstore.put(cid, encodedNode)
+}
diff --git a/src/lib/import-car.ts b/src/lib/import-car.ts
new file mode 100644
index 00000000..dd978cd2
--- /dev/null
+++ b/src/lib/import-car.ts
@@ -0,0 +1,23 @@
+import { type Helia } from '@helia/interface'
+import { CarBlockIterator } from '@ipld/car'
+import { type CID } from 'multiformats'
+import toIterable from 'stream-to-it'
+
+/**
+ * Given a file object representing a CAR archive, import it into the given Helia instance,
+ * and reeturn the CID for the root block
+ *
+ * TODO: Handle multiple roots
+ */
+export async function importCar (file: File, helia: Helia): Promise {
+ const inStream = file.stream()
+ const CarIterator = await CarBlockIterator.fromIterable(toIterable.source(inStream))
+ for await (const { cid, bytes } of CarIterator) {
+ // add blocks to helia to ensure they are available while navigating children
+ await helia.blockstore.put(cid, bytes)
+ }
+ const cidRoots = await CarIterator.getRoots()
+
+ // @todo: Handle multiple roots
+ return cidRoots[0]
+}
diff --git a/src/lib/init-helia.ts b/src/lib/init-helia.ts
new file mode 100644
index 00000000..ce25b904
--- /dev/null
+++ b/src/lib/init-helia.ts
@@ -0,0 +1,69 @@
+import { noise } from '@chainsafe/libp2p-noise'
+import { yamux } from '@chainsafe/libp2p-yamux'
+import { type Helia } from '@helia/interface'
+import { delegatedContentRouting } from '@libp2p/delegated-content-routing'
+import { delegatedPeerRouting } from '@libp2p/delegated-peer-routing'
+import { mplex } from '@libp2p/mplex'
+import { webRTC, webRTCDirect } from '@libp2p/webrtc'
+import { webSockets } from '@libp2p/websockets'
+import { webTransport } from '@libp2p/webtransport'
+import { MemoryBlockstore } from 'blockstore-core'
+import { MemoryDatastore } from 'datastore-core'
+import { createHelia } from 'helia'
+import { type create as createKuboClient } from 'kubo-rpc-client'
+import { createLibp2p } from 'libp2p'
+import { autoNATService } from 'libp2p/autonat'
+import { circuitRelayTransport } from 'libp2p/circuit-relay'
+import { identifyService } from 'libp2p/identify'
+
+import { addDagNodeToHelia } from '../lib/helpers'
+
+export default async function initHelia (kuboClient: ReturnType): Promise {
+ const blockstore = new MemoryBlockstore()
+ const datastore = new MemoryDatastore()
+
+ /**
+ * based on https://github.com/ipfs/helia/blob/ed4985677b62021f76541354ad06b70bd53e929a/packages/helia/src/utils/libp2p.browser.ts#L20
+ */
+ const libp2p = await createLibp2p({
+ start: true, // TODO: libp2p bug with stop/start - https://github.com/libp2p/js-libp2p/issues/1787
+ peerRouters: [
+ delegatedPeerRouting(kuboClient)
+ ],
+ contentRouters: [
+ delegatedContentRouting(kuboClient)
+ ],
+ datastore,
+ transports: [
+ webRTC(),
+ webRTCDirect(),
+ webTransport(),
+ webSockets(),
+ circuitRelayTransport({
+ discoverRelays: 1
+ })
+ ],
+ connectionEncryption: [
+ noise()
+ ],
+ streamMuxers: [
+ yamux(),
+ mplex()
+ ],
+ services: {
+ identify: identifyService(),
+ autoNAT: autoNATService()
+ }
+ })
+
+ const helia = await createHelia({
+ datastore,
+ blockstore,
+ libp2p
+ })
+
+ // add helia-only examples
+ await addDagNodeToHelia(helia, await import('@ipld/dag-json'), { hello: 'world' }) // baguqeerasords4njcts6vs7qvdjfcvgnume4hqohf65zsfguprqphs3icwea
+
+ return helia
+}
diff --git a/src/lib/normalise-dag-node.js b/src/lib/normalise-dag-node.js
index 36dd7f98..a69af3ed 100644
--- a/src/lib/normalise-dag-node.js
+++ b/src/lib/normalise-dag-node.js
@@ -1,10 +1,28 @@
// @ts-check
-import { UnixFS } from 'ipfs-unixfs'
-import * as dagPb from '@ipld/dag-pb'
import * as dagCbor from '@ipld/dag-cbor'
+import * as dagPb from '@ipld/dag-pb'
+import { UnixFS } from 'ipfs-unixfs'
import { toCidOrNull, getCodeOrNull, toCidStrOrNull } from './cid'
+/**
+ * @typedef dagNodeLink
+ * @property {string} cid
+ * @property {string} name
+ * @property {number} size
+ */
+/**
+ * @typedef dagNodeData
+ * @property {unknown[]} blockSizes
+ * @property {unknown} data
+ * @property {string} type
+ */
+/**
+ * @typedef dagNode
+ * @property {dagNodeData} data
+ * @property {dagNodeLink[]} links
+ * @property {number} size
+ */
/**
* Provide a uniform shape for all^ node types.
*
@@ -14,15 +32,17 @@ import { toCidOrNull, getCodeOrNull, toCidStrOrNull } from './cid'
* ^: currently dag-cbor and dag-pb are supported.
*
* @function normaliseDagNode
- * @param {Object} node the `value` prop from `ipfs.dag.get` response.
- * @param {string} cidStr the cid string passed to `ipfs.dag.get`
+ * @param {dagNode|import('@ipld/dag-pb').PBNode} node - the `value` prop from `ipfs.dag.get` response.
+ * @param {string} cidStr - the cid string passed to `ipfs.dag.get`
+ * @returns {import('../types').NormalizedDagNode}
*/
export default function normaliseDagNode (node, cidStr) {
const code = getCodeOrNull(cidStr)
if (code === dagPb.code) {
- return normaliseDagPb(node, cidStr, code)
+ return normaliseDagPb(/** @type {import('@ipld/dag-pb').PBNode} */(node), cidStr, code)
}
// try cbor style if we don't know any better
+ // @ts-expect-error - todo: resolve this type error
return normaliseDagCbor(node, cidStr, code ?? dagCbor.code)
}
@@ -63,7 +83,8 @@ export function normaliseDagPb (node, cid, type) {
return {
cid: cidStr,
type,
- data: { type: /** @type {import('../types').UnixFsNodeTypes} */(type), data: unixFsData, blockSizes },
+ // @ts-expect-error - type is a string and not assignable to `UnixFsNodeTypes`
+ data: { type, data: unixFsData, blockSizes },
links: normaliseDagPbLinks(node.Links, cid),
size: unixFsObj.fileSize(),
format
@@ -73,7 +94,6 @@ export function normaliseDagPb (node, cid, type) {
// console.error(err)
}
}
- // const cidStr = toCidStrOrNull(cid)
return {
cid: cidStr,
@@ -147,18 +167,20 @@ export function findAndReplaceDagCborLinks (obj, sourceCid, path = '') {
return obj
.map((val, i) => findAndReplaceDagCborLinks(val, sourceCid, path ? `${path}/${i}` : `${i}`))
.reduce((a, b) => a.concat(b))
- .filter(a => !!a)
+ .filter(a => Boolean(a))
}
const keys = Object.keys(obj)
// Support older `{ "/": Buffer } style links until all the IPLD formats are updated.
if (keys.length === 1 && keys[0] === '/') {
+ // @ts-expect-error - todo: resolve this type error
const targetCid = toCidOrNull(obj['/'])
if (!targetCid) return []
const target = targetCid.toString()
+ // @ts-expect-error - todo: resolve this type error
obj['/'] = target
return [{ path, source: sourceCid, target, size: 0, index: 0 }]
@@ -166,9 +188,10 @@ export function findAndReplaceDagCborLinks (obj, sourceCid, path = '') {
if (keys.length > 0) {
return keys
+ // @ts-expect-error - todo: resolve this type error
.map(key => findAndReplaceDagCborLinks(obj[key], sourceCid, path ? `${path}/${key}` : `${key}`))
.reduce((a, b) => a.concat(b))
- .filter(a => !!a)
+ .filter(a => Boolean(a))
} else {
return []
}
diff --git a/src/lib/normalize-dag-node.test.js b/src/lib/normalize-dag-node.test.js
index 609a1cbf..19a35764 100644
--- a/src/lib/normalize-dag-node.test.js
+++ b/src/lib/normalize-dag-node.test.js
@@ -1,6 +1,7 @@
/* global it expect */
-import { CID } from 'multiformats'
import * as dagCbor from '@ipld/dag-cbor'
+import { CID } from 'multiformats'
+
import normaliseDagNode from './normalise-dag-node'
const cid1 = 'bafyreifiioc5v7xh3xbqjkdvgcz5ywo2vnhzd2gdnybfogxajjnchzzhei'
diff --git a/src/lib/resolve-ipld-path.js b/src/lib/resolve-ipld-path.js
index a6922492..36f1d21c 100644
--- a/src/lib/resolve-ipld-path.js
+++ b/src/lib/resolve-ipld-path.js
@@ -1,3 +1,7 @@
+import { CID } from 'multiformats'
+
+import getCodecForCid from './get-codec-for-cid'
+import { getRawBlock } from './get-raw-block'
import normaliseDagNode from './normalise-dag-node'
/**
@@ -31,7 +35,7 @@ import normaliseDagNode from './normalise-dag-node'
*
* Usage:
* ```js
- * const res = resolveIpldPath(getIpfs, 'zdpuHash' '/favourites/0/a/css')
+ * const res = resolveIpldPath(getHelia, 'zdpuHash' '/favourites/0/a/css')
* const {targetNode, canonicalPath, localPath, nodes, pathBoundaries} = res
* ```
* Where:
@@ -41,15 +45,16 @@ import normaliseDagNode from './normalise-dag-node'
* - `nodes` is the array of nodes that the path traverses.
* - `pathBoundaries` is the array of links that the path traverses.
*
- * @param {IpldInterface} ipldGet fn that returns a promise of the ipld data for a (cid, path, options)
- * @param {string} sourceCid the root hash
- * @param {string} path everything after the hash
- * @param {object[]} nodes accumulated node info
- * @param {object[]} pathBoundaries accumulated path boundary info
+ * @param {import('@helia/interface').Helia} helia
+ * @param {import('kubo-rpc-client').IPFSHTTPClient} kuboClient
+ * @param {string} sourceCid - the root hash
+ * @param {string} path - everything after the hash
+ * @param {object[]} nodes - accumulated node info
+ * @param {object[]} pathBoundaries - accumulated path boundary info
* @returns {ResolvedIpldPathInfo} resolved path info
*/
-export default async function resolveIpldPath (ipld, sourceCid, path, nodes = [], pathBoundaries = []) {
- const { value, remainderPath } = await ipldGetNodeAndRemainder(ipld, sourceCid, path)
+export default async function resolveIpldPath (helia, kuboClient, sourceCid, path, nodes = [], pathBoundaries = []) {
+ const { value, remainderPath } = await ipldGetNodeAndRemainder(helia, kuboClient, sourceCid, path)
if (sourceCid == null) {
throw new Error('sourceCid is null')
}
@@ -64,45 +69,54 @@ export default async function resolveIpldPath (ipld, sourceCid, path, nodes = []
if (link) {
pathBoundaries.push(link)
// Go again, using the link.target as the sourceCid, and the remainderPath as the path.
- return resolveIpldPath(ipld, link.target, remainderPath, nodes, pathBoundaries)
+ return resolveIpldPath(helia, kuboClient, link.target, remainderPath, nodes, pathBoundaries)
}
// we made it to the containing node. Hand back the info
const canonicalPath = path ? `${sourceCidStr}${path}` : sourceCidStr
const targetNode = node
+
return { targetNode, canonicalPath, localPath: path, nodes, pathBoundaries }
}
/**
* @function ipldGetNodeAndRemainder
- * @param {IpldInterface} ipld
+ * @param {typeof import('@helia/interface').Helia} helia
+ * @param {import('kubo-rpc-client').IPFSHTTPClient} kuboClient
* @param {string} sourceCid
* @param {string} path
* @returns
*/
-export async function ipldGetNodeAndRemainder (ipld, sourceCid, path) {
+export async function ipldGetNodeAndRemainder (helia, kuboClient, sourceCid, path) {
if (sourceCid == null) {
throw new Error('sourceCid is null')
}
- // TODO: find out why ipfs.dag.get with localResolve never resolves.
- // const {value, remainderPath} = await getIpfs().dag.get(sourceCid, path, {localResolve: true})
+ let cidInstance = CID.asCID(sourceCid)
+ if (cidInstance === null) {
+ cidInstance = CID.parse(sourceCid)
+ }
+ const codecWrapper = await getCodecForCid(cidInstance)
+ const encodedValue = await getRawBlock(helia, kuboClient, cidInstance)
+ const value = codecWrapper.decode(encodedValue)
- // TODO: use ipfs.dag.get when it gets ipld super powers
- // SEE: https://github.com/ipfs/js-ipfs-api/pull/755
- // const {value} = await getIpfs().dag.get(sourceCid)
+ const codecWrapperResolveResult = await codecWrapper.resolve(path || '/', encodedValue)
+ const { remainderPath, resolve: resolveValue } = codecWrapperResolveResult
+
+ if (resolveValue?.Hash != null) {
+ // This is a PBLink, and we should resolve that link so we're returning PBNodes not PBLinks
+ return await ipldGetNodeAndRemainder(helia, value.Hash, remainderPath)
+ }
- // TODO: handle indexing into dag-pb links without using Links prefix as per go-ipfs dag.get does.
- // Current js-ipld-dag-pb resolver will throw with a path not available error if Links prefix is missing.
return {
- value: await ipld.get(sourceCid),
- remainderPath: (await ipld.resolve(sourceCid, path || '/').first()).remainderPath
+ value,
+ remainderPath
}
}
/**
* Find the link object that matches linkPath
*
- * @param {import('./normalise-dag-node').NormalizedDagNode} node a `normalisedDagNode`
- * @param {string} linkPath an IPLD path string
+ * @param {import('./normalise-dag-node').NormalizedDagNode} node - a `normalisedDagNode`
+ * @param {string} linkPath - an IPLD path string
* @returns {import('./normalise-dag-node').NormalizedDagLink} the link object for `linkPath`
*/
export function findLink (node, linkPath) {
diff --git a/src/lib/resolve-ipld-path.test.js b/src/lib/resolve-ipld-path.test.js
index d614eb00..9861a1ad 100644
--- a/src/lib/resolve-ipld-path.test.js
+++ b/src/lib/resolve-ipld-path.test.js
@@ -1,140 +1,147 @@
-
-/* global describe it expect jest */
+/* global describe it expect */
// @ts-check
-import * as dagPb from '@ipld/dag-pb'
import * as dagCbor from '@ipld/dag-cbor'
+import * as dagPb from '@ipld/dag-pb'
+import { create as createKuboClient } from 'kubo-rpc-client'
+import * as raw from 'multiformats/codecs/raw'
+import { addDagNodeToHelia } from './helpers'
import resolveIpldPath, { findLinkPath } from './resolve-ipld-path'
-import { toCidOrNull } from './cid'
-
-const testCidString = 'bafyreiddymapg5zcpma3iu4wingqvois6jirucn5776wdsyg5f3f65v75a'
+import { createHeliaMock } from '../../test/unit/heliaMock'
describe('resolveIpldPath', () => {
+ /**
+ * @type {import('@helia/interface').Helia}
+ */
+ let helia
+ let kuboClient
+ beforeEach(async () => {
+ helia = await createHeliaMock()
+ kuboClient = await createKuboClient()
+ })
it('resolves all nodes traversed along a path', async () => {
- const testCidString = 'bafyreiddymapg5zcpma3iu4wingqvois6jirucn5776wdsyg5f3f65v75a'
-
- const testCID = /** @type {import('multiformats').CID} */(toCidOrNull(testCidString))
- const ipldMock = {
- get: jest.fn(),
- resolve: jest.fn()
- }
- const path = '/a/b/a'
- const linkCid = 'bafyreigjtxtteq6vj3gtb7gzhwkmnprd2al5mjyttptcmu5cp3gvzmau3a'
-
- const dagGetRes1 = {
- a: {
- b: toCidOrNull(linkCid)
- }
- }
- const dagGetRes2 = {
- first: () => Promise.resolve({ remainderPath: '/a' })
- }
- const dagGetRes3 = {
- a: 'hello world'
- }
- const dagGetRes4 = {
- first: () => Promise.resolve({ remainderPath: '/a' })
- }
-
- ipldMock.get.mockReturnValueOnce(Promise.resolve(dagGetRes1))
- ipldMock.resolve.mockReturnValueOnce(dagGetRes2)
- ipldMock.get.mockReturnValueOnce(Promise.resolve(dagGetRes3))
- ipldMock.resolve.mockReturnValueOnce(dagGetRes4)
-
- const res = await resolveIpldPath(ipldMock, testCID.toString(), path)
-
- expect(ipldMock.get.mock.calls.length).toBe(2)
- expect(ipldMock.resolve.mock.calls.length).toBe(2)
- expect(res.canonicalPath).toBe(`${linkCid}/a`)
- expect(res.nodes.length).toBe(2)
- expect(res.nodes[0].type).toBe(dagCbor.code)
- expect(res.nodes[0].cid).toBe(testCidString)
- expect(res.nodes[1].type).toBe(dagCbor.code)
- expect(res.nodes[1].cid).toBe(linkCid)
- expect(res.pathBoundaries.length).toBe(1)
+ const node4Cid = await addDagNodeToHelia(helia, dagPb, createDagPbNode('4th node', []))
+ const node3Cid = await addDagNodeToHelia(helia, dagPb, createDagPbNode('3rd node', [{
+ name: 'a',
+ cid: node4Cid.toString(),
+ size: 101
+ }]))
+ const node2Cid = await addDagNodeToHelia(helia, dagPb, createDagPbNode('2nd node', [{
+ name: 'b',
+ cid: node3Cid.toString(),
+ size: 101
+ }]))
+ const rootNodeCid = await addDagNodeToHelia(helia, dagPb, createDagPbNode('root node', [{
+ name: 'a',
+ cid: node2Cid.toString(),
+ size: 101
+ }]))
+ const res = await resolveIpldPath(helia, kuboClient, rootNodeCid.toString(), '/a/b/a')
+ expect(res.canonicalPath).toBe(node4Cid.toString())
+ expect(res.nodes.length).toBe(4)
+ expect(res.nodes[0].cid).toBe(rootNodeCid.toString())
+ expect(res.nodes[1].cid).toBe(node2Cid.toString())
+ expect(res.nodes[2].cid).toBe(node3Cid.toString())
+ expect(res.nodes[3].cid).toBe(node4Cid.toString())
+ expect(res.pathBoundaries.length).toBe(3)
expect(res.pathBoundaries[0]).toEqual(expect.objectContaining({
- path: 'a/b',
- source: testCidString,
- target: linkCid
+ path: 'a',
+ source: rootNodeCid.toString(),
+ target: node2Cid.toString()
}))
})
it('resolves thru dag-cbor to dag-pb to dag-pb', async () => {
- const ipldMock = {
- get: jest.fn(),
- resolve: jest.fn()
- }
-
const path = '/a/b/pb1'
const dagNode3 = await createDagPbNode('the second pb node', [])
- const dagNode3CID = 'bafybeibmrzxo3u4epqek6xkk2vkjzn4ika5rp4445hdkgi2h3ovsk6iwpm'
+ const dagNode3CID = await addDagNodeToHelia(helia, dagPb, dagNode3)
const dagNode2 = await createDagPbNode('the first pb node', [{
name: 'pb1',
- cid: dagNode3CID,
+ cid: dagNode3CID.toString(),
size: 101
}])
- const dagNode2CID = 'bafybeids2kauewqpsenxbaet4ar5sbsaddd24p2yk7a4b2vdwyrnsej45e'
+ const dagNode2CID = await addDagNodeToHelia(helia, dagPb, dagNode2)
const dagNode1 = {
a: {
- b: toCidOrNull(dagNode2CID)
+ b: dagNode2CID
}
}
+ const dagNode1Cid = await addDagNodeToHelia(helia, dagCbor, dagNode1)
- const dagGetRes1 = dagNode1
-
- const dagGetRes2 = {
- first: () => Promise.resolve({ remainderPath: 'pb1' })
- }
-
- const dagGetRes3 = dagNode2
-
- const dagGetRes4 = {
- first: () => Promise.resolve({ remainderPath: '' })
- }
-
- const dagGetRes5 = dagNode3
-
- const dagGetRes6 = {
- first: () => Promise.resolve({ remainderPath: '' })
- }
-
- ipldMock.get.mockReturnValueOnce(Promise.resolve(dagGetRes1))
- ipldMock.resolve.mockReturnValueOnce(dagGetRes2)
- ipldMock.get.mockReturnValueOnce(Promise.resolve(dagGetRes3))
- ipldMock.resolve.mockReturnValueOnce(dagGetRes4)
- ipldMock.get.mockReturnValueOnce(Promise.resolve(dagGetRes5))
- ipldMock.resolve.mockReturnValueOnce(dagGetRes6)
+ const res = await resolveIpldPath(helia, kuboClient, dagNode1Cid.toString(), path)
- const res = await resolveIpldPath(ipldMock, testCidString, path)
-
- expect(ipldMock.get.mock.calls.length).toBe(3)
- expect(ipldMock.resolve.mock.calls.length).toBe(3)
- expect(res.targetNode.cid).toEqual(dagNode3CID)
- expect(res.canonicalPath).toBe(dagNode3CID)
+ expect(res.targetNode.cid).toEqual(dagNode3CID.toString())
+ expect(res.canonicalPath).toBe(dagNode3CID.toString())
expect(res.nodes.length).toBe(3)
expect(res.nodes[0].type).toBe(dagCbor.code)
- expect(res.nodes[0].cid).toBe(testCidString)
+ expect(res.nodes[0].cid).toBe(dagNode1Cid.toString())
expect(res.nodes[0].links.length).toBe(1)
expect(res.nodes[1].type).toBe(dagPb.code)
- expect(res.nodes[1].cid).toBe(dagNode2CID)
+ expect(res.nodes[1].cid).toBe(dagNode2CID.toString())
expect(res.nodes[1].links.length).toBe(1)
expect(res.nodes[2].type).toBe(dagPb.code)
- expect(res.nodes[2].cid).toBe(dagNode3CID)
+ expect(res.nodes[2].cid).toBe(dagNode3CID.toString())
expect(res.nodes[2].links.length).toBe(0)
expect(res.pathBoundaries.length).toBe(2)
expect(res.pathBoundaries[0]).toEqual(expect.objectContaining({
path: 'a/b',
- source: testCidString,
- target: dagNode2CID
+ source: dagNode1Cid.toString(),
+ target: dagNode2CID.toString()
}))
expect(res.pathBoundaries[1]).toEqual(expect.objectContaining({
index: 0,
path: 'pb1',
- source: dagNode2CID,
- target: dagNode3CID
+ source: dagNode2CID.toString(),
+ target: dagNode3CID.toString()
+ }))
+ })
+
+ /**
+ * This test proves that an error ("Requested IPLD path should end with the remainder path") discovered when viewing
+ * the dag-cbor example from the start exploring page when loading path
+ * `bafyreicnokmhmrnlp2wjhyk2haep4tqxiptwfrp2rrs7rzq7uk766chqvq/cheese/0` does not occur.
+ *
+ * The CIDs of the below objects should be:
+ *
+ * rootNode: bafyreicnokmhmrnlp2wjhyk2haep4tqxiptwfrp2rrs7rzq7uk766chqvq
+ * childNode: bafkreifvxooyaffa7gy5mhrb46lnpdom34jvf4r42mubf5efbodyvzeujq
+ *
+ * but it doesn't necessarily matter, this was just an edgecase discovered accidentally.
+ */
+ it('resolves dag-cbor node with children all pointing to raw node', async () => {
+ const path = '/cheese/0'
+ const textEncoder = new TextEncoder()
+ const childNode = await addDagNodeToHelia(helia, raw, textEncoder.encode('foo\n'))
+ const rootNode = await addDagNodeToHelia(helia, dagCbor, {
+ cats: 'not cats',
+ cheese: [
+ childNode,
+ childNode,
+ childNode,
+ childNode
+ ],
+ something: childNode
+ })
+
+ const res = await resolveIpldPath(helia, kuboClient, rootNode.toString(), path)
+
+ expect(res.targetNode.cid.toString()).toBe(childNode.toString())
+ expect(res.canonicalPath).toBe(childNode.toString())
+ expect(res.nodes.length).toBe(2)
+ expect(res.nodes[0].cid.toString()).toBe(rootNode.toString())
+ expect(res.nodes[0].type).toBe(dagCbor.code)
+ expect(res.nodes[0].links.length).toBe(5)
+ expect(res.nodes[1].cid.toString()).toBe(childNode.toString())
+ expect(res.nodes[1].type).toBe(raw.code)
+ expect(res.nodes[1].links.length).toBe(0)
+ expect(res.pathBoundaries.length).toBe(1)
+ expect(res.pathBoundaries[0]).toEqual(expect.objectContaining({
+ path: 'cheese/0',
+ source: rootNode.toString(),
+ target: childNode.toString()
}))
})
})
diff --git a/src/lib/tours.js b/src/lib/tours.jsx
similarity index 100%
rename from src/lib/tours.js
rename to src/lib/tours.jsx
diff --git a/src/types.d.ts b/src/types.d.ts
index 445199c7..85734d91 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,30 +1,35 @@
export type { CID } from 'multiformats/cid'
-export type CodecType = number;
-export type NodeData = Uint8Array;
+export type CodecType = number
+export type NodeData = Uint8Array
export type UnixFsNodeTypes = 'raw' | 'directory' | 'file' | 'metadata' | 'symlink' | 'hamt-sharded-directory'
export type UnixFsNodeDirTypes = 'directory' | 'hamt-sharded-directory'
export type NormalizedDagPbNodeFormat = 'unixfs' | 'non-unixfs'
export type NormalizedDagNodeFormat = NormalizedDagPbNodeFormat | 'unknown'
export interface UnixFsNodeData {
- type: UnixFsNodeTypes;
- data: NodeData | undefined;
- blockSizes: number[];
+ type: UnixFsNodeTypes
+ data: NodeData | undefined
+ blockSizes: number[]
}
export interface NormalizedDagLink {
- path: string;
- source: string;
- target: string;
- size: number;
- index: number;
+ path: string
+ source: string
+ target: string
+ size: number
+ index: number
}
export interface NormalizedDagNode {
- cid: string;
- type: CodecType | string;
- data: UnixFsNodeData | NodeData | undefined;
- links: NormalizedDagLink[];
- size?: number;
- format: NormalizedDagNodeFormat;
+ cid: string
+ type: CodecType | string
+ data: UnixFsNodeData | NodeData | undefined
+ links: NormalizedDagLink[]
+ size?: number
+ format: NormalizedDagNodeFormat
+}
+
+export interface ResolveType {
+ value: DecodedType
+ remainderPath: string
}
diff --git a/test/unit/heliaMock.js b/test/unit/heliaMock.js
new file mode 100644
index 00000000..3ef5384b
--- /dev/null
+++ b/test/unit/heliaMock.js
@@ -0,0 +1,16 @@
+import { MemoryBlockstore } from 'blockstore-core'
+import { MemoryDatastore } from 'datastore-core'
+import { createHelia } from 'helia'
+
+export async function createHeliaMock () {
+ const blockstore = new MemoryBlockstore()
+ const datastore = new MemoryDatastore()
+ const helia = await createHelia({
+ datastore,
+ blockstore
+ // libp2p: {}
+ })
+ await helia.libp2p.stop()
+
+ return helia
+}
diff --git a/test/unit/setup.js b/test/unit/setup.js
new file mode 100644
index 00000000..ea48725f
--- /dev/null
+++ b/test/unit/setup.js
@@ -0,0 +1,11 @@
+import matchers from '@testing-library/jest-dom/matchers'
+import { cleanup } from '@testing-library/react'
+import { expect, afterEach } from 'vitest'
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers)
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+ cleanup()
+})
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
new file mode 100644
index 00000000..7db06f58
--- /dev/null
+++ b/tsconfig.eslint.json
@@ -0,0 +1,15 @@
+{
+ "extends": [
+ "./tsconfig.json"
+ ],
+ "include": [
+ ".*.js",
+ "**/*.js",
+ "**/*.jsx",
+ "**/*.ts",
+ "**/*.tsx",
+ ],
+ "exclude": [
+ "dist"
+ ]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..c96d7c18
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,49 @@
+{
+ /**
+ * NOTE: Babel is currently transpiling typescript.
+ */
+ "compilerOptions": {
+ "target": "ESNext",
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "es2021",
+ "esnext"
+ ],
+ "types": [
+ "vite/client",
+ "vite-plugin-svgr/client"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "ES2022",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "declaration": true,
+ "emitDeclarationOnly": true,
+ "outDir": "dist",
+ "declarationDir": "dist",
+ "jsx": "react",
+ "rootDir": "src",
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "src/**/*.test.*",
+ "src/**/*.stories.*",
+ "node_modules",
+ "storybook-static",
+ "build",
+ "dist",
+ "vite.config.ts",
+ "package.json",
+ "dev"
+ ]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..38eab2b2
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,129 @@
+import fs from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path, { resolve as pathResolve } from 'node:path'
+import url from 'node:url'
+
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import resolve from '@rollup/plugin-node-resolve'
+import react from '@vitejs/plugin-react'
+import { defineConfig, type PluginOption, type UserConfig, type UserConfigExport } from 'vite'
+import svgrPlugin from 'vite-plugin-svgr'
+
+// https://github.com/bvaughn/react-virtualized/issues/1632#issuecomment-1483966063
+const WRONG_CODE = 'import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";'
+function reactVirtualized (): PluginOption {
+ return {
+ name: 'flat:react-virtualized',
+ // Note: we cannot use the `transform` hook here
+ // because libraries are pre-bundled in vite directly,
+ // plugins aren't able to hack that step currently.
+ // so instead we manually edit the file in node_modules.
+ // all we need is to find the timing before pre-bundling.
+ configResolved: async () => {
+ const require = createRequire(import.meta.url)
+ const reactVirtualizedPath = require.resolve('react-virtualized')
+ const { pathname: reactVirtualizedFilePath } = new url.URL(reactVirtualizedPath, import.meta.url)
+ const file = reactVirtualizedFilePath
+ .replace(
+ path.join('dist', 'commonjs', 'index.js'),
+ path.join('dist', 'es', 'WindowScroller', 'utils', 'onScroll.js')
+ )
+ const code = await fs.readFile(file, 'utf-8')
+ const modified = code.replace(WRONG_CODE, '')
+ await fs.writeFile(file, modified)
+ }
+ }
+}
+
+// https://vitejs.dev/config/
+export default defineConfig(() => {
+ const vitePlugins: UserConfig['plugins'] = [
+ react(),
+ svgrPlugin(),
+ reactVirtualized(),
+ resolve({
+ extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
+ })
+ ]
+ let viteResolve: UserConfig['resolve'] = {
+ alias: [{ find: '@', replacement: pathResolve(__dirname, '/src') }]
+ }
+
+ const viteDefine: UserConfig['define'] = {
+ global: 'globalThis'
+ }
+ const viteOptimizeDeps: UserConfig['optimizeDeps'] = {
+ esbuildOptions: {
+ loader: {
+ '.js': 'jsx',
+ '.ts': 'tsx',
+ '.jsx': 'jsx',
+ '.tsx': 'tsx'
+ }
+ }
+ }
+ const viteEsBuild: UserConfig['esbuild'] = {
+ loader: 'tsx', // OR "tsx"
+ include: /\.(tsx?|jsx?)$/
+ }
+ const viteBuild: UserConfig['build'] = {
+ lib: {
+ entry: [
+ pathResolve(__dirname, 'src/index.js')
+ ],
+ fileName: (format, entryName) => `${format}/${entryName}.js`,
+ formats: ['es']
+ },
+ outDir: 'dist-vite',
+ target: 'esnext',
+ minify: false,
+ cssCodeSplit: false,
+ rollupOptions: {
+ external: [
+ /node_modules/,
+ /\.stories\..+$/
+ ],
+ preserveEntrySignatures: 'strict',
+ input: {
+ index: pathResolve(__dirname, 'src/index.js')
+ },
+ output: {
+ preserveModules: true,
+ preserveModulesRoot: 'src',
+ entryFileNames: '[name].js'
+ },
+ plugins: [
+ ]
+ }
+ }
+
+ viteResolve = {
+ alias: [
+ { find: /^process$/, replacement: 'rollup-plugin-node-polyfills/polyfills/process-es6' },
+ { find: /^stream$/, replacement: 'rollup-plugin-node-polyfills/polyfills/stream' },
+ { find: /^_stream_duplex$/, replacement: 'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex' },
+ { find: /^_stream_transform$/, replacement: 'rollup-plugin-node-polyfills/polyfills/readable-stream/transform' }
+ ]
+ }
+ viteOptimizeDeps.include = []
+ viteOptimizeDeps.esbuildOptions = {
+ ...viteOptimizeDeps.esbuildOptions,
+ plugins: [
+ NodeGlobalsPolyfillPlugin({ buffer: true, process: true })
+ ]
+ }
+
+ const finalConfig: UserConfigExport = {
+ plugins: vitePlugins,
+ resolve: viteResolve,
+ define: viteDefine,
+ optimizeDeps: viteOptimizeDeps,
+ esbuild: viteEsBuild,
+ build: viteBuild,
+ server: {
+ open: true
+ }
+ }
+
+ return finalConfig
+})
diff --git a/vitest.config.js b/vitest.config.js
new file mode 100644
index 00000000..fefd12db
--- /dev/null
+++ b/vitest.config.js
@@ -0,0 +1,19 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+
+import viteConfig from './vite.config'
+
+export default mergeConfig(viteConfig, defineConfig({
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: './test/unit/setup.js',
+ include: [
+ 'src\/**\/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
+ ],
+ deps: {
+ inline: [
+ 'ipld-explorer-components'
+ ]
+ }
+ }
+}))
.default})
+