Skip to content

Commit

Permalink
DEP Upgrade frontend build stack
Browse files Browse the repository at this point in the history
  • Loading branch information
GuySartorelli committed Jan 25, 2023
1 parent 113f966 commit 830018f
Show file tree
Hide file tree
Showing 10 changed files with 5,410 additions and 7,838 deletions.
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
10
18
6 changes: 6 additions & 0 deletions babel.config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 1 addition & 3 deletions client/src/bundles/bundle.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
// Include any legacy Entwine wrappers

// Include boot entrypoint
require('boot');
import 'boot';
4 changes: 2 additions & 2 deletions client/src/components/TOTP/Register.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import QRCode from 'qrcode.react';
import { QRCodeSVG } from 'qrcode.react';
import { formatCode } from 'lib/formatCode';
import { inject } from 'lib/Injector'; // eslint-disable-line

Expand Down Expand Up @@ -132,7 +132,7 @@ class Register extends Component {

<div className="mfa-totp__scan-code">
<div className="mfa-totp__scan-left">
<QRCode value={uri} size={160} />
<QRCodeSVG value={uri} size={160} />
</div>

<div className="mfa-totp__scan-middle">
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/TOTP/tests/Register-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ describe('Register', () => {
/>
);

expect(wrapper.find('QRCode')).toHaveLength(1);
expect(wrapper.find('QRCodeSVG')).toHaveLength(1);
});
});

Expand Down
51 changes: 26 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
{
"name": "silverstripe-totp-authenticator",
"main": "./client/src/boot/index.js",
"author": "SilverStripe Ltd",
"engines": {
"node": ">=10.x"
"node": ">=18.x"
},
"scripts": {
"build": "yarn && yarn lint && yarn test && NODE_ENV=production webpack -p --bail --progress",
"build": "yarn && yarn lint && yarn test && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
"dev": "NODE_ENV=development webpack --progress",
"watch": "NODE_ENV=development webpack --watch --progress",
"css": "WEBPACK_CHILD=css npm run build",
Expand All @@ -19,32 +18,34 @@
"lint-sass": "sass-lint client/src"
},
"dependencies": {
"@silverstripe/react-injector": "^0.1.2",
"classnames": "^2.2.6",
"prop-types": "^15.7.2",
"qrcode.react": "^0.9.3",
"react": "^16.8.3",
"react-dom": "^16.8.3"
"classnames": "^2.3.2",
"core-js": "^3.26.0",
"prop-types": "^15.8.1",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@silverstripe/eslint-config": "^0.0.6",
"@silverstripe/webpack-config": "^1.3.0",
"babel-jest": "^23.6.0",
"copy-webpack-plugin": "^4",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.10.0",
"jest-cli": "^23.6.0"
},
"babel": {
"presets": [
"env",
"react"
],
"plugins": [
"transform-object-rest-spread"
]
"@silverstripe/eslint-config": "^1.0.0-alpha6",
"@silverstripe/webpack-config": "^2.0.0-alpha5",
"babel-jest": "^29.2.2",
"copy-webpack-plugin": "^11.0.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest-cli": "^29.2.2",
"jest-environment-jsdom": "^29.3.1",
"react-16": "npm:react@^16.14.0",
"react-dom-16": "npm:react-dom@^16.14.0",
"webpack": "^5.74.0",
"webpack-cli": "^5.0.0"
},
"jest": {
"testEnvironment": "jsdom",
"moduleNameMapper": {
"^react-dom/client$": "react-dom-16",
"^react-dom((/.*)?)$": "react-dom-16$1",
"^react((/.*)?)$": "react-16$1"
},
"roots": [
"client/src"
],
Expand Down
77 changes: 32 additions & 45 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,63 +1,50 @@
const Path = require('path');
const { JavascriptWebpackConfig, CssWebpackConfig } = require('@silverstripe/webpack-config');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpackConfig = require('@silverstripe/webpack-config');
const {
resolveJS,
moduleJS,
pluginJS,
moduleCSS,
pluginCSS,
} = webpackConfig;

const ENV = process.env.NODE_ENV;
const PATHS = {
MODULES: 'node_modules',
FILES_PATH: '../',
ROOT: Path.resolve(),
SRC: Path.resolve('client/src'),
DIST: Path.resolve('client/dist'),
};


const config = [
{
name: 'js',
entry: {
bundle: `${PATHS.SRC}/bundles/bundle.js`,
},
output: {
path: PATHS.DIST,
filename: 'js/[name].js',
},
devtool: (ENV !== 'production') ? 'source-map' : '',
resolve: resolveJS(ENV, PATHS),
externals: {
'lib/Injector': 'Injector',
},
module: moduleJS(ENV, PATHS),
// Frontend JS bundle
const frontendJsConfig = new JavascriptWebpackConfig('js', PATHS, 'silverstripe/totp-authenticator')
.setEntry({
bundle: `${PATHS.SRC}/bundles/bundle.js`,
})
.mergeConfig({
plugins: [
...pluginJS(ENV, PATHS),
new CopyWebpackPlugin([
{ from: 'client/src/images', to: 'images' },
])
new CopyWebpackPlugin({
patterns: [
{
from: `${PATHS.SRC}/images`,
to: `${PATHS.DIST}/images`,
},
]
}),
],
},
{
name: 'css',
entry: {
})
.getConfig();

// Only include a single "external" which is actually added to the DOM separately
// Don't include any other externals as this will be used on the frontend
frontendJsConfig.externals = {
'lib/Injector': 'Injector',
};

const config = [
frontendJsConfig,
// sass to css
new CssWebpackConfig('css', PATHS)
.setEntry({
bundle: `${PATHS.SRC}/bundles/bundle.scss`,
},
output: {
path: PATHS.DIST,
filename: 'styles/[name].css',
},
devtool: (ENV !== 'production') ? 'source-map' : '',
module: moduleCSS(ENV, PATHS),
plugins: pluginCSS(ENV, PATHS),
},
})
.getConfig(),
];

// Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
module.exports = (process.env.WEBPACK_CHILD)
? config.find((entry) => entry.name === process.env.WEBPACK_CHILD)
: module.exports = config;
: config;
Loading

0 comments on commit 830018f

Please sign in to comment.