separate html code into their own modules

web-dev-server.config.mjs

@@ -2,11 +2,27 @@
 import { fromRollup } from '@web/dev-server-rollup';
 // eslint-disable-next-line node/no-unpublished-import
 import rollupCommonjs from '@rollup/plugin-commonjs';
+// eslint-disable-next-line node/no-unpublished-import
+import rollupHtml from 'rollup-plugin-html';
 
 const commonjs = fromRollup(rollupCommonjs);
+const html = fromRollup(rollupHtml);
 
 export default {
+  mimeTypes: {
+    // serve imported html files as js
+    'src/editor/panels/*.html': 'js',
+    'src/editor/templates/*.html': 'js',
+    'src/editor/dialogs/*.html': 'js',
+    'src/editor/extensions/*/*.html': 'js'
+  },
   plugins: [
+    html({ include: [
+      'src/editor/panels/*.html',
+      'src/editor/templates/*.html',
+      'src/editor/dialogs/*.html',
+      'src/editor/extensions/*/*.html'
+    ] }),
     commonjs({
       // explicitely list packages to increase performance
       include: [