@rindo/kdu-output-target NPM

@rindo/kdu-output-target

Rindo can generate Kdu component wrappers for your web components. This allows your Rindo components to be used within a Kdu application.

For a detailed guide on how to add the kdu output target to a project, visit: https://rindojs.web.app/docs/kdu.

Installation

npm install @rindo/kdu-output-target

Usage

In your rindo.config.ts add the following configuration to the outputTargets section:

import { Config } from '@rindo/core';
import { kduOutputTarget } from '@rindo/kdu-output-target';

export const config: Config = {
  namespace: 'demo',
  outputTargets: [
    kduOutputTarget({
      componentCorePackage: 'component-library',
      proxiesFile: '../component-library-kdu/src/components.ts',
    }),
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
  ],
};

Config Options

Property	Description
`componentCorePackage`	The NPM package name of your Rindo component library. This package is used as a dependency for your Kdu wrappers.
`proxiesFile`	The output file of all the component wrappers generated by the output target. This file path should point to a location within your Kdu library/project.
`excludeComponents`	An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.
`componentModels`	This is an array of `ComponentModelConfig` objects for components that should be integrated with `k-model`.
`loaderDir`	This is the path to where the `defineCustomElements` function exists in your built project. If `loaderDir` is not provided, the `/dist/loader` directory will be used.
`includePolyfills`	If `true`, polyfills will automatically be imported and the `applyPolyfills` function will be called in your proxies file. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
`includeDefineCustomElements`	If `true`, all Web Components will automatically be registered with the Custom Elements Registry. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
`includeImportCustomElements`	If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the Custom Elements Bundle and will not work with lazy loaded components.
`customElementsDir`	This is the directory where the custom elements are imported from when using the Custom Elements Bundle. Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.

Interfaces

ComponentModelConfig

The interface used for componentModels.

export interface ComponentModelConfig {
  /**
   * An array of element names that
   * should have k-model integration.
   */
  elements: string | string[];

  /**
   * The event emitted from the Web Component
   * that should trigger a `k-model` update.
   */
  event: string;

  /**
   * The Web Component property that the value
   * of the `k-model` reference is based off.
   */
  targetAttr: string;

  /**
   * (optional) The event to emit from the Kdu component
   * wrapper. When listening directly to the `event` emitted
   * from the Web Component, the `k-model` reference has not
   * yet had a chance to update. By setting `externalEvent`,
   * your Web Component can emit `event`, the Kdu output target
   * can update the `k-model` reference, and then emit `externalEvent`,
   * notifying the end user that `k-model` has changed. Defaults to `event`.
   */
  externalEvent?: string;
}

Example usage within rindo.config.ts:

kduOutputTarget({
  ...,
  componentModels: [
    {
      elements: ['my-input', 'my-textarea'],
      event: 'k-on-change',
      externalEvent: 'on-change',
      targetAttr: 'value'
    }
  ]
})

@everything-registry/sub-chunk-782 @zalastax/nolb-_rin

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago