marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-04 03:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3452 from mermaid-js/sidv/removeWebpackBabel

Browse Source 
Remove webpack & babel
This commit is contained in:
Knut Sveidqvist
2022-09-21 08:10:10 +02:00
committed by GitHub
parent 71d252f706 3982d19e57
commit ad2d098b52
22 changed files with 509 additions and 1686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.esbuild/esbuild.cjs
View File

@@ -13,8 +13,8 @@ build(iifeBuild({ minify: false, watch })).catch(handler);
build(esmBuild({ minify: false, watch })).catch(handler);
// mermaid.min.js
build(esmBuild()).catch(handler);
// mermaid.esm.min.mjs
build(iifeBuild()).catch(handler);
// mermaid.esm.min.mjs
build(esmBuild()).catch(handler);
// mermaid.core.mjs (node_modules unbundled)
build(esmCoreBuild()).catch(handler);

14
.esbuild/jisonTransformer.cjs Normal file
View File

@@ -0,0 +1,14 @@
const { Generator } = require('jison');
exports.transformJison = (src) => {
const parser = new Generator(src, {
moduleType: 'js',
'token-stack': true,
});
const source = parser.generate({ moduleMain: '() => {}' });
const exporter = `
parser.parser = parser;
export { parser };
export default parser;
`;
return `${source} ${exporter}`;
};

112
.esbuild/serve.cjs
View File

@@ -1,53 +1,79 @@
const esbuild = require('esbuild');
const http = require('http');
const path = require('path');
const { iifeBuild } = require('./util.cjs');
const { iifeBuild, esmBuild } = 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: {
mermaid: './src/mermaid',
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' : '.esm.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;
}
}
(async () => {
const iifeServer = await esbuild.serve(
{},
{
...iifeBuild({ minify: false, outfile: undefined, outdir: 'dist' }),
...getEntryPointsAndExtensions('iife'),
}
);
const esmServer = await esbuild.serve(
{},
{
...esmBuild({ minify: false, outfile: undefined, outdir: 'dist' }),
...getEntryPointsAndExtensions('esm'),
}
);
const app = express();
// Otherwise, forward the response from esbuild to the client
res.writeHead(proxyRes.statusCode, proxyRes.headers);
proxyRes.pipe(res, { end: true });
});
app.use(express.static('demos'));
app.use(express.static('cypress/platform'));
app.all('/mermaid.js', generateHandler(iifeServer));
app.all('/mermaid.esm.mjs', generateHandler(esmServer));
// Forward the body of the request to esbuild
req.pipe(proxyReq, { end: true });
})
.listen(3000);
app.all('/e2e.esm.mjs', generateHandler(esmServer));
app.all('/bundle-test.esm.mjs', generateHandler(esmServer));
app.listen(9000, () => {
console.log(`Listening on http://localhost:9000`);
});
})();

28
.esbuild/util.cjs
View File

@@ -1,4 +1,4 @@
const { Generator } = require('jison');
const { transformJison } = require('./jisonTransformer.cjs');
const fs = require('fs');
const { dependencies } = require('../package.json');
@@ -17,21 +17,16 @@ const buildOptions = (override = {}) => {
globalName: 'mermaid',
platform: 'browser',
tsconfig: 'tsconfig.json',
resolveExtensions: ['.ts', '.js', '.json', '.jison'],
resolveExtensions: ['.ts', '.js', '.mjs', '.json', '.jison'],
external: ['require', 'fs', 'path'],
outdir: 'dist',
entryPoints: ['src/mermaid.ts'],
outfile: 'dist/mermaid.min.js',
plugins: [jisonPlugin],
sourcemap: 'external',
...override,
};
};
const getOutFiles = (extension) => {
return {
[`mermaid${extension}`]: 'src/mermaid.ts',
[`diagramAPI${extension}`]: 'src/diagram-api/diagramAPI.ts',
};
};
/**
* Build options for mermaid.esm.* build.
*
@@ -43,8 +38,7 @@ const getOutFiles = (extension) => {
exports.esmBuild = (override = { minify: true }) => {
return buildOptions({
format: 'esm',
entryPoints: getOutFiles(`.esm${override.minify ? '.min' : ''}`),
outExtension: { '.js': '.mjs' },
outfile: `dist/mermaid.esm${override.minify ? '.min' : ''}.mjs`,
...override,
});
};
@@ -61,8 +55,7 @@ exports.esmBuild = (override = { minify: true }) => {
exports.esmCoreBuild = (override) => {
return buildOptions({
format: 'esm',
entryPoints: getOutFiles(`.core`),
outExtension: { '.js': '.mjs' },
outfile: `dist/mermaid.core.mjs`,
external: ['require', 'fs', 'path', ...Object.keys(dependencies)],
platform: 'neutral',
...override,
@@ -79,8 +72,11 @@ exports.esmCoreBuild = (override) => {
*/
exports.iifeBuild = (override = { minify: true }) => {
return buildOptions({
entryPoints: getOutFiles(override.minify ? '.min' : ''),
outfile: `dist/mermaid${override.minify ? '.min' : ''}.js`,
format: 'iife',
footer: {
js: 'mermaid = mermaid.default;',
},
...override,
});
};
@@ -91,9 +87,7 @@ const jisonPlugin = {
build.onLoad({ filter: /\.jison$/ }, async (args) => {
// Load the file from the file system
const source = await fs.promises.readFile(args.path, 'utf8');
const contents = new Generator(source, { 'token-stack': true }).generate({
moduleMain: '() => {}', // disable moduleMain (default one requires Node.JS modules)
});
const contents = transformJison(source);
return { contents, warnings: [] };
});
},

15
.github/workflows/lint.yml vendored
View File

@@ -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"

3
.lintstagedrc.json
View File

@@ -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"]
}

25
.webpack/loaders/jison.js
View File

@@ -1,25 +0,0 @@
const { Generator } = require('jison');
const validate = require('schema-utils');
const schema = {
title: 'Jison Parser options',
type: 'object',
properties: {
'token-stack': {
type: 'boolean',
},
debug: {
type: 'boolean',
},
},
additionalProperties: false,
};
module.exports = function jisonLoader(source) {
const options = this.getOptions();
(validate.validate || validate)(schema, options, {
name: 'Jison Loader',
baseDataPath: 'options',
});
return new Generator(source, options).generate();
};

46
.webpack/webpack.config.babel.js
View File

@@ -1,46 +0,0 @@
import { merge, mergeWithCustomize, customizeObject } from 'webpack-merge';
import nodeExternals from 'webpack-node-externals';
import baseConfig from './webpack.config.base';
export default (_env, args) => {
return [
// non-minified
merge(baseConfig, {
optimization: {
minimize: false,
},
}),
// core [To be used by webpack/esbuild/vite etc to bundle mermaid]
merge(baseConfig, {
externals: [nodeExternals()],
output: {
filename: '[name].core.js',
},
optimization: {
minimize: false,
},
}),
// umd
merge(baseConfig, {
output: {
filename: '[name].min.js',
},
}),
// esm
mergeWithCustomize({
customizeObject: customizeObject({
'output.library': 'replace',
}),
})(baseConfig, {
experiments: {
outputModule: true,
},
output: {
library: {
type: 'module',
},
filename: '[name].esm.min.mjs',
},
}),
];
};

71
.webpack/webpack.config.base.js
View File

@@ -1,71 +0,0 @@
import path from 'path';
const esbuild = require('esbuild');
const { ESBuildMinifyPlugin } = require('esbuild-loader');
export const resolveRoot = (...relativePath) => path.resolve(__dirname, '..', ...relativePath);
export default {
amd: false, // https://github.com/lodash/lodash/issues/3052
target: 'web',
entry: {
mermaid: './src/mermaid',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.ts', '.json', '.jison'],
fallback: {
fs: false, // jison generated code requires 'fs'
path: require.resolve('path-browserify'),
},
},
output: {
path: resolveRoot('./dist'),
filename: '[name].js',
library: {
name: 'mermaid',
type: 'umd',
export: 'default',
},
globalObject: 'typeof self !== "undefined" ? self : this',
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.js$/,
include: [resolveRoot('./src'), resolveRoot('./node_modules/dagre-d3-renderer/lib')],
use: {
loader: 'esbuild-loader',
options: {
implementation: esbuild,
target: 'es2015',
},
},
},
{
// load scss to string
test: /\.scss$/,
use: ['css-to-string-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.jison$/,
use: {
loader: path.resolve(__dirname, './loaders/jison.js'),
options: {
'token-stack': true,
},
},
},
],
},
devtool: 'source-map',
optimization: {
minimizer: [
new ESBuildMinifyPlugin({
target: 'es2015',
}),
],
},
};

26
.webpack/webpack.config.e2e.babel.js
View File

@@ -1,26 +0,0 @@
import baseConfig, { resolveRoot } from './webpack.config.base';
import { merge } from 'webpack-merge';
export default merge(baseConfig, {
mode: 'development',
entry: {
mermaid: './src/mermaid',
e2e: './cypress/platform/viewer.js',
'bundle-test': './cypress/platform/bundle-test.js',
},
output: {
globalObject: 'window',
},
devServer: {
compress: true,
port: 9000,
static: [
{ directory: resolveRoot('cypress', 'platform') },
{ directory: resolveRoot('dist') },
{ directory: resolveRoot('demos') },
],
},
externals: {
mermaid: 'mermaid',
},
});

10
babel.config.js
View File

@@ -1,10 +0,0 @@
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: 'defaults, ie >= 11, current node',
},
],
],
};

0
cypress.config.js → cypress.config.cjs
View File

4
cypress/platform/e2e.html
View File

@@ -2,7 +2,7 @@
<head>
<meta charset="utf-8" />
<!-- <meta charset="iso-8859-15"/> -->
<script src="/e2e.js"></script>
<script src="/e2e.esm.mjs" type="module"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
@@ -37,7 +37,7 @@
</style>
</head>
<body>
<script src="./mermaid.js"></script>
<!-- <script src="./mermaid.js"></script> -->
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied

7
cypress/platform/viewer.js
View File

@@ -3,7 +3,8 @@ import mermaid2 from '../../src/mermaid';
/**
* ##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 page.
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
* page.
*/
const contentLoaded = function () {
let pos = document.location.href.indexOf('?graph=');
@@ -32,8 +33,8 @@ const contentLoaded = function () {
document.getElementsByTagName('body')[0].appendChild(div);
}
global.mermaid.initialize(graphObj.mermaid);
global.mermaid.init();
mermaid2.initialize(graphObj.mermaid);
mermaid2.init();
}
};

2
cypress/platform/webpackUsage.html
View File

@@ -12,6 +12,6 @@
</head>
<body>
<div id="graph-to-be"></div>
<script src="./bundle-test.js" charset="utf-8"></script>
<script src="./bundle-test.esm.mjs" type="module" charset="utf-8"></script>
</body>
</html>

2
cypress/platform/xss.html
View File

@@ -1,6 +1,6 @@
<html>
<head>
<script src="/e2e.js"></script>
<script src="/e2e.esm.mjs" type="module"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<style>
.malware {

4
demos/er.html
View File

@@ -23,8 +23,8 @@ ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
</pre>
<script src="./mermaid.js"></script>
<script>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',

2
jest.config.js → jest.config.cjs
View File

@@ -7,7 +7,7 @@ module.exports = {
transform: {
'^.+\\.[jt]sx?$': 'esbuild-jest',
'^.+\\.jison$': [
path.resolve(__dirname, './src/jison/transformer.js'),
path.resolve(__dirname, './src/jison/transformer.cjs'),
{ 'token-stack': true },
],
},

33
package.json
View File

@@ -5,6 +5,7 @@
"main": "dist/mermaid.core.mjs",
"module": "dist/mermaid.core.mjs",
"types": "dist/mermaid.d.ts",
"type": "module",
"exports": {
".": {
"require": "./dist/mermaid.min.js",
@@ -26,22 +27,21 @@
"clean": "rimraf dist",
"build:code": "node .esbuild/esbuild.cjs",
"build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
"build:webpack": "webpack --mode production --progress --color",
"build:watch": "yarn build:code --watch",
"build:new": "concurrently \"yarn build:code\" \"yarn build:types\"",
"build": "yarn clean; yarn build:webpack",
"build:esbuild": "concurrently \"yarn build:code\" \"yarn build:types\"",
"build": "yarn clean; yarn build:esbuild",
"dev": "node .esbuild/serve.cjs",
"docs:build": "ts-node-esm src/docs.mts",
"docs:verify": "ts-node-esm src/docs.mts --verify",
"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 && yarn docs:build",
"release": "yarn build",
"lint": "eslint --cache --ignore-path .gitignore . && prettier --check .",
"lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
"e2e:depr": "yarn lint && jest e2e --config e2e/jest.config.js",
"lint:jison": "ts-node-esm src/jison/lint.mts",
"cypress": "cypress run",
"cypress:open": "cypress open",
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
"e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
"dev": "webpack serve --config ./.webpack/webpack.config.e2e.babel.js",
"ci": "jest src/.*",
"test": "yarn lint && jest src/.*",
"test:watch": "jest --watch src",
@@ -81,29 +81,24 @@
},
"devDependencies": {
"@applitools/eyes-cypress": "^3.25.7",
"@babel/core": "^7.19.0",
"@babel/eslint-parser": "^7.14.7",
"@babel/preset-env": "^7.19.0",
"@babel/register": "^7.14.5",
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.0.0",
"@types/d3": "^7.4.0",
"@types/dompurify": "^2.3.4",
"@types/eslint": "^8.4.6",
"@types/express": "^4.17.13",
"@types/jest": "^28.1.7",
"@types/lodash": "^4.14.184",
"@types/stylis": "^4.0.2",
"@typescript-eslint/eslint-plugin": "^5.37.0",
"@typescript-eslint/parser": "^5.37.0",
"babel-jest": "^29.0.3",
"babel-loader": "^8.2.2",
"concurrently": "^7.4.0",
"css-to-string-loader": "^0.1.3",
"coveralls": "^3.0.2",
"cypress": "^10.0.0",
"cypress-image-snapshot": "^4.0.1",
"documentation": "13.2.0",
"esbuild": "^0.15.6",
"esbuild-jest": "^0.5.0",
"esbuild-loader": "^2.19.0",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
@@ -112,6 +107,7 @@
"eslint-plugin-jsdoc": "^39.3.6",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-markdown": "^3.0.0",
"express": "^4.18.1",
"globby": "^13.1.2",
"husky": "^8.0.0",
"identity-obj-proxy": "^3.0.0",
@@ -127,17 +123,10 @@
"remark": "^14.0.2",
"rimraf": "^3.0.2",
"start-server-and-test": "^1.12.6",
"terser-webpack-plugin": "^5.3.6",
"ts-jest": "^28.0.8",
"ts-loader": "^9.3.1",
"ts-node": "^10.9.1",
"typescript": "^4.8.3",
"unist-util-flatmap": "^1.0.0",
"webpack": "^5.53.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.11.0",
"webpack-merge": "^5.8.0",
"webpack-node-externals": "^3.0.0"
"unist-util-flatmap": "^1.0.0"
},
"resolutions": {
"d3": "^7.0.0"

31
src/jison/lint.mts Normal file
View File

@@ -0,0 +1,31 @@
/* eslint-disable no-console */
import { readFile } from 'fs/promises';
import { globby } from 'globby';
import { ESLint } from 'eslint';
// @ts-ignore no typings
import jison from 'jison';
const linter = new ESLint({
overrideConfig: { rules: { 'no-console': 'error' }, parser: '@typescript-eslint/parser' },
useEslintrc: false,
});
const lint = async (file: string): Promise<boolean> => {
const jisonCode = await readFile(file, 'utf8');
// @ts-ignore no typings
const jsCode = new jison.Generator(jisonCode, { moduleType: 'amd' }).generate();
const [result] = await linter.lintText(jsCode);
if (result.errorCount > 0) {
console.error(`Linting failed for ${file}`);
console.error(result.messages);
}
return result.errorCount === 0;
};
(async () => {
const jisonFiles = await globby(['./src/**/*.jison'], { dot: true });
const lintResults = await Promise.all(jisonFiles.map(lint));
if (lintResults.some((result) => result === false)) {
process.exit(1);
}
})();

0
src/jison/transformer.js → src/jison/transformer.cjs
View File

1756
yarn.lock
View File

File diff suppressed because it is too large Load Diff