feat(webpack): improved svelte HMR (#9497)

* update svelte config to use svelte-loader

* handle null config

* fix: worker support in .svelte files & update snapshots

* fix after merge

Co-authored-by: halfnelson <dpershouse@gmail.com>
Co-authored-by: Igor Randjelovic <rigor789@gmail.com>

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();
 	}
 }

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');

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 */ }
             }
           }
         ]

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')
+		.use('svelte-loader')
-		.loader('svelte-loader-hot')
+		.loader('svelte-loader')
 		.tap((options) => {
+			const svelteConfig = getSvelteConfig();
 			return {
 				...options,
-				dev: !production,
+				compilerOptions: {
-				preprocess: getSvelteConfigPreprocessor(),
+					...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 {

workspace.json

@@ -271,9 +271,7 @@
 					"builder": "@nrwl/workspace:run-commands",
 					"outputs": ["dist/packages"],
 					"options": {
-						"commands": [
+						"commands": ["npm run build"],
-							"npm run build"
-						],
 						"cwd": "packages/webpack5",
 						"parallel": false
 					}