Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
@amcclain
amcclain committed Nov 21, 2022
2 parents f3272b4 + 4899c94 commit 954280c
Show file tree
Hide file tree
Showing 6 changed files with 993 additions and 750 deletions.
23 changes: 22 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,29 @@
# Changelog

## v6.1.0 - 2022-11-21

### 🎁 New Features

* Typescript support for Hoist React v54+ via `@babel/plugin-transform-typescript`.
* Remains compatible for use with JS-only application projects and prior JS-only versions of Hoist React.

### 📚 Libraries

* @babel/* `7.18 -> 7.20`
* @xh/eslint-config `4.0 -> 5.0`
* babel-loader `8.2 -> 9.1`
* mini-css-extract-plugin `2.6 -> 2.7`
* sass `1.53 -> 1.56`
* sass-loader `13.0 -> 13.2`
* webpack `5.73 -> 5.75`
* webpack-cli `4.10 -> 5.0`
* webpack-dev-server `4.9 -> 4.11`

[Commit Log](https://github.com/xh/hoist-dev-utils/compare/v6.0.0...v6.1.0)

## v6.0.0 - 2022-07-19

This release features a major update to Webpack v5, along with updates to all supporting libraries.
* This release features a major update to Webpack v5, along with updates to all supporting libraries.

### 💥 Breaking Changes

Expand Down
22 changes: 13 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ including Webpack Dev Server, Babel, and other essential loaders.

In most cases this package could be the _only_ dev dependency required by Hoist React apps, although
apps might wish to configure additional tooling such as stylelint (for linting SASS files) or
lint-staged (for running linters as a pre-commit git hook). See the
lint-staged and husky (for running linters as a pre-commit git hook). See the
[Toolbox package.json](https://github.com/xh/toolbox/blob/develop/client-app/package.json) for
examples of both of these libraries in action.
examples of these libraries in action.

### Webpack configuration

Expand Down Expand Up @@ -56,7 +56,6 @@ versioned 1.2.3 release).
See the [Hoist React docs](https://github.com/xh/hoist-react/blob/develop/docs/build-and-deploy.md)
for step-by-step details on the build process.


### Favicons

To include a favicon with your app, provide the `favicon` option to `configureWebpack()`. This can be either
Expand All @@ -71,27 +70,32 @@ return configureWebpack({
```

If your app is intended to be used on mobile devices, you may want to also include a wider variety of favicons.
The following files will be automatically bundled in your app's manifest.json if they are found your `/public` folder:
The following files will be automatically bundled in your app's manifest.json if they are found in your project's
`/client-app/public` folder:

+ `favicon-192.png` (192px x 192px)
+ `favicon-512.png` (512px x 512px)
+ `apple-touch-icon.png` (180px x 180px)

You can use the `svg-favicon.sh` script to automatically create these favicons from a square SVG. Note that this script
requires inkscape to be installed. Download the latest version from [https://inkscape.org/](https://inkscape.org/)
requires inkscape to be installed. Download the latest version from [https://inkscape.org/](https://inkscape.org/) or
install on Mac via Homebrew with `brew install inkscape`.

Inkscape includes a command-line interface which is leveraged by the script. In order for the script to be able to use it,
you must first symlink Inkscape to `/usr/local/bin`:
Inkscape includes a command-line interface which is leveraged by the script. In order for the script to be able to use
it, you must first symlink Inkscape to `/usr/local/bin`. (Note this step is _not_ required if you have installed via
Homebrew.)

```shell
ln -s /Applications/Inkscape.app/Contents/MacOS/inkscape \
/usr/local/bin/inkscape
```

Then run the script, passing a path to the SVG file as the argument:
Then run the script, passing a path to the SVG file as the argument. The command below assumes that you have
`hoist-dev-utils` checked out as a sibling of your top-level project directory, and that you are running the command
from within `$projectDir/client-app/public`:

```shell
sh svg-favicon.sh ./favicon.svg
../../../hoist-dev-utils/svg-favicon.sh favicon.svg
```

### ESLint Configuration
Expand Down
17 changes: 11 additions & 6 deletions configureWebpack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,10 +301,10 @@ async function configureWebpack(env) {
const appDirPath = path.resolve(srcPath, 'apps'),
apps = fs
.readdirSync(appDirPath)
.filter(f => f.endsWith('.js'))
.filter(f => f.endsWith('.js') || f.endsWith('.ts'))
.map(f => {
return {
name: f.replace('.js', ''),
name: f.replace('.js', '').replace('.ts', ''),
path: path.resolve(appDirPath, f)
};
}),
Expand Down Expand Up @@ -374,7 +374,7 @@ async function configureWebpack(env) {
// Add JSX to support imports from .jsx source w/o needing to add the extension.
// Include "*" to continue supporting other imports that *do* specify an extension
// within the import statement (i.e. `import './foo.png'`). Yes, it's confusing.
extensions: ['*', '.js', '.jsx', '.json']
extensions: ['*', '.js', '.ts', '.jsx', '.tsx', '.json']
},

// Ensure Webpack can find loaders installed both within the top-level node_modules dir for
Expand Down Expand Up @@ -424,15 +424,16 @@ async function configureWebpack(env) {
},

//------------------------
// JS processing
// JS/TS processing
// Transpile via Babel, with presets/plugins to support Hoist's use of modern / staged JS features.
//------------------------
{
test: /\.(jsx?)$/,
test: /\.(jsx?)$|\.(tsx?)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-typescript',
'@babel/preset-react',
[
'@babel/preset-env',
Expand All @@ -456,6 +457,11 @@ async function configureWebpack(env) {
]
],
plugins: [
// Support Typescript via Babel. `isTSX` option allows use of JSX inline with
// .js files for older JS apps. Typescript apps must use the .tsx extension for
// any files containing JSX syntax.
['@babel/plugin-transform-typescript', {allowDeclareFields: true, isTSX: true}],

// Support our current decorator syntax, for MobX and Hoist decorators.
// See notes @ https://babeljs.io/docs/en/babel-plugin-proposal-decorators#legacy
['@babel/plugin-proposal-decorators', {legacy: true}],
Expand Down Expand Up @@ -702,7 +708,6 @@ async function configureWebpack(env) {
};
}


//------------------------
// Implementation
//------------------------
Expand Down
33 changes: 17 additions & 16 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@xh/hoist-dev-utils",
"version": "6.0.0",
"version": "7.0.0-SNAPSHOT",
"description": "Utilities for configuring builds of Hoist-React client applications.",
"repository": "github:xh/hoist-dev-utils",
"homepage": "https://github.com/xh/hoist-dev-utils",
Expand All @@ -11,16 +11,17 @@
"configureWebpack.js"
],
"dependencies": {
"@babel/core": "~7.18.9",
"@babel/plugin-proposal-decorators": "~7.18.9",
"@babel/preset-env": "~7.18.9",
"@babel/preset-react": "~7.18.6",
"@babel/core": "^7.20",
"@babel/plugin-proposal-decorators": "^7.20",
"@babel/preset-env": "^7.20",
"@babel/preset-react": "^7.18",
"@babel/preset-typescript": "^7.18",
"@cerner/duplicate-package-checker-webpack-plugin": "~2.3.0",
"@types/lodash": "^4.0.0",
"@types/react": "^17.0.0",
"@xh/eslint-config": "~4.0.1",
"autoprefixer": "~10.4.7",
"babel-loader": "~8.2.5",
"@types/react": "^18.0.0",
"@xh/eslint-config": "^5.0.0",
"autoprefixer": "~10.4.13",
"babel-loader": "~9.1.0",
"babel-plugin-transform-imports": "~2.0.0",
"case-sensitive-paths-webpack-plugin": "~2.4.0",
"changelog-parser": "~2.8.1",
Expand All @@ -31,21 +32,21 @@
"html-webpack-plugin": "~5.5.0",
"html-webpack-tags-plugin": "~3.0.2",
"lodash": "~4.17.21",
"mini-css-extract-plugin": "~2.6.1",
"mini-css-extract-plugin": "~2.7.0",
"postcss": "~8.4.14",
"postcss-flexbugs-fixes": "~5.0.2",
"postcss-loader": "~7.0.1",
"rimraf": "~3.0.2",
"sass": "~1.53.0",
"sass-loader": "~13.0.2",
"sass": "~1.56.1",
"sass-loader": "~13.2.0",
"sass-material-colors": "~0.0.5",
"style-loader": "~3.3.1",
"terser-webpack-plugin": "~5.3.3",
"url-loader": "~4.1.1",
"webpack": "~5.73.0",
"webpack-bundle-analyzer": "~4.5.0",
"webpack-cli": "~4.10.0",
"webpack-dev-server": "~4.9.3",
"webpack": "~5.75.0",
"webpack-bundle-analyzer": "~4.7.0",
"webpack-cli": "~5.0.0",
"webpack-dev-server": "~4.11.1",
"webpackbar": "~5.0.2"
}
}
Empty file modified svg-favicon.sh
100644 → 100755
View file
Empty file.
Loading

0 comments on commit 954280c

Please sign in to comment.