javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
farfromrefuge
2021-08-11 11:42:53 +02:00
committed by GitHub
parent 7960f8361f
commit 59d9271bce
5 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/ui/src/issues/issue-7469-page.ts
View File

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

2
packages/core/ui/text-base/index.android.ts
View File

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

36
packages/webpack5/__tests__/configuration/__snapshots__/svelte.spec.ts.snap
View File

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

38
packages/webpack5/src/configuration/svelte.ts
View File

@ -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 {

4
workspace.json
View File

@ -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
}