API пользовательского элемента Svelte - PullRequest
Новая
       98

API пользовательского элемента Svelte

1 голос
/ 04 марта 2020

У меня есть сомнения относительно того, как создать пользовательский элемент API. Я следовал документации , но получаю следующее предупреждение:

Опция 'tag' используется при создании пользовательского элемента. Вы забыли опцию «customElement: true»? (Link.svelte: 1:16)

REPL

Я отметил customElement: true в опциях компилятора.

Я потерян ... Кто-нибудь может мне помочь?

1 Ответ

4 голосов
/ 04 марта 2020

Похоже, что REPL на самом деле не поддерживает пользовательские элементы. Это имеет смысл ...

Общая идея с пользовательскими элементами в Svelte заключается в следующем:

1. Вы устанавливаете опцию компиляции Svelte customElement: true

Например, в стандартном шаблоне свертки вы должны установить эту опцию здесь в плагине Svelte для свертки: 

  plugins: [
    svelte({
      customElement: true,
      ...
    }),
    ...
  ]

2. Вы добавляете <svelte:option tag="what-ever" /> к некоторым вашим компонентам Svelte 

<svelte:option tag="what-ever" />

<script>
  // you can still use other non custom element Svelte components
  import Foo from './Foo.svelte'
  export let name = 'World'
</script>

<p>Hello, {name}!</p>

<Foo />

<style>
 p { color: skyblue; }
</style>

Примечание: вы все равно можете использовать компоненты нестандартного элемента, то есть компоненты без <svelte:option tag="..." />, в ваших пользовательских компонентных компонентах.

Просто те, у кого есть тег, будут видны как пользовательские элементы.

Как правило, на вашей странице можно использовать только один полнофункциональный пользовательский элемент (например, root App.svelte). Или вы можете иметь несколько. Ваш выбор.

3. Вы компилируете / связываете свои компоненты так, как хотите.

Если мы будем использовать пример официального шаблона Svelte для накопительного пакета , то вы получите сгенерированный bundle.js файл.

4. Вы включаете этот bundle.js файл в HTML страницу : 

<script defer src='/build/bundle.js'></script>

5. И теперь на этой странице вы можете использовать теги, которые вы определили выше, как если бы они были родными HTML элементами, например <div> или <strong>.

Они будут реализованы как Svelte компоненты, но, как на данном этапе, теперь это деталь реализации.

Так, например, на этой странице теперь вы можете делать такие вещи, как: 

document.body.querySelector('#container').innerHTML = '<what-ever>Foo</what-ever>'

Или вы могли бы иметь это в вашем HTML (например, в файле index.html шаблона по умолчанию): 

<body>
  <what-ever>foo</what-ever>
</body>

И это все. В некоторых ситуациях это может быть необычно или очень удобно. У вас могут быть пользовательские элементы, реализованные в гладкой декларативной структуре, которую вы можете использовать в любом контексте (при условии, что вы можете импортировать файл .js), с минимальными издержками из-за самой структуры.

Это хорошо, если вы хотите включить это как виджет в блог Wordpress вместо использования jQuery, или даже если вы хотите опубликовать sh framework-agnosti c компонент.

Теперь, если все ваше приложение будет основано на Svelte, оно теряет много соли, потому что пользовательские элементы Svelte действительно страдают некоторыми ограничениями (конец связанного раздела) по сравнению с обычным Svelte компоненты.

Независимо от того, следует ли вам их использовать, зависит от вашего варианта использования.

И, в любом случае, кажется, что вы не можете играть с ними в REPL ...

И последнее ...

Поскольку я использовал шаблон Svelte по умолчанию на протяжении всего этого ответа, следует отметить, что если вы хотите использовать его с пользовательскими элементами, вам следует not инициализируйте компонент App самостоятельно в main. js: 

import App from './App.svelte';

// NOT needed with custom elements
//const app = new App({
//  target: document.body,
//  props: {
//      name: 'world'
//  }
//});

export default app;

Точками входа теперь будут отдельные пользовательские элементы, которые вы создаете с помощью вышеупомянутых методов .

НО вы должны Убедитесь, что все ваши файлы пользовательских элементов .svelte импортированы точкой входа (в данном случае main.js), которая передается в Rollup, или они не будут доступны в конечном файле bundle.js, который создается. (Импортировать файлы, импортированные с помощью main.js, можно.)

...