GitBook: [#65] ComponentLoader

Author: Riley Bąkowska

SUMMARY.md

@@ -32,14 +32,13 @@
   * [Password](basics/features/password.md)
   * [Writing your own features](basics/features/writing-your-own-features.md)
 
-## UI Customizations
+## UI Customization
 
-* [Overwriting CSS styles](ui-customizations/overwriting-css-styles.md)
-* [Customizing dashboard](ui-customizations/customize-dashboard.md)
+* [Writing your own Components](ui-customization/writing-your-own-components.md)
+* [Overwriting CSS styles](ui-customization/overwriting-css-styles.md)
 
 ## Tutorials
 
-* [Writing your own Components](tutorials/writing-your-own-components.md)
 * [Using AdminJS features](tutorials/using-adminjs-features.md)
 * [Adding Role-Based Access Control](tutorials/adding-role-based-access-control.md)
 * [Internationalization (i18n)](tutorials/internationalization-i18n.md)

basics/action.md

@@ -81,7 +81,7 @@ The `handler` must return `records` in case of `bulk` or `resource` actions or `
 
 The last important option is `component`. This can either be `false` which means that the backend `handler` will be triggered once you press the button or you can provide your custom component that will be rendered.
 
-An example with `component` usage:
+#### Action with custom component
 
 {% code title="my-custom-action.tsx" %}
 ```jsx
@@ -123,7 +123,7 @@ const UserResource = {
     actions: {
       myCustomAction: {
         actionType: 'record',
-        component: AdminJS.bundle('./my-custom-action'),
+        component: Components.MyCustomAction, // see "Writing your own Components"
         handler: (request, response, context) => {
           const { record, currentAdmin } = context
           return {
@@ -333,7 +333,7 @@ const UserResource = {
     actions: {
       myCustomAction: {
         actionType: 'record',
-        component: AdminJS.bundle('./my-custom-action'),
+        component: Components.MyCustomAction, // see "Writing your own Components"
         handler: (request, response, context) => {
           const { record, currentAdmin } = context
           return {

basics/property.md

@@ -33,27 +33,20 @@ const RandomPicture: React.FC<ShowPropertyProps> = (props) => {
 export default RandomPicture
 ```
 
-```typescript
-import AdminJS from 'adminjs'
-// other imports
-
-const RANDOM_PICTURE = AdminJS.bundle('./random-picture')
-
-const UserResource = {
-  resource: User,
+<pre class="language-typescript"><code class="lang-typescript"><strong>const UserResource = {
+</strong>  resource: User,
   options: {
     properties: {
       randomPicture: {
         type: 'string',
         components: {
-          list: RANDOM_PICTURE,
-          show: RANDOM_PICTURE,
+          list: Components.MyCustomAction, // see "Writing your own Components"
+          show: Components.MyCustomAction,
         },
       },
     },
   },
-}
-```
+}</code></pre>
 
 Every property can be further customized. That will be covered in the later parts of this section.
 

installation/getting-started.md

@@ -45,3 +45,21 @@ After you have installed AdminJS dependencies, proceed to:
 
 * [Plugins](plugins/) section for instructions on how to setup AdminJS with your framework.
 * [Adapters](adapters/) section for instructions on how to connect your AdminJS instance to your database.
+
+### Frontend bundling
+
+AdminJS needs to generate its own frontend. In the production environment, you would bundle all frontend files during build step of your deployment process, but that would be quite annoying to do in development.
+
+For this reason you should add `adminJS.watch()` function call after setting up all plugins and adapters. This only affects development environment (`process.env.NODE_ENV === 'development'`) and launches a separate bundling process in the background.
+
+```typescript
+import AdminJS from 'adminjs'
+
+const adminJS = new AdminJS({
+    // ...
+})
+
+adminJS.watch()
+```
+
+Without this step in development, AdminJS will start but won't display anything useful in the browser (except for some parsing errors in the console).

tutorials/using-adminjs-features.md

@@ -96,6 +96,20 @@ const feature = buildFeature({
 })
 ```
 
+If you need to access AdminJS instance (for example to add or override components, see [writing-your-own-components.md](../ui-customization/writing-your-own-components.md "mention")), you can do so like this:
+
+```typescript
+const { buildFeature } = require('adminjs')
+
+const feature = buildFeature(admin => {
+    const MyComponent = admin.loader.add('MyComponent', './my-component')
+    
+    return {
+      // you can now use `MyComponent` here
+    }
+})
+```
+
 ### Available features
 
 #### Supported by AdminJS team