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 in assets/js/headlessui, but is mounted relative to this bundle using Resources.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>