Migrate to vite (#109)

* migrate to vite * format * update pkg scripts * add type-checking to build * publish output dir * Add @babel/core for react-refresh * Remove @babel/core; bump @vitejs/plugin-react-refresh * bump typescript & vite * add geotiff comment' * rename: empty-geotiff.js -> empty:geotiff.js * Remove snowpack references * Simplify tsconfig * Create registration module * prettier * Add description to registration module
hms-dbmi · Aug 3, 2021 · a829762 · a829762
1 parent cc82d8a
commit a829762
Show file tree

Hide file tree

Showing 11 changed files with 356 additions and 1,785 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -16,6 +16,7 @@ jobs:
         with: 
           node-version: '15.x'
       - run: npm install
+      - run: npm run check
       - run: npm run lint
 
       # TODO: add tests
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -3,15 +3,15 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔬</text></svg>">
-    <link rel="alternate icon" href="%PUBLIC_URL%favicon.ico">
+    <link rel="alternate icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="A minimal, purely client-side program for viewing Zarr-based images." />
     <title>vizarr</title>
   </head>
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script type="module" src="%PUBLIC_URL%_dist_/index.js"></script>
+    <script type="module" src="/src/index.tsx"></script>
     <style>
       @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
       html {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,25 +13,19 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "reference-spec-reader": "^0.1.1",
-    "zarr": "^0.5.0"
+    "zarr": "^0.5.1"
   },
   "scripts": {
-    "start": "snowpack dev",
-    "build": "snowpack build",
-    "export": "npm run build",
-    "format": "prettier --write \"{src,types}/**/*.{js,jsx,ts,tsx}\" snowpack.config.js",
-    "lint": "prettier --check \"{src,types}/**/*.{js,jsx,ts,tsx}\" snowpack.config.js",
-    "prepublishOnly": "npm run build && cp -r ./out/* .",
-    "postpublish": "git clean -fd"
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "export": "npm run check && npm run build",
+    "format": "prettier --write \"{src,types}/**/*.{js,jsx,ts,tsx}\" vite.config.js",
+    "lint": "prettier --check \"{src,types}/**/*.{js,jsx,ts,tsx}\" vite.config.js",
+    "check": "tsc"
   },
   "files": [
-    "__snowpack__",
-    "_dist_",
-    "web_modules",
-    "robots.txt",
-    "index.html",
-    "favicon.ico",
-    "favicon.png"
+    "out"
   ],
   "prettier": {
     "trailingComma": "es5",
@@ -41,13 +35,11 @@
   },
   "devDependencies": {
     "@danmarshall/deckgl-typings": "^4.3.10",
-    "@snowpack/plugin-react-refresh": "^2.3.7",
-    "@snowpack/plugin-typescript": "^1.1.0",
     "@types/node": "^14.14.5",
     "@types/react-dom": "^17.0.0",
-    "@types/snowpack-env": "^2.3.2",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
     "prettier": "^2.2.0",
-    "snowpack": "^3.3.7",
-    "typescript": "^4.2.3"
+    "typescript": "^4.3.5",
+    "vite": "^2.4.4"
   }
 }
diff --git a/snowpack.config.js b/snowpack.config.js
diff --git a/src/empty:geotiff.js b/src/empty:geotiff.js
@@ -0,0 +1,10 @@
+/*
+ * This file provides an "empty" export of geotiff's
+ * top-level API so that it may be aliased by vite
+ * when resolving 'geotiff' as a dependency.
+ *
+ * This avoids trying to resolve any of geotiff's
+ * inner, difficult to resolve exports.
+ */
+export const fromUrl = '';
+export const fromBlob = '';
diff --git a/src/index.tsx b/src/index.tsx
@@ -5,6 +5,7 @@ import { ThemeProvider } from '@material-ui/styles';
 
 import Vizarr from './vizarr';
 import theme from './theme';
+import './register-codecs';
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>
@@ -14,9 +15,3 @@ ReactDOM.render(
   </ThemeProvider>,
   document.getElementById('root')
 );
-
-// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
-// Learn more: https://www.snowpack.dev/#hot-module-replacement
-if (import.meta.hot) {
-  import.meta.hot.accept();
-}
diff --git a/src/register-codecs.ts b/src/register-codecs.ts
@@ -0,0 +1,30 @@
+import { addCodec } from 'zarr';
+import type { CodecConstructor } from 'numcodecs';
+
+type CodecModule = { default: CodecConstructor<Record<string, unknown>> };
+
+const cache: Map<string, Promise<CodecModule['default']>> = new Map();
+
+function add(name: string, load: () => Promise<CodecModule>): void {
+  // Cache import to avoid duplicate loads
+  const loadAndCache = () => {
+    if (!cache.has(name)) {
+      const promise = load()
+        .then((m) => m.default)
+        .catch((err) => {
+          cache.delete(name);
+          throw err;
+        });
+      cache.set(name, promise);
+    }
+    return cache.get(name)!;
+  };
+  addCodec(name, loadAndCache);
+}
+
+// Add dynmaically imported codecs to Zarr.js registry.
+add('lz4', () => import('numcodecs/lz4'));
+add('gzip', () => import('numcodecs/gzip'));
+add('zlib', () => import('numcodecs/zlib'));
+add('zstd', () => import('numcodecs/zstd'));
+add('blosc', () => import('numcodecs/blosc'));
diff --git a/src/vizarr.tsx b/src/vizarr.tsx
@@ -7,6 +7,8 @@ import type { ImageLayerConfig } from './state';
 import Viewer from './components/Viewer';
 import Menu from './components/Menu';
 
+import { version } from '../package.json';
+
 function App() {
   const setSourceInfo = useUpdateAtom(sourceInfoAtom);
   const setViewState = useUpdateAtom(viewStateAtom);
@@ -53,7 +55,7 @@ function App() {
       const api = await imjoy.setupRPC({
         name: 'vizarr',
         description: 'A minimal, purely client-side program for viewing Zarr-based images with Viv & ImJoy.',
-        version: import.meta.env.SNOWPACK_PUBLIC_PACKAGE_VERSION as string,
+        version: version,
       });
       const add_image = async (props: ImageLayerConfig) => addImage(props);
       const set_view_state = async (vs: { zoom: number; target: number[] }) => setViewState(vs);

diff --git a/tsconfig.json b/tsconfig.json
@@ -6,18 +6,15 @@
     "moduleResolution": "node",
     "jsx": "preserve",
     "baseUrl": "./",
-    /* paths - If you configure Snowpack import aliases, add them here. */
-    "paths": {
-      "zarr": ["node_modules/zarr"]
-    },
-    /* noEmit - Snowpack builds (emits) files, not tsc. */
     "noEmit": true,
-    /* Additional Options */
     "strict": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "importsNotUsedAsValues": "error"
+    "importsNotUsedAsValues": "error",
+    "paths": {
+      "zarr": ["node_modules/zarr"]
+    }
   }
 }
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [reactRefresh()],
+  build: {
+    outDir: 'out',
+    publicPath: process.env.VIZARR_PREFIX || './',
+  },
+  resolve: {
+    alias: {
+      zarr: 'zarr/core',
+      geotiff: resolve(__dirname, 'src/empty:geotiff.js'),
+    },
+  },
+});