Removed typescript frmo svelte

Author: Tommertom

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log Ionic-Svelte-NPM
 All notable changes to this project will be documented in this file.
 
+## 0.62/63/64/65
+- removed typescript in *.svelte components as Vite does not process them (but does process *.ts)
+- removed  IonTabsLegacy.svelte - can still be found here https://github.com/Tommertom/svelte-ionic-app/blob/main/src/IonTabsLegacy.svelte for manual inclusion
+
 ## 0.5.60/61
 - Put the NPM package with the demo app in one repo
 

components/IonNav.svelte

@@ -1,19 +1,35 @@
-<script lang="ts">
-  import { onMount, type SvelteComponent } from "svelte";
+<script>
+  import { onMount } from "svelte";
 
-  export let root: any;
+  /**
+   * @typedef {Object} root: SvelteComponent;
+   */
+  export let root;
+
+  /**
+   * @typedef {Object} animated: boolean | undefined;
+   */
   export let animated = true;
-  export let animation: ((baseEl: any, opts?: any) => Animation) | undefined = undefined;
-  export let rootParams: undefined | { [key: string]: any } = undefined;
-  export let swipeGesture: boolean | undefined = undefined;
 
-  //@ts-ignore - if we export ionNav, then the root element actually has access to ion-nav via this variable
-  let ionNav: HTMLIonNavElement = undefined;
+  /**
+   * @typedef {Object} Animation: ((baseEl: any, opts?: any) => Animation) | undefined = undefined;
+   */
+  export let animation; //
+
+  /**
+   * @typedef {Object} rootParams: undefined | { [key: string]: any } = undefined;
+   */
+  export let rootParams;
+
+  /**
+   * @typedef {Object} swipeGesture: boolean | undefined = undefined;
+   */
+  export let swipeGesture;
 
-  const createHTMLCompFromSvelte = (
-    component: new (...args: any) => SvelteComponent,
-    componentProps: { [key: string]: any } = {}
-  ) => {
+  let ionNav;
+  let rootComponent;
+
+  const createHTMLCompFromSvelte = (component, componentProps = {}) => {
     const divWrapper = document.createElement("div");
     const contentID = "id" + Date.now();
     divWrapper.id = contentID;
@@ -25,7 +41,6 @@
 
     const props = {
       ...componentProps,
-      ionNav,
     };
 
     const svelteComponent = new component({
@@ -36,10 +51,7 @@
     return divWrapper;
   };
 
-  let rootComponent: HTMLElement;
-
   onMount(() => {
-    //@ts-ignore
     rootComponent = createHTMLCompFromSvelte(root, {});
   });
 </script>

components/IonPage.svelte

@@ -32,10 +32,6 @@
   });
 </script>
 
-<div
-  class="ion-page"
-  in:fly={{ x: 1000, duration: 300 }}
-  out:fly={{ x: -1000, duration: 300 }}
->
+<div class="ion-page" in:fly={{ x: 1000, duration: 300 }} out:fly={{ x: -1000, duration: 300 }}>
   <slot />
 </div>

components/IonTabs.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
   import { onMount } from "svelte";
   import { page } from "$app/stores";
 
@@ -8,15 +8,11 @@
   export let ionTabsWillChange = () => {};
   export let slot = "bottom";
 
-  let ionTabBarElement: HTMLIonTabsElement;
+  let ionTabBarElement;
 
-  export let tabs: {
-    label: string;
-    icon: string;
-    tab: string;
-  }[] = [];
+  export let tabs = [];
 
-  let controller: HTMLIonTabsElement;
+  let controller;
   onMount(async () => {
     // reassignment needed after onMount
     controller = ionTabBarElement;
@@ -37,7 +33,7 @@
     }
   });
 
-  const tabBarClick = async (selectedTab: string) => {
+  const tabBarClick = async (selectedTab) => {
     await goto(selectedTab);
     controller.select(selectedTab);
   };

demo-app/package-lock.json

@@ -40,7 +40,7 @@
 	"type": "module",
 	"dependencies": {
 		"@ionic/core": "^6.5.3",
-		"ionic-svelte": "^0.5.62",
+		"ionic-svelte": "^0.5.66",
 		"localforage": "^1.10.0"
 	}
 }

demo-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-svelte",
-  "version": "0.5.62",
+  "version": "0.5.66",
   "private": false,
   "homepage": "https://ionicsvelte.firebaseapp.com",
   "repository": {