Lifecycle Method Issues with Nested Components when using `single-export-module` customElementsExportBehavior

[gaaral]

Problem

When rendering a nested component in Storybook, the inner component’s lifecycle method componentWillLoad (in my case) is not called unless I explicitly call defineCustomElements() in preview.ts.

Example:

//component-one.tsx
@Component({ tag: 'component-one', shadow: true })
export class ComponentOne {
  componentWillLoad() {
    console.log('componentWillLoad called'); // Only called when defineCustomElements() is used
  }

  render() {
    return <span>Component One</span>;
  }
}

//component-two.tsx
@Component({ tag: 'compnent-two', shadow: true })
export class ComponentTwo {
  render() {
    return <component-one></component-one>;
  }
}

Adding defineCustomElements() to preview.ts resolves the lifecycle issue, but introduces a Vite warning:

[vite] warning: 
/packages/my-component-library/dist/esm-es5/index-CB6EUl6g.js
1  |  import{__assign,__awaiter,__extends,__generator,__spreadArray}from"tslib";...

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations  for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

Plugin: vite:import-analysis

stencil.config.ts Snippet

export const config: Config = {
...
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      transformAliasedImportPathsInCollection: true,
    },
   {
      type: 'dist-custom-elements',
      customElementsExportBehavior: 'single-export-module',
      externalRuntime: false,
      includeGlobalScripts: false,
      minify: true,
    },
   angularOutputTarget({
      componentCorePackage: 'my-component-library',
      outputType: 'standalone',
      directivesProxyFile: '../angular/libs/core/src/libs/components.ts',
      directivesArrayFile: '../angular/libs/core/src/libs/index.ts',
    }),
...
}

[davidpett]

@gaaral this is expected behavior. The example-lazy package in this repo is setup similar and you do need to defineCustomElements

[gaaral]

@gaaral this is expected behavior. The example-lazy package in this repo is setup similar and you do need to defineCustomElements

That's what I figured, no issues with that. The main concern was about the vite warning.

[davidpett]

@gaaral can you do a simple reproduction of this issue? Or check with the latest version of the plugin to see if it is still an issue

[gavmck]

When I try the example-lazy package it does not recompile on save, I have to reboot the storybook server