Vite related issue about stylo

[peterpeterparker]

I needed a coffee, I think it works as following:

import { defineCustomElements } from '@papyrs/stylo/dist/components/stylo-editor';
defineCustomElements();

However doing so it won't work without installing in addition @stencil/core as a dependency.

There are several issues open at Ionic and Stencil about it. Until these are solved there is no cleaner way to import it in vite projects I think.

ionic-team/ionic-framework#23823

ionic-team/stencil#2826

ionic-team/stencil#2959

[wobsoriano]

For now the working solution is to import via unpkg

import "https://unpkg.com/@papyrs/[email protected]/dist/stylo/stylo.esm.js";

or

<script type="module" src="https://unpkg.com/@papyrs/[email protected]/dist/stylo/stylo.esm.js"></script>

Had to change stylo@alpha to [email protected] as it's returning 404

[peterpeterparker]

I think import '@papyrs/stylo' won't work with vite. On the contrary, if I reckon correctly, using the custom elements will - should.

import { defineCustomElements } from '@papyrs/stylo/dist/loader';
defineCustomElements();

[wobsoriano]

Same error

I think import '@papyrs/stylo' won't work with vite. On the contrary, if I reckon correctly, using the custom elements will - should.

import { defineCustomElements } from '@papyrs/stylo/dist/loader';
defineCustomElements();

[peterpeterparker]

In a svelteki app I wasn't able to load the component as displayed above. As a workaround, I did as following:

onMount(async () => {
    const {defineCustomElement} = await import(/* @vite-ignore */ '@papyrs/stylo/dist/components/stylo-editor');
    defineCustomElement();
  });

[peterpeterparker]

Another tricks, if you are looking to import plugins, these can be imported as following:

import {h1, h2, h3, ul} from '@papyrs/stylo/dist/stylo/index.esm';

[peterpeterparker]

also could load another component as following:

const {DeckgoDoc} = await import('@deckdeckgo/core/dist/components/deckgo-doc');
    customElements.get('deckgo-doc') || customElements.define('deckgo-doc', DeckgoDoc);
    ```

[peterpeterparker]

in call case I needed @stencil/core as a dependency and super important with the same version because there is a breaking change in v2.9.0 ionic-team/ionic-framework#24153

[peterpeterparker]

This has been solved thanks to an improvement in StencilJS and released in v0.0.38

See https://github.com/papyrs/stylo/releases/tag/v0.0.38