Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set Up dev 'watch' for aiconfig-editor declarations HMR #955

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use react-app-rewired and react-app-rewire-alias for DevX
# Use react-app-rewired and react-app-rewire-alias for DevX

The first step in fixing the DevX for the new packaging structure is to get HMR working to ensure changes to code get reflected in the browser during development. This PR leverages `react-app-rewired` and `react-app-rewire-alias` to allow us to:
1. Override the default configurations set in place by the `react-scripts` setup we're using (mainly, webpack configuration)
2. Specify aliases for paths, which enables us to link to our local aiconfig-editor package code instead of the node modules package

Unfortunately, 2. only applies to the react code itself right now, NOT type declarations. So, you can do something like remove/change existing components in jsx, but changing their props will not be reflected in HMR...

Next PR should fix that
Ryan Holinshead committed Jan 26, 2024
commit 6ac69b6f409451a7bee79250d0719fe60c8f6432
1 change: 1 addition & 0 deletions python/src/aiconfig/editor/client/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@
"@types/",
"build/",
"node_modules/",
"config-overrides.js",
"public/",
"postbuild.js"
]
5 changes: 5 additions & 0 deletions python/src/aiconfig/editor/client/config-overrides.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const { alias, configPaths } = require("react-app-rewire-alias");

const aliasMap = configPaths("./tsconfig.paths.json");

module.exports = alias(aliasMap);
8 changes: 5 additions & 3 deletions python/src/aiconfig/editor/client/package.json
Original file line number Diff line number Diff line change
@@ -3,10 +3,10 @@
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"postbuild": "node postbuild.js",
"test": "react-scripts test",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"lint": "eslint . --max-warnings=0"
},
@@ -45,6 +45,8 @@
"eslint": "^8",
"eslint-config-next": "14.0.2",
"eslint-plugin-react-hooks": "^4.6.0",
"react-app-rewire-alias": "^1.1.7",
"react-app-rewired": "^2.2.1",
"typescript": "^5"
}
}
1 change: 1 addition & 0 deletions python/src/aiconfig/editor/client/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
8 changes: 8 additions & 0 deletions python/src/aiconfig/editor/client/tsconfig.paths.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"aiconfig-editor/*": ["aiconfig-editor/src/*"]
}
}
}
17 changes: 17 additions & 0 deletions python/src/aiconfig/editor/client/yarn.lock
Original file line number Diff line number Diff line change
@@ -9332,6 +9332,18 @@ react-app-polyfill@^3.0.0:
regenerator-runtime "^0.13.9"
whatwg-fetch "^3.6.2"

react-app-rewire-alias@^1.1.7:
version "1.1.7"
resolved "https://registry.yarnpkg.com/react-app-rewire-alias/-/react-app-rewire-alias-1.1.7.tgz#c308a1cb5337cfdda92a60f6f157093c5237df5b"
integrity sha512-vn4xU3E/wzh2/fGxda9ZQ6CtW2XdZB/WxAgNOdNPyUcX3hA3mh+kCRGwo19gSjzeTPpoZQwZRblHabLr6mwOTw==

react-app-rewired@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.2.1.tgz#84901ee1e3f26add0377ebec0b41bcdfce9fc211"
integrity sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==
dependencies:
semver "^5.6.0"

react-dev-utils@^12.0.1:
version "12.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -9953,6 +9965,11 @@ selfsigned@^2.1.1:
"@types/node-forge" "^1.3.0"
node-forge "^1"

semver@^5.6.0:
version "5.7.2"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==

semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
version "6.3.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/*!
* Determine if an object is a Buffer
*
* @author Feross Aboukhadijeh <https://feross.org>
* @license MIT
*/

/*!
* v2.1.4-104-gc868b3a
*
*/

/**
* @license
* Lodash <https://lodash.com/>
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/

/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

/**
* @license React
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

/**
* Prism: Lightweight, robust, elegant syntax highlighting
*
* @license MIT <https://opensource.org/licenses/MIT>
* @author Lea Verou <https://lea.verou.me>
* @namespace
* @public
*/

/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

Large diffs are not rendered by default.