Registry / web-framework / babel-plugin-hylid-bridge

babel-plugin-hylid-bridge

library6.3.2jsnpmunverified

A Babel plugin that transforms Hydra imports into a bridge to enable server-side rendering (SSR) for Hydra components. The current stable version 6.3.2 is part of the Hylid ecosystem, released with moderate cadence. It differentiates from other SSR solutions by integrating specifically with the Hylid component model, allowing hydration of components in both client and server environments. The plugin is designed to work with Babel 7+ and is primarily used in Next.js or similar frameworks that require SSR support for Hydra-based UI. The package ships TypeScript types for enhanced developer experience.

web-framework devops

npm install babel-plugin-hylid-bridge

package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-HYLID

babel-plugin-hylid-bridge

web-frameworkjavascriptv6.3.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import babelPluginHylidBridge from 'babel-plugin-hylid-bridge'

✗ const babelPluginHylidBridge = require('babel-plugin-hylid-bridge')

CJS require is allowed but ESM is preferred. The plugin is a function passed to Babel config.

default

✓ // In .babelrc or babel.config.js: module.exports = { plugins: ['babel-plugin-hylid-bridge'] }

✗ module.exports = { plugins: [require('babel-plugin-hylid-bridge')] }

You can use the string name directly. Direct require of the plugin function is possible but unnecessary.

default

✓ // In next.config.js with next-compose-plugins: const withPlugins = require('next-compose-plugins'); module.exports = withPlugins([ [require('babel-plugin-hylid-bridge'), { /* options */ }] ]);

✗ // Missing plugin call: module.exports = withPlugins([require('babel-plugin-hylid-bridge')]);

The plugin is a function that returns a Babel plugin object. Must be invoked with options if any.

Demonstrates installation and configuration of the plugin in babel.config.js for a Next.js project.

// Install: // npm install --save-dev babel-plugin-hylid-bridge // In babel.config.js: module.exports = { presets: ['next/babel'], plugins: [ ['babel-plugin-hylid-bridge', { // options: e.g., { hydra: 'hydra' } // customization for binding name }] ] }; // Then in your Hydra component: import { Hydra } from 'hylid'; // This import gets transformed for SSR // The plugin will transform the import to a bridge that loads Hydra only on client. // For example, it might become: // const Hydra = typeof window !== 'undefined' ? require('hylid').Hydra : null;

Debug

Known issues

breakingVersion 5.x to 6.x changed the plugin interface: options must be passed as an array to plugins, not as an object directly.

fix

Update babel.config.js: plugins: [['babel-plugin-hylid-bridge', options]] instead of plugins: [babelPluginHylidBridge(options)].

affects: >=6.0.0

deprecatedOption 'name' has been deprecated since v6.0.0 in favor of 'hydra'.

fix

Replace 'name' with 'hydra' in options object.

affects: >=6.0.0

gotchaPlugin must be placed after 'next/babel' preset to work correctly.

fix

Order in plugins array: add after 'next/babel' preset or after other presets that require Hydra transforms.

affects: all

Errors

Common errors & fixes

Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type.

Babel is not configured to transform Hydra import in a non-Next.js project.

fix

Add 'babel-plugin-hylid-bridge' to your Babel plugins. If not using Next.js, you need to ensure Babel is processing the files.

Cannot find module 'hydra'

The plugin expects the import source to be 'hydra' (default) or specified by option.

fix

Ensure your import matches the configured source: import { Hydra } from 'hydra'; or adjust the 'hydra' option in plugin.

babel-plugin-hylid-bridge is not a function

You are using require() directly in plugins array without calling it.

fix

Use string name: plugins: ['babel-plugin-hylid-bridge'] or call the function: plugins: [require('babel-plugin-hylid-bridge')()].

Upgrade

Version history

6.3.2latest on npm

Audit

Dependencies

@babel/coreoptionalRequired as a peer dependency to function as a Babel plugin.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/babel-plugin-hylid-bridge ↗

homepagehttps://hylid.dev ↗