@atlassian/clientside-extensions-docs 2.4.0-docs-1 → 2.4.1-docs-2

package/content/server/framework/clientside-extensions/guides/how-to/debugging-and-troubleshooting-an-extension.md

@@ -4,7 +4,7 @@ platform: server
 product: clientside-extensions
 category: devguide
 subcategory: how-to
-date: '2021-10-12'
+date: '2022-01-04'
 ---
 
 # Debugging and troubleshooting an extension
@@ -55,16 +55,16 @@ If you haven't found the plugin on the list, you should try checking and inspect
 
 Now that you know your plugin was loaded, you can check if the extension was loaded on the page.
 
-1.  Install the **[ASD Chrome extension](https://chrome.google.com/webstore/detail/atlassian-server-devtools/ifdlelpkchpppgmhmidenfmlhdafbnke)**. Open a web browser, turn on the DevTools and select the **ASD** tab.
+1.  Install the **[Atlassian Browser DevTools Chrome extension](https://chrome.google.com/webstore/detail/atlassian-server-devtools/ifdlelpkchpppgmhmidenfmlhdafbnke)**. Open a web browser, turn on the DevTools and select the **ABD** tab.
 2.  Navigate to the page where you should see the extension point.
 3.  If the extension point is located in a different tab, e.g. Diff tab, select this tab on the page.
-4.  Now, in the DevTools window, select the **ASD** tab and choose the **WRM Inspector** option.
+4.  Now, in the DevTools window, select the **ABD** tab and choose the **WRM Inspector** option.
 5.  The **WRM inspector** allows you to see a list of all the web-resources loaded on the page. To filter the list and find a web-resource with your extension code:
 
     -   Click on the **All context** option and select the name of the extension point
     -   In the **Filter** field, type in part of your plugin name
 
-    ![Filtering and finding web-resource with ASD](/server/framework/clientside-extensions/guides/how-to/debugging-and-troubleshooting-an-extension/asd-finding-web-resource.png)
+    ![Filtering and finding web-resource with ABD](/server/framework/clientside-extensions/guides/how-to/debugging-and-troubleshooting-an-extension/abd-finding-web-resource.jpg)
 
 6.  If you can find your web-resource on the list, it means that your extension was configured correctly, and it can be loaded on the page.
 

package/content/server/framework/clientside-extensions/guides/how-to/setup-schema-loader.md

@@ -4,7 +4,7 @@ platform: server
 product: clientside-extensions
 category: devguide
 subcategory: how-to
-date: '2021-10-12'
+date: '2021-11-29'
 ---
 
 # Setting up the CSE schema-loader
@@ -36,10 +36,16 @@ In your webpack configuration, configure the loader to match `.cse.graphql` file
 
 module.exports = {
     // your webpack config
-    entry: { /**/ },
-    output: {/**/},
-    plugins: [/**/],
-    ...
+    entry: {
+        /**/
+    },
+    output: {
+        /**/
+    },
+    plugins: [
+        /**/
+    ],
+    // ...
 
     module: {
         rules: [
@@ -52,13 +58,13 @@ module.exports = {
                     cwd: path.resolve(__dirname, 'src', 'schemas'),
                 },
             },
-        ]
-    }
+        ],
+    },
 };
 ```
 
 After configuring the loader, you will be able to import the [hooks and components](/server/framework/clientside-extensions/reference/api/extension-points/hooks-and-components/)
-directly from the schema as follow:
+directly from the schema as follows:
 
 `schema.cse.graphql`
 
@@ -97,7 +103,7 @@ const ExampleExtensionPoint = ({ context }) => {
 
     return (
         <>
-            {extensions.map(({attributes}) => <a href={attributes.url}>{attributes.label}</a>}
+            {extensions.map(({attributes}) => (<a href={attributes.url}>{attributes.label}</a>)}
         </>
     )
 }
@@ -105,65 +111,29 @@ const ExampleExtensionPoint = ({ context }) => {
 export default ExampleExtensionPoint;
 ```
 
-## 3. Generic code
-
-If you do not use React, there is a way to instead generate plain vanilla JavaScript code.
-For this to happen, set the _generic_ option to `true`.
-
-```js
-// #webpack.config.js
-
-module.exports = {
-    // your webpack config
-    entry: { /**/ },
-    output: {/**/},
-    plugins: [/**/],
-    ...
-
-    module: {
-        rules: [
-            // Add a rule entry to the list of loaders
-            {
-                test: /\.cse.graphql$/,
-                loader: '@atlassian/clientside-extensions-schema/loader',
-                options: {
-                    // You can specify a working dir
-                    cwd: path.resolve(__dirname, 'src', 'schemas'),
-                },
-            },
-            // Rule to handle non-react extensions
-            {
-                test: /\.cse.generic.graphql$/,
-                loader: '@atlassian/clientside-extensions-schema/loader',
-                options: {
-                    cwd: path.resolve(__dirname, 'src', 'schemas'),
-                    // Enables vanilla javascript code generation
-                    generic: true
-                },
-            },
-        ]
-    }
-};
-```
-
-## 4. Sharing scalars and types
+## 3. Sharing scalars and types
 
 CSE provides a set of default [scalars and types](/server/framework/clientside-extensions/reference/api/extension-points/schemas/#provided-scalars)
 that you will be using very often, but there are cases where you would like to share your own types and scalars
 between schema definitions.
 
-To do so, you can declare files with a name like `*.type.graphql` and configure the loader to include those
-definition for all your schemas as follow:
+To do so, you can declare files with a name like `*.type.graphql` and configure the loader to include those definitions for all your schemas as follows:
 
 ```js
 // #webpack.config.js
 
 module.exports = {
     // your webpack config
-    entry: { /**/ },
-    output: {/**/},
-    plugins: [/**/],
-    ...
+    entry: {
+        /**/
+    },
+    output: {
+        /**/
+    },
+    plugins: [
+        /**/
+    ],
+    // ...
 
     module: {
         rules: [
@@ -173,11 +143,11 @@ module.exports = {
                 options: {
                     cwd: path.resolve(__dirname, 'src', 'schemas'),
                     // configure a pattern for your own shared types
-                    providedTypes: '**/*.type.graphql'
+                    providedTypes: '**/*.type.graphql',
                 },
             },
-        ]
-    }
+        ],
+    },
 };
 ```
 
@@ -237,13 +207,15 @@ When using `webpack` to load your extensions with the schema-loader at `@atlassi
 you need to tell your test-runner how to interpret those imports. This `jest-transformer` will do exactly this, if you
 run your tests using jest.
 
-To use it add the following to your `jest`config:
+To use it, add the following entry to your Jest `jest.config.js` config file:
 
 ```js
-transform: {
-  // A custom GraphQL transformer that provides React hooks and components for CSE
-  '^.+\\.extension\\.graphql$': require.resolve('@atlassian/clientside-extensions-schema/jest-graphql-transformer.js'),
-},
+module.exports = {
+    transform: {
+        // A custom GraphQL transformer that provides React hooks and components for CSE
+        '^.+\\.extension\\.graphql$': require.resolve('@atlassian/clientside-extensions-schema/jest-graphql-transformer.js'),
+    },
+};
 ```
 
 {{% note %}}

package/content/server/framework/clientside-extensions/guides/how-to/setup-webpack-plugin.md

@@ -4,7 +4,7 @@ platform: server
 product: clientside-extensions
 category: devguide
 subcategory: how-to
-date: '2021-10-12'
+date: '2021-11-29'
 ---
 
 # Setting up the CSE webpack plugin
@@ -181,4 +181,4 @@ npx @atlassian/wrm-troubleshooting
 
 The tool will ask you a few questions and guide you if it finds issues with your projects' configuration.
 
-You can read more about the troubleshooting tool on the [NPM page for the `@atlassian/wrm-troubleshooting` package][https://www.npmjs.com/package/@atlassian/wrm-troubleshooting].
+You can read more about the troubleshooting tool on the [NPM page for the `@atlassian/wrm-troubleshooting` package](https://www.npmjs.com/package/@atlassian/wrm-troubleshooting).

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@atlassian/clientside-extensions-docs",
-    "version": "2.4.0-docs-1",
+    "version": "2.4.1-docs-2",
     "description": "Holds the official documentation for Altassian Server client-side extensions API.",
     "license": "BSD-3-Clause",
     "homepage": "https://bitbucket.org/atlassian/atlassian-clientside-extensions#readme",
@@ -79,5 +79,5 @@
     "optionalDependencies": {
         "@atlassian/doc-scripts": "^5.0.0"
     },
-    "gitHead": "3fe5a0657a4cdc150a6080f305f98c830b17f02e"
+    "gitHead": "4c98bad371a4fff8afcef318bb67ed86727fb877"
 }