Added custom webpack TS loader + custom config

config/webpack.config.js

@@ -27,6 +27,10 @@ module.exports = {
  test: /\.ts$/,
  loader: process.env.IONIC_WEBPACK_LOADER
  },
+ {
+ test: /\.ts$/,
+ loader: process.env.CUSTOM_TS_LOADER,
+ },
  {
  test: /\.js$/,
  loader: process.env.IONIC_WEBPACK_TRANSPILE_LOADER

src/custom/config/config.ts

@@ -0,0 +1,21 @@
+import { getConfigValue, setProcessEnvVar, getProcessEnvVar } from '../../util/config';
+import { join } from 'path';
+import { BuildContext } from '../../util/interfaces';
+import { Logger } from '../../logger/logger';
+import { ENV_VAR_APP_SCRIPTS_DIR } from '../../util/constants';
+import * as Constants from './constants';
+
+
+export function initVendorConfig(context: BuildContext ): BuildContext {
+ // keep same style as in original config.ts file
+
+ context.fileNamePattern = getConfigValue(context, '--fileNamePattern', null, Constants.ENV_FILE_NAME_PATTERN, null, null);
+ setProcessEnvVar(Constants.ENV_FILE_NAME_PATTERN, context.fileNamePattern);
+ Logger.debug(`File name pattern set to ${context.fileNamePattern}`);
+
+ const fileNameLoaderPath = join(getProcessEnvVar(ENV_VAR_APP_SCRIPTS_DIR), 'dist', 'custom', 'webpack', 'file-name-ts-loader.js');
+ setProcessEnvVar(Constants.ENV_CUSTOM_TS_LOADER, fileNameLoaderPath);
+ Logger.debug(`Custom ts loader set to ${fileNameLoaderPath}`);
+
+ return context;
+}

src/custom/config/constants.ts

@@ -0,0 +1,3 @@
+/* Custom env variables */
+export const ENV_CUSTOM_TS_LOADER = 'CUSTOM_TS_LOADER';
+export const ENV_FILE_NAME_PATTERN = 'FILE_NAME_PATTERN';

src/custom/helpers/cache-file-reader-helper.ts

@@ -0,0 +1,95 @@
+import { constants, access, readFile, } from 'fs-extra';
+import { basename, dirname, extname } from 'path';
+import * as ts from 'typescript';
+
+import { inlineTemplate } from '../../template';
+import { getTsConfig } from '../../transpile';
+
+import { BuildContext } from '../../util/interfaces';
+
+export interface CompiledOutput {
+ content: string,
+ outputText: string,
+ sourceMapText: string,
+}
+
+export function readAndCacheOnlyBuildTargetFile(context: BuildContext, filePath: string): Promise<CompiledOutput | any> {
+
+ return new Promise<CompiledOutput | any>((resolve, reject) => {
+ const platformName = context.fileNamePattern;
+
+ if (platformName) {
+
+ const fileName = getFileName(filePath);
+ const currentFolder = dirname(filePath);
+ const hasPlatformId = fileName.includes(`.${platformName}`);
+
+ // If file name does not includes platform name, otherwise it is platform specific component
+ if (!hasPlatformId) {
+ const platformComponentTsPath = `${currentFolder}/${fileName}.${platformName}.ts`;
+
+ checkIfFileExist(platformComponentTsPath).then((exist: boolean) => {
+ if (exist) {
+ readFileAsync(platformComponentTsPath).then((content: string) => {
+ const compiledModule = transpileAndCache(context, content, filePath);
+ resolve(compiledModule);
+ });
+ } else {
+ resolve({});
+ }
+ });
+ } else {
+ resolve({});
+ }
+
+ } else {
+ resolve({})
+ }
+ });
+}
+
+export function getFileName(filePath: string): string {
+ const extension = extname(filePath);
+ return basename(filePath, extension);
+}
+
+export function transpileAndCache(context: BuildContext, content: string, tsFilePath: string): CompiledOutput {
+ const compiledModule = ts.transpileModule(content, {
+ compilerOptions: getTsConfig(context).options,
+ fileName: getFileName(tsFilePath) + '.js',
+ });
+ const { outputText, sourceMapText } = compiledModule;
+
+ const compiledText = inlineTemplate(outputText, tsFilePath);
+ const jsFilePath = tsFilePath.replace('.ts', '.js');
+ const mapFilePath = jsFilePath + '.map';
+
+ context.fileCache.set(tsFilePath, { content: content, path: tsFilePath });
+ context.fileCache.set(mapFilePath, { content: sourceMapText, path: mapFilePath });
+ context.fileCache.set(jsFilePath, { content: compiledText, path: jsFilePath });
+
+ return { outputText, sourceMapText, content };
+}
+
+export function checkIfFileExist(filePath: string): Promise<boolean> {
+ return new Promise<boolean>((resolve, reject) => {
+ access(filePath, constants.R_OK | constants.W_OK, (err) => {
+ if (err) {
+ resolve(false)
+ } else {
+ resolve(true);
+ }
+ });
+ });
+}
+
+export function readFileAsync(filePath: string): Promise<string> {
+ return new Promise<string>((resolve, reject) => {
+ readFile(filePath, 'utf-8', (err, buffer) => {
+ if (err) {
+ return reject(err);
+ }
+ return resolve(buffer);
+ });
+ });
+}

src/custom/webpack/file-name-ts-loader-impl.ts

@@ -0,0 +1,14 @@
+import { readAndCacheOnlyBuildTargetFile, CompiledOutput } from '../helpers/cache-file-reader-helper';
+import { getContext } from '../../util/helpers';
+
+export function fileNameLoader(source: string, map: any, webpackContex: any) {
+ webpackContex.cacheable();
+ const callback = webpackContex.async();
+ const context = getContext();
+
+ readAndCacheOnlyBuildTargetFile(context, webpackContex.resourcePath)
+ .then((compiledOutput: CompiledOutput | any) => {
+ callback(null, compiledOutput.content || source);
+ })
+ .catch((error) => callback(error));
+}

src/custom/webpack/file-name-ts-loader.ts

@@ -0,0 +1,5 @@
+import { fileNameLoader } from './file-name-ts-loader-impl';
+
+module.exports = function loader(source: string, map: any) {
+ fileNameLoader(source, map, this);
+};

src/util/config.ts

@@ -5,6 +5,7 @@ import { Logger } from '../logger/logger';
 import { BuildContext, TaskInfo } from './interfaces';
 import { getBooleanPropertyValue, objectAssign } from './helpers';
 import { FileCache } from './file-cache';
+import { initVendorConfig } from '../custom/config/config';
 import * as Constants from './constants';
 
 /**
@@ -355,6 +356,10 @@ export function generateContext(context?: BuildContext): BuildContext {
  console.warn = () => { };
  }
 
+
+ // keep vendor logic in one call
+ initVendorConfig(context);
+
  return context;
 }
 

src/util/interfaces.ts

@@ -49,6 +49,10 @@ export interface BuildContext {
 
  // platform examples: ios, android, windows
  platform?: string;
+
+ // Example: home.ma.ts. Pattern: ma
+ // Example: home.ma.android.ts Pattern: ma.android
+ fileNamePattern?: string,
 }