Skip to content

Commit

Permalink
refactor: adjust custom element mode behavior
Browse files Browse the repository at this point in the history
custom element mode no longer exports the element constructor
this change is necessary to allow defining lazy elements
See vuejs/core#4261
  • Loading branch information
yyx990803 committed Aug 7, 2021
1 parent 78e5474 commit 083c9c8
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 18 deletions.
18 changes: 11 additions & 7 deletions packages/plugin-vue/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,23 +82,27 @@ export default {

## Using Vue SFCs as Custom Elements

> Requires `vue@^3.2.0`
> Requires `vue@^3.2.0` & `@vitejs/plugin-vue@^1.4.0`
By default, files ending in `*.ce.vue` will be processed as native Custom Elements when imported (created with `defineCustomElement` from Vue core):
Vue 3.2 introduces the `defineCustomElement` method, which works with SFCs. By default, `<style>` tags inside SFCs are extracted and merged into CSS files during build. However when shipping a library of custom elements, it may be desirable to inline the styles as JavaScript strings and inject them into the custom elements' shadow root instead.

Starting in 1.4.0, files ending with `*.ce.vue` will be compiled in "custom elements" mode: its `<style>` tags are compiled into inlined CSS strings and attached to the component as its `styles` property:

```js
import { defineCustomElement } from 'vue'
import Example from './Example.ce.vue'

// register
customElements.define('my-example', Example)
console.log(Example.styles) // ['/* css content */']

// can also be instantiated
const myExample = new Example()
// register
customElements.define('my-example', defineCustomElement(Example))
```

Note in custom elements mode there is no need to use `<style scoped>` since the CSS is already scoped inside the shadow DOM.

The `customElement` plugin option can be used to configure the behavior:

- `{ customElement: true }` will import all `*.vue` files as Custom Elements.
- `{ customElement: true }` will import all `*.vue` files in custom element mode.
- Use a string or regex pattern to change how files should be loaded as Custom Elements (this check is applied after `include` and `exclude` matches).

## License
Expand Down
13 changes: 2 additions & 11 deletions packages/plugin-vue/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,7 @@ export async function transformMain(
output.push(`export const _rerender_only = true`)
}
output.push(
`import.meta.hot.accept(({ default: ${
asCustomElement ? `{ def: updated }` : `updated`
}, _rerender_only }) => {`,
`import.meta.hot.accept(({ default: updated, _rerender_only }) => {`,
` if (_rerender_only) {`,
` __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render)`,
` } else {`,
Expand Down Expand Up @@ -191,14 +189,7 @@ export async function transformMain(
resolvedMap.sourcesContent = templateMap.sourcesContent
}

if (asCustomElement) {
output.push(
`import { defineCustomElement as __ce } from 'vue'`,
`export default __ce(_sfc_main)`
)
} else {
output.push(`export default _sfc_main`)
}
output.push(`export default _sfc_main`)

return {
code: output.join('\n'),
Expand Down

0 comments on commit 083c9c8

Please sign in to comment.