@Tommertom with this module deprecated, what is the alternative implementation that doesn't use svelte-custom-elements in the services/IonicController.js file. Also will this be updated for Ionic 5. I am interested in using this for mobile app

I tried to build a "Hello World" app for Android, but the Ionic CLI is telling me I need a custom build script.

Is there an example or some boilerplate to work with here? I haven't been able to find anything.

What is the process required to build this app for mobile native platforms such as Android and iOS?

Thanks

When running the menu demo I get the following error:

The requested module '/src/lib/ionic/svelte/index.ts' does not provide an export named 'getIonicMenu'

Other demos work as expected :D

What's the status of migrating to Ionic 7? Is there any valid reason to do this now?

Need help here:

https://ionicsvelte.firebaseapp.com/components/tabs/blabla

Should select tab - blabla as starting point, but the select method on IonTabBar does not yield results

https://github.com/Tommertom/svelte-ionic-app/blob/master/src/lib/ionic/svelte/components/IonTab.svelte

I believe you just need to update your CDN to "@ionic/[email protected]" instead of "@ionic/core".

When setting up the project as described in the repo, I followed the instructions several times to make sure I didn't mess anything up. Running Xubuntu 22.04.1 LTS.

(node:1660088) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
Unexpected token 'export'
/home/user/code/ionic/sveltekit-ionic-3/node_modules/@ionic/core/components/index.js:4
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
Unexpected token 'export'
/home/ser/code/ionic/sveltekit-ionic-3/node_modules/@ionic/core/components/index.js:4
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)

Cloning your repo, then doing npm i and npm run dev works just fine.

In the "Item" category, the "Sliding Item" demo only works in build mode, but not in dev mode.

npm run dev -> does not work. There's no animation, the options do not appear.

npm run build & npm run preview -> does work as expected

On desktop it doesn't give me the hand-cursor (👆) when hovering over the menu items on the left but the "select text"-one (I) instead. An unforgivable mistake, but other than that great project!

The standard Ionic apps can toggle between light and dark mode. Is there any way to enable that functionality here?

I'm trying to run npm run dev but I'm getting errors unfortunately.

First I get a runtime error in the browser console saying: localhost/:1 Uncaught TypeError: Failed to resolve module specifier "@sveltech/routify/tmp/routes"

In package.json I can see that @sveltech/routify is set to version "next", which npmjs.com says is version 1.1.1-1. That is a rather old version, so I tried updating it and that fixed it. Both 1.8.0 and .1.9.1 worked.

But the I get a new error (hooray?): localhost/:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "@ionic/core".

I've tried fixing this by installing @ionic/core via npm. npm install --save --save-exact @ionic/[email protected]

Doing so gets me this error, which has me stumped:

index.mjs:41 Uncaught (in promise) TypeError: Cannot read property 'subscribe' of undefined
    at subscribe (index.mjs:41)
    at get_store_value (index.mjs:46)
    at onComponentLoaded (Route.svelte:72)

When using the new installer, I have been given the following error:

Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-ionic-svelte-app version 0.0.6

Welcome to Ionic Svelte 

This is BETA software; expect bugs and missing features.

Problems? Open an issue on https://github.com/Tommertom/svelte-ionic-npm/issues if none exists already.

✔ Name for your new project: … ionic-svelte-hello
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes (NOTE: I picked 'Yes')
✔ Add Prettier for code formatting? … No / Yes (NOTE: I picked 'Yes') 
✔ Add Playwright for browser testing? … No / Yes (NOTE: I picked 'Yes')
✔ Add Vitest for unit testing? … No / Yes (NOTE: I picked 'Yes')
✔ Add Ionicons? … No / Yes (NOTE: I picked 'Yes')
Working: Creating base Svelte Kit install supercharged with Ionic.
Working: Installing project dependencies svelte-preprocess,@sveltejs/adapter-static
An error has occurred trying to install packages with your package manager, please send us the following text onto our Github or Discord:
 npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

EDIT: I added the NOTE: sections to indicate my choices.

EDIT 2: The error also occurs when selecting No to all the choices.

EDIT 3: More info that may be helpful: Running fully-updated Ubuntu Linux 22.04.1 LTS, using npm LTS installed via asdf

Some of the methods in platfom.ts are incomplete. as well as typings missing.

I'm very new to Svelte (but loving the simplicity and speed of it so far). Can you tell me, though, what the advantages are of using routify vs. standard html routing for something like [..fallback].svelte?

<script lang="ts">
  import { goto } from "@roxi/routify";
  $goto("/");
</script>

vs.

<script lang="ts">
window.location.href="/";
</script>

Awesome job; love it!

Any idea how we can get forwards navigation animations working?

Also; how do we deploy to web?

When I create a new project, it let me name my project with dashes. Later on, this throws an Invalid App ID, forcing me to re-name.

It would be nice if Name for your new project: a name could trigger a "some-name" is an Invalid App ID due to {reason}, are you sure? yes / Different Name loop.

Easier may just be adding a hint to the Name for your new project: -> Name (alphanum and underscores) for your new project.

Below is creating a project with a dash:

~/dev ❯ npm create ionic-svelte-app@latest                                                  
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-ionic-svelte-app version 0.0.29

Welcome to Ionic Svelte 

This script will install a SvelteKit project using their SvelteKit create script. 
And then adds Ionic power to it - Ionic Elements, Ionicons (optional) and CapacitorJS (optiona
l)

- Ionicons - free package of icons to use in your app
- CapacitorJs - deploy you app as Android/iOS/Electron app, and use its plugin ecosystem to bu
ild cross-platform experience, also supporting PWA!

This is BETA software; expect bugs and missing features.

Problems? Open an issue on https://github.com/Tommertom/svelte-ionic-npm/issues.

✔ Name for your new project: … some-name
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
✔ Add Ionicons? … No / Yes
✔ Add Capacitor for native (mobile) deployements? … No / Yes
Working: Creating base Svelte Kit install supercharged with Ionic.
Working: Installing project dependencies svelte-preprocess,@sveltejs/adapter-static,vite@4,@ca
pacitor/cli
Working: Adding @ionic/[email protected],ionic-svelte,@capacitor/core,ionicons
Working: Removing @sveltejs/adapter-auto
Working: Writing configs and default files

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
  https://playwright.dev
✔ Vitest
  https://vitest.dev
✔ Capacitor
  https://capacitorjs.com/docs/getting-started
  Please note - the project is configured with HMR - remove server entry in capacitor.config.j
son for final build
✔ Ionicons
  https://ionicsvelte.firebaseapp.com/components/Icon

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Capacitor configuration - see: capacitor.config.json|ts
  App name some-name
  Package name some-name.ionic.io
  Vite dev server url http://192.168.137.1:5173/

Next steps:
  1: cd some-name
  2: npm i @capacitor/android and/or @capacitor/ios
  3: npx cap add android and/or ios
  4: npm run build to fill the build directory
  5: npx cap sync sync the build into the target folder
  6: npx cap open android or ios to open the project and mark as trusted
  7: npm run dev -- --open

To close the dev server, hit Ctrl-C

Use the -hmr flag after your npx cap run/open/sync commands to use HMR together with npm run d
ev

Stuck? Visit us at Ionic's discord https://discordapp.com/channels/520266681499779082/10493885
01629681675

Need some help or found an issue with this installer? Visit us on Github https://github.com/To
mmertom/svelte-ionic-npm
~/dev ❯ cd some-name 
~/dev/some-name ❯ npm i @capacitor/ios   

added 1 package, and audited 295 packages in 609ms

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
~/dev/some-name ❯ npx cap add ios                                                           
[error] Invalid App ID "some-name.ionic.io". Must be in Java package form with no dashes (ex:
        com.example.

Hi 👋🏻

I would like to be able to install the different components from a single package to install, and not to copy and paste the components manually.

Would it be possible to create a specific package for the components please?

To showcase the code splitting capacbilities and reduce largest bundle in size

NPM 8.1.4

Installation died with an error, unless I did this first:

npm install -g agentkeepalive --save

The error message:

npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! network Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/username/.npm/_logs/2022-02-08T15_06_10_986Z-debug.log

Good I've been trying to understand for a couple of hours, what configuration should I do with vite to have PWA.

For example to your demo example, if I wanted to have it in PWA, would I have to add code or just some configuration?
Thank you very much and great job.

edit: I think what I don't understand is how to use the service worker, because I don't see it in your code and I don't know where you are calling it.

When having a page with ion-content and doing a modal with another ion-content, the view will be totally messed up.

So need to look into ion-content - is there something like framework overlay needed or so?

If that is the case, a custom IonContent.svelte will be needed....

maybe this isn't the right repo to open an issue on, but do you have a demo of swipe to go back working in a capacitor + ionic + sveltekit mobile app? It works fine on PWA/browser but doesn't seem to work on a capacitor native app

For page transitions Ionic has this really cool transition which is more than just a single page fly-in - what is happening now.

It looks into the various elements of the incoming component and gives them specific transitions. Like the header-title, the default back-button and the page itself. Also the outoging component gets this special treatment as a whole and for its elements.

For now I have been able to pin down this transition in their code. And here an example link to the transition in ios: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/transition/ios.transition.ts

The function responsible for adding the transitions to the dom elements seems to be :

   const transition = (
      enteringEl: HTMLElement,
      leavingEl: HTMLElement,
      direction: any, // TODO types
      showGoBack: boolean,
      progressAnimation: boolean,
      animationBuilder?: AnimationBuilder
    ) => {

(taken from the vue implementation -and I need to check how it relates to the ios.transitions.ts)

The API requires the enteringElement and the leaving element, besides a directions. The showGoBack is related to the BackButton mostly shown top left or top right corner. animationBuilder is I believe a customer animation and the boolean I don't know, but probably not of big interest for now?

So, the question is how to hook this up in Routify. Maybe through the helpers you have? But I also think/fear/believe a more deeper connection might be needed.

Looking for help on how to achieve this.

I create app with npm create svelte@latest my-app and installed via npm.
All other components working but icons not working. Getting the fallowing error in console:
Uncaught TypeError: Failed to construct 'URL': Invalid base URL

Ionic 5 is out, creating some breaking changes in the API for controllers as well as ionicons.

Hi, we spoke on reddit a bit before. I'm a fan of Ionic and Svelte and want this to take off, so if there's something I can work on, let me know.

Cheers

Replace goto's with

// src/routes/+page.ts
import type { PageLoad } from "./$types";
import { redirect } from "@sveltejs/kit";

export const load = (() => {
  throw redirect(301, "/components/Slides");
}) satisfies PageLoad;

As this navigates faster

Hey, first of all thanks for your wonderful project!

I've tried setting it up with Routify instead of SvelteKit and found out that ionic-svelte/components/IonTabs.svelte depends on SvelteKit's $app/stores and $app/navigation implementation. This wouldn't be a problem but the main ionic-svelte/index.ts module imports it, which causes Vite to fail bundling it:

[plugin:vite:import-analysis] Failed to resolve import "$app/stores" from "node_modules/.pnpm/[email protected]/node_modules/ionic-svelte/components/IonTabs.svelte?v=331c4727". Does the file exist?

The workaround I've arrived at is to add a shim:

1. In vite.config.js, set resolve.alias.$app to path.resolve(__dirname, "src", "lib", "sveltekit-shim")

2. In src/lib/sveltekit-shim, add following files:

   // navigation.ts
   export function goto(): never {
     throw new Error("Not implemented");
   }

   // stores.ts
   export const page = {
     subscribe: () => {
       throw new Error("not implemented");
     },
   };

(I've tried reimplemening a subset of SvelteKit's API, but seeing that legacy tabs implementation is available that's not really necessary)

Perhaps a better solution would be to just remove the IonTabs import from index.ts altogether, and update docs to guide to import it like:

import { IonTabs } from "ionic-svelte/components/IonTabs.svelte";

I'd love to see an example implementation of ion-select with segmented buttons, with ability to select single and multiple.

Here's an example from a paid framework:
https://docs.mobiscroll.com/angular/segmented#using-with-ionic

Here's an ionic discussion where they basically said no to making this part of segment, and suggested it be a use case for ion-select.
ionic-team/ionic-framework#11985 (comment)

https://www.dropbox.com/s/9lqijx4mvvz6k8r/2020-08-17_16-00-35.mp4?dl=0

See https://discordapp.com/channels/520266681499779082/1049388501629681675/1102144281692622989

Using href or a goto in tab1 to go to tab2 via the router, does not trigger a render of tab2.

The tabbar does not get triggered by the router change..

Adding the bind:input property to <ion-input> would dramatically simplify the code. Where should I look to try to create a PR for this?

I can help with that. What are you thinking?

Ionic events are not properly showing in the IDE.

While better typing was implemented (see ionic-team/ionic-framework#26747) - it stil yields typescript errors. You can ignore them, but it isn't as clean. And possibly also misguiding if you want to grab event.detail.value or event.value.

The <ion-item-sliding> Ionic element does not work. Items are displayed statically, but do not react to sliding gestures, making them effectively static list items. No errors are thrown and it does not prevent the app from compiling.

Strangely the popover via controller does work.

And the code in ionic-svelte should be somehow the same.... need to inspect the Ionic7 code for this.

So adding a warning that you should be using inline modal - which is preferred anyway, in order to support styling.

Hey. Im reed the docs of ionic about ion-input and find some interesting unexpected behaviors for this type of components. input of type "password" being cleared every time after focus loose by default. this behavior in ionic-svelte has the same point. I was try use "clearOnEdit=false" and other variations, but without success. Did you have any idea or i miss something ?

https://kit.svelte.dev/docs/packaging

Im not sure why, but tabs component not work.
I copy file structure from example https://github.com/Tommertom/svelte-ionic-app/blob/main/src/routes/components/tabs/ but im still getting error tab with id: "undefined" does not exist when i try to make any actions.

https://github.com/Tommertom/svelte-ionic-npm/issues

9 known issues with the ionic-svelte integration:

• how to import without typescript
• ion-nav-link component
• ion-back-button needs explicit href to show
• ion-nav multiple push does not work
• ion-footer on modal does not look pretty (with controller)
• real ionic transitions on ionpage
• bind:value does not work - (svelte & custom component issue)
• item-sliding does not slide (ionic/core solution needed)
• no ionViewWillLeave in IonPage (needed svelte hook not exposed for library authors)

The state of navigation in this project seems a bit unclear at the moment:

On one hand, there's SvelteKit's routing, however, this doesn't give you a native-like experience with stacks, transitions, and gestures. It looks like the answer to that is IonPage, but all it currently does is a rudimentary swipe animation that doesn't even work on the way out.

And then there's IonNav/navController, which seems to be more connected with Ionic, but decouples routes from SvelteKit.

How can one achieve smooth native-like transitions and history, especially when working with stacked drawers and tab views?

When I run vite build the build fails with the following error:

[vite-plugin-pwa:build] Missing "./preload-helper" export in "vite" package
error during build:
Error: Missing "./preload-helper" export in "vite" package

After code changes, I need to hit ctrl-f5 to reload, as Chrome gives an error (GET http://localhost:5000/bundle/main.js net::ERR_ABORTED 404 (Not Found)) on automatic live-reload

Superforms works nicely. Just if you want to spread the constraints, the typescript will throw a fit...

And you need to use your own change handler to change the value, as bind:value does not work with webcomponents in Svelte.

(below code is Ionic 6 and does not handle the styling for error/helper in ion-input....so incomplete)

<script lang="ts">
	import { z } from 'zod';

	import { superForm } from 'sveltekit-superforms/client';
	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';

	const schema = z.object({
		id: z.number().int().positive().default(Date.now()),
		name: z.string().min(2).default('Hello world!'),
		email: z.string().email()
	});

	const data = {
		id: Date.now(),
		name: 'x',
		email: '[email protected]'
	};

	const { form, errors, message, constraints, enhance, delayed } = superForm(data, {
		SPA: true,
		validators: schema,
		onUpdate: ({ form, cancel }) => {
			console.log('onUpdate', form, cancel);
		},
		onError({ result, message }) {
			console.log('onError', result, message);
			message.set(result.error.message);
		}
	});

	function handleChange(ev) {
		console.log('.');
		$form.name = ev.detail.value;

		// $form.name = 'x' + Date.now();
	}
</script>

<ion-card>
	<ion-card-header>
		<ion-card-subtitle>Great success!!</ion-card-subtitle>
		<ion-card-title>Welcome to your app!</ion-card-title>
	</ion-card-header>

	<ion-card-content>
		Thank you for using this starter. Click buttons below to open these guides (will open in new
		window). Don't forget to open DevTools to see this app in mobile mode. Happy coding!!!

		<SuperDebug data={$form} />

		{#if $message}<h3>{$message}</h3>{/if}
		{$errors.name}
	</ion-card-content>
	<form method="POST" use:enhance>
		<input type="hidden" name="id" bind:value={$form.id} />
		<ion-item>
			<ion-label position="stacked"> Name </ion-label>
			<ion-input
				name="name"
				type="text"
				value={$form.name}
				on:ionInput={handleChange}
				data-invalid={$errors.name} />
			<ion-note slot="helper">
				Here you may enter your first name - or something else
				{#if $errors.name}
					<span class="invalid">{$errors.name}</span>
				{/if}
			</ion-note>
			<ion-note slot="error">Please type more characters...</ion-note>
		</ion-item>
		<ion-item>
			<ion-label position="stacked">
				Email
				<ion-text color="danger">*</ion-text>
			</ion-label>
			<ion-input name="name" type="email" value={$form.email} />
			<ion-note slot="helper">Here you may enter your first name - or something else</ion-note>
			<ion-note slot="error">Please type more characters...</ion-note>
		</ion-item>
		<button>Submit</button>
	</form>
</ion-card>