feat: register components with plugin

lib/components/SplitContent/definition.js

@@ -0,0 +1,62 @@
+const { values, concat } = require('lodash');
+
+const extractComponentImages = ({ content, definitionsArray }) => {
+  return concat(
+    ...content.map(item => {
+      const contentDef = definitionsArray.find(def => def.componentType === item.componentType);
+
+      if (contentDef && contentDef.extractImages) return contentDef.extractImages(item);
+
+      return [];
+    })
+  );
+};
+
+const extractComponentLinks = ({ content, definitionsArray }) => {
+  return concat(
+    ...content.map(item => {
+      const contentDef = definitionsArray.find(def => def.componentType === item.componentType);
+
+      if (contentDef && contentDef.extractLinks) return contentDef.extractLinks(item);
+
+      return [];
+    })
+  );
+};
+
+export default (definitions, prefix) => ({
+  key: `${prefix}SplitContent`,
+  name: 'Split Content',
+  componentType: 'SplitContent',
+  hideSpacingInContent: true,
+  init: ({ $set }, content = {}) => {
+    if (!content.width) $set(content, 'width', 6);
+    if (!content.gap) $set(content, 'gap', 1);
+    if (!content.left) $set(content, 'left', []);
+    if (!content.right) $set(content, 'right', []);
+    if (!content.fullWidth) $set(content, 'fullWidth', false);
+    if (!content.reverse) $set(content, 'reverse', { mobile: false, desktop: false });
+
+    return content;
+  },
+  extractImages: content => {
+    const definitionsArray = values(definitions);
+
+    const res = [
+      ...extractComponentImages({ content: content.left, definitionsArray }),
+      ...extractComponentImages({ content: content.right, definitionsArray }),
+    ];
+
+    return res;
+  },
+  extractLinks: content => {
+    const definitionsArray = values(definitions);
+
+    const res = [
+      ...extractComponentLinks({ content: content.left, definitionsArray }),
+      ...extractComponentLinks({ content: content.right, definitionsArray }),
+    ];
+
+    return res;
+  },
+});

lib/components/definitions.js

@@ -0,0 +1,6 @@
+import SplitContent from './SplitContent/definition';
+
+export default function (definitions, prefix = '') {
+  const splitContent = SplitContent(definitions, prefix);
+  return [splitContent];
+}

lib/module.js

@@ -20,6 +20,12 @@ module.exports = function (moduleOptions) {
     options,
   });
 
+  this.addTemplate({
+    src: resolve(__dirname, 'components/SplitContent.vue'),
+    fileName: join(filesDir, 'components/SplitContent.vue'),
+    options,
+  });
+
   this.addTemplate({
     src: resolve(__dirname, 'components/SplitContent/Editor.vue'),
     fileName: join(filesDir, 'components/SplitContent/Editor.vue'),
@@ -39,5 +45,8 @@ module.exports = function (moduleOptions) {
   });
 };
 
-module.exports.install = (Vue, options) => require('./register').default(Vue, options);
+// module.exports.install = (Vue, options) => {
+//   console.log('🚀 ~ file: module.js ~ line 46 ~ test');
+//   return require('./register').default(Vue, options);
+// };
 module.exports.meta = require('../package.json');

lib/plugin.js

@@ -1,4 +1,10 @@
+import Vue from 'vue';
+
 import EditorComponent from './components/SplitContent/Editor';
+import SplitContent from './components/SplitContent';
+console.log('🚀 ~ file: plugin.js ~ line 5 ~ SplitContent', SplitContent);
+
+Vue.component(`SplitContent`, SplitContent);
 
 export default async function ({ $whppt }) {
   const splitContent = {

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "lodash": "^4.17.20",
+    "vue": "^2.6.14",
     "vuex": "^3.5.1"
   },
   "devDependencies": {

yarn.lock

@@ -10293,6 +10293,11 @@ vue@^2.6.12:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
+vue@^2.6.14:
+  version "2.6.14"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
+  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
+
 vuex@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.5.1.tgz#f1b8dcea649bc25254cf4f4358081dbf5da18b3d"