feat: Svelte update (#242)

* chore: svelte update and remove @nativescript/theme

* chore: updated svelte in vision template

Author: farfromrefug

packages/template-blank-svelte-vision/package.json

@@ -39,16 +39,16 @@
     "url": "https://github.com/NativeScript/NativeScript/issues"
   },
   "dependencies": {
-    "@nativescript/core": "~8.9.0",
-    "@nativescript-community/svelte-native": "~1.0.29"
+    "@nativescript-community/svelte-native": "~1.0.29",
+    "@nativescript/core": "~8.9.9"
   },
   "devDependencies": {
-    "@nativescript/types": "~8.9.0",
-    "@nativescript/webpack": "~5.0.0",
-    "svelte": "~4.2.2",
-    "svelte-loader": "^3.2.0",
-    "svelte-native-preprocessor": "^1.0.0",
-    "svelte-preprocess": "^5.1.3",
-    "typescript": "~5.7.0"
+    "@nativescript-community/svelte-native-preprocessor": "^1.0.1",
+    "@nativescript/types": "~8.9.1",
+    "@nativescript/webpack": "~5.0.24",
+    "svelte": "~4.2.20",
+    "svelte-loader": "^3.2.4",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "~5.9.2"
   }
 }

packages/template-blank-svelte-vision/svelte.config.js

@@ -1,9 +1,31 @@
 const sveltePreprocess = require('svelte-preprocess')
-const svelteNativePreprocessor = require('svelte-native-preprocessor')
+const svelteNativePreprocessor = require('@nativescript-community/svelte-native-preprocessor')
 
+// this can be called either through svelte-loader where we want either __ANDROID__ or __IOS__ to be defined but not both
+// or through svelte-check where we want both so everything is checked
+const webpack_env = process.env['NATIVESCRIPT_WEBPACK_ENV']
+    ? JSON.parse(process.env['NATIVESCRIPT_WEBPACK_ENV'])
+    : {
+          android: true,
+          ios: true
+      };
 module.exports = {
   compilerOptions: {
     namespace: "foreign"
   },
-  preprocess: [ sveltePreprocess(), svelteNativePreprocessor() ]
+  preprocess: [ sveltePreprocess({
+            replace: [
+                [/__ANDROID__/g, !!webpack_env.android],
+                [/__IOS__/g, !!webpack_env.ios]
+            ],
+            typescript: {
+                compilerOptions: {
+                    verbatimModuleSyntax: true,
+                    target: 'es2020'
+                }
+            }
+        }), 
+        // if you want bind:text="{email}" to be transformed to text="{email}" on:textChanged="{e => email = e.value}"
+        // enable svelteNativePreprocessor. Keep in mind that it is pretty slow
+        /* svelteNativePreprocessor() */ ]
 }

packages/template-blank-svelte/app/app.css

@@ -1,6 +1,4 @@
-@import '@nativescript/theme/css/core.css';
-@import '@nativescript/theme/css/default.css';
-
+
 .fab {
   font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
   font-weight: 400;

packages/template-blank-svelte/package.json

@@ -42,17 +42,16 @@
     "url": "https://github.com/NativeScript/NativeScript/issues"
   },
   "dependencies": {
-    "@nativescript/core": "~8.9.0",
-    "@nativescript/theme": "^3.1.0",
-    "@nativescript-community/svelte-native": "~1.0.29"
+    "@nativescript-community/svelte-native": "~1.0.29",
+    "@nativescript/core": "8.9.7"
   },
   "devDependencies": {
-    "@nativescript/types": "~8.9.0",
-    "@nativescript/webpack": "~5.0.0",
-    "svelte": "~4.2.2",
-    "svelte-loader": "^3.1.9",
-    "svelte-native-preprocessor": "^1.0.0",
-    "svelte-preprocess": "^5.0.4",
-    "typescript": "~5.7.0"
+    "@nativescript-community/svelte-native-preprocessor": "^1.0.1",
+    "@nativescript/types": "~8.9.1",
+    "@nativescript/webpack": "~5.0.24",
+    "svelte": "~4.2.20",
+    "svelte-loader": "^3.2.4",
+    "svelte-preprocess": "^6.0.3",
+    "typescript": "~5.9.2"
   }
 }

packages/template-blank-svelte/svelte.config.js

@@ -1,9 +1,31 @@
 const sveltePreprocess = require('svelte-preprocess')
-const svelteNativePreprocessor = require('svelte-native-preprocessor')
+const svelteNativePreprocessor = require('@nativescript-community/svelte-native-preprocessor')
 
+// this can be called either through svelte-loader where we want either __ANDROID__ or __IOS__ to be defined but not both
+// or through svelte-check where we want both so everything is checked
+const webpack_env = process.env['NATIVESCRIPT_WEBPACK_ENV']
+    ? JSON.parse(process.env['NATIVESCRIPT_WEBPACK_ENV'])
+    : {
+          android: true,
+          ios: true
+      };
 module.exports = {
   compilerOptions: {
     namespace: "foreign"
   },
-  preprocess: [ sveltePreprocess(), svelteNativePreprocessor() ]
+  preprocess: [ sveltePreprocess({
+            replace: [
+                [/__ANDROID__/g, !!webpack_env.android],
+                [/__IOS__/g, !!webpack_env.ios]
+            ],
+            typescript: {
+                compilerOptions: {
+                    verbatimModuleSyntax: true,
+                    target: 'es2020'
+                }
+            }
+        }), 
+        // if you want bind:text="{email}" to be transformed to text="{email}" on:textChanged="{e => email = e.value}"
+        // enable svelteNativePreprocessor. Keep in mind that it is pretty slow
+        /* svelteNativePreprocessor() */ ]
 }