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
makeItSnow.js
<script>
import makeItSnow from './makeItSnow.js'
</script>

<div class="parent" use:makeItSnow>
<div class="child">Merry christmas</div>
</div>

<style>
.parent {
height: 100%;
width: 100%;
background-color: DarkRed;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.child {
background-color: green;
padding: 30px 100px;
font-size: 45px;
color: DarkRed;
}
</style>

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
/* App.svelte generated by Svelte v3.31.2 */
import {
SvelteComponent,
action_destroyer,
append,
attr,
detach,
element,
init,
insert,
noop,
safe_not_equal
} from "svelte/internal";

import makeItSnow from "./makeItSnow.js";

function add_css() {
var style = element("style");
style.id = "svelte-x07axc-style";
style.textContent = ".parent.svelte-x07axc{height:100%;width:100%;background-color:DarkRed;margin:0;display:flex;flex-direction:row;align-items:center;justify-content:center}.child.svelte-x07axc{background-color:green;padding:30px 100px;font-size:45px;color:DarkRed}";
append(document.head, style);
}

function create_fragment(ctx) {
let div1;
let makeItSnow_action;
let mounted;
let dispose;

return {
c() {
div1 = element("div");
div1.innerHTML = `<div class="child svelte-x07axc">Merry christmas</div>`;
attr(div1, "class", "parent svelte-x07axc");
},
m(target, anchor) {
result = svelte.compile(source, {
generate: ,
});
.parent.svelte-x07axc{height:100%;width:100%;background-color:DarkRed;margin:0;display:flex;flex-direction:row;align-items:center;justify-content:center}.child.svelte-x07axc{background-color:green;padding:30px 100px;font-size:45px;color:DarkRed}
		
			
				
  • {
    • html: Fragment {...}
      • start: 62
      • end: 146
      • type: "Fragment"
      • children: [...] (3)
        • Text {...}
          • start: 60
          • end: 62
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Element {...}
          • start: 62
          • end: 146
          • type: "Element"
          • name: "div"
          • attributes: [...] (2)
            • Attribute {...}
              • start: 67
              • end: 81
              • type: "Attribute"
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • start: 74
                  • end: 80
                  • type: "Text"
                  • raw: "parent"
                  • data: "parent svelte-x07axc"
                  }
                ]
              }
            • Action {...}
              • start: 82
              • end: 96
              • type: "Action"
              • name: "makeItSnow"
              • modifiers: []
              • expression: null
              }
            ]
          • children: [...] (3)
            • Text {...}
              • start: 97
              • end: 99
              • type: "Text"
              • raw: "\n\t"
              • data: "\n\t"
              }
            • Element {...}
              • start: 99
              • end: 139
              • type: "Element"
              • name: "div"
              • attributes: [...] (1)
                • Attribute {...}
                  • start: 104
                  • end: 117
                  • type: "Attribute"
                  • name: "class"
                  • value: [...] (1)
                    • Text {...}
                      • start: 111
                      • end: 116
                      • type: "Text"
                      • raw: "child"
                      • data: "child svelte-x07axc"
                      }
                    ]
                  }
                ]
              • children: [...] (1)
                • Text {...}
                  • start: 118
                  • end: 133
                  • type: "Text"
                  • raw: "Merry christmas"
                  • data: "Merry christmas"
                  }
                ]
              }
            • Text {...}
              • start: 139
              • end: 140
              • type: "Text"
              • raw: "\n"
              • data: "\n"
              }
            ]
          }
        • Text {...}
          • start: 146
          • end: 148
          • type: "Text"
          • raw: "\n\n"
          • data: "\n\n"
          }
        ]
      }
    • css: Style {...}
      • type: "Style"
      • start: 148
      • end: 443
      • attributes: []
      • children: [...] (2)
        • Rule {...}
          • type: "Rule"
          • selector: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (1)
                  • ClassSelector {...}
                    • type: "ClassSelector"
                    • name: "parent"
                    • start: 157
                    • end: 164
                    }
                  ]
                • start: 157
                • end: 164
                }
              ]
            • start: 157
            • end: 164
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (8)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "height"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Percentage {...}
                      • type: "Percentage"
                      • value: "100"
                      • start: 177
                      • end: 181
                      }
                    ]
                  • start: 176
                  • end: 181
                  }
                • start: 169
                • end: 181
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "width"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Percentage {...}
                      • type: "Percentage"
                      • value: "100"
                      • start: 192
                      • end: 196
                      }
                    ]
                  • start: 191
                  • end: 196
                  }
                • start: 185
                • end: 196
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "background-color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "DarkRed"
                      • start: 218
                      • end: 225
                      }
                    ]
                  • start: 217
                  • end: 225
                  }
                • start: 200
                • end: 225
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "margin"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Number {...}
                      • type: "Number"
                      • value: "0"
                      • start: 237
                      • end: 238
                      }
                    ]
                  • start: 236
                  • end: 238
                  }
                • start: 229
                • end: 238
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "display"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "flex"
                      • start: 251
                      • end: 255
                      }
                    ]
                  • start: 250
                  • end: 255
                  }
                • start: 242
                • end: 255
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "flex-direction"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "row"
                      • start: 275
                      • end: 278
                      }
                    ]
                  • start: 274
                  • end: 278
                  }
                • start: 259
                • end: 278
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "align-items"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "center"
                      • start: 295
                      • end: 301
                      }
                    ]
                  • start: 294
                  • end: 301
                  }
                • start: 282
                • end: 301
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "justify-content"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "center"
                      • start: 322
                      • end: 328
                      }
                    ]
                  • start: 321
                  • end: 328
                  }
                • start: 305
                • end: 328
                }
              ]
            • start: 165
            • end: 332
            }
          • start: 157
          • end: 332
          }
        • Rule {...}
          • type: "Rule"
          • selector: SelectorList {...}
            • type: "SelectorList"
            • children: [...] (1)
              • Selector {...}
                • type: "Selector"
                • children: [...] (1)
                  • ClassSelector {...}
                    • type: "ClassSelector"
                    • name: "child"
                    • start: 336
                    • end: 342
                    }
                  ]
                • start: 336
                • end: 342
                }
              ]
            • start: 336
            • end: 342
            }
          • block: Block {...}
            • type: "Block"
            • children: [...] (4)
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "background-color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "green"
                      • start: 365
                      • end: 370
                      }
                    ]
                  • start: 364
                  • end: 370
                  }
                • start: 347
                • end: 370
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "padding"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (3)
                    • Dimension {...}
                      • type: "Dimension"
                      • value: "30"
                      • unit: "px"
                      • start: 383
                      • end: 387
                      }
                    • WhiteSpace {...}
                      • type: "WhiteSpace"
                      • loc: null
                      • value: " "
                      }
                    • Dimension {...}
                      • type: "Dimension"
                      • value: "100"
                      • unit: "px"
                      • start: 388
                      • end: 393
                      }
                    ]
                  • start: 382
                  • end: 393
                  }
                • start: 374
                • end: 393
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "font-size"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Dimension {...}
                      • type: "Dimension"
                      • value: "45"
                      • unit: "px"
                      • start: 408
                      • end: 412
                      }
                    ]
                  • start: 407
                  • end: 412
                  }
                • start: 397
                • end: 412
                }
              • Declaration {...}
                • type: "Declaration"
                • important: false
                • property: "color"
                • value: Value {...}
                  • type: "Value"
                  • children: [...] (1)
                    • Identifier {...}
                      • type: "Identifier"
                      • name: "DarkRed"
                      • start: 423
                      • end: 430
                      }
                    ]
                  • start: 422
                  • end: 430
                  }
                • start: 416
                • end: 430
                }
              ]
            • start: 343
            • end: 434
            }
          • start: 336
          • end: 434
          }
        ]
      • content: {...}
        • start: 155
        • end: 435
        • styles: "\n\t.parent {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tbackground-color: DarkRed;\n\t\tmargin: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\t\n\t.child {\n\t\tbackground-color: green;\n\t\tpadding: 30px 100px;\n\t\tfont-size: 45px;\n\t\tcolor: DarkRed;\n\t}\n"
        }
      }
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 60
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 51
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 3
            • column: 0
            }
          }
        • body: [...] (1)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 10
            • end: 50
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 2
                • column: 41
                }
              }
            • specifiers: [...] (1)
              • ImportDefaultSpecifier {...}
                • type: "ImportDefaultSpecifier"
                • start: 17
                • end: 27
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 8
                    }
                  • end: {...}
                    • line: 2
                    • column: 18
                    }
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 17
                  • end: 27
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 8
                      }
                    • end: {...}
                      • line: 2
                      • column: 18
                      }
                    }
                  • name: "makeItSnow"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 33
              • end: 50
              • loc: {...}
                • start: {...}
                  • line: 2
                  • column: 24
                  }
                • end: {...}
                  • line: 2
                  • column: 41
                  }
                }
              • value: "./makeItSnow.js"
              • raw: "'./makeItSnow.js'"
              }
            }
          ]
        • sourceType: "module"
        }
      }
    • module: undefined
    }
The AST is not public API and may change at any point in time