@Emil You ever figure this out? Kinda stuck on a similar issue when trying to build a new component. Trying to set it up to automatically include these files into the package but haven’t been able to figure out a proper way to set that up.
Setup my webpack.config.js as:
const path = require('path');
const webpack = require('webpack');
const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const fs = require('fs');
const packagejson = require('./package.json');
const dashLibraryName = packagejson.name.replace(/-/g, '_');
module.exports = (env, argv) => {
const mode = argv && argv.mode || 'production';
const filename = `${dashLibraryName}.${mode === 'development' ? 'dev' : 'min'}.js`;
// Check if the icons directory exists
const iconsDir = path.resolve(__dirname, 'node_modules', '@blueprintjs', 'icons', 'resources', 'icons');
const iconsDirExists = fs.existsSync(iconsDir);
const copyPatterns = [
{ from: 'src/lib/components/assets', to: 'assets' },
{ from: 'node_modules/@blueprintjs/core/lib/css', to: 'assets/css' },
{ from: 'node_modules/@blueprintjs/icons/lib/css', to: 'assets/css' },
];
// Only add the icons directory if it exists
if (iconsDirExists) {
copyPatterns.push({ from: iconsDir, to: 'assets/icons' });
}
return {
mode,
entry: {main: './src/lib/index.js'},
output: {
path: path.resolve(__dirname, dashLibraryName),
filename,
library: dashLibraryName,
libraryTarget: 'window',
},
devtool: 'source-map',
externals: {
react: 'React',
'react-dom': 'ReactDOM',
'plotly.js': 'Plotly',
'prop-types': 'PropTypes',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/fonts/',
},
},
],
},
{
test: /\.svg$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/icons/',
},
},
],
},
],
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new WebpackDashDynamicImport(),
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
exclude: ['async-plotlyjs']
}),
new CopyWebpackPlugin({
patterns: copyPatterns,
}),
]
};
};
setup my package.js like:
{
"name": "dash_mosaic",
"version": "0.0.1",
"description": "react mosaic for dash",
"repository": {
"type": "git",
"url": "git://github.com/pip-install-python/dash-mosaic.git"
},
"bugs": {
"url": "https://github.com/pip-install-python/dash-mosaic/issues"
},
"homepage": "https://github.com/pip-install-python/dash-mosaic",
"main": "build/index.js",
"scripts": {
"start": "webpack serve --config ./webpack.serve.config.js --open",
"validate-init": "python _validate_init.py",
"prepublishOnly": "npm run validate-init",
"build:js": "webpack --mode production",
"build:backends": "dash-generate-components ./src/lib/components dash_mosaic -p package-info.json --r-prefix '' --jl-prefix '' --ignore \\.test\\.",
"build:backends-activated": "(. venv/bin/activate || venv\\scripts\\activate && npm run build:backends)",
"build": "npm run build:js && npm run build:backends",
"build:activated": "npm run build:js && npm run build:backends-activated"
},
"author": "Pip Install Python <pipinstallpython@gmail.com>",
"license": "MIT",
"dependencies": {
"@blueprintjs/core": "^5.13.0",
"@blueprintjs/icons": "^5.13.0",
"lodash": "^4.17.21",
"ramda": "^0.26.1",
"react-mosaic-component": "^6.1.0"
},
"devDependencies": {
"@babel/core": "^7.22.1",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/preset-env": "^7.22.2",
"@babel/preset-react": "^7.22.3",
"@plotly/dash-component-plugins": "^1.2.3",
"@plotly/webpack-dash-dynamic-import": "^1.2.0",
"@svgr/webpack": "^6.5.1",
"babel-eslint": "^10.1.0",
"babel-loader": "^9.1.2",
"copy-webpack-plugin": "^9.1.0",
"copyfiles": "^2.1.1",
"css-loader": "^6.8.1",
"eslint": "^6.0.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-react": "^7.14.2",
"file-loader": "^6.2.0",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-docgen": "^5.4.3",
"react-dom": "^18.3.1",
"style-loader": "^3.3.3",
"styled-jsx": "^5.1.6",
"webpack": "^5.84.1",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0"
},
"engines": {
"node": ">=8.11.0",
"npm": ">=6.1.0"
},
"componentProperties": {
"DashMosaic": {
"props": {
"id": {
"type": {
"name": "string"
},
"required": false,
"description": "The ID used to identify this component in Dash callbacks."
},
"layout": {
"type": {
"name": "object"
},
"required": false,
"description": "The layout configuration for the mosaic."
},
"theme": {
"type": {
"name": "string"
},
"required": false,
"description": "The theme to apply to the mosaic."
},
"tileContent": {
"type": {
"name": "object"
},
"required": false,
"description": "An object containing the content for each tile."
},
"style": {
"type": {
"name": "object"
},
"required": false,
"description": "Inline style to apply to the mosaic container."
}
}
}
}
when i try and import those woff2, woff, ttf and main files in either the index.js or the .react.js file it seems to break but if I put those files in the root/assets folder they work and display correctly. But when I try and run python setup.py sdist bdist_wheel when I try and run pip install dash_mosaic-0.0.1.tar.gz the component works but the assets are not included.
Tried to follow your comments @jinnyzor and get this setup but wasn’t able to also seems like The ultimate learning resource for creative web development and web apps was taken down.
. I tried cloning your repo, setting up the Python env, installing packages via npm, and running the example. However, it doesn’t seem to work for me,
