pdb_vue.module in Decoupled Blocks: Vue.js 8

Any procedural Vue PHP work lives here.

File

pdb_vue.module

<?php

/**
 * @file
 * Any procedural Vue PHP work lives here.
 */
use Drupal\Core\Asset\AttachedAssetsInterface;

/**
 * Add our component paths for Vue.
 *
 * @param object $components
 *   List of individual block components.
 */
function pdb_vue_component_info_alter($components) {

  // Read info files for each module.
  foreach ($components as $key => $component) {

    // Set component path if it hasn't been hardcoded.
    if ($component->info['presentation'] == 'vue' && empty($component->info['path'])) {
      $component->info['path'] = $component
        ->getPath();
    }
  }
}

/**
 * Implements hook_library_info_alter().
 */
function pdb_vue_library_info_alter(&$libraries, $extension) {
  $config = \Drupal::config('pdb_vue.settings');
  if ($extension == 'pdb') {

    /** @var \Drupal\pdb\ComponentDiscovery $discovery */
    $discovery = \Drupal::service('pdb.component_discovery');
    $components = $discovery
      ->getComponents();

    // Loop through each component to look for any added library dependencies.
    foreach ($components as $component) {
      $info = $component->info;
      if ($info['presentation'] != 'vue') {
        continue;
      }

      // Look in Vue blocks with a library added and attach it.
      if (!empty($info['libraries'])) {

        // Look into both header and footer locations.
        foreach ([
          'header',
          'footer',
        ] as $location) {

          // Get the key name of the vue component library we will alter.
          $key = $info['machine_name'] . '/' . $location;

          // If the component library is set, add in our library dependencies.
          if (array_key_exists($key, $libraries)) {
            $libraries[$key]['dependencies'] = array_merge($libraries[$key]['dependencies'], $info['libraries']);
          }
        }
      }

      // Replace Vue library if using version 3.
      if (isset($config) && $config
        ->get('version') == 'vue3') {

        // Look into both header and footer locations.
        foreach ([
          'header',
          'footer',
        ] as $location) {

          // Get the key name of the vue component library we will alter.
          $key = $info['machine_name'] . '/' . $location;

          // If the component library is set, add in our library dependencies.
          if (array_key_exists($key, $libraries)) {
            foreach ($libraries[$key]['dependencies'] as $dep_key => $deb_lib) {

              // Exit if already a vue3 library.
              if (preg_match('/^pdb_vue\\/vue3/', $deb_lib)) {
                continue;
              }
              $libraries[$key]['dependencies'][$dep_key] = preg_replace('/^pdb_vue\\/vue/', '${0}3', $deb_lib);
            }

            // Vue 3 needs the "create" library fired first to create an app.
            if (isset($config) && $config
              ->get('use_spa') && isset($info['component']) && $info['component']) {
              $libraries[$key]['dependencies'][] = "pdb_vue/vue3.spa-create";
            }
          }
        }
      }
    }

    // // Use the development version of vue.js or vuex.js if set.
    // if (isset($config) && $config->get('development_mode')) {
    //   // Look into both header and footer locations.
    //   foreach (['header', 'footer'] as $location) {
    //     // Get the key name of the vue component library we will alter.
    //     $key = $info['machine_name'] . '/' . $location;
    //     // If the component library is set, replace the libraries with the
    //     // dev version.
    //     if (array_key_exists($key, $libraries)) {
    //       foreach ($libraries[$key]['dependencies'] as $dep_key => $deb_lib) {
    //         if ($deb_lib == 'pdb_vue/vue') {
    //           $libraries[$key]['dependencies'][$dep_key] = 'pdb_vue/vue.dev';
    //         }
    //         if ($deb_lib == 'pdb_vue/vue3') {
    //           $libraries[$key]['dependencies'][$dep_key] = 'pdb_vue/vue3.dev';
    //         }
    //         if ($deb_lib == 'pdb_vue/vue.vuex') {
    //           $libraries[$key]['dependencies'][$dep_key] = 'pdb_vue/vue.vuex.dev';
    //         }
    //         if ($deb_lib == 'pdb_vue/vue3.vuex') {
    //           $libraries[$key]['dependencies'][$dep_key] = 'pdb_vue/vue3.vuex.dev';
    //         }
    //       }
    //     }
    //   }
    // }
  }

  // Only look to progressively decoupled vue libraries.
  if ($extension == 'pdb_vue') {

    // Use the development version of vue.js or vuex.js if set.
    $prod_suffix = $config
      ->get('version') == 'vue3' ? '.prod.js' : '.min.js';
    if (isset($config) && $config
      ->get('development_mode')) {
      foreach ($libraries as $name => $params) {
        $key = key($params['js']);
        if (strpos($key, $prod_suffix) !== FALSE) {
          $dev = str_replace($prod_suffix, '.js', $key);
          $libraries[$name]['js'][$dev] = $libraries[$name]['js'][$key];
          unset($libraries[$name]['js'][$key]);
        }
      }
    }
  }
}

/**
 * Implements hook_js_alter().
 */
function pdb_vue_js_alter(&$javascript, AttachedAssetsInterface $assets) {

  // Search for the spa-init.js file and move its weight to the bottom. This is
  // needed so that it renders all components that come before it.
  $spa_init = preg_grep("/spa-init/", array_keys($javascript));
  if ($spa_init) {

    // Get the weight of the last javascript file.
    end($javascript);
    $last_key = key($javascript);
    $last_weight = $javascript[$last_key]['weight'];

    // Get the key "filename" of the init javascript file.
    $filename = array_shift($spa_init);
    $javascript[$filename]['weight'] = $last_weight + 0.25;
  }
}

Functions

Name	Description
pdb_vue_component_info_alter	Add our component paths for Vue.
pdb_vue_js_alter	Implements hook_js_alter().
pdb_vue_library_info_alter	Implements hook_library_info_alter().