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:
parent
ffaa4bbb38
commit
f110f9c290
3
subprojects/gst-devtools/dots-viewer/.gitignore
vendored
Normal file
3
subprojects/gst-devtools/dots-viewer/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
target/
|
||||
node_modules/
|
||||
|
18
subprojects/gst-devtools/dots-viewer/bundle-entry.js
Normal file
18
subprojects/gst-devtools/dots-viewer/bundle-entry.js
Normal 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';
|
3440
subprojects/gst-devtools/dots-viewer/package-lock.json
generated
3440
subprojects/gst-devtools/dots-viewer/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
5
subprojects/gst-devtools/dots-viewer/static/dist/bundle.css
vendored
Normal file
5
subprojects/gst-devtools/dots-viewer/static/dist/bundle.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
subprojects/gst-devtools/dots-viewer/static/dist/bundle.js
vendored
Normal file
2
subprojects/gst-devtools/dots-viewer/static/dist/bundle.js
vendored
Normal file
File diff suppressed because one or more lines are too long
40
subprojects/gst-devtools/dots-viewer/static/dist/bundle.js.LICENSE.txt
vendored
Normal file
40
subprojects/gst-devtools/dots-viewer/static/dist/bundle.js.LICENSE.txt
vendored
Normal 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
@ -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
@ -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);
|
||||
|
13
subprojects/gst-devtools/dots-viewer/update_vendored.sh
Executable file
13
subprojects/gst-devtools/dots-viewer/update_vendored.sh
Executable 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
|
72
subprojects/gst-devtools/dots-viewer/webpack.config.js
Normal file
72
subprojects/gst-devtools/dots-viewer/webpack.config.js
Normal 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')
|
||||
}
|
||||
}
|
||||
};
|
Loading…
x
Reference in New Issue
Block a user