Add smaller adjustments to plugin dev. (creation & structure)

Author: pwizla

docusaurus/docs/dev-docs/plugins/development/create-a-plugin.md

@@ -185,5 +185,5 @@ export default (config, webpack) => {
 ```
 
 :::caution
-Because the server looks at the `server/src/index.js` file to import your plugin code, you must use the `watch` command otherwise the code will not be transpiled and the server will not be able to find your plugin.
+Because the server looks at the `server/src/index.ts|js` file to import your plugin code, you must use the `watch` command otherwise the code will not be transpiled and the server will not be able to find your plugin.
 :::

docusaurus/docs/dev-docs/plugins/development/plugin-structure.md

@@ -16,23 +16,23 @@ import InteractivePluginStructure from '@site/src/components/PluginStructure.js'
 
 # Plugin structure
 
-When [creating a plugin with Plugin SDK](/dev-docs/plugins/development/create-a-plugin), Strapi generates the following boilerplate structure for you in the `./src/plugins/my-plugin` folder:
+When [creating a plugin with Plugin SDK](/dev-docs/plugins/development/create-a-plugin), Strapi generates the following boilerplate structure for you in the `/src/plugins/my-plugin` folder:
 
 <InteractivePluginStructure />
 
 A Strapi plugin is divided into 2 parts, each living in a different folder and offering a different API:
 
 | Plugin part | Description | Folder       | API |
 |-------------|-------------|--------------|-----|
-| Admin panel | Includes what will be visible in the [admin panel](/user-docs/intro) (components, navigation, settings, etc.) | `/admin` |[Admin Panel API](/dev-docs/plugins/admin-panel-api)|
-| Backend server | Includes what relates to the [backend server](/dev-docs/backend-customization) (content-types, controllers, middlewares, etc.) |`/server` |[Server API](/dev-docs/plugins/server-api)|
+| Admin panel | Includes what will be visible in the [admin panel](/user-docs/intro) (components, navigation, settings, etc.) | `admin/` |[Admin Panel API](/dev-docs/plugins/admin-panel-api)|
+| Backend server | Includes what relates to the [backend server](/dev-docs/backend-customization) (content-types, controllers, middlewares, etc.) |`server/` |[Server API](/dev-docs/plugins/server-api)|
 
 <br />
 
 :::note Notes about the usefulness of the different parts for your specific use case
 - **Server-only plugin**: You can create a plugin that will just use the server part to enhance the API of your application. For instance, this plugin could have its own visible or invisible content-types, controller actions, and routes that are useful for a specific use case. In such a scenario, you don't need your plugin to have an interface in the admin panel.
 
-- **Admin panel plugin vs. application-specific customization**: You can create a plugin to inject some components into the admin panel. However, you can also achieve this by creating a `./src/admin/index.js` file and invoking the `bootstrap` lifecycle function to inject your components. In this case, deciding whether to create a plugin depends on whether you plan to reuse and distribute the code or if it's only useful for a unique Strapi application.
+- **Admin panel plugin vs. application-specific customization**: You can create a plugin to inject some components into the admin panel. However, you can also achieve this by creating a `/src/admin/index.js` file and invoking the `bootstrap` lifecycle function to inject your components. In this case, deciding whether to create a plugin depends on whether you plan to reuse and distribute the code or if it's only useful for a unique Strapi application.
 :::
 
 <br/>

docusaurus/src/components/PluginStructure.js

@@ -6,6 +6,69 @@ export default function InteractivePluginStructure() {
   return (
     <div className="project-structure">
       <Tabs>
+        <TabItem title="TypeScript-based projects" value="TypeScript-based plugins">
+
+        The following diagram is interactive: you can click on any file or folder name highlighted in purple to go to the corresponding documentation section.<br /><br />
+
+        <pre className="prism-code">
+          <code>
+          . <span className="token comment"># root of the plugin folder (e.g., /src/plugins/my-plugin)</span><br/>
+          ├── <a href="/dev-docs/plugins/admin-panel-api">admin</a> <span className="token comment"># Admin panel part of your plugin.</span><br/>
+          │   ├── src<br />
+          │   │   ├── components <span className="token comment"># Contains your front-end components</span><br/>
+          │   │   │   ├── Initializer.tsx <span className="token comment"># Plugin initializer</span><br/>
+          │   │   │   └── PluginIcon.tsx <span className="token comment"># Contains the icon of your plugin in the main navigation</span><br/>
+          │   │   ├── pages <span className="token comment"># Contains the pages of your plugin</span><br/>
+          │   │   │   ├── App.tsx <span className="token comment"># Skeleton around the actual pages</span><br/>
+          │   │   │   └── HomePage.tsx <span className="token comment"># Homepage of your plugin</span><br/>
+          │   │   ├── translations <span className="token comment"># Translations files to make your plugin i18n-friendly</span><br/>
+          │   │   │   ├── en.json<br/>
+          │   │   ├── utils<br/>
+          │   │   │   └── getTranslations.ts <span className="token comment"># getTranslations function to return the corresponding plugin translations</span><br/>
+          │   │   ├── index.ts <span className="token comment"># Main setup of your plugin, used to register elements in the admin panel</span><br/>
+          │   │   └── pluginId.ts <span className="token comment"># pluginId variable computed from package.tsxon name</span><br/>
+          │   ├── custom.d.ts <span className="token comment"># Generated types</span><br/>
+          │   ├── tsconfig.build.json <span className="token comment"></span><br />
+          │   └── tsconfig.json <span className="token comment"># TypeScript compiler options for the admin panel part</span><br />
+          ├── dist <span className="token comment"># Build of the plugin (front end and back end)</span><br/>
+          ├── node_modules<br />
+          ├── <a href="/dev-docs/plugins/server-api">server</a> <span className="token comment"># Back-end part of your plugin</span><br/>
+          │   ├── src<br />
+          │   │   ├── <a href="/dev-docs/plugins/server-api#configuration">config</a><br/>
+          │   │   │   └── index.ts <span className="token comment"># Contains the default server configuration</span><br/>
+          │   │   ├── <a href="/dev-docs/plugins/server-api#content-types">content-types</a> <span className="token comment"># Content-types specific to your plugin</span><br/>
+          │   │   │   └── index.ts <span className="token comment"># Loads all the plugin's content-types</span><br />
+          │   │   ├── <a href="/dev-docs/plugins/server-api#controllers">controllers</a> <span className="token comment"># Controllers specific to your plugin</span><br />
+          │   │   │   ├── index.ts <span className="token comment"># Loads all the plugin's controllers</span><br/>
+          │   │   │   └── controller.ts <span className="token comment"># Custom controller example. You can rename it or delete it.</span><br/>
+          │   │   ├── <a href="/dev-docs/plugins/server-api#middlewares">middlewares</a> <span className="token comment"># Middlewares specific to your plugin</span><br/>
+          │   │   │   └── index.ts <span className="token comment"># Loads all the plugin's middlewares</span><br />
+          │   │   ├── <a href="/dev-docs/plugins/server-api#policies">policies</a> <span className="token comment"># Policies specific to your plugin</span><br />
+          │   │   │   └── index.ts <span className="token comment"># Loads all the plugin's policies</span><br />
+          │   │   ├── <a href="/dev-docs/plugins/server-api#routes">routes</a> <span className="token comment"># Routes specific to your plugin</span><br/>
+          │   │   │   └── index.ts <span className="token comment"># Contains an example route for the my-controller custom controller example</span><br/>
+          │   │   ├── <a href="/dev-docs/plugins/server-api#services">services</a> <span className="token comment"># Services specific to your plugin</span> <br/>
+          │   │   │   ├── index.ts <span className="token comment"># Loads all the plugin's services</span><br/>
+          │   │   │   └── service.ts <span className="token comment"># Custom service example. You can rename it or delete it.</span><br/>
+          │   │   ├── <a href="/dev-docs/plugins/server-api#bootstrap">bootstrap.ts</a> <span className="token comment"># Function that is called right after the plugin has registered</span><br/>
+          │   │   ├── <a href="/dev-docs/plugins/server-api#register">destroy.ts</a> <span className="token comment"># Function that is called to clean up the plugin after Strapi instance is destroyed</span><br/>
+          │   │   ├── <a href="/dev-docs/plugins/server-api">index.ts</a> <span className="token comment"># Entrypoint for the server (back end)</span> <br />
+          │   │   └── <a href="/dev-docs/plugins/server-api#register">register.ts</a> <span className="token comment"># Function that is called to load the plugin, before bootstrap.</span><br/>
+          │   ├── tsconfig.build.json <span className="token comment"></span><br />
+          │   └── tsconfig.json <span className="token comment"># TypeScript compiler options for the server part</span><br />
+          ├── .editorconfig<br />
+          ├── .eslintignore<br />
+          ├── .gitignore<br />
+          ├── .prettierignore<br />
+          ├── .prettierrc<br />
+          ├── package-lock.json<br />
+          ├── package.json<br />
+          └── README.md<br />
+          </code>
+        </pre>
+
+        </TabItem>
+
         <TabItem value="js" label="JavaScript-based plugins">
 
           The following diagram is interactive: you can click on any file or folder name highlighted in purple to go to the corresponding documentation section.<br /><br />
@@ -64,69 +127,6 @@ export default function InteractivePluginStructure() {
           </pre>
 
         </TabItem>
-
-        <TabItem title="TypeScript-based projects" value="TypeScript-based plugins">
-
-          The following diagram is interactive: you can click on any file or folder name highlighted in purple to go to the corresponding documentation section.<br /><br />
-
-          <pre className="prism-code">
-            <code>
-            . <span className="token comment"># root of the plugin folder (e.g., /src/plugins/my-plugin)</span><br/>
-            ├── <a href="/dev-docs/plugins/admin-panel-api">admin</a> <span className="token comment"># Admin panel part of your plugin.</span><br/>
-            │   ├── src<br />
-            │   │   ├── components <span className="token comment"># Contains your front-end components</span><br/>
-            │   │   │   ├── Initializer.tsx <span className="token comment"># Plugin initializer</span><br/>
-            │   │   │   └── PluginIcon.tsx <span className="token comment"># Contains the icon of your plugin in the main navigation</span><br/>
-            │   │   ├── pages <span className="token comment"># Contains the pages of your plugin</span><br/>
-            │   │   │   ├── App.tsx <span className="token comment"># Skeleton around the actual pages</span><br/>
-            │   │   │   └── HomePage.tsx <span className="token comment"># Homepage of your plugin</span><br/>
-            │   │   ├── translations <span className="token comment"># Translations files to make your plugin i18n-friendly</span><br/>
-            │   │   │   ├── en.json<br/>
-            │   │   ├── utils<br/>
-            │   │   │   └── getTranslations.ts <span className="token comment"># getTranslations function to return the corresponding plugin translations</span><br/>
-            │   │   ├── index.ts <span className="token comment"># Main setup of your plugin, used to register elements in the admin panel</span><br/>
-            │   │   └── pluginId.ts <span className="token comment"># pluginId variable computed from package.tsxon name</span><br/>
-            │   ├── custom.d.ts <span className="token comment"># Generated types</span><br/>
-            │   ├── tsconfig.build.json <span className="token comment"></span><br />
-            │   └── tsconfig.json <span className="token comment"># TypeScript compiler options for the admin panel part</span><br />
-            ├── dist <span className="token comment"># Build of the plugin (front end and back end)</span><br/>
-            ├── node_modules<br />
-            ├── <a href="/dev-docs/plugins/server-api">server</a> <span className="token comment"># Back-end part of your plugin</span><br/>
-            │   ├── src<br />
-            │   │   ├── <a href="/dev-docs/plugins/server-api#configuration">config</a><br/>
-            │   │   │   └── index.ts <span className="token comment"># Contains the default server configuration</span><br/>
-            │   │   ├── <a href="/dev-docs/plugins/server-api#content-types">content-types</a> <span className="token comment"># Content-types specific to your plugin</span><br/>
-            │   │   │   └── index.ts <span className="token comment"># Loads all the plugin's content-types</span><br />
-            │   │   ├── <a href="/dev-docs/plugins/server-api#controllers">controllers</a> <span className="token comment"># Controllers specific to your plugin</span><br />
-            │   │   │   ├── index.ts <span className="token comment"># Loads all the plugin's controllers</span><br/>
-            │   │   │   └── controller.ts <span className="token comment"># Custom controller example. You can rename it or delete it.</span><br/>
-            │   │   ├── <a href="/dev-docs/plugins/server-api#middlewares">middlewares</a> <span className="token comment"># Middlewares specific to your plugin</span><br/>
-            │   │   │   └── index.ts <span className="token comment"># Loads all the plugin's middlewares</span><br />
-            │   │   ├── <a href="/dev-docs/plugins/server-api#policies">policies</a> <span className="token comment"># Policies specific to your plugin</span><br />
-            │   │   │   └── index.ts <span className="token comment"># Loads all the plugin's policies</span><br />
-            │   │   ├── <a href="/dev-docs/plugins/server-api#routes">routes</a> <span className="token comment"># Routes specific to your plugin</span><br/>
-            │   │   │   └── index.ts <span className="token comment"># Contains an example route for the my-controller custom controller example</span><br/>
-            │   │   ├── <a href="/dev-docs/plugins/server-api#services">services</a> <span className="token comment"># Services specific to your plugin</span> <br/>
-            │   │   │   ├── index.ts <span className="token comment"># Loads all the plugin's services</span><br/>
-            │   │   │   └── service.ts <span className="token comment"># Custom service example. You can rename it or delete it.</span><br/>
-            │   │   ├── <a href="/dev-docs/plugins/server-api#bootstrap">bootstrap.ts</a> <span className="token comment"># Function that is called right after the plugin has registered</span><br/>
-            │   │   ├── <a href="/dev-docs/plugins/server-api#register">destroy.ts</a> <span className="token comment"># Function that is called to clean up the plugin after Strapi instance is destroyed</span><br/>
-            │   │   ├── <a href="/dev-docs/plugins/server-api">index.ts</a> <span className="token comment"># Entrypoint for the server (back end)</span> <br />
-            │   │   └── <a href="/dev-docs/plugins/server-api#register">register.ts</a> <span className="token comment"># Function that is called to load the plugin, before bootstrap.</span><br/>
-            │   ├── tsconfig.build.json <span className="token comment"></span><br />
-            │   └── tsconfig.json <span className="token comment"># TypeScript compiler options for the server part</span><br />
-            ├── .editorconfig<br />
-            ├── .eslintignore<br />
-            ├── .gitignore<br />
-            ├── .prettierignore<br />
-            ├── .prettierrc<br />
-            ├── package-lock.json<br />
-            ├── package.json<br />
-            └── README.md<br />
-            </code>
-          </pre>
-
-        </TabItem>
       </Tabs>
    </div>
   );