Issue #3388305: SPA Mode

config/install/view_transitions.settings.yml

-page_transitions: 1
+page_transitions: spa

config/schema/view_transitions.schema.yml

@@ -4,5 +4,5 @@ view_transitions.settings:
   label: "View Transitions settings"
   mapping:
     page_transitions:
-      type: checkbox
+      type: string
       label: "Enable page level transitions"

js/spa.js

+// Work around https://github.com/bigskysoftware/htmx/issues/1384 to ensure the
+// correct attributes (especially classes) are applied during a routing event.
+document.body.addEventListener('htmx:afterSwap', function(evt) {
+    const parser = new DOMParser();
+    const parsedResponse = parser.parseFromString(evt.detail.xhr.response, "text/html");
+    const bodyAttributes = parsedResponse.getElementsByTagName('body')[0].attributes;
+    for (const attribute of bodyAttributes) {
+        evt.detail.target.setAttribute(attribute.name, attribute.value);
+    }
+});

src/Form/SettingsForm.php

@@ -29,9 +29,23 @@ final class SettingsForm extends ConfigFormBase {
    */
   public function buildForm(array $form, FormStateInterface $form_state): array {
     $form['page_transitions'] = [
-      '#type' => 'checkbox',
-      '#title' => $this->t('Enable page level transitions'),
+      '#type' => 'radios',
+      '#title' => $this->t('Full page view transitions'),
       '#default_value' => $this->config('view_transitions.settings')->get('page_transitions'),
+      '#options' => [
+        'off' => $this->t('Off'),
+        'spa' => $this->t('Single-Page Application Mode'),
+        'mpa' => $this->t('Multi-Page Application Mode (Experimental)'),
+      ],
+      'off' => [
+        '#description' => $this->t('Disable full page view transitions.'),
+      ],
+      'spa' => [
+        '#description' => $this->t('Enable full page view transitions using client-side routing.'),
+      ],
+      'mpa' => [
+        '#description' => $this->t('Enable full page view transitions using server-side routing. Currently behind a flag in Chromium browsers.'),
+      ],
     ];
     return parent::buildForm($form, $form_state);
   }

view_transitions.libraries.yml

@@ -2,9 +2,17 @@ root_transitions:
   css:
     theme:
       css/root-transitions.css: {}
-#   dependencies:
-#     - view_transitions/transitions_css
+spa:
+  js:
+    js/spa.js: {}
+  dependencies:
+    - view_transitions/htmx
 # transition_css:
 #   css:
 #     theme:
 #       https://unpkg.com/transition-style: { type: external, minified: true }
+htmx:
+  js:
+    https://unpkg.com/htmx.org@1.9.5: { type: external, minified: true }
+    https://unpkg.com/htmx.org/dist/ext/head-support.js:
+      { type: external, minified: true }

view_transitions.module

@@ -9,24 +9,38 @@
  * Implements hook_page_attachments().
  */
 function view_transitions_page_attachments(array &$page) {
-  $view_transition = [
-        '#tag' => 'meta',
-        '#attributes' => [
-          'name' => 'view-transition',
-          'content' => 'same-origin',
-        ],
-      ];
-  $page['#attached']['html_head'][] = [$view_transition, 'view-transition'];
+  // TODO - see if we can inject this
+  $page_transitions = \Drupal::config('view_transitions.settings')->get('page_transitions');
+  if ($page_transitions === 'mpa') {
+    $view_transition = [
+      '#tag' => 'meta',
+      '#attributes' => [
+        'name' => 'view-transition',
+        'content' => 'same-origin',
+      ],
+    ];
+    $page['#attached']['html_head'][] = [$view_transition, 'view-transition'];
+  }
 }
 
 /**
  * Implements hook_preprocess_html().
  */
 function view_transitions_preprocess_html(&$variables) {
-  $variables['#attached']['library'][] =  'view_transitions/root_transitions';
   // TODO - see if we can inject this
   $page_transitions = \Drupal::config('view_transitions.settings')->get('page_transitions');
-  if (!$page_transitions) {
+  if ($page_transitions === 'spa') {
+    $variables['#attached']['library'][] =  'view_transitions/spa';
+    $variables['attributes']['hx-boost'] = 'true';
+    $variables['attributes']['hx-ext'] = 'head-support';
+    $variables['attributes']['hx-swap'] = 'outerHTML transition:true';
+  }
+  elseif ($page_transitions === 'mpa') {
+    // We'll eventually need to add a library here, but for now... nothing.
+  }
+  else {
+    // Page level view transitions are explicitly set to off.
+    $variables['#attached']['library'][] =  'view_transitions/root_transitions';
     $variables['html_attributes']->addClass('view-transition-none');
   }
 }
\ No newline at end of file