Documentation code block uplift (#825)

docs/docs/building-the-app.md

@@ -4,7 +4,7 @@
 
 You should have the following scripts in your `package.json`.
 
-```js
+```json
 {
   "scripts": {
     "start": "sku start" // or `sku start-ssr` for SSR projects
@@ -15,14 +15,14 @@ You should have the following scripts in your `package.json`.
 
 To start a local development server and open a new browser tab:
 
-```bash
+```sh
 $ npm start
 ```
 
 Out of the box sku will start your app with [webpack-dev-server](https://github.com/webpack/webpack-dev-server) on http://localhost:8080. However there a few options you can pass `sku.config.js` if needed.
 
 ```js
-module.exports = {
+export default {
   // The preferred port you want the server to run on. sku will automatically
   // find a free port if this one is busy.
   port: 5000,
@@ -58,7 +58,7 @@ The client entry is the entrypoint for all your client side code (code that runs
 
 Example client entry
 
-```js
+```tsx
 import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 

docs/docs/code-splitting.md

@@ -27,17 +27,18 @@ The most common use case for code splitting is splitting out each top level rout
 
 ```js
 // sku.config.js
-module.exports = {
+export default {
   routes: ['/', '/details']
   publicPath: 'https://somecdn.com'
 };
 ```
 
-```js
-// render.js
+```tsx
+// render.tsx
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { StaticRouter } from 'react-router-dom/server';
+import type { Render } from 'sku';
 
 import App from './App';
 
@@ -67,11 +68,11 @@ export default {
       </html>
     `;
   },
-};
+} satisfies Render;
 ```
 
-```js
-// client.js
+```tsx
+// client.tsx
 import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
@@ -88,16 +89,16 @@ export default () => {
 };
 ```
 
-```js
-// App.js
+```tsx
+// App.tsx
 import React, { Fragment } from 'react';
 import { Routes, Route } from 'react-router-dom';
 import loadable from 'sku/@loadable/component';
 
 const Home = loadable(() => import('./handlers/Home'));
 const Details = loadable(() => import('./handlers/Details'));
 
-export default ({ site }) => (
+export default ({ site }: { site: string }) => (
   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/details" element={<Details />} />

docs/docs/compilation.md

@@ -15,7 +15,7 @@ Use `import`, `const`, `=>`, rest/spread operators, destructuring, classes with
 
 If you'd like use a package that requires adding a Babel plugin, try [Babel Macros](https://github.com/kentcdodds/babel-plugin-macros). Macros allow packages to apply the configuration changes for you when they are imported. For example, to use [Emotion](https://emotion.sh/):
 
-```js
+```ts
 import styled from 'react-emotion/macro';
 import { css } from 'emotion/macro';
 ```

docs/docs/configuration.md

@@ -2,7 +2,7 @@
 
 If you need to configure sku, first create a `sku.config.ts` file in your project root:
 
-```bash
+```sh
 $ touch sku.config.ts
 ```
 
@@ -11,20 +11,18 @@ While sku has a zero configuration mode, the equivalent manual configuration wou
 ```ts
 import type { SkuConfig } from 'sku';
 
-const skuConfig: SkuConfig = {
+export default {
   clientEntry: 'src/client.js',
   renderEntry: 'src/render.js',
   public: 'src/public',
   publicPath: '/',
   target: 'dist',
-};
-
-export default skuConfig;
+} satisfies SkuConfig;
 ```
 
 If you need to specify a different config file you can do so with the `--config` parameter.
 
-```bash
+```sh
 $ sku start --config sku.custom.config.ts
 ```
 
@@ -74,13 +72,13 @@ Similar to `dangerouslySetWebpackConfig` but for [eslint](https://eslint.org/) c
 
 Example:
 
-```js
-const config = {
+```ts
+export default {
   dangerouslySetESLintConfig: (skuEslintConfig) => ({
     ...skuEslintConfig,
     someOtherConfig: 'dangerousValue',
   }),
-};
+} satisfies SkuConfig;
 ```
 
 ## dangerouslySetJestConfig
@@ -93,13 +91,13 @@ Please speak with the `sku-support` group before using.
 
 Example:
 
-```js
-const config = {
+```ts
+export default {
   dangerouslySetJestConfig: (skuJestConfig) => ({
     ...skuJestConfig,
     someOtherConfig: 'dangerousValue',
   }),
-};
+} satisfies SkuConfig;
 ```
 
 ## dangerouslySetWebpackConfig
@@ -114,13 +112,13 @@ Reliance on this setting will cause issues when upgrading sku as any custom sett
 
 Example:
 
-```js
-const config = {
+```ts
+export default {
   dangerouslySetWebpackConfig: (skuWebpackConfig) => ({
     ...skuWebpackConfig,
     someOtherConfig: 'dangerousValue',
   }),
-};
+} satisfies SkuConfig;
 ```
 
 ## devServerMiddleware
@@ -151,10 +149,10 @@ Adds static `displayName` properties to React components in production. This set
 
 Example:
 
-```js
-const config = {
+```ts
+export default {
   displayNamesProd: true,
-};
+} satisfies SkuConfig;
 ```
 
 ## environments
@@ -320,10 +318,10 @@ Can be used to limit the languages rendered for a specific route. Any listed lan
 
 Example:
 
-```js
-const config = {
+```ts
+export default {
   routes: ['/', '/details'],
-};
+} satisfies SkuConfig;
 ```
 
 ## serverEntry
@@ -393,10 +391,10 @@ Set to `true` to enable source maps in production.
 
 Example:
 
-```js
-const config = {
+```ts
+export default {
   sourceMapsProd: true,
-};
+} satisfies SkuConfig;
 ```
 
 ## srcPaths

docs/docs/csp.md

@@ -18,7 +18,7 @@ In the `renderCallback` function, register all extra script tags (inline and ext
 
 > If you are using multi-part responses via the `flushHeadTags` API, all scripts must be registered before sending the the initial response.
 
-```js
+```tsx
 async function renderCallback(
   { SkuProvider, getBodyTags, registerScript },
   req,

docs/docs/extra-features.md

@@ -29,10 +29,10 @@ This method only works for `@seek` scoped packages.
 
 Alternatively, you can add any packages you like to the `compilePackages` option in the **consuming app's** sku config file.
 
-```js
-module.exports = {
+```ts
+export default {
   compilePackages: ['awesome-shared-components'],
-};
+} satisfies SkuConfig;
 ```
 
 Any `node_modules` marked as a `compilePackage` will be compiled through webpack as if they are part of your app.
@@ -43,15 +43,14 @@ Since sku injects its own code into your bundle in development mode, it's import
 
 _**NOTE:** Polyfills are only loaded in a browser context. This feature can't be used to modify the global environment in Node._
 
-```js
-module.exports = {
-  ...,
+```ts
+export default {
   polyfills: [
     'promise-polyfill',
     'core-js/modules/es6.symbol',
-    'regenerator-runtime/runtime'
-  ]
-}
+    'regenerator-runtime/runtime',
+  ],
+} satisfies SkuConfig;
 ```
 
 ## Bundle analysis
@@ -86,11 +85,11 @@ This allows you to perform more expensive checks during development without worr
 
 For example, let's assume you wrote the following code:
 
-```js
+```tsx
 import React from 'react';
 import assert from 'assert';
 
-export const Rating = ({ rating }) => {
+export const Rating = ({ rating }: { rating: number }) => {
   assert(rating >= 0 && rating <= 5, 'Rating must be between 0 and 5');
 
   return <div>...</div>;

docs/docs/getting-started.md

@@ -2,14 +2,14 @@
 
 Create a new project and start a local development environment:
 
-```bash
+```sh
 $ npx sku init my-app
 $ cd my-app
 $ npm start
 ```
 
 Don't have [npx](https://www.npmjs.com/package/npx)?
 
-```bash
+```sh
 $ npm install -g npx
 ```

docs/docs/libraries.md

@@ -4,27 +4,21 @@ If you need to build a UMD library instead of a web site, you can provide a `lib
 
 > If you are creating a package to share between multiple sku apps, then you probably want [compile packages](./docs/extra-features#compile-packages) instead. Libraries should only be used when you have very little control over the target environment (e.g. legacy applications, externally hosted solutions like Auth0).
 
-```typescript
-// sku.config.ts
-import type { SkuConfig } from 'sku';
-
-const skuConfig: SkuConfig = {
+```ts
+export default {
   libraryEntry: 'src/library.js',
   renderEntry: 'src/render.js',
   libraryName: 'MyAwesomeLibrary',
-};
-
-export default skuConfig;
+} satisfies SkuConfig;
 ```
 
 By default the file name of the library will be based on the `libraryName` option. A distinct library file name may be specified by providing a `libraryFile` option:
 
-```typescript
-const skuConfig: SkuConfig = {
-  // …
+```ts
+export default {
   libraryName: 'MyAwesomeLibrary',
   libraryFile: 'my-awesome-library',
-};
+} satisfies SkuConfig;
 ```
 
 Note that `libraryFile` should _not_ include a `.js` extension as this will be added to the library file name automatically.