Add bind:value to ion-input

[burggraf]

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?

[burggraf]

Ok, so we're waiting on this? https://github.com/sveltejs/svelte/issues/4838

[Tommertom]

Yes

Alternative is to wrap the elements in svelte component

That is a bit of work and also requires one to import all elements explicitly before using

I believe that is what u need to do in react and vue and was hoping to avoid as then for consistency i would have to do so for all components

[burggraf]

A standard <input bind:value={thing} type="text"> works fine but we lose all the Ionic styling goodness.

[Tommertom]

Yes

[Tommertom]

Please note - if you use a library such as https://svelte-forms-lib-sapper-docs.vercel.app/introduction together with Yup schemas https://github.com/jquense/yup, the bind:value-issue actually becomes less relevant as you will have the library handle the events and you will use the observables to manage validation and final values to use for further processing. See https://blog.logrocket.com/form-validation-in-svelte/ for nice examples.

import { object, string, number, date, InferType } from "yup";

  export const userSchema = object({
    id: string()
      .required()
      .default(() => "u" + Date.now()),
    name: string().required().default(""),
    description: string().required().default(""),
    age: number().required().positive().integer().default(0),
    email: string().email().default(""),
    website: string().url().nullable().default(""),
    createdOn: date().default(() => new Date()),
  });

  export type User = InferType<typeof userSchema>;

  import { createForm } from "svelte-forms-lib";
  const { form, errors, handleChange, handleSubmit, touched, isValid } = createForm({
    validationSchema: userSchema,
    initialValues: userSchema.cast({}),
    onSubmit: (values) => {
      alert(JSON.stringify(values));
    },
  });

  $: console.log("errors", $errors);
  $: console.log("form", $form);
  $: console.log("touched", $touched);
  $: console.log("isValid", $isValid);

in html:

 <form on:submit|preventDefault={handleSubmit}>
..the ion-inputs etc with on:ionChange={handleChange}
 </form>

[Forsakenrox]

Ok, so we're waiting on this? sveltejs/svelte#4838

issue opened at least one year ago, btw in vanilla ionic with angular @ngModel work perfectly. We need to think about own solution or force ionic team to add official svelte support. At current point ionic team meets with very fucked "OOP" over the routing system in sveltekit, this is problem and main reason why ionic team dont want to continue work with svelte.

[Tommertom]

Hey there folks

So I am working on svelte native wrappers for all ui elements including the form elements

And the good news is with those, bind:value will work again as I can add some small logic that dispatches new values!

I will release these soon (tonite) under the npm package ionic-svelte and still VERY experimental because the wrappers need to be tested individually

These wrappers will also help with tree shaking, type safety and ide auto completion

Which will make the dx experience awesome!

(Hoping there wont be any hard bugs along the way!)

[burggraf]

This is pretty awesome news. Is there an upgrade path to go from the Sidemenu Demo to the new npm package ionic-svelte?

[Tommertom]

Well no full automation

I did build a small script that scans a directory for .svelte files and then replaces the kebab components into the new notation (and the old file renamed to .bak)

So that in theory you could run this on the root src directory - but haven't done that myself even

Then a npm i ionic-svelte is needed

And finally in root latout where setupIonicSvelte is called you need to call the right one (now in ionic-svelte/experimental)

But please note - all verrry experimental so please back your stuff up! And test it in a separate repo!!!

Documentation will go here https://www.npmjs.com/package/ionic-svelte

(Or the github repo)

And will post update here

[burggraf]

I'll give this a try on a test repo tomorrow and let you know how it goes.

Where is that script that replaces the components?

[burggraf]

I guess the best way to do this is for me to create a new sample app using svelte-ionic-npm then just compare things there to what I have in my project.

[Tommertom]

I'll give this a try on a test repo tomorrow and let you know how it goes.

Where is that script that replaces the components?

hold on - will drop a line here...

[burggraf]

Trying to set up a basic ionic app with svelte-ionic is giving this error:

/Users/markb/dev/svelte-ionic-npm/node_modules/@ionic/core/components/index.js:4
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Unexpected token 'export'

[Tommertom]

Trying to set up a basic ionic app with svelte-ionic is giving this error:

/Users/markb/dev/svelte-ionic-npm/node_modules/@ionic/core/components/index.js:4
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Unexpected token 'export'

Hi - can you raise a new issue for this, so this issue does not get filled with other topics? And do you have a minimal repo you can share?

[burggraf]

If I can't resolve it I'll post a basic repo. We should have a starter repo anyway with a basic setup to make things easy. Or at the very least a script to set things up.

[Tommertom]

hold on - will drop a line here...

https://www.npmjs.com/package/ionic-svelte

Version 0.5.13 now holds the new experimental components that should support bind:value for a number of componets - Select, RadioGroup, Checkbox, Input, Searchbar, Textarea, Segment. Datetime, Range and Toggle

The scripts folder under node_module or on the github repo will have a file called migrateToImport.js which does the migration into imported components - using node migrateToImport.js <directoryname>

Please check the readme. Any issue with the binding, please report here. Other issues, please create a new issue.

[burggraf]

I've been working on converting my projects from https://github.com/Tommertom/svelte-ionic-sidemenu-demo to the new version here https://github.com/Tommertom/svelte-ionic-app. The environments are significantly different so it took a lot longer than I expected, but my first project is done.

I'm creating my own base starter app that will form the base of my new applications. Here it is:

https://github.com/burggraf/svelte-ionic-base This is based on your base app, but removes the demo components and sets things up as base project, it also adds some new cool stuff:

• Supabase Login Component (email login, magic links, and third-party Oauth providers, i.e. Facebook, Google, etc.)
• Stores-based currentUser management
• Dynamic menu options (hide menu options based on whether a user is logged in)
• Adds access to the app (particularly the menu) to variables from the package.json file, such as: __APP_VERSION__, __APP_NAME__, __APP_MENU_TITLE__, etc.
• Dynamic configuration of the pwaManifest, driven from variables in the package.json file
• Added script for simple deployment to Cloudflare (for free dynamic hosting!): deploy.sh
• Added make-icons.sh script to take a single icon-1024.png file and create all the icon sizes needed as well as two favicon files.
• Live Demo: https://svelte-ionic-base.pages.dev

The goal here is to be able to fork this project, change a few items in package.json and be able to deploy an app super quickly.

My first ported project is here: https://github.com/burggraf/diet-tracker2 Live Demo: https://diet-tracker2.pages.dev

NOTE: I remove package-lock files from the projects because I prefer bun -- it's 10-100x faster than npm and works great with these projects.

[burggraf]

All that said, I have not yet tried the binding stuff yet (it took me a lot just to catch up to using npm ionic-svelte!)

[Tommertom]

Thx for sharing - always good to publish your own starters in your favorite stack!

As to the NPM library - should not be a difficult task right? Only the kit migration might have been a challenge.

Word of caution - don't use the experimental parts in the NPM lib - they are not ready yet, unless you like to co-create.

[burggraf]

Not sure what you mean about an NPM library. I don't need to create a lib at this point.

Thanks for the pointer about the experimental stuff. I'll hold off on that for now then.

[Tommertom]

Ok sorry - I misread your post.

New way to work with this library is to spawn the svelte project as per svelte instructions (Kit etc) and then do npm i ionic-svelte @ionic/core - then you have the stuff in node_modules/

Then you only need to configure theme and init routine as per instruction in the readme - https://github.com/Tommertom/svelte-ionic-npm