Defining properties in Svelte

[jhancock]

Using the playground here: https://stackblitz.com/edit/deep-chat-svelte?file=src%2FApp.svelte

I try adding config in the form of for example:

 submitButtonStyles='{
    "submit": {
      "container": {
        "default": {
          "transform": "scale(1.21)",
          "marginBottom": "-3px",
          "marginRight": "0.4em"
        }
      }
    }
  }'

So now the example component is:

<main>
<h1>Deep Chat</h1>
  <!-- demo/textInput are examples of passing an object directly into a property -->
  <!-- initialMessages is an example of passing a state object into a property -->
  <deep-chat
    demo={true}
    textInput={{placeholder:{text: "Welcome to the demo!"}}}
    initialMessages={initialMessages}
    submitButtonStyles='{
    "submit": {
      "container": {
        "default": {
          "transform": "scale(1.21)",
          "marginBottom": "-3px",
          "marginRight": "0.4em"
        }
      }
    }
  }'
  />
</main>

We get a parse error telling us we are missing a '}' on the first line of any quoted struct . I've tried this with projects setup for js and ts. Same result.

[OvidijusParsiunas]

Hi @jhancock. The syntax you should be using for properties in Svelte is double curly braces - {{}}. So relating to your example for submitButtonStyles, it should be as follows:

submitButtonStyles={{
  "submit": {
    "container": {
      "default": {
        "transform": "scale(1.21)",
        "marginBottom": "-3px",
        "marginRight": "0.4em"
      }
    }
  }
}}

To note, the double quotes for property names in the example above are optional.

[jhancock]

Brilliant! Thanks for the quick reply. I went to bed last night thinking this must have something to do with Svelte. Couldn't find example of how to encode the params this way.