diff --git a/.esbuild/build.ts b/.esbuild/build.ts
index e00ac39e4..bee13af51 100644
--- a/.esbuild/build.ts
+++ b/.esbuild/build.ts
@@ -15,6 +15,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
await writeFile(`stats/meta-${entryName}.json`, JSON.stringify(metafile));
}
await build(getBuildConfig({ entryName, minify: false, core: true }));
+ await build(getBuildConfig({ entryName, minify: true, format: 'iife' }));
};
const handler = (e) => {
diff --git a/.esbuild/server.ts b/.esbuild/server.ts
index 372f92409..c93b4bbda 100644
--- a/.esbuild/server.ts
+++ b/.esbuild/server.ts
@@ -8,6 +8,9 @@ async function createServer() {
const mermaidCtx = await context(
getBuildConfig({ minify: false, core: false, entryName: 'mermaid' })
);
+ const mermaidIIFECtx = await context(
+ getBuildConfig({ minify: false, core: false, entryName: 'mermaid', format: 'iife' })
+ );
const externalCtx = await context(
getBuildConfig({ minify: false, core: false, entryName: 'mermaid-example-diagram' })
);
@@ -16,6 +19,7 @@ async function createServer() {
);
mermaidCtx.watch();
+ mermaidIIFECtx.watch();
externalCtx.watch();
zenuml.watch();
diff --git a/.esbuild/util.ts b/.esbuild/util.ts
index c96e35551..236e0c4d0 100644
--- a/.esbuild/util.ts
+++ b/.esbuild/util.ts
@@ -12,17 +12,15 @@ interface MermaidBuildOptions {
minify: boolean;
core?: boolean;
metafile?: boolean;
+ format?: 'esm' | 'iife';
entryName: keyof typeof packageOptions;
}
const buildOptions = (override: BuildOptions): BuildOptions => {
return {
bundle: true,
- splitting: true,
minify: true,
keepNames: true,
- banner: { js: '"use strict";' },
- format: 'esm',
platform: 'browser',
tsconfig: 'tsconfig.json',
resolveExtensions: ['.ts', '.js', '.json', '.jison', '.yaml'],
@@ -30,7 +28,6 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
outdir: 'dist',
plugins: [jisonPlugin, jsonSchemaPlugin],
sourcemap: 'external',
- outExtension: { '.js': '.mjs' },
...override,
};
};
@@ -40,13 +37,16 @@ export const getBuildConfig = ({
core,
entryName,
metafile,
+ format,
}: MermaidBuildOptions): BuildOptions => {
const external: string[] = ['require', 'fs', 'path'];
const { name, file, packageName } = packageOptions[entryName];
let output: BuildOptions = buildOptions({
absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
entryPoints: {
- [`${name}${core ? '.core' : '.esm'}${minify ? '.min' : ''}`]: `src/${file}`,
+ [`${name}${core ? '.core' : format === 'iife' ? '' : '.esm'}${
+ minify ? '.min' : ''
+ }`]: `src/${file}`,
},
metafile,
});
@@ -61,5 +61,17 @@ export const getBuildConfig = ({
external.push(...Object.keys(dependencies));
output.external = external;
}
+
+ if (format === 'iife') {
+ output.format = 'iife';
+ output.splitting = false;
+ output.globalName = 'mermaid';
+ output.outExtension = { '.js': '.js' };
+ } else {
+ output.format = 'esm';
+ output.splitting = true;
+ output.outExtension = { '.js': '.mjs' };
+ }
+
return output;
};
diff --git a/cypress/integration/other/iife.spec.js b/cypress/integration/other/iife.spec.js
new file mode 100644
index 000000000..36508f0bb
--- /dev/null
+++ b/cypress/integration/other/iife.spec.js
@@ -0,0 +1,11 @@
+describe('IIFE', () => {
+ beforeEach(() => {
+ cy.visit('http://localhost:9000/iife.html');
+ });
+
+ it('should render when using mermaid.min.js', () => {
+ cy.window().should('have.property', 'rendered', true);
+ cy.get('svg').should('be.visible');
+ cy.get('#d2').should('have.text', 'Hello');
+ });
+});
diff --git a/cypress/platform/iife.html b/cypress/platform/iife.html
new file mode 100644
index 000000000..1314434bb
--- /dev/null
+++ b/cypress/platform/iife.html
@@ -0,0 +1,29 @@
+
+
+
+graph TB
+ a --> b
+ a --> c
+ b --> d
+ c --> d
+
+
+
+
+
+
+
+