fix(helper): update vue 2 template and helper

package.json

@@ -38,7 +38,7 @@
     "build:lib": "yarn workspace @storyblok/field-plugin build",
     "build:cli": "yarn workspace @storyblok/field-plugin-cli build",
     "build:container": "yarn build:lib && yarn workspace container build",
-    "build:helpers": "yarn workspaces foreach --include \"helper-*\" run build && ./scripts/copy-helpers.sh",
+    "build:helpers": "yarn workspaces foreach --include \"helper-*\" run build && ./scripts/copy-helpers.mjs",
     "test": "yarn test:lib",
     "test:lib": "yarn workspace @storyblok/field-plugin test",
     "test:lib:watch": "yarn workspace @storyblok/field-plugin test --watch",

packages/cli/templates/vue2/src/App.vue

@@ -1,28 +1,15 @@
 <template>
-  <FieldPluginProvider>
-    <template v-slot:loading><span>Loading...</span></template>
-    <template v-slot:error><span>Error</span></template>
-
-    <FieldPluginExample />
-  </FieldPluginProvider>
+  <FieldPluginExample />
 </template>
 
 <script>
-import { FieldPluginProvider } from '@storyblok/field-plugin/vue2'
 import FieldPlugin from './components/FieldPlugin.vue'
 import FieldPluginExample from './components/FieldPluginExample/index.vue'
 
 export default {
   components: {
-    FieldPluginProvider,
     FieldPlugin,
     FieldPluginExample,
   },
 }
 </script>
-
-<style scoped>
-.field-plugin-provider {
-  width: 100%;
-}
-</style>

packages/cli/templates/vue2/src/components/FieldPlugin.vue

@@ -3,7 +3,8 @@
 </template>
 
 <script>
+import { fieldPluginMixin } from '../fieldPlugin'
 export default {
-  inject: ['plugin'],
+  mixins: [fieldPluginMixin],
 }
 </script>

packages/cli/templates/vue2/src/components/FieldPluginExample/AssetSelector.vue

@@ -1,42 +1,30 @@
 <template>
   <div class="asset-selector">
     <h2>Asset Selector</h2>
-    <img
-      v-if="asset"
-      :src="asset.filename"
-      title="Selected Asset"
-    />
-    <button
-      v-if="asset"
-      class="btn w-full"
-      @click="removeAsset"
-    >
+    <img v-if="asset" :src="asset.filename" title="Selected Asset" />
+    <button v-if="asset" class="btn w-full" @click="removeAsset">
       Remove Asset
     </button>
-    <button
-      v-else
-      class="btn w-full"
-      @click="handleSelectAsset"
-    >
+    <button v-else class="btn w-full" @click="handleSelectAsset">
       Select Asset
     </button>
   </div>
 </template>
 
 <script>
 export default {
-  inject: ['plugin'],
+  props: ['selectAsset'],
   data() {
     return {
       asset: undefined,
     }
   },
   methods: {
     async handleSelectAsset() {
-      this.asset.value = await this.plugin.actions.selectAsset()
+      this.asset = await this.selectAsset()
     },
     removeAsset() {
-      this.asset.value = undefined
+      this.asset = undefined
     },
   },
 }

packages/cli/templates/vue2/src/components/FieldPluginExample/Counter.vue

@@ -2,33 +2,16 @@
   <div>
     <h2>Field Value</h2>
     <div class="counter-value">
-      {{ label }}
+      {{ count }}
     </div>
-    <button
-      class="btn w-full"
-      @click="handleIncrement"
-    >
+    <button class="btn w-full" @click="onIncrease">
       Increment
     </button>
   </div>
 </template>
 
 <script>
 export default {
-  inject: ['plugin'],
-  computed: {
-    label() {
-      const content = this.plugin.data.content
-      return typeof content !== 'number' ? 0 : JSON.stringify(content)
-    },
-  },
-  methods: {
-    handleIncrement() {
-      const content = this.plugin.data.content
-      this.plugin.actions.setContent(
-        (typeof content === 'number' ? content : 0) + 1,
-      )
-    },
-  },
+  props: ['count', 'onIncrease'],
 }
 </script>

packages/cli/templates/vue2/src/components/FieldPluginExample/ModalToggle.vue

@@ -1,23 +1,14 @@
 <template>
   <div>
     <h2>Modal</h2>
-    <button
-      class="btn w-full"
-      type="button"
-      @click="() => plugin.actions.setModalOpen(!plugin.data.isModalOpen)"
-    >
-      {{ plugin.data.isModalOpen ? 'Close' : 'Open' }} modal
+    <button class="btn w-full" type="button" @click="() => setModalOpen(!isModalOpen)">
+      {{ isModalOpen ? 'Close' : 'Open' }} modal
     </button>
   </div>
 </template>
 
 <script>
 export default {
-  inject: ['plugin'],
-  methods: {
-    handleToggleModal() {
-      this.setModalOpen(!this.isModalOpen)
-    },
-  },
+  props: ['isModalOpen', 'setModalOpen'],
 }
 </script>

packages/cli/templates/vue2/src/components/FieldPluginExample/index.vue

@@ -1,31 +1,19 @@
 <template>
-  <div>
-    <button
-      v-if="plugin.data.isModalOpen"
-      type="button"
-      class="btn btn-close"
-      @click="closeModal"
-    >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 12 12"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+  <div class="field-plugin" v-if="plugin.type === 'loaded'">
+    <button v-if="plugin.data.isModalOpen" type="button" class="btn btn-close" @click="closeModal">
+      <svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M1.75738 0.343176L0.343166 1.75739L4.58581 6.00003L0.343165 10.2427L1.75738 11.6569L6.00002 7.41424L10.2427 11.6569L11.6569 10.2427L7.41423 6.00003L11.6569 1.75739L10.2427 0.343176L6.00002 4.58582L1.75738 0.343176Z"
-          fill="#1B243F"
-        />
+          fill="#1B243F" />
       </svg>
       <span class="sr-only">Close Modal</span>
     </button>
     <div class="container">
-      <Counter />
+      <Counter :count="plugin.data.content" :onIncrease="() => plugin.actions.setContent(plugin.data.content + 1)" />
       <hr />
-      <ModalToggle />
+      <ModalToggle :isModalOpen="plugin.data.isModalOpen" :setModalOpen="plugin.actions.setModalOpen" />
       <hr />
-      <AssetSelector />
+      <AssetSelector :selectAsset="plugin.actions.selectAsset" />
     </div>
   </div>
 </template>
@@ -34,14 +22,16 @@
 import ModalToggle from './ModalToggle.vue'
 import Counter from './Counter.vue'
 import AssetSelector from './AssetSelector.vue'
+import Vue from 'vue'
+import { fieldPluginMixin } from '../../fieldPlugin'
 
 export default {
-  inject: ['plugin'],
   components: {
     ModalToggle,
     Counter,
     AssetSelector,
   },
+  mixins: [fieldPluginMixin],
   methods: {
     closeModal() {
       this.plugin.actions.setModalOpen(false)
@@ -53,3 +43,9 @@ export default {
 <style>
 @import './example.css';
 </style>
+
+<style scoped>
+.field-plugin {
+  width: 100%;
+}
+</style>

packages/cli/templates/vue2/src/fieldPlugin.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { createFieldPlugin } from '@storyblok/field-plugin'
+
+/* eslint-disable functional/no-this-expression */
+export const fieldPluginMixin = {
+  created() {
+    createFieldPlugin({
+      parseContent: (content) => (typeof content === 'number' ? content : 0),
+      onUpdateState: (newState) => {
+        Vue.set(this.plugin, 'type', newState.type)
+        Vue.set(this.plugin, 'error', newState.error)
+        Vue.set(this.plugin, 'data', newState.data)
+        Vue.set(this.plugin, 'actions', newState.actions)
+      },
+    })
+  },
+  data() {
+    return {
+      plugin: Vue.observable({
+        type: 'loading',
+      }),
+    }
+  },
+}

packages/field-plugin/package.json

@@ -21,10 +21,6 @@
       "require": "./dist/react/index.umd.cjs",
       "types": "./dist/react/index.d.ts"
     },
-    "./vue2": {
-      "import": "./dist/vue2/index.js",
-      "require": "./dist/vue2/index.umd.cjs"
-    },
     "./vue3": {
       "import": "./dist/vue3/index.js",
       "require": "./dist/vue3/index.umd.cjs",