diff options
author | Benjamin Altpeter <[email protected]> | 2024-02-22 17:58:22 +0100 |
---|---|---|
committer | Bjørn Erik Pedersen <[email protected]> | 2024-02-23 10:25:27 +0100 |
commit | 554aa58db60000e7d375ffcdbd0143ac1bedf610 (patch) | |
tree | e0dd6fa4b1db0e6d12b6b72071be8afce2c6e1a0 /docs/content | |
parent | 36bf3cb98cf8d7a8519df473196ee73b9d014244 (diff) | |
download | hugo-554aa58db60000e7d375ffcdbd0143ac1bedf610.tar.gz hugo-554aa58db60000e7d375ffcdbd0143ac1bedf610.zip |
js: Support JSX and JSXImportSourceOptions
Fixes #12118
Diffstat (limited to 'docs/content')
-rw-r--r-- | docs/content/en/functions/js/Build.md | 23 | ||||
-rw-r--r-- | docs/content/en/hugo-pipes/js.md | 23 |
2 files changed, 46 insertions, 0 deletions
diff --git a/docs/content/en/functions/js/Build.md b/docs/content/en/functions/js/Build.md index 835785486..de9097a67 100644 --- a/docs/content/en/functions/js/Build.md +++ b/docs/content/en/functions/js/Build.md @@ -111,6 +111,29 @@ format sourceMap : (`string`) Whether to generate `inline` or `external` source maps from esbuild. External source maps will be written to the target with the output file name + ".map". Input source maps can be read from js.Build and node modules and combined into the output source maps. By default, source maps are not created. +JSX {{< new-in 0.124.0 >}} +: (`string`) How to handle/transform JSX syntax. One of: `transform`, `preserve`, `automatic`. Default is `transform`. Notably, the `automatic` transform was introduced in React 17+ and will cause the necessary JSX helper functions to be imported automatically. See https://esbuild.github.io/api/#jsx + +JSXImportSource {{< new-in 0.124.0 >}} +: (`string`) Which library to use to automatically import its JSX helper functions from. This only works if `JSX` is set to `automatic`. The specified library needs to be installed through NPM and expose certain exports. See https://esbuild.github.io/api/#jsx-import-source + +The combination of `JSX` and `JSXImportSource` is helpful if you want to use a non-React JSX library like Preact, e.g.: + +```go-html-template +{{ $js := resources.Get "js/main.jsx" | js.Build (dict "JSX" "automatic" "JSXImportSource" "preact") }} +``` + +With the above, you can use Preact components and JSX without having to manually import `h` and `Fragment` every time: + +```jsx +import { render } from 'preact'; + +const App = () => <>Hello world!</>; + +const container = document.getElementById('app'); +if (container) render(<App />, container); +``` + ### Import JS code from /assets `js.Build` has full support for the virtual union file system in [Hugo Modules](/hugo-modules/). You can see some simple examples in this [test project](https://github.com/gohugoio/hugoTestProjectJSModImports), but in short this means that you can do this: diff --git a/docs/content/en/hugo-pipes/js.md b/docs/content/en/hugo-pipes/js.md index 9d2bbbd82..8a2e2f40e 100644 --- a/docs/content/en/hugo-pipes/js.md +++ b/docs/content/en/hugo-pipes/js.md @@ -95,6 +95,29 @@ format sourceMap : (`string`) Whether to generate `inline` or `external` source maps from esbuild. External source maps will be written to the target with the output file name + ".map". Input source maps can be read from js.Build and node modules and combined into the output source maps. By default, source maps are not created. +JSX {{< new-in 0.124.0 >}} +: (`string`) How to handle/transform JSX syntax. One of: `transform`, `preserve`, `automatic`. Default is `transform`. Notably, the `automatic` transform was introduced in React 17+ and will cause the necessary JSX helper functions to be imported automatically. See https://esbuild.github.io/api/#jsx + +JSXImportSource {{< new-in 0.124.0 >}} +: (`string`) Which library to use to automatically import its JSX helper functions from. This only works if `JSX` is set to `automatic`. The specified library needs to be installed through NPM and expose certain exports. See https://esbuild.github.io/api/#jsx-import-source + +The combination of `JSX` and `JSXImportSource` is helpful if you want to use a non-React JSX library like Preact, e.g.: + +```go-html-template +{{ $js := resources.Get "js/main.jsx" | js.Build (dict "JSX" "automatic" "JSXImportSource" "preact") }} +``` + +With the above, you can use Preact components and JSX without having to manually import `h` and `Fragment` every time: + +```jsx +import { render } from 'preact'; + +const App = () => <>Hello world!</>; + +const container = document.getElementById('app'); +if (container) render(<App />, container); +``` + ### Import JS code from /assets `js.Build` has full support for the virtual union file system in [Hugo Modules](/hugo-modules/). You can see some simple examples in this [test project](https://github.com/gohugoio/hugoTestProjectJSModImports), but in short this means that you can do this: |