Skip to content

pluginQRCode schema config is ignored when generating QR codes in the <Go> component #29

Description

@Dugyu

Description

When an example package defines a custom schema via pluginQRCode in lynx.config.mjs, the QR codes rendered within the <Go> component do not adhere to that schema. Scanning the QR code with Lynx Explorer opens the page without the expected query parameters, e.g., fullscreen, bar_color, and bg_color are all silently dropped, resulting in a white navbar and non-fullscreen rendering.

Steps to Reproduce

1. Configure pluginQRCode with a custom schema in the example's lynx.config.mjs:

pluginQRCode({
  schema(url) {
    return `${url}?fullscreen=true&bar_color=0d0d0d&bg_color=0d0d0d`;
  },
}),

2. Use the <Go> component in MDX without a schema prop:

<Go
  example="design-guide"
  defaultFile="src/soft_glow/index.css"
  img="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/design-guide/design_soft_glow.jpg"
  entry="src/soft_glow"
  defaultEntryFile="dist/soft_glow.lynx.bundle"
/>

3. Open the QRCode tab in the rendered <Go> component and scan with Lynx Explorer.

Expected Behavior

The QR code URL should use the schema defined in pluginQRCode to open the example in full-screen mode with a dark navbar (?fullscreen=true&bar_color=0d0d0d&bg_color=0d0d0d).

Actual Behavior

The QR code URL is the raw bundle URL with no schema params applied. Lynx Explorer renders the page with the default white navbar in non-fullscreen mode.

Screenshots

Expected Actual
Image Image

Root Cause

Confirmed. The example-metadata.json generated for each example package does not include any schema information:

{
  "name": "examples/design-guide",
  "version": "0.4.2",
  "reactLynxVersion": "0.115.3",
  "files": [
    "dist/color_wheels.lynx.bundle",
    "dist/color_wheels.web.bundle",
    "dist/force_field.lynx.bundle",
    "dist/force_field.web.bundle",
    ...
  ]
}

The schema function in pluginQRCode is evaluated at build time, but its result is never written into the metadata. go-web has no way to recover this information at runtime and falls back to the raw bundle URL when constructing QR codes.

Proposed Fix

The schema defined in pluginQRCode represents the developer's intent for how their example should be launched — it should serve as the default, with the <Go> component's schema prop available as a per-instance override.

This requires two changes:

1. pluginQRCode — write schema into example-metadata.json at build time:

{
  "name": "examples/design-guide",
  "schema": "{{{url}}}?fullscreen=true&bar_color=0d0d0d&bg_color=0d0d0d"
}

2. go-web — read metadata.schema as the baseline when constructing QR code URLs:

Resolution order (highest priority first):

`schema` prop on `<Go>` instance > `schema` from `example-metadata.json` > raw bundle URL

This is consistent with how defaultTab already works across instance propGoConfigProviderfallback.

Workaround

Pass the schema prop explicitly on each <Go> instance:

<Go
  example="design-guide"
  defaultFile="src/soft_glow/index.css"
  img="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/design-guide/design_soft_glow.jpg"
  entry="src/soft_glow"
  defaultEntryFile="dist/soft_glow.lynx.bundle"
  schema="{{{url}}}?fullscreen=true&bar_color=0d0d0d&bg_color=0d0d0d"
/>

This works, but defeats the purpose of centralizing the schema config in pluginQRCode.

Environment

Version
@lynx-js/go-web 0.1.0
@lynx-js/qrcode-rsbuild-plugin 0.4.6
Example package examples/design-guide v0.4.2

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions