Merge branch 'sidv/viteVitest' into sidv/3061_monorepo

* sidv/viteVitest:
  fix: Core build
  fix: js-base64
  fix OutputOptions type
  fix: js-base64
  fix: json import, js-base64
  fix: json import

.vite/build.ts

@@ -55,13 +55,17 @@ export const getBuildConfig = ({
   ];
 
   if (core) {
+    // Core build is used to generate file without bundled dependencies.
+    // This is used by downstream projects to bundle dependencies themselves.
     external.push(...Object.keys(dependencies));
-    output = {
-      name,
+    // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
+    output = [
+      {
         format: 'esm',
         sourcemap: true,
         entryFileNames: `[name].core.mjs`,
-    };
+      },
+    ];
   }
 
   const config: InlineConfig = {
@@ -100,7 +104,7 @@ const buildPackage = async (packageName: keyof typeof packageOptions) => {
   return Promise.allSettled([
     build(getBuildConfig({ minify: false, packageName })),
     build(getBuildConfig({ minify: 'esbuild', packageName })),
-    build(getBuildConfig({ minify: true, core: true, packageName })),
+    build(getBuildConfig({ minify: false, core: true, packageName })),
   ]);
 };
 

.vite/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "ES2022"
+  }
+}

cypress/helpers/util.js

@@ -1,4 +1,6 @@
-import { Base64 } from 'js-base64';
+const utf8ToB64 = (str) => {
+  return window.btoa(unescape(encodeURIComponent(str)));
+};
 
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
@@ -6,7 +8,7 @@ export const mermaidUrl = (graphStr, options, api) => {
     mermaid: options,
   };
   const objStr = JSON.stringify(obj);
-  let url = 'http://localhost:9000/e2e.html?graph=' + Base64.encodeURI(objStr);
+  let url = 'http://localhost:9000/e2e.html?graph=' + utf8ToB64(objStr);
   if (api) {
     url = 'http://localhost:9000/xss.html?graph=' + graphStr;
   }

cypress/integration/other/xss.spec.js

@@ -15,7 +15,7 @@ describe('XSS', () => {
 
   it('should not allow tags in the css', () => {
     const str =
-      'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU-PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
+      'eyJjb2RlIjoiJSV7aW5pdDogeyAnZm9udEZhbWlseSc6ICdcXFwiPjwvc3R5bGU+PGltZyBzcmM9eCBvbmVycm9yPXhzc0F0dGFjaygpPid9IH0lJVxuZ3JhcGggTFJcbiAgICAgQSAtLT4gQiIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwiZmxvd2NoYXJ0Ijp7Imh0bWxMYWJlbHMiOmZhbHNlfX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9';
 
     const url = mermaidUrl(
       str,

cypress/platform/viewer.js

@@ -1,6 +1,9 @@
-import { Base64 } from '../../node_modules/js-base64';
 import mermaid2 from '../../packages/mermaid/src/mermaid';
 
+function b64ToUtf8(str) {
+  return decodeURIComponent(escape(window.atob(str)));
+}
+
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -11,7 +14,7 @@ const contentLoaded = function () {
   if (pos > 0) {
     pos = pos + 7;
     const graphBase64 = document.location.href.substr(pos);
-    const graphObj = JSON.parse(Base64.decode(graphBase64));
+    const graphObj = JSON.parse(b64ToUtf8(graphBase64));
     if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') {
       document.body.style.background = '#3f3f3f';
     }
@@ -67,7 +70,7 @@ const contentLoadedApi = function () {
   if (pos > 0) {
     pos = pos + 7;
     const graphBase64 = document.location.href.substr(pos);
-    const graphObj = JSON.parse(Base64.decode(graphBase64));
+    const graphObj = JSON.parse(b64ToUtf8(graphBase64));
     // const graph = 'hello'
     if (Array.isArray(graphObj.code)) {
       const numCodes = graphObj.code.length;

package.json

@@ -26,18 +26,18 @@
   ],
   "scripts": {
     "clean": "rimraf dist",
-    "build:vite": "ts-node-esm .vite/build.ts",
+    "build:vite": "ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts",
     "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly",
     "build:watch": "yarn build:code --watch",
     "build": "yarn clean; concurrently \"yarn build:vite\" \"yarn build:types\"",
     "dev": "concurrently \"yarn build:vite --watch\" \"ts-node-esm .vite/server\"",
-    "docs:build": "ts-node-esm src/docs.mts",
+    "docs:build": "ts-node-esm --transpileOnly src/docs.mts",
     "docs:verify": "yarn docs:build --verify",
     "todo-postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
     "release": "yarn build",
     "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
-    "lint:jison": "ts-node-esm src/jison/lint.mts",
+    "lint:jison": "ts-node-esm --transpileOnly src/jison/lint.mts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
@@ -99,7 +99,6 @@
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
-    "esbuild": "^0.15.8",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -113,7 +112,6 @@
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jison": "^0.4.18",
-    "js-base64": "3.7.2",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.0",
     "moment": "^2.23.0",

packages/mermaid/src/mermaid.ts

@@ -1,4 +1,3 @@
-'use strict';
 /**
  * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid
  * functionality and to render the diagrams to svg code.

tsconfig.json

@@ -27,7 +27,7 @@
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 
     /* Modules */
-    "module": "ESNext" /* Specify what module code is generated. */,
+    "module": "ES6" /* Specify what module code is generated. */,
     "rootDir": "./packages" /* Specify the root folder within your source files. */,
     "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,