Skip to content

fix: import ionic utilities - #6

Merged
rdlabo merged 3 commits into
rdlabo-dev:mainfrom
NgLoader:fix/ionic-core-components-import
Oct 2, 2026
Merged

rdlabo merged 3 commits into
rdlabo-dev:mainfrom
NgLoader:fix/ionic-core-components-import

Conversation

@NgLoader

Copy link
Copy Markdown
Contributor

Problem

The runtime imports (createAnimation, createGesture, the lifecycle constants) come from the @ionic/core root, which is Ionic's lazy-loader build. Apps that use the custom elements build (Ionic 9 Angular, Ionic 8 standalone, React, Vue) then also bundle Stencil's lazy loader. Its import(`./${bundleId}.entry.js`) makes esbuild emit every Ionic component as an extra chunk that is never loaded, and the app gets a second copy of Ionic's shared code. esbuild also warns: The glob pattern import("./**/*.entry.js*") did not match any files.

Measured in an Angular 22 + Ionic 9 app (esbuild) with ionic-theme-ios26 9.4.0, ionic-theme-md3 9.1.1 and ionic-theme-utils 0.1.1:

JS files JS total Initial (raw / gzip)
Root imports 210 4.8 MB 1.01 MB / 275 kB
@ionic/core/components 119 3.7 MB 938 kB / 253 kB

Changes

  • src/: all imports from @ionic/core now use @ionic/core/components. It exports the same functions, and custom-elements.d.ts re-exports all types. Ionic 9's own @ionic/angular imports the root only in its lazy variant.
  • rdlabo-check-esm fails when a published .js file imports the @ionic/core root, so themes that run test:esm catch a regression in CI. There is a new case in check-esm.test.mjs.

Trade-off

Apps that still use the lazy-loader build get a small duplicate of these utilities instead.

@NgLoader

Copy link
Copy Markdown
Contributor Author

md3 and ios27 have the same root imports.
I have the fixes ready and can open PRs for both if this approach works for you.

@rdlabo

rdlabo commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

Sorry, I completely missed this PR! This is an excellent contribution—thank you for investigating the bundle-size impact and putting this together. I really like this approach.

I verified that the checks pass with Ionic 9. However, with Ionic 8.8.1, which we still support, test:esm fails with ERR_UNSUPPORTED_DIR_IMPORT for @ionic/core/components. Ionic 9 maps this subpath through its package exports, but Ionic 8.8.1 does not. Changing the runtime imports to @ionic/core/components/index.js fixes it locally. Could you update those imports to preserve Ionic 8 compatibility?

@NgLoader

NgLoader commented Oct 2, 2026

Copy link
Copy Markdown
Contributor Author

Hey,
sorry, I totally missed the Ionic 8 support.
It should be fixed now.

The runtime imports use @ionic/core/components/index.js, and I added a check for it.

@rdlabo

rdlabo commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

Thanks for the quick update! I’ll merge this now and review your PRs in the other repositories next. Really appreciate your contribution!

@rdlabo
rdlabo merged commit bf561e7 into rdlabo-dev:main Oct 2, 2026
2 checks passed
@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown

npm beta published

CI passed for the merge commit bf561e7dd38b. Install the immutable version with:

npm install @rdlabo/ionic-theme-utils@0.1.2-beta.pr6.shabf561e7dd38b

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants