chore(github): add playground job in module workflow (#4021)

2026-01-14 20:19:34 +01:00 · 2025-04-29 17:48:09 +02:00
parent 53f8b34bef
commit d7710795df
6 changed files with 126 additions and 76 deletions
--- a/.github/workflows/module.yml
+++ b/.github/workflows/module.yml
@@ -69,6 +69,53 @@ jobs:
        if: matrix.os == 'ubuntu-latest'
        run: pnpx pkg-pr-new publish --compact --no-template --pnpm

+  playground:
+    needs: build
+
+    runs-on: ${{ matrix.os }}
+
+    defaults:
+      run:
+        working-directory: ./playground
+
+    permissions:
+      contents: read
+      pull-requests: read
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest] # macos-latest, windows-latest
+        node: [22]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Store commit SHA
+        run: |
+          echo "COMMIT_SHA=$(echo ${{ github.workflow_sha }} | cut -c1-7)" >> $GITHUB_ENV
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install latest nuxt/ui
+        run: pnpm install https://pkg.pr.new/@nuxt/ui@${{ env.COMMIT_SHA }} --lockfile-only
+
+      - name: Install dependencies
+        run: pnpm install --ignore-workspace
+
+      - name: Prepare
+        run: pnpm nuxi prepare
+
+      - name: Typecheck
+        run: pnpm run typecheck
+
  starter-nuxt:
    needs: build

--- a/package.json
+++ b/package.json
@@ -207,6 +207,7 @@
    "chokidar": "3.6.0",
    "debug": "4.3.7",
    "rollup": "4.34.9",
+    "unimport": "4.1.1",
    "unplugin": "^2.3.2"
  },
  "pnpm": {
--- a/playground/app/pages/components/carousel.vue
+++ b/playground/app/pages/components/carousel.vue
@@ -28,7 +28,12 @@ const bind = computed(() => ({
  dots: dots.value
 }))

-const items = Array.from({ length: 6 }).map((_, index) => index)
+const items = Array.from({ length: 6 }).map((_, index) => ({
+  id: index,
+  title: `Item ${index + 1}`,
+  description: `Description for item ${index + 1}`,
+  src: `https://picsum.photos/640/640?v=${index}`
+}))
 </script>

 <template>
@@ -60,23 +65,23 @@ const items = Array.from({ length: 6 }).map((_, index) => index)
    </div>

    <template v-if="classNames">
-      <UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
-        <img :src="`https://picsum.photos/600/350?v=${index}`" class="rounded-lg">
+      <UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-[70%] transition-opacity ease-in-out [&:not(.is-snapped)]:opacity-10', container: 'h-[352px]' }" class="w-full max-w-xl mx-auto">
+        <img :src="item.src" class="rounded-lg">
      </UCarousel>
    </template>
    <template v-else-if="autoHeight">
-      <UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
-        <img :src="`https://picsum.photos/600/${index % 2 === 0 ? 350 : 450}?v=${index}`" :class="index % 2 === 0 ? 'h-[350px]' : 'h-[450px]'" class="rounded-lg">
+      <UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ container: 'transition-[height] duration-200' }" class="w-full max-w-md mx-auto">
+        <img :src="item.src" class="rounded-lg">
      </UCarousel>
    </template>
    <template v-else>
-      <UCarousel v-slot="{ index }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
-        <img :src="`https://picsum.photos/640/640?v=${index}`" class="rounded-lg">
+      <UCarousel v-slot="{ item }" v-bind="bind" :items="items" class="w-[320px] mx-auto" :ui="{ container: 'h-[336px]' }">
+        <img :src="item.src" class="rounded-lg">
      </UCarousel>

      <template v-if="orientation === 'horizontal'">
-        <UCarousel v-slot="{ index }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
-          <img :src="`https://picsum.photos/320/320?v=${index}`" class="rounded-lg">
+        <UCarousel v-slot="{ item }" v-bind="bind" :items="items" :ui="{ item: 'basis-1/3' }" class="w-full max-w-xs mx-auto">
+          <img :src="item.src" class="rounded-lg">
        </UCarousel>
      </template>
    </template>
--- a/playground/app/pages/components/shortcuts.vue
+++ b/playground/app/pages/components/shortcuts.vue
@@ -1,3 +1,40 @@
+<script setup lang="ts">
+import type { ShortcutsConfig } from '@nuxt/ui/composables/defineShortcuts.js'
+
+const logs = ref<string[]>([])
+const shortcutsState = ref({
+  'a': {
+    label: 'A',
+    disabled: false,
+    usingInput: false
+  },
+  'shift_i': {
+    label: 'Shift+I',
+    disabled: false,
+    usingInput: false
+  },
+  'g-i': {
+    label: 'G->I',
+    disabled: false,
+    usingInput: false
+  }
+})
+
+const shortcuts = computed(() => {
+  return Object.entries(shortcutsState.value).reduce<ShortcutsConfig>((acc, [key, { label, disabled, usingInput }]) => {
+    if (disabled) {
+      return acc
+    }
+    acc[key] = {
+      handler: () => { logs.value.unshift(`"${label}" triggered`) },
+      usingInput
+    }
+    return acc
+  }, {})
+})
+defineShortcuts(shortcuts)
+</script>
+
 <template>
  <div class="w-full flex flex-col gap-4">
    <UCard class="flex-1">
@@ -43,38 +80,3 @@
    </UCard>
  </div>
 </template>
-
-<script setup lang="ts">
-const logs = ref<string[]>([])
-const shortcutsState = ref({
-  'a': {
-    label: 'A',
-    disabled: false,
-    usingInput: false
-  },
-  'shift_i': {
-    label: 'Shift+I',
-    disabled: false,
-    usingInput: false
-  },
-  'g-i': {
-    label: 'G->I',
-    disabled: false,
-    usingInput: false
-  }
-})
-
-const shortcuts = computed(() => {
-  return Object.entries(shortcutsState.value).reduce<ShortcutsConfig>((acc, [key, { label, disabled, usingInput }]) => {
-    if (disabled) {
-      return acc
-    }
-    acc[key] = {
-      handler: () => { logs.value.unshift(`"${label}" triggered`) },
-      usingInput
-    }
-    return acc
-  }, {})
-})
-defineShortcuts(shortcuts)
-</script>
--- a/playground/package.json
+++ b/playground/package.json
@@ -5,7 +5,8 @@
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
-    "generate": "nuxi generate"
+    "generate": "nuxi generate",
+    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.39",
@@ -14,5 +15,12 @@
    "@nuxthub/core": "^0.8.25",
    "nuxt": "^3.16.2",
    "zod": "^3.24.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.3",
+    "vue-tsc": "^2.2.10"
+  },
+  "resolutions": {
+    "unimport": "4.1.1"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,7 @@ overrides:
  chokidar: 3.6.0
  debug: 4.3.7
  rollup: 4.34.9
+  unimport: 4.1.1
  unplugin: ^2.3.2

 importers:
@@ -341,6 +342,13 @@ importers:
      zod:
        specifier: ^3.24.3
        version: 3.24.3
+    devDependencies:
+      typescript:
+        specifier: ^5.8.3
+        version: 5.8.3
+      vue-tsc:
+        specifier: ^2.2.10
+        version: 2.2.10(typescript@5.8.3)

  playground-vue:
    dependencies:
@@ -6371,12 +6379,8 @@ packages:
  unifont@0.2.0:
    resolution: {integrity: sha512-RoF14/tOhLvDa7R5K6A3PjsfJVFKvadvRpWjfV1ttabUe9704P1ie9z1ABLWEts/8SxrBVePav/XhgeFNltpsw==}

-  unimport@4.1.3:
-    resolution: {integrity: sha512-H+IVJ7rAkE3b+oC8rSJ2FsPaVsweeMC8eKZc+C6Mz7+hxDF45AnrY/tVCNRBvzMwWNcJEV67WdAVcal27iMjOw==}
-    engines: {node: '>=18.12.0'}
-
-  unimport@5.0.0:
-    resolution: {integrity: sha512-8jL3T+FKDg+qLFX55X9j92uFRqH5vWrNlf/eJb5IQlQB5q5wjooXQDXP1ulhJJQHbosBmlKhBo/ZVS5jHlcJGA==}
+  unimport@4.1.1:
+    resolution: {integrity: sha512-j9+fijH6aDd05yv1fXlyt7HSxtOWtGtrZeYTVBsSUg57Iuf+Ps2itIZjeyu7bEQ4k0WOgYhHrdW8m/pJgOpl5g==}
    engines: {node: '>=18.12.0'}

  unist-builder@4.0.0:
@@ -8148,7 +8152,7 @@ snapshots:
      std-env: 3.9.0
      ufo: 1.6.1
      unctx: 2.4.1
-      unimport: 4.1.3
+      unimport: 4.1.1
      untyped: 2.0.0
    transitivePeerDependencies:
      - magicast
@@ -8175,7 +8179,7 @@ snapshots:
      tinyglobby: 0.2.13
      ufo: 1.6.1
      unctx: 2.4.1
-      unimport: 5.0.0
+      unimport: 4.1.1
      untyped: 2.0.0
    transitivePeerDependencies:
      - magicast
@@ -12376,7 +12380,7 @@ snapshots:
      uncrypto: 0.1.3
      unctx: 2.4.1
      unenv: 2.0.0-rc.15
-      unimport: 4.1.3
+      unimport: 4.1.1
      unplugin-utils: 0.2.4
      unstorage: 1.15.0(db0@0.3.2(better-sqlite3@11.9.1))(ioredis@5.6.0)
      untyped: 2.0.0
@@ -12610,7 +12614,7 @@ snapshots:
      ultrahtml: 1.5.3
      uncrypto: 0.1.3
      unctx: 2.4.1
-      unimport: 4.1.3
+      unimport: 4.1.1
      unplugin: 2.3.2
      unplugin-vue-router: 0.12.0(vue-router@4.5.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))
      unstorage: 1.15.0(db0@0.3.2(better-sqlite3@11.9.1))(ioredis@5.6.0)
@@ -14233,37 +14237,20 @@ snapshots:
      css-tree: 3.1.0
      ohash: 2.0.11

-  unimport@4.1.3:
+  unimport@4.1.1:
    dependencies:
      acorn: 8.14.1
      escape-string-regexp: 5.0.0
      estree-walker: 3.0.3
+      fast-glob: 3.3.3
      local-pkg: 1.1.1
      magic-string: 0.30.17
      mlly: 1.7.4
      pathe: 2.0.3
      picomatch: 4.0.2
-      pkg-types: 2.1.0
+      pkg-types: 1.3.1
      scule: 1.3.0
      strip-literal: 3.0.0
-      tinyglobby: 0.2.13
-      unplugin: 2.3.2
-      unplugin-utils: 0.2.4
-
-  unimport@5.0.0:
-    dependencies:
-      acorn: 8.14.1
-      escape-string-regexp: 5.0.0
-      estree-walker: 3.0.3
-      local-pkg: 1.1.1
-      magic-string: 0.30.17
-      mlly: 1.7.4
-      pathe: 2.0.3
-      picomatch: 4.0.2
-      pkg-types: 2.1.0
-      scule: 1.3.0
-      strip-literal: 3.0.0
-      tinyglobby: 0.2.13
      unplugin: 2.3.2
      unplugin-utils: 0.2.4

@@ -14306,7 +14293,7 @@ snapshots:
      local-pkg: 1.1.1
      magic-string: 0.30.17
      picomatch: 4.0.2
-      unimport: 4.1.3
+      unimport: 4.1.1
      unplugin: 2.3.2
      unplugin-utils: 0.2.4
    optionalDependencies: