marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 16:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add IIFE

Browse Source
This commit is contained in:
Sidharth Vinod
2023-08-12 10:09:47 +05:30
parent 32abb54d8a
commit ac1ff75806
5 changed files with 62 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.esbuild/build.ts
View File

@@ -15,6 +15,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
await writeFile(`stats/meta-${entryName}.json`, JSON.stringify(metafile)); await writeFile(`stats/meta-${entryName}.json`, JSON.stringify(metafile));
} }
await build(getBuildConfig({ entryName, minify: false, core: true })); await build(getBuildConfig({ entryName, minify: false, core: true }));
await build(getBuildConfig({ entryName, minify: true, format: 'iife' }));
}; };
const handler = (e) => { const handler = (e) => {

4
.esbuild/server.ts
View File

@@ -8,6 +8,9 @@ async function createServer() {
const mermaidCtx = await context( const mermaidCtx = await context(
getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }) getBuildConfig({ minify: false, core: false, entryName: 'mermaid' })
); );
const mermaidIIFECtx = await context(
getBuildConfig({ minify: false, core: false, entryName: 'mermaid', format: 'iife' })
);
const externalCtx = await context( const externalCtx = await context(
getBuildConfig({ minify: false, core: false, entryName: 'mermaid-example-diagram' }) getBuildConfig({ minify: false, core: false, entryName: 'mermaid-example-diagram' })
); );
@@ -16,6 +19,7 @@ async function createServer() {
); );
mermaidCtx.watch(); mermaidCtx.watch();
mermaidIIFECtx.watch();
externalCtx.watch(); externalCtx.watch();
zenuml.watch(); zenuml.watch();

22
.esbuild/util.ts
View File

@@ -12,17 +12,15 @@ interface MermaidBuildOptions {
minify: boolean; minify: boolean;
core?: boolean; core?: boolean;
metafile?: boolean; metafile?: boolean;
format?: 'esm' | 'iife';
entryName: keyof typeof packageOptions; entryName: keyof typeof packageOptions;
} }
const buildOptions = (override: BuildOptions): BuildOptions => { const buildOptions = (override: BuildOptions): BuildOptions => {
return { return {
bundle: true, bundle: true,
splitting: true,
minify: true, minify: true,
keepNames: true, keepNames: true,
banner: { js: '"use strict";' },
format: 'esm',
platform: 'browser', platform: 'browser',
tsconfig: 'tsconfig.json', tsconfig: 'tsconfig.json',
resolveExtensions: ['.ts', '.js', '.json', '.jison', '.yaml'], resolveExtensions: ['.ts', '.js', '.json', '.jison', '.yaml'],
@@ -30,7 +28,6 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
outdir: 'dist', outdir: 'dist',
plugins: [jisonPlugin, jsonSchemaPlugin], plugins: [jisonPlugin, jsonSchemaPlugin],
sourcemap: 'external', sourcemap: 'external',
outExtension: { '.js': '.mjs' },
...override, ...override,
}; };
}; };
@@ -40,13 +37,16 @@ export const getBuildConfig = ({
core, core,
entryName, entryName,
metafile, metafile,
format,
}: MermaidBuildOptions): BuildOptions => { }: MermaidBuildOptions): BuildOptions => {
const external: string[] = ['require', 'fs', 'path']; const external: string[] = ['require', 'fs', 'path'];
const { name, file, packageName } = packageOptions[entryName]; const { name, file, packageName } = packageOptions[entryName];
let output: BuildOptions = buildOptions({ let output: BuildOptions = buildOptions({
absWorkingDir: resolve(__dirname, `../packages/${packageName}`), absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
entryPoints: { entryPoints: {
[`${name}${core ? '.core' : '.esm'}${minify ? '.min' : ''}`]: `src/${file}`, [`${name}${core ? '.core' : format === 'iife' ? '' : '.esm'}${
minify ? '.min' : ''
}`]: `src/${file}`,
}, },
metafile, metafile,
}); });
@@ -61,5 +61,17 @@ export const getBuildConfig = ({
external.push(...Object.keys(dependencies)); external.push(...Object.keys(dependencies));
output.external = external; 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; return output;
}; };

11
cypress/integration/other/iife.spec.js Normal file
View File

@@ -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');
});
});

29
cypress/platform/iife.html Normal file
View File

@@ -0,0 +1,29 @@
<html>
<body>
<pre id="diagram" class="mermaid">
graph TB
a --> b
a --> c
b --> d
c --> d
</pre>
<div id="d2"></div>
<script src="/mermaid.min.js"></script>
<script>
mermaid.default.initialize({
startOnLoad: true,
});
const value = `graph TD\nHello --> World`;
const el = document.getElementById('d2');
mermaid.default.render('did', value).then(({ svg }) => {
console.log(svg);
el.innerHTML = svg;
if (window.Cypress) {
window.rendered = true;
}
});
</script>
</body>
</html>