Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module federation #4334

Draft
wants to merge 30 commits into
base: master
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
17d28c1
WIP - first draft
GiladShoham May 18, 2021
8047bc2
first draft of federated button
GiladShoham May 20, 2021
267df71
do no use library var
GiladShoham May 20, 2021
0481059
change library to uniqeName
GiladShoham May 20, 2021
02091b0
more updates
GiladShoham May 20, 2021
f65eaf4
Merge branch 'master' into module-federation
GiladShoham May 24, 2021
eb8b917
Merge branch 'master' into module-federation
GiladShoham May 25, 2021
95ac060
first working version of component level bundling
GiladShoham May 25, 2021
7e2dd15
Merge branch 'master' of https://github.com/teambit/bit into module-f…
GiladShoham Jun 14, 2021
a5d50ca
WIP - bit start with MF
GiladShoham Jun 14, 2021
a855644
dev server is start working
GiladShoham Jun 14, 2021
a4e6ae6
Merge branch 'master' into module-federation
GiladShoham Jun 21, 2021
e3bf9a6
Merge branch 'master' into module-federation
GiladShoham Jun 23, 2021
6ea5f54
fixing merge issues
GiladShoham Jun 23, 2021
b295410
start making the overview/composition using the MF modules
GiladShoham Jun 23, 2021
02473ef
overview and composition tabs are working with MF
GiladShoham Jun 27, 2021
1dd581f
Merge branch 'master' of https://github.com/teambit/bit into module-f…
GiladShoham Jun 28, 2021
3df4db5
linting
GiladShoham Jun 29, 2021
15c500b
creating a task to bundle the link files/env itself
GiladShoham Jun 29, 2021
2e6bd67
Merge branch 'master' into module-federation
GiladShoham Jul 15, 2021
46eefa6
Merge branch 'master' into module-federation
GiladShoham Jul 18, 2021
d9ca320
compile fix
GiladShoham Jul 18, 2021
6de14e9
merge fixes
GiladShoham Jul 18, 2021
5dd119d
Merge branch 'master' into module-federation
GiladShoham Jul 19, 2021
02d0d14
Merge branch 'master' into module-federation
GiladShoham Jul 19, 2021
dddb183
Merge branch 'master' into module-federation
GiladShoham Jul 21, 2021
580d41b
split ui root file into 2 different files - core aspects and host asp…
GiladShoham Jul 21, 2021
9d6bd31
Merge branch 'master' into module-federation
GiladShoham Jul 26, 2021
e0dc3b6
import core root from file
GiladShoham Jul 26, 2021
c102480
moving create of preview server entries to the preview aspect
GiladShoham Jul 26, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Merge branch 'master' of https://github.com/teambit/bit into module-f…
…ederation

# Conflicts:
#	scopes/preview/preview/preview.main.runtime.tsx
#	scopes/preview/preview/preview.task.ts
#	scopes/react/react/mount.tsx
#	scopes/react/react/webpack/webpack.config.base.preview.ts
GiladShoham committed Jun 14, 2021
commit 7e2dd1596acb73bee9fb6753e34cd863daccca59
37 changes: 14 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -21,8 +21,7 @@ Open infrastructure for component-driven applications to speed and scale develop
<a href="https://github.com/teambit/bit/blob/master/CONTRIBUTING.md"><img alt="prs" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
<a href="https://circleci.com/gh/teambit/bit/tree/master"><img alt="Circle Status" src="https://circleci.com/gh/teambit/bit/tree/master.svg?style=shield&circle-token=d9fc5b19b90fb7e0655d941a5d7f21b61174c4e7">
<a href="https://github.com/prettier/prettier"><img alt ="Styled with Prettier" src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg">
<a href="https://join.slack.com/t/bit-dev-community/shared_invite/zt-o2tim18y-UzwOCFdTafmFKEqm2tXE4w" ><img alt="Join Slack" src="https://img.shields.io/badge/Slack-Join%20Bit%20Slack-blueviolet"/></a>

<a href="https://join.slack.com/t/bit-dev-community/shared_invite/zt-o2tim18y-UzwOCFdTafmFKEqm2tXE4w" ><img alt="Join Slack" src="https://img.shields.io/badge/Slack-Join%20Bit%20Slack-blueviolet"/></a>

## What is Bit?

@@ -34,32 +33,29 @@ Open infrastructure for component-driven applications to speed and scale develop
<p align="left">
Bit is an OSS Infrastructure for building and composing components. It is an extensible toolchain for component-driven applications / systems which are faster to develop, simpler to understand, test, and maintain, more resilient and performant, and easier to collaborate on.

Instead of building an application that has many components, Bit lets you develop components outside of any application and use them to compose many applications from the bottom up. An application is just a deployed composition of components. You can add and remove components from applications to extend or change their functionality. All components can be reused in many different applications.
Instead of building an application that has many components, Bit lets you develop components outside of any application and use them to compose many applications from the bottom up. An application is just a deployed composition of components. You can add and remove components from applications to extend or change their functionality. All components can be reused in many different applications.

</p>

### Key Features

<p align="left">

* **Workspace** is the foundation of Bit. It is where you develop and compose components. It lets you build fully distributed projects with a simple monolithic-like dev experience. Open the workspace UI to visually develop and manage your components with ease.

* **Scope** is where you push, version, and organize your components. It’s a component store.

* **Remote Hosting**: Remote Scopes let you use components across projects. You can setup and host remote Scopes on any servers. [Bit.dev](https://bit.dev) is an optional enterprise-grade platform for hosting and connecting all scopes and components to give teams a streamlined cross-project collaboration experience. It is highly secure and trusted by Fortune-50 teams.</p>
- **Workspace** is the foundation of Bit. It is where you develop and compose components. It lets you build fully distributed projects with a simple monolithic-like dev experience. Open the workspace UI to visually develop and manage your components with ease.

- **Scope** is where you push, version, and organize your components. It’s a component store.

- **Remote Hosting**: Remote Scopes let you use components across projects. You can setup and host remote Scopes on any servers. [Bit.dev](https://bit.dev) is an optional enterprise-grade platform for hosting and connecting all scopes and components to give teams a streamlined cross-project collaboration experience. It is highly secure and trusted by Fortune-50 teams.</p>

### How to Start?

<p align="center">
<a href="https://www.youtube.com/watch?v=7afMBwj5fR4">
<img alt="Bit Workspace" src="https://storage.googleapis.com/static.bit.dev/harmony-docs/build%20with%20bit%20youtube.png" />
</a>
</p>


</p>

To get started follow the [quick-start guide](https://harmony-docs.bit.dev/getting-started/installing-bit) or try the official [Bit for React tutorial](https://harmony-docs.bit.dev/tutorials/react/create-and-consume-components).
To get started follow the [quick-start guide](https://harmony-docs.bit.dev/getting-started/installing-bit) or try the official [Bit for React tutorial](https://harmony-docs.bit.dev/tutorials/react/create-and-consume-components).

Install [Bit Version Manager](https://harmony-docs.bit.dev/getting-started/installing-bit):

@@ -68,6 +64,7 @@ npm i -g @teambit/bvm
# or
yarn global add @teambit/bvm
```

Install Bit:

```bash
@@ -106,15 +103,14 @@ Start the dev server
bit start
```

Open-up your browser on localhost:3000, or any other available port, and display your workspace with your components.
Open-up your browser on localhost:3000, or any other available port, and display your workspace with your components.

### Popular Onboarding Use-Cases

* Micro Frontends
* Design Systems (Component Marketplace)
* Shared Logic and Backend Functionality
* Rapid Application Development

- Micro Frontends
- Design Systems (Component Marketplace)
- Shared Logic and Backend Functionality
- Rapid Application Development

### Resources & Community

@@ -126,7 +122,6 @@ Open-up your browser on localhost:3000, or any other available port, and display
- [Articles](https://harmony-docs.bit.dev/resources/articles)
- [Community](https://harmony-docs.bit.dev/resources/community)


## Contributing 🎗️

Contributions are always welcome, no matter how large or small. Before contributing, please read the [code of conduct](CODE_OF_CONDUCT.md).
@@ -137,7 +132,3 @@ See [Contributing](CONTRIBUTING.md).

Apache License, Version 2.0
![Analytics](https://ga-beacon.appspot.com/UA-96032224-1/bit/readme)




2 changes: 0 additions & 2 deletions scopes/harmony/cache/cache.spec.ts
Original file line number Diff line number Diff line change
@@ -3,8 +3,6 @@ import { rmdirSync } from 'fs';
import { expect } from 'chai';
import { Logger } from '@teambit/logger';
import { CacheMain } from './cache.main.runtime';



describe('Cache Aspect', () => {
const cacheDirectory = `/tmp/bit/${v4()}`;
2 changes: 1 addition & 1 deletion scopes/harmony/cli/cli.main.runtime.ts
Original file line number Diff line number Diff line change
@@ -131,7 +131,7 @@ export class CLIMain {
const legacyCommandsAdapters = legacyCommands.map((command) => new LegacyCommandAdapter(command, cliMain));
const cliCmd = new CliCmd(cliMain);
cliMain.register(...legacyCommandsAdapters, new CompletionCmd(), cliCmd);

return cliMain;
}
}
9 changes: 3 additions & 6 deletions scopes/preview/preview/preview.main.runtime.tsx
Original file line number Diff line number Diff line change
@@ -146,12 +146,9 @@ export class PreviewMain {
const ui = this.ui.getUi();
if (!ui) throw new Error('ui not found');
const [name, uiRoot] = ui;
const filePath = await this.ui.generateRoot(
await uiRoot.resolveAspects(PreviewRuntime.name),
name,
'preview',
PreviewAspect.id
);
const resolvedAspects = await uiRoot.resolveAspects(PreviewRuntime.name);
const filteredAspects = this.filterAspectsByExecutionContext(resolvedAspects, context);
const filePath = await this.ui.generateRoot(filteredAspects, name, 'preview', PreviewAspect.id);
console.log('filePath', filePath);
return filePath;
}
39 changes: 4 additions & 35 deletions scopes/react/react/bootstrap.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,17 @@
import React, { ComponentType, ReactNode } from 'react';
import React from 'react';
import ReactDOM from 'react-dom';
import { RenderingContext } from '@teambit/preview';
import { StandaloneNotFoundPage } from '@teambit/design.ui.pages.standalone-not-found-page';
import { ReactAspect } from './react.aspect';

function wrap(Component: ComponentType, WrapperComponent?: ComponentType): ComponentType {
function Wrapper({ children }: { children?: ReactNode }) {
if (!WrapperComponent) return <Component>{children}</Component>;

return (
<WrapperComponent>
<Component>{children}</Component>
</WrapperComponent>
);
}

return Wrapper;
}

/**
* HOC to wrap and mount all registered providers into the DOM.
*/
export function withProviders(providers: ComponentType[] = []) {
return providers.reduce<ComponentType>(
(MainProvider, Provider) => {
if (!MainProvider) return wrap(Provider);
return wrap(Provider, MainProvider);
},
({ children }) => <div>{children}</div>
);
}
import { CompositionsApp } from './compositions-app';

/**
* this mounts compositions into the DOM in the component preview.
* this function can be overridden through ReactAspect.overrideCompositionsMounter() API
* to apply custom logic for component DOM mounting.
*/
export default (Composition: React.ComponentType = StandaloneNotFoundPage, previewContext: RenderingContext) => {
const reactContext = previewContext.get(ReactAspect.id);
const Provider = withProviders(reactContext?.providers);
export default (Composition: React.ComponentType, previewContext: RenderingContext) => {
ReactDOM.render(
<Provider>
<Composition />
</Provider>,
<CompositionsApp Composition={Composition} previewContext={previewContext} />,
document.getElementById('root')
);
};
6 changes: 2 additions & 4 deletions scopes/react/react/webpack/webpack.config.base.preview.ts
Original file line number Diff line number Diff line change
@@ -174,8 +174,6 @@ export default function (): Configuration {
'@teambit/mdx.ui.mdx-scope-context': require.resolve('@teambit/mdx.ui.mdx-scope-context'),
'react-dom/server': require.resolve('react-dom/server'),
'react-dom': require.resolve('react-dom'),
// TODO: move to react-native only
'react-native': 'react-native-web',
'@mdx-js/react': require.resolve('@mdx-js/react'),

// Allows for better profiling with ReactDevTools
@@ -414,12 +412,12 @@ export default function (): Configuration {
react: {
eager: true,
singleton: true,
requiredVersion: '^16.14.0',
requiredVersion: '^17.0.0',
},
'react-dom': {
eager: true,
singleton: true,
requiredVersion: '^16.14.0',
requiredVersion: '^17.0.0',
},
},
}),
4 changes: 2 additions & 2 deletions scopes/react/react/webpack/webpack.config.preview.dev.ts
Original file line number Diff line number Diff line change
@@ -286,13 +286,13 @@ export default function ({ envId, fileMapPath, workDir }: Options): WebpackConfi
// TODO: make sure we can remove the eager here by adding bootstrap for everything
eager: true,
singleton: true,
requiredVersion: '^16.14.0',
requiredVersion: '^17.0.0',
},
'react-dom': {
// TODO: make sure we can remove the eager here by adding bootstrap for everything
eager: true,
singleton: true,
requiredVersion: '^16.14.0',
requiredVersion: '^17.0.0',
},
},
remotes: {
8 changes: 4 additions & 4 deletions scopes/toolbox/network/get-port/locked.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export class Locked extends Error {
constructor(port: number) {
super(`${port} is locked`);
}
}
constructor(port: number) {
super(`${port} is locked`);
}
}
You are viewing a condensed version of this merge commit. You can view the full changes here.