Add initial plugin system (#239)

* Introduce di container and services

* Prepare mechanism to include CSS/JS files from bundles

* Apply php-cs-fixer changes

* Fix wrong exception

* Make it compatible with PHP 8.1

* Apply php-cs-fixer changes

* Drop usage of webpack encore and make used entrypoint configurable for each bundle

* Apply php-cs-fixer changes

* Cleanup code a bit

* Simplify naming as the mechanism is now unified and also used for the studio UI bundle itself

* Apply php-cs-fixer changes

* Prototype type and api sharing

* Add initial plugin lifecycle

* Add folder tab manager to service container

* Add vendor build

* Refactor entrypoints json handling

* Add initial module system

* Add latest build

* Add initial sdk example

* Add peer dependencies for bundles

* Add service for management of icons

* Add dll for studio core to reduce plugin size

* Apply php-cs-fixer changes

* Remove unused defintion file

* Update paths for test directory

* Do not track package files

* Ignore dist files

* Track build related files

* Update frontend build

* Migrate storybook to latest app state

* Do not reference core-dll during development

---------

Co-authored-by: markus-moser <markus.moser@pimcore.com>
Co-authored-by: markus-moser <markus-moser@users.noreply.github.com>
Co-authored-by: vin0401 <vin0401@users.noreply.github.com>

.gitignore

@@ -29,7 +29,9 @@ Thumbs.db
 /var
 /vendor
 
+# Frontend related files
 assets/node_modules
+assets/dist/build
 
 # code style fixer
 .php_cs

assets/.storybook/main.ts

@@ -11,11 +11,15 @@
  *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
  */
 
+import type { Options } from '@swc/core';
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import path from "path";
 
 const config: StorybookConfig = {
   stories: ["../js/**/*.mdx", "../js/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  typescript: {
+
+  },
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -38,7 +42,7 @@ const config: StorybookConfig = {
   webpackFinal: async (config) => {
     config.resolve!.alias = {
       ...config.resolve!.alias,
-      "@Pimcore": path.resolve(__dirname, "../js/src"),
+      "@Pimcore": path.resolve(__dirname, "../js/src/core"),
     };
 
     // disable whatever is already set to load SVGs
@@ -65,6 +69,22 @@ const config: StorybookConfig = {
     });
 
     return config;
+  },
+
+  // Enable typescript decorators for storybook
+  swc: (config: Options): Options => {
+    return {
+      ...config,
+      jsc: {
+        ...config.jsc,
+        parser: {
+          syntax: "typescript",
+          tsx: true,
+          dynamicImport: true,
+          decorators: true,
+        },
+      },
+    };
   }
 };
 

assets/.storybook/preview.tsx

@@ -11,12 +11,23 @@
  *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
  */
 
-import React from "react";
-import '../js/src/bootstrap';
+import React, { useEffect, useState } from "react";
+import '../js/src/core/bootstrap';
 import type { Preview } from "@storybook/react";
 import "../css/globals.css";
-import { GlobalProvider } from "../js/src/modules/app/global-provider";
+import { GlobalProvider } from "../js/src/core/modules/app/global-provider";
 import { App } from 'antd'
+import { Pimcore } from '../js/src/core/app/public-api'
+import { moduleSystem } from "../js/src/core/app/module-system/module-system";
+
+declare global {
+  interface Window {
+    Pimcore: typeof Pimcore
+  }
+}
+
+window.Pimcore = Pimcore;
+moduleSystem.initModules();
 
 const preview: Preview = {
   parameters: {
@@ -29,13 +40,15 @@ const preview: Preview = {
   },
 
   decorators: [
-    (Story) => (
-      <GlobalProvider>
-        <App>
-          <Story />
-        </App>
-      </GlobalProvider>
-    ),
+    (Story) => {
+      return (
+        <GlobalProvider>
+          <App>
+            <Story />
+          </App>
+        </GlobalProvider>
+      )
+    }
   ],
 };
 

assets/js/build/openapi-config.ts → assets/build/api/openapi-config.ts

@@ -14,14 +14,14 @@
 import { type ConfigFile } from '@rtk-query/codegen-openapi'
 
 const config: ConfigFile = {
-  schemaFile: '../assets/api/docs.jsonopenapi.json',
-  apiFile: '../src/app/api/pimcore/index.ts',
+  schemaFile: './docs.jsonopenapi.json',
+  apiFile: '../js/src/app/api/pimcore/index.ts',
   apiImport: 'api',
   outputFiles: {
-    '../src/modules/asset/asset-api-slice.gen.ts': {
+    '../js/modules/asset/asset-api-slice.gen.ts': {
       filterEndpoints: [/asset/i]
     },
-    '../src/modules/app/translations/translations-api-slice.gen.ts': {
+    '../js/modules/app/translations/translations-api-slice.gen.ts': {
       filterEndpoints: [/translation/i]
     }
   },

assets/dist/sdk/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/dist/main.js"
+      ]
+    }
+  }
+}