@storyblok/vue - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

dist/storyblok-vue.es.js

@@ -8,21 +8,20 @@ const addClass = (el, 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 };

dist/storyblok-vue.umd.js

@@ -1,1 +0,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.json

 {
   "name": "@storyblok/vue",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Storyblok directive for get editable elements.",
@@ -28,6 +28,7 @@ "main": "./dist/storyblok-vue.umd.js",
     "@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",
@@ -39,6 +40,10 @@ "cypress": "^8.3.0",
     "vite": "^2.4.4",
-    "vue": "^2.6.14",
-    "vue-jest": "^4.0.1",
-    "vue-template-compiler": "^2.6.14"
+    "vue": "^3.0.0",
+    "vue-jest": "next"
   },
+  "eslintConfig": {
+    "env": {
+      "node": true
+    }
+  },
   "babel": {
@@ -49,7 +54,2 @@ "presets": [
   },
-  "eslintConfig": {
-    "env": {
-      "node": true
-    }
-  },
   "jest": {
@@ -56,0 +56,0 @@ "moduleFileExtensions": [

README.md

@@ -33,3 +33,3 @@ <div align="center">
 
-**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)
 
@@ -42,7 +42,7 @@ ## 🚀 Usage
 
-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
 ```
@@ -53,6 +53,8 @@
 ```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);
 ```
@@ -65,9 +67,7 @@
 ```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:
@@ -83,7 +83,7 @@
 
-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.
 
@@ -90,0 +90,0 @@ ## 🔗 Related Links

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

9071

decreased by-2.03%

Lines of code

29

decreased by-6.45%

No dependency changes