Initial attempt to package Main.tsx

.eslintignore

@@ -145,4 +145,12 @@ src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
 __mocks__/monaco-editor.ts
 src/Explorer/Tree/ResourceTree.tsx
-src/Utils/PriorityBasedExecutionUtils.ts
+src/Utils/PriorityBasedExecutionUtils.ts
+
+src\CellOutputViewer\CellOutputViewer.tsx
+src\GalleryViewer\GalleryViewer.tsx
+src\HostedExplorer.tsx
+src\Index.tsx
+src\Main.tsx
+src\NotebookViewer\NotebookViewer.tsx
+src\SelfServe\SelfServe.tsx

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
         message: "Do not use JSON.stringify(error). It will print '{}'",
       },
     ],
+    "react/no-deprecated": "off",
   },
   settings: {
     react: {

.gitignore

@@ -16,4 +16,5 @@ Contracts/*
 .env
 failure.png
 screenshots/*
-GettingStarted-ignore*.ipynb
+GettingStarted-ignore*.ipynb
+cosmosexplorer-*.tgz

.npmignore

@@ -0,0 +1,32 @@
+__mocks__/
+.env.example
+.eslintignore
+.eslintrc.js
+.github
+.github/
+.gitignore
+.vs/
+.vscode/
+azure-pipelines.cg.yml
+babel.config.js
+canvas/
+configs/
+copyToConsumers.js
+DataExplorer.nuspec
+docs/
+fonts/
+jest-playwright.config.js
+jest.config*.js
+mockModule.js
+node_modules/
+preview/
+quickstart/
+sampleData/
+strict-null-checks/
+svgTransform.js
+test/
+tsconfig.*.json
+tsconfig.json
+utils/
+web.config
+webpack.*.js

package.json

@@ -1,8 +1,9 @@
 {
-  "name": "cosmos-explorer",
+  "name": "cosmosexplorer",
   "version": "1.0.0",
   "description": "Cosmos Explorer",
-  "main": "index.js",
+  "main": "dist/cosmosexplorer.js",
+  "types": "dist/cosmosexplorer.d.ts",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "4.0.0",
@@ -30,6 +31,7 @@
     "@nteract/logos": "1.0.0",
     "@nteract/markdown": "4.6.0",
     "@nteract/monaco-editor": "3.2.2",
+    "@nteract/myths": "0.2.13",
     "@nteract/octicons": "2.0.0",
     "@nteract/outputs": "3.0.9",
     "@nteract/presentational-components": "3.0.7",
@@ -82,11 +84,9 @@
     "plotly.js-cartesian-dist-min": "1.52.3",
     "post-robot": "10.0.42",
     "q": "1.5.1",
-    "react": "16.14.0",
     "react-animate-height": "2.0.8",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.0",
-    "react-dom": "16.14.0",
     "react-hotkeys": "2.0.0",
     "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
@@ -172,6 +172,8 @@
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
     "raw-loader": "0.5.1",
+    "react": "^16",
+    "react-dom": "^16",
     "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
@@ -179,6 +181,7 @@
     "ts-loader": "9.2.4",
     "typedoc": "0.21.5",
     "typescript": "4.3.5",
+    "types-webpack-bundler": "1.0.2",
     "url-loader": "4.1.1",
     "wait-on": "4.0.2",
     "webpack": "5.88.2",
@@ -186,11 +189,17 @@
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1"
   },
+  "peerDependencies": {
+    "react": "^16",
+    "react-dom": "^16"
+  },
   "scripts": {
+    "prepublish": "rimraf dist && npm run build",
+    "clean": "rimraf dist cosmosexplorer*.tgz",
     "start": "webpack serve --mode development",
     "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
     "build:dataExplorer:ci": "npm run build:ci",
-    "build": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToConsumers",
+    "build": "npm run format:check && npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToConsumers",
     "build:ci": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:fast",
     "pack:prod": "webpack  --mode production",
     "pack:fast": "webpack  --mode development --progress",
@@ -212,7 +221,10 @@
     "strict:find": "node ./strict-null-checks/find.js",
     "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
-    "generateARMClients": "npx ts-node utils/armClientGenerator/generator.ts"
+    "generateARMClients": "npx ts-node utils/armClientGenerator/generator.ts",
+    "generateTypes": "tsc -p tsconfig.types.json",
+    "pack:viz": "webpack --mode production --analyze",
+    "pack:library": "npm run clean && webpack --mode production --config webpack.library.config.js && npm pack"
   },
   "repository": {
     "type": "git",
@@ -233,4 +245,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}

src/Explorer/Notebook/NotebookRenderer/markdown-cell.tsx

@@ -10,7 +10,7 @@ import { defineConfigOption } from "@nteract/mythic-configuration";
 import { Source as BareSource } from "@nteract/presentational-components";
 import Editor, { EditorSlots } from "@nteract/stateful-components/lib/inputs/editor";
 import React from "react";
-import { ReactMarkdownProps } from "react-markdown";
+// import { ReactMarkdownProps } from "react-markdown";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import styled from "styled-components";
@@ -37,7 +37,7 @@ interface StateProps {
   isCellFocused: boolean;
   isEditorFocused: boolean;
   cell?: ImmutableCell;
-  markdownOptions: ReactMarkdownProps;
+  markdownOptions: any; // ReactMarkdownProps;
 }
 
 interface DispatchProps {
@@ -48,7 +48,7 @@ interface DispatchProps {
 }
 
 // Add missing style to make the editor show https://github.com/nteract/nteract/commit/7fa580011578350e56deac81359f6294fdfcad20#diff-07829a1908e4bf98d4420f868a1c6f890b95d77297b9805c9590d2dba11e80ce
-export const Source = styled(BareSource)`
+const Source = styled(BareSource)`
   width: 100%;
   width: -webkit-fill-available;
   width: -moz-available;

src/Main.tsx

@@ -7,7 +7,6 @@ import { userContext } from "UserContext";
 import "bootstrap/dist/css/bootstrap.css";
 import { useCarousel } from "hooks/useCarousel";
 import React, { useState } from "react";
-import ReactDOM from "react-dom";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
 import "../externals/jquery-ui.structure.min.css";
@@ -61,7 +60,7 @@ import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 
 initializeIcons();
 
-const App: React.FunctionComponent = () => {
+export const App: React.FunctionComponent = () => {
   const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
   const isCarouselOpen = useCarousel((state) => state.shouldOpen);
   const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
@@ -137,8 +136,9 @@ const App: React.FunctionComponent = () => {
   );
 };
 
-const mainElement = document.getElementById("Main");
-ReactDOM.render(<App />, mainElement);
+// const mainElement = document.getElementById("Main");
+// ReactDOM.render(<App />, mainElement);
+console.log("======> App.tsxno");
 
 function LoadingExplorer(): JSX.Element {
   return (

src/libraryIndex.ts

@@ -0,0 +1 @@
+export { App } from "./Main";

tsconfig.library.json

@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "allowJs": false,
+    "sourceMap": true,
+    "noEmit": false,
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "exclude": [
+    "./src/**/__mocks__/**/*",
+    "./src/**/*.test.tsx",
+    "./src/**/*.test.ts",
+    "./src/Explorer/Notebook/NotebookRenderer/markdown-cell.tsx",
+    "./src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx",
+    "./src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx",
+    "./test/**/*",
+    "externals/jquery.typeahead.min.js"
+  ]
+}

webpack.library.config.js

@@ -0,0 +1,190 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+require("dotenv/config");
+const path = require("path");
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+const { EnvironmentPlugin } = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CreateFileWebpack = require("create-file-webpack");
+const childProcess = require("child_process");
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const TerserPlugin = require("terser-webpack-plugin");
+const webpack = require("webpack");
+const isCI = require("is-ci");
+
+const gitSha = childProcess.execSync("git rev-parse HEAD").toString("utf8");
+
+console.info("Packing library...");
+
+const cssRule = {
+  test: /\.css$/,
+  use: [MiniCssExtractPlugin.loader, "css-loader"],
+};
+
+const lessRule = {
+  test: /\.less$/,
+  use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
+  exclude: [path.resolve(__dirname, "less/Common/Constants.less")],
+};
+
+const imagesRule = {
+  test: /\.(jpg|jpeg|png|gif|svg|pdf|ico)$/,
+  type: "asset/resource",
+  generator: {
+    // Add hash, because there are multiple versions of "delete.svg"
+    filename: "images/[name].[hash][ext]",
+  },
+};
+
+const fontRule = {
+  test: /\.(woff|woff2|ttf|eot)$/,
+  generator: {
+    filename: "[name][ext]",
+  },
+};
+
+const htmlRule = {
+  test: /\.html$/,
+  use: [
+    {
+      loader: "html-loader",
+      options: {
+        minify: false,
+        removeComments: false,
+        collapseWhitespace: false,
+        root: path.resolve(__dirname, "images"),
+      },
+    },
+  ],
+};
+
+// We compile our own code with ts-loader
+const typescriptRule = {
+  test: /\.tsx?$/,
+  use: [
+    {
+      loader: "ts-loader",
+      options: {
+        transpileOnly: false,
+        configFile: "tsconfig.library.json",
+      },
+    },
+  ],
+  exclude: /node_modules/,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+module.exports = function (_env = {}, argv = {}) {
+  const mode = argv.mode || "development";
+  const rules = [fontRule, lessRule, imagesRule, cssRule, htmlRule, typescriptRule];
+  const envVars = {
+    GIT_SHA: gitSha,
+    PORT: process.env.PORT || "1234",
+  };
+
+  if (mode === "production") {
+    envVars.NODE_ENV = "production";
+  }
+
+  if (mode === "development") {
+    envVars.NODE_ENV = "development";
+    typescriptRule.use[0].options.compilerOptions = { target: "ES2018" };
+  }
+
+  const plugins = [
+    new CleanWebpackPlugin(),
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+    new CreateFileWebpack({
+      path: "./dist",
+      fileName: "version.txt",
+      content: `${gitSha.trim()} ${new Date().toUTCString()}`,
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css",
+    }),
+    new MonacoWebpackPlugin(),
+    new EnvironmentPlugin(envVars),
+  ];
+
+  if (argv.analyze) {
+    plugins.push(new BundleAnalyzerPlugin());
+  }
+
+  return {
+    mode: mode,
+    entry: {
+      cosmosexplorer: "./src/libraryIndex.ts",
+    },
+    output: {
+      chunkFilename: "[name].js",
+      filename: "[name].js",
+      path: path.resolve(__dirname, "dist"),
+      publicPath: "",
+      hashFunction: "xxhash64",
+      libraryTarget: "umd",
+      umdNamedDefine: true,
+    },
+    devtool: mode === "development" ? "eval-source-map" : "source-map",
+    plugins,
+    module: {
+      rules,
+    },
+    resolve: {
+      extensions: [".ts", ".tsx"],
+      modules: [path.resolve(__dirname, "src"), "node_modules"],
+      alias: {
+        react: path.resolve(__dirname, "./node_modules/react"),
+        "react-dom": path.resolve(__dirname, "./node_modules/react-dom"),
+        process: "process/browser",
+        "/sort_both.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_both.png"),
+        "/sort_asc.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_asc.png"),
+        "/sort_desc.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_desc.png"),
+        "/sort_asc_disabled.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_asc_disabled.png"),
+        "/sort_desc_disabled.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_desc_disabled.png"),
+      },
+
+      fallback: {
+        crypto: false,
+        fs: false,
+        querystring: require.resolve("querystring-es3"),
+      },
+      extensions: [".tsx", ".ts", ".js"],
+    },
+    externals: {
+      // Don't bundle react or react-dom
+      react: {
+        commonjs: "react",
+        commonjs2: "react",
+        amd: "React",
+        root: "React",
+      },
+      "react-dom": {
+        commonjs: "react-dom",
+        commonjs2: "react-dom",
+        amd: "ReactDOM",
+        root: "ReactDOM",
+      },
+    },
+    optimization: {
+      minimize: mode === "production" ? true : false,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            // These options increase our initial bundle size by ~5% but the builds are significantly faster and won't run out of memory
+            compress: false,
+            mangle: {
+              keep_fnames: true,
+              keep_classnames: true,
+            },
+          },
+        }),
+      ],
+    },
+    watch: false,
+    stats: "minimal",
+  };
+};