@storyblok/nuxt 2.0.4 → 3.0.0-beta.1

package/README.md

@@ -27,37 +27,45 @@
   </a>
 </p>
 
-**Note**: This plugin is for Nuxt 2. [Check out the @next version for Nuxt 3](https://github.com/storyblok/storyblok-nuxt/tree/next)
+**Note**: This plugin is for Nuxt 3. [Check out the docs for Nuxt 2 version](https://github.com/storyblok/storyblok-nuxt/tree/master)
 
 ## 🚀 Usage
 
-> If you are first-time user of the Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) guide to get a project ready in less than 5 minutes.
+> If you are first-time user of the Storyblok, read the [Getting Started](https://www.storyblok.com/docs/guide/getting-started?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue) guide to get a project ready in less than 5 minutes.
 
 ### Installation
 
-Install `@storyblok/nuxt` and `axios` as its peer dependency:
+Install `@storyblok/nuxt@next` and `axios` as its peer dependency:
 
 ```bash
-npm install --save-dev @storyblok/nuxt axios
-# yarn add -D @storyblok/nuxt axios
+npm install --save-dev @storyblok/nuxt@next axios
+# yarn add -D @storyblok/nuxt@next axios
 ```
 
-> _Hint: You don't have to install Axios if you already installed Axios module of Nuxt._
-
 Add following code to modules section of `nuxt.config.js` and replace the accessToken with API token from Storyblok space.
 
 ```js
-{
+import { defineNuxtConfig } from "nuxt3";
+
+export default defineNuxtConfig({
   modules: [
-    [
-      "@storyblok/nuxt",
-      {
-        accessToken: "YOUR_PREVIEW_TOKEN",
-        cacheProvider: "memory",
-      },
-    ],
-  ];
-}
+    ["@storyblok/nuxt", { accessToken: "YOUR_ACCESS_TOKEN" }]
+    // ...
+  ]
+});
+```
+
+You can also use the `storyblok` config if you prefer:
+
+```js
+import { defineNuxtConfig } from "nuxt3";
+
+export default defineNuxtConfig({
+  modules: ["@storyblok/nuxt"],
+  storyblok: {
+    accessToken: "YOUR_ACCESS_TOKEN"
+  }
+});
 ```
 
 ### Getting started
@@ -65,15 +73,66 @@ Add following code to modules section of `nuxt.config.js` and replace the access
 This module adds two objects to the the Nuxt.js context.
 
 1. $storyapi: The [Storyblok API client](https://github.com/storyblok/storyblok-nuxt).
-2. $storybridge: A loader for the [Storyblok JS bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) that is responsible for adding the editing interface to your website.
+2. $storybridge: A loader for the [Storyblok JS bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js) that is responsible for adding the editing interface to your website.
+
+### Examples
+
+#### Fetching data
+
+Use `useStoryApi` composable, auto-imported when using `<script setup>`:
+
+```html
+<template>
+  <div>
+    <p v-for="story in stories" :key="story.id">{{ story.name }}</p>
+  </div>
+</template>
+
+<script setup>
+  const storyapi = useStoryApi();
+  const { data } = await storyapi.get("cdn/stories", { version: "draft" });
+</script>
+```
+
+If you need to import them manually, do it from `composables`:
+
+```js
+import { useStoryApi, useStoryBridge } from "@storyblok/nuxt/composables";
+```
+
+#### Listen to Storyblok editor events
 
-Example of fetching data of the homepage and listening to the change events of the JS bridge:
+Use `useStoryBridge`. You need to pass the story id as first param, and a callback function as second param to update the new story:
+
+```html
+<script setup>
+  const storyapi = useStoryApi();
+  const { data } = await storyapi.get("cdn/stories/home", { version: "draft" });
+  const state = reactive({ stories: data.story });
+
+  onMounted(() => {
+    useStoryBridge(state.story.id, story => (state.story = story));
+  });
+</script>
+```
+
+You can pass [Bridge options](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt) as a third parameter as well:
+
+```js
+useStoryBridge(state.story.id, (story) => (state.story = story), {
+  resolveRelations: ["Article.author"]
+});
+```
+
+### Options API
+
+Traditional Option API is used just like in [version 2](/../../):
 
 ```js
 export default {
   data() {
     return {
-      story: { content: {} },
+      story: { content: {} }
     };
   },
   mounted() {
@@ -99,7 +158,7 @@ export default {
   asyncData(context) {
     return context.app.$storyapi
       .get("cdn/stories/home", {
-        version: "draft",
+        version: "draft"
       })
       .then((res) => {
         return res.data;
@@ -109,17 +168,17 @@ export default {
           console.error(res);
           context.error({
             statusCode: 404,
-            message: "Failed to receive content form api",
+            message: "Failed to receive content form api"
           });
         } else {
           console.error(res.response.data);
           context.error({
             statusCode: res.response.status,
-            message: res.response.data,
+            message: res.response.data
           });
         }
       });
-  },
+  }
 };
 ```
 
@@ -127,73 +186,23 @@ export default {
 
 ### API
 
-Like described above, this package includes two objects into Nuxt.js context:
+Like described above, this package includes two composablestwo objects into Nuxt.js context:
 
-#### $storyapi
+#### useStoryApi()
 
-This object is a instance of StoryblokClient. You can check the documentation about StoryblokClient in the repository: https://github.com/storyblok/storyblok-nuxt
+It's basically a convenient way to access `$storyapi`
 
-#### $storybridge(successCallback, errorCallback)
+#### useStoryBridge(storyId, callback, bridgeOptions)
 
-You can use this object to load the [Storyblok JS Bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt). In the success callback you will it have available in the window variable StoryblokBridge.
+Use this one-line composable to cover the most common use case: updating the story when any kind of change happens on Storyblok side. It's the equivalent to the [Options API code you've seen above](/../../tree/next#options-api).
 
-### Migrate from 1.x to 2.x
-
-#### Listening to Visual Editor events in 1.x
-
-Most of our tutorials and recordings still using following deprecated approach for real-time editing and listening to Storyblok's Visual Editor events. **This approach can be used only with 1.x version of the storyblok-nuxt.**
-
-```js
-export default {
-  mounted() {
-    // Use the input event for instant update of content
-    this.$storybridge.on("input", (event) => {
-      if (event.story.id === this.story.id) {
-        this.story.content = event.story.content;
-      }
-    });
-    // Use the bridge to listen the events
-    this.$storybridge.on(["published", "change"], (event) => {
-      this.$nuxt.$router.go({
-        path: this.$nuxt.$router.currentRoute,
-        force: true,
-      });
-    });
-  },
-};
-```
-
-#### Listening to Visual Editor events in 2.x
+#### $storyapi
 
-The recommended approach for 2.x storyblok-nuxt plugin.
+This object is a instance of StoryblokClient. You can check the documentation about StoryblokClient in the repository: https://github.com/storyblok/storyblok-nuxt
 
-```js
-export default {
-  mounted() {
-    this.$storybridge(
-      () => {
-        const storyblokInstance = new StoryblokBridge();
+#### $storybridge(successCallback, errorCallback)
 
-        storyblokInstance.on(["input", "published", "change"], (event) => {
-          if (event.action == "input") {
-            if (event.story.id === this.story.id) {
-              this.story.content = event.story.content;
-            }
-          } else {
-            this.$nuxt.$router.go({
-              path: this.$nuxt.$router.currentRoute,
-              force: true,
-            });
-          }
-        });
-      },
-      (error) => {
-        console.error(error);
-      }
-    );
-  },
-};
-```
+You can use this object to load the [Storyblok JS Bridge](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-nuxt). In the success callback you will it have available in the window variable StoryblokBridge.
 
 ## 🔗 Related Links
 
@@ -206,6 +215,7 @@ export default {
 ### Support
 
 - Bugs or Feature Requests? [Submit an issue](/../../issues/new);
+
 - Do you have questions about Storyblok or you need help? [Join our Discord Community](https://discord.gg/jKrbAMz).
 
 ### Contributing

package/composables/dist/composables.es.js

@@ -0,0 +1,24 @@
+import { useNuxtApp } from "#app";
+import { useRouter } from "vue-router";
+var useStoryBridge = (id, cb, options = {}) => {
+  if (typeof window === "undefined")
+    return;
+  const app = useNuxtApp();
+  const router = useRouter();
+  app.$storybridge(() => {
+    const sbBridge = new window.StoryblokBridge(options);
+    sbBridge.on(["input", "published", "change"], (event) => {
+      if (event.action == "input" && event.story.id === id)
+        cb(event.story);
+      else
+        router.go({ path: router.currentRoute, force: true });
+    });
+  }, (error) => {
+    console.error(error);
+  });
+};
+var useStoryApi = () => {
+  const app = useNuxtApp();
+  return app.$storyapi;
+};
+export { useStoryApi, useStoryBridge };

package/composables/dist/composables.umd.js

@@ -0,0 +1 @@
+(function(e,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("#app"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","#app","vue-router"],r):(e=typeof globalThis!="undefined"?globalThis:e||self,r(e.composables={},e._app,e.VueRouter))})(this,function(e,r,n){"use strict";var s=(t,d,f={})=>{if(typeof window=="undefined")return;const c=r.useNuxtApp(),u=n.useRouter();c.$storybridge(()=>{new window.StoryblokBridge(f).on(["input","published","change"],o=>{o.action=="input"&&o.story.id===t?d(o.story):u.go({path:u.currentRoute,force:!0})})},i=>{console.error(i)})},p=()=>r.useNuxtApp().$storyapi;e.useStoryApi=p,e.useStoryBridge=s,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"});

package/composables/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@storyblok/nuxt-composables",
+  "version": "0.0.0",
+  "main": "./dist/composables.umd.js",
+  "module": "./dist/composables.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/composables.es.js",
+      "require": "./dist/composables.umd.js"
+    }
+  }
+}

package/composables/src/index.js

@@ -0,0 +1,2 @@
+export { default as useStoryBridge } from "./useStoryBridge";
+export { default as useStoryApi } from "./useStoryApi";

package/composables/src/useStoryApi.js

@@ -0,0 +1,6 @@
+import { useNuxtApp } from "#app";
+
+export default () => {
+  const app = useNuxtApp();
+  return app.$storyapi;
+};

package/composables/src/useStoryBridge.js

@@ -0,0 +1,22 @@
+import { useNuxtApp } from "#app";
+import { useRouter } from "vue-router";
+
+export default (id, cb, options = {}) => {
+  if (typeof window === "undefined") return;
+  const app = useNuxtApp();
+  const router = useRouter();
+
+  app.$storybridge(
+    () => {
+      const sbBridge = new window.StoryblokBridge(options);
+
+      sbBridge.on(["input", "published", "change"], (event) => {
+        if (event.action == "input" && event.story.id === id) cb(event.story);
+        else router.go({ path: router.currentRoute, force: true });
+      });
+    },
+    (error) => {
+      console.error(error);
+    }
+  );
+};

package/module.js

@@ -1,12 +1,53 @@
-const path = require("path");
+import path from "path";
+import { defineNuxtModule, addPluginTemplate } from "@nuxt/kit";
 
-module.exports = function nuxtStoryblok(moduleOptions) {
-  let options = Object.assign({}, this.options.storyblok, moduleOptions);
-
-  this.addPlugin({
-    src: path.resolve(__dirname, "templates/plugin.js"),
-    options,
-  });
+export const noopTransform = () => {
+  return {
+    props: [],
+    needRuntime: true,
+  };
 };
 
-module.exports.meta = require("./package.json");
+export default defineNuxtModule({
+  name: "@storyblok/nuxt",
+  configKey: "storyblok",
+  defaults: {},
+  setup(options) {
+    addPluginTemplate({
+      src: path.resolve(__dirname, "templates/plugin.js"),
+      options,
+    });
+  },
+  // We need to add the v-editable SSR impl or it will crash
+  // info here: https://github.com/vuejs/vue-next/issues/3298
+  hooks: {
+    "build:before": ({ nuxt }, config) => {
+      // If it's using Webpack
+      const isWebpack = nuxt.options.vite === false;
+      const isProduction = nuxt.options.dev === false;
+      if (isWebpack || (!isWebpack && isProduction)) {
+        config.transpile = [
+          ...(config.transpile || []),
+          "@storyblok/vue",
+          "storyblok-js-client",
+        ];
+      }
+
+      const opts = config.loaders.vue.compilerOptions;
+      const transforms = opts.directiveTransforms || {};
+      opts.directiveTransforms = { ...transforms, editable: noopTransform };
+    },
+    "autoImports:extend": (autoimports) => {
+      autoimports.push({
+        from: "@storyblok/nuxt/composables",
+        name: "useStoryBridge",
+        as: "useStoryBridge",
+      });
+      autoimports.push({
+        from: "@storyblok/nuxt/composables",
+        name: "useStoryApi",
+        as: "useStoryApi",
+      });
+    },
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/nuxt",
-  "version": "2.0.4",
+  "version": "3.0.0-beta.1",
   "description": "Storyblok Nuxt.js module",
   "license": "MIT",
   "contributors": [
@@ -11,20 +11,24 @@
   "main": "./module.js",
   "repository": "https://github.com/storyblok/storyblok-nuxt",
   "scripts": {
+    "build": "vite build",
+    "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "jest __tests__",
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "playground:run": "cd ../playground && npm run start",
     "pretest:e2e": "cd ../playground && npm run build",
     "test:e2e": "start-server-and-test playground:run http://localhost:3000 cy:run",
     "test:e2e-watch": "start-server-and-test playground:run http://localhost:3000 cy:open",
-    "prepublishOnly": "cp ../README.md ./"
+    "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "files": [
     "module.js",
-    "templates"
+    "templates",
+    "composables"
   ],
   "dependencies": {
-    "@storyblok/vue": "^2.0.0",
+    "@storyblok/vue": "^3.0.0",
     "storyblok-js-client": "^4.1.5"
   },
   "devDependencies": {
@@ -33,7 +37,8 @@
     "cypress": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "jest": "^26.6.3",
-    "start-server-and-test": "^1.14.0"
+    "start-server-and-test": "^1.14.0",
+    "vite": "^2.6.14"
   },
   "eslintConfig": {
     "env": {

package/templates/plugin.js

@@ -1,82 +1,67 @@
-import Vue from 'vue'
-import StoryblokClient from 'storyblok-js-client'
-import StoryblokVue from '@storyblok/vue'
+import StoryblokVue from "@storyblok/vue";
+import StoryblokClient from 'storyblok-js-client/source'
+import { defineNuxtPlugin } from '#app'
 
-const loadScript = function(src, cb) {
-  if (document.getElementById('storyblok-javascript-bridge')) {
-    return cb()
+const loadScript = (src, cb) => {
+  if (document.getElementById("storyblok-javascript-bridge")) {
+    return cb();
   }
 
-  var script = document.createElement('script')
-  script.async = true
-  script.src = src
-  script.id = 'storyblok-javascript-bridge'
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = src;
+  script.id = "storyblok-javascript-bridge";
 
-  script.onerror = function() {
-    cb(new Error('Failed to load' + src))
-  }
-
-  script.onload = function() {
-    cb()
-  }
+  script.onerror = function () {
+    cb(new Error("Failed to load" + src));
+  };
 
-  document.getElementsByTagName('head')[0].appendChild(script)
-}
+  script.onload = function () {
+    cb();
+  };
 
-let doLoadScript = true
+  document.getElementsByTagName("head")[0].appendChild(script);
+};
 
-const Client = {
-  install () {
-    if (!Vue.prototype.$storyapi) {
-      Vue.prototype.$storyapi = new StoryblokClient({
-        accessToken: '<%= options.accessToken %>',
-        cache: {
-          clear: 'auto',
-          type: '<%= options.cacheProvider || 'memory' %>'
-        },
-        timeout: <%= options.timeout || 0 %><% if (options.region) { %>,
-        region: '<%= options.region %>'<% } %><% if (typeof options.https !== 'undefined') { %>,
-        https: <%= options.https %><% } %>
-      }<% if (typeof options.endpoint !== 'undefined') { %>, '<%= options.endpoint %>'<% } %>)
+let doLoadScript = true;
 
-      Vue.prototype.$storybridge = function(cb, errorCb) {
-        if (typeof errorCb !== 'function') {
-          errorCb = function() {}
-        }
-
-        if (window.location == window.parent.location) {
-          errorCb('You are not in the edit mode.')
-          return
-        }
-
-        if (!doLoadScript) {
-          if (!window.StoryblokBridge) {
-            errorCb('The Storyblok bridge script is already loading.')
-            return
-          }
-          cb()
-          return
-        }
+const initStoryapi = () => {
+  return new StoryblokClient({
+    accessToken: '<%= options.accessToken %>',
+    cache: {
+      clear: 'auto',
+      type: '<%= options.cacheProvider || 'memory' %>'
+    },
+    timeout: <%= options.timeout || 0 %><% if (options.region) { %>,
+    region: '<%= options.region %>'<% } %><% if (typeof options.https !== 'undefined') { %>,
+    https: <%= options.https %><% } %>
+  }<% if (typeof options.endpoint !== 'undefined') { %>, '<%= options.endpoint %>'<% } %>)
+}
 
-        doLoadScript = false
-        loadScript('https://app.storyblok.com/f/storyblok-v2-latest.js', cb)
-      }
+const storybridge = (cb, errorCb) => {
+  if (typeof errorCb !== "function") {
+    errorCb = function () {};
+  }
+  if (window.location == window.parent.location) {
+    errorCb("You are not in the edit mode.");
+    return;
+  }
+  if (!doLoadScript) {
+    if (!window.StoryblokBridge) {
+      errorCb("The Storyblok bridge script is already loading.");
+      return;
     }
+    cb();
+    return;
   }
-}
-
-Vue.use(Client)
-Vue.use(StoryblokVue)
+  doLoadScript = false;
+  loadScript("https://app.storyblok.com/f/storyblok-v2-latest.js", cb);
+};
 
-export default (ctx) => {
-  const { app, store } = ctx
 
-  app.$storyapi = Vue.prototype.$storyapi
-  ctx.$storyapi = Vue.prototype.$storyapi
-  app.$storybridge = Vue.prototype.$storybridge
-  ctx.$storybridge = Vue.prototype.$storybridge
-
-  if (store) {
-    store.$storyapi = Vue.prototype.$storyapi
-  }
-}
+export default defineNuxtPlugin(({vueApp, provide}) => {
+  vueApp.use(StoryblokVue);
+  
+  provide("storyapi", initStoryapi());
+  provide("storybridge", storybridge);
+})