DRUP-810: Load and parse specs on client side

The field formatter now puts the file URL and file extension into drupalSettings instead of actual file.  The smartdos_integration js file is now responsible for pulling file from server and parsing into javascript to save into session storage for SmartDocs Angular app to retrieve.

Author: cnovak

apigee_api_catalog.libraries.yml

@@ -24,3 +24,13 @@ apigee_api_catalog.smartdocs_integration:
   dependencies:
     - core/jquery
     - core/drupal
+
+# Library to parse OpenAPI YAML files to pass to SmartDocs Angular app.
+apigee_api_catalog.js_yaml:
+  version: 3.13.1
+  license:
+    name: MIT
+    url: https://github.com/nodeca/js-yaml/blob/master/LICENSE
+    gpl-compatible: true
+  js:
+    https://cdn.jsdelivr.net/npm/[email protected]/dist/js-yaml.min.js: { type: external, minified: true }

js/smartdocs_integration.js

@@ -15,11 +15,25 @@
         if (drupalSettings.smartdocsFieldFormatter.hasOwnProperty(fieldName)) {
           const field = drupalSettings.smartdocsFieldFormatter[fieldName];
           for (let fieldDelta = 0; fieldDelta < field.openApiFiles.length; fieldDelta++) {
-             specMap[field.entityId] = field.openApiFiles[fieldDelta];
+            // Each openApiFile var has the spec url and file extension.
+            const fileUrl = field.openApiFiles[fieldDelta].fileUrl;
+            const fileExtention = field.openApiFiles[fieldDelta].fileExtension;
+            // Get the OpenAPI spec file from the server.
+            $.get(fileUrl, function(data, status) {
+              if (fileExtention === 'json') {
+                // JSON files do not need any conversion.
+                specMap[field.entityId] = data;
+              }
+              else {
+                // YAML files need to be parsed into javascript object.
+                specMap[field.entityId]  = jsyaml.load(data);
+             }
+              // Store the spec into session storage.
+              sessionStorage.setItem('specs', JSON.stringify(specMap));
+            });
           }
         }
       }
-      sessionStorage.setItem('specs', JSON.stringify(specMap));
     }
   };
 

src/Plugin/Field/FieldFormatter/SmartDocsFormatter.php

@@ -122,41 +122,17 @@ public function viewElements(FieldItemListInterface $items, $langcode) {
 
     /** @var \Drupal\file\Entity\File $file */
     foreach ($this->getEntitiesToView($items, $langcode) as $delta => $file) {
-      $file_extension = pathinfo($file->getFilename(), PATHINFO_EXTENSION);
-      $file_data = file_get_contents($file->getFileUri());
-
-      // Decode the file to pass to the javascript file.
-      if ($file_extension == 'json') {
-        $spec = Json::decode($file_data);
-
-        if (!$spec) {
-          $this->loggerFactory->error('Error parsing JSON file ' . $file->getFilename());
-          $this->messenger()->addError($this->t('Error parsing JSON file %filename.', [
-            '%filename' => $file->getFilename(),
-          ]));
-          continue;
-        }
-      }
-      else {
-        try {
-          $spec = Yaml::decode($file_data);
-        }
-        catch (InvalidDataTypeException $e) {
-          $this->loggerFactory->error('Error parsing Yaml file ' . $file->getFilename() . ': ' . $e->getMessage());
-          $this->messenger()->addError($this->t('Error parsing Yaml file %filename: %error', [
-            '%filename' => $file->getFilename(),
-            '%error' => $e->getMessage(),
-          ]));
-          continue;
-        }
-      }
-      $openapi_files[] = $spec;
+      $openapi_files[] = [
+        'fileUrl' => $file->url(),
+        'fileExtension' => pathinfo($file->getFilename(), PATHINFO_EXTENSION),
+      ];
     }
 
     $elements['#attached'] = [
       'library' => [
         'apigee_api_catalog/apigee_api_catalog.smartdocs',
         'apigee_api_catalog/apigee_api_catalog.smartdocs_integration',
+        'apigee_api_catalog/apigee_api_catalog.js_yaml',
       ],
     ];