feat: webpack-5 and gatsby-3

core/core/package.json

@@ -49,7 +49,7 @@
     "eslint": "^6.5.1",
     "jest": "^26.4.2",
     "react": "^17.0.1",
-    "webpack": "^4.43.0"
+    "webpack": "^5.24.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17"

core/core/src/build.ts

@@ -1,4 +1,4 @@
-import { Compiler, Configuration, RuleSetQuery } from 'webpack';
+import { Compiler, Configuration, RuleSetUseItem } from 'webpack';
 import { LogOptions } from '@component-controls/logger';
 
 type WebpackConfigFn = (config: Configuration, options?: any) => Configuration;
@@ -68,14 +68,14 @@ export interface BuildProps {
    * loaders custom options shortcut.
    * This can be used for quick options setup instead of using the webpack hook
    */
-  loaders?: { [_ in WebpackLoader]?: RuleSetQuery };
+  loaders?: { [_ in WebpackLoader]?: RuleSetUseItem };
 }
 
 export const customLoaderOptions = (
   config: BuildProps,
   loader: WebpackLoader,
-  defaultOptions: RuleSetQuery,
-): RuleSetQuery => {
+  defaultOptions: string | { [index: string]: any },
+): RuleSetUseItem => {
   const customOptions = config.loaders?.[loader];
   return typeof defaultOptions === 'object' && typeof customOptions === 'object'
     ? { ...defaultOptions, ...customOptions }

core/core/src/node-utils.ts

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { BuildProps, defBundleName, defCssFileName } from './build';
-
+export * from './webpack-interfaces';
 export const findUpFile = (
   filePath: string,
   fileName: string | string[],

core/core/src/webpack-interfaces.ts

@@ -0,0 +1,325 @@
+import * as typescript from 'typescript';
+import { Module } from 'webpack';
+
+/** taken from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9a1a04bc85f4137fbd053e780899526881bdd1ff/types/webpack/index.d.ts#L2222 */
+
+export type WebpackLoaderCallback = (
+  err: Error | undefined | null,
+  content?: string | Buffer,
+  sourceMap?: string | any,
+) => void;
+export interface WebpackLoaderContext {
+  /**
+   * Loader API version. Currently 2.
+   * This is useful for providing backwards compatibility.
+   * Using the version you can specify custom logic or fallbacks for breaking changes.
+   */
+  version: string;
+
+  /**
+   *  The directory of the module. Can be used as context for resolving other stuff.
+   *  In the example: /abc because resource.js is in this directory
+   */
+  context: string;
+
+  /**
+   * Starting with webpack 4, the formerly `this.options.context` is provided as `this.rootContext`.
+   */
+  rootContext: string;
+
+  /**
+   * The resolved request string.
+   * In the example: "/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr"
+   */
+  request: string;
+
+  /**
+   *  A string or any object. The query of the request for the current loader.
+   */
+  query: any;
+
+  /**
+   * A data object shared between the pitch and the normal phase.
+   */
+  data?: any;
+
+  callback: WebpackLoaderCallback;
+
+  /**
+   * Make this loader async.
+   */
+  async(): WebpackLoaderCallback | undefined;
+
+  /**
+   *  Make this loader result cacheable. By default it's not cacheable.
+   *  A cacheable loader must have a deterministic result, when inputs and dependencies haven't changed.
+   *  This means the loader shouldn't have other dependencies than specified with this.addDependency.
+   *  Most loaders are deterministic and cacheable.
+   */
+  cacheable(flag?: boolean): void;
+
+  /**
+   * An array of all the loaders. It is writeable in the pitch phase.
+   * loaders = [{request: string, path: string, query: string, module: function}]
+   *
+   * In the example:
+   * [
+   *   { request: "/abc/loader1.js?xyz",
+   *     path: "/abc/loader1.js",
+   *     query: "?xyz",
+   *     module: [Function]
+   *   },
+   *   { request: "/abc/node_modules/loader2/index.js",
+   *     path: "/abc/node_modules/loader2/index.js",
+   *     query: "",
+   *     module: [Function]
+   *   }
+   * ]
+   */
+  loaders: any[];
+
+  /**
+   * The index in the loaders array of the current loader.
+   * In the example: in loader1: 0, in loader2: 1
+   */
+  loaderIndex: number;
+
+  /**
+   * The resource part of the request, including query.
+   * In the example: "/abc/resource.js?rrr"
+   */
+  resource: string;
+
+  /**
+   * The resource file.
+   * In the example: "/abc/resource.js"
+   */
+  resourcePath: string;
+
+  /**
+   * The query of the resource.
+   * In the example: "?rrr"
+   */
+  resourceQuery: string;
+
+  /**
+   * Emit a warning.
+   */
+  emitWarning(message: string | Error): void;
+
+  /**
+   * Emit a error.
+   */
+  emitError(message: string | Error): void;
+
+  /**
+   * Execute some code fragment like a module.
+   *
+   * Don't use require(this.resourcePath), use this function to make loaders chainable!
+   *
+   */
+  exec(code: string, filename: string): any;
+
+  /**
+   * Resolves the given request to a module, applies all configured loaders and calls
+   * back with the generated source, the sourceMap and the module instance (usually an
+   * instance of NormalModule). Use this function if you need to know the source code
+   * of another module to generate the result.
+   */
+  loadModule(
+    request: string,
+    callback: (
+      err: Error | null,
+      source: string,
+      sourceMap: any,
+      module: Module,
+    ) => void,
+  ): any;
+
+  /**
+   * Resolve a request like a require expression.
+   */
+  resolve(
+    context: string,
+    request: string,
+    callback: (err: Error, result: string) => void,
+  ): any;
+
+  /**
+   * Resolve a request like a require expression.
+   */
+  resolveSync(context: string, request: string): string;
+
+  /**
+   * Adds a file as dependency of the loader result in order to make them watchable.
+   * For example, html-loader uses this technique as it finds src and src-set attributes.
+   * Then, it sets the url's for those attributes as dependencies of the html file that is parsed.
+   */
+  addDependency(file: string): void;
+
+  /**
+   * Adds a file as dependency of the loader result in order to make them watchable.
+   * For example, html-loader uses this technique as it finds src and src-set attributes.
+   * Then, it sets the url's for those attributes as dependencies of the html file that is parsed.
+   */
+  dependency(file: string): void;
+
+  /**
+   * Add a directory as dependency of the loader result.
+   */
+  addContextDependency(directory: string): void;
+
+  /**
+   * Remove all dependencies of the loader result. Even initial dependencies and these of other loaders. Consider using pitch.
+   */
+  clearDependencies(): void;
+
+  /**
+   * Pass values to the next loader.
+   * If you know what your result exports if executed as module, set this value here (as a only element array).
+   */
+  value: any;
+
+  /**
+   * Passed from the last loader.
+   * If you would execute the input argument as module, consider reading this variable for a shortcut (for performance).
+   */
+  inputValue: any;
+
+  /**
+   * A boolean flag. It is set when in debug mode.
+   */
+  debug: boolean;
+
+  /**
+   * Should the result be minimized.
+   */
+  minimize: boolean;
+
+  /**
+   * Should a SourceMap be generated.
+   */
+  sourceMap: boolean;
+
+  /**
+   * Target of compilation. Passed from configuration options.
+   * Example values: "web", "node"
+   */
+  target:
+    | 'web'
+    | 'webworker'
+    | 'async-node'
+    | 'node'
+    | 'electron-main'
+    | 'electron-renderer'
+    | 'node-webkit'
+    | string;
+
+  /**
+   * This boolean is set to true when this is compiled by webpack.
+   *
+   * Loaders were originally designed to also work as Babel transforms.
+   * Therefore if you write a loader that works for both, you can use this property to know if
+   * there is access to additional loaderContext and webpack features.
+   */
+  webpack: boolean;
+
+  /**
+   * Emit a file. This is webpack-specific.
+   */
+  emitFile(name: string, content: Buffer | string, sourceMap: any): void;
+
+  /**
+   * Access to the compilation's inputFileSystem property.
+   */
+  fs: any;
+
+  /**
+   * Which mode is webpack running.
+   */
+  mode: 'production' | 'development' | 'none';
+
+  /**
+   * Hacky access to the Compilation object of webpack.
+   */
+  _compilation: any;
+
+  /**
+   * Hacky access to the Compiler object of webpack.
+   */
+  _compiler: any;
+
+  /**
+   * Hacky access to the Module object being loaded.
+   */
+  _module: any;
+
+  /** Flag if HMR is enabled */
+  hot: boolean;
+}
+export type LogLevel = 'INFO' | 'WARN' | 'ERROR';
+export type Severity = 'error' | 'warning';
+export interface ErrorInfo {
+  code: number;
+  severity: Severity;
+  content: string;
+  file: string;
+  line: number;
+  character: number;
+  context: string;
+}
+
+export type ResolveModuleName = (
+  moduleName: string,
+  containingFile: string,
+  compilerOptions: typescript.CompilerOptions,
+  moduleResolutionHost: typescript.ModuleResolutionHost,
+) => typescript.ResolvedModuleWithFailedLookupLocations;
+
+export type CustomResolveModuleName = (
+  moduleName: string,
+  containingFile: string,
+  compilerOptions: typescript.CompilerOptions,
+  moduleResolutionHost: typescript.ModuleResolutionHost,
+  parentResolver: ResolveModuleName,
+) => typescript.ResolvedModuleWithFailedLookupLocations;
+
+export type CustomResolveTypeReferenceDirective = (
+  typeDirectiveName: string,
+  containingFile: string,
+  compilerOptions: typescript.CompilerOptions,
+  moduleResolutionHost: typescript.ModuleResolutionHost,
+  parentResolver: typeof typescript.resolveTypeReferenceDirective,
+) => typescript.ResolvedTypeReferenceDirectiveWithFailedLookupLocations;
+
+export interface LoaderOptions {
+  silent: boolean;
+  logLevel: LogLevel;
+  logInfoToStdOut: boolean;
+  instance: string;
+  compiler: string;
+  configFile: string;
+  context: string;
+  transpileOnly: boolean;
+  ignoreDiagnostics: number[];
+  reportFiles: string[];
+  errorFormatter: (message: ErrorInfo, colors: any) => string;
+  onlyCompileBundledFiles: boolean;
+  colors: boolean;
+  compilerOptions: typescript.CompilerOptions;
+  appendTsSuffixTo: (RegExp | string)[];
+  appendTsxSuffixTo: (RegExp | string)[];
+  happyPackMode: boolean;
+  getCustomTransformers:
+    | string
+    | ((
+        program: typescript.Program,
+      ) => typescript.CustomTransformers | undefined);
+  experimentalWatchApi: boolean;
+  allowTsInNodeModules: boolean;
+  experimentalFileCaching: boolean;
+  projectReferences: boolean;
+  resolveModuleName: CustomResolveModuleName;
+  resolveTypeReferenceDirective: CustomResolveTypeReferenceDirective;
+  useCaseSensitiveFileNames?: boolean;
+}

core/loader/package.json

@@ -40,15 +40,16 @@
     "@component-controls/instrument": "^2.12.0",
     "@component-controls/logger": "^2.10.4",
     "js-string-escape": "^1.0.1",
-    "loader-utils": "^1.2.3",
-    "path": "^0.12.7",
+    "loader-utils": "^2.0.0",
+    "path-browserify": "^1.0.1",
     "typescript": "^4.0.5",
-    "webpack": "^4.41.6"
+    "webpack": "^5.24.3",
+    "webpack-sources": "^2.2.0"
   },
   "devDependencies": {
     "@component-controls/ts-markdown-docs": "^2.6.0",
     "@types/jest": "^26.0.10",
-    "@types/loader-utils": "^1.1.3",
+    "@types/loader-utils": "^2.0.1",
     "cross-env": "^5.2.1",
     "eslint": "^6.5.1",
     "jest": "^26.4.2"