diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap index a72d22121..fa0e44274 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap @@ -72,6 +72,17 @@ exports[`angular configuration for android 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -87,6 +98,17 @@ exports[`angular configuration for android 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' @@ -310,6 +332,17 @@ exports[`angular configuration for ios 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -325,6 +358,17 @@ exports[`angular configuration for ios 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap index daf3ae139..0fd530dd6 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/javascript.spec.ts.snap @@ -94,6 +94,17 @@ exports[`javascript configuration for android 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -109,6 +120,17 @@ exports[`javascript configuration for android 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' @@ -338,6 +360,17 @@ exports[`javascript configuration for ios 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -353,6 +386,17 @@ exports[`javascript configuration for ios 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap index fbad90df5..fb450cd3a 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/react.spec.ts.snap @@ -108,6 +108,17 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -123,6 +134,17 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' @@ -347,6 +369,17 @@ exports[`react configuration > android > base config 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -362,6 +395,17 @@ exports[`react configuration > android > base config 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' @@ -586,6 +630,17 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -601,6 +656,17 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' @@ -828,6 +894,17 @@ exports[`react configuration > ios > base config 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -843,6 +920,17 @@ exports[`react configuration > ios > base config 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap index 1d8b8ac90..161071f07 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap @@ -95,6 +95,17 @@ exports[`svelte configuration for android 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -110,6 +121,17 @@ exports[`svelte configuration for android 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' @@ -347,6 +369,17 @@ exports[`svelte configuration for ios 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -362,6 +395,17 @@ exports[`svelte configuration for ios 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap index 7790c124a..7a6d14bdc 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/vue.spec.ts.snap @@ -99,6 +99,17 @@ exports[`vue configuration for android 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -114,6 +125,17 @@ exports[`vue configuration for android 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' @@ -353,6 +375,17 @@ exports[`vue configuration for ios 1`] = ` /* config.module.rule('css').use('css2json-loader') */ { loader: 'css2json-loader' + }, + /* config.module.rule('css').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } } ] }, @@ -368,6 +401,17 @@ exports[`vue configuration for ios 1`] = ` { loader: 'css2json-loader' }, + /* config.module.rule('scss').use('postcss-loader') */ + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + 'postcss-import' + ] + } + } + }, /* config.module.rule('scss').use('sass-loader') */ { loader: 'sass-loader' diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index 0f36cd7b8..53625f69b 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/packages/webpack5/src/configuration/base.ts @@ -11,17 +11,17 @@ import { PlatformSuffixPlugin } from '../plugins/PlatformSuffixPlugin'; import { addCopyRule, applyCopyRules } from '../helpers/copyRules'; import { WatchStatePlugin } from '../plugins/WatchStatePlugin'; import { hasDependency } from '../helpers/dependencies'; +import { getPlatformName } from '../platforms'; import { IWebpackEnv } from '../index'; import { getAbsoluteDistPath, getEntryDirPath, getEntryPath, - getPlatform, } from '../helpers/project'; export default function (config: Config, env: IWebpackEnv): Config { const entryPath = getEntryPath(); - const platform = getPlatform(); + const platform = getPlatformName(); const mode = env.production ? 'production' : 'development'; // set mode @@ -51,7 +51,7 @@ export default function (config: Config, env: IWebpackEnv): Config { .add(entryPath); // inspector_modules - config.when(shouldIncludeInspectorModules(env), (config) => { + config.when(shouldIncludeInspectorModules(), (config) => { config .entry('tns_modules/@nativescript/core/inspector_modules') .add('@nativescript/core/inspector_modules'); @@ -272,8 +272,8 @@ export default function (config: Config, env: IWebpackEnv): Config { return config; } -function shouldIncludeInspectorModules(env: IWebpackEnv): boolean { - const platform = getPlatform(); +function shouldIncludeInspectorModules(): boolean { + const platform = getPlatformName(); // todo: check if core modules are external // todo: check if we are testing return platform === 'ios'; diff --git a/packages/webpack5/src/configuration/react.ts b/packages/webpack5/src/configuration/react.ts index bffdf4ccc..5aafabf6a 100644 --- a/packages/webpack5/src/configuration/react.ts +++ b/packages/webpack5/src/configuration/react.ts @@ -2,13 +2,13 @@ import { merge } from 'webpack-merge'; import Config from 'webpack-chain'; import { env as _env, IWebpackEnv } from '../index'; -import { getPlatform } from '../helpers/project'; +import { getPlatformName } from '../platforms'; import base from './base'; export default function (config: Config, env: IWebpackEnv = _env): Config { base(config, env); - const platform = getPlatform(); + const platform = getPlatformName(); const mode = env.production ? 'production' : 'development'; const production = mode === 'production'; diff --git a/packages/webpack5/src/configuration/svelte.ts b/packages/webpack5/src/configuration/svelte.ts index 99e5246e9..d674928d0 100644 --- a/packages/webpack5/src/configuration/svelte.ts +++ b/packages/webpack5/src/configuration/svelte.ts @@ -1,15 +1,16 @@ import svelteNativePreprocessor from 'svelte-native-preprocessor'; import Config from 'webpack-chain'; +import { getProjectRootPath } from '../helpers/project'; import { env as _env, IWebpackEnv } from '../index'; -import { getPlatform, getProjectRootPath } from '../helpers/project'; -import base from './base'; +import { getPlatformName } from '../platforms'; import { error } from '../helpers/log'; +import base from './base'; export default function (config: Config, env: IWebpackEnv = _env): Config { base(config, env); - const platform = getPlatform(); + const platform = getPlatformName(); const mode = env.production ? 'production' : 'development'; const production = mode === 'production'; diff --git a/packages/webpack5/src/configuration/vue.ts b/packages/webpack5/src/configuration/vue.ts index 24a36b7ce..29e2fcf23 100644 --- a/packages/webpack5/src/configuration/vue.ts +++ b/packages/webpack5/src/configuration/vue.ts @@ -3,13 +3,13 @@ import { merge } from 'webpack-merge'; import Config from 'webpack-chain'; import { env as _env, IWebpackEnv } from '../index'; -import { getPlatform } from '../helpers/project'; +import { getPlatformName } from '../platforms'; import base from './base'; export default function (config: Config, env: IWebpackEnv = _env): Config { base(config, env); - const platform = getPlatform(); + const platform = getPlatformName(); // resolve .vue files // the order is reversed because we are using prepend! diff --git a/packages/webpack5/src/helpers/index.ts b/packages/webpack5/src/helpers/index.ts index 876325720..89422d798 100644 --- a/packages/webpack5/src/helpers/index.ts +++ b/packages/webpack5/src/helpers/index.ts @@ -15,9 +15,9 @@ import { getEntryPath, getEntryDirPath, getPackageJson, - getPlatform, getProjectRootPath, } from './project'; +import { getPlatform, getPlatformName, addPlatform } from '../platforms'; // intentionally populated manually // as this generates nicer typings @@ -50,7 +50,11 @@ export default { getEntryPath, getEntryDirPath, getDistPath, - getPlatform, getPackageJson, }, + platform: { + getPlatform, + getPlatformName, + addPlatform, + }, }; diff --git a/packages/webpack5/src/helpers/project.ts b/packages/webpack5/src/helpers/project.ts index a7423ae04..680f5db6d 100644 --- a/packages/webpack5/src/helpers/project.ts +++ b/packages/webpack5/src/helpers/project.ts @@ -1,20 +1,20 @@ -import { resolve, basename, dirname } from 'path'; +import { resolve, dirname } from 'path'; -import { env, Platform } from '../index'; -import { error } from './log'; +import { getPlatform } from '../platforms'; export function getProjectRootPath(): string { - // todo: find actual path? - return process.cwd(); - //__dirname -} - -export function getAbsoluteDistPath() { - return resolve(getProjectRootPath(), getDistPath()); } export function getEntryPath() { + const platform = getPlatform(); + + // use platform specific entry path + if (platform.getEntryPath) { + return platform.getEntryPath(); + } + + // fallback to main field in package.json const packageJson = getPackageJson(); return resolve(getProjectRootPath(), packageJson.main); @@ -25,30 +25,19 @@ export function getEntryDirPath() { } export function getDistPath() { - if (env.ios) { - const appName = basename(getProjectRootPath()); - return `platforms/ios/${appName}/app`; + const platform = getPlatform(); + + // use platform specific entry path + if (platform.getDistPath) { + return platform.getDistPath(); } - if (env.android) { - return `platforms/android/app/src/main/assets/app`; - } - - // todo: additional platforms - // perhaps we could combine platform specifics into "plugins" - // 3rd party platforms would be treated the same + // fallback to a generic dist folder + return 'dist'; } -export function getPlatform(): Platform { - if (env?.android) { - return 'android'; - } - - if (env?.ios) { - return 'ios'; - } - - error('You need to provide a target platform!'); +export function getAbsoluteDistPath() { + return resolve(getProjectRootPath(), getDistPath()); } interface IPackageJson { diff --git a/packages/webpack5/src/index.ts b/packages/webpack5/src/index.ts index 0f7010035..07bb71957 100644 --- a/packages/webpack5/src/index.ts +++ b/packages/webpack5/src/index.ts @@ -21,6 +21,8 @@ export interface IWebpackEnv { android?: boolean; ios?: boolean; + // for custom platforms + platform?: string; production?: boolean; report?: boolean; diff --git a/packages/webpack5/src/platforms/android.ts b/packages/webpack5/src/platforms/android.ts new file mode 100644 index 000000000..8fbc59f85 --- /dev/null +++ b/packages/webpack5/src/platforms/android.ts @@ -0,0 +1,11 @@ +import { INativeScriptPlatform } from '.'; + +function getDistPath() { + return `platforms/android/app/src/main/assets/app`; +} + +const AndroidPlatform: INativeScriptPlatform = { + getDistPath, +} + +export default AndroidPlatform; diff --git a/packages/webpack5/src/platforms/index.ts b/packages/webpack5/src/platforms/index.ts new file mode 100644 index 000000000..6f995cd8f --- /dev/null +++ b/packages/webpack5/src/platforms/index.ts @@ -0,0 +1,47 @@ +import { error } from "../helpers/log"; +import { env, Platform } from "../"; + +import AndroidPlatform from "./android"; +import iOSPlatform from "./ios"; + +export interface INativeScriptPlatform { + getEntryPath?(): string; + getDistPath?(): string +} + +const platforms = { + android: AndroidPlatform, + ios: iOSPlatform, +} + +export function addPlatform(name: string, platform: INativeScriptPlatform) { + console.log('adding platform', name, platform) + platforms[name] = platform; +} + +export function getPlatform(): INativeScriptPlatform { + return platforms[getPlatformName()] +} + +export function getPlatformName(): Platform { + if (env?.android) { + return 'android'; + } + + if (env?.ios) { + return 'ios'; + } + + // support custom platforms + if(env?.platform) { + return env.platform; + } + + throw error(` + You need to provide a target platform! + + Available platforms: ${Object.keys(platforms).join(', ')} + + Use --env=platform= or --env=android, --env=ios to specify the target platform. + `); +} diff --git a/packages/webpack5/src/platforms/ios.ts b/packages/webpack5/src/platforms/ios.ts new file mode 100644 index 000000000..3cbb4402a --- /dev/null +++ b/packages/webpack5/src/platforms/ios.ts @@ -0,0 +1,15 @@ +import { basename } from "path"; + +import { getProjectRootPath } from "../helpers/project"; +import { INativeScriptPlatform } from '.'; + +function getDistPath() { + const appName = basename(getProjectRootPath()); + return `platforms/ios/${appName}/app`; +} + +const iOSPlatform: INativeScriptPlatform = { + getDistPath, +} + +export default iOSPlatform;