Import resolution
Looking at the JSX script:
import { ButtonBasic } from "./button.jsx";
import "./mystyles.css";
export default function MyButton(props) {
return <ButtonBasic label={props.label} />;
}
mystyles.css
is a resource bundled in this page.button.jsx
lives inassets/js/headlessui
, but is mounted relative to this bundle usingResources.Mount
in this shortcode:
{{ $path := .Get "r" }}
{{ $class := .Get "c" | default "" }}
{{ $r := or (.Page.Resources.Get $path) (resources.Get $path) }}
{{ if not $r }}
{{ errorf "resource not found: %s" $path }}
{{ end }}
{{ $batch := (js.Batch "js/mybatch") }}
{{ $scriptID := $path | anchorize }}
{{ $instanceID := .Ordinal | string }}
{{ $group := .Page.RelPermalink | anchorize }}
{{ $props := .Params | default dict }}
{{ $export := .Get "export" | default "default" }}
{{ $innerData := .Inner | transform.Unmarshal | default dict }}
{{ with $innerData }}
{{ $props = $props | merge .props }}
{{ end }}
{{ with $batch.Group $group }}
{{ with .Runner "create-elements" }}
{{ .SetOptions (dict "resource" (resources.Get "js/batch/react-create-elements.js")) }}
{{ end }}
{{ with .Script $scriptID }}
{{ $common := resources.Match "/js/headlessui/*.*" }}
{{ $importContext := (slice $.Page ($common.Mount "/js/headlessui" ".")) }}
{{ .SetOptions (dict
"resource" $r
"export" $export
"importContext" $importContext )
}}
{{ end }}
{{ with .Instance $scriptID $instanceID }}
{{ .SetOptions (dict "params" $props) }}
{{ end }}
{{ end }}
<div
id="{{ printf `%s-%s` $scriptID $instanceID }}"
class="mt-6 mb-8 p-3 overflow-auto rounded-lg bg-linear-45 from-purple-900 via-blue-900 to-purple-800 {{ $class }} mystyles"></div>