change(ui) - switch to yern
This commit is contained in:
Shekar Siri
parent
719dab4b8e
commit
0ef43a30fd
7 changed files with 11 additions and 27144 deletions
|
|
@ -2,7 +2,7 @@
|
|||
OpenReplay prototype UI
|
||||
|
||||
On new icon addition:
|
||||
`npm run generate:icons`
|
||||
`yarn gen:icons`
|
||||
|
||||
## Documentation
|
||||
|
||||
|
|
|
|||
|
|
@ -1,181 +0,0 @@
|
|||
const webpack = require('webpack');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
// const CircularDependencyPlugin = require('circular-dependency-plugin')
|
||||
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||
const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); //TODO: replace Moment with date-fns ??
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const alias = require('./path-alias');
|
||||
const environments = require('./env');
|
||||
|
||||
|
||||
const DIST_DIR = 'public';
|
||||
|
||||
const GLOBAL_STYLES_DIR = 'app/styles';
|
||||
|
||||
const cssEntrypoints = [
|
||||
'codemirror/lib/codemirror.css',
|
||||
'codemirror/theme/yeti.css',
|
||||
'codemirror/addon/lint/lint.css',
|
||||
'react-daterange-picker/dist/css/react-calendar.css',
|
||||
'react-datepicker/dist/react-datepicker.css',
|
||||
'rc-time-picker/assets/index.css',
|
||||
];
|
||||
|
||||
const babelLoader = {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
[ '@babel/preset-env', { // probably, use dynamic imports for polifills in future
|
||||
"targets": "> 4%, not dead",
|
||||
useBuiltIns: 'entry',
|
||||
corejs: 3
|
||||
}],
|
||||
'@babel/preset-react',
|
||||
"@babel/preset-flow", //TODO: remove, use ts
|
||||
],
|
||||
plugins: [
|
||||
"@babel/plugin-syntax-bigint",
|
||||
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
|
||||
[ '@babel/plugin-proposal-decorators', { legacy: true } ],
|
||||
[ '@babel/plugin-proposal-class-properties', { loose: true }],
|
||||
[ '@babel/plugin-proposal-private-methods', { loose: true }],
|
||||
// 'recharts'
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const cssFiles = fs.readdirSync(GLOBAL_STYLES_DIR, { withFileTypes: true });
|
||||
cssFiles.forEach(file => {
|
||||
if (/.css$/.test(file.name)) {
|
||||
const pathFullName = path.join(__dirname, GLOBAL_STYLES_DIR, file.name);
|
||||
cssEntrypoints.push(pathFullName);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function prepareEnv(env) {
|
||||
const pEnv = {};
|
||||
Object.keys(env).forEach(key => {
|
||||
pEnv[ `window.ENV.${ key }` ] = typeof env[ key ] === 'function' ? env[ key ]() : JSON.stringify(env[ key ]);
|
||||
});
|
||||
return pEnv;
|
||||
}
|
||||
|
||||
module.exports = (envName = 'local') => {
|
||||
const env = environments[ envName ];
|
||||
const cssFileLoader = {
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
options: {
|
||||
hmr: !env.PRODUCTION,
|
||||
},
|
||||
}
|
||||
return {
|
||||
// Polyfill only for async (TODO)
|
||||
entry: [ './app/initialize.js' ].concat(cssEntrypoints),
|
||||
output: {
|
||||
path: path.join(__dirname, DIST_DIR),
|
||||
filename: 'app-[contenthash:7].js',
|
||||
publicPath: '/',
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
'React': 'react' // back code compatability
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
path: path.join(__dirname, DIST_DIR),
|
||||
filename: 'app-[contenthash:7].css'
|
||||
}),
|
||||
new CopyWebpackPlugin([ 'app/assets' ]),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'app/assets/index.html'
|
||||
}),
|
||||
new MomentLocalesPlugin(),
|
||||
new webpack.DefinePlugin(prepareEnv(env)),
|
||||
// new BundleAnalyzerPlugin({ analyzerMode: 'static'}),
|
||||
// new CircularDependencyPlugin({
|
||||
// // exclude detection of files based on a RegExp
|
||||
// exclude: /node_modules/,
|
||||
// // add errors to webpack instead of warnings
|
||||
// failOnError: true,
|
||||
// // allow import cycles that include an asyncronous import,
|
||||
// // e.g. via import(/* webpackMode: "weak" */ './file.js')
|
||||
// allowAsyncCycles: false,
|
||||
// // set the current working directory for displaying module paths
|
||||
// cwd: process.cwd(),
|
||||
// })
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
|
||||
// global and module css separation. TODO more beautyfull
|
||||
{
|
||||
test: /\.css$/,
|
||||
include: [ path.join(__dirname, "app/components"), path.join(__dirname, "app/player") ],
|
||||
use: [
|
||||
cssFileLoader,
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
modules: {
|
||||
localIdentName: '[name]_[local]_[hash:base64:7]'
|
||||
},
|
||||
}
|
||||
},
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
include: [ path.join(__dirname, "node_modules"), path.join(__dirname, "app/styles") ],
|
||||
use: [
|
||||
cssFileLoader,
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
}
|
||||
},
|
||||
'postcss-loader'
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: ['@svgr/webpack'],
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: [ path.join(__dirname, "app"), path.join(__dirname, ".storybook") ],
|
||||
use: babelLoader,
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
include: path.join(__dirname, "app"),
|
||||
use: [ 'ts-loader' ]
|
||||
},
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias,
|
||||
extensions: ['.js', '.json', '.ts', '.tsx' ],
|
||||
},
|
||||
mode: env.PRODUCTION ? 'production' : 'development',
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
},
|
||||
},
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, DIST_DIR),
|
||||
//compress: true,
|
||||
port: 3333,
|
||||
historyApiFallback: true,
|
||||
},
|
||||
stats: 'errors-only',
|
||||
devtool: env.SOURCEMAP && 'source-map'
|
||||
};
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ check_prereq() {
|
|||
function build(){
|
||||
cp .env.sample .env
|
||||
# Run docker as the same user, else we'll run in to permission issues.
|
||||
docker run --rm -v /etc/passwd:/etc/passwd -u `id -u`:`id -g` -v $(pwd):/home/${USER} -w /home/${USER} --name node_build node:14-stretch-slim /bin/bash -c "npm install && npm run build"
|
||||
docker run --rm -v /etc/passwd:/etc/passwd -u `id -u`:`id -g` -v $(pwd):/home/${USER} -w /home/${USER} --name node_build node:14-stretch-slim /bin/bash -c "yarn && yarn build"
|
||||
echo "frotend build completed"
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
#!/bin/bash
|
||||
npm install --legacy-peer-deps
|
||||
yarn
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
- [Vagrant](../scripts/vagrant/README.md)
|
||||
- Node Version 17
|
||||
- npm
|
||||
- yarn
|
||||
|
||||
### Development environment
|
||||
|
||||
|
|
@ -14,10 +14,5 @@ sed -i "s#API_EDP: .*#API_EDP: 'http://openreplay.local/api',#g" env.js
|
|||
sed -i "s#ASSETS_HOST: .*#ASSETS_HOST: 'http://openreplay.local/assets',#g" env.js
|
||||
|
||||
# Installing dependencies
|
||||
npm install
|
||||
|
||||
# Generating assets
|
||||
npm run gen:css-types
|
||||
npm run gen:icons
|
||||
npm run gen:colors
|
||||
yarn
|
||||
```
|
||||
|
|
|
|||
26948
frontend/package-lock.json
generated
26948
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,18 +1,19 @@
|
|||
{
|
||||
"name": "openreplay",
|
||||
"version": "1.3.6",
|
||||
"version": "1.7.0",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"start": "webpack serve",
|
||||
"build": "npm run gen:icons && npm run gen:colors && rm -rf public && webpack",
|
||||
"build": "yarn gen:icons && yarn gen:colors && rm -rf public && webpack",
|
||||
"upload:minio": "node ./scripts/upload-minio.js",
|
||||
"deploy:minio": "npm run build:minio && npm run upload:minio",
|
||||
"deploy:minio": "yarn build:minio && yarn upload:minio",
|
||||
"lint": "eslint --fix app; exit 0",
|
||||
"gen:constants": "node ./scripts/constants.js",
|
||||
"gen:icons": "node ./scripts/icons.ts",
|
||||
"gen:colors": "node ./scripts/colors.js",
|
||||
"storybook": "start-storybook",
|
||||
"flow": "flow",
|
||||
"postinstall": "npm run gen:icons && npm run gen:colors"
|
||||
"postinstall": "yarn gen:icons && yarn gen:colors"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sentry/browser": "^5.21.1",
|
||||
|
|
@ -64,7 +65,7 @@
|
|||
"socket.io-client": "^4.4.1",
|
||||
"source-map": "^0.7.3",
|
||||
"syncod": "^0.0.1",
|
||||
"tailwindcss": "^3.0.24"
|
||||
"tailwindcss": "^3.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.10.5",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue