Elevate Your Code: Importing JavaScript Strings as Modules with Ease (Angular/React)

Introduction

Picture this: you’re knee-deep in a project crafting a framework that whips up user interfaces on the fly, fueled by a nifty configuration object. Life’s good, right?

So I was working on a similar project where I’m building a framework to cook up user interfaces dynamically based on a configuration object. It’s all smooth sailing until the client drops a bombshell: alongside the configuration, they might also serve up some JavaScript code as a string in the API response. This code holds the keys to how the UI dances, and it won’t play nice with our Angular component game plan. Time to roll up our sleeves and find a fix!

Solution Overview:

To rescue our Angular components from the JavaScript chaos, I stumbled upon a gem of a solution using Blob URLs. This nifty trick allows us to dynamically import and execute JavaScript code received from API responses, giving our dynamic UIs the kick they need.

Step 1: Receive JavaScript Code from API:

Assuming you have a service in your application to fetch data from an API, receive the JavaScript code as a string in the response.

The examples are based on Angular application, but will work in other TS based frameworks as well:

// Your API service method to fetch data
getDataFromApi(): Observable<any> {
  return this.http.get<any>('api/endpoint');
}        

Step 2: Create Blob URL and Import Module:

In your component, create a Blob containing the received JavaScript code, generate a Blob URL, and then use dynamic imports to load the module from this URL.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-script-loader',
  templateUrl: './script-loader.component.html',
  styleUrls: ['./script-loader.component.css']
})
export class ScriptLoaderComponent implements OnInit {

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    // Step 1: Receive JavaScript code from API
    this.apiService.getDataFromApi().subscribe(apiResponse => {
      // Step 2: Create Blob URL and Import Module
      const blob = new Blob([apiResponse], { type:    'application/javascript' });
      const scriptURL = URL.createObjectURL(blob);
      import(scriptURL).then(module => {
        // Access the module exports and execute as needed
        if (module) {
          // YOUR MODULE SPECIFIC CODE
        } 
      }).catch(error => {
        console.error('Error loading script module:', error);
      });
    });
  }
}        

Things to consider:

1. Only the classes, functions etc. that are exported in the JS code can be used in the module that is imported . If it’s not exported it won’t be available for use.
2. It could be possible to have issues with the import statement itself because of using it within an app bundled by Webpack. Webpack reinterprets the standard ES import statement.

The solution to the same would be to tell Webpack to not reinterpret the ES dynamic import, by adding some annotation to the import statement.

So, our import statement will be updated as follows:

import(/*webpackIgnore: true*/ scriptURL).then(module => {
   // YOUR MODULE SPECIFIC CODE
  }).catch(error => {
    console.error('Error loading script module:', error);
  });        

Conclusion:

With this sleek Blob URL solution in our toolkit, we can effortlessly inject JavaScript code from API responses into our Angular components. This approach provides flexibility and extensibility to integrate external functionality seamlessly. No more UI event headaches — just smooth sailing and flexible frameworks!