@studio-fes/layer-strapi 0.2.17 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @studio-fes/layer-strapi
 
+## 0.3.0
+
+### Minor Changes
+
+- Simplified env variables and fixed minor changes on components
+
+## 0.2.18
+
+### Patch Changes
+
+- update dependencies, server folder and media components to edit props
+
 ## 0.2.17
 
 ### Patch Changes

package/app/components/StrapiImage.vue

@@ -7,10 +7,13 @@ export interface StrapiImageProps extends NuxtImgProps {
 }
 
 const props = defineProps<StrapiImageProps>()
-const imageProps = computed(() => ({
-  ...reactiveOmit(props, 'image'),
-  ...parseStrapiImage(props.image),
-}))
+const imageProps = computed(() => {
+  const fromStrapi = parseStrapiImage(props.image)
+  const fromProps = Object.fromEntries(
+    Object.entries(reactiveOmit(props, 'image')).filter(([, v]) => v !== undefined),
+  )
+  return { ...fromStrapi, ...fromProps }
+})
 </script>
 
 <template>

package/app/components/StrapiMedia.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { StrapiImageProps } from '@studio-fes/layer-strapi/app/components/StrapiImage.vue'
-import type { StrapiVideoProps } from '~/components/StrapiVideo.vue'
+import type { StrapiVideoProps } from '@studio-fes/layer-strapi/app/components/StrapiVideo.vue'
 import type { StrapiFileFragment } from '~/types/graphql-operations'
 
 const props = defineProps<{
@@ -14,12 +14,12 @@ const isImage = computed(() => mediaIsImage(props.media))
 </script>
 
 <template>
-  <StrapiImage
+  <LazyStrapiImage
     v-if="isImage"
     v-bind="imgProps"
     :image="media"
   />
-  <StrapiVideo
+  <LazyStrapiVideo
     v-else-if="isVideo"
     v-bind="videoProps"
     :video="media"
@@ -27,6 +27,10 @@ const isImage = computed(() => mediaIsImage(props.media))
     <template #default="{ progress, isPlaying }">
       <slot name="media-chrome" :progress :is-playing />
     </template>
-  </StrapiVideo>
-  <pre v-else>There is no format for you.</pre>
+  </LazyStrapiVideo>
+  <slot v-else name="empty">
+    <DevOnly>
+      There is no format for you.
+    </DevOnly>
+  </slot>
 </template>

package/app/components/StrapiVideo.vue

@@ -8,11 +8,14 @@ export interface StrapiVideoProps extends VideoProps {
 }
 
 const props = defineProps<StrapiVideoProps>()
+const videoProps = computed(() => {
+  const fromStrapi = parseStrapiVideo(props.video)
+  const fromProps = Object.fromEntries(
+    Object.entries(reactiveOmit(props, 'video')).filter(([, v]) => v !== undefined),
+  )
 
-const videoProps = computed(() => ({
-  ...reactiveOmit(props, 'video'),
-  ...parseStrapiVideo(props.video),
-}))
+  return { ...fromStrapi, ...fromProps }
+})
 </script>
 
 <template>

package/app/utils/parse-strapi-image.ts

@@ -1,4 +1,3 @@
-// import type { StrapiFileFragment } from '#graphql-operations'
 import type { NuxtImgProps } from '@studio-fes/layer-base/app/components/Image.vue'
 import type { StrapiFileFragment } from '~/types/graphql-operations'
 

package/nuxt.config.ts

@@ -1,4 +1,7 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+import { parseEnv } from './parse-env'
+
+const { graphqlEndpoint, hostname } = parseEnv()
+
 export default defineNuxtConfig({
   extends: ['@studio-fes/layer-base'],
 
@@ -13,11 +16,15 @@ export default defineNuxtConfig({
 
   graphqlMiddleware: {
     downloadSchema: false,
-    graphqlEndpoint: 'https://example.com/graphql',
+    graphqlEndpoint,
     serverApiPrefix: '/gql',
     clientCache: {
       enabled: true,
     },
     autoImportPatterns: ['./queries/**/*.gql'],
   },
+
+  image: {
+    domains: [hostname],
+  },
 })

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@studio-fes/layer-strapi",
   "type": "module",
-  "version": "0.2.17",
+  "version": "0.3.0",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@nuxt/eslint": "latest",
-    "nuxt-graphql-middleware": "^5.3.2",
+    "nuxt-graphql-middleware": "^5.4.0",
     "nuxt-multi-cache": "^4.0.3",
     "vue-strapi-blocks-renderer": "1.1.1"
   },
   "devDependencies": {
-    "@types/node": "^25.5.0",
-    "eslint": "^10.0.3",
-    "nuxt": "^4.4.2",
-    "typescript": "^5.9.3",
+    "@types/node": "^25.9.3",
+    "eslint": "^10.5.0",
+    "nuxt": "^4.4.8",
+    "typescript": "^6.0.3",
     "vue": "latest",
-    "@studio-fes/layer-base": "0.2.17"
+    "@studio-fes/layer-base": "0.3.0"
   },
   "description": "Create Nuxt extendable layer with this GitHub template.",
   "repository": {

package/parse-env.ts

@@ -0,0 +1,23 @@
+export function parseEnv() {
+  const backendUrl = import.meta.env.NUXT_PUBLIC_BACKEND_URL
+  if (!backendUrl) {
+    throw new Error('NUXT_PUBLIC_BACKEND_URL environment variable is not set')
+  }
+
+  let graphqlEndpoint: string
+  let hostname: string
+  try {
+    const baseUrl = new URL(backendUrl)
+    hostname = baseUrl.hostname
+    if (!hostname) {
+      throw new Error('Missing hostname in NUXT_PUBLIC_BACKEND_URL environment variable')
+    }
+    graphqlEndpoint = new URL('graphql', baseUrl).toString()
+  }
+
+  catch {
+    throw new Error('Invalid NUXT_PUBLIC_BACKEND_URL environment variable')
+  }
+
+  return { graphqlEndpoint, hostname }
+}

package/server/graphqlMiddleware.serverOptions.ts

@@ -1,32 +0,0 @@
-import type { FetchResponse } from 'ofetch'
-import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
-
-export default defineGraphqlServerOptions({
-  async doGraphqlRequest(context) {
-    const { operationName, variables, operationDocument } = context
-
-    const config = useRuntimeConfig()
-
-    function doRequest(): Promise<FetchResponse<{ data: any, errors: any[] }>> {
-      return $fetch.raw(config.graphqlMiddleware.graphqlEndpoint, {
-        method: 'POST',
-        ignoreResponseError: true,
-        body: {
-          query: operationDocument,
-          variables,
-          operationName,
-        }
-      })
-    }
-
-    const res = await doRequest()
-
-    return {
-      data: res._data?.data,
-      errors: res._data?.errors?.map(e => ({
-        ...e,
-        path: Array.isArray(e.path) ? e.path : [],
-      })) || [],
-    }
-  },
-})

package/server/multiCache.serverOptions.ts

@@ -1,22 +0,0 @@
-/// <reference types="vite/client" />
-
-import { defineMultiCacheOptions } from 'nuxt-multi-cache/server-options'
-import fsDriver from 'unstorage/drivers/fs'
-import nullDriver from 'unstorage/drivers/null'
-
-export default defineMultiCacheOptions(() => {
-  const config = useRuntimeConfig()
-  const { multiCacheEnabled } = config
-
-  const driver = multiCacheEnabled
-    ? fsDriver({ base: '.nuxt-multi-cache' })
-    : nullDriver()
-
-  return {
-    data: {
-      storage: {
-        driver,
-      },
-    },
-  }
-})