Upgrade to laravel mix 6; also, add support for #html in template

Civi/Inlay/FormProcessor.php

 <?php
-
 namespace Civi\Inlay;
 
 use Civi\Inlay\Type as InlayType;
@@ -78,15 +77,21 @@ class FormProcessor extends InlayType {
         continue;
       }
       $m = [];
-      if (!preg_match('/^(\s*)(\.?)([a-zA-Z_-][a-zA-Z0-9_-]*)(?:~([a-zA-Z0-9_-]+))*$/', $line, $m)) {
+      // (!preg_match('/^(\s*)(\.?)([a-zA-Z_-][a-zA-Z0-9_-]*)(?:~([a-zA-Z0-9_-]+))*$/', $line, $m)) {
+      if (!preg_match('/^(\s*)(?:(\.?[a-zA-Z_-][a-zA-Z0-9_-]*)(?:~([a-zA-Z0-9_-]+))*|#html\s+(.*))$/', $line, $m)) {
         // Broken! @todo flag this somehow. Possibly abort the rebuild.
         continue;
       }
 
       $lineDepth = strlen($m[1]);
-      $isGroup = $m[2] === '.';
-      $name = $m[3];
-      $modifier = $m[4] ?? NULL;
+      $name = $m[2] ?? '';
+      $isGroup = FALSE;
+      if ($name && $name[0] === '.') {
+        $name = substr($name, 1);
+        $isGroup = TRUE;
+      }
+      $modifier = $m[3] ?? NULL;
+      $html = $m[4] ?? NULL;
       while ($lineDepth < $depth) {
         array_pop($stack);
         $ptr--;
@@ -116,7 +121,7 @@ class FormProcessor extends InlayType {
         $ptr++;
         $depth++;
       }
-      else {
+      elseif ($name) {
         // field.
         if (!isset($inputs[$name])) {
           continue;
@@ -126,6 +131,10 @@ class FormProcessor extends InlayType {
         // Export the field definitions, keyed by name.
         $init['fieldDefs'][$name] = $this->buildFieldDef($inputs[$name], $modifier);
       }
+      elseif ($html) {
+        $item = ['tag' => 'IfpHtml', 'content' => $html];
+        $stack[$ptr][] = $item;
+      }
       unset($item);
     }
 

ang/inlayfp/InlayFP.html

@@ -71,6 +71,7 @@
           <p>Add a field by typing its name on one line (or click the field above). Add a <em>group</em> by entering a line starting with a dot, like .group1</p>
           <p>Add items into the latest group by indenting them with a single space.</p>
           <p>Add <code>~radios</code> or <code>~checkboxes</code> or <code>~select</code> immediately after the field name render options in various ways</p>
+          <p>Add raw HTML code (tags must balance) by starting a line with <code>#html</code></p>
         </div>
       </div>
 

ang/inlayfp/InlayFP.js

@@ -36,6 +36,7 @@
     // The ts() and hs() functions help load strings for this module.
     var ts = $scope.ts = CRM.ts('inlayfp');
     var hs = $scope.hs = crmUiHelp({file: 'CRM/inlayfp/InlayFP'}); // See: templates/CRM/inlayfp/InlayFP.hlp
+    console.log('inlayfp2');
 
     $scope.inlayType = various.inlayTypes['Civi\\Inlay\\FormProcessor'];
     console.log({various}, $scope.inlayType);
@@ -85,6 +86,7 @@
      *  field1
      *  field2~select
      * field3
+     * #html <div></div>
      *
      */
     $scope.checkLayout = function checkLayout() {
@@ -93,7 +95,8 @@
 
       var items = inlay.config.layout.split(/[\r\n]+/);
       items.forEach(i => {
-        var m = i.match(/^( *)(\.?[a-zA-Z_-][a-zA-Z0-9_-]*)(?:~([a-zA-Z0-9_-]+))*$/);
+        console.log("checkLayout running", i);
+        var m = i.match(/^( *)(?:(\.?[a-zA-Z_-][a-zA-Z0-9_-]*)(?:~([a-zA-Z0-9_-]+))*|#html\s+(.*))$/);
         if (!m) {
           errors.push(`The line '${i}' is invalid.`);
           return;
@@ -111,7 +114,7 @@
           return;
         }
 
-        if (m[2].substr(0, 1) === '.') {
+        if (m[2] && m[2].substr(0, 1) === '.') {
           // Group modifiers.
           modifierText = '';
           if (m[3]) {
@@ -122,7 +125,7 @@
           html += `<div class="group group--${m[2].substr(1)}">${m[2]}${modifierText}<div class="items">`;
           stack.unshift('</div></div>');
         }
-        else {
+        else if (m[2]) {
           // Is a field.
           if (m[2] in $scope.fpInputs) {
             // Check for a modifier.
@@ -138,6 +141,9 @@
             errors.push(`Field ${m[2]} is not defined as an input in the selected Form Processor.`);
           }
         }
+        else if (m[4]) {
+          html += m[4];
+        }
       });
       html += stack.join('');
 

dist/inlayfp.js.LICENSE.txt

 /*!
- * Vue.js v2.6.12
- * (c) 2014-2020 Evan You
+ * Vue.js v2.6.14
+ * (c) 2014-2021 Evan You
  * Released under the MIT License.
  */

package.json

 {
-  "name": "src",
+  "name": "inlayfp",
   "version": "1.0.0",
   "description": "",
   "main": "inlayfp.js",
-  "scripts": {
-    "dev": "npm run development",
-    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch": "npm run development -- --watch",
-    "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "cross-env": "^7.0.2",
-    "laravel-mix": "^5.0.7",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^10.0.4",
-    "vue-template-compiler": "^2.6.12"
-  },
-  "dependencies": {
-    "vue": "^2.6.12"
+    "laravel-mix": "^6.0.43",
+    "sass": "^1.49.8",
+    "sass-loader": "^12.6.0",
+    "vue": "^2.0",
+    "vue-loader": "^15.9.7",
+    "vue-template-compiler": "^2.6.14"
   }
 }

src/FieldGroup.vue

@@ -12,12 +12,13 @@
 <script>
 
 import IfpField from './IfpField.vue';
+import IfpHtml from './IfpHtml.vue';
 import IfpHeader from './IfpHeader.vue';
 
 export default {
   name: 'FieldGroup',
   props: ['content', 'groupClass'],
-  components: {IfpField, IfpHeader},
+  components: {IfpField, IfpHeader, IfpHtml},
   data() {
     // content is an array of items that describe other components.
     // This allows nested FieldGroup items as well as various types of form
@@ -31,10 +32,16 @@ export default {
     getGroupClass: function (tag) {
       switch (tag){
         case 'FieldGroup':
+          console.log("getGroupClass group", tag);
           return 'ifp-group'
+        case 'IfpHtml':
+          console.log("getGroupClass html", tag);
+          return 'ifp-html';
         case 'IfpHeader':
+          console.log("getGroupClass header", tag);
           return 'ifp-header';
         default:
+          console.log("getGroupClass field", tag);
           return 'ifp-field';
       }
     }

src/IfpHtml.vue

+<template>
+  <div v-html="content"></div>
+</template>
+
+<script>
+
+export default {
+  // 'content' (String) form processor input name.
+  props: ['content'],
+  data() {
+    return {};
+  },
+  computed: { },
+  created() {
+    // this.$root.inlay.initData.fieldDefs[this.content].include = true;
+  }
+}
+
+</script>
+
+

webpack.mix.js

 let mix = require('laravel-mix');
 
-mix.js('src/inlayfp.js', 'dist/');
-
-// Full API
-// mix.js(src, output);
-// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
-// mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
-// mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
-// mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
-// mix.extract(vendorLibs);
-// mix.sass(src, output);
-// mix.less(src, output);
-// mix.stylus(src, output);
-// mix.postCss(src, output, [require('postcss-some-plugin')()]);
-// mix.browserSync('my-site.test');
-// mix.combine(files, destination);
-// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
-// mix.copy(from, to);
-// mix.copyDirectory(fromDir, toDir);
-// mix.minify(file);
-// mix.sourceMaps(); // Enable sourcemaps
-// mix.version(); // Enable versioning.
-// mix.disableNotifications();
-// mix.setPublicPath('path/to/public');
-// mix.setResourceRoot('prefix/for/resource/locators');
-// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
-// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
-// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
-// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
-// mix.when(condition, function (mix) {}) <-- Call function if condition is true.
-// mix.override(function (webpackConfig) {}) <-- Will be triggered once the webpack config object has been fully generated by Mix.
-// mix.dump(); <-- Dump the generated webpack config object to the console.
-// mix.extend(name, handler) <-- Extend Mix's API with your own components.
-// mix.options({
-//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
-//   globalVueStyles: file, // Variables file to be imported in every component.
-//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
-//   purifyCss: false, // Remove unused CSS selectors.
-//   terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
-//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
-// });
+mix.js('src/inlayfp.js', 'dist/')
+  .vue({version: 2})
+;

yarn-error.log

+Arguments: 
+  /home/rich/nodejs/bin/node /home/rich/nodejs/bin/yarn add laravel-mix vue=^2.0 sass sass-loader --dev
+
+PATH: 
+  /home/rich/.symfony/bin:/home/rich/.local/bin:/home/rich/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/rich/.antigen/bundles/zsh-users/zsh-syntax-highlighting:/home/rich/.antigen/bundles/mafredri/zsh-async:/home/rich/.antigen/bundles/marlonrichert/zsh-autocomplete-main:/home/rich/.antigen/bundles/marlonrichert/zsh-autocomplete-main/functions:/home/rich/.antigen/bundles/marlonrichert/zsh-edit-main:/home/rich/.antigen/bundles/marlonrichert/zsh-edit-main/functions:/home/rich/.bin-pdf:/home/rich/nodejs/bin:/home/rich/civicrm-buildkit/bin
+
+Yarn version: 
+  1.22.17
+
+Node version: 
+  14.17.3
+
+Platform: 
+  linux x64
+
+Trace: 
+  Error: https://registry.yarnpkg.com/vue=%5E2.0: Not found
+      at Request.params.callback [as _callback] (/home/rich/nodejs/lib/node_modules/yarn/lib/cli.js:67029:18)
+      at Request.self.callback (/home/rich/nodejs/lib/node_modules/yarn/lib/cli.js:140883:22)
+      at Request.emit (events.js:375:28)
+      at Request.<anonymous> (/home/rich/nodejs/lib/node_modules/yarn/lib/cli.js:141855:10)
+      at Request.emit (events.js:375:28)
+      at IncomingMessage.<anonymous> (/home/rich/nodejs/lib/node_modules/yarn/lib/cli.js:141777:12)
+      at Object.onceWrapper (events.js:481:28)
+      at IncomingMessage.emit (events.js:387:35)
+      at endReadableNT (internal/streams/readable.js:1317:12)
+      at processTicksAndRejections (internal/process/task_queues.js:82:21)
+
+npm manifest: 
+  {
+    "name": "inlayfp",
+    "version": "1.0.0",
+    "description": "",
+    "main": "inlayfp.js",
+    "keywords": [],
+    "author": "",
+    "license": "ISC"
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile