标签: svelte-3

我正在寻找一个 Svelte“委托延迟加载”组件到另一个“真实”组件。该组件对于不应该知道存在此“代理”的用户应该是透明的：

• 延迟加载委托（使用动态导入 js 模块的回调）
• 支持插槽（插槽应在准备好时转发给委托）
• 支持事件（通过将订阅转发给委托）

我认为现在不可能，因为没有公开用于插槽转发或事件转发的 api。也许通过在 js 中实现相同的内部接口有一个简洁的组件来进行黑客攻击？

编辑

我正在寻找这种神奇的方法：

我有一个 Heavy 组件，我想异步加载它

重.细：

<div on:click>
  <slot {secret}/>
  <slot name="footer"/>
</div>

<script>
  let secret = 'huhu';
</script>

我希望能够像这样导出这个组件：

模块.js

import { lazy } from './lazy.js'; // magic method

export let Heavy = lazy(async () => (await import('./Heavy.svelte')).default)

然后，消费者可以使用 Heavy，而不知道它已被包装在这个“高阶”惰性组件中。该消费者不必处理/了解有关该包装器的异步行为的任何信息：

消费者纤细

<Heavy on:click={() => console.log("clicked")} let:secret>
  <div>{secret}</div>
  <div slot="footer">Footer</div> 
</Heavy>

<script>
  import { Heavy } from './module.js';
</script>

我有一个“工作”解决方案，它不支持“let”，不支持命名插槽，也不支持事件。

我对 svelte 很陌生，我正在尝试使用 svelte 在全屏上渲染画布。听起来很容易做到，但我无法让它正常工作。我将 awidth和height变量绑定到父级的clientWidth/clientHeight并使用这些变量来设置画布的尺寸。现在的问题是，当onMount调用时，width和height变量已设置，但它们尚未应用于画布元素。这意味着当画布第一次渲染时，它仍然具有初始尺寸，而不是父级的尺寸。只有当我第二次渲染它时，它才具有正确的尺寸。如何使画布在第一次渲染时具有正确的尺寸或在画布具有正确的尺寸时再次渲染画布？

在这里您可以找到“工作”版本。

<script>
  import { onMount } from "svelte";

  let canvas;
  let ctx;
  let width = 1007;
  let height = 1140;

    const draw = () => {
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    ctx.moveTo(width/2 - 50, height/2);
    ctx.arc(width/2, height/2, 50, 0, 2 * Math.PI);
    ctx.fill();
    }
    
  onMount(() => {
    ctx = canvas.getContext("2d");
        draw();
        setTimeout(draw, 5000);
  });
</script>

<style>
  .container {
    width: …

是否有任何 rollup.js 插件允许混淆/破坏 CSS 类名？除了 webpack 之外，我什么也没找到： https: //github.com/sndyuk/mangle-css-class-webpack-plugin

我正在构建一个 Svelte 输入组件，该组件应该可以在同一页面上多次使用。

<div>
    <label>{label}</label>
    <div>
        <input bind:value>
        <!-- some more elements -->
    </div>
</div>

尝试关联标签和输入我遇到以下问题：

• 我无法通过将外部更改为 来使用隐式关联<div>，<label>因为输入不是直接子级。
• 我无法使用 labelsfor属性，因为重复使用该元素会创建可变的相同 id。

有没有办法在 Svelte 中创建组件实例唯一 id（前置或后置），或者是否有其他解决方案来解决此问题。

或者手动设置随机字符串作为 id 是最好的解决方案吗？

<script>
    const id = random_string();
    /* ... */
</script>

<div>
    <label for={id}>{label}</label>
    <div>
        <input {id} bind:value>
        <!-- some more elements -->
    </div>
</div>

有人知道为什么如果我将属性绑定到组件它会触发反应两次吗？我创建了一个 REPL 来重现问题。

https://svelte.dev/repl/71c60ba3ff5f429284472c5b0e0a6c0e?version=3.32.3

谢谢

我一直在从事 Svelte 3 + Electron 12.0.5 项目。我正在使用svelte-spa-router包进行哈希路由。我的项目结构如下所示：

node_modules/
public/
    build/
        bundle.css
        bundle.js
    index.html
src/
    Components/
        Pages/
            Home.svelte
            Settings.svelte
            ...
        Sidebar.svelte
        Titlebar.svelte
    App.js
    App.svelte
...
index.js // <-- Electron entry point
rollup|svelte|tailwind // <-- config files

由于我使用的是路由器，所以电子的window.loadFile()无法工作；为了解决这个问题，我同时使用了Sirv -cli和. 现在我的启动脚本如下所示：

"start": "concurrently \"sirv public --no-clear --port=40072\" \"electron .\""

现在我曾经window.loadURL("https://localhost:40072")让这个工作。.svelte文件，在<script>标签内，我尝试这样做import * as electron from "electron"；但这导致了一个错误，说fs未定义。所以现在，我在内部创建了一个快速服务器index.js，并使用它向服务器fetch发出POST请求并执行我可以轻松完成的操作ipcMain，并且ipcRenderer...我不知道我是否做错了什么（nodeIntegration 是已设置为 true）。我对 …

我想创建一个 JS 文件，当通过脚本标记动态注入时，该文件在另一个独立页面上执行一些代码。需要运行的代码，我是用 Svelte 编写的。那么如何才能将代码作为单个 HTML 文件获取呢？目前，构建捆绑包时有单独的 CSS、HTML、JS 文件。

如果需要的话，如果由于某种原因无法使用 Svelte，我也可以在 React 中编写代码。

该代码用于创建一个按钮，该按钮在页面上创建一个 iframe。然后 iframe 中的内容就从那里获取。

如何实现创建包含 css 和 html 的单个 JS 文件的目标？

我正在尝试使用 Svelte 构建具有基于角色的访问权限的 SPA。来自 Angular 及其路由保护，我想设置类似的东西。

最好的方法是什么？

编辑：

我确实指的是 SvelteKit，我更新了我的问题以反映这一点。

我正在尝试为这个小部件列表添加动画。当然我不能只是animate:flip一个组件，Svelte 需要一个 DOM 元素。

<!-- invalid -->
{#each widgets as widget (widget.id)}
    <Widget {...widget} animate:flip/>
{/each}

我通常会用一个简单的容器 div 来解决它：

<!-- does not apply to my situation -->
{#each widgets as widget (widget.id)}
  <div animate:flip>
    <Widget {...widget} />
  </div>
{/each}

但是，由于我在 周围使用 CSS 网格#each，因此我需要 Widget 作为直接子级。我无法用任何东西包裹它。我该如何解决这个问题？有什么方法可以传递animate:flip到 Widget 组件并在那里处理它吗？

这是我想要实现的目标的 REPL。当每行（包含三个单元格）是一个组件时，我无法获得相同的行为。

我正在尝试创建一个svelte app使用svelte-kit. 我有一个内部幼虫服务器，我在其中使用构建文件夹来打开文件index.html。

但问题是每次我要做改变时我都必须这样做svelte-kit build。

最初，svelte-kit build也不会创建index.html。因此，我们配置一些适配器来解决这个问题。

我希望在运行时也有相同的行为svelte-kit dev。我不知道我需要更改哪些配置。目前，当我运行 dev 时，它会创建.svelte-kit文件夹。

// svelte.config.js file
import adapter from '@sveltejs/adapter-static';

const config = {
kit: {
    adapter: adapter(),
    
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',

    vite: {
        optimizeDeps: {
            include: ['just-throttle', 'dayjs']
        }
    }

   },
};

export default config;