@flyo/nitro-vue3 1.0.1 → 2.0.0

package/README.md

@@ -1,9 +1,201 @@
-# Flyo Nitro Vue3 Components
+# @flyo/nitro-vue3
 
-Vue3 Components for Flyo Nitro
+Vue 3 integration for [Flyo Nitro](https://github.com/flyocloud/nitro-typescript-sdk) — build Vue 3 sites powered by the Flyo CMS with ready-made components and composables.
 
+## Installation
+
+```bash
+npm install @flyo/nitro-vue3
+```
+
+## Setup
+
+Register the plugin in your Vue application entry point. You need a Flyo API token from your Nitro configuration.
+
+```js
+import { createApp } from 'vue'
+import { FlyoVue } from '@flyo/nitro-vue3'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(FlyoVue, {
+  apiToken: 'YOUR_FLYO_API_TOKEN',
+  // optional: override the API base URL
+  // apiBasePath: 'https://api.flyo.cloud/nitro/v1',
+  // optional: additional default request headers
+  // defaultHeaders: {},
+  // optional: enable live-edit mode (for use inside the Flyo preview iframe)
+  liveEdit: false,
+  liveEditOrigin: 'https://flyo.cloud'
+})
+
+app.mount('#app')
 ```
-yarn add @flyo/nitro-vue3
+
+## Components
+
+Both components are globally registered when you call `app.use(FlyoVue, ...)`.
+
+### `<FlyoPage>`
+
+Renders the blocks of a page returned by `useFlyoPage`. It handles the live-edit postMessage bridge automatically, so editors can preview changes in real time inside the Flyo UI.
+
+**Props**
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `page` | `Object \| Boolean` | `false` | The page object returned by `useFlyoPage().fetch()` |
+
+**Events**
+
+| Event | Payload | Description |
+|---|---|---|
+| `update:page` | updated page | Emitted when the Flyo live-edit bridge pushes a new page state |
+
+**Example**
+
+```vue
+<script setup>
+import { useFlyoPage } from '@flyo/nitro-vue3'
+
+const { response: page, fetch } = useFlyoPage('about-us')
+await fetch()
+</script>
+
+<template>
+  <FlyoPage v-model:page="page" />
+</template>
 ```
 
-[Read more on dev.flyo.cloud/nitro/vue](https://dev.flyo.cloud/nitro/vue)
+You can also use the default slot to wrap the output:
+
+```vue
+<FlyoPage :page="page">
+  <template #default="{ json }">
+    <FlyoBlock v-for="item in json" :key="item.uid" :item="item" />
+  </template>
+</FlyoPage>
+```
+
+---
+
+### `<FlyoBlock>`
+
+Renders a single content block by resolving the block's `component` name to a locally or globally registered Vue component and passing all block data as props.
+
+**Props**
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `item` | `Object` | `{}` | A block object from `page.json` |
+
+The resolved component receives: `config`, `content`, `items`, and `slots`.
+
+**Example**
+
+```vue
+<FlyoBlock :item="item" />
+```
+
+---
+
+## Composables
+
+### `useFlyoConfig()`
+
+Fetches the global Nitro config (navigation containers, available slugs, globals).
+
+```js
+import { useFlyoConfig } from '@flyo/nitro-vue3'
+
+const { isLoading, response, error, fetch } = useFlyoConfig()
+
+// fetch once on mount
+await fetch()
+
+console.log(response.value) // ConfigResponse
+```
+
+---
+
+### `useFlyoPage(slug)`
+
+Fetches a page by its slug.
+
+```js
+import { useFlyoPage } from '@flyo/nitro-vue3'
+
+const { isLoading, response, error, fetch } = useFlyoPage('about-us')
+
+await fetch()
+
+console.log(response.value) // Page object with .json blocks, meta info, etc.
+```
+
+---
+
+### `useFlyoEntity(uniqueid)`
+
+Fetches a single entity by its Nitro unique identifier.
+
+```js
+import { useFlyoEntity } from '@flyo/nitro-vue3'
+
+const { isLoading, response, error, fetch } = useFlyoEntity('my-blog-entry-uid')
+
+await fetch()
+
+console.log(response.value) // Entity fields
+```
+
+---
+
+### `useFlyoSitemap()`
+
+Fetches the full sitemap — all pages and mapped entities including their resolved `href` paths.
+
+```js
+import { useFlyoSitemap } from '@flyo/nitro-vue3'
+
+const { isLoading, response, error, fetch } = useFlyoSitemap()
+
+await fetch()
+
+console.log(response.value) // Array of sitemap items
+```
+
+---
+
+## Composable return values
+
+Every composable returns the same reactive shape:
+
+| Key | Type | Description |
+|---|---|---|
+| `isLoading` | `Ref<boolean \| null>` | `true` while the request is in flight |
+| `response` | `Ref<T \| null>` | The response data, `null` until fetched |
+| `error` | `Ref<any \| null>` | The error object if the request failed |
+| `fetch` | `async () => { response, error }` | Call this to trigger the request |
+
+---
+
+## Live-edit support
+
+When your site is embedded in the Flyo preview iframe, `FlyoPage` automatically listens for `pageRefresh` messages and emits `update:page` so your component can reactively update without a full reload. Enable this by passing `liveEdit: true` to the plugin options.
+
+---
+
+## Releases
+
+This package uses [semantic-release](https://github.com/semantic-release/semantic-release) — versions are bumped automatically based on [Conventional Commits](https://www.conventionalcommits.org/):
+
+| Commit prefix | Release type |
+|---|---|
+| `fix:` | Patch (`1.0.x`) |
+| `feat:` | Minor (`1.x.0`) |
+| `feat!:` / `BREAKING CHANGE` | Major (`x.0.0`) |
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@flyo/nitro-typescript"),e=require("vue");let m=null;const F=({apiToken:n,apiBasePath:t,defaultHeaders:o})=>{m=new u.Configuration({apiKey:n,...t&&{basePath:t},headers:o||{}})},f=()=>m,N={name:"FlyoBlock"},y=Object.assign(N,{props:{item:{type:Object,default:()=>{}}},setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.item.component),{config:n.item.config,content:n.item.content,items:n.item.items,slots:n.item.slots},null,8,["config","content","items","slots"]))}}),J={name:"FlyoPage"},d=Object.assign(J,{props:{page:{type:[Object,Boolean],default:!1}},emits:["update:page"],setup(n,{emit:t}){const o=n,s=t,{liveEdit:a,liveEditOrigin:i}=e.inject("flyo"),p=r=>{const c=r.parent||r.opener;return r.self===c?!1:r.parent||r.opener},O=r=>{a&&process.client&&p(window)&&p(window).postMessage({action:"openEdit",data:JSON.parse(JSON.stringify({page:o.page,item:r}))},i)};return process.client&&p(window)&&window.addEventListener("message",r=>{if(r.origin!==i){console.log(`Message from ${r.origin} blocked. Expected ${i}.`);return}const c=r.data;c.action==="pageRefresh"&&s("update:page",c.data)}),(r,c)=>{const S=e.resolveComponent("FlyoBlock");return e.openBlock(),e.createElementBlock("div",null,[n.page?e.renderSlot(r.$slots,"default",e.normalizeProps(e.mergeProps({key:0},n.page)),()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.page.json,g=>(e.openBlock(),e.createBlock(S,{key:g.uid,item:g,onClick:()=>O(g)},null,8,["item","onClick"]))),128))]):e.createCommentVNode("",!0)])}}}),l=e.reactive({isLoading:null,response:null,error:null}),k=()=>{const n=async()=>{try{l.error=null,l.isLoading=!0,l.response=JSON.parse(JSON.stringify(await new u.ConfigApi(f()).config())),l.isLoading=!1}catch(t){l.isLoading=!1,l.response=null,l.error=JSON.parse(JSON.stringify(t))}return{response:l.response,error:l.error}};return{...e.toRefs(l),fetch:n}},h=n=>{const t=e.ref(!1),o=e.ref(null),s=e.ref(null);return{isLoading:t,response:o,error:s,fetch:async()=>{try{s.value=null,t.value=!0,o.value=JSON.parse(JSON.stringify(await new u.EntitiesApi(f()).entityByUniqueid({uniqueid:n}))),t.value=!1}catch(i){t.value=!1,o.value=null,s.value=JSON.parse(JSON.stringify(i))}return{response:e.unref(o),error:e.unref(s)}}}},E=n=>{const t=e.ref(!1),o=e.ref(null),s=e.ref(null);return{isLoading:t,response:o,error:s,fetch:async()=>{try{s.value=null,t.value=!0,o.value=JSON.parse(JSON.stringify(await new u.PagesApi(f()).page({slug:n}))),t.value=!1}catch(i){t.value=!1,o.value=null,s.value=JSON.parse(JSON.stringify(i))}return{response:e.unref(o),error:e.unref(s)}}}},B=()=>{const n=e.ref(!1),t=e.ref(null),o=e.ref(null);return{isLoading:n,response:t,error:o,fetch:async()=>{try{o.value=null,n.value=!0,t.value=JSON.parse(JSON.stringify(await new u.SitemapApi(f()).sitemap())),n.value=!1}catch(a){n.value=!1,t.value=null,o.value=JSON.parse(JSON.stringify(a))}return{response:e.unref(t),error:e.unref(o)}}}},v={install(n,t){F(t),n.component(y.name,y),n.component(d.name,d),n.provide("flyo",{liveEdit:t.liveEdit,liveEditOrigin:t.liveEditOrigin})}};exports.Block=y;exports.FlyoVue=v;exports.Page=d;exports.default=v;exports.getFlyoConfig=f;exports.useFlyoConfig=k;exports.useFlyoEntity=h;exports.useFlyoPage=E;exports.useFlyoSitemap=B;

package/dist/index.mjs

@@ -0,0 +1,163 @@
+import { Configuration as h, ConfigApi as E, EntitiesApi as F, PagesApi as k, SitemapApi as w } from "@flyo/nitro-typescript";
+import { openBlock as f, createBlock as O, resolveDynamicComponent as C, inject as L, resolveComponent as B, createElementBlock as y, renderSlot as b, normalizeProps as j, mergeProps as P, Fragment as A, renderList as $, createCommentVNode as _, reactive as x, toRefs as M, ref as a, unref as i } from "vue";
+let S = null;
+const R = ({ apiToken: e, apiBasePath: n, defaultHeaders: t }) => {
+  S = new h({
+    apiKey: e,
+    ...n && { basePath: n },
+    headers: t || {}
+  });
+}, p = () => S, W = {
+  name: "FlyoBlock"
+}, d = /* @__PURE__ */ Object.assign(W, {
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  setup(e) {
+    return (n, t) => (f(), O(C(e.item.component), {
+      config: e.item.config,
+      content: e.item.content,
+      items: e.item.items,
+      slots: e.item.slots
+    }, null, 8, ["config", "content", "items", "slots"]));
+  }
+}), q = {
+  name: "FlyoPage"
+}, v = /* @__PURE__ */ Object.assign(q, {
+  props: {
+    page: {
+      type: [Object, Boolean],
+      default: !1
+    }
+  },
+  emits: ["update:page"],
+  setup(e, { emit: n }) {
+    const t = e, o = n, { liveEdit: c, liveEditOrigin: l } = L("flyo"), g = (s) => {
+      const u = s.parent || s.opener;
+      return s.self === u ? !1 : s.parent || s.opener;
+    }, N = (s) => {
+      c && process.client && g(window) && g(window).postMessage({
+        action: "openEdit",
+        data: JSON.parse(JSON.stringify({
+          page: t.page,
+          item: s
+        }))
+      }, l);
+    };
+    return process.client && g(window) && window.addEventListener("message", (s) => {
+      if (s.origin !== l) {
+        console.log(`Message from ${s.origin} blocked. Expected ${l}.`);
+        return;
+      }
+      const u = s.data;
+      u.action === "pageRefresh" && o("update:page", u.data);
+    }), (s, u) => {
+      const J = B("FlyoBlock");
+      return f(), y("div", null, [
+        e.page ? b(s.$slots, "default", j(P({ key: 0 }, e.page)), () => [
+          (f(!0), y(A, null, $(e.page.json, (m) => (f(), O(J, {
+            key: m.uid,
+            item: m,
+            onClick: () => N(m)
+          }, null, 8, ["item", "onClick"]))), 128))
+        ]) : _("", !0)
+      ]);
+    };
+  }
+}), r = x({
+  isLoading: null,
+  response: null,
+  error: null
+}), K = () => {
+  const e = async () => {
+    try {
+      r.error = null, r.isLoading = !0, r.response = JSON.parse(JSON.stringify(await new E(p()).config())), r.isLoading = !1;
+    } catch (n) {
+      r.isLoading = !1, r.response = null, r.error = JSON.parse(JSON.stringify(n));
+    }
+    return {
+      response: r.response,
+      error: r.error
+    };
+  };
+  return {
+    ...M(r),
+    fetch: e
+  };
+}, U = (e) => {
+  const n = a(!1), t = a(null), o = a(null);
+  return {
+    isLoading: n,
+    response: t,
+    error: o,
+    fetch: async () => {
+      try {
+        o.value = null, n.value = !0, t.value = JSON.parse(JSON.stringify(await new F(p()).entityByUniqueid({ uniqueid: e }))), n.value = !1;
+      } catch (l) {
+        n.value = !1, t.value = null, o.value = JSON.parse(JSON.stringify(l));
+      }
+      return {
+        response: i(t),
+        error: i(o)
+      };
+    }
+  };
+}, G = (e) => {
+  const n = a(!1), t = a(null), o = a(null);
+  return {
+    isLoading: n,
+    response: t,
+    error: o,
+    fetch: async () => {
+      try {
+        o.value = null, n.value = !0, t.value = JSON.parse(JSON.stringify(await new k(p()).page({ slug: e }))), n.value = !1;
+      } catch (l) {
+        n.value = !1, t.value = null, o.value = JSON.parse(JSON.stringify(l));
+      }
+      return {
+        response: i(t),
+        error: i(o)
+      };
+    }
+  };
+}, H = () => {
+  const e = a(!1), n = a(null), t = a(null);
+  return {
+    isLoading: e,
+    response: n,
+    error: t,
+    fetch: async () => {
+      try {
+        t.value = null, e.value = !0, n.value = JSON.parse(JSON.stringify(await new w(p()).sitemap())), e.value = !1;
+      } catch (c) {
+        e.value = !1, n.value = null, t.value = JSON.parse(JSON.stringify(c));
+      }
+      return {
+        response: i(n),
+        error: i(t)
+      };
+    }
+  };
+}, I = {
+  install(e, n) {
+    R(n), e.component(d.name, d), e.component(v.name, v), e.provide("flyo", {
+      liveEdit: n.liveEdit,
+      liveEditOrigin: n.liveEditOrigin
+    });
+  }
+};
+export {
+  d as Block,
+  I as FlyoVue,
+  v as Page,
+  I as default,
+  p as getFlyoConfig,
+  K as useFlyoConfig,
+  U as useFlyoEntity,
+  G as useFlyoPage,
+  H as useFlyoSitemap
+};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@flyo/nitro-vue3",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Vue3 Components for Flyo Nitro",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     }
   },
   "repository": "git@github.com:flyocloud/nitro-vue3.git",
@@ -17,19 +18,26 @@
     "dist"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "release": "npm publish --access=public"
   },
   "peerDependencies": {
     "vue": "^3.2.21"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.2.47",
-    "rollup": "^3.15.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-vue": "^6.0.0"
+    "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/git": "^10.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/compiler-sfc": "^3.4.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^13.0.0",
+    "semantic-release": "^24.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0"
   },
   "dependencies": {
-    "@flyo/nitro-js": "^1.0"
+    "@flyo/nitro-typescript": "^1.4.0"
   }
 }

package/dist/index.js

@@ -1,277 +0,0 @@
-import { ApiClient, ConfigApi, EntitiesApi, PagesApi, SitemapApi } from '@flyo/nitro-js';
-import { openBlock, createBlock, resolveDynamicComponent, inject, resolveComponent, createElementBlock, renderSlot, normalizeProps, mergeProps, Fragment, renderList, createCommentVNode, reactive, toRefs, ref, unref } from 'vue';
-
-const initFlyoApi = ({ apiToken, apiBasePath, defaultHeaders }) => {
-  const defaultClient = ApiClient.instance;
-  defaultClient.defaultHeaders = defaultHeaders || {};
-
-	if (apiBasePath) {
-		defaultClient.basePath = apiBasePath;
-	}
-
-  const ApiKeyAuth = defaultClient.authentications["ApiKeyAuth"];
-  ApiKeyAuth.apiKey = apiToken;
-};
-
-const __default__$1 = {
-  name: 'FlyoBlock'
-};
-
-
-var script$1 = /*#__PURE__*/Object.assign(__default__$1, {
-  props: {
-  item: {
-    type: Object,
-    default: () => { }
-  }
-},
-  setup(__props) {
-
-
-
-return (_ctx, _cache) => {
-  return (openBlock(), createBlock(resolveDynamicComponent(__props.item.component), {
-    config: __props.item.config,
-    content: __props.item.content,
-    items: __props.item.items,
-    slots: __props.item.slots
-  }, null, 8 /* PROPS */, ["config", "content", "items", "slots"]))
-}
-}
-
-});
-
-script$1.__file = "src/components/Block.vue";
-
-const __default__ = {
-  name: 'FlyoPage'
-};
-
-
-var script = /*#__PURE__*/Object.assign(__default__, {
-  props: {
-  page: {
-    type: [Object, Boolean],
-    default: false
-  }
-},
-  emits: ['update:page'],
-  setup(__props, { emit: emits }) {
-
-const props = __props;
-
-
-
-
-
-const { liveEdit, liveEditOrigin } = inject('flyo');
-
-const parentWindow = window => {
-  const parentWindow = window.parent || window.opener;
-  if (window.self === parentWindow) {
-    return false
-  }
-
-  return window.parent || window.opener;
-};
-
-const openFlyoEdit = (item) => {
-  if (!liveEdit) {
-    return
-  }
-
-  if (process.client && parentWindow(window)) {
-    parentWindow(window).postMessage({
-      action: 'openEdit',
-      data: JSON.parse(JSON.stringify({
-        page: props.page,
-        item: item
-      }))
-    }, liveEditOrigin);
-  }
-};
-
-if (process.client && parentWindow(window)) {
-  window.addEventListener("message", (event) => {
-    if (event.origin !== liveEditOrigin) {
-      console.log(`Message from ${event.origin} blocked. Expected ${liveEditOrigin}.`);
-      return
-    }
-
-    const message = event.data;
-    if (message.action === 'pageRefresh') {
-      emits('update:page', message.data);
-
-      /*
-      const itemIndex = props.page.json.findIndex(item => item.uid === data.uid)
-      props.page.json[itemIndex] = {
-        ...props.page.json[itemIndex],
-        ...data
-      }
-      */
-    }
-  });
-}
-
-return (_ctx, _cache) => {
-  const _component_FlyoBlock = resolveComponent("FlyoBlock");
-
-  return (openBlock(), createElementBlock("div", null, [
-    (__props.page)
-      ? renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 0 }, __props.page)), () => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.page.json, (item) => {
-            return (openBlock(), createBlock(_component_FlyoBlock, {
-              key: item.uid,
-              item: item,
-              onClick: () => openFlyoEdit(item)
-            }, null, 8 /* PROPS */, ["item", "onClick"]))
-          }), 128 /* KEYED_FRAGMENT */))
-        ])
-      : createCommentVNode("v-if", true)
-  ]))
-}
-}
-
-});
-
-script.__file = "src/components/Page.vue";
-
-const flyoConfigState = reactive({
-	isLoading: null,
-	response: null,
-	error: null
-});
-
-const useFlyoConfig = () => {
-	const fetch = async () => {
-		try {
-      flyoConfigState.error = null;
-      flyoConfigState.isLoading = true;
-      flyoConfigState.response = JSON.parse(JSON.stringify(await new ConfigApi().config()));
-      flyoConfigState.isLoading = false;
-    } catch (e) {
-			flyoConfigState.isLoading = false;
-			flyoConfigState.response = null;
-      flyoConfigState.error = JSON.parse(JSON.stringify(e));
-    }
-
-		return {
-			response: flyoConfigState.response,
-			error: flyoConfigState.error
-		}
-	};
-
-  return {
-		...toRefs(flyoConfigState),
-		fetch
-	}
-};
-
-const useFlyoEntity = (uniqueid) => {
-  const isLoading = ref(false);
-  const response = ref(null);
-  const error = ref(null);
-
-  const fetch = async () => {
-    try {
-      error.value = null;
-      isLoading.value = true;
-      response.value = JSON.parse(JSON.stringify(await new EntitiesApi().entity(uniqueid)));
-    } catch (e) {
-      isLoading.value = false;
-      response.value = null;
-      error.value = JSON.parse(JSON.stringify(e));
-    }
-
-		return {
-			response: unref(response),
-			error: unref(error)
-		}
-  };
-
-  return {
-    isLoading,
-    response,
-    error,
-    fetch
-  }
-};
-
-const useFlyoPage = (slug) => {
-  const isLoading = ref(false);
-  const response = ref(null);
-  const error = ref(null);
-
-  const fetch = async () => {
-    try {
-      error.value = null;
-      isLoading.value = true;
-      response.value = JSON.parse(JSON.stringify(await new PagesApi().page({ slug })));
-    } catch (e) {
-      isLoading.value = false;
-      response.value = null;
-      error.value = JSON.parse(JSON.stringify(e));
-    }
-
-		return {
-			response: unref(response),
-			error: unref(error)
-		}
-  };
-
-  return {
-    isLoading,
-    response,
-    error,
-    fetch
-  }
-};
-
-const useFlyoSitemap = () => {
-  const isLoading = ref(false);
-  const response = ref(null);
-  const error = ref(null);
-
-  const fetch = async () => {
-    try {
-      error.value = null;
-      isLoading.value = true;
-      response.value = JSON.parse(JSON.stringify(await new SitemapApi().sitemap()));
-    } catch (e) {
-      isLoading.value = false;
-      sitemap.value = null;
-      error.value = JSON.parse(JSON.stringify(e));
-    }
-
-		return {
-			response: unref(response),
-			error: unref(error)
-		}
-  };
-  
-  return {
-    isLoading,
-    response,
-    error,
-    fetch
-  }
-};
-
-const FlyoVue = {
-	install(Vue, options) {
-		// Initialize the flyo api
-		initFlyoApi(options);
-
-	 	// Setup flyo components
-		Vue.component(script$1.name, script$1);
-		Vue.component(script.name, script);
-
-		// Provide flyo object with global / persistent data
-		Vue.provide('flyo', {
-			liveEdit: options.liveEdit,
-      		liveEditOrigin: options.liveEditOrigin
-		});
-	}
-};
-
-export { script$1 as Block, FlyoVue, script as Page, FlyoVue as default, useFlyoConfig, useFlyoEntity, useFlyoPage, useFlyoSitemap };