🔀 Merge pull request #1216 from altearius/FEATURE/documentation

📝 How to register a widget.

docs/development-guides.md

@@ -426,34 +426,16 @@ For examples of finished widget components, see the [Widgets](https://github.com
 
 ### Step 3 - Register
 
-Next, import and register your new widget, in [`WidgetBase.vue`](https://github.com/Lissy93/dashy/blob/master/src/components/Widgets/WidgetBase.vue). In this file, you'll need to add the following:
+Next, register your new widget in [`WidgetBase.vue`](https://github.com/Lissy93/dashy/blob/master/src/components/Widgets/WidgetBase.vue). In this file, you'll need to add the following:
-
-Import your widget file
 
 ```javascript
-import ExampleWidget from '@/components/Widgets/ExampleWidget.vue';
+const COMPAT = {
-```
-
-Then register the component
-
-```javascript
-components: {
   ...
-  ExampleWidget,
+  'example-widget': 'ExampleWidget',
-},
+};
 ```
 
-Finally, add the markup to render it. The only attribute you need to change here is, setting `widgetType === 'example'` to your widget's name.
+Here, the `example-widget` property name will be used to identify the widget when parsing the `type` property in a configuration file. The `ExampleWidget` string is used to dynamically import the widget, and therefore must match the widget's filename as it exists in the `components/widgets` folder.
-
-```vue
-<ExampleWidget
-  v-else-if="widgetType === 'example'"
-  :options="widgetOptions"
-  @loading="setLoaderState"
-  @error="handleError"
-  :ref="widgetRef"
-/>
-```
 
 ### Step 4 - Docs