devtools: dots-viewer: Bundle js dependncies using webpack

And avoid relying on cdn's and require access to the network to use `dots-viewer`

And git ignore `node_modules`

Fixes https://gitlab.freedesktop.org/gstreamer/gstreamer/-/issues/4334

Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/8754>
This commit is contained in:
Thibault Saunier 2025-04-01 09:01:41 -03:00 committed by GStreamer Marge Bot
parent ffaa4bbb38
commit f110f9c290
13 changed files with 3617 additions and 32 deletions

View File

@ -0,0 +1,3 @@
target/
node_modules/

View File

@ -0,0 +1,18 @@
// Import all dependencies first
import $ from 'jquery';
import 'jquery-mousewheel';
import 'jquery-color';
import 'bootstrap';
import 'dragscroll';
import * as vizModule from '@viz-js/viz';
import FuseModule from 'fuse.js';
// Make required libraries available globally
window.$ = window.jQuery = $;
window.viz = vizModule;
window.instance = vizModule.instance;
window.Fuse = FuseModule;
// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

File diff suppressed because it is too large Load Diff

View File

@ -4,12 +4,30 @@
"description": "GStreamer dot files viewer",
"main": "static/js/gstdots.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"build:dev": "webpack --config webpack.config.js --mode development"
},
"author": "Thibault Saunier <tsaunier@igalia.com>",
"license": "MPL-2.0",
"dependencies": {
"@viz-js/viz": "^3.4.0",
"fuse.js": "^7.0.0"
"bootstrap": "^3.3.4",
"dragscroll": "0.0.8",
"fuse.js": "^7.0.0",
"jquery": "^2.2.4",
"jquery-color": "^2.2.0",
"jquery-mousewheel": "^3.2.2"
},
"devDependencies": {
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.2",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.9.2",
"style-loader": "^4.0.0",
"terser-webpack-plugin": "^5.3.14",
"webpack": "^5.98.0",
"webpack-cli": "^5.1.4"
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,40 @@
/*!
* Sizzle CSS Selector Engine v2.2.1
* http://sizzlejs.com/
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2015-10-17
*/
/*!
* jQuery Color Animations v2.2.0
* https://github.com/jquery/jquery-color
*
* Copyright OpenJS Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* Date: Sun May 10 09:02:36 2020 +0200
*/
/*!
* jQuery JavaScript Library v2.2.4
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2016-05-20T17:23Z
*/
/*!
* jQuery Mousewheel 3.2.2
* Copyright OpenJS Foundation and other contributors
*/

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,4 @@
import { instance } from "/js/viz-standalone.mjs";
import Fuse from '/js/fuse.min.mjs'
import "/dist/bundle.js";
let ws = null;
@ -54,7 +53,7 @@ async function generateSvg(img) {
img.creating_svg = true;
try {
let viz = await instance();
let viz = await window.instance();
const svg = viz.renderSVGElement(img.dot_info.content);
img.src = URL.createObjectURL(new Blob([svg.outerHTML], { type: 'image/svg+xml' }));
img.creating_svg = false;
@ -303,7 +302,7 @@ function updateSearch() {
title: div.querySelector('h2').textContent
}));
const fuse = new Fuse(list, options);
const fuse = new window.Fuse(list, options);
const results = fuse.search(input.value);
for (let div of allDivs) {

File diff suppressed because one or more lines are too long

View File

@ -22,7 +22,7 @@ furnished to do so, subject to the following conditions:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="/dist/bundle.css">
<link rel="stylesheet" href="/css/graphviz.svg.css">
</head>
@ -52,13 +52,7 @@ furnished to do so, subject to the following conditions:
<button id="save-svg" class="btn btn-primary btn-sm" style="margin-right: 5px;">Save SVG</button>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/jquery/jquery-color/master/jquery.color.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://asvd.github.io/dragscroll/dragscroll.js"></script>
<script src='/dist/bundle.js'></script>
<script type="text/javascript" src="/js/jquery.graphviz.svg.js"></script>
<script type="text/javascript">
let url = new URL(window.location.href);

View File

@ -0,0 +1,13 @@
#!/bin/bash
set -e
if ! command -v npm &> /dev/null; then
echo "npm is not installed. Please install Node.js and npm first."
exit 1
fi
echo "Installing dependencies..."
npm install
echo "Building bundles..."
npm run build

View File

@ -0,0 +1,72 @@
const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
bundle: './bundle-entry.js'
},
output: {
path: path.resolve(__dirname, 'static/dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
// For Bootstrap fonts
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name][ext]'
}
}
]
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
passes: 2
},
mangle: true,
output: {
comments: false
}
}
}),
new CssMinimizerPlugin() // For CSS optimization
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
resolve: {
alias: {
'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js'),
'/js/vendor/viz-standalone.mjs': path.resolve(__dirname, 'node_modules/@viz-js/viz/lib/viz-standalone.mjs'),
'/js/vendor/fuse.min.mjs': path.resolve(__dirname, 'node_modules/fuse.js/dist/fuse.mjs')
}
}
};