Unknown node type: ObjectPattern

[mielp]

Hi! 👋

I'm running into an issue when I try to run prettier on a svelte template that has object destructuring with a default value.

• code that fails: {#each array as { prop = defaultValue }}
• prettier-plugin-svelte version 1.4.1
• prettier version 2.2.0
• error message:

  ["ERROR" - 11:10:02] Error formatting document.
  ["ERROR" - 11:10:02] unknown node type: ObjectPattern
  

Full code example

<script lang="ts">
  interface Category {
    name: string;
    children?: Category[];
  }

  let categories: Category[] = [
    {
      name: 'Parent category',
      children: [{ name: 'Child category' }],
    },
  ];
</script>

{#each categories as { name, children = [] }} <!-- Problem here -->
  <h3>{name}</h3>
  <ul>
    {#each children as { name, children = [] }} <!-- And here -->
      <li>
        <span>{name} (contains {children.length} sub-categories)</span>
      </li>
    {/each}
  </ul>
{/each}

Full stack trace

Error: unknown node type: ObjectPattern
	at Object.print (node_modules/prettier-plugin-svelte/plugin.js:833:11)
	at callPluginPrintFunction (node_modules/prettier/index.js:14718:18)
	at node_modules/prettier/index.js:14649:47
	at Object.printComments (node_modules/prettier/index.js:14305:19)
	at printGenerically (node_modules/prettier/index.js:14649:22)
	at FastPath.call (node_modules/prettier/index.js:14441:20)
	at printJS (node_modules/prettier-plugin-svelte/plugin.js:987:17)
	at Object.print (node_modules/prettier-plugin-svelte/plugin.js:662:17)
	at callPluginPrintFunction (node_modules/prettier/index.js:14718:18)
	at node_modules/prettier/index.js:14649:47
	at Object.printComments (node_modules/prettier/index.js:14305:19)
	at printGenerically (node_modules/prettier/index.js:14649:22)
	at FastPath.call (node_modules/prettier/index.js:14441:20)
	at node_modules/prettier-plugin-svelte/plugin.js:911:36
	at FastPath.each (node_modules/prettier/index.js:14474:7)
	at printChildren (node_modules/prettier-plugin-svelte/plugin.js:909:10)
	at Object.print (node_modules/prettier-plugin-svelte/plugin.js:503:40)
	at callPluginPrintFunction (node_modules/prettier/index.js:14718:18)
	at node_modules/prettier/index.js:14649:47
	at Object.printComments (node_modules/prettier/index.js:14305:19)
	at printGenerically (node_modules/prettier/index.js:14649:22)
	at FastPath.call (node_modules/prettier/index.js:14441:20)
	at Object.markup (node_modules/prettier-plugin-svelte/plugin.js:477:38)
	at node_modules/prettier-plugin-svelte/plugin.js:483:78
	at Array.forEach (<anonymous>)
	at Object.print (node_modules/prettier-plugin-svelte/plugin.js:483:52)
	at callPluginPrintFunction (node_modules/prettier/index.js:14718:18)
	at node_modules/prettier/index.js:14649:47
	at Object.printComments (node_modules/prettier/index.js:14305:19)
	at printGenerically (node_modules/prettier/index.js:14649:22)
	at printAstToDoc (node_modules/prettier/index.js:14659:13)
	at coreFormat (node_modules/prettier/index.js:14910:15)
	at format (node_modules/prettier/index.js:15131:14)
	at node_modules/prettier/index.js:57542:12
	at Object.format (node_modules/prettier/index.js:57562:12)
	at t.default.<anonymous> (~/.vscode-oss/extensions/esbenp.prettier-vscode-5.7.2/dist/extension.js:1:64036)
	at Generator.next (<anonymous>)
	at s (~/.vscode-oss/extensions/esbenp.prettier-vscode-5.7.2/dist/extension.js:1:58077)

[dummdidumm]

Root cause is that we parse everything after as as JS, but in this instance that's not a valid JS expression. One possibility to fix it would be to append = null before handing it to the JS parser and remove the corresponding Docs afterwards. This could be very hard/brittle to do though, so one alternative is to just print the expression as is in this case.

[mielp]

As far as I know, this syntax is valid JS, as long as we're talking about assignment expressions (in the same way that { name, children } is a valid left-hand side on an assignment). The following examples are valid JS and are formatted correctly by Prettier:

const array = [1, 2, 3, 4, 5].map((i) => ({ id: i }));
array.push({}); // object missing an `id`

for (const { id = -1 } of array) {
  console.log(id); // prints 1, 2, 3, 4, 5, -1
}

array.forEach(({ id = -1 }) => console.log(id));  // prints 1, 2, 3, 4, 5, -1
array.forEach(({ val }) => console.log(val));     // prints undefined five times
array.forEach(({ val = 0 }) => console.log(val)); // prints 0 five times

[dummdidumm]

It's valid JS syntax if the parser knows the broader context. If the parser only gets { a, b = [] } (which is the case inside the #each block) it will throw an error.