+ Something went terribly wrong and this error boundary
+ saved the entire World from a crash
+
+ )
+ }
+});
+
+// there 3 lifecycle functions are required
+export const bootstrap = lifecycles.bootstrap;
+export const mount = lifecycles.mount;
+export const unmount = lifecycles.unmount;
+```
+For additional singleSpaReact options please visit [single-spa-react options](https://single-spa.js.org/docs/ecosystem-react#options) page.
+
+
+then in the config object - which is returned from the registration function the `loadingFn` property should import the file:
+```ts title="index.ts"
+
+export function register() {
+ return {
+ // the configuration object
+ // ... other config options
+ loadingFn: () => import ('./myRootReactComponent')
+ }
+}
+
+```
+
+This allows the sigle-spa library to only load the source code of the extension when first requested and avoid downloading all
+the source-code of extensions upfront (code-splitting) while keeping the entry file (the file that exports the registration function) as small as possible.
+
+:::info
+This pattern is used for almost all of the dynamic entities such as apps, widgets, content-blocks and extension-points
+:::
+
+
+### Routing
+
+Besides the routing provided by the single-spa, extensions can also have an 'internal' routing using the library of choice. For example, the extensions that are developed by AKASHA are using [TanStack Router](https://tanstack.com/router/latest);
+
+For example, when navigating to https://localhost:8131/@akashaorg/app-antenna/antenna the following apps and widgets will be loaded:
+
+```
+URL: 'https://localhost:8131/[ApplicationName]/[Subroute]'
+ApplicationName: '@akashaorg/app-antenna' -> routing handled by single-spa
+ Subroute: 'antenna' -> this will be handled by the internal router
+
+Widgets:
+ - '@akashaorg/ui-widget-layout' // the layout
+ - '@akashaorg/ui-widget-sidebar' // the sidebar
+ - '@akashaorg/ui-widget-topbar' // the topbar
+ - ... other widgets that matches the route
+```
+
+:::info
+It is highly recommended to only have an internal router for apps. Widgets are considered to be always mounted and not to change their content based on the route.
+:::
+
+### The Installing and Uninstalling part
+The extensions can be discovered, installed and uninstalled in the [Extensions App](https://github.com/AKASHAorg/akasha-core/tree/next/extensions/apps/extensions).
+
+The installation process for extensions begins with the app release model, which includes a sources field specifying the locations (URLs or file paths) from where the extension scripts should be loaded.
+
+The AppLoader will import the sources and then proceed to the registration part.
+
+The release info will be also saved client-side using the IndexedDB api.
+
+In the uninstallation process, the app-loader unloads the application and the entry of the release info is removed from IndexedDB.
diff --git a/docs/integrations/layout-widget.md b/docs/extensions/layout_widget.md
similarity index 95%
rename from docs/integrations/layout-widget.md
rename to docs/extensions/layout_widget.md
index a1dcee8..39c8b7a 100644
--- a/docs/integrations/layout-widget.md
+++ b/docs/extensions/layout_widget.md
@@ -61,7 +61,7 @@ The area that defines the placement of the sidebar.
- sticky top
- loaded on every page
-- can be toggled via a [uiEvents](./ui-event-bus.md) bus
+- can be toggled using [HideSidebar/ShowSidebar](/docs/event-bus/ui-events/readme.md#eventtypes) events fired using [uiEvents](../event-bus/ui-events/) bus
- toggled off by default, on mobile
**Example**
diff --git a/docs/integrations/loading-function.md b/docs/extensions/loading_function.md
similarity index 85%
rename from docs/integrations/loading-function.md
rename to docs/extensions/loading_function.md
index bd6a65c..3253ef2 100644
--- a/docs/integrations/loading-function.md
+++ b/docs/extensions/loading_function.md
@@ -5,6 +5,8 @@ sidebar_label: Loading Function
# Loading Function
+Please also read the overview of the [bootstrapping mounting and unmounting](./index.md#the-bootstrapping-mounting-and-unmounting-part) lifecycles.
+
The `loadingFn` is the primary function for mounting the view. It is required to be defined for each of the AKASHA Core's micro-frontend type:
- application
@@ -25,4 +27,4 @@ The `update` lifecycle method is not currently used in this project.
The loading function should return a Promise which when resolved, returns these lifecycle hooks.
For React, and other popular ui libraries, single-spa provides adapter libraries to automatically call the rendering functions of these ui libs. For React, it's called `single-spa-react`. If you are interested to dive deeper, you can check their [docs](https://single-spa.js.org/docs/getting-started-overview)
-::::
\ No newline at end of file
+::::
diff --git a/docs/integrations/plugins.md b/docs/extensions/plugins.md
similarity index 57%
rename from docs/integrations/plugins.md
rename to docs/extensions/plugins.md
index ce53d3e..22b38ac 100644
--- a/docs/integrations/plugins.md
+++ b/docs/extensions/plugins.md
@@ -5,7 +5,7 @@ sidebar_label: Plugins
# Plugins
-Integration with other apps can also happen at the data layer. Until now, we've presented a few ways in which apps can display different functionalities belonging to other apps (through [extension points](./extensions) and [content-blocks](./content-blocks)) but in some cases we are only interested in data. This is where we use plugins.
+Integration with other apps can also happen at the data layer. Until now, we've presented a few ways in which apps can display different functionalities belonging to other apps (through [extension points](./extension_points.md) and [content-blocks](./content_blocks.md)) but in some cases we are only interested in data. This is where we use plugins.
::::info
Plugins do not `render` anything in the view but can be used to store, retrieve and manipulate data.
@@ -15,31 +15,33 @@ For example, let's say we are building an app, and we require a property from a
It is **NOT** mandatory for the applications to also provide a plugin. However, the plugin system is a quite powerful way to integrate with other apps at the data layer.
-## Creating plugins
+## Registration
+Unlike the apps and widget plugins are registered using the `getPlugin` function. getPlugin should be a named export from the entry file. This is an `async` method that should return an object. There is no standard in the shape on this object however keep in mind that changing it should be done preserving backward compatibility.
-Creating a plugin requires another named export from the root index file called `getPlugin`. This is an `async` method that should return an object. There is no standard in the shape on this object however keep in mind that changing it should be done preserving backward compatibility.
+Example of a plugin registration function:
-Example of a plugin:
+```ts title="index.ts"
-```ts
-// this plugin saves data to localstorage.
export const getPlugin = async () => {
return {
- saveToLocalStorage: (key: string, data: string) => localStorage.setItem(key, data),
- getFromLocalStorage: (key) => localStorage.getItem(key),
+ // my plugin properties
};
};
```
+Plugins are registered first, before
+
## Accessing and using plugins
-To access a plugin in the register function you should use the function's param. Example:
+Plugins are passed to the register function and as well as to the root extension's component via props.
+
+Example of usage of a plugin in the register function:
```ts
export const register = (opts) => {
- const plugin = opts.plugins[appNameHere];
+ const plugin = opts.plugins[someAppName];
- plugin.saveToLocalStorage('someKey', someData);
+ plugin.someFunction();
return {
// ...
@@ -47,15 +49,14 @@ export const register = (opts) => {
};
```
-In the same way you can access the plugins from your root React component through props.
-Example:
+Example of using plugins in the React root component:
```tsx
const MyRootComponent = (props: RootComponentProps) => {
const examplePlugin = props.plugins[appNameHere];
- examplePlugin.saveToLocalStorage('someKey', someData);
+ examplePlugin.someFunction();
- return <>Hello World!>;
+ return {data.node?.akashaBeamStreamList.edges.map(edge => (
+
beam id: {edge.node?.beamID}
+ ))}
+}
+
+```
+
+The hooks library also contains some custom hooks to allow an easier development like:
+
+> `Work in progress`
diff --git a/docs/sdk/_category_.json b/docs/sdk/_category_.json
index 4b1b18b..9873082 100644
--- a/docs/sdk/_category_.json
+++ b/docs/sdk/_category_.json
@@ -1,4 +1,4 @@
{
"label": "SDK",
- "position": 4
+ "position": 60
}
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
new file mode 100644
index 0000000..4a4f7eb
--- /dev/null
+++ b/docs/troubleshooting.md
@@ -0,0 +1,23 @@
+# Errors and Toubleshooting
+
+### Error when running yarn install or yarn build:all for the first time
+
+```bash
+> YN0002:
+root-workspace-0b6124@workspace:. doesn\'t provide @testing-library/dom (pa2b9f), requested by @testing-library/user-event.
+> YN0086: Some peer dependencies are incorrectly met; run yarn explain peer-requirements
+>