Add Stencil JS Support

[bernardodsanderson]

It would be great to have Stencil support.

Repo: https://github.com/ionic-team/stencil

Getting started:

git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin
npm install

[jimthedev]

It is worth noting that import { defineCustomElements } from "split-me" (or any stenciljs component) don't work in codesandbox or stackblitz even though the same project downloaded locally on my machine works fine. In these online editors you will get an error that looks something like (0 , _splitMe.defineCustomElements) is not a function (in codesandbox) or split_me_1.defineCustomElements is not a function (in stackblitz). Perhaps the stencil compiler isn't adding a package format that codesandbox is looking for?

edit: Looks like you can actually use stencil packages in codesandbox but you must append dist/esm to the package when importing.

So do not do this:

import { defineCustomElements } from "split-me";

instead do this:

import { defineCustomElements } from "split-me/dist/esm";

Not sure why this is but I'd imagine stencil is either publishing empty commonjs package or codesandbox isn't picking them up.

Here are the example projects using the split-me/dist/esm path:

codesandbox example | stackblitz example

[CompuIves]

Ah, that's interesting. It seems like the file mentioned on main of the split-me package.json only has this code:

// SplitMe: CommonJS Main

Url: https://unpkg.com/split-me@0.3.1/dist/index.js

I think that explains why it isn't a function, we prefer main over module since that's less transpiling work on our side.

Regarding Stencil support, I agree! That would be great to add!

This looks super interesting, so there is absolutely no build step? In that case maybe it makes sense to add a static template that just hosts the files so you can use them directly with Stencil. What do you think?

[jimthedev]

It depends who you are, if you are producing Stencil components then there is a build step. In order to consume them, you can do so without a build step.

From their site:

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil takes features such as

• Virtual DOM
• Async rendering (inspired by React Fiber)
• Reactive data-binding
• TypeScript
• JSX

and then generates standards-based Web Components with these features baked in.

So then producers of components like split-me have a build step that uses the stencil compiler.

[jimthedev]

Good catch on the main. That is kinda what I was thinking. IMO they should just not have the main field if they aren't going put anything in that bundle. Alternatively then they could bring in npm.im/esm and just point to the esm bundle if the commonjs is going to be empty. Either way it seems like it is something they would need to implement, no?

[CompuIves]

Interesting, I'm curious if the Stencil compiler works in the browser (or if not, if it works only with fs). Then it should be possible!

IMO they should just not have the main field if they aren't going put anything in that bundle.

I agree with that, we do fallback to module if we cannot find main.

[CompuIves]

If people are interested in taking a stab at it: we have a reference PR to add a template: #683

[github-actions]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[github-actions]

This issue has been automatically closed because there wasn't any activity after the previous notice or the stale label wasn't removed.