Skip to content

fix: import ionic utilities - #6

Open
NgLoader wants to merge 1 commit into
rdlabo-dev:mainfrom
NgLoader:fix/ionic-core-components-import
Open

NgLoader wants to merge 1 commit into
rdlabo-dev:mainfrom
NgLoader:fix/ionic-core-components-import

Conversation

@NgLoader

Copy link
Copy Markdown

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
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.

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.

1 participant