Registry / web-framework / q2-tecton-framework-wrappers

q2-tecton-framework-wrappers

library1.66.0jsnpmunverified

q2-tecton-framework-wrappers is a core package within the Q2 Tecton micro-frontend ecosystem, designed to facilitate the integration of Stencil-generated web components into various JavaScript frameworks like React, Vue, and Angular. It acts as a set of framework-specific helpers, abstracting away the complexities of direct web component usage. The Tecton system, upon which this package relies, emphasizes isolated execution contexts via iframes and provides a consistent UI/UX for embedded applications within the Q2 UUX banking platform. This package is currently at version 1.66.0 and is part of a frequently updated suite of libraries, with releases often tied to broader Tecton system updates. Its key differentiator is its role in enabling seamless adoption of Tecton's custom elements across diverse frontend frameworks, offering features like `v-model` support for Vue wrappers.

web-framework

npm install q2-tecton-framework-wrappers

package ↗homepage ↗

INSTALL

IMPORT

SIG · Q2-TECTON-FRAMEWOR

q2-tecton-framework-wrappers

web-frameworkjavascriptv1.66.0

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.

defineCustomElements

✓ import { defineCustomElements } from 'q2-tecton-elements/loader';

✗ import { defineCustomElements } from 'q2-tecton-framework-wrappers';

This is crucial for registering the underlying custom elements before any framework wrappers can utilize them. It comes from the `q2-tecton-elements` package loader, not the wrappers directly.

applyPolyfills

✓ import { applyPolyfills, defineCustomElements } from 'q2-tecton-elements/loader';

In older environments or for specific browser support, `applyPolyfills` might be necessary before `defineCustomElements` to ensure web components function correctly.

TctButton

✓ import { TctButton } from 'q2-tecton-framework-wrappers/vue'; // or import { TctButton } from 'q2-tecton-framework-wrappers/react';

✗ import { TctButton } from 'q2-tecton-elements';

Framework-specific wrappers are imported from sub-paths (e.g., `/vue`, `/react`). Directly importing from `q2-tecton-elements` would be using the raw web component without framework-specific bindings.

This quickstart demonstrates how to set up a basic Vue application using `q2-tecton-framework-wrappers` to integrate a Tecton button component, including registering custom elements and handling events.

import { defineCustomElements } from 'q2-tecton-elements/loader'; import { createApp } from 'vue'; import { TctButton } from 'q2-tecton-framework-wrappers/vue'; defineCustomElements(); const app = createApp({ template: ` <div> <h1>Q2 Tecton Integration</h1> <p>This example demonstrates integrating a Tecton button using Vue wrappers.</p> <TctButton @tctClick="handleClick" :disabled="isDisabled" ref="myButton"> {{ buttonText }} </TctButton> <p>Button is currently {{ isDisabled ? 'disabled' : 'enabled' }}.</p> <button @click="toggleDisable">Toggle Button State</button> </div> `, components: { TctButton }, data() { return { buttonText: 'Click Me!', isDisabled: false }; }, methods: { handleClick(event) { console.log('TctButton clicked!', event); alert('Tecton Button was clicked!'); }, toggleDisable() { this.isDisabled = !this.isDisabled; if (this.isDisabled) { this.buttonText = 'Disabled'; } else { this.buttonText = 'Click Me!'; } } }, mounted() { console.log('TctButton instance:', this.$refs.myButton); } }); app.mount('#app');

Debug

Known issues

breakingThe Tecton system dropped support for Internet Explorer with version 1.0. Applications targeting IE11 or older browsers will no longer function as expected without significant polyfills or alternative strategies.

fix

Ensure target browser compatibility does not include Internet Explorer. Update your `browserslist` configuration to exclude IE.

affects: >=1.0.0

breakingAll events emitted by Tecton components were prefixed with `tct` starting from Tecton v1.65.0. This is a breaking change for existing event listeners.

fix

Update all event listeners for Tecton components to use the `tct` prefix (e.g., `tctClick` instead of `click`).

affects: >=1.65.0

gotchaCustom elements must be defined globally before framework wrappers can instantiate them. Forgetting to call `defineCustomElements()` or calling it too late will result in errors.

fix

Ensure `defineCustomElements()` from `q2-tecton-elements/loader` is called once, early in your application's lifecycle, typically before mounting your main framework application.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Uncaught (in promise): Error: A custom element with name 'tct-button' has already been defined.

Attempting to call `defineCustomElements()` multiple times, or importing the Tecton elements bundle more than once in a single execution context.

fix

Ensure `defineCustomElements()` is called only once in your application. Check for duplicate imports of Tecton element bundles or loaders.

[Vue warn]: Unknown custom element: <tct-button> - did you register the component correctly?

The underlying custom element `tct-button` was not registered before the Vue wrapper attempted to use it, or Vue is not configured to recognize custom elements.

fix

Call `defineCustomElements()` from `q2-tecton-elements/loader` at the application's entry point. For Vue, ensure `app.config.isCustomElement = (tag) => tag.startsWith('tct-')` is configured if you're not using the wrappers and interacting with raw web components.

Upgrade

Version history

1.66.0latest on npm

Audit

Dependencies

q2-tecton-elementsrequiredProvides the core Stencil web components that these wrappers integrate.

q2-tecton-commonrequiredProvides common types and utilities used across Tecton packages.

Agent activity

6 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/q2-tecton-framework-wrappers ↗

homepagehttps://www.q2.com ↗