Update to NS8

[altunyurt]

NS8 is announced recently. Any plans on updating to NS8?

[eikaramba]

did you try https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-blank-svelte ? i am currently not able to, but it seems it already works

[altunyurt]

@eikaramba I had migrated a svelte-native toy project from n7 to n8. A lot of problems including some missing ui elements mostly based on tabs were put out upon build.

I haven't tried the template yet though, thanks

[eikaramba]

i think https://github.com/NativeScript/NativeScript/pull/9297 is related and once that is merged it could work. at least @halfnelson said there that he used the new webpack 5 nativescript

[eikaramba]

ok so what i can say now is that:

1. the template from https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-blank-svelte works if you just use ns create my-blank-svelte --template @nativescript/template-blank-svelte and npm install afterwards. somehow even on npm7 it worked, otherwise if you get peer problems, use --force. there is a bug tracker for that https://github.com/NativeScript/nativescript-cli/issues/5492
2. i manually edited the webpack config file deep down in the node_modules folder according to https://github.com/NativeScript/NativeScript/pull/9297 AND included native-preprocessor directly and was then able to use svelte-loader instead of svelte-loader-hot(just change it in the package.json) and now HMR works for me with latest nativescript 8. so far so good ;) i haven't tested svelte-native-nativescript-ui yet resp. had problems with it. for now i don't need the ui elements, so fine for me.

[eikaramba]

for reference, this is my svelte.js file in the webpack nativescript folder (yourapp\node_modules@nativescript\webpack\dist\configuration):

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const project_1 = require("../helpers/project");
const platform_1 = require("../helpers/platform");
const index_1 = require("../index");
const log_1 = require("../helpers/log");
const base_1 = __importDefault(require("./base"));

const svelteNativePreprocessor = require("svelte-native-preprocessor");
function default_1(config, env = index_1.env) {
    base_1.default(config, env);
    const platform = platform_1.getPlatformName();
    const mode = env.production ? 'production' : 'development';
    const production = mode === 'production';

    config.target('electron-main');

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

    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')
        .loader('svelte-loader')
        .tap((options) => {
            const svelteConfig = getSvelteConfig();
        return Object.assign(Object.assign({}, options), { compilerOptions: {
            ...svelteConfig?.compilerOptions,
            dev: !production,
        }, preprocess: [svelteConfig?.preprocess, svelteNativePreprocessor()], hotReload: !production, hotOptions: {
                injectCss: false,
                native: true,
            } });
    });
    return config;
}
exports.default = default_1;

function getSvelteConfig() {
    try {
        return require(project_1.getProjectFilePath('svelte.config.js'));
    }
    catch (err) {
        log_1.error('Could not find svelte.config.js.', err);
    }
}

relevant package.json parts

"dependencies": {
    "@nativescript/core": "~8.0.6",
    "@nativescript/theme": "~3.0.1",
    "dotenv": "^9.0.2",
    "svelte-native": "^1.0.0-beta.2",
    "url-search-params-polyfill": "^8.1.1"
  },
"devDependencies": {
    "@nativescript/android": "8.0.0",
    "@nativescript/types": "~8.0.1",
    "@nativescript/webpack": "beta",
    "postcss": "^8.2.10",
    "postcss-loader": "^5.2.0",
    "sass": "^1.32.8",
    "svelte": "~3.38.2",
    "svelte-loader": "3.1.1",
    "svelte-native-preprocessor": "^1.0.0",
    "svelte-preprocess": "^4.7.3",
    "typescript": "~4.2.3"
  },

[halfnelson]

I was hitting issues with svelte-loader. Once that is merged, and I can get the required webpack templates in the nativescript sources updated, we can push to get ns8 support officially out of the door

[eikaramba]

i think it is merged and released right? https://github.com/sveltejs/svelte-loader/blob/master/CHANGELOG.md

just curious what the implications are, as i am quite happy with ns8 and svelte native currently.

[NathanWalker]

@halfnelson Not sure if you saw Igor's comments on that PR: https://github.com/NativeScript/NativeScript/pull/9297#issuecomment-813269787 Looked like just a small adjustment needed and could get it merged.

[mpcref]

Any news on NS8 support? Is it usable in some way or is it still recommended to use NS7?

[eikaramba]

NS8 works already. i am using latest dependencies myself. just copy the demo folders content

[mpcref]

I did the same but I get the impression it's not quite ready. I can't get the demo app to run because the webpack.config file is missing. When I use the same dependencies in my own project I get all kinds of missing export warnings. There's apparently some casting required (svelteNativeNoFrame(App as typeof SvelteComponent, {}); in app.ts) and it uses a relative path in package.json for the svelte-native dependency. I tried using several versions of svelte-native together with these dependencies but I can't get it to work. Some errors about window.dispatchEvent if I remember correctly. Should I check out a specific branch?

[eikaramba]

you are right, not the best experience for now. this is known however and will likely change ones it hits public 1.0

change package version from relative to ^1.0.0-beta.3

indeed there is a webpack.config.js on my local repo. here is a plain one for now:

const webpack = require("@nativescript/webpack");
module.exports = (env) => {
	webpack.init(env);
	return webpack.resolveConfig();
};

in a few days i will hopefully be able to upload a sample repo with a completely working demo app. fingers crossed.

[mpcref]

Thanks, I will try again with your input.

[mpcref]

I got it to work on Android with your input (just had to add "mocha", "chai", "karma-chai" types to tsconfig.json) but the iOS platform is still giving me errors. I'm sticking with NS7 for now and will eagerly await the official svelte-native 1.0.0 release!

[mpcref]

Scratch that, I now have NS8 working on all platforms with this package.json: 😄

{
  "name": "my-app",
  "main": "app/app.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "^8.1.4",
    "@nativescript/theme": "^3.0.2",
    "svelte-native": "^1.0.0-beta.3"
  },
  "devDependencies": {
    "@nativescript/android": "^8.1.1",
    "@nativescript/ios": "^8.1.0",
    "@nativescript/types": "^8.1.1",
    "@nativescript/webpack": "^5.0.0",
    "svelte": "~3.42.6",
    "svelte-loader-hot": "^0.3.1",
    "svelte-native-preprocessor": "^1.0.0",
    "svelte-preprocess": "^4.9.8",
    "typescript": "^4.4.4"
  }
}

With npm i --force and with svelteNative(App as typeof SvelteComponent, {}); in app.ts.

[eikaramba]

haha very good. i also wanted to say that i have android+ios working for me so it should be possible ;) happy coding...