mirror of
https://github.com/zulip/zulip.git
synced 2025-10-25 00:53:56 +00:00
54d3d8e8b3
This commit moves all files previously under the 'app' bundle in the Django pipeline to being compiled by webpack under the 'app' entry point. In the process, it moves assets under the app entry to a file called app.js that consumes all relevant css and js files. This commit also edits the webpack config to be able to expose certain variables for third party libraries that are currently required by some modules. This is bad coding form and should be refactored to requiring whatever dependencies a module may have; we're just deferring that to the future to simplify the series of transitions we need to do here. The variable exposure is done using expose-loader in webpack. The app/index.html template is edited to override the newly introduced 'commonjs' block in the base template. This is done as a temporary measure so as not to disrupt other pages on the app during the transition. It also fixes the value of the 'this' context that was being inferred as window by third party libraries. This is done using imports-loader in the webpack config. This is also messy and probably isn't how we want things to work long term.
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { basename } from 'path';
|
|
|
|
/* Return imports-loader format to the config
|
|
For example:
|
|
[
|
|
// Adds 'imports-loader?this=>widndow'
|
|
{path: './foler/my_module.js', args: '?this=>window'},
|
|
]
|
|
*/
|
|
interface importLoaderOptions {
|
|
path: string;
|
|
args: string;
|
|
}
|
|
function getImportLoaders( optionsArr:Array<importLoaderOptions> ) {
|
|
let importsLoaders = [];
|
|
for(var loaderEntry of optionsArr) {
|
|
importsLoaders.push({
|
|
test: require.resolve(loaderEntry.path),
|
|
use: "imports-loader?" + loaderEntry.args
|
|
});
|
|
}
|
|
return importsLoaders;
|
|
}
|
|
/* Return expose-loader format to the config
|
|
For example
|
|
[
|
|
// Exposes 'my_module' as the name
|
|
{path: './folder/my_module.js'},
|
|
|
|
// Exposes 'my_custom_name'
|
|
{path: './folder/my_module.js', name: 'my_custom_name'},
|
|
|
|
// Exposes 'name1' and 'name2'
|
|
{path: './folder/my_module.js', name: ['name1', 'name2']}
|
|
]
|
|
*/
|
|
interface exportLoaderOptions {
|
|
path: string;
|
|
name?: string | Array<string>;
|
|
}
|
|
function getExposeLoaders( optionsArr:Array<exportLoaderOptions> ) {
|
|
let exposeLoaders = [];
|
|
for(var loaderEntry of optionsArr) {
|
|
let path = loaderEntry.path;
|
|
let name = "";
|
|
let useArr = [];
|
|
// If no name is provided, infer it
|
|
if(!loaderEntry.name) {
|
|
name = basename(path, '.js');
|
|
useArr.push({loader: 'expose-loader', options: name});
|
|
} else {
|
|
// If name is an array
|
|
if(Array.isArray(loaderEntry.name)) {
|
|
for(var exposeName of loaderEntry.name) {
|
|
useArr.push({loader: 'expose-loader', options: exposeName})
|
|
}
|
|
// If name is a string
|
|
} else {
|
|
useArr.push({loader: 'expose-loader', options: loaderEntry.name});
|
|
}
|
|
}
|
|
exposeLoaders.push({
|
|
test: require.resolve(path),
|
|
use: useArr
|
|
});
|
|
}
|
|
return exposeLoaders;
|
|
}
|
|
export {
|
|
getExposeLoaders,
|
|
getImportLoaders
|
|
}
|