diff --git a/apps/ui/src/issues/issue-7469-page.ts b/apps/ui/src/issues/issue-7469-page.ts index eca14bb6a4..764397a83e 100644 --- a/apps/ui/src/issues/issue-7469-page.ts +++ b/apps/ui/src/issues/issue-7469-page.ts @@ -28,7 +28,7 @@ let loaded = false; let isIn1 = false; function updateVcToggleText() { - vcToggle.text = `Container is${reusableItem.reusable ? ' ' : ' NOT '}Reusable` + vcToggle.text = `Container is${reusableItem.reusable ? ' ' : ' NOT '}Reusable`; } export function pageLoaded(args) { @@ -82,7 +82,7 @@ export function makeReusable(args: EventData) { } (args.object as any).___reusableRan = true; (args.object as any).reusable = true; - if(args.object === reusableItem) { + if (args.object === reusableItem) { updateVcToggleText(); } } diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts index 64fa7e8d4e..edbee315f7 100644 --- a/packages/core/ui/text-base/index.android.ts +++ b/packages/core/ui/text-base/index.android.ts @@ -437,7 +437,7 @@ export class TextBase extends TextBaseCommon { [paddingLeftProperty.setNative](value: CoreTypes.LengthType) { org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeTextViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0)); } - + [accessibilityIdentifierProperty.setNative](value: string): void { // we override the default setter to apply it on nativeTextViewProtected const id = Utils.ad.resources.getId(':id/nativescript_accessibility_id'); diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap index aeb3abb79c..87914401d5 100644 --- a/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap +++ b/packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap @@ -11,7 +11,7 @@ exports[`svelte configuration for android 1`] = ` node: false }, devtool: 'inline-source-map', - target: 'node', + target: 'electron-main', watchOptions: { ignored: [ '__jest__/platforms/**', @@ -33,7 +33,8 @@ exports[`svelte configuration for android 1`] = ` symlinks: true, alias: { '~': '__jest__/src', - '@': '__jest__/src' + '@': '__jest__/src', + 'tns-core-modules': '@nativescript/core' }, extensions: [ '.android.svelte', @@ -114,7 +115,7 @@ exports[`svelte configuration for android 1`] = ` }, /* config.module.rule('workers') */ { - test: /\\\\.(js|ts)$/, + test: /\\\\.(js|ts|svelte)$/, use: [ /* config.module.rule('workers').use('nativescript-worker-loader') */ { @@ -193,18 +194,19 @@ exports[`svelte configuration for android 1`] = ` /node_modules/ ], use: [ - /* config.module.rule('svelte').use('svelte-loader-hot') */ + /* config.module.rule('svelte').use('svelte-loader') */ { - loader: 'svelte-loader-hot', + loader: 'svelte-loader', options: { - dev: true, + compilerOptions: { + dev: true + }, preprocess: undefined, hotReload: true, hotOptions: { injectCss: false, 'native': true - }, - onwarn: function () { /* omitted long function */ } + } } } ] @@ -338,7 +340,7 @@ exports[`svelte configuration for ios 1`] = ` node: false }, devtool: 'inline-source-map', - target: 'node', + target: 'electron-main', watchOptions: { ignored: [ '__jest__/platforms/**', @@ -360,7 +362,8 @@ exports[`svelte configuration for ios 1`] = ` symlinks: true, alias: { '~': '__jest__/src', - '@': '__jest__/src' + '@': '__jest__/src', + 'tns-core-modules': '@nativescript/core' }, extensions: [ '.ios.svelte', @@ -441,7 +444,7 @@ exports[`svelte configuration for ios 1`] = ` }, /* config.module.rule('workers') */ { - test: /\\\\.(js|ts)$/, + test: /\\\\.(js|ts|svelte)$/, use: [ /* config.module.rule('workers').use('nativescript-worker-loader') */ { @@ -520,18 +523,19 @@ exports[`svelte configuration for ios 1`] = ` /node_modules/ ], use: [ - /* config.module.rule('svelte').use('svelte-loader-hot') */ + /* config.module.rule('svelte').use('svelte-loader') */ { - loader: 'svelte-loader-hot', + loader: 'svelte-loader', options: { - dev: true, + compilerOptions: { + dev: true + }, preprocess: undefined, hotReload: true, hotOptions: { injectCss: false, 'native': true - }, - onwarn: function () { /* omitted long function */ } + } } } ] diff --git a/packages/webpack5/src/configuration/svelte.ts b/packages/webpack5/src/configuration/svelte.ts index 1f1dbba2ad..b942571a46 100644 --- a/packages/webpack5/src/configuration/svelte.ts +++ b/packages/webpack5/src/configuration/svelte.ts @@ -1,6 +1,6 @@ import Config from 'webpack-chain'; -import { getProjectFilePath, getProjectRootPath } from '../helpers/project'; +import { getProjectFilePath } from '../helpers/project'; import { getPlatformName } from '../helpers/platform'; import { env as _env, IWebpackEnv } from '../index'; import { error } from '../helpers/log'; @@ -13,47 +13,51 @@ export default function (config: Config, env: IWebpackEnv = _env): Config { const mode = env.production ? 'production' : 'development'; const production = mode === 'production'; + // target('node') is the default but causes svelte-loader to detect it as a "server" render, disabling HMR + // electron-main sneaks us past the target == 'node' check and gets us HMR + config.target('electron-main'); + + // svelte-hmr still references tns-core-modules, so we shim it here for compat. + config.resolve.alias.set('tns-core-modules', '@nativescript/core'); + // resolve .svelte files // the order is reversed because we are using prepend! config.resolve.extensions.prepend('.svelte').prepend(`.${platform}.svelte`); + + // add worker support to .svelte files (new Worker('./path')) + config.module.rule('workers').test(/\.(js|ts|svelte)$/); + // add a rule for .svelte files config.module .rule('svelte') .test(/\.svelte$/) .exclude.add(/node_modules/) .end() - .use('svelte-loader-hot') - .loader('svelte-loader-hot') + .use('svelte-loader') + .loader('svelte-loader') .tap((options) => { + const svelteConfig = getSvelteConfig(); return { ...options, - dev: !production, - preprocess: getSvelteConfigPreprocessor(), + compilerOptions: { + ...svelteConfig?.compilerOptions, + dev: !production, + }, + preprocess: svelteConfig?.preprocess, hotReload: !production, hotOptions: { injectCss: false, native: true, }, - // Suppress A11y warnings - onwarn(warning, warn) { - if (!/A11y:/.test(warning.message)) { - warn(warning); - } - }, }; }); return config; } -function getSvelteConfigPreprocessor(): any { - const config = getSvelteConfig(); - - return config?.preprocess; -} - interface ISvelteConfig { preprocess: any; + compilerOptions: any; } function getSvelteConfig(): ISvelteConfig | undefined { diff --git a/workspace.json b/workspace.json index 928e9d52bc..92047ea9da 100644 --- a/workspace.json +++ b/workspace.json @@ -271,9 +271,7 @@ "builder": "@nrwl/workspace:run-commands", "outputs": ["dist/packages"], "options": { - "commands": [ - "npm run build" - ], + "commands": ["npm run build"], "cwd": "packages/webpack5", "parallel": false }