Ionic 7

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.5.74/75/76 Ionic 7 (Ionic 7.0.2)
+- Ionic 7 package landed - demo app is not upgraded yet
+- Creator scripts are updated to 7.0.2 as well - fixing to that version as I assume there will be updates on core
+
 ## 0.5.73 create scripts 
 - bump create-svelte dependency to latest
 

components/IonNav.svelte

@@ -2,27 +2,32 @@
   import { onMount } from "svelte";
 
   /**
-   * @typedef {Object} root: SvelteComponent;
+   * The root component of a Svelte app.
+   * @type {SvelteComponent}
    */
   export let root;
 
   /**
-   * @typedef {Object} animated: boolean | undefined;
+   * Whether or not the component is animated.
+   * @type {boolean|undefined}
    */
   export let animated = true;
 
   /**
-   * @typedef {Object} Animation: ((baseEl: any, opts?: any) => Animation) | undefined = undefined;
+   * An animation function that takes a base element and optional options and returns an Animation object.
+   * @type {((baseEl: any, opts?: any) => Animation)|undefined}
    */
-  export let animation; //
+  export let animation;
 
   /**
-   * @typedef {Object} rootParams: undefined | { [key: string]: any } = undefined;
+   * Optional parameters for the root component.
+   * @type {undefined|{[key: string]: any}}
    */
   export let rootParams;
 
   /**
-   * @typedef {Object} swipeGesture: boolean | undefined = undefined;
+   * Whether or not swipe gesture is enabled.
+   * @type {boolean|undefined}
    */
   export let swipeGesture;
 

components/all.js

@@ -72,8 +72,6 @@ import 'ionic-svelte/components/ion-segment-button';
 import 'ionic-svelte/components/ion-select';
 import 'ionic-svelte/components/ion-select-option';
 import 'ionic-svelte/components/ion-skeleton-text';
-import 'ionic-svelte/components/ion-slide';
-import 'ionic-svelte/components/ion-slides';
 import 'ionic-svelte/components/ion-spinner';
 import 'ionic-svelte/components/ion-split-pane';
 import 'ionic-svelte/components/ion-tab';
@@ -87,4 +85,3 @@ import 'ionic-svelte/components/ion-title';
 import 'ionic-svelte/components/ion-toast';
 import 'ionic-svelte/components/ion-toggle';
 import 'ionic-svelte/components/ion-toolbar';
-import 'ionic-svelte/components/ion-virtual-scroll';

components/defineComponents.ts

@@ -62,8 +62,6 @@ import { IonSegmentButton } from "@ionic/core/components/ion-segment-button";
 import { IonSelect } from "@ionic/core/components/ion-select";
 import { IonSelectOption } from "@ionic/core/components/ion-select-option";
 import { IonSkeletonText } from "@ionic/core/components/ion-skeleton-text";
-import { IonSlide } from "@ionic/core/components/ion-slide";
-import { IonSlides } from "@ionic/core/components/ion-slides";
 import { IonSpinner } from "@ionic/core/components/ion-spinner";
 import { IonSplitPane } from "@ionic/core/components/ion-split-pane";
 import { IonTab } from "@ionic/core/components/ion-tab";
@@ -76,7 +74,6 @@ import { IonThumbnail } from "@ionic/core/components/ion-thumbnail";
 import { IonTitle } from "@ionic/core/components/ion-title";
 import { IonToggle } from "@ionic/core/components/ion-toggle";
 import { IonToolbar } from "@ionic/core/components/ion-toolbar";
-import { IonVirtualScroll } from "@ionic/core/components/ion-virtual-scroll";
 
 import { IonActionSheet } from "@ionic/core/components/ion-action-sheet";
 import { IonAlert } from "@ionic/core/components/ion-alert";
@@ -168,8 +165,6 @@ export const defineIonComponents = () => {
   defineComponent("ion-select-option", IonSelectOption);
   defineComponent("ion-select-popover", IonSelectPopover);
   defineComponent("ion-skeleton-text", IonSkeletonText);
-  defineComponent("ion-slide", IonSlide);
-  defineComponent("ion-slides", IonSlides);
   defineComponent("ion-spinner", IonSpinner);
   defineComponent("ion-split-pane", IonSplitPane);
   defineComponent("ion-tab", IonTab);
@@ -183,7 +178,6 @@ export const defineIonComponents = () => {
   defineComponent("ion-title", IonTitle);
   defineComponent("ion-toggle", IonToggle);
   defineComponent("ion-toolbar", IonToolbar);
-  defineComponent("ion-virtual-scroll", IonVirtualScroll);
 
   defineComponent("ion-action-sheet", IonActionSheet);
   defineComponent("ion-alert", IonAlert);

components/ion-slide.js

@@ -25,7 +25,7 @@
 
 	console.log('Tabs', tab, myTabs);
 
-	const logStuff = (event) => {
+	const logStuff = (event: { detail: { tab: any }; type: any }) => {
 		console.log('>', event?.detail?.tab, event?.type);
 	};
 </script>
@@ -36,5 +36,4 @@
 	selected={tab}
 	ionTabsWillChange={logStuff}
 	ionNavWillLoad={logStuff}
-	ionTabsDidChange={logStuff}
-/>
+	ionTabsDidChange={logStuff} />