svelte

问题 import { writable } from 'svelte/store'; /** Read the current token from LocalStorage on boot */ const token = writable(localStorage.getItem('token')); /** Store the token in LocalStorage whenever it´s updated */ token.subscribe((val) => { if (!localStorage) return; if (!val) { return localStorage.removeItem('token'); } localStorage.setItem('token', val); }); export default token; I still get an error that localStorage is undefined in sapper when I run npm run dev 回答1: In Sapper, your code

问题 I'm receiving raw html snippets from a headless CMS that I need to render as-is in a Sapper application. This also includes cases where I receive an opening tag and the corresponding closing tag as two pieces of HTML between which I add a Svelte component. <script> import MyComponent from './MyComponent.svelte' // example snippets coming from headless CMS const prefix = '<p class="test">' const suffix = '</p>' </script> <!-- use snippets as-is --> {@html prefix} <MyComponent /> {@html suffix}

问题 I'm receiving raw html snippets from a headless CMS that I need to render as-is in a Sapper application. This also includes cases where I receive an opening tag and the corresponding closing tag as two pieces of HTML between which I add a Svelte component. <script> import MyComponent from './MyComponent.svelte' // example snippets coming from headless CMS const prefix = '<p class="test">' const suffix = '</p>' </script> <!-- use snippets as-is --> {@html prefix} <MyComponent /> {@html suffix}

问题 I'm pretty new to svelte, and for my use case I would like to export the svelte app as a bundle.js which exposes a function let's say startApp(positionInject, appConfiguration) that can accept 2 parameters ( positionInject is the app injection position eg: .app, appConfiguration is the initial configuration of the app to start), based on those parameters svelte app start renders. I am wondering, this is possible in svelte? Appreciate any help. 回答1: Every Svelte component takes a target

问题 I'm pretty new to svelte, and for my use case I would like to export the svelte app as a bundle.js which exposes a function let's say startApp(positionInject, appConfiguration) that can accept 2 parameters ( positionInject is the app injection position eg: .app, appConfiguration is the initial configuration of the app to start), based on those parameters svelte app start renders. I am wondering, this is possible in svelte? Appreciate any help. 回答1: Every Svelte component takes a target

问题 My current rollup.config.js is commonjs(), babel({ extensions: ['.js', '.mjs', '.html', '.svelte'], runtimeHelpers: true, exclude: ['node_modules/@babel/**', 'node_modules/core-js/**' ], // <= /!\ NOT 'node_mobules/**' presets: [ ['@babel/preset-env', { // adapter to ensure IE 11 support targets: '> 0.25%, not dead, IE 11', "modules": false, "spec": true, "forceAllTransforms": true, useBuiltIns: 'usage', corejs: 3 }] ], plugins: [ '@babel/plugin-syntax-dynamic-import', [ '@babel/plugin

问题 My current rollup.config.js is commonjs(), babel({ extensions: ['.js', '.mjs', '.html', '.svelte'], runtimeHelpers: true, exclude: ['node_modules/@babel/**', 'node_modules/core-js/**' ], // <= /!\ NOT 'node_mobules/**' presets: [ ['@babel/preset-env', { // adapter to ensure IE 11 support targets: '> 0.25%, not dead, IE 11', "modules": false, "spec": true, "forceAllTransforms": true, useBuiltIns: 'usage', corejs: 3 }] ], plugins: [ '@babel/plugin-syntax-dynamic-import', [ '@babel/plugin

问题 In Sapper I am trying to import a component only if being rendered client side (using onMount ). Is there something similar to React Suspense and React.lazy ? Or is there another approach? 回答1: You can certainly do it that way, yes: <script> import { onMount } from 'svelte'; let Thing; onMount(async () => { Thing = (await import('./Thing.svelte')).default; }); </script> <svelte:component this={Thing} answer={42}> <p>some slotted content</p> </svelte:component> Demo here. Alternatively, you

问题 Let's say an Outer component contains an Inner component, and we want an event from the Inner component to be propagated to the Outer component. Without using the store, there are 2 ways to do this: Method 1: Event forwarding using dispatcher Inner.svelte: Use Svelte's dispatcher to dispatch a repackaged version of the original event: <input type="text" on:input={callDispatcher} /> const dispatcher = createEventDispatcher(); function callDispatcher(e) { dispatcher("mymsg", { foo: e.target

问题 I was hoping to bind to <svelte:window> but have no luck. <!-- doesn't work --> <svelte:window on:beforeunload={() => true} /> <!-- doesn't work --> <svelte:window on:onbeforeunload={() => true} /> <!-- doesn't work --> <svelte:window on:beforeUnload={() => true} /> in all instances, window.onbeforeunload is null I ended up just going with window.onbeforeunload = () => true but was wondering why setting on the element didn't work. 回答1: You need to set the event returnValue when using svelte