Provide Mixin via shared StencilJS library

[Bombo]

Hello everyone!

Thanks for finally being able to use extension patterns with components! That will make life a lot easier on a bunch of areas.

I'm not sure if this is a bug report, a feature request, or simply not possible, but we are using a library containing Stencil components to use within our customer projects, which themselves are providing their own Stencil components. So I thought using mixins would be a way to have some common logic provided via the shared library, and the custom components in the customer project would just need to implement the needed delta for that customer's concerns.

That shared logic would use Stencil decorators, like @Prop and @State and others.

I think without those decorators, everything would probably work fine, but those decorators are not really transported when the library is being compiled and used as a dependency.

Is that just how it is? Is there any intention to have Mixins support such a setup?

Thanks for any info!

[johnjenkins]

hey! 👋

Stencil uses typescript as a transpiler where @* decorators are really just flags for absorbing meta for use at runtime.
After your components (or mixins) are built - e.g. my-component.tsx becomes my-component.js - that meta has already been abstracted away, so importing my-component.js isn't enough to tell the compiler what it needs to know.

The good news is that Stencil outputs 'meta ready' versions of your components / mixins with everything needed via it's collections output - so you can use mixins / extends from that.

something like: import { ExternalMixin } from '@another-project/cmps/dist/collection/external-mixin/external-mixin'; < you'll need to make sure you add ./collection... to your package.json exports

[johnjenkins]

here's an example within our test suite:
exported abstract > consuming component

[Bombo]

@johnjenkins That's really helpful, thanks!

The package.json was actually already set up to add the collection folder, and I confirmed the meta data being in there.

So the components.d.ts seems to contain all the necessary information, but at least inside of VSCode I don't have the properties from the mixin accessible via the component's type.

So a minimized example for the setup would be:

// my-mixin.ts file inside of shared library
export const MyMixin = <T extends MixedInCtor>(Base: T) => {
    class MyMixinClass extends Base implements MyInterface {
        @Prop() myProp: string;
    }
}

// customer component in separate project
import { MyMixin } from '@our/library/dist/collection/utils/mixins/my-mixin';

@Component({
    tag: "my-component",
    styleUrl: "my-component.scss",
    shadow: true,
})
export class MyComponent extends Mixin(MyMixin) implements SomeLocalInterface {
    render() {
        return <div>{this.myProp}</div> // [ ERROR ] Property 'myProp' does not exist on type 'MyComponent'.
    }
}

When the mixin is placed inside of the customer project, everything works.

Thanks for the help!

[johnjenkins]

yeah - you'll need to tell typescript where to find the types via the 'core' package.json too.
So something like:

"./collection/*": {
      "types": "./dist/types/*.d.ts",
      "import": "./dist/collection/*.js"
    }

Or an even nicer dx

"./mixins/*": {
      "types": "./dist/types/*.d.ts",
      "import": "./dist/collection/*.js"
    }

[johnjenkins]

I'm going to move this to 'discussions' if that's ok? :)

[Bombo]

@johnjenkins Thanks for your patience on this one. Even after a few years in web developing now, I feel like my journey is just starting sometimes.

I'm afraid I just can't get this to work properly.

Here's a basic excerpt from my library package.json:

{
    "name": "@our/library",
    "version": "0.1.0",
    "main": "./dist/index.cjs.js",
    "module": "./dist/components/index.js",
    "types": "./dist/components/index.d.ts",
    "collection": "./dist/collection/collection-manifest.json",
    "files": [
        "dist/"
    ],
    // the exports node did not exist at all, I've added it after your comment
    "exports": {
        ".": {
            "types": "./dist/components/index.d.ts",
            "import": "./dist/components/index.js",
            "require": "./dist/index.cjs.js"
        },
        "./mixins/*": {
            "types": "./dist/types/*.d.ts",
            "import": "./dist/collection/*.js"
        }
    },
    "sideEffects": false,
    […],
}

Now I can use an import like this:

import { MyMixin } from '@our/library/mixins/utils/mixins/my-mixin';

That makes the Property 'myProp' does not exist on type 'MyComponent'. error go away, but now everywhere where I use <my-component myProp="hello" /> I get

Type '{ myProp: string; }' is not assignable to type 'MyComponent & HTMLAttributes'.Property 'myProp' does not exist on type 'MyComponent & HTMLAttributes'.

It seems like now I have the type info, but the meta data is gone. When I look into components.d.ts the interface for MyComponent is empty:

export namespace Components {
    […]
    interface MyComponent {
    }
}
[…]

I tried a few things (and AI tried to help) but didn't get anywhere. I must be doing something wrong here, but I have no idea where to start on finding out what.

Thanks again for the quick responses on this!

[Bombo]

The folder structure in the library would be

src
|__ components
|__ utils
    |__ mixins
        |__ my-mixin.ts

Just to maybe clear up the import path there.

[johnjenkins]

no worries :)

I setup a starter repo at https://github.com/johnjenkins/boilerplate-monorepo-stencil-mixin - lemme know if it makes sense (or doesn't)

pnpm i && pnpm --filter=@boilerplate-stencil/core run build

then

pnpm --filter=@boilerplate-stencil/playground run start

[Bombo]

Thanks!

Could it be that the project is missing a dependency? @boilerplate-stencil/utilities?

I'll check out the setup, and maybe there's already something in there that helps, without being able to actually run it.

[Bombo]

Nevermind. I just removed the dependency, and now it builds.

[ThornWalli]

I'm working on this right now too 😉

Currently, I'm struggling with the following issue:

Two Stencil projects (ProjectA and ProjectB).
When I import collection types or mixins from ProjectA (dist), the components fromProjectA are available in ProjectB.

But sometimes you might only want one type.

This currently limits its use when you have a core package and another one, and components from the core are supposed to be used.

That’s why the https://github.com/ThornWalli/boilerplate-stencil/ currently includes the mixin via TypeScript.

[k3nsei]

Here is my PoC how to use mixins via shared library feature https://github.com/k3nsei/stencil-query

[k3nsei]

Btw. I have other issue that mixin only works in dev mode but not in production mode. Simply when serving files from www folder component is not rerendering on changes. Even calling forceUpdate does nothing there.