js-kompo-utils 1.0.5 → 1.0.6

package/mix/buildDefaultWebpackMix.js

@@ -0,0 +1,70 @@
+import path from 'path';
+import tailwindcss from 'tailwindcss';
+import webpack from 'webpack';
+
+export const defaultSassOptions = {
+    sassOptions: {
+        quietDeps: true,
+        api: 'modern-compiler',
+        silenceDeprecations: ["legacy-js-api"],
+    }
+};
+
+export const buildDefaultWebpackMix = (mix, options = {}) => {
+    const appPath = options.appPath || process.cwd();
+    const tailwindConfig = options.tailwindConfig || './tailwind.config.js';
+
+    mix.js('resources/js/app.js', 'public/js').vue()
+        .sass('resources/scss/app.scss', 'public/css', defaultSassOptions)
+        .options({
+            processCssUrls: false,
+            legacyNodePolyfills: false,
+            postCss: [ tailwindcss(tailwindConfig) ],
+        });
+
+    mix.version();
+
+    mix.webpackConfig({
+        resolve: {
+            modules: [path.resolve(appPath, 'node_modules'), 'node_modules'],
+            alias: {
+                // Ensure vue resolves from consuming app (not symlinked package)
+                'vue/dist/vue': path.resolve(appPath, 'node_modules/vue/dist/vue.js'),
+                'vue$': path.resolve(appPath, 'node_modules/vue/dist/vue.js'),
+            },
+        },
+        module: {
+            rules: [{
+                test: /\.js$/,
+                include: /js-kompo-utils/,
+                type: 'javascript/auto',
+            }]
+        },
+        plugins: [
+            new webpack.ProvidePlugin({
+                $: 'jquery',
+                jQuery: 'jquery',
+                'window.jQuery': 'jquery',
+                'Vue': 'vue/dist/vue'
+            }),
+        ],
+        optimization: {
+            splitChunks: {
+                chunks: 'all',
+                cacheGroups: {
+                    default: false,
+                    vendors: false,
+                }
+            }
+        }
+    });
+
+    // Allow vue-loader to process .vue files from js-kompo-utils
+    mix.override((config) => {
+        config.module.rules.forEach((rule) => {
+            if (rule.test && rule.test.toString().includes('vue') && rule.exclude) {
+                rule.exclude = /node_modules\/(?!js-kompo-utils)/;
+            }
+        });
+    });
+};

package/orchestrator/KompoJsBuilder.js

@@ -11,6 +11,8 @@ export class KompoJsConfigBuilder {
     windowDecorators = [];
     windowUtilsObject = {};
     appSelector = '#app';
+    includeBroadcasting = false;
+    echoBroadcasterConfig = null;
 
     beforeStepCallbacks = {};
     afterStepCallbacks = {};
@@ -136,6 +138,25 @@ export class KompoJsConfigBuilder {
         return this;
     }
 
+    withBroadcasting(config) {
+        this.includeBroadcasting = true;
+        this.echoBroadcasterConfig = {
+            broadcaster: 'pusher',
+            key: process.env.MIX_PUSHER_APP_KEY,
+            cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+            forceTLS: true,
+            ...config
+        };
+
+        return this;
+    }
+
+    withoutBroadcasting() {
+        this.includeBroadcasting = false;
+        this.echoBroadcasterConfig = null;
+        return this;
+    }
+
     /**
      * @param {object} plugin - A Vue plugin to register via Vue.use()
      * @returns {KompoJsConfigBuilder}
@@ -218,6 +239,8 @@ export class KompoJsInitializer {
 
         this._callStep('bootTutorialEngineIfRequired');
 
+        this._callStep('bootBroadcastingIfRequired');
+
         this._callStep('instanceApp');
     }
 
@@ -325,6 +348,15 @@ export class KompoJsInitializer {
         }
     }
 
+    bootBroadcastingIfRequired() {
+        if (this.config.includeBroadcasting) {
+            const Echo = require("laravel-echo");
+            this.window.Pusher = require('pusher-js'); // We usually use pusher, but if user want can set another way
+
+            this.window.Echo = new Echo(this.config.echoBroadcasterConfig);
+        }
+    }
+
     instanceApp() {
         new this.window.Vue({
             el: this.config.appSelector,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "",
   "main": "app.js",
   "scripts": {
@@ -18,8 +18,21 @@
     "highlight.js": "^11.11.1",
     "jquery": "^3.6.0",
     "kompo-googlemaps": "^1.0.14",
+    "laravel-echo": "^2.3.1",
     "libphonenumber-js": "^1.12.40",
+    "pusher-js": "^8.4.3",
     "typed.js": "^3.0.0",
+    "vue": "^2.7.16",
     "vue-qrcode-reader": "^3.1.0"
+  },
+  "devDependencies": {
+      "autoprefixer": "^10.4.7",
+      "axios": "^0.21",
+      "laravel-mix": "^6.0.49",
+      "lodash": "^4.17.19",
+      "postcss": "^8.4.14",
+      "sass": "^1.83.0",
+      "tailwindcss": "^3.1.6",
+      "vue-kompo": "^3.1.1"
   }
 }