Merge 25ed906 into bb413d5

.esbuild/serve.cjs

@@ -1,53 +1,71 @@
 const esbuild = require('esbuild');
 const http = require('http');
-const path = require('path');
-const { iifeBuild } = require('./util.cjs');
+const { iifeBuild, esmBuild, getEntryPoints } = require('./util.cjs');
+const express = require('express');
 
-// Start esbuild's server on a random local port
-esbuild
-  .serve(
-    {
-      servedir: path.join(__dirname, '..'),
+// Start 2 esbuild servers. One for IIFE and one for ESM
+// Serve 2 static directories: demo & cypress/platform
+// Have 3 entry points:
+// mermaid: './src/mermaid',
+// e2e: './cypress/platform/viewer.js',
+// 'bundle-test': './cypress/platform/bundle-test.js',
+
+const getEntryPointsAndExtensions = (format) => {
+  return {
+    entryPoints: {
+      ...getEntryPoints(format === 'iife' ? '' : '.esm'),
+      e2e: 'cypress/platform/viewer.js',
+      'bundle-test': 'cypress/platform/bundle-test.js',
     },
-    iifeBuild({ minify: false })
-  )
-  .then((result) => {
-    // The result tells us where esbuild's local server is
-    const { host, port } = result;
+    outExtension: { '.js': format === 'iife' ? '.js' : '.mjs' },
+  };
+};
 
-    // Then start a proxy server on port 3000
-    http
-      .createServer((req, res) => {
-        if (req.url.includes('mermaid.js')) {
-          req.url = '/dist/mermaid.js';
+const generateHandler = (server) => {
+  return (req, res) => {
+    const options = {
+      hostname: server.host,
+      port: server.port,
+      path: req.url,
+      method: req.method,
+      headers: req.headers,
+    };
+    // Forward each incoming request to esbuild
+    const proxyReq = http.request(options, (proxyRes) => {
+      // If esbuild returns "not found", send a custom 404 page
+      if (proxyRes.statusCode === 404) {
+        if (!req.url.endsWith('.html')) {
+          res.writeHead(404, { 'Content-Type': 'text/html' });
+          res.end('<h1>A custom 404 page</h1>');
+          return;
         }
-        const options = {
-          hostname: host,
-          port: port,
-          path: req.url,
-          method: req.method,
-          headers: req.headers,
-        };
+      }
+      // Otherwise, forward the response from esbuild to the client
+      res.writeHead(proxyRes.statusCode, proxyRes.headers);
+      proxyRes.pipe(res, { end: true });
+    });
+    // Forward the body of the request to esbuild
+    req.pipe(proxyReq, { end: true });
+  };
+};
 
-        // Forward each incoming request to esbuild
-        const proxyReq = http.request(options, (proxyRes) => {
-          // If esbuild returns "not found", send a custom 404 page
-          console.error('pp', req.url);
-          if (proxyRes.statusCode === 404) {
-            if (!req.url.endsWith('.html')) {
-              res.writeHead(404, { 'Content-Type': 'text/html' });
-              res.end('<h1>A custom 404 page</h1>');
-              return;
-            }
-          }
-
-          // Otherwise, forward the response from esbuild to the client
-          res.writeHead(proxyRes.statusCode, proxyRes.headers);
-          proxyRes.pipe(res, { end: true });
-        });
+(async () => {
+  const iifeServer = await esbuild.serve(
+    {},
+    {
+      ...iifeBuild({ minify: false }),
+      ...getEntryPointsAndExtensions('iife'),
+    }
+  );
+  const esmServer = await esbuild.serve(
+    {},
+    { ...esmBuild({ minify: false }), ...getEntryPointsAndExtensions('esm') }
+  );
+  const app = express();
 
-        // Forward the body of the request to esbuild
-        req.pipe(proxyReq, { end: true });
-      })
-      .listen(3000);
-  });
+  app.use(express.static('demos'));
+  app.use(express.static('cypress/platform'));
+  app.all('/mermaid.js', generateHandler(iifeServer));
+  app.all('/mermaid.esm.mjs', generateHandler(esmServer));
+  app.listen(3000);
+})();

.esbuild/util.cjs

@@ -26,12 +26,14 @@ const buildOptions = (override = {}) => {
   };
 };
 
-const getOutFiles = (extension) => {
+const getEntryPoints = (extension) => {
   return {
     [`mermaid${extension}`]: 'src/mermaid.ts',
     [`diagramAPI${extension}`]: 'src/diagram-api/diagramAPI.ts',
   };
 };
+exports.getEntryPoints = getEntryPoints;
+
 /**
  * Build options for mermaid.esm.* build.
  *
@@ -43,7 +45,7 @@ const getOutFiles = (extension) => {
 exports.esmBuild = (override = { minify: true }) => {
   return buildOptions({
     format: 'esm',
-    entryPoints: getOutFiles(`.esm${override.minify ? '.min' : ''}`),
+    entryPoints: getEntryPoints(`.esm${override.minify ? '.min' : ''}`),
     outExtension: { '.js': '.mjs' },
     ...override,
   });
@@ -61,7 +63,7 @@ exports.esmBuild = (override = { minify: true }) => {
 exports.esmCoreBuild = (override) => {
   return buildOptions({
     format: 'esm',
-    entryPoints: getOutFiles(`.core`),
+    entryPoints: getEntryPoints(`.core`),
     outExtension: { '.js': '.mjs' },
     external: ['require', 'fs', 'path', ...Object.keys(dependencies)],
     platform: 'neutral',
@@ -79,7 +81,7 @@ exports.esmCoreBuild = (override) => {
  */
 exports.iifeBuild = (override = { minify: true }) => {
   return buildOptions({
-    entryPoints: getOutFiles(override.minify ? '.min' : ''),
+    entryPoints: getEntryPoints(override.minify ? '.min' : ''),
     format: 'iife',
     ...override,
   });

.github/workflows/e2e.yml

@@ -0,0 +1,38 @@
+name: E2E
+
+on: [push, pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Yarn
+        run: npm i yarn --global
+
+      - name: Install Packages
+        run: |
+          yarn install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Run Build
+        run: yarn build
+
+      - name: Run E2E Tests
+        run: yarn e2e
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

.github/workflows/lint.yml

@@ -40,18 +40,3 @@ jobs:
 
       - name: Verify Docs
         run: yarn docs:verify
-
-      - name: Check no `console.log()` in .jison files
-        # ESLint can't parse .jison files directly
-        # In the future, it might be worth making a `eslint-plugin-jison`, so
-        # that this will be built into the `yarn lint` command.
-        run: |
-          shopt -s globstar
-          mkdir -p tmp/
-          for jison_file in src/**/*.jison; do
-            outfile="tmp/$(basename -- "$jison_file" .jison)-jison.js"
-            echo "Converting $jison_file to $outfile"
-            # default module-type (CJS) always adds a console.log()
-            yarn jison "$jison_file" --outfile "$outfile" --module-type "amd"
-          done
-          yarn eslint --no-eslintrc --rule no-console:error --parser "@babel/eslint-parser" "./tmp/*-jison.js"

.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
   "src/docs/**": ["yarn docs:build --git"],
   "src/docs.mts": ["yarn docs:build --git"],
-  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"]
+  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
+  "*.jison": ["yarn lint:jison"]
 }