标签: svelte

是否可以在苗条组件的脚本标签内编写 Typescript？

我遇到了https://github.com/pyoner/svelte-typescript/tree/master/packages/preprocess 如果我理解正确的话，这是一个用于 svelte 的打字稿预处理器，它允许在 svelte 组件中编写打字稿。但是我无法让它工作

这是我的汇总配置的样子

import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace";
import commonjs from "rollup-plugin-commonjs";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import copy from "rollup-plugin-copy";
import typescript from "rollup-plugin-typescript2";
import { terser } from "rollup-plugin-terser";

import {
  preprocess,
  createEnv,
  readConfigFile
} from "@pyoner/svelte-ts-preprocess";

const tsEnv = createEnv();
const compilerOptions = readConfigFile(tsEnv);
const opts = {
  env: tsEnv,
  compilerOptions: {
    ...compilerOptions,
    allowNonTsExtensions: true
  }
};

const env = …

您如何使用 Svelte 进行代码拆分？

（我知道您可以使用 Sapper 来完成，但我不想依赖节点后端）

我需要运行一个 Svelte 应用程序并且能够在没有服务器的情况下执行它。对于其他框架，这是可能的，因为它只是 javascript，但我找不到一种方法来单击我的 index.html 并运行使用 Svelte 构建的应用程序

我的一个组件订阅了商店中的一个变量。每当该存储变量发生变化时，我想触发一个函数。

商店.js

    import { writable } from "svelte/store"; 
    export const comparedProducts = writable([1,2,3]);

组件.svelte

    import { comparedProducts } from "../stores.js";
    
    //if there is a change in $comparedProducts trigger this function eg. ([1,2])
    const someFunction = () => {
      //do something
    }

我有大约 80 个自定义 SVG 图标，我将它们导入到 Svelte 前端应用程序中。它基于https://github.com/sveltejs/template构建，使用 Rollup 构建，包括 Typescript、Tailwind 和所有现代好东西。

困境在于如何将图标添加到应用程序中。作为 SVG，图标是不超过 2kB 的简短 XML 文本字符串。

选项 1：作为图像资产

1. 将所有图标上传foo.svg到public/assets/icons.
2. 创建一个<Icon type="foo' />使用<img src="foo.svg>.

这种方法意味着图标不是代码的一部分。

优点：图标可以由前端代码按需动态加载。无需将所有图标捆绑到应用程序代码中。

缺点：如果有很多新图标，页面加载速度会很慢，并且浏览器必须获取十几个 1kB 文件。将应用程序部署为 PWA 意味着我们需要手动告诉它预先缓存图标。

选项 2：作为应用程序构建的一部分

1. 使用类似https://github.com/cristovao-trevisan/svelte-icon或https://github.com/codefeathers/rollup-plugin-svelte-svg 之类的东西将每个图标直接导入到代码中：import Home from './icons/home.svg';
2. 创建一个 svelte 组件，选择正确的导入组件或 SVG 字符串并显示它。

在这里，图标作为文本字符串与应用程序本身捆绑在一起。

优点：图标作为应用程序包的一部分提供。缓存是不必要的。可以在加载时动态修改一些图标代码，例如颜色、视图框等。

缺点：没有必要在应用程序中包含所有图标以减少到第一个字节的时间。不能在不增加复杂性的情况下进行捆绑拆分等。使渲染变慢，因为 Javascript 代码需要首先将字符串转换为 SVG，而不仅仅是加载图像。

问题

• 从这个分析来看，在应用程序中构建图标似乎是一个更好的方法，但我错过了什么吗？
• 如果“图标”是 50-100kB 的详细图像而不是这里的小字符串，那么演算会改变吗？

我想通过单击某个按钮来调用 Svelte 应用程序中的 onMount，但出现此错误。任何想法都会很棒，谢谢:)

所以我无法找到一种方法来在我的__layout从<slot>.

我尝试了一些方法，使用bind:或let:在插槽上，但它不起作用。我得到\'myvar\' is not a valid binding或<slot> cannot have directives。
\n我也尝试导出或不导出布局上的变量，但我真的无法使其工作......

这是我所拥有的：

 <!-- __layout.svelte -->\n<script>\nexport let myvar = undefined;\n</script>\n\n<main>\n  <slot myvar={myvar}></slot>\n  <p>Layout myvar: {myvar}</p>  <!-- << This will stay undefined -->\n</main>\n

 <!-- mypage.svelte -->\n<script>\nimport MyComponent from "$lib/my_component.svelte";\nexport let myvar;\nlet a_list_of_things = [1,2,3,4]\n</script>\n\n<main>\n  {#each a_list_of_things as thing}\n    <MyComponent bind:myvar={myvar} thing={thing}/>  <!-- The variable is binded here -->\n  {/each}\n  <p>mypage myvar: {myvar}</p>   <!-- << This will …

$orderItems = writable([])更新Svelte 可写数组存储的正确方法是什么（或者差异，如果两者都正确） ？我们假设result我想在 的末尾推送一个新项目$orderItems。

orderItems.update(items => ([...items, result]))

或者

$orderItems = [...$orderItems, result]

我试图让我的头脑围绕苗条的 3 反应性事情......

1. 我想在单击按钮时强制刷新 UI。我正在使用一个自定义组件AsyncFetcher，它接受 HTTP 发布数据，并data为其插槽返回对象（http 发布结果）。

2. 我想要一个禁用功能。因此，当单击“禁用”按钮时，会调用 http api，然后刷新数据视图。

<script>
    export let id

    function onDisable() {
        fetch('disable-api-url', {id: id})
        // Then ??
        // What to do after the fetch call, to refresh the view
    }
</script>

<AsyncFetcher postParam={id} let:data>
    {data.name}

    <button on:click={??}>Refresh</button>
    <button on:click={onDisable}>Disable Item</button>
</AsyncFetcher>

我试图on:click={() => id=id}欺骗它刷新无济于事。Ifid本来是一个对象而不是字符串id={...id}会起作用，不幸的是，这里不是这种情况。

实现这一目标的正确方法是什么？

  <button on:click={() => (visible = !visible)}>Toggle</button>

  {#if !visible}
    <QuizArea
      transition:slide
      on:score={e => {
        playerScore = e.detail.score;
      }} />
  {/if}

我的问题是我可以在不切换可见性的情况下使用过渡吗？