Super Debug with label
-Label is useful when using multiple instance of SuperDebug.
-Super Debug without status
-Super Debug without label
-This is SuperDebug's classic layout. Make sure we don't have weird spaces when there is no label.
-Super Debug without label and status
-Super Debug with label and undefined data
-Do not hide output from syntaxHighlight even when the result is undefined. In JavaScript it is a crucial piece of information.
Super Debug without label and undefined data
-There are cases when the data is not readily available on page load. Make sure SuperDebug layout does not break on itself.
-Super Debug with empty object
-Super Debug promise support
-Fancy way of loading things for fancy people. Try reloading the page to see it in action. Right now when waiting for promise a message that says "Loading data" appears. Having a named slot for customization is nice but it is trivial.
-{@html `let promiseNeverCameTrue = new Promise((resolve, reject) => {
- setTimeout(() => resolve({}), 5000)
-})`}
-{@html "<SuperDebug promise={true} data={promiseNeverCameTrue} />"}{@html `let promiseProduct = async () => {
+
+ SuperDebug demonstrations
+
+ Note: looking for the capabilities of SuperDebug?
+ Check
+
+ All data cases examples.
+
+ Change name:
+
+
+ SuperDebug without label
+
+ This is SuperDebug's classic layout. Make sure we don't have weird
+ spaces when there is no label.
+
+
+
+ SuperDebug with label
+ Label is useful when using multiple instance of SuperDebug.
+
+
+ SuperDebug without status
+
+
+ SuperDebug without label and status
+
+
+ SuperDebug with label and undefined data
+
+ Do not hide output when the result is undefined. In JavaScript it is a
+ crucial piece of information.
+
+
+
+ SuperDebug without label and undefined data
+
+ There are cases when the data is not readily available on page load.
+ Make sure SuperDebug layout does not break on itself.
+
+
+
+ SuperDebug with empty object
+
+
+ SuperDebug promise support
+
+ To see this in action, slightly scroll above near Dummyjson product and
+ hit refresh.
+
+ {@html `let promiseProduct = async () => {
const response = await fetch('https://dummyjson.com/products/1')
const body = await response.json()
return body
}`}
-{@html `<SuperDebug label="Dummyjson product" promise={true} data={promiseProduct()} />`}
-
-
- Super Debug using promise on non-promise related data
- To see this in action, slightly scroll above near Dummyjson product and hit refresh.
-
- - ChadDev: No one can stop me from enabling promise because I can't read.
- - SuperForm: Hey, that's illegal!
- - ChadDev: It works!
-
-
-
- Super Debug displaying $page data
- Svelte's $page data in all its glory.
-
+{@html `<SuperDebug label="Dummyjson product" data={promiseProduct()} />`}{@html `let promiseNeverCameTrue = new Promise((resolve, reject) => {
+ setTimeout(() => resolve({}), 5000)
+})`}
+{@html '<SuperDebug data={promiseNeverCameTrue} />'}SuperDebug rejected promises
+To see this in action, hit refresh. The promise is rejected with
+new Error("Broken promise")SuperDebug displaying $page data
+Svelte's $page data in all its glory.
SuperDebug loves stores
+Why not to pass a store directly.
+ ++ Or maybe you want to see the store literal value instead of the store + itself. SuperDebug has you covered. +
+
+ For this use the raw and functions props.
+
SuperDebug loves stores x2
+Does superform handle stores of promises?, Yep its cool.
+SuperDebug custom styling 😎
+Bugs are easier to solve if they look familiar.
++ Note: styling the component produces the side-effect + described at the + Svelte docs. +
+