feat(webpack-bundler-runtime): create container function

[ScriptedAlchemy]

Description

Implementation of container factory for at runtime container creation

import {createContainer} from '@module-federation/webpack-bundler-runtime/container'

const createdContainer = createContainer({
  name: '@myRemote',
  exposes: {
    './remote': ()=> import('./remote'),
  },
  remotes: [
    {
      type:'esm',
      name: "other",
      // mf-manifest.json is a file type generated in the new version of Module Federation build tools, providing richer functionality compared to remoteEntry
      // Preloading depends on the use of the mf-manifest.json file type
      entry: "http://localhost:3000/remote2.js",
      alias: "other"
    },
  ],
  shared: {
    react: {
      version: '18.0.0',
      scope: 'default',
      get: async () => await import('https://esm.sh/react'),
      shareConfig: {
        singleton: true,
        requiredVersion: '^18.0.0',
      },
    },
  },
})

export const get = async (a,b)=> (createdContainer).get(a,b)
export const init = async (a,b) => (createdContainer).init(a,b)

//or 

window['@myRemote']= {get,init};

I have also addded initial async function as well for container creation.

import {createContainerAsync} from '@module-federation/webpack-bundler-runtime/container'

// can wait for container initialization, for example if import maps need to be injected before container can become active. 
const createdContainer =  await createContainerAsync(options)

export const get = async (a,b)=> (await createdContainer).get(a,b)
export const init = async (a,b) => (await createdContainer).init(a,b)

Related Issue

Types of changes

• Docs change / refactoring / dependency upgrade
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• I have added tests to cover my changes.
• All new and existing tests passed.
• I have updated the documentation.

[changeset-bot]

🦋 Changeset detected

Latest commit: ff6c8d2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
@module-federation/webpack-bundler-runtime	Patch
@module-federation/enhanced	Patch
@module-federation/runtime-tools	Patch
@module-federation/rspack	Patch
@module-federation/nextjs-mf	Patch
@module-federation/node	Patch
3008-runtime-remote	Patch
@module-federation/modernjs	Patch
node-dynamic-remote-new-version	Patch
node-dynamic-remote	Patch
@module-federation/runtime	Patch
@module-federation/sdk	Patch
@module-federation/managers	Patch
@module-federation/manifest	Patch
@module-federation/dts-plugin	Patch
@module-federation/third-party-dts-extractor	Patch
@module-federation/devtools	Patch
@module-federation/utilities	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for module-federation-docs ready!

Name	Link
🔨 Latest commit	ff6c8d2
🔍 Latest deploy log	https://app.netlify.com/sites/module-federation-docs/deploys/6647db261adc3400088fad0f
😎 Deploy Preview	https://deploy-preview-2440--module-federation-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ScriptedAlchemy]

Commented out, used to support import maps, but should be implemented via sdk/import-maps instead of a patch on function

[ScriptedAlchemy]

Removing patch since something else should be cone for async container / initialization.

[zackarychapple]

Can you share a bit more on the use case for this. I'm thinking its for cross bundler support but just making sure.

[ScriptedAlchemy]

Yeah. Using this for native federation currently (esbuild)

We need a way to create containers at runtime, not just be able to consume them.

[MadaraUchiha-314]

Yeah. Using this for native federation currently (esbuild)

We need a way to create containers at runtime, not just be able to consume them.

How are you reusing this for esbuild ? I see a lot of webpack internals in the implementation of createContainer

[ScriptedAlchemy]

Yeah. Using this for native federation currently (esbuild)
We need a way to create containers at runtime, not just be able to consume them.

How are you reusing this for esbuild ? I see a lot of webpack internals in the implementation of createContainer

Its just the remoteEntry.js file output. This way i keep all the initialization code that webpack would normally perform during startup.

Its just a webpack remoteEntry with chunk loading passed in as a object rather than at build time. it returns get,init and then user decides out to export it back.

Im not currently importing it the same way in esbuild branch since its not merged, but i copy over the template code currently and inject the string version of this into the top of file. once merged it would just be import createConteiner and apply it in this file.

https://github.com/module-federation/core/blob/67ac4e5c7823678ceb2fb14b79a19ca0a3cb74a8/packages/esbuild/src/adapters/lib/containerPlugin.ts