core icon indicating copy to clipboard operation
core copied to clipboard

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

Open ScriptedAlchemy opened this issue 9 months ago • 3 comments

Description

Implementation of container factory for at runtime container creation

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

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)=> (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.

ScriptedAlchemy avatar May 04 '24 06:05 ScriptedAlchemy

🦋 Changeset detected

Latest commit: ff6c8d280e234bd6b83f785562a7be09cdc9633f

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

changeset-bot[bot] avatar May 04 '24 06:05 changeset-bot[bot]

Deploy Preview for module-federation-docs ready!

Name Link
Latest commit ff6c8d280e234bd6b83f785562a7be09cdc9633f
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...

QR Code

Use your smartphone camera to open QR code link.

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

netlify[bot] avatar May 04 '24 06:05 netlify[bot]

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

zackarychapple avatar May 04 '24 13:05 zackarychapple

Yeah. Using this for native federation currently (esbuild)

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

ScriptedAlchemy avatar May 06 '24 01:05 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

MadaraUchiha-314 avatar May 16 '24 01:05 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

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

ScriptedAlchemy avatar May 17 '24 22:05 ScriptedAlchemy