Browse Source

feat(core): Implement robust fallback for local JS libraries

This commit introduces a resilient fallback mechanism for all third-party JavaScript libraries, ensuring the application remains functional even if local files are unavailable.

Previously, the application would fail to load if any of the JavaScript files in the `/vendor` directory were missing or failed to load. This change implements an "offline-first, online-fallback" strategy.

The implementation checks for the existence of each library's global object (e.g., `window.p5`) immediately after attempting to load the local script. If the object is not found, indicating a load failure, a new `<script>` tag is dynamically and asynchronously created and appended to the document's head. This new script then loads the library from its public CDN.

This approach was chosen after evaluating two other methods:
1.  The `<script onerror="...">` attribute was found to be unreliable, as local development servers often return a 404 HTML page (with a `200 OK` status and `text/html` MIME type) instead of a network error, which does not trigger the `onerror` event.
2.  Using `document.write()` was functional but generated numerous parser-blocking warnings in the browser console and is considered a poor practice for performance.

The final implementation is non-blocking and follows modern web development best practices, making the application significantly more resilient for both development and production environments.
refactor/modularize
RUSHIL AMBARISH KADU 6 months ago
parent
commit
4ed421b13f
  1. 59
      steps/index.html
  2. 2
      steps/src/parser.worker.js
  3. 1
      steps/vendor/ag-grid-community.min.js
  4. 14
      steps/vendor/chart.min.js
  5. 8
      steps/vendor/clarinet.min.js
  6. 5
      steps/vendor/oboe.min.js
  7. 121501
      steps/vendor/p5.js
  8. 83
      steps/vendor/tailwind-cdn.js

59
steps/index.html

@ -6,16 +6,63 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Radar and Video Visualizer - Timestamp Synchronized</title>
<link rel="icon" type="image/png" sizes="32x32" href="favicon.png" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<script src="./vendor/tailwind-cdn.js"></script>
<script>
!window.tailwind && (function() {
var s = document.createElement('script');
s.src = 'https://cdn.tailwindcss.com';
document.head.appendChild(s);
})();
</script>
<!-- <script src="https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js"></script> -->
<script src="./vendor/oboe.min.js"></script>
<script>
!window.oboe && (function() {
var s = document.createElement('script');
s.src = 'https://unpkg.com/oboe@2.1.5/dist/oboe-browser.min.js';
document.head.appendChild(s);
})();
</script>
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<script src="./vendor/chart.min.js"></script>
<script>
!window.Chart && (function() {
var s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/npm/chart.js';
document.head.appendChild(s);
})();
</script>
<!-- <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script> -->
<script src="./vendor/ag-grid-community.min.js"></script>
<script>
!window.agGrid && (function() {
var s = document.createElement('script');
s.src = 'https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js';
document.head.appendChild(s);
})();
</script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script> -->
<script src="./vendor/p5.js"></script>
<script>
!window.p5 && (function() {
var s = document.createElement('script');
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js';
document.head.appendChild(s);
})();
</script>
<script>
tailwind.config = {
darkMode: "class",
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link

2
steps/src/parser.worker.js

@ -1,7 +1,7 @@
// In src/parser.worker.js
// Import the lightweight and worker-safe Clarinet library
importScripts('https://cdn.jsdelivr.net/npm/clarinet@0.12.5/clarinet.min.js');
importScripts('../vendor/clarinet.min.js'); //importing the clarinet.min.js (ver. 0.12.5) from the vendor folder.
self.onmessage = async function(event) {
const file = event.data.file;

1
steps/vendor/ag-grid-community.min.js
File diff suppressed because it is too large
View File

14
steps/vendor/chart.min.js
File diff suppressed because it is too large
View File

8
steps/vendor/clarinet.min.js
File diff suppressed because it is too large
View File

5
steps/vendor/oboe.min.js
File diff suppressed because it is too large
View File

121501
steps/vendor/p5.js
File diff suppressed because it is too large
View File

83
steps/vendor/tailwind-cdn.js
File diff suppressed because it is too large
View File

Loading…
Cancel
Save