将苗条的组件注入现有的应用程序？

Question

是否可以在现有项目中集成多个组件（库）（laravel）？我试过一个，这不是问题（在前端），但有几个我不知道后端将如何实现。

我想我将不得不使用 json 将信息倒入组件中。每个组件（画廊）都必须单独集成（喜欢->

import Component from './Component.svelte';
new Component ({
  target: document.querySelector ('. app')
});

)

如果有人能给我一个方向，我将不胜感激..

编辑（更多解释）：

你好。我使用 web pack 和 gulp 来配置 Svelte。这个想法是替换现有项目中的画廊。

我的JSON文件：

{
  "top_offers": [
    {
      "id": 1,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_1.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_2.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_3.jpg"
        }
      ]
    },
    {
      "id": 2,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_4.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_5.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_6.jpg"
        }
      ]
    },
    {
      "id": 3,
      "imgs": [
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_7.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_8.jpg"
        },
        {
          "url": "https://static.barnes-bulgaria.com/property-images/big/747121_9.jpg"
        }
      ]
    }
  ]
}

我的组件 (Houses.svelte)

<script>
  import { topOffers } from "./topOffers.js";
  import { onMount } from "svelte";
  import SwiperCore, { Lazy, Navigation } from "swiper";

  SwiperCore.use([Lazy, Navigation]);

  let Swiper;
  let SwiperSlide;

  onMount(async () => {
    let res = await fetch("json/rentahome.json");
    res = await res.json();
    $topOffers = res.top_offers;

    const SwiperSvelteModule = await import("swiper/svelte");
    Swiper = SwiperSvelteModule.Swiper;
    SwiperSlide = SwiperSvelteModule.SwiperSlide;
  });
  
</script>

{#each $topOffers as gallery (gallery.imgs)}
  <svelte:component
    this={Swiper}
    style="--swiper-navigation-color: #fff;--swiper-pagination-color: #fff"
    lazy={true}
    navigation={true}
    loop={true}
    preloadImages={true}
    class="mySwiper"
    grabCursor={true}
  >

    {#each gallery.imgs as imgs (imgs.url)}
      <svelte:component this={SwiperSlide}>
        <img data-src={imgs.url} class="swiper-lazy size-img" alt="" />
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white" />
      </svelte:component>
    {/each}

  </svelte:component>
{/each}

<style>
  .size-img {
    height: 200px;
    width: 100%;
  }
</style>

HTML 现有项目：

 <div class="slider-slick-cardd">
           <div class='svelte' svelte-id='1'></div>
          </div>

这里我给每个wrapper赋予了一个属性（svelte-id='1', svelte-id='2'..etc），假设它们是来自JSON[=17的ids =]

我的svelte.js文件：

import Houses  from './Houses.svelte';
Array.from(document.querySelectorAll('.svelte')).forEach((e,i) => {          
   new Houses({
    target: e 
});
});

这里假设他们应该被属性捕获.. 此解决方案无法按预期工作，因为每次都是 foreach 组件，结果在下面的附图中获得

所需的结果必须是要成为行的图库列（对于每个包装器 svelte-id =“1”（2,3 ..etc）属性。

请有人帮忙 :((

Answer 1

如果您使用 the default Svelte template 制作您的应用程序，您会看到 main.js 导出名为 app 的内容。这是可从 Svelte 外部访问页面其余部分的代码。

在 rollup.config.js 中有一个字段 output.name（默认情况下 app）这是从 main.js 导出的名称会知道的。

有了这两部分，我们可以轻松地将 main.js 更改为以下内容：

import App from './App.svelte';

export default function(target, props) {
    new App({
        target,
        props
    })
};

我们这里有一个功能，而不是立即安装我们的应用程序，而是允许创建应用程序！

现在您的后端可以像这样生成 html 输出：

<script>
  app(document.getElementById('A'), propsA)
  app(document.getElementById('B'), propsB)
  app(document.getElementById('C'), propsC)
</script>

它会加载应用程序三次，在指定的 div 中，使用给定的道具。

现在您当然也可以根据需要在后端渲染期间打印出这些道具，实际使用方式因平台而异（在您的情况下Laravel）

请注意，您必须确保整个 DOM 已加载（以便能够找到目标）并且 svelte 包已加载（原因很明显）

Answer 2

我猜您会想知道每个 svelte 组件中的 svelte-id，因此，您为每一行创建 1 个 svelte 组件，并且只显示 1 个图库。

您可以使用 element.getAttribute()

获取属性

Array.from(document.querySelectorAll('.svelte')).forEach((e,i) => {          
   const svelteId = e.getAttribute('svelte-id');

   new Houses({
    target: e,
    props: {
      offerId: svelteId
    }
   });
}

这样，您就可以在 Svelte 组件中处理它了：

<script>
  import { topOffers } from "./topOffers.js";
  export let offerId;
  // ....
</script>

{#each $topOffers[offerId] as gallery (gallery.imgs)}
  <svelte:component ... />
{/each}

将苗条的组件注入现有的应用程序？

inject svelte components into existing app?

laravel

svelte