Merge pull request #3767 from aloisklink/fix/convert-package-back-to-commonjs

[9.2] fix(mermaid): default mermaid back to CommonJS

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,43 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: 'Status: Triage, Type: Bug / Error'
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Code Sample**
+If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,69 +0,0 @@
-name: Bug Report
-description: Create a report to help us improve
-labels:
-  - 'Status: Triage'
-  - 'Type: Bug / Error'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Security vulnerabilities
-        Please refer our [Security Policy](https://github.com/mermaid-js/.github/blob/main/SECURITY.md) and report to keep vulnerabilities confidential so we can release fixes first.
-
-        ## Before you submit...
-        We like to help you, but in order to do that should you make a few things first:
-
-        - Use a clear and concise title
-        - Fill out the text fields with as much detail as possible.
-        - Never be shy to give us screenshots and/or code samples. It will help!
-  - type: textarea
-    attributes:
-      label: Description
-      description: Give a clear and concise description of what the bug is.
-      placeholder: When I do ... does ... happen.
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Steps to reproduce
-      description: Give a step-by-step example on how to reproduce the bug.
-      placeholder: |-
-        1. Do this
-        2. Do that
-        3. ...
-        4. Bug!
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to help explain your issue.
-  - type: textarea
-    attributes:
-      label: Code Sample
-      description: |-
-        If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
-        Any text pasted here will be rendered as a Code block.
-      render: text
-  - type: textarea
-    attributes:
-      label: Setup
-      description: |-
-        Please fill out the below info.
-        Note that you only need to fill out one and not both sections.
-      value: |-
-        **Desktop**
-
-        - OS and Version: [Windows, Linux, Mac, ...]
-        - Browser and Version: [Chrome, Edge, Firefox]
-
-        **Smartphone**
-
-        - Device: [Samsung, iPhone, ...]
-        - OS and Version: [Android, iOS, ...]
-        - Browser and Version: [Chrome, Safari, ...]
-  - type: textarea
-    attributes:
-      label: Additional Context
-      description: Anything else to add?

.github/ISSUE_TEMPLATE/config.yml

@@ -1,17 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: GitHub Discussions
-    url: https://github.com/mermaid-js/mermaid/discussions
-    about: Ask the Community questions or share your own graphs in our discussions.
-  - name: Security Vulnerability
-    url: https://github.com/mermaid-js/.github/blob/main/SECURITY.md
-    about: Report security issues confidentially.
-  - name: Slack
-    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
-    about: Join our Community on Slack for Help and a casual chat.
-  - name: Documentation
-    url: https://mermaid-js.github.io
-    about: Read our documentation for all that Mermaid.js can offer.
-  - name: Live Editor
-    url: https://mermaid.live
-    about: Try the live editor to preview graphs in no time.

.github/ISSUE_TEMPLATE/diagram_proposal.yml

@@ -1,42 +0,0 @@
-name: Diagram Proposal
-description: Suggest a new Diagram Type to add to Mermaid.
-labels:
-  - 'Status: Triage'
-  - 'Type: Enhancement'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Before you submit...
-        First of all, thank you for proposing a new Diagram to us.
-        We are always happy about new ideas to improve Mermaid.js wherever possible.
-
-        To get the fastest and best response possible, make sure you do the following:
-
-        - Use a clear and concise title
-        - Fill out the text fields with as much detail as possible.
-        - Never be shy to give us screenshots and/or code samples. It will help!
-  - type: textarea
-    attributes:
-      label: Proposal
-      description: A clear and concise description of what should be added to Mermaid.js.
-      placeholder: Mermaid.js should add ... because ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Use Cases
-      description: If applicable, give some use cases for where this diagram would be useful.
-      placeholder: The Diagram could be used for ...
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to show possible examples of how the diagram may look like.
-  - type: textarea
-    attributes:
-      label: Code Sample
-      description: |-
-        If applicable, add a code sample for how to implement this new diagram.
-        The text will automatically be rendered as JavaScript code.
-      render: javascript

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: 'Status: Triage, Type: Enhancement'
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/question.md

@@ -0,0 +1,16 @@
+---
+name: Question
+about: Get some help from the community.
+title: ''
+labels: 'Help wanted!, Type: Other'
+assignees: ''
+---
+
+## Help us help you!
+
+You want an answer. Here are some ways to get it quicker:
+
+- Use a clear and concise title.
+- Try to pose a clear and concise question.
+- Include as much, or as little, code as necessary.
+- Don't be shy to give us some screenshots, if it helps!

.github/ISSUE_TEMPLATE/syntax_proposal.yml

@@ -1,34 +0,0 @@
-name: Syntax Proposal
-description: Suggest a new Syntax to add to Mermaid.js.
-labels:
-  - 'Status: Triage'
-  - 'Type: Enhancement'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Before you submit...
-        First of all, thank you for proposing a new Syntax to us.
-        We are always happy about new ideas to improve Mermaid.js wherever possible.
-
-        To get the fastest and best response possible, make sure you do the following:
-
-        - Use a clear and concise title
-        - Fill out the text fields with as much detail as possible. Examples are always welcome.
-        - Never be shy to give us screenshots and/or code samples. It will help!
-  - type: textarea
-    attributes:
-      label: Proposal
-      description: A clear and concise description of what Syntax should be added to Mermaid.js.
-      placeholder: Mermaid.js should add ... because ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Example
-      description: If applicable, provide an example of the new Syntax.
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to show possible examples of how the theme may look like.

.github/ISSUE_TEMPLATE/theme_proposal.yml

@@ -1,42 +0,0 @@
-name: Theme Proposal
-description: Suggest a new theme to add to Mermaid.js.
-labels:
-  - 'Status: Triage'
-  - 'Type: Enhancement'
-
-body:
-  - type: markdown
-    attributes:
-      value: |-
-        ## Before you submit...
-        First of all, thank you for proposing a new Theme to us.
-        We are always happy about new ideas to improve Mermaid.js wherever possible.
-
-        To get the fastest and best response possible, make sure you do the following:
-
-        - Use a clear and concise title
-        - Fill out the text fields with as much detail as possible. Examples are always welcome!
-        - Never be shy to give us screenshots and/or code samples. It will help!
-  - type: textarea
-    attributes:
-      label: Proposal
-      description: A clear and concise description of what theme should be added to Mermaid.js.
-      placeholder: Mermaid.js should add ... because ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Colors
-      description: |-
-        A detailed list of the different colour values to use.
-        A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
-      placeholder: |-
-        - background: #f4f4f4
-        - primaryColor: #fff4dd
-        - ...
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Screenshots
-      description: If applicable, add screenshots to show possible examples of how the theme may look like.

applitools.config.js

@@ -15,5 +15,5 @@ module.exports = defineConfig({
     //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
   ],
   // set batch name to the configuration
-  // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
+  batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
 });

cypress/helpers/util.js

@@ -2,8 +2,6 @@ const utf8ToB64 = (str) => {
   return window.btoa(unescape(encodeURIComponent(str)));
 };
 
-const batchId = 'mermid-batch' + new Date().getTime();
-
 export const mermaidUrl = (graphStr, options, api) => {
   const obj = {
     code: graphStr,
@@ -52,12 +50,9 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
-    cy.log('Opening eyes ' + Cypress.spec.name + ' --- ' + name);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
     });
   }
 
@@ -69,9 +64,7 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   // Default name to test title
 
   if (useAppli) {
-    cy.log('Check eyes' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes: ' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);
@@ -107,12 +100,9 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
-    cy.log('Opening eyes 2' + Cypress.spec.name);
     cy.eyesOpen({
       appName: 'Mermaid',
       testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
     });
   }
 
@@ -122,9 +112,7 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
   // Default name to test title
 
   if (useAppli) {
-    cy.log('Check eyes 2' + Cypress.spec.name);
     cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes 2' + Cypress.spec.name);
     cy.eyesClose();
   } else {
     cy.matchImageSnapshot(name);

docs/index.html

@@ -50,7 +50,7 @@
     <div id="app"></div>
     <script type="module">
       // import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9.2.0-rc6/dist/mermaid.esm.min.mjs';
       // import mermaid from 'http://localhost:9000/mermaid.esm.mjs';
       console.log(mermaid); // eslint-disable-line
       window.mermaid = mermaid;
@@ -61,7 +61,7 @@
         startOnLoad: true,
         themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
         lazyLoadedDiagrams: [
-          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0/dist/mermaid-mindmap-detector.esm.mjs',
+          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0-rc3/dist/mermaid-mindmap-detector.esm.mjs',
           // 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
         ],
       };

packages/mermaid/package.json

@@ -2,10 +2,10 @@
   "name": "mermaid",
   "version": "9.2.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "./dist/mermaid.core.mjs",
+  "main": "./dist/mermaid.min.js",
   "module": "./dist/mermaid.core.mjs",
   "types": "./dist/mermaid.d.ts",
-  "type": "module",
+  "type": "commonjs",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",

packages/mermaid/src/mermaid.ts

@@ -482,9 +482,9 @@ const parseAsync = (txt: string) => {
 const renderAsync = (
   id: string,
   text: string,
-  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
-): Promise<void> => {
+): Promise<string> => {
   return new Promise((resolve, reject) => {
     // This promise will resolve when the mermaidAPI.render call is done.
     // It will be queued first and will be executed when it is first in line

packages/mermaid/src/mermaidAPI.ts

@@ -115,19 +115,19 @@ export const decodeEntities = function (text: string): string {
  *
  * @param {string} id The id of the element to be rendered
  * @param {string} text The graph definition
- * @param {(svgCode: string, bindFunctions?: (element: Element) => void) => void} cb Callback which
+ * @param cb - Optional callback which
  *   is called after rendering is finished with the svg code as inparam.
  * @param {Element} container Selector to element in which a div with the graph temporarily will be
  *   inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
  *   element will be removed when rendering is completed.
- * @returns {void}
+ * @returns Returns the rendered element as a string containing the SVG definition.
  */
 const render = function (
   id: string,
   text: string,
-  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
-): void {
+): string {
   addDiagrams();
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
@@ -401,9 +401,9 @@ const render = function (
 const renderAsync = async function (
   id: string,
   text: string,
-  cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
+  cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
-): Promise<void> {
+): Promise<string> {
   addDiagrams();
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;