feat!: remove all old deps

.aegir.js

@@ -0,0 +1,73 @@
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import {EsmExternalsPlugin} from '@esbuild-plugins/esm-externals'
+// console.log(`EsmExternals: `, EsmExternals);
+
+import pkgJson from './package.json' assert { type: 'json' }
+const { dependencies, peerDependencies } = pkgJson
+
+/** @type {import('aegir').PartialOptions} */
+export default {
+  tsRepo: true,
+  release: {
+    build: false
+  },
+  dependencyCheck: {
+    input: [
+      'dist/**/*.js',
+    ],
+    productionInput: [
+      'dist/**/*.js',
+    ],
+  },
+  build: {
+    config: {
+      platform: 'browser',
+      format: 'esm',
+      // external: Object.keys(dependencies).concat(Object.keys(peerDependencies)),
+      outbase: 'src',
+      outdir: 'dist',
+      outfile: '',
+      loader: {
+        '.svg': 'text',
+        '.ts': 'ts',
+        '.js': 'js',
+        '.jsx': 'jsx',
+      },
+      entryPoints: [
+        'src/index.js',
+        'src/components/object-info/LinksTable.css',
+        'src/components/loader/Loader.css'
+      ],
+      bundle: false,
+      plugins: [
+        EsmExternalsPlugin({ externals: ['react', 'react-dom'] }),
+        NodeModulesPolyfillPlugin(),
+        NodeGlobalsPolyfillPlugin({
+          process: true,
+          buffer: true,
+          stream: true,
+          crypto: true,
+        }),
+        // NodeResolve({
+        //     extensions: ['.ts', '.js'],
+        //     onResolved: (resolved) => {
+        //         if (resolved.includes('node_modules')) {
+        //             return {
+        //               external: true,
+        //             }
+        //         }
+        //         return resolved
+        //     },
+        // }),
+      ],
+    }
+  },
+  test: {
+    build: false,
+    target: 'browser',
+    files: [
+      'src/**/*.test.js',
+    ]
+  }
+}

.babelrc

@@ -3,6 +3,10 @@
     ["@babel/preset-env", {
       "modules": false
     }],
+    ["@babel/preset-typescript", {
+      "isTSX": true,
+      "allExtensions": true
+    }],
     "@babel/preset-react"
   ],
   "plugins": [

.eslintrc.js

@@ -3,4 +3,3 @@ module.exports = {
     extends: ['react-app', 'standard'],
     plugins: ['jsx-a11y'],
 }
-

.github/workflows/js-test-and-release.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: 16
+        node-version: 18
     - uses: ipfs/aegir/actions/cache-node-modules@master
     - run: npm run --if-present build
     - run: npm run --if-present storybook:build
@@ -33,7 +33,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
       - uses: ipfs/aegir/actions/cache-node-modules@master
       - uses: ipfs/aegir/actions/docker-login@master
         with:

dev/devPage.d.ts

@@ -0,0 +1 @@
+export {};

dev/devPage.js

@@ -0,0 +1,49 @@
+/* globals globalThis */
+import React, { useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { composeBundles, createRouteBundle } from 'redux-bundler';
+import { Provider as ReduxStoreProvider, connect } from 'redux-bundler-react';
+import ReactDOM from 'react-dom';
+import i18n from '../dist/i18n';
+import { exploreBundle, ExplorePage, StartExploringPage } from '../dist/index.js';
+// import ipfsBundle from './bundles/ipfs'
+import heliaBundle from '../dist/bundles/helia';
+import { Buffer } from 'buffer';
+import 'tachyons';
+import 'ipfs-css';
+import 'react-virtualized/styles.css';
+import '../dist/components/object-info/LinksTable.css';
+import '../dist/components/loader/Loader.css';
+globalThis.Buffer = Buffer;
+// import i18nDecorator from './i18n-decorator.js'
+const routesBundle = createRouteBundle({
+    '/explore*': ExplorePage,
+    '/': StartExploringPage,
+    '': StartExploringPage
+}, {
+    routeInfoSelector: 'selectHash'
+});
+const getStore = composeBundles(exploreBundle(), routesBundle, 
+// ipfsBundle,
+heliaBundle);
+const PageRenderer = connect('selectRoute', 'selectQueryObject', 'doUpdateUrl', 'doInitIpfs', (props) => {
+    console.log(`props: `, props);
+    const Page = props?.route;
+    console.log(`Page: `, Page);
+    const { embed } = props.queryObject;
+    console.log(`embed: `, embed);
+    useEffect(() => {
+        props.doInitIpfs();
+    }, []);
+    return (
+    // <span>test</span>
+    React.createElement("div", { style: { margin: '5vh 10vw' } },
+        React.createElement(Page, { embed: embed })));
+});
+const App = () => {
+    return (React.createElement(ReduxStoreProvider, { store: getStore() },
+        React.createElement(I18nextProvider, { i18n: i18n },
+            React.createElement(PageRenderer, null))));
+};
+ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
+// root.render(<App />);

dev/devPage.jsx

@@ -0,0 +1,75 @@
+/* globals globalThis */
+import React, { useEffect } from 'react'
+import { I18nextProvider } from 'react-i18next'
+import { composeBundles, createRouteBundle } from 'redux-bundler'
+import { Provider as ReduxStoreProvider, connect } from 'redux-bundler-react'
+import ReactDOM from 'react-dom';
+import i18n from '../dist/i18n'
+import { exploreBundle, ExplorePage, StartExploringPage } from '../dist/index.js'
+// import ipfsBundle from './bundles/ipfs'
+import heliaBundle from '../dist/bundles/helia'
+
+import { Buffer } from 'buffer'
+import 'tachyons'
+import 'ipfs-css'
+import 'react-virtualized/styles.css'
+import '../dist/components/object-info/LinksTable.css'
+import '../dist/components/loader/Loader.css'
+
+globalThis.Buffer = Buffer
+
+// import i18nDecorator from './i18n-decorator.js'
+
+const routesBundle = createRouteBundle(
+  {
+    '/explore*': ExplorePage,
+    '/': StartExploringPage,
+    '': StartExploringPage
+  },
+  {
+    routeInfoSelector: 'selectHash'
+  }
+)
+const getStore = composeBundles(
+  exploreBundle(),
+  routesBundle,
+  // ipfsBundle,
+  heliaBundle,
+)
+
+const PageRenderer = connect(
+  'selectRoute',
+  'selectQueryObject',
+  'doUpdateUrl',
+  'doInitIpfs',
+  (props) => {
+    console.log(`props: `, props);
+    const Page = props?.route
+    console.log(`Page: `, Page);
+    const { embed } = props.queryObject
+    console.log(`embed: `, embed);
+    useEffect(() => {
+      props.doInitIpfs()
+    }, [])
+
+    return (
+      // <span>test</span>
+      <div style={{margin: '5vh 10vw'}}>
+        <Page embed={embed}/>
+      </div>
+    )
+  }
+)
+
+const App = () => {
+  return (
+    <ReduxStoreProvider store={getStore()}>
+      <I18nextProvider i18n={i18n}>
+        <PageRenderer />
+      </I18nextProvider>
+    </ReduxStoreProvider>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+// root.render(<App />);

index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <!-- <link rel="manifest" href="/manifest.json"> -->
+    <link rel="shortcut icon" href="/favicon.ico">
+    <!-- https://vitejs.dev/guide/build.html#library-mode -->
+    <title>Dev view for ipld-explorer-components only</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm run dev`
+    -->
+    <!--
+      Vite uses /dev/devPage.jsx which uses built dependencies in /dist, because vite has different requirements for
+      typescript & jsx than babel+typescript, which we're required to use to get our bundled assets working properly
+      for explore.ipld.io
+    -->
+    <script type="module" src="/dev/devPage.jsx"></script>
+  </body>
+
+</html>