Try switching to pnpm

.github/workflows/test.yml

@@ -21,23 +21,26 @@ jobs:
       with:
         ref: ${{ github.event.pull_request.head.sha || github.sha }}
 
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+
     - name: Setup Node.js
       uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
-        cache: 'yarn'
+        cache: 'pnpm'
 
     - name: Install dependencies
-      run: yarn install --immutable
+      run: pnpm install
 
     - name: Prepare Nuxt  
-      run: yarn dev:prepare  
+      run: pnpm dev:prepare  
 
     - name: Run linting
-      run: yarn lint
+      run: pnpm lint
 
     - name: Run type checking
-      run: yarn run nuxt typecheck
+      run: pnpm nuxt typecheck
 
     - name: Run tests
-      run: yarn test
+      run: pnpm test

.npmrc

@@ -0,0 +1,2 @@
+# Hoist dependencies of these packages to work around missing peer/dependency declarations
+public-hoist-pattern[]=cytoscape*

.nvmrc

@@ -1 +1 @@
-v20.19.5
+v22.21.1

.vscode/settings.json

@@ -23,8 +23,6 @@
     "editor.formatOnSave": true
   },
   "search.exclude": {
-    "**/yarn.lock": true,
-    "**/.yarn": true,
     "**/node_modules": true,
     "**/.git": true,
     "**/dist": true,

package.json

@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "prepack": "nuxt-module-build prepare && nuxt-module-build build",
-    "dev": "yarn run dev:prepare && nuxi dev playground",
+    "dev": "pnpm run dev:prepare && nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "lint": "eslint .",
@@ -100,19 +100,18 @@
     "@mapbox/mapbox-gl-draw": "1.4.3",
     "@maplibre/maplibre-gl-geocoder": "1.9.0",
     "@mdi/font": "7.4.47",
-    "@observablehq/plot": "0.6.17",
     "@oruga-ui/oruga-next": "0.11.6",
     "@oruga-ui/theme-bulma": "0.7.3",
+    "bulma": "1.0.4",
     "@vue/apollo-composable": "4.2.2",
     "@vue/apollo-option": "4.2.2",
     "@vueuse/core": "14.0.0",
     "apollo-upload-client": "18.0.1",
-    "bulma": "1.0.4",
     "commander": "14.0.0",
     "cytoscape": "3.31.1",
     "cytoscape-fcose": "2.2.0",
-    "d3-scale-chromatic": "3.1.0",
     "date-fns": "4.1.0",
+    "@observablehq/plot": "0.6.17",
     "defu": "6.1.4",
     "destr": "2.0.3",
     "graphql": "16.10.0",
@@ -126,5 +125,5 @@
     "unstorage": "1.15.0",
     "vue-json-pretty": "2.6.0"
   },
-  "packageManager": "yarn@4.3.0"
+  "packageManager": "pnpm@10.21.0+sha512.da3337267e400fdd3d479a6c68079ac6db01d8ca4f67572083e722775a796788a7a9956613749e000fac20d424b594f7a791a5f4e2e13581c5ef947f26968a40"
 }

playground/layouts/default.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="outer">
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+      <div class="navbar-brand">
+        <nuxt-link class="navbar-item" :to="{ name: 'index' }">
+          Test App
+        </nuxt-link>
+      </div>
+
+      <div class="navbar-menu">
+        <div class="navbar-start">
+          <nuxt-link
+            v-for="item in items"
+            :key="item.title"
+            :to="item.to"
+            class="navbar-item is-hoverable"
+            :class="
+              $route
+                && $route.name
+                && $route.name.startsWith(item.to.name)
+                ? 'is-active is-tab'
+                : ''
+            "
+          >
+            {{ item.title }}
+          </nuxt-link>
+        </div>
+
+        <div class="navbar-end">
+          <div class="navbar-item">
+            Search
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <div class="main">
+      <div class="container">
+        <slot />
+      </div>
+    </div>
+
+    <footer class="footer content is-small">
+      <p>
+        <a href="/">Footer</a>
+      </p>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+const items = [
+  {
+    title: 'Home',
+    to: { name: 'index' },
+  },
+  {
+    title: 'About',
+    to: { name: 'about' },
+  },
+]
+</script>
+
+<style scoped>
+.footer {
+    padding: 20px;
+}
+
+.outer {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+.main {
+    flex: 1;
+}
+
+.main {
+    flex: 1;
+    padding-top: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+}
+</style>

playground/nuxt.config.ts

@@ -0,0 +1,78 @@
+const isDev = process.env.NODE_ENV === 'development'
+
+export default defineNuxtConfig({
+
+  modules: [
+    '@nuxt/eslint',
+    '../src/module',
+    '@nuxt/devtools'
+  ],
+  ssr: false,
+
+  devtools: {
+    enabled: isDev
+  },
+
+  runtimeConfig: {
+    transitlandProxyBase: '',
+    graphqlApikey: '',
+    public: {
+      transitlandApiBase: '',
+      protomapsApikey: '',
+      nearmapsApikey: '',
+      auth0Domain: '',
+      auth0ClientId: '',
+      auth0RedirectUri: '',
+      auth0Audience: '',
+      auth0Scope: '',
+      loginGate: '',
+      requireLogin: ''
+    }
+  },
+
+  // bugs
+  build: {
+    transpile: [
+      'tslib', // https://github.com/nuxt/nuxt/issues/19265#issuecomment-1702014262
+      '@vue/apollo-composable',
+      '@apollo/client',
+      'protomaps-themes-base'
+    ]
+  },
+
+  compatibilityDate: '2025-02-11',
+
+  vite: {
+    // https://github.com/nuxt/nuxt/issues/20001
+    resolve: {
+      preserveSymlinks: true
+    },
+    // bug https://github.com/apollographql/apollo-client/issues/9756
+    define: {
+      __DEV__: isDev.toString()
+    },
+    // bug https://github.com/nuxt/nuxt/issues/13247
+    optimizeDeps: {
+      include: [
+        'zen-observable',
+        'fast-json-stable-stringify',
+        'maplibre-gl',
+        'haversine',
+        '@mapbox/mapbox-gl-draw',
+        'cytoscape',
+        'mixpanel-browser',
+        '@observablehq/plot',
+        'interval-tree-1d' // distributed as CJS, rather than ESM
+      ],
+      build: {
+        commonjsOptions: {
+          transformMixedEsModules: true // helps with mixed ESM/CJS dependencies
+        }
+      }
+    }
+  },
+
+  tlv2: {
+    useProxy: true
+  },
+})

playground/pages/about.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>About: etc, etc.</div>
+</template>

playground/pages/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <p>This is an <a href="/">Example Page</a></p>
+    <br>
+    <o-field label="Notification">
+      <o-notification variant="primary">
+        This is a test <strong>o-notification</strong> component.
+      </o-notification>
+    </o-field>
+    <br>
+    <o-field label="Autocomplete">
+      <o-autocomplete />
+    </o-field>
+    <br>
+    <o-field label="Slider">
+      <o-slider :model-value="8" />
+    </o-field>
+    <br>
+    <o-field label="Datepicker">
+      <o-datetimepicker />
+    </o-field>
+  </div>
+</template>