From 03960b45f866b48d42ec0dfba2baf6ef1bd260ef Mon Sep 17 00:00:00 2001 From: Jack Westbrook Date: Mon, 4 Mar 2024 16:59:07 +0100 Subject: [PATCH] feat(angular): fix up plugin for dev and prod, inline for prod builds --- public/app/angular/partials.ts | 52 +++++++++++++++++----------------- vite.config.ts | 32 +++++++++------------ 2 files changed, 40 insertions(+), 44 deletions(-) diff --git a/public/app/angular/partials.ts b/public/app/angular/partials.ts index 523a32ef867..f1aefcae106 100644 --- a/public/app/angular/partials.ts +++ b/public/app/angular/partials.ts @@ -1,29 +1,29 @@ // TODO: Vite has no require.context support so we're importing them individually here. // See the vite.config.ts angularHtmlImport plugin for the code that compiles these templates. -import 'app/angular/panel/partials/query_editor_row.html'; -import 'app/angular/partials/http_settings_next.html'; -import 'app/angular/partials/tls_auth_settings.html'; -import 'app/features/admin/partials/admin_home.html'; -import 'app/features/admin/partials/edit_org.html'; -import 'app/features/admin/partials/stats.html'; -import 'app/features/admin/partials/styleguide.html'; -import 'app/features/alerting/partials/alert_tab.html'; -import 'app/features/annotations/partials/event_editor.html'; -import 'app/partials/confirm_modal.html'; -import 'app/partials/modal.html'; -import 'app/partials/reset_password.html'; -import 'app/partials/signup_invited.html'; -import 'app/plugins/panel/graph/axes_editor.html'; -import 'app/plugins/panel/graph/tab_display.html'; -import 'app/plugins/panel/graph/tab_legend.html'; -import 'app/plugins/panel/graph/tab_series_overrides.html'; -import 'app/plugins/panel/graph/tab_thresholds.html'; -import 'app/plugins/panel/graph/tab_time_regions.html'; -import 'app/plugins/panel/graph/thresholds_form.html'; -import 'app/plugins/panel/graph/time_regions_form.html'; -import 'app/plugins/panel/heatmap/partials/axes_editor.html'; -import 'app/plugins/panel/heatmap/partials/display_editor.html'; -import 'app/plugins/panel/table-old/column_options.html'; -import 'app/plugins/panel/table-old/editor.html'; -import 'app/plugins/panel/table-old/module.html'; +import 'app/angular/panel/partials/query_editor_row.html?inline'; +import 'app/angular/partials/http_settings_next.html?inline'; +import 'app/angular/partials/tls_auth_settings.html?inline'; +import 'app/features/admin/partials/admin_home.html?inline'; +import 'app/features/admin/partials/edit_org.html?inline'; +import 'app/features/admin/partials/stats.html?inline'; +import 'app/features/admin/partials/styleguide.html?inline'; +import 'app/features/alerting/partials/alert_tab.html?inline'; +import 'app/features/annotations/partials/event_editor.html?inline'; +import 'app/partials/confirm_modal.html?inline'; +import 'app/partials/modal.html?inline'; +import 'app/partials/reset_password.html?inline'; +import 'app/partials/signup_invited.html?inline'; +import 'app/plugins/panel/graph/axes_editor.html?inline'; +import 'app/plugins/panel/graph/tab_display.html?inline'; +import 'app/plugins/panel/graph/tab_legend.html?inline'; +import 'app/plugins/panel/graph/tab_series_overrides.html?inline'; +import 'app/plugins/panel/graph/tab_thresholds.html?inline'; +import 'app/plugins/panel/graph/tab_time_regions.html?inline'; +import 'app/plugins/panel/graph/thresholds_form.html?inline'; +import 'app/plugins/panel/graph/time_regions_form.html?inline'; +import 'app/plugins/panel/heatmap/partials/axes_editor.html?inline'; +import 'app/plugins/panel/heatmap/partials/display_editor.html?inline'; +import 'app/plugins/panel/table-old/column_options.html?inline'; +import 'app/plugins/panel/table-old/editor.html?inline'; +import 'app/plugins/panel/table-old/module.html?inline'; diff --git a/vite.config.ts b/vite.config.ts index d60e6a8555c..ed2653e27f6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -65,32 +65,28 @@ export default defineConfig({ }, }); -// This is a Vite plugin for handling angular templates. -// https://vitejs.dev/guide/api-plugin.html#simple-examples +/** +This is a Vite plugin for handling angular templates. +https://vitejs.dev/guide/api-plugin.html#simple-examples -// The webpack output from https://github.com/WearyMonkey/ngtemplate-loader looks like this: -// var code = "\n
\n\t
\n\t\t
\n"; -// Exports -// var _module_exports =code;; -// var path = 'public/app/features/annotations/partials/event_editor.html'; -// window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, _module_exports) }]); -// module.exports = path; - -// const htmlComponentFile = /\.html\?inline$/; +The webpack output from https://github.com/WearyMonkey/ngtemplate-loader looks like this: +var code = "\n
\n\t
\n\t\t
\n"; +Exports +var _module_exports =code;; +var path = 'public/app/features/annotations/partials/event_editor.html'; +window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, _module_exports) }]); +module.exports = path; + */ function angularHtmlImport() { - let isDevelopment = true; + const htmlComponentFile = /\.html\?inline$/; return { name: 'transform-angular-html', - configResolved(config) { - isDevelopment = config.command === 'serve'; - }, async transform(src, id) { - if (id.endsWith('.html')) { + if (htmlComponentFile.test(id)) { const idParts = id.split('/public/'); const path = idParts[idParts.length - 1]; - // const minifysrc = await minify(src, minifierOptions); - const html = isDevelopment ? JSON.stringify(src) : src; + const html = JSON.stringify(src); const result = `const path = 'public/${path}'; const htmlTemplate = ${html}; angular.module('ng').run(['$templateCache', c => { c.put(path, htmlTemplate) }]); export default path;`;