chore: more feedback

More feedback

Signed-off-by: Yaapa Hage <[email protected]>

docs/site/Component.md

@@ -136,6 +136,12 @@ These components add additional capabilities to LoopBack.
 - [@loopback/typeorm](https://github.com/strongloop/loopback-next/tree/master/extensions/typeorm) -
   Adds support for TypeORM in LoopBack
 
+### Community extensions
+
+For a list of components created by community members, refer to
+[Community extensions](https://loopback.io/doc/en/lb4/Community-extensions.html)
+.
+
 ## Creating components
 
 Please refer to [Creating components](Creating-components.md) for more

packages/cli/generators/extension/templates/src/component.ts.ejs

@@ -6,7 +6,6 @@ import {
   config,
   ContextTags,
   CoreBindings,
-  createBindingFromClass,
   inject,
 } from '@loopback/core';
 import {<%= project.bindingsNamespace %>} from './keys'

packages/cli/generators/project/templates/README.md.ejs

@@ -16,10 +16,17 @@ Configure and load <%= project.componentName %> in the application constructor
 as shown below.
 
 ```ts
-...
-this.configure(<%= project.componentName %>.COMPONENT).to({
-  // Put the configuration options here
-});
-this.component(<%= project.componentName %>);
-...
+import {<%= project.componentName %>, <%= project.optionsInterface %>, <%= project.defaultOptions %>} from '<%= project.name %>';
+// ...
+export class MyApplication extends BootMixin(ServiceMixin(RepositoryMixin(RestApplication))) {
+  constructor(options: ApplicationConfig = {}) {
+    const opts: <%= project.optionsInterface %> = <%= project.defaultOptions %>;
+    this.configure(<%= project.bindingsNamespace %>.COMPONENT).to(opts);
+      // Put the configuration options here
+    });
+    this.component(<%= project.componentName %>);
+    // ...
+  }
+  // ...
+}
 ```