add nuxt3 dev

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 dist
 dist-ssr
 .cache
+**/.vitepress/cache/
 .rpt2_cache
 .yarn
 

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

package.json

@@ -5,8 +5,9 @@
     "packages/*"
   ],
   "scripts": {
-    "dev:vue2-firestore": "pnpm --filter dev-vue2-firestore dev",
+    "dev:nuxt-firestore": "pnpm --filter dev-nuxt-firestore dev",
     "dev:vue3-firestore": "pnpm --filter dev-vue3-firestore dev",
+    "dep:del-all": "npm exec --workspaces -- npx rimraf node_modules && npx rimraf node_modules",
     "dep:update-minor": "ncu --target minor -u && pnpm --parallel exec ncu --target minor -u && echo \"review git changes and install with ni\"",
     "dep:update-major": "ncu -u && pnpm --parallel exec ncu -u && echo \"review git changes and install with ni\"",
     "docs:dev": "vitepress dev docs",
@@ -15,6 +16,9 @@
     "docs:serve": "vitepress serve docs",
     "build": "pnpm -r build",
     "build-and-commit": "npm run build && git add -A && git commit -m \"chore: build\"",
+    "build:nuxt-firestore": "pnpm --filter dev-nuxt-firestore build",
+    "generate:nuxt-firestore": "pnpm --filter dev-nuxt-firestore generate",
+    "preview:nuxt-firestore": "pnpm --filter dev-nuxt-firestore preview",
     "typecheck": "tsc --noEmit",
     "test": "pnpm test:core && pnpm test:plugin-simple-store && pnpm test:plugin-vue2 && pnpm test:plugin-vue3 && pnpm test:plugin-firestore",
     "_test:admin-broken": "pnpm test:core && pnpm test:plugin-simple-store && pnpm test:plugin-vue2 && pnpm test:plugin-vue3 && pnpm test:plugin-firestore-admin",
@@ -30,25 +34,25 @@
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "ava": "^4.3.3",
     "bumpp": "^8.2.1",
     "copyfiles": "^2.4.1",
     "esbuild": "^0.15.13",
     "esbuild-register": "^3.4.1",
-    "eslint": "^8.27.0",
+    "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-tree-shaking": "^1.10.0",
     "exec-sh": "^0.4.0",
     "npm-check-updates": "^16.3.25",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "tslib": "^2.4.1",
     "tsup": "^6.4.0",
     "turbo": "^1.6.3",
-    "typescript": "^4.8.4",
-    "vitepress": "1.0.0-alpha.28"
+    "typescript": "^4.9.4",
+    "vitepress": "1.0.0-alpha.43"
   },
   "author": "Luca Ban - Mesqueeb",
   "funding": "https://github.com/sponsors/mesqueeb",
@@ -75,6 +79,7 @@
     "ignorePatterns": [
       "node_modules",
       "dist",
+      "/packages/dev-nuxt-firestore",
       "/packages/dev-firestore",
       "/packages/dev-vue2",
       "/packages/dev-vue2-firestore",

packages/dev-nuxt-firestore/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

packages/dev-nuxt-firestore/README.md

@@ -0,0 +1,3 @@
+# dev-vue3-firestore
+
+🚧 This is WIP

packages/dev-nuxt-firestore/app.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <NuxtPage />
+  </div>
+</template>
+
+<style lang="sass">
+#app
+  font-family: Avenir, Helvetica, Arial, sans-serif
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  text-align: center
+  margin-top: 60px
+</style>

packages/dev-nuxt-firestore/assets/style.css

@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

packages/dev-nuxt-firestore/components/ButtonToggle.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+defineProps<{
+  modelValue: any
+  options: { label: string; value: any }[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', payload: any): void
+}>()
+</script>
+
+<template>
+  <div class="_toggle">
+    <div class="_inner-wrapper">
+      <button
+        v-for="(o, i) in options"
+        :key="i"
+        :class="{ _active: o.value === modelValue }"
+        @click="() => emit('update:modelValue', o.value)"
+      >
+        {{ o.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+._toggle
+  display: flex
+  justify-content: center
+  align-items: center
+  border-radius: 8px
+  background: #646cff
+  ._inner-wrapper
+    flex: 1
+    position: relative
+    display: flex
+    justify-content: center
+    align-items: center
+    padding: 4px
+    button
+      flex: 1
+      position: relative
+      z-index: 2
+      margin: 0
+      border: none
+      background: transparent
+      text-transform: capitalize
+      white-space: nowrap
+      color: rgba(36, 42, 56, 0.75)
+      &:not(._active)
+        cursor: pointer
+      &._active
+        background: white
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.16)
+        border: none
+</style>

packages/dev-nuxt-firestore/components/TestFirestorePluginFetch.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+const { $magnetar, $generateRandomId } = useNuxtApp()
+
+type Item = { title: string; id: string; isDone: boolean }
+
+const itemsModuleF = $magnetar.collection<Item>('magnetarTests/dev-firestore/itemsF')
+
+if (process.client) {
+  // @ts-ignore — added to window to be able to play around in the console
+  window.itemsModuleF = itemsModuleF
+}
+
+const query = itemsModuleF.orderBy('title', 'desc').limit(10)
+
+async function fetchMore() {
+  try {
+    await query.startAfter(query.fetched.cursor).fetch({ force: true })
+    if (query.fetched.reachedEnd) console.log(`that's all!`)
+  } catch (error) {
+    console.error(`fetchMore error:`, error)
+  }
+}
+
+onBeforeMount(() => fetchMore())
+
+/** Item count */
+const size = computed(() => itemsModuleF.data.size)
+
+/** Options to filter items */
+const showAll = ref(true)
+const alphabetically = ref(false)
+
+/** The items shown based on the filter */
+const items = computed<Item[]>(() => {
+  const _showAll = showAll.value
+  const _alphabetically = alphabetically.value
+
+  let _module: typeof itemsModuleF = itemsModuleF
+
+  if (_showAll && _alphabetically) {
+    _module = itemsModuleF.orderBy('title')
+  }
+  if (!_showAll && _alphabetically) {
+    _module = itemsModuleF.where('isDone', '==', false).orderBy('title')
+  }
+  if (!_showAll && !_alphabetically) {
+    _module = itemsModuleF.where('isDone', '==', false)
+  }
+
+  return [..._module.data.values()]
+})
+
+function addItem(item: Item) {
+  item.id = $generateRandomId()
+  console.log(`add item → `, item)
+  itemsModuleF.insert(item)
+}
+
+function editItem(item: Item) {
+  console.log(`edit item → `, item)
+  itemsModuleF.doc(item.id).merge(item)
+}
+
+function deleteItem(item: Item) {
+  console.log(`delete item → `, item)
+  itemsModuleF.delete(item.id)
+}
+</script>
+
+<template>
+  <div class="test">
+    <h6>plugin-vue3 + plugin-firestore Todo list ({{ size }})</h6>
+    <div style="margin: 1rem">
+      <label for="all">show done items</label>
+      <input type="checkbox" name="" v-model="showAll" id="all" />
+      <label for="order" style="padding-left: 1rem">alphabetically</label>
+      <input type="checkbox" name="" v-model="alphabetically" id="order" />
+    </div>
+    <TodoApp @add="addItem" @edit="editItem" @delete="deleteItem" :items="items" />
+    <div style="margin: 1rem; cursor: pointer" @click="() => fetchMore()">fetch more</div>
+    <div style="margin: 1rem">reached end: {{ query.fetched.reachedEnd }}</div>
+  </div>
+</template>