Merge pull request #10 from alexjoverm/master

Update current v2 setup

.github/workflows/tests.yml

@@ -0,0 +1,32 @@
+name: Tests CI
+
+on:
+  push:
+    branches: [master, next]
+  pull_request:
+    branches: [master, next]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "lts/*"
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Build lib
+        run: npm run build
+      - name: Jest run
+        run: npm run test:unit
+      - name: Cypress run
+        run: npm run test:e2e
+      # - name: Release
+      #   env:
+      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      #     NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      #   run: npx semantic-release

.gitignore

@@ -1 +1,5 @@
-.DS_Store
+.DS_Store
+node_modules
+dist
+dist-v2
+lib/cypress/videos

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"
+# npx --no-install commitlint --edit
+

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

README.md

@@ -1,37 +1,105 @@
-# Vue Storyblok plugin
+<div align="center">
+	<a href="https://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue"  align="center">
+		<img src="https://a.storyblok.com/f/88751/1776x360/a7d027d26d/sb-vue.png"  alt="Storyblok Logo">
+	</a>
+	<h1 align="center">@storyblok/vue</h1>
+  <p align="center">
+    Vue plugin to make any <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue" target="_blank">Storyblok</a> component editable with a simple <code>v-editable</code> directive.
+  </p>
+  <br />
+</div>
 
-Make any element editable with the Vue Storyblok directive. Just add ```v-editable="content"``` to a html element.
+<p align="center">
+  <a href="https://npmjs.com/package/@storyblok/vue">
+    <img src="https://img.shields.io/npm/v/@storyblok/vue/latest.svg?style=flat-square" alt="Storyblok JS Client" />
+  </a>
+  <a href="https://npmjs.com/package/@storyblok/vue" rel="nofollow">
+    <img src="https://img.shields.io/npm/dt/@storyblok/vue.svg?style=flat-square" alt="npm">
+  </a>
+</p>
 
-## Compatibility
+<p align="center">
+  <a href="https://discord.gg/jKrbAMz">
+   <img src="https://img.shields.io/discord/700316478792138842?label=Join%20Our%20Discord%20Community&style=appveyor&logo=discord&color=09b3af">
+   </a>
+  <a href="https://twitter.com/intent/follow?screen_name=storyblok">
+    <img src="https://img.shields.io/badge/Follow-%40storyblok-09b3af?style=appveyor&logo=twitter" alt="Follow @Storyblok" />
+  </a>
+  <a href="https://app.storyblok.com/#!/signup?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue">
+    <img src="https://img.shields.io/badge/Try%20Storyblok-Free-09b3af?style=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADpiRU/AAACRElEQVRIDWNgGGmAEd3D3Js3LPrP8D8WXZwSPiMjw6qvPoHhyGYwIXNAbGpbCjbzP0MYuj0YFqMroBV/wCxmIeSju64eDNzMBJUxvP/9i2Hnq5cM1devMnz984eQsQwETeRhYWHgIcJiXqC6VHlFBjUeXgav40cIWkz1oLYXFmGwFBImaDFBHyObcOzdW4aSq5eRhRiE2dgYlpuYoYSKJi8vw3GgWnyAJIs/AuPu4scPGObd/fqVQZ+PHy7+6udPOBsXgySLDfn5GRYYmaKYJcXBgWLpsx8/GPa8foWiBhuHJIsl2DkYQqWksZkDFgP5PObcKYYff//iVAOTIDlx/QPqRMb/YSYBaWlOToZIaVkGZmAZSQiQ5OPtwHwacuo4iplMQEu6tXUZMhSUGDiYmBjylFQYvv/7x9B04xqKOnQOyT5GN+Df//8M59ASXKyMHLoyDD5JPtbj42OYrm+EYgg70JfuYuIoYmLs7AwMjIzA+uY/zjAnyWJpDk6GOFnCvrn86SOwmsNtKciVFAc1ileBHFDC67lzG10Yg0+SjzF0ownsf/OaofvOLYaDQJoQIGix94ljv1gIZI8Pv38zPvj2lQWYf3HGKbpDCFp85v07NnRN1OBTPY6JdRSGxcCw2k6sZuLVMZ5AV4s1TozPnGGFKbz+/PE7IJsHmC//MDMyhXBw8e6FyRFLv3Z0/IKuFqvFyIqAzd1PwBzJw8jAGPfVx38JshwlbIygxmYY43/GQmpais0ODDHuzevLMARHBcgIAQAbOJHZW0/EyQAAAABJRU5ErkJggg==" alt="Follow @Storyblok" />
+  </a>
+</p>
 
-Requires Vue 2.0
+**Note**: This plugin is for Vue 2. [Check out the @next version for Vue 3](https://github.com/storyblok/storyblok-vue/tree/next)
 
-## Install
+## 🚀 Usage
 
-```
-npm install storyblok-vue --save-dev
-```
+> 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.
 
-## Usage
+### Installation
 
-In your entry point:
+Install `@storyblok/vue`:
 
+```bash
+npm install --save-dev @storyblok/vue
+// yarn add -D @storyblok/vue
 ```
-import StoryblokVue from 'storyblok-vue'
 
-Vue.use(StoryblokVue)
+Register it globally on your application (usually in `main.js`):
+
+```js
+import Vue from "vue";
+import StoryblokVue from "@storyblok/vue";
+
+Vue.use(StoryblokVue);
 ```
 
-In the template:
+#### From a CDN
+
+Install the file from the CDN:
+
+```html
+<script src="https://unpkg.com/@storyblok/vue"></script>
 ```
-<div v-editable="demo">
-  Test
-</div>
+
+That's it, the plugin is auto-registered for you 😉.
+
+### Getting Started
+
+For every component you've defined in your Storyblok space, add the `v-editable` directive with the blok content:
+
+```html
+<template>
+  <div v-editable="blok"><!-- ... --></div>
+</template>
 ```
 
-See the jsfiddle to learn how to load the data from Storyblok:  
-https://jsfiddle.net/delooks/6tnttqvy/
+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.
+
+### 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).
+
+## 🔗 Related Links
+
+- **[Add a headless CMS to Vue.js in 5 minutes](https://www.storyblok.com/tp/add-a-headless-CMS-to-vuejs-in-5-minutes?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue)**: Quick-start guide on getting up and running with Storyblok and Vue.
+- **[Storyblok & Vue.js on GitHub](https://github.com/search?q=org%3Astoryblok+topic%3Avue)**: Check all of our Vue.js open source repos.
+- **[Storyblok CLI](https://github.com/storyblok/storyblok)**: A simple CLI for scaffolding Storyblok projects and fieldtypes.
+
+## ℹ️ More Resources
+
+### 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
+
+Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-vue).
+This project use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.
 
-## License
+### License
 
-[MIT](http://opensource.org/licenses/MIT)
+This repository is published under the [MIT](./LICENSE) license.

lib/__tests__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

lib/__tests__/index.test.js

@@ -0,0 +1,15 @@
+// import { mount } from "@vue/test-utils";
+// import Component from "../index";
+
+describe("@storyblok/vue", () => {
+  beforeEach(() => {});
+
+  test("empty test", () => {
+    // const wrapper = mount(Component, {
+    //   propsData: {
+    //     src: "http://lorempixel.com/400/200/",
+    //   },
+    // });
+    // expect(wrapper.element).toMatchSnapshot();
+  });
+});

lib/cypress.json

@@ -0,0 +1,5 @@
+{
+  "component": {
+    "testFiles": "**/*.spec.js"
+  }
+}

lib/cypress/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

lib/cypress/component/index.spec.js

@@ -0,0 +1,27 @@
+import { mount } from "@cypress/vue";
+import Demo from "@storyblok/vue-playground/App.vue";
+import StoryblokVue from "@storyblok/vue";
+
+describe("@storyblok/vue", () => {
+  beforeEach(() => {
+    mount(Demo, {
+      extensions: {
+        plugins: [StoryblokVue],
+      },
+    });
+  });
+
+  it("Gets data-blok-c and data-blok-uid attributes", () => {
+    cy.get("[data-test=editable]")
+      .should("have.attr", "data-blok-c")
+      .and("equals", '{"id":12345,"uid":"fc34-uad1"}');
+
+    cy.get("[data-test=editable]")
+      .should("have.attr", "data-blok-uid")
+      .and("equals", "12345-fc34-uad1");
+  });
+
+  it("Adds 'storyblok__outline' class to the element", () => {
+    cy.get("[data-test=editable]").should("have.class", "storyblok__outline");
+  });
+});

lib/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

lib/cypress/plugins/index.js

@@ -0,0 +1,20 @@
+const path = require("path");
+const { startDevServer } = require("@cypress/vite-dev-server");
+
+module.exports = (on) => {
+  on("dev-server:start", (options) => {
+    return startDevServer({
+      options,
+      viteConfig: {
+        configFile: path.resolve(
+          __dirname,
+          "..",
+          "..",
+          "..",
+          "playground",
+          "vite.config.js"
+        ),
+      },
+    });
+  });
+};

lib/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

lib/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

lib/index.js

@@ -0,0 +1,44 @@
+const addClass = (el, className) => {
+  if (el.classList) {
+    el.classList.add(className);
+  } else if (!new RegExp("\\b" + className + "\\b").test(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 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 default install;