working on custom element

with the side aim of rebuilding layout to clean out old cruft. for the
custom element, shadow DOM is just not going to work because of an issue
with selections:

WICG/webcomponents#79

this will just not work at the moment. Seems like there's a workaround
for Chrome and Firefox will work, but Safari has no solution.

Nevertheless we can still build a custom element and there are some
useful features of that, plus we can take the opportunity to update
layout. If the selection story changes in the future we can revisit
shadow DOM.

.gitignore

@@ -5,6 +5,7 @@ dist
 dist2
 .vscode
 coverage
+build-element
 
 temp
 etc

esbuild-custom-element.mjs

@@ -0,0 +1,85 @@
+
+import * as esbuild from 'esbuild';
+import { promises as fs } from 'fs';
+import { minify } from 'html-minifier';
+import sass from 'sass';
+import cssnano from 'cssnano';
+import postcss from 'postcss';
+
+const html_minifier_options = {
+  removeComments: true,
+  collapseWhitespace: true,
+};
+
+const options = {
+  minify: false, // true,
+};
+
+/** html -> string, optionally minified */
+const html_plugin = {
+  name: 'html',
+  setup(build) {
+    build.onLoad({ filter: /\.html$/ }, async (args) => {
+      const text = await fs.readFile(args.path, 'utf8');
+      return {
+        contents: options.minify ? minify(text, html_minifier_options) : text,
+        loader: 'text',
+      };
+    });
+  },
+};
+
+/** sass -> string, optionally minified */
+const sass_plugin = {
+  name: 'sass',
+  setup(build) {
+    build.onLoad({ filter: /\.scss$/ }, async (args) => {
+
+      const result = await sass.compile(args.path, {});
+      const files = (result.loadedUrls || []).map(url => url.pathname);
+
+      let contents = result.css;
+      if (options.minify) {
+        const minified = await postcss([cssnano]).process(result.css, { from: undefined });
+        contents = minified.css;
+      }
+
+      return {
+        contents,
+        loader: 'text',
+        watchFiles: files,
+      };
+
+    });
+  },
+};
+
+const context = await esbuild.context({
+  entryPoints: ['treb-embed/custom-element/treb-spreadsheet-element.ts'],
+  bundle: true,
+  outfile: 'build-element/script/treb-spreadsheet.mjs',
+  minify: options.minify,
+  format: 'esm',
+  define: {
+    'process.env.WORKER_TEXT': `""`,
+    'process.env.NODE_ENV': `""`,
+    'process.env.BUILD_VERSION': `""`,
+    'process.env.BUILD_NAME': `""`,
+  },
+  plugins: [
+    html_plugin,
+    sass_plugin,
+
+    /*
+    sassPlugin({
+      type: "css-text",
+      minify: true,
+    }),
+    */
+
+  ],
+});
+
+await context.watch();
+
+// ...