public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build(vite): attempt to get angular partials loading with vite plugin

Browse Source
This commit is contained in:
Jack Westbrook
2025-03-03 09:07:53 +01:00
parent c8996b2dd4
commit ca490c9ba1
2 changed files with 57 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/angular/partials.ts
+34 -4
View File
@@ -1,4 +1,34 @@
let templates = (require as any).context('../', true, /\.html$/);
templates.keys().forEach((key: string) => {
templates(key);
});
// TODO: Vite has no require.context support yet. Attempt at a workaround below.
// let templates = (require as any).context('../', true, /\.html$/);
// templates.keys().forEach((key: string) => {
// templates(key);
// });
// See vite.config.ts angularHtmlImport function for the code that _should_ assist with 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';
vite.config.ts
+23 -1
View File
@@ -5,6 +5,28 @@ import { defineConfig } from 'vite';
const require = createRequire(import.meta.url);
// 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<div class=\"graph-annotation\">\n\t<div class=\"graph-annotation__header\">\n\t\t<div class=\"graph-annotation__user\" bs-tooltip=\"'Created by {{ctrl.login}}'\">\n\t\t</div>\n\n\t\t<div class=\"graph-annotation__title\">\n\t\t\t<span ng-if=\"!ctrl.event.id\">Add annotation</span>\n\t\t\t<span ng-if=\"ctrl.event.id\">Edit annotation</span>\n\t\t</div>\n\n <div class=\"graph-annotation__time\">{{ctrl.timeFormated}}</div>\n\t</div>\n\n\t<form name=\"ctrl.form\" class=\"graph-annotation__body text-center\">\n\t\t<div style=\"display: inline-block\">\n\t\t\t<div class=\"gf-form gf-form--v-stretch\">\n\t\t\t\t<span class=\"gf-form-label width-7\">Description</span>\n\t\t\t\t<textarea class=\"gf-form-input width-20\" rows=\"2\" ng-model=\"ctrl.event.text\" placeholder=\"Description\"></textarea>\n\t\t\t</div>\n\n\t\t\t<div class=\"gf-form\">\n\t\t\t\t<span class=\"gf-form-label width-7\">Tags</span>\n\t\t\t\t<bootstrap-tagsinput ng-model=\"ctrl.event.tags\" tagclass=\"label label-tag\" placeholder=\"add tags\">\n\t\t\t\t</bootstrap-tagsinput>\n\t\t\t</div>\n\n\t\t\t<div class=\"gf-form-button-row\">\n\t\t\t\t<button type=\"submit\" class=\"btn btn-primary\" ng-click=\"ctrl.save()\">Save</button>\n\t\t\t\t<button ng-if=\"ctrl.event.id && ctrl.canDelete()\" type=\"submit\" class=\"btn btn-danger\" ng-click=\"ctrl.delete()\">Delete</button>\n\t\t\t\t<a class=\"btn-text\" ng-click=\"ctrl.close();\">Cancel</a>\n\t\t\t</div>\n\t\t</div>\n\t</form>\n</div>\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() {
return {
name: 'transform-angular-html',
transform(src, id) {
if (/^.*\.html$/g.test(id)) {
const result = `let path = '${id}'; angular.module('ng').run(['$templateCache', c => { c.put(path, \`${src}\`) }]); export default path;`;
return { code: result, map: null };
}
},
};
}
// https://vitejs.dev/config/
export default defineConfig({
root: './public',
@@ -21,7 +43,7 @@ export default defineConfig({
host: '0.0.0.0',
port: 5173,
},
plugins: [react()],
plugins: [react(), angularHtmlImport()],
optimizeDeps: {
// fix for $ is not a function
exclude: ['jquery'],