@storyblok/vue 2.0.0 → 3.0.1

package/README.md

@@ -30,7 +30,7 @@
   </a>
 </p>
 
-**Note**: This plugin is for Vue 2. [Check out the @next version for Vue 3](https://github.com/storyblok/storyblok-vue/tree/next)
+**Note**: This plugin is for Vue 3. [Check out the docs for Vue 2 version](https://github.com/storyblok/storyblok-vue/tree/master).
 
 ## 🚀 Usage
 
@@ -38,20 +38,22 @@
 
 ### Installation
 
-Install `@storyblok/vue`:
+Install `@storyblok/vue@next`:
 
 ```bash
-npm install --save-dev @storyblok/vue
-// yarn add -D @storyblok/vue
+npm install --save-dev @storyblok/vue@next
+# yarn add -D @storyblok/vue@next
 ```
 
 Register it globally on your application (usually in `main.js`):
 
 ```js
-import Vue from "vue";
+import { createApp } from "vue";
 import StoryblokVue from "@storyblok/vue";
+import App from "./App.vue";
 
-Vue.use(StoryblokVue);
+const app = createApp(App);
+app.use(StoryblokVue);
 ```
 
 #### From a CDN
@@ -59,12 +61,10 @@ Vue.use(StoryblokVue);
 Install the file from the CDN:
 
 ```html
-<script src="https://unpkg.com/@storyblok/vue"></script>
+<script src="https://unpkg.com/@storyblok/vue@next"></script>
 ```
 
-That's it, the plugin is auto-registered for you 😉.
-
-### Getting Started
+### Getting started
 
 For every component you've defined in your Storyblok space, add the `v-editable` directive with the blok content:
 
@@ -76,11 +76,11 @@ For every component you've defined in your Storyblok space, add the `v-editable`
 
 Where `blok` is the actual blok data coming from [Storblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue).
 
-Check out the [playground](/../../tree/master/playground) for a full example.
+Check out the [playground](/../../tree/next/playground) for a full example.
 
 ### Compatibility
 
-This plugin is for Vue 2. Thus, it supports the [same browsers as Vue 2](https://vuejs.org/v2/guide/installation.html#Compatibility-Note).
+This plugin is for Vue 3. Thus, it supports the [same browsers as Vue 3](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md). In short: all modern browsers, dropping IE support.
 
 ## 🔗 Related Links
 

package/dist/storyblok-vue.es.js

@@ -5,23 +5,22 @@ const addClass = (el, className) => {
     el.className += " " + className;
   }
 };
-function install(Vue) {
-  Vue.directive("editable", {
-    bind: function(el, binding) {
-      if (typeof binding.value._editable === "undefined" || binding.value._editable === null) {
-        return;
+var index = {
+  install: (app) => {
+    app.directive("editable", {
+      beforeMount(el, binding) {
+        if (binding.value) {
+          const node = binding.value._editable;
+          if (typeof node === "undefined" || node === null)
+            return;
+          const cleared = node.replace("<!--#storyblok#", "").replace("-->", "");
+          const options = JSON.parse(cleared);
+          el.setAttribute("data-blok-c", JSON.stringify(options));
+          el.setAttribute("data-blok-uid", options.id + "-" + options.uid);
+          addClass(el, "storyblok__outline");
+        }
       }
-      var options = JSON.parse(binding.value._editable.replace("<!--#storyblok#", "").replace("-->", ""));
-      el.setAttribute("data-blok-c", JSON.stringify(options));
-      el.setAttribute("data-blok-uid", options.id + "-" + options.uid);
-      addClass(el, "storyblok__outline");
-    }
-  });
-  if (typeof window !== "undefined" && typeof window.storyblok !== "undefined") {
-    Vue.prototype.$storyblok = window.storyblok;
+    });
   }
-}
-if (typeof window !== "undefined" && window.Vue) {
-  window.Vue.use(install);
-}
-export { install as default };
+};
+export { index as default };

package/dist/storyblok-vue.umd.js

@@ -1 +1 @@
-(function(o,i){typeof exports=="object"&&typeof module!="undefined"?module.exports=i():typeof define=="function"&&define.amd?define(i):(o=typeof globalThis!="undefined"?globalThis:o||self,o.storyblok=i())})(this,function(){"use strict";const o=(e,t)=>{e.classList?e.classList.add(t):new RegExp("\\b"+t+"\\b").test(e.className)||(e.className+=" "+t)};function i(e){e.directive("editable",{bind:function(t,d){if(!(typeof d.value._editable=="undefined"||d.value._editable===null)){var n=JSON.parse(d.value._editable.replace("<!--#storyblok#","").replace("-->",""));t.setAttribute("data-blok-c",JSON.stringify(n)),t.setAttribute("data-blok-uid",n.id+"-"+n.uid),o(t,"storyblok__outline")}}}),typeof window!="undefined"&&typeof window.storyblok!="undefined"&&(e.prototype.$storyblok=window.storyblok)}return typeof window!="undefined"&&window.Vue&&window.Vue.use(i),i});
+(function(i,s){typeof exports=="object"&&typeof module!="undefined"?module.exports=s():typeof define=="function"&&define.amd?define(s):(i=typeof globalThis!="undefined"?globalThis:i||self,i.storyblok=s())})(this,function(){"use strict";const i=(t,e)=>{t.classList?t.classList.add(e):new RegExp("\\b"+e+"\\b").test(t.className)||(t.className+=" "+e)};var s={install:t=>{t.directive("editable",{beforeMount(e,d){if(d.value){const o=d.value._editable;if(typeof o=="undefined"||o===null)return;const u=o.replace("<!--#storyblok#","").replace("-->",""),n=JSON.parse(u);e.setAttribute("data-blok-c",JSON.stringify(n)),e.setAttribute("data-blok-uid",n.id+"-"+n.uid),i(e,"storyblok__outline")}}})}};return s});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/vue",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "description": "Storyblok directive for get editable elements.",
   "main": "./dist/storyblok-vue.umd.js",
   "module": "./dist/storyblok-vue.es.js",
@@ -25,30 +25,30 @@
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@cypress/vite-dev-server": "^2.0.7",
-    "@cypress/vue": "^2.2.3",
+    "@cypress/vue": "^3.0.3",
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/babel-preset-app": "^4.5.13",
-    "@vue/test-utils": "^1.2.2",
+    "@vue/compiler-sfc": "^3.2.1",
+    "@vue/test-utils": "next",
     "babel-jest": "^26.6.3",
     "cypress": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-jest": "^25.2.4",
     "jest": "^26.6.3",
     "vite": "^2.4.4",
-    "vue": "^2.6.14",
-    "vue-jest": "^4.0.1",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "babel": {
-    "presets": [
-      "@vue/babel-preset-app"
-    ]
+    "vue": "^3.0.0",
+    "vue-jest": "next"
   },
   "eslintConfig": {
     "env": {
       "node": true
     }
   },
+  "babel": {
+    "presets": [
+      "@vue/babel-preset-app"
+    ]
+  },
   "jest": {
     "moduleFileExtensions": [
       "js",
@@ -73,5 +73,11 @@
   "bugs": {
     "url": "https://github.com/storyblok/storyblok-vue/issues"
   },
-  "homepage": "https://github.com/storyblok/storyblok-vue"
+  "homepage": "https://github.com/storyblok/storyblok-vue",
+  "release": {
+    "branches": [
+      "master",
+      "next"
+    ]
+  }
 }