Skip to content

Commit

Permalink
TINY-8299: Update webpack, webpack-dev-server, and friends (tinymce#7763
Browse files Browse the repository at this point in the history 
)

* TINY-7654: Upgrade to latest ts-loader and webpack for demos

* TINY-7654: Upgrade to bedrock 13

* TINY-7654: Reworked how TinyMCE demos are done to work better with project references

* TINY-7654: Tweaks/patches to try to improve compile time

* TINY-7654: Upgrade to webpack-dev-server 4

(cherry picked from commit 45e8d78)

* TINY-8299: Let grunt-webpack merge the config for us. Made the webpack config lazy to speed up initial grunt load. Fix some issues with the Alloy webpack-dev-server config.

* TINY-8299: Remove ES5 spec that was brought in from an old branch

* TINY-8299: Removed extra argument that was missed in the cleanup

* TINY-8299: removed old `grunt webpack` task that we don't use anymore

* TINY-8299: Corrected contributing guide to match how webpack-dev-server is now used

* TINY-8299: Fixed harmless console error in model demo

Co-authored-by: Lee Newson <[email protected]>
  • Loading branch information
@TheSpyder @lnewson
TheSpyder and lnewson authored Apr 22, 2022
1 parent e00d713 commit e79c08b
Show file tree
Hide file tree
Showing 31 changed files with 2,811 additions and 3,062 deletions.
6 changes: 1 addition & 5 deletions CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ This repo is built with Yarn workspaces and uses publish tooling support from Le
An important feature of this monorepo is the use of TypeScript 3.0 features "project references" and "build mode":
https://www.typescriptlang.org/docs/handbook/project-references.html

These are still quite new and some of the tooling is still catching up (e.g. webpack needs `tsc -b -w` running in the background).

### A quick note about `modules`

Most monorepos use a `packages` folder to hold the included projects, but we have chosen `modules` instead. There are few reasons for this:
Expand Down Expand Up @@ -58,9 +56,7 @@ There are many top-level helper scripts for TinyMCE and Oxide (the default skin)
### TinyMCE

`yarn start`
This boots the TinyMCE webpack dev server at http://localhost:3000 and also starts a TypeScript watch process. With this running changes to _any_ `.ts` source file in the monorepo (excluding tests) should be reflected in WebPack within a few seconds.

If WebPack later adds supports for TypeScript build mode the background TypeScript watch process won't be necessary which will speed up round trip time.
This boots the TinyMCE webpack dev server at http://localhost:3000. With this running changes to _any_ `.ts` source file in the monorepo (excluding tests) should be reflected in WebPack within a few seconds.

`yarn watch`
runs `tsc -b -w` for those times when you don't need to iterate in the browser.
Expand Down
27 changes: 21 additions & 6 deletions modules/acid/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
const { CheckerPlugin, TsConfigPathsPlugin } = require('awesome-typescript-loader')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');

module.exports = {
entry: './src/demo/ts/ephox/acid/demo/Demo.ts',
devtool: 'source-map',
mode: 'development',
target: ['web'],

resolve: {
extensions: ['.ts', '.js'],
plugins: [
new TsConfigPathsPlugin({
baseUrl: '.',
compiler: 'typescript'
extensions: ['.ts', '.js']
}),
]
},

module: {
rules: [
{
test: /\.js$/,
resolve: {
fullySpecified: false
}
},

{
test: /\.js$/,
use: ['source-map-loader'],
Expand All @@ -25,17 +34,23 @@ module.exports = {

{
test: /\.ts$/,
use: ['awesome-typescript-loader']
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true,
projectReferences: true
}
}]
}
]
},

plugins: [
new CheckerPlugin()
new ForkTsCheckerWebpackPlugin({ async: true })
],

output: {
filename: 'demo.js',
path: path.resolve(__dirname, './scratch/compiled')
}
};
};
27 changes: 21 additions & 6 deletions modules/agar/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
const { CheckerPlugin, TsConfigPathsPlugin } = require('awesome-typescript-loader')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');

module.exports = {
entry: './src/demo/ts/ephox/agar/demo/RunDemos.ts',
devtool: 'source-map',
mode: 'development',
target: ['web'],

resolve: {
extensions: ['.ts', '.js'],
plugins: [
new TsConfigPathsPlugin({
baseUrl: '.',
compiler: 'typescript'
extensions: ['.ts', '.js']
}),
]
},

module: {
rules: [
{
test: /\.js$/,
resolve: {
fullySpecified: false
}
},

{
test: /\.js$/,
use: ['source-map-loader'],
Expand All @@ -25,17 +34,23 @@ module.exports = {

{
test: /\.ts$/,
use: ['awesome-typescript-loader']
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true,
projectReferences: true
}
}]
}
]
},

plugins: [
new CheckerPlugin()
new ForkTsCheckerWebpackPlugin({ async: true })
],

output: {
filename: 'demo.js',
path: path.resolve(__dirname, './scratch/compiled')
}
};
};
78 changes: 44 additions & 34 deletions modules/alloy/Gruntfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
const LiveReloadPlugin = require('webpack-livereload-plugin');
let { TsConfigPathsPlugin } = require('awesome-typescript-loader');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
const swag = require('@ephox/swag');



let create = (inFile, outFile) => {
const create = (inFile, outFile) => {
const tsConfig = "tsconfig.json";

return {
entry: inFile,
mode: 'development',
devtool: 'source-map',
mode: 'development',
target: ['web'],
optimization: {
removeAvailableModules: false,
removeEmptyChunks: false,
Expand All @@ -21,40 +20,47 @@ let create = (inFile, outFile) => {
symlinks: false,
extensions: ['.ts', '.js'],
plugins: [
// We need to use the awesome typescript loader config paths since the one for ts-loader doesn't resolve aliases correctly
new TsConfigPathsPlugin({
baseUrl: '.',
compiler: 'typescript',
configFileName: tsConfig
})
configFile: tsConfig,
extensions: ['.ts', '.js']
}),
]
},
ignoreWarnings: [
// suppress type re-export warnings caused by `transpileOnly: true`
// See https://github.com/TypeStrong/ts-loader#transpileonly
/export .* was not found in/
],
module: {
rules: [
{
test: /\.js$/,
resolve: {
fullySpecified: false
}
},
{
test: /\.js|\.ts$/,
use: ['@ephox/swag/webpack/remapper']
},
{
test: /\.ts$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
compilerOptions: {
declarationMap: false
},
configFile: tsConfig,
experimentalWatchApi: true
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true,
projectReferences: true,
configFile: tsConfig,
compilerOptions: {
declarationMap: false
}
}
]
}]
}
]
},
plugins: [
new LiveReloadPlugin()
new ForkTsCheckerWebpackPlugin({ async: true })
],
output: {
filename: path.basename(outFile),
Expand All @@ -65,8 +71,8 @@ let create = (inFile, outFile) => {
};


module.exports = function (grunt) {
var packageData = grunt.file.readJSON('package.json');
module.exports = (grunt) => {
const packageData = grunt.file.readJSON('package.json');

grunt.initConfig({
pkg: packageData,
Expand All @@ -76,16 +82,20 @@ module.exports = function (grunt) {
},

'webpack-dev-server': {
demos: create('./src/demo/ts/ephox/alloy/demo/Demos.ts', 'scratch/compiled/demo.js'),
options: {
webpack: [
create('./src/demo/ts/ephox/alloy/demo/Demos.ts', 'scratch/compiled/demo.js')
],
inline: false,
port: 3003,
host: '0.0.0.0',
disableHostCheck: true
},
start: { }
devServer: {
port: 3003,
host: '0.0.0.0',
allowedHosts: 'all',
hot: false,
liveReload: false,
static: {
publicPath: '/',
directory: path.join(__dirname, '/src/demo')
},
}
}
},

rollup: {
Expand Down
1 change: 1 addition & 0 deletions modules/alloy/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"test": "bedrock-auto -b chrome-headless --testdirs src/test/ts/atomic src/test/ts/browser src/test/ts/jsdom src/test/ts/webdriver",
"test-manual": "bedrock --testdirs src/test/ts/atomic src/test/ts/browser src/test/ts/jsdom src/test/ts/webdriver",
"lint": "eslint --config ../../.eslintrc.json src/**/*.ts",
"start": "grunt dev",
"prepublishOnly": "tsc -b"
},
"repository": {
Expand Down
27 changes: 21 additions & 6 deletions modules/boss/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
const { CheckerPlugin, TsConfigPathsPlugin } = require('awesome-typescript-loader')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');

module.exports = {
entry: './src/demo/ts/ephox/boss/demo/BossDemo.ts',
devtool: 'source-map',
mode: 'development',
target: ['web'],

resolve: {
extensions: ['.ts', '.js'],
plugins: [
new TsConfigPathsPlugin({
baseUrl: '.',
compiler: 'typescript'
extensions: ['.ts', '.js']
}),
]
},

module: {
rules: [
{
test: /\.js$/,
resolve: {
fullySpecified: false
}
},

{
test: /\.js$/,
use: ['source-map-loader'],
Expand All @@ -25,17 +34,23 @@ module.exports = {

{
test: /\.ts$/,
use: ['awesome-typescript-loader']
use: [{
loader: 'ts-loader',
options: {
transpileOnly: true,
projectReferences: true
}
}]
}
]
},

plugins: [
new CheckerPlugin()
new ForkTsCheckerWebpackPlugin({ async: true })
],

output: {
filename: 'demo.js',
path: path.resolve(__dirname, './scratch/compiled')
}
};
};
Loading

0 comments on commit e79c08b

Please sign in to comment.