feat: v4.41 release (new docs for strictPort and jsxImportSource) (#1574)

* feat: add docs for strictPort and jsxImportSource

* chore:

* chore:

---------

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Author: johnjenkins

cspell-wordlist.txt

@@ -41,4 +41,5 @@ usingtheplatform
 vnode
 webapps
 wdio
-webdriverio
+webdriverio
+hyperscript

docs/components/api.md

@@ -119,9 +119,11 @@ The following primitives can be imported from the `@stencil/core` package and us
 
 ### [**h()**](./templating-and-jsx.md): 
 
-It's used within the `render()` to turn the JSX into Virtual DOM elements.
+Turns JSX syntax into Virtual DOM elements. Read more on the [Templating and JSX](./templating-and-jsx.md#the-h-and-fragment-functions) page.
 
-- **render()**: a utility method to render a virtual DOM created by `h()` into a container.
+### **render()**: 
+
+A utility method to render a virtual DOM created by `h()` into a container.
 
   __Type:__ `(vnode: VNode, container: Element) => void`
   __Example:__

docs/components/templating-and-jsx.md

@@ -11,7 +11,59 @@ Stencil components are rendered using JSX, a popular, declarative template synta
 
 ## Basics
 
-The `render` function is used to output a tree of components that will be drawn to the screen.
+### The `h` and `Fragment` functions
+
+The `h` function (short for "hyperscript") is a factory function that creates virtual DOM elements. When you write JSX like `<div>Hello</div>`, it gets transformed into function calls like `h('div', null, 'Hello')`. The `Fragment` function is used to group a list of children without adding extra nodes to the DOM.
+
+#### Set up in Stencil
+
+Within your Stencil project, make sure to add or modify your `tsconfig.json` file, adding:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  }
+}
+```
+
+You will then need to import `h` (and `Fragment` if you plan to use it) from `@stencil/core` at the top of your component file:
+
+```tsx
+import { h, Fragment, Component } from '@stencil/core';
+
+@Component({
+  tag: 'my-component',
+})
+class MyComponent { ... }
+```
+
+(Read more about using the `Fragment` component in the [Complex Template Content](#complex-template-content) section below.)
+
+### `jsxImportSource` alternative
+
+`jsxImportSource` is a more modern approach that automatically imports the necessary JSX runtime functions instead of manually importing `h`; the compiler automatically imports what it needs from the specified package.
+
+#### Set up in Stencil
+
+To use `jsxImportSource`, modify your `tsconfig.json` file as follows:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@stencil/core"
+  }
+}
+```
+
+Using this approach means you do not need to manually import `h` or `Fragment` in your component files.
+
+### The `render` function
+
+The `render` function is used within your component to output a tree of elements that will be drawn to the screen.
 
 ```tsx
 class MyComponent {

docs/config/dev-server.md

@@ -130,6 +130,16 @@ If set to `null`, no route will be registered.
 
 Sets the server's port.
 
+### `strictPort`
+
+**Optional**
+
+**Type: `boolean`**
+
+**Default: `false`**
+
+When set to `true`, the dev server will fail to start if the specified `port` is already in use. When set to `false`, the dev server will try the next available port if the specified port is in use.
+
 ### `reloadStrategy`
 
 **Optional**

versioned_docs/version-v4.41/build-variables.md

@@ -0,0 +1,48 @@
+---
+title: Build Constants
+description: Stencil has a number of add-ons that you can use with the build process.
+slug: /build-variables
+---
+
+# Build Constants
+
+Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible.
+
+### Using Build Constants
+
+Lets dive in and look at an example of how to use our build constants:
+
+```tsx
+import { Component, Build } from '@stencil/core';
+
+@Component({
+  tag: 'stencil-app',
+  styleUrl: 'stencil-app.scss'
+})
+export class StencilApp {
+
+  componentDidLoad() {
+    if (Build.isDev) {
+      console.log('im in dev mode');
+    } else {
+      console.log('im running in production');
+    }
+
+    if (Build.isBrowser) {
+      console.log('im in the browser');
+    } else {
+      console.log('im in prerendering (server)');
+    }
+  }
+}
+```
+
+As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode.
+
+### Use Cases
+
+Some use cases we have come up with are:
+
+- Diagnostics code that runs in dev to make sure logic is working like you would expect
+- `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship
+- Disabling auth checks when in dev mode

versioned_docs/version-v4.41/components/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Components",
+  "position": 2
+}