feat(plugin-nuxt): mock useNuxtApp

.github/workflows/test-nuxt3-i18n.yml

@@ -0,0 +1,70 @@
+name: Nuxt 3 I18n tests
+
+on:
+  push:
+    branches:
+      - main
+      - feat/*
+      - fix/*
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    name: Build and test
+
+    env:
+      dir: ./examples/nuxt3-i18n
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 20
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 8.15.9
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - name: Cache pnpm modules
+        uses: actions/cache@v2
+        with:
+          path: |
+            ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+            ~/.cache/Cypress
+          key: pnpm-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-v1-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Build book
+        working-directory: ${{env.dir}}
+        run: pnpm run story:build
+
+      - name: Run tests
+        working-directory: ${{env.dir}}
+        run: pnpm run ci
+
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: ${{env.dir}}/cypress/screenshots

.github/workflows/test-nuxt3.yml

@@ -30,9 +30,9 @@ jobs:
           node-version: 20
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 8.10.5
+          version: 8.15.9
 
       - name: Get pnpm store directory
         id: pnpm-cache

.github/workflows/test-svelte4.yml

@@ -30,9 +30,9 @@ jobs:
           node-version: 20
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 8.10.5
+          version: 8.15.9
 
       - name: Get pnpm store directory
         id: pnpm-cache

.github/workflows/test-vue3.yml

@@ -86,9 +86,9 @@ jobs:
           node-version: 20
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 8.10.5
+          version: 8.15.9
 
       - name: Get pnpm store directory
         id: pnpm-cache

.github/workflows/test.yml

@@ -26,9 +26,9 @@ jobs:
           node-version: 20
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4
         with:
-          version: 8.10.5
+          version: 8.15.9
 
       - name: Get pnpm store directory
         id: pnpm-cache

.gitignore

@@ -7,3 +7,4 @@ histoire-dist/
 **/cypress/videos/
 .DS_Store
 .eslintcache
+**/.nuxt/

examples/nuxt3-i18n/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.

examples/nuxt3-i18n/app.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    Hi there
+    <br>
+    <div>
+      <YesButton />
+      <NoButton />
+    </div>
+  </div>
+</template>

examples/nuxt3-i18n/components/AutoImport.story.vue

@@ -0,0 +1,18 @@
+<script setup>
+console.log('useNuxtApp', useNuxtApp())
+console.log('useNuxtApp().$config', useNuxtApp().$config)
+const config = useRuntimeConfig()
+console.log('useRuntimeConfig', config)
+</script>
+
+<template>
+  <Story>
+    <Meow />
+
+    <h3>Nuxt runtime config</h3>
+    <pre>{{ config }}</pre>
+    <p data-testid="config">
+      {{ config.public.configFromNuxt }}
+    </p>
+  </Story>
+</template>

examples/nuxt3-i18n/components/BaseButton.story.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import BaseButton from './BaseButton.vue'
+
+function initState() {
+  return {
+    disabled: false,
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="BaseButton"
+    :layout="{
+      type: 'grid',
+      width: 200,
+    }"
+  >
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <BaseButton
+          :disabled="state.disabled"
+        >
+          Click me
+        </BaseButton>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox
+          v-model="state.disabled"
+          title="Disabled"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="big green button"
+      icon="el:resize-full"
+    >
+      <BaseButton
+        color="green"
+        size="big"
+      >
+        Click me
+      </BaseButton>
+    </Variant>
+
+    <Variant
+      title="small red button"
+      icon-color="#F43F5E"
+    >
+      <BaseButton
+        color="red"
+        size="small"
+      >
+        Click me!
+      </BaseButton>
+    </Variant>
+  </Story>
+</template>

examples/nuxt3-i18n/components/BaseButton.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+
+  size: {
+    type: String,
+    default: null,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    class="btn text-red-500"
+    :class="{
+      [`btn-color-${color}`]: color,
+      [`btn-size-${size}`]: size,
+    }"
+    data-testid="base-button"
+  >
+    <slot />
+  </button>
+</template>
+
+<style lang="pcss" scoped>
+.btn {
+  border-radius: 4px;
+  padding: 4px 8px;
+  background: #e4e4e4;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background: #f1f1f1;
+}
+
+.btn[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.btn-color-green {
+  background: #94ffc9;
+}
+
+.btn-color-green:hover {
+  background: #acffd6;
+}
+
+.btn-color-red {
+  background: #ff9494;
+}
+
+.btn-color-red:hover {
+  background: #ffa8a8;
+}
+
+.btn-size-big {
+  font-size: 16px;
+  padding: 8px 16px;
+}
+
+.btn-size-small {
+  font-size: 12px;
+  padding: 2px 4px;
+}
+</style>

examples/nuxt3-i18n/components/LocaleWrapper.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { type Ref, computed, watch } from 'vue'
+
+const { locale } = useI18n()
+
+interface LocaleWrapperProps {
+  locale: Ref<string>
+}
+
+const props = defineProps<LocaleWrapperProps>()
+const computedLocale = computed(() => props.locale)
+
+watch(computedLocale, (newLocale) => {
+  locale.value = newLocale
+})
+</script>
+
+<template>
+  <slot />
+</template>

examples/nuxt3-i18n/components/Meow.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Meow</div>
+</template>

examples/nuxt3-i18n/components/NoButton.story.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import NoButton from './NoButton.vue'
+
+const { locale, availableLocales } = useI18n()
+
+function initState() {
+  return {
+    locale: locale.value,
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="NoButton"
+    :layout="{
+      type: 'grid',
+      width: 200,
+    }"
+  >
+    <Variant
+      title="no button"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <LocaleWrapper :locale="state.locale">
+          <NoButton />
+        </LocaleWrapper>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect v-model="state.locale" :options="availableLocales" title="Choose locale" />
+      </template>
+    </Variant>
+  </Story>
+</template>