Skip to content

Commit 82c2e73

Browse files
danivekdanivek
committed
refactor: replace CDN dependencies with npm packages
1 parent 505a00a commit 82c2e73

7 files changed

Lines changed: 200 additions & 75 deletions

File tree

‎package-lock.json‎

Lines changed: 131 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,14 @@
2525
"terser": "^5.39.0",
2626
"vite": "^6.1.1",
2727
"vite-plugin-pwa": "^1.2.0"
28+
},
29+
"dependencies": {
30+
"@jsonquerylang/jsonquery": "^5.1.1",
31+
"fast-json-patch": "^3.1.1",
32+
"jmespath": "^0.16.0",
33+
"jsonpath-plus": "^10.4.0",
34+
"jsonrepair": "^3.13.3",
35+
"lucide": "^1.7.0",
36+
"monaco-editor": "^0.55.1"
2837
}
2938
}

‎src/index.html‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@
3636
})();
3737
</script>
3838
<link rel="stylesheet" href="css/styles.css" />
39-
<!-- Monaco Editor from CDN -->
40-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs/editor/editor.main.css" />
4139
</head>
4240

4341
<body>
@@ -383,25 +381,6 @@ <h2>CSV Options</h2>
383381
</div>
384382
</div>
385383

386-
<!-- JSON Repair Library -->
387-
<script src="https://cdn.jsdelivr.net/npm/jsonrepair@3.8.0/lib/umd/jsonrepair.min.js"></script>
388-
389-
<!-- Lucide Icons -->
390-
<script src="https://unpkg.com/lucide@latest"></script>
391-
392-
<!-- Monaco Editor Loader -->
393-
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs/loader.js"></script>
394-
395-
<!-- Query Libraries -->
396-
<script src="https://cdn.jsdelivr.net/npm/jmespath@0.16.0/jmespath.min.js"></script>
397-
<script src="https://cdn.jsdelivr.net/npm/fast-json-patch@3.1.1/dist/fast-json-patch.min.js"></script>
398-
<script type="module">
399-
import { jsonquery } from 'https://cdn.jsdelivr.net/npm/@jsonquerylang/jsonquery@5.1.1/lib/jsonquery.min.js';
400-
import { JSONPath } from 'https://cdn.jsdelivr.net/npm/jsonpath-plus@10.4.0/dist/index-browser-esm.min.js';
401-
window.jsonquery = jsonquery;
402-
window.JSONPath = { JSONPath };
403-
</script>
404-
405384
<!-- App Scripts -->
406385
<script type="module" src="js/main.js"></script>
407386
</body>

‎src/js/editor/textEditor.js‎

Lines changed: 23 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -7,43 +7,30 @@ const TextEditor = {
77
* Load Monaco Editor Library
88
*/
99
async load() {
10-
return new Promise((resolve) => {
11-
require.config({
12-
paths: {
13-
vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs',
14-
},
15-
});
16-
17-
require(['vs/editor/editor.main'], () => {
18-
// Define JSON theme
19-
monaco.editor.defineTheme('json-light', {
20-
base: 'vs',
21-
inherit: true,
22-
rules: [],
23-
colors: {
24-
'editor.background': '#ffffff',
25-
'editorStickyScroll.background': '#eaeaea',
26-
'editorStickyScrollHover.background': '#e0e0e0',
27-
'editorStickyScroll.shadow': '#d0d0d0',
28-
'editorStickyScroll.border': '#cccccc',
29-
},
30-
});
31-
32-
monaco.editor.defineTheme('json-dark', {
33-
base: 'vs-dark',
34-
inherit: true,
35-
rules: [],
36-
colors: {
37-
'editor.background': '#1e1e1e',
38-
'editorStickyScroll.background': '#2d2d30',
39-
'editorStickyScrollHover.background': '#3a3a3c',
40-
'editorStickyScroll.shadow': '#000000',
41-
'editorStickyScroll.border': '#454545',
42-
},
43-
});
10+
monaco.editor.defineTheme('json-light', {
11+
base: 'vs',
12+
inherit: true,
13+
rules: [],
14+
colors: {
15+
'editor.background': '#ffffff',
16+
'editorStickyScroll.background': '#eaeaea',
17+
'editorStickyScrollHover.background': '#e0e0e0',
18+
'editorStickyScroll.shadow': '#d0d0d0',
19+
'editorStickyScroll.border': '#cccccc',
20+
},
21+
});
4422

45-
resolve();
46-
});
23+
monaco.editor.defineTheme('json-dark', {
24+
base: 'vs-dark',
25+
inherit: true,
26+
rules: [],
27+
colors: {
28+
'editor.background': '#1e1e1e',
29+
'editorStickyScroll.background': '#2d2d30',
30+
'editorStickyScrollHover.background': '#3a3a3c',
31+
'editorStickyScroll.shadow': '#000000',
32+
'editorStickyScroll.border': '#454545',
33+
},
4734
});
4835
},
4936

‎src/js/main.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,34 @@
11
// Single entry point — imports all modules in dependency order.
22
// Each module registers itself on window.* so they can reference each other.
3+
4+
// External libraries — replaces CDN script tags
5+
6+
// Monaco: use ESM entry point to tree-shake — only editor core + JSON language
7+
// (avoids bundling TS/HTML/CSS workers which add ~9MB)
8+
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
9+
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
10+
self.MonacoEnvironment = {
11+
getWorker(_, label) {
12+
if (label === 'json') return new JsonWorker();
13+
return new EditorWorker();
14+
},
15+
};
16+
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
17+
import 'monaco-editor/esm/vs/language/json/monaco.contribution';
18+
import { createIcons, icons } from 'lucide';
19+
import { jsonrepair } from 'jsonrepair';
20+
import jmespath from 'jmespath';
21+
import { JSONPath } from 'jsonpath-plus';
22+
import { jsonquery } from '@jsonquerylang/jsonquery';
23+
import * as jsonpatch from 'fast-json-patch';
24+
25+
window.monaco = monaco;
26+
window.lucide = { createIcons: (opts = {}) => createIcons({ icons, ...opts }) };
27+
window.JSONRepair = { jsonrepair };
28+
window.jmespath = jmespath;
29+
window.JSONPath = { JSONPath };
30+
window.jsonquery = jsonquery;
31+
window.jsonpatch = jsonpatch;
332
import './utils/storageUtils.js';
433
import './utils/domUtils.js';
534
import './utils/jsonUtils.js';

‎src/sw.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,9 @@
11
import { clientsClaim } from 'workbox-core';
22
import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
3-
import { registerRoute } from 'workbox-routing';
4-
import { CacheFirst } from 'workbox-strategies';
5-
import { ExpirationPlugin } from 'workbox-expiration';
6-
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
73

84
clientsClaim();
95
self.skipWaiting();
106

117
// Precache all build assets (injected by vite-plugin-pwa at build time)
128
precacheAndRoute(self.__WB_MANIFEST);
139
cleanupOutdatedCaches();
14-
15-
// Cache CDN scripts (Monaco, jsonrepair, query libraries, lucide) for 30 days
16-
registerRoute(
17-
({ url }) =>
18-
url.hostname === 'cdn.jsdelivr.net' || url.hostname === 'unpkg.com',
19-
new CacheFirst({
20-
cacheName: 'cdn-cache',
21-
plugins: [
22-
new ExpirationPlugin({ maxEntries: 30, maxAgeSeconds: 60 * 60 * 24 * 30 }),
23-
new CacheableResponsePlugin({ statuses: [0, 200] }),
24-
],
25-
}),
26-
);

0 commit comments

Comments
 (0)