Svelteを触ってみる

ピン留めされたアイテム

目的

下記でいけるかと思ったら無理だった。

import icon from './assets/icon.png'

<ImageComponent src={icon} />

<ImageComponent src={'/assets/icon.png'}

index.html

<head>
  <script src="https://unpkg.com/myscript/myscript.min.js"></script>
</head>

@types/window.d.ts

interface Window {
  myscript: any;
}

でもこれだと結局、↓みたいなことをする必要があって微妙

const myscript = window.myscript;
const foo = new myscript('foo');

App.svelte

<script context="module">
  export const myscript = window.myscript;
</script>

Example.svelte

<script lang="ts">
  import { myscript } from '../App.svelte'

  const foo = new myscript('foo');
</script>

《2021/06/22 追記》
当然だよなぁって感じのWarning...

(!) Circular dependency
src/App.svelte -> src/components/Example.svelte -> src/App.svelte

他にもっといい方法があったら教えてください。

結局、Circular dependencyの問題は切り分けることで解決した。

Circular dependency

App.svelte

<script lang="ts"  context="module">
  export const myscript = window.myscript;
</script>

<script>
// Do something
</script>

子要素

Child.svelte

<script lang="ts">
  import { myscript } from './App.svelte';

  // Do something with myscript
</script>

新規にsrc配下に modules ディレクトリを作成し、そこにmoduleを切り出す。

modules/Modules.svelte

<script lang="ts" context="module">
  export const myscript = window.myscript;
 // ここに追加していく。
</script>

Child.svelte

<script lang="ts">
  import { myscript } from './modules/Modules.svelte';

  // Do something with myscript
</script>