자원 🙏

시작하기 전에 이 템플릿redradix에서 나를 위해 수고한 Andres Martin 및 https://github.com/redradix/svelte-custom-element-template에게 감사의 말을 전하고 싶습니다...

바쁘다면 바로 여기에서 코드를 살펴보고 가지고 놀 수 있습니다: https://github.com/stefanonepa/svelte-component-ts

왜요? 🤔

github repo redradix/svelte-custom-element-template에 설명된 대로:

Building custom elements with Svelte is really easy but have a lot of limitations, in this template I'm trying to show the way I solve most of these limitations.

Svelte current limitations:

• Support nested custom elements
• Nested child components lose their css when the parent is used as a custom element
• Transitions in custom Elements
• Context API doesn't work for custom elements

그들은 웹 구성 요소 내부에 날씬한 앱을 래핑하는 방법인 매우 간단한 사용 사례를 해결했습니다.

어떻게? 👀

우리는 어떻게 이 기적을 이룰 수 있습니까(내부 해킹):

항목 구성 요소를 웹 구성 요소로 구축

하위 구성 요소를 svelte 앱으로 빌드합니다

.

shadowRoot 요소에 하위 구성 요소의 CSS를 삽입합니다

.

전환을 사용하는 경우 문서의 주입을 그림자 요소로 바꿉니다

.

1. shadowRoot 래퍼 웹 구성 요소 구축

// rollup.config.js
svelte({
  preprocess: sveltePreprocess({ sourceMap: !production }),
  compilerOptions: {
    dev: !production,
    customElement: true,
  },
  emitCss: false,
  include: './src/ShadowRoot.svelte',
}),

2. 웹 구성 요소 래퍼에 주입할 svelte 빌드

// rolup.config.js
svelte({
  preprocess: sveltePreprocess({ sourceMap: !production }),
  compilerOptions: {
    dev: !production,
  },
  emitCss: true,
  exclude: './src/ShadowRoot.svelte',
}),

3. 생성된 css를 shadowRoot 노드에 주입합니다.

생성된 css를 잡기 위해 로컬에서 수정rollup-plugin-css-only하여 각 변경 사항(재구축)에서 생성된 css를 푸시합니다.

// ./.rollup/css-only.js
...
generateBundle: function generateBundle(opts, bundle) {
  // Combine all stylesheets, respecting import order
  var css = '';
  for (var x = 0; x < order.length; x++) {
     var id = order[x];
     css += styles[id] || '';
  }

   // Emit styles through callback
   if (typeof options.output === 'function') {
     options.output(css, styles, bundle);
     return;
}
...

그런 다음 래퍼 웹 구성 요소에 스타일 세트 💥가 있어야 한다는 중요한 주의 사항과 함께 CSS를 번들에 바로 삽입합니다(😱 Hack alert!).

import css from './.rollup/css-only'; 
// rollup.config.js
css({
  output(styles, styleNodes, bundle) {
    const match = production
     ? `.shadowRoot.innerHTML="`
     : `.shadowRoot.innerHTML = "`;

      const currentBundle = bundle[bundleFile];
      currentBundle.code = currentBundle.code.replace(
        match, `${match}<style>${styles}</style>`);
  },
}),

4. 그림자 돔에 사용되는 경우 매끄러운 전환 포함

Svelte는 전환과 같은 몇 가지 매우 유용한 유틸리티를 제공합니다(cf. https://svelte.dev/tutorial/transition )

내 실제 이해를 위해 svelte는 헤드/문서에 동적으로 계산된 스타일을 주입하므로 전환이 그림자 돔에 적용되지 않습니다. 그렇기 때문에 문서 주입을 Shadow DOM 노드로 대체해야 합니다.

// rollup.config.js
replace({
  '.ownerDocument': '.getRootNode()',
  delimiters: ['', ''],
}),
replace({
  '.head.appendChild': '.appendChild',
  delimiters: ['', ''],
}),

결과 🏁

코드를 변경하고 자동으로 다시 빌드할 수 있는 DX(개발자 경험)와 함께 날씬한 앱을 래핑하고 즉시 사용 가능한 TypeScript 및 scss를 지원하는 웹 구성 요소가 있습니다.

스테파노네파 / svelte-component-ts

Svelte-component-ts 템플릿 🎉

이 템플릿을 사용하면 svelte를 shadow DOM 항목 구성 요소와 함께 사용한 다음 svelte의 장점을 사용하는 하위 구성 요소와 함께 사용할 수 있습니다.
이 템플릿은 https://github.com/redradix/svelte-custom-element-template 덕분에 https://github.com/MonkeyAndres에서 영감(해킹)을 훔쳤습니다.
이 템플릿에는 다음이 포함됩니다.

즉시 사용 가능한 TypeScript 지원

사스 지원

최소 구성의 babel(rollup.config.js 참조)

권장 도구

Volta (The Hassle-Free JavaScript Tool Manager)

용법

degit으로 복제합니다.

npx degit stefanonepa/svelte-component-ts my-new-component
cd my-new-component
yarn
yarn dev

제약

entry 요소에 스타일을 설정합니다ShadowRoot.svelte.

⚠️ 루트 구성 요소의 스타일은 svelte에 의해 범위가 지정되지 않으므로 거기에서 일부를 사용하는 경우 선택자를 신중하게 선택하십시오 ⚠️.

왜요?

(redradix/svelte-custom-element-template ☝️에서)
Svelte로 사용자 정의 요소를 구축하는 것은 정말 쉽지만 많은 제한 사항이 있습니다. 이 템플릿은 이러한 제한 사항 대부분을 해결하는 방법을 보여주려고 합니다.
Svelte 전류 제한:

Support nested custom …

View on GitHub

할 일 👐

[ ] 핫 리로드 지원

결론

이것이 svelte가 제공하는 모든 장점을 사용하여 사용자 정의 요소를 만들려는 모든 사람에게 도움이 되기를 바랍니다. 나는 호리호리한 기여자들이 제공하는 덜 해키한 것을 찾고 싶습니다. 그러나 나는 여전히 결과에 매우 만족합니다.

웹 구성 요소에 대한 경험을 자유롭게 공유하고 개선을 위한 아이디어를 공유하거나 인사만 해주세요 👋