Created
May 26, 2021 15:04
-
-
Save tanhauhau/b5e2948749b499336877ac192b881f0f to your computer and use it in GitHub Desktop.
Server-side rendering Component API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import { createEventDispatcher } from 'svelte'; | |
| import { getContext } from 'svelte'; | |
| const dispatch = createEventDispatcher(); | |
| export let a = 1; | |
| export let b = 1; | |
| export let title = 'xxx'; | |
| $: product = a * b; | |
| $: dispatch('product', product) | |
| const c = getContext('c'); | |
| </script> | |
| <svelte:head> | |
| <title>{title}</title> | |
| <meta name="keywords" content="HTML, CSS, JavaScript"> | |
| </svelte:head> | |
| <div style="display: grid; grid-template-columns: 10px 230px; align-items: center; gap: 5px;"> | |
| <div style="grid-column: 2 / 3;"> | |
| <button on:click={() => a-=5}>-</button> | |
| <input type="number" bind:value={a} /> | |
| <button on:click={() => a+=5}>+</button> | |
| </div> | |
| <div> | |
| X | |
| </div> | |
| <div> | |
| <button on:click={() => b-=5}>-</button> | |
| <input type="number" bind:value={b} /> | |
| <button on:click={() => b+=5}>+</button> | |
| </div> | |
| <div>=</div> | |
| <div style="text-align: right;">{product}</div> | |
| </div> | |
| c: {c} | |
| <style> | |
| input, button { | |
| margin: 0; | |
| } | |
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Component from './Component.svelte'; | |
| const { css, head, html } = Component.render( | |
| { | |
| a: 5, | |
| b: 10, | |
| title: 'this is server side rendering component api' | |
| }, | |
| { | |
| context: new Map([['c', 20]]), | |
| } | |
| ); | |
| console.log(css); | |
| document.querySelector('pre').innerText = ` | |
| <html> | |
| <head> | |
| ${head} | |
| <style>${css.code}</style> | |
| </head> | |
| <body>${html}</body> | |
| </html> | |
| `; | |
| // import App from './App.svelte'; | |
| // var app = new App({ | |
| // target: document.body | |
| // }); | |
| // export default app; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>this is server side rendering component api</title><meta name="keywords" content="HTML, CSS, JavaScript"> | |
| <style>input.svelte-sfy33k,button.svelte-sfy33k{margin:0}</style> | |
| </head> | |
| <body> | |
| <div style="display: grid; grid-template-columns: 10px 230px; align-items: center; gap: 5px;"><div style="grid-column: 2 / 3;"><button class="svelte-sfy33k">-</button> | |
| <input type="number" class="svelte-sfy33k" value="5"> | |
| <button class="svelte-sfy33k">+</button></div> | |
| <div>X | |
| </div> | |
| <div><button class="svelte-sfy33k">-</button> | |
| <input type="number" class="svelte-sfy33k" value="10"> | |
| <button class="svelte-sfy33k">+</button></div> | |
| <div>=</div> | |
| <div style="text-align: right;">50</div></div> | |
| c: 20</body> | |
| </html> |
I think it is the point. To have a script tag in the output you would need to include it in the svelte:head element of Component.svelte.
The example is a bit contrived, as the produced interface with input and buttons calls for interactivity. This would be used instead for processing that precisely needs to happen on the server side and never on the client side.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, one question. The
scriptcode does not seem to be present in the output. Do you know if JS code can be accessed with this apporach?