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? sveltejs/svelte#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.