feat(svelte): update template to use latest svelte, svelte-native and svelte-loader (#199)

* feat(svelte): Update template to use latest svelte-native and svelte-loader

* chore: cleanup

Co-authored-by: Igor Randjelovic <[email protected]>

Author: halfnelson

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

@@ -1,24 +1,7 @@
-<page>
-    <actionBar title="Svelte Native App" />
-    <gridLayout>
-        <label class="info" horizontalAlignment="center" verticalAlignment="middle" textWrap="true">
-            <formattedString>
-                <span class="fas" text="&#xf135;" />
-                <span text=" {message}" />
-            </formattedString>
-        </label>
-    </gridLayout>
-</page>
+<frame>
+    <Home />
+</frame>
 
-<script lang="typescript">
-    let message: string = "Blank Svelte Native App"
-</script>
-
-<style>
-    .info .fas {
-        color: #3A53FF;
-    }
-    .info {
-        font-size: 20;
-    }
-</style>
+<script lang="ts">
+    import Home from './components/Home.svelte'
+</script>

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

@@ -12,4 +12,20 @@ The imported CSS rules must precede all other types of rules.
 */
 @import '@nativescript/theme/css/core.css';
 @import '@nativescript/theme/css/default.css';
-@import './font-awesome.css';
+
+/* Font icon class */
+.fab {
+  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
+  font-weight: 400;
+}
+
+.fas {
+  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
+  font-weight: 900;
+}
+
+.far {
+  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
+  font-weight: 400;
+}
+

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

@@ -1,9 +1,10 @@
 /*
 In NativeScript, the app.ts file is the entry point to your application.
 You can use this file to perform app-level initialization, but the primary
-purpose of the file is to pass control to the app’s first module.
+purpose of the file is to pass control to the app’s first page.
 */
 
-import { svelteNative } from 'svelte-native'
+import { svelteNativeNoFrame } from 'svelte-native'
 import App from './App.svelte'
-svelteNative(App, {})
+
+svelteNativeNoFrame(App, {})

packages/template-blank-svelte/app/components/Home.svelte

@@ -0,0 +1,27 @@
+<page>
+    <actionBar title="Home" />
+    <gridLayout>
+        <label class="info">
+            <formattedString>
+                <span class="fas" text="&#xf135;" />
+                <span text=" {message}" />
+            </formattedString>
+        </label>
+    </gridLayout>
+</page>
+
+<script lang="ts">
+    let message: string = "Blank Svelte Native App"
+</script>
+
+<style>
+    .info .fas {
+        color: #3A53FF;
+    }
+
+    .info {
+        font-size: 20;
+        horizontal-align: center;
+        vertical-align: center;
+    }
+</style>

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

@@ -3,7 +3,7 @@
   "main": "app/app.ts",
   "displayName": "Blank Svelte",
   "templateType": "App template",
-  "version": "8.1.0",
+  "version": "8.1.1",
   "description": "Blank template for NativeScript apps using Svelte",
   "author": "NativeScript Team <[email protected]>",
   "license": "Apache-2.0",
@@ -14,10 +14,10 @@
     "app",
     "App_Resources",
     "hooks",
+    "types",
     "tools",
     "!tools/assets",
     ".editorconfig",
-    "references.d.ts",
     "svelte.config.js",
     "tsconfig.json"
   ],
@@ -43,14 +43,14 @@
   "dependencies": {
     "@nativescript/core": "~8.1.1",
     "@nativescript/theme": "~3.0.1",
-    "svelte-native": "~0.9.5"
+    "svelte-native": "~1.0.0"
   },
   "devDependencies": {
     "@nativescript/types": "~8.1.1",
     "@nativescript/webpack": "~5.0.0",
-    "svelte": "~3.35.0",
-    "svelte-loader-hot": "~0.3.1",
-    "svelte-native-preprocessor": "^0.2.0",
+    "svelte": "~3.44.0",
+    "svelte-loader": "^3.1.2",
+    "svelte-native-preprocessor": "^1.0.0",
     "svelte-preprocess": "^4.7.0",
     "typescript": "~4.3.5"
   }

packages/template-blank-svelte/package.json

@@ -1,5 +1,9 @@
 const sveltePreprocess = require('svelte-preprocess')
+const svelteNativePreprocessor = require('svelte-native-preprocessor')
 
 module.exports = {
-  preprocess: sveltePreprocess(),
-}
+  compilerOptions: {
+    namespace: "foreign"
+  },
+  preprocess: [ sveltePreprocess(), svelteNativePreprocessor() ]
+}

packages/template-blank-svelte/references.d.ts

@@ -1,24 +1,26 @@
 {
   "compilerOptions": {
-    "module": "esnext",
+    "strict": true,
     "target": "es2017",
+    "module": "esnext",
     "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": false,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "noEmitHelpers": true,
-    "noEmitOnError": true,
-    "skipLibCheck": true,
     "lib": ["dom", "es2017"],
-    "types": ["svelte"],
+    "sourceMap": true,
+    "noEmitHelpers": true,
+    "importHelpers": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["app/*"],
       "@/*": ["app/*"]
-    }
+    },
+    "typeRoots": ["types"],
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true
   },
-  "include": ["app/**/*"],
-  "files": ["./references.d.ts"],
+  "include": ["app", "types"],
   "exclude": ["node_modules", "platforms"]
 }

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

@@ -0,0 +1 @@
+/// <reference path="../node_modules/@nativescript/types/index.d.ts" />