Add module federation (#10)

* Add module federation

* Finalize module federation build

* Update build pipelines

Author: vin0401

.github/workflows/studio-frontend-build.yaml

@@ -94,8 +94,41 @@ jobs:
         with:
             commit_message: Apply eslint-fixer changes
 
+  check-types:
+    needs: install
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Cache npm dependencies
+        uses: actions/cache@v4
+        with:
+          path: ./assets/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Run type checking
+        working-directory: ./assets
+        run: npm run check-types
+
   build:
-    needs: lint
+    needs: 
+      - lint
+      - check-types
     runs-on: ubuntu-latest
 
     permissions:

assets/js/src/examples/custom-widgets/components/example-widget.tsx

@@ -76,27 +76,31 @@ export const ExampleWidget = (): React.JSX.Element => {
       >
         <Button
           disabled={ areButtonsDisabled }
+          /* @ts-expect-error - type WidgetManagerTabConfig missing */
           onClick={ () => { widgetManager.openMainWidget(selectedWidget) } }
         >
           Open main widget
         </Button>
 
         <Button
           disabled={ areButtonsDisabled }
+          /* @ts-expect-error - type WidgetManagerTabConfig missing */
           onClick={ () => { widgetManager.openLeftWidget(selectedWidget) } }
         >
           Open left widget
         </Button>
 
         <Button
           disabled={ areButtonsDisabled }
+          /* @ts-expect-error - type WidgetManagerTabConfig missing */
           onClick={ () => { widgetManager.openRightWidget(selectedWidget) } }
         >
           Open right widget
         </Button>
 
         <Button
           disabled={ areButtonsDisabled }
+          /* @ts-expect-error - type WidgetManagerTabConfig missing */
           onClick={ () => { widgetManager.openBottomWidget(selectedWidget) } }
         >
           Open bottom widget

assets/js/src/examples/main-nav-entry/modules/main-nav-entry-extension.ts

@@ -1,4 +1,4 @@
-import { type AbstractModule, container } from '@pimcore/studio-ui-bundle'
+import { container, type AbstractModule } from '@pimcore/studio-ui-bundle'
 import { serviceIds } from '@pimcore/studio-ui-bundle/app'
 import { type MainNavRegistry } from '@pimcore/studio-ui-bundle/modules/app'
 import { type WidgetRegistry } from '@pimcore/studio-ui-bundle/modules/widget-manager'

assets/js/src/main.ts

@@ -1,26 +1,21 @@
-import { Pimcore } from '@pimcore/studio-ui-bundle'
 import { MainNavEntryPlugin } from './examples/main-nav-entry'
-import { LeftSidebarPlugin } from './examples/left-sidebar'
+// import { LeftSidebarPlugin } from './examples/left-sidebar'
 import { AssetEditorToolbarButtonPlugin } from './examples/asset-editor-toolbar-button'
 import { TabManagerPlugin } from './examples/tab-manager'
 import { CustomIconPlugin } from './examples/custom-icons'
 import { CustomWidgetsPlugin } from './examples/custom-widgets'
 import { DynamicTypePlugin } from './examples/dynamic-types'
 import { ApiDataPlugin } from './examples/api-data'
 
-if (module.hot !== undefined) {
-  module.hot.accept()
-}
-
-const pluginSystem = Pimcore.pluginSystem
-
 // Examples are splitted into separate plugins to create a clear separation for better understanding.
 // You can also combine them into one plugin if you want to.
-pluginSystem.registerPlugin(MainNavEntryPlugin)
-pluginSystem.registerPlugin(LeftSidebarPlugin)
-pluginSystem.registerPlugin(AssetEditorToolbarButtonPlugin)
-pluginSystem.registerPlugin(TabManagerPlugin)
-pluginSystem.registerPlugin(CustomIconPlugin)
-pluginSystem.registerPlugin(CustomWidgetsPlugin)
-pluginSystem.registerPlugin(DynamicTypePlugin)
-pluginSystem.registerPlugin(ApiDataPlugin)
+export {
+  MainNavEntryPlugin,
+  // LeftSidebarPlugin,
+  AssetEditorToolbarButtonPlugin,
+  TabManagerPlugin,
+  CustomIconPlugin,
+  CustomWidgetsPlugin,
+  DynamicTypePlugin,
+  ApiDataPlugin
+}