标签: sapper

我正在尝试在 Sapper 中实现 firebase。我安装了模块（@firebase/app、@firebase/auth、@firebase/firestore），然后编写了一个配置文件：

import firebase from '@firebase/app';
import '@firebase/firestore'
import '@firebase/auth'

const config = {
...
};

// Initialize Firebase
firebase.initializeApp(config);
export { firebase };
// Initialize db
export const db = firebase.firestore();
export const auth = firebase.auth();

当我“npm run dev”时，我收到一条错误消息，指出这些 firebase 模块仅适用于客户端，不适用于 Node.js。

因此，我尝试通过多种方式解决这个问题，到目前为止唯一有效的方法是使用 onMount。

  onMount(async () => {
    const {auth} = await import('../firebase/config');
    auth.signInWithEmailAndPassword("test@gmail.com", "test").then((res) => {
      // do some stuff
    })
  })

现在可以了，但我有 3 个问题：

1）这是正确的方法吗？2）我应该从服务器端删除这些模块还是最好保留它们？3）我应该同时使用Firebase的客户端和服务器端版本，并使用客户端版本1来检索每个访问者和服务器端与所有共同数据不同的所有数据吗？

我正在处理一个 Sapper 项目，我想在加载到插槽之前将一些异步数据加载到布局中。我发现在 _layout.svelte 文件中，我无法将道具传递给插槽。

//_layout.svelte
<slot foo={"hello"}></slot>

//index.svelte
<script>
  export let foo;
  alert(foo); // returns undefined
</script>

有没有人遇到过这个？我想我可以通过在每个插槽/子页面上加载我需要的所有数据来解决它。我能够设置插槽道具的唯一方法是手动访问它。

$$props.$$scope.ctx.level1.props.foo = "hello"

<script context="module">
    import GhostContentAPI from '@tryghost/content-api';

    // const api = 'http://localhost/posts';
    const api = new GhostContentAPI({
        url: 'http://localhost',
        key: '95a0aadda51e5d621abd2ee326',
        version: "v3"
    });

    export async function preload({ params, query }) {
        try {
            const response = await api.posts.browse({ limit: 5, fields: 'title, slug' });
            return {
                posts: response
            }
        } catch(err) {
            console.log('Error');
        }
    }
</script>

<script>
    export let posts;
</script>

<svelte:head>
    <title>Blog</title>
</svelte:head>

<h1>Recent posts</h1>
<ul>
    {#each posts as post}
        <li>
            <a rel='prefetch' href='blog/{post.slug}'>{post.title}</a>
        </li>
    {/each}
</ul>

我正在使用 vanilla …

我需要设置一个 Polka（或 Express）服务器，以便它可以从单个server.js入口点为多个应用程序（每个主机名一个）提供服务。可以使用vhost中间件 ( https://github.com/expressjs/vhost )来完成。每个app都作为一个中间件导出，在server.js的中间件链中添加了每个请求对应的那个。

但是，这些应用程序中的一些（不是全部）将是 Sapper 应用程序，因此设置必须与 Sapper 兼容。据我所知，Sapper 构建会生成一个server.js文件，该文件用作应用程序的入口点，但不会导出该应用程序。是否有导出 Sapper 应用程序的构建选项（而不是listen对其进行操作）？或者其他一些方法来做到这一点？

我尝试手动编辑构建并且它似乎可以工作，尽管文件路径存在一些问题，因为 Sapper 应用程序的根目录不是主应用程序的根目录。

我查了这个问题，但没有找到任何参考，所以我想知道我是否走错了路，是否有更明显的解决方案。（注意：我使用的 Node.js 托管不允许将主机名映射到应用程序文件夹，这当然会使事情变得更简单。）

如果用户未经身份验证，我需要将用户重定向到登录页面。我需要类似route.beforeEachVue.js 的东西，理想情况下：

sapper.beforeRouteChange((to, from, next) => {

  const isAuth = "[some session or token check]";

  if (!isAuth) {
    next('/login')
  }

  next()
})

我发现了Sapper - protected routes (route guard)这个问题，但我认为这不足以满足我的需求。如果令牌或身份验证在运行时发生变化怎么办？或者它是否被反应性覆盖？

编辑 1：我认为Sapper GitHub 上的这个问题解决了我的问题。

本质上，我正在开发一个幻灯片项目，其中每个“幻灯片”都是使用 <svelte:component this={currentSelection.component} />. 每张幻灯片都需要逐个组件地自定义进出转换。然而，正如 svelte 文档中所述，我希望下一张幻灯片在当前幻灯片完成转换时“等待”：

\n

与transition:不同，使用in:和out:应用的转换不是双向的\xe2\x80\x94，如果在转换时块被淘汰，则in转换将继续与out转换一起“播放”，而不是反转正在处理。如果输出转换被中止，转换将从头开始重新开始。

\n

是否有一种明智的方法可以使下一张幻灯片“等待”，直到当前幻灯片完成其结尾过渡？

REPL的玩具示例

为后代发布的玩具代码：

//App.svelte\n<script>\n    import RedThing from \'./RedThing.svelte\';\n    import GreenThing from \'./GreenThing.svelte\';\n    import BlueThing from \'./BlueThing.svelte\';\n\n    const slides = [\n            RedThing,\n            BlueThing,\n            GreenThing\n    ];\n    let currentComponent = 0;\n    const prev = () => currentComponent--;\n    const next = () => currentComponent++;\n\n</script>\n\n<button on:click={prev}>Prev</button><button on:click={next}>Next</button>\n<div>\n    <svelte:component this={slides[currentComponent]}/>\n</div>\n\n

//RedThing.svelte\n<script>\n    import { fly, slide } from \'svelte/transition\';\n</script>\n\n<style>\n    div { color: red; }\n</style>\n\n<div …

每当我从服务器获取数据时，我都使用 Sapper 构建项目时，预加载函数在 script context="module" 内声明，如下所示。

<script context="module">
  export async function preload(page) {
    return await this.fetch(`https://reqres.in/api/users?page=1`)
    .then(res1 => {
      return res1.json()
    }).then(res2 => {
      return { 
        notices: res2.data,
      }
    })
  }
</script>

根据文件

A <script> tag with a context="module" attribute runs once when the module first evaluates, rather than for each component instance. 

但是当模块第一次评估时是什么意思？

这是否意味着组件首次呈现时？那么和下面的代码一样在 onMount 生命周期方法中声明 api fetch 函数不一样吗？

<script>
  onMount(async() => {
    const res = await fetch(`https://reqres.in/api/users?page=1`);
    const json = await res.json();
  })
</script>

我正在尝试在 nav.svelte 组件中加载 sv-bootstrap-dropdown 模块，但出现错误<Dropdown> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules。之后我尝试将其安装为 devDependency 但出现错误Cannot read property remove of undefined。这会在sapper文件夹下的服务器 js 文件中自行生成

现在，我有一个菜单，只需单击汉堡包按钮就可以展开或折叠。菜单的默认状态true意味着它已展开，但是当我转到菜单所在的不同路线时not there，它会播放折叠动画。这是示例代码：

<script>
 import { slide } from 'svelte/transition';
 let isExpanded = true; 
</script>

<button on:click={()=>isExpanded=!isExpanded}>Expand/Collapse</button>

{#if isExpanded}
  <nav transition:slide>
   Content
  </nav>
{/if}

<a href="/some-page">There is no menu in this page</a>

这是代码的当前行为：

在页面加载/重新加载时，菜单展开过渡会播放（奇怪的是，这种情况只有时发生），并且单击链接时，菜单折叠过渡会在重定向发生时播放一瞬间。

我不确定这是否是我的实现中的错误或错误。无论哪种情况，如果为此提供解决方法，我们将不胜感激。

提前致谢！

我目前正在尝试在用户单击 href 链接时将用户重定向到新页面。问题是网址本身确实发生了变化，但只有当我手动点击“重新加载”时，页面才会真正刷新并显示新数据。

我如何构建 href 链接：

resultString += "<a href='/edition/id=" + this.note['name'][i]['hkg:persKey'] + "'>";
resultString += this.note['name'][i]['#text'];
resultString += "</a>";

然后，resultString 被推送到一个数组，并在另一个组件中正确读出。

问题是，当重定向时，url 中的 id 明显发生变化并在 url 中更新，但页面不会重新加载。

例如：在'id=xy'URL为：的页面上'/edition/id=xy'，在该页面上'/edition/id=z'显示href。单击此 href 时，网址会明显更改为，'/edition/id=z'但页面不会重新加载。

有谁知道如何解决这个问题？