webpack test

* release_9.2.1_bugfixes:
  fix(mermaid): default mermaid back to CommonJS
  fix(mermaid): fix mermaid.render types

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,43 +0,0 @@
----
-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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -1,19 +0,0 @@
----
-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

@@ -1,16 +0,0 @@
----
-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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,42 @@
+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.

.npmrc

@@ -1 +1,2 @@
-auto-install-peers=true
+auto-install-peers=true
+strict-peer-dependencies=false

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-rc6/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 '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-rc3/dist/mermaid-mindmap-detector.esm.mjs',
+          'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.2.0/dist/mermaid-mindmap-detector.esm.mjs',
           // 'http://localhost:9000/mermaid-mindmap-detector.esm.mjs',
         ],
       };

package.json

@@ -3,19 +3,8 @@
   "private": true,
   "version": "9.2.0-rc4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
-  "main": "dist/mermaid.core.mjs",
-  "module": "dist/mermaid.core.mjs",
-  "types": "dist/mermaid.d.ts",
   "type": "module",
   "packageManager": "pnpm@7.13.2",
-  "exports": {
-    ".": {
-      "require": "./dist/mermaid.min.js",
-      "import": "./dist/mermaid.core.mjs",
-      "types": "./dist/mermaid.d.ts"
-    },
-    "./*": "./*"
-  },
   "keywords": [
     "diagram",
     "markdown",
@@ -147,9 +136,6 @@
   "resolutions": {
     "d3": "^7.0.0"
   },
-  "files": [
-    "dist"
-  ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss"

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;;

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
   # all packages in direct subdirs of packages/
   - 'packages/*'
+  - 'tests/*'

tests/webpack/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "webpack",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "module": "commonjs",
+  "scripts": {
+    "build": "webpack",
+    "serve": "webpack serve"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "mermaid": "workspace:*"
+  }
+}

tests/webpack/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Getting Started</title>
+  </head>
+  <body>
+    <script src="./main.js"></script>
+  </body>
+</html>

tests/webpack/src/index.js

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
+const mermaid = require('mermaid');
+// import mermaid from 'mermaid';
+
+console.log(mermaid);

tests/webpack/webpack.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};