be-switched
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.72 • Public • Published

    be-switched

    be-switched is a template behavior that lazy loads content when conditions are met.

    Published on webcomponents.org

    Playwright Tests

    <ways-of-science>
        <largest-scale -lhs>
            <woman-with-carrot-attached-to-nose></woman-with-carrot-attached-to-nose>
        </largest-scale>
        <largest-scale -rhs>
            <a-duck></a-duck>
        </largest-scale>
        <template be-switched='{
            "if": true,
            "lhs": {"observe": "[-lhs]", "vft": true},
            "op": "===",
            "rhs": {"observe": "[-rhs]", "vft": true},
        }'><div>A witch!</div></template>
    </ways-of-science>

    Editing JSON attributes inside HTML isn't the most pleasant experience, but it isn't so bad after installing the JSON-in-HTML extension, for VSCode users. The extension works in the VSCode PWA and github.dev domain as well.

    For an optimal editing experience, edit html via an mts/mjs file with the help of the may-it-be compiler.

    If the be-switched attribute is applied to a DOM node outside any ShadowDOM, then the template will lazy load when the conditions are satisfied.

    To use inside a ShadowDOM realm, an instance of the be-hive web component must be placed somewhere inside.

    To use fully compliant HTML5 syntax, use data-be-switched instead of be-switched.

    The syntax for binding the lhs and rhs of the expressions to other DOM nodes within the ShadowRealm, or to the host container, follows the same pattern / syntax used by be-observant.

    "if" can also come from observing other elements.

    Compatibility with server-side-rendering

    be-switched is compatible with server-side-rendering if the following approach is used:

    If during the time the SSR is taking place, the desire is not to display the content, but rely on the client to lazy load when conditions warrant, then the syntax above is exactly what the SSR should generate.

    If, however, the content should display initially, but we want the client-side JavaScript to be able to hide / disable the content when conditions in the browser change, the server should render the contents adjacent to the template, and provide an indicator, data-cnt, that specifies how many elements below the template are managed by the be-switched directive / decorator / behavior.

    <template  data-cnt=1 be-switched='{
        "if": true,
        "lhs": {"observe": "[-lhs]", "vft": true},
        "op": "===",
        "rhs": {"observe": "[-rhs]", "vft": true},
    }'></template>
    <div>A witch!</div>

    A demo can be seen by opening http://localhost:3030/ssr (see set up instructions below).

    In the future, as the defer-hydration cross-web component library protocol solidifies, support will be added to ensure no extra unnecessary "flops" are wasted during hydration.

    Additional conditions be-switched supports

    In addition to "if" boolean checks, and equality checks using lhs and rhs keys, some additional "if" checks can be made:

    Additional Supported Conditions
    Key Meaning
    ifMediaMatches Expands the template / makes visible only when the specified media query expression is satisfied.
    ifNonEmptyArray Tests if (bound) expression evaluates to a non empty array

    [TODO] Add support for freezeOnOffSwitch

    Viewing Your Element Locally

    1. Install git.
    2. Fork/clone this repo.
    3. Install node.
    4. Open command window to folder where you cloned this repo.
    5. npm install

    6. npm run serve

    7. Open http://localhost:3030/demo/dev in a modern browser.

    Running Tests

    > npm run test
    

    Install

    npm i be-switched

    DownloadsWeekly Downloads

    220

    Version

    0.0.72

    License

    MIT

    Unpacked Size

    27.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • bahrus