标签: svelte-3

我可以使用 Svelte 生成“初始”HTML 文件吗？

我正在使用 Django、Webpack 和 Tailwindcss。我想在我的前端中使用 Svelte，但我不想放弃仅使用服务器端渲染（Django 模板）带来的速度。如果我最初展示的是一个引导 HTML 页面，它引入了 bundle.js，并且 Svelte 在客户端构建了 DOM，那么浏览器仅在加载 JS 文件后才开始下载图像。

与最初呈现的 HTML 已包含图像链接相比，浏览器开始与 JS 一起下载它们，从而加快感知页面加载速度。

我不想使用 Sapper 作为我的应用程序服务器，我想继续使用 Django。

我有两家店：

export const custom_items = writable([]);
export const another_items = writable([]);

它们都有对象数组，对象看起来像这样（当然，值是不同的）：

{
    id: 123
    amount: 123
    price: 123
}

我想创建自己的派生变量，它将保存两个商店“custom_items”和“another_items”的总量。我怎样才能做到这一点？

我只能通过这段代码来做到这一点，但它不是反应性的：

function get_total_amount() {
    let total = 0;
    get(custom_items).every((item) => {
        total += item.amount;
    })
    get(another_items).every((item) => {
        total += item.amount;
    })
    return total;
}

一定有更好的方法，我听说过派生商店，但我不知道在这种情况下如何使用它。

从标题中可以清楚地看出，我只有一个简单的问题。Svelte 商店安全吗？

我用它来保存用户数据，例如自定义声明，如果有人可以将自己更改为管理员，那可能不会很好。

所以我的问题是：用户/黑客是否可以更改存储在 svelte 存储中的数据？我应该将敏感数据移出吗？

在文档中有一个标签部分包含这样的内容：

小写标签（如<div>）表示常规 HTML 元素。大写的标签（例如<Widget>或<Namespace.Widget>）表示组件。

如何导出这样的<Namespace.Widget>或<Namespace.Whatever>？

我有一个情况，我打开了两个选项卡 localhost:5000/，并且localhost:5000/stream想要更新路径中的变量并实时/查看路径中的变化。stream商店不是这样工作的，如果我将本地存储与商店一起使用，我stream只有在刷新页面后才能获取页面上的数据，这不是我需要的。有什么解决办法吗？

这个问题最好用一个实际的例子来说明。

<script>
    let searchInput = '';
    let values = ['a', 'b', 'c', 'd', 'e', 'f'];
    $: filteredValues = searchInput ? values.filter(v => v.toLowerCase().includes(searchInput.toLowerCase())) : values;
    
    let chosenValues = [];
</script>

<input type="search" placeholder="Search" bind:value={searchInput} />

{#each filteredValues as value (value)}
    <div class="checkbox">
        <input type="checkbox" bind:group={chosenValues} value={value} />
        {value}
  </div>
{/each}

{chosenValues}

也可以在 REPL 上找到：https://svelte.dev/repl/5af87332d81e4d82835bcd0f47ff9d81?version=3.44.1。

问题发生如下：

1. 您选择选项 a 和 b
2. 您搜索 c
3. 您选择选项c

现在 selectedValues 只包含 c；a和b消失了。我想我可以循环遍历所有values并隐藏不属于 的部分hiddenValues，这样它们仍然是 DOM 的一部分，但为什么会发生这种情况，有没有更简单的方法来处理这个问题？

我设置svelte.config.js如下代码：

import preprocess from 'svelte-preprocess';

const config = {
  preprocess: preprocess(),
};

export default config;

突然，我的 Svelte 代码不断出错Error in svelte.config.js SyntaxError: Cannot use import statement outside a module

如何解决这个问题？但我仍然可以使用 npm 运行该项目

Svelte 中有没有办法添加仅影响当前组件和任何后代组件的样式？

Svelte 支持本机:global()选择器包装器，它将在全局范围内声明该选择器的样式，但我正在寻找类似的东西，它仅与当前或任何后代组件中的选择器匹配。

例如（REPL）：

应用程序.svelte

<script>\n    import C1 from \'./C1.svelte\';\n    let name = \'world\';\n</script>\n\n<div><C1>Hello {name}!</C1></div>\n

C1.纤细

<script>\n    import C2 from \'./C2.svelte\';\n    let name = \'world\';\n</script>\n\n<style>\n    :global(div) {\n        padding: 10px;\n        background-color: blue;\n    }\n    div {\n        background-color: red;\n    }\n</style>\n\n<div><C2><slot /></C2></div>\n

C2.纤细

<div><slot /></div>\n

在上面的示例中，所有三个组件都从中间子组件C1.svelte接收全局样式。我正在寻找一种方法来执行某种混合样式（不将样式传递给子组件）以添加仅影响组件树中向下的组件的“全局向下”样式。

当:global()不使用选择器包装器时，匹配的节点会被分配一个唯一的类，然后该类是选择器的目标，并在编译期间添加到选择器中。我的要求/建议是这样的：

:find(div) {\n  background-color: blue;\n}\n

\xe2\x80\xa6where:find()类似地为相同或降序组件中匹配的任何 HTML 元素分配一个唯一的类。这可能吗？

这是我创建苗条上下文的方式：

<script>
import {setContext} from 'svelte'
let layoutWidth


setContext('layout', {layoutWidth})

</script>
<div bind:offsetWidth={layoutWidth}><slot/></div>

如果我尝试getContext在子组件中，那么我得到了undefined但是在父组件中 layoutWidth 总是有价值的。

如何获取offsetHeight苗条的父元素？

我这样使用getContext：

<script>
import {getContext} from 'svelte'
const {layoutWidth} = getContext('layout')
$: console.log(layoutWidth) //undefined
</script>

我是苗条的新手，我想按照官方指南尝试使用打字稿。我已经生成了项目并且没有对我的代码做任何更改。但是我从 vscode 编辑器（生成的文件 App.svelte）收到（linting？）错误：

任何帮助将不胜感激。

• vscode：版本：1.47.3，
• vscode svelte（官方扩展）：v101.4.0
• 节点：v12.14.0

package.json （部分的）：

"devDependencies": {
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-check": "^0.1.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^4.0.0",
    "typescript": "^3.9.3",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^1.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }

tsconfig.json：

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}