Skip to content

Commit 45a8e8e

Browse files
mistercrunchclaude
andcommitted
feat(build): auto-rebuild TypeScript types for packages/plugins in webpack
After PR #35159 changes, developers had to manually run `npm run plugins:build` whenever types changed in packages or plugins. This adds automatic type checking and .d.ts generation to the webpack dev process using ForkTsCheckerWebpackPlugin. Key improvements: - Automatic type rebuilding when packages/plugins change - Inline type error reporting in webpack console - Incremental compilation for better performance - skipLibCheck optimization for faster type checking - Can be disabled with DISABLE_TYPE_CHECK=true npm run dev - Fixes PropTypes compatibility for JavaScript files This eliminates the need for manual type rebuilding and makes the development experience smoother while maintaining type safety. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 48e1b1f commit 45a8e8e

File tree

3 files changed

+81
-13
lines changed

3 files changed

+81
-13
lines changed

superset-frontend/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ cypress/screenshots
33
cypress/videos
44
src/temp
55
.temp_cache/
6+
.tsbuildinfo

superset-frontend/src/explore/components/controls/MetricControl/savedMetricType.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,16 @@
1616
* specific language governing permissions and limitations
1717
* under the License.
1818
*/
19-
export { savedMetricType } from './types';
19+
import PropTypes from 'prop-types';
2020

21-
// For backward compatibility with PropTypes usage
22-
export { savedMetricType as default } from './types';
21+
export type { savedMetricType } from './types';
22+
23+
// PropTypes definition for JavaScript files
24+
const savedMetricTypePropTypes = PropTypes.shape({
25+
metric_name: PropTypes.string.isRequired,
26+
verbose_name: PropTypes.string,
27+
expression: PropTypes.string,
28+
});
29+
30+
// Export as default for backward compatibility with JavaScript files
31+
export default savedMetricTypePropTypes;

superset-frontend/webpack.config.js

Lines changed: 68 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -184,21 +184,64 @@ if (!isDevMode) {
184184
chunkFilename: '[name].[chunkhash].chunk.css',
185185
}),
186186
);
187+
}
187188

188-
// Runs type checking on a separate process to speed up the build
189+
// Type checking for both dev and production
190+
// In dev mode, this provides real-time type checking and builds .d.ts files for plugins
191+
// Can be disabled with DISABLE_TYPE_CHECK=true npm run dev
192+
if (isDevMode) {
193+
if (process.env.DISABLE_TYPE_CHECK) {
194+
console.log('⚡ Type checking disabled (DISABLE_TYPE_CHECK=true)');
195+
} else {
196+
console.log(
197+
'✅ Type checking enabled (disable with DISABLE_TYPE_CHECK=true npm run dev)',
198+
);
199+
// Optimized configuration for development - much faster type checking
200+
plugins.push(
201+
new ForkTsCheckerWebpackPlugin({
202+
typescript: {
203+
memoryLimit: 8192,
204+
build: true, // Generate .d.ts files
205+
mode: 'write-references', // Handle project references properly
206+
// Use main tsconfig but with safe performance optimizations
207+
configOverwrite: {
208+
compilerOptions: {
209+
// Only safe optimizations that won't cause errors
210+
skipLibCheck: true, // Skip checking .d.ts files - safe and huge perf boost
211+
incremental: true, // Enable incremental compilation
212+
},
213+
},
214+
},
215+
// Logger configuration
216+
logger: 'webpack-infrastructure',
217+
async: true, // Non-blocking type checking
218+
// Only check files that webpack is actually processing
219+
// This dramatically reduces the scope of type checking
220+
issue: {
221+
scope: 'webpack', // Only check files in webpack's module graph, not entire project
222+
include: [
223+
{ file: 'src/**/*.{ts,tsx}' },
224+
{ file: 'packages/*/src/**/*.{ts,tsx}' },
225+
{ file: 'plugins/*/src/**/*.{ts,tsx}' },
226+
],
227+
exclude: [{ file: '**/node_modules/**' }],
228+
},
229+
}),
230+
);
231+
}
232+
} else {
233+
// Production mode - full type checking
189234
plugins.push(
190235
new ForkTsCheckerWebpackPlugin({
191236
typescript: {
192237
memoryLimit: 4096,
193238
build: true,
194-
exclude: [
195-
'**/node_modules/**',
196-
'**/dist/**',
197-
'**/coverage/**',
198-
'**/storybook/**',
199-
'**/*.stories.{ts,tsx,js,jsx}',
200-
'**/*.{test,spec}.{ts,tsx,js,jsx}',
201-
],
239+
mode: 'write-references',
240+
},
241+
// Logger configuration
242+
logger: 'webpack-infrastructure',
243+
issue: {
244+
exclude: [{ file: '**/node_modules/**' }],
202245
},
203246
}),
204247
);
@@ -344,7 +387,12 @@ const config = {
344387
},
345388
resolve: {
346389
// resolve modules from `/superset_frontend/node_modules` and `/superset_frontend`
347-
modules: ['node_modules', APP_DIR],
390+
modules: [
391+
'node_modules',
392+
APP_DIR,
393+
path.resolve(APP_DIR, 'packages'),
394+
path.resolve(APP_DIR, 'plugins'),
395+
],
348396
alias: {
349397
react: path.resolve(path.join(APP_DIR, './node_modules/react')),
350398
// TODO: remove Handlebars alias once Handlebars NPM package has been updated to
@@ -538,6 +586,16 @@ const config = {
538586
},
539587
plugins,
540588
devtool: isDevMode ? 'eval-cheap-module-source-map' : false,
589+
watchOptions: isDevMode
590+
? {
591+
// Watch all plugin and package source directories
592+
ignored: ['**/node_modules', '**/.git', '**/lib', '**/esm', '**/dist'],
593+
// Poll less frequently to reduce file handles
594+
poll: 2000,
595+
// Aggregate changes for 500ms before rebuilding
596+
aggregateTimeout: 500,
597+
}
598+
: undefined,
541599
};
542600

543601
// find all the symlinked plugins and use their source code for imports

0 commit comments

Comments
 (0)