Add CellOutputViewer for SandboxOutputs (#686)

* Initial commit

* Optimizations

* Optimize notebookOutputViewer bundle size by lazy loading transforms

* Update package-lock.json

* More optimizations

* Updates

* Fix unit test and other updates

* Address feedback

* Update package-lock.json

* Update test snapshots

* Fix build

* Reduce cellOutputViewer bundle size

* Renaming

webpack.config.js

@@ -2,6 +2,8 @@ require("dotenv/config");
 const path = require("path");
 const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
+const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
 const { EnvironmentPlugin } = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
@@ -149,6 +151,11 @@ module.exports = function (env = {}, argv = {}) {
       template: "src/Controls/Heatmap/Heatmap.html",
       chunks: ["heatmap"],
     }),
+    new HtmlWebpackPlugin({
+      filename: "cellOutputViewer.html",
+      template: "src/CellOutputViewer/cellOutputViewer.html",
+      chunks: ["cellOutputViewer"],
+    }),
     new HtmlWebpackPlugin({
       filename: "notebookViewer.html",
       template: "src/NotebookViewer/notebookViewer.html",
@@ -169,6 +176,10 @@ module.exports = function (env = {}, argv = {}) {
       template: "src/SelfServe/selfServe.html",
       chunks: ["selfServe"],
     }),
+    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/cellOutputViewer/]),
+    new HTMLInlineCSSWebpackPlugin({
+      filter: (fileName) => fileName.includes("cellOutputViewer"),
+    }),
     new MonacoWebpackPlugin(),
     new CopyWebpackPlugin({
       patterns: [{ from: "DataExplorer.nuspec" }, { from: "web.config" }, { from: "quickstart/*.zip" }],
@@ -190,6 +201,7 @@ module.exports = function (env = {}, argv = {}) {
       testExplorer: "./test/testExplorer/TestExplorer.ts",
       heatmap: "./src/Controls/Heatmap/Heatmap.ts",
       terminal: "./src/Terminal/index.ts",
+      cellOutputViewer: "./src/CellOutputViewer/CellOutputViewer.tsx",
       notebookViewer: "./src/NotebookViewer/NotebookViewer.tsx",
       galleryViewer: "./src/GalleryViewer/GalleryViewer.tsx",
       selfServe: "./src/SelfServe/SelfServe.tsx",
@@ -233,6 +245,7 @@ module.exports = function (env = {}, argv = {}) {
     watchOptions: isCI ? { poll: 24 * 60 * 60 * 1000 } : {},
     devServer: {
       hot: false,
+      disableHostCheck: true,
       inline: !isCI,
       liveReload: !isCI,
       https: true,