Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
Decrementer.svelte
Incrementer.svelte
Resetter.svelte
stores.js
<script>
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
</script>

<h1>The count is {$count}</h1>

<Incrementer />
<Decrementer />
<Resetter />

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';

var root = $.template(`<h1> </h1> <!> <!> <!>`, 1);

export default function App($$anchor) {
const [$$stores, $$cleanup] = $.setup_stores();
const $count = () => $.store_get(count, '$count', $$stores);
var fragment = root();
var h1 = $.first_child(fragment);
var text = $.child(h1);

$.reset(h1);

var node = $.sibling(h1, 2);

Incrementer(node, {});

var node_1 = $.sibling(node, 2);

Decrementer(node_1, {});

var node_2 = $.sibling(node_1, 2);

Resetter(node_2, {});
$.template_effect(() => $.set_text(text, `The count is ${$count() ?? ''}`));
$.append($$anchor, fragment);
$$cleanup();
}
result = svelte.compile(source, {
generate: ,
});
/* Add a <style> tag to see the CSS output */
		
			
				
  • Root {
    • css: null
    • js: []
    • start: 199
    • end: 275
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (8)
        • Text {...}
          • type: "Text"
          • start: 197
          • end: 199
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 199
          • end: 229
          • name: "h1"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (2)
              • Text {...}
                • type: "Text"
                • start: 203
                • end: 216
                • raw: "The count is "
                • data: "The count is "
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 216
                • end: 224
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 217
                  • end: 223
                  • loc: {...}
                    • start: {...}
                      • line: 8
                      • column: 18
                      }
                    • end: {...}
                      • line: 8
                      • column: 24
                      }
                    }
                  • name: "$count"
                  }
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 229
          • end: 231
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 231
          • end: 246
          • name: "Incrementer"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 246
          • end: 247
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 247
          • end: 262
          • name: "Decrementer"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 262
          • end: 263
          • raw: " "
          • data: " "
          }
        • Component {...}
          • type: "Component"
          • start: 263
          • end: 275
          • name: "Resetter"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 197
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 188
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 6
            • column: 0
            }
          }
        • body: [...] (4)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 46
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 37
                }
              }
            • specifiers: [...] (1)
              • ImportSpecifier {...}
                • type: "ImportSpecifier"
                • start: 19
                • end: 24
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 10
                    }
                  • end: {...}
                    • line: 2
                    • column: 15
                    }
                  }
                • imported: Identifier {...}
                  • type: "Identifier"
                  • start: 19
                  • end: 24
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 10
                      }
                    • end: {...}
                      • line: 2
                      • column: 15
                      }
                    }
                  • name: "count"
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 19
                  • end: 24
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 10
                      }
                    • end: {...}
                      • line: 2
                      • column: 15
                      }
                    }
                  • name: "count"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 32
              • end: 45
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 23
                  }
                • end: {...}
                  • line: 2
                  • column: 36
                  }
                }
              • value: "./stores.js"
              • raw: "'./stores.js'"
              }
            }
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 48
            • end: 95
            • loc: {...}
              • start: {...}
                • line: 3
                • column: 1
                }
              • end: {...}
                • line: 3
                • column: 48
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 55
                • end: 66
                • loc: {...}
                  • start: {...}
                    • line: 3
                    • column: 8
                    }
                  • end: {...}
                    • line: 3
                    • column: 19
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 55
                  • end: 66
                  • loc: {...}
                    • start: {...}
                      • line: 3
                      • column: 8
                      }
                    • end: {...}
                      • line: 3
                      • column: 19
                      }
                    }
                  • name: "Incrementer"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 72
              • end: 94
              • loc: {...}
                • start: {...}
                  • line: 3
                  • column: 25
                  }
                • end: {...}
                  • line: 3
                  • column: 47
                  }
                }
              • value: "./Incrementer.svelte"
              • raw: "'./Incrementer.svelte'"
              }
            }
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 97
            • end: 144
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 4
                • column: 48
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 104
                • end: 115
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 8
                    }
                  • end: {...}
                    • line: 4
                    • column: 19
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 104
                  • end: 115
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 8
                      }
                    • end: {...}
                      • line: 4
                      • column: 19
                      }
                    }
                  • name: "Decrementer"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 121
              • end: 143
              • loc: {...}
                • start: {...}
                  • line: 4
                  • column: 25
                  }
                • end: {...}
                  • line: 4
                  • column: 47
                  }
                }
              • value: "./Decrementer.svelte"
              • raw: "'./Decrementer.svelte'"
              }
            }
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 146
            • end: 187
            • loc: {...}
              • start: {...}
                • line: 5
                • column: 1
                }
              • end: {...}
                • line: 5
                • column: 42
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 153
                • end: 161
                • loc: {...}
                  • start: {...}
                    • line: 5
                    • column: 8
                    }
                  • end: {...}
                    • line: 5
                    • column: 16
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 153
                  • end: 161
                  • loc: {...}
                    • start: {...}
                      • line: 5
                      • column: 8
                      }
                    • end: {...}
                      • line: 5
                      • column: 16
                      }
                    }
                  • name: "Resetter"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 167
              • end: 186
              • loc: {...}
                • start: {...}
                  • line: 5
                  • column: 22
                  }
                • end: {...}
                  • line: 5
                  • column: 41
                  }
                }
              • value: "./Resetter.svelte"
              • raw: "'./Resetter.svelte'"
              }
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Auto-subscriptions • Playground • Svelte