open-index/open-npm huggingface dataset:
npm package: @lwc/babel-plugin-component
Description: Babel plugin to transform a LWC module
Latest version: 9.1.2

# @lwc/babel-plugin-component

## Summary

This babel plugin does the following transform:

- Global decorator transform:
    - Transform `@api` decorator to `publicProperties` and `publicMethods` static properties.
    - Transform `@wire` decorator to `wire` static property.
    - Transform `@track` decorator to `track` static property.
- LWC component class sugar syntax:
    - Check for misspelled lifecycle hooks.
    - Import and inject `render` from a collocated template if a component class doesn't already implement a `render` method.
- Optimization:
    - If the compiler inject the default template a component, it will also wire the template style to the component.

## Installation

    npm install babel @lwc/babel-plugin-component

## Usage

```js
import babel from '@babel/core';
import lwcPlugin from '@lwc/babel-plugin-component';

const source = `
import { LightningElement } from 'lwc';
export default class extends LightningElement {}`;

const { code } = babel.transformSync(source, {
    plugins: [
        [
            lwcPlugin,
            {
                /* options */
            },
        ],
    ],
});
```

## Options

- `name` (type: `string`, optional) - name of the component, e.g. `foo` in `x/foo`.
- `namespace` (type: `string`, optional) - namepace of the component, e.g. `x` in `x/foo`.
- `isExplicitImport` (type: `boolean`, optional) - true if this is an explicit import.
- `dynamicImports` (type: `object`, optional) - see below:
    - `loader` (type: `string`, optional) - loader to use at runtime.
    - `strictSpecifier` (type: `boolean`, optional) - true if a strict specifier should be used.
- `instrumentation` (type: `InstrumentationObject`, optional) - instrumentation object to gather metrics and non-error logs for internal use. See the `@lwc/errors` package for details on the interface.
- `apiVersion` (type: `number`, optional) - API version to associate with the compiled component.
npm package: @lwc/engine-dom
Description: Renders LWC components in a DOM environment.
Latest version: 9.1.2

# @lwc/engine-dom

This package can be used to render LWC components as DOM elements in a DOM environment.

## Supported APIs

This package supports the following APIs.

### createElement()

This function creates an LWC component, given a tag name and an LWC constructor.

```js
import { createElement } from 'lwc';
import LightningHello from 'lightning/hello';

const element = createElement('lightning-hello', { is: LightningHello });

document.body.appendChild(element);
```

## Experimental APIs

Experimental APIs are subject to change, may be removed at any time, and should be used at your
own risk!

### getComponentConstructor()

This experimental API provides access to the component constructor, given an `HTMLElement`.

### isNodeFromTemplate()

This experimental API enables the detection of whether a node was rendered from an LWC template.

## Deprecated APIs

### buildCustomElementConstructor() (deprecated as of v1.3.11)

This function can build a Web Component class that can be registered as a new element via
`customElements.define()`, given an LWC constructor.

Deprecated in favor of using the `CustomElementConstructor` property of an LWC constructor.

```js
import { LightningElement } from 'lwc';

class LightningHello extends LightningElement {}

// Don't do this.
customElements.define('lightning-hello', buildCustomElementConstructor(LightningHello));

// Do this instead.
customElements.define('lightning-hello', LightningHello.CustomElementConstructor);
```
npm package: @lwc/engine-server
Description: Renders LWC components in a server environment.
Latest version: 9.1.2

# @lwc/engine-server

⚠️ This package is deprecated and has been replaced by [`@lwc/ssr-compiler`](https://www.npmjs.com/package/@lwc/ssr-compiler) and [`@lwc/ssr-runtime`](https://www.npmjs.com/package/@lwc/ssr-compiler).

## Links

- [Server-Side Rendering guide](https://lwc.dev/guide/ssr)
npm package: @lwc/features
Description: LWC Features Flags
Latest version: 9.1.2

# @lwc/features

Runtime flags can be enabled or disabled by setting a boolean value for that
flag in `globalThis.lwcRuntimeFlags`, e.g.:

```js
lwcRuntimeFlags.ENABLE_SOME_FEATURE = true;
```

If the flag is not explicitly
set, the feature is disabled by default. The `lwcRuntimeFlags` object
must appear before the engine is initialized and should be defined at the
application layer.

Internally, LWC will reference runtime flags like so:

```js
if (lwcRuntimeFlags.ENABLE_SOME_FEATURE) {
    // etc.
}
```

This makes it possible for consumers to replace these flags at compile time, using something like [Rollup's `@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) or [ESBuild's `define`](https://esbuild.github.io/api/#define).

Note that `@lwc/features` is an internal package used by LWC and (most likely) should not be directly used by consumers.
npm package: @lwc/jest-transformer
Description: Jest transformer for LWC and engine
Latest version: 19.6.0

# @lwc/jest-transformer

Compile Lightning web components for [Jest](https://facebook.github.io/jest/) tests.

## About Jest Transformers

[Jest transformers](https://jestjs.io/docs/en/configuration#transform-object-string-string) modify source files in preparation for tests based on regular expressions. See Jest docs for more information.

The transformer modules in this package allow LWC developers to test components that reference `@salesforce` modules by transforming those `import` statements into assignment statements that work outside of a Salesforce application container.

## Installation

`yarn add -D @lwc/jest-transformer`

## Usage

Update your `jest` config to point the transformer to this package:

```json
{
    "jest": {
        "moduleFileExtensions": ["js", "html"],
        "transform": {
            "^.+\\.(js|html|css)$": "@lwc/jest-transformer"
        }
    }
}
```

### SSR Transformer

For SSR testing, use the new transformer `@lwc/jest-transformer/ssr`, which compiles components to generate the compiled artifact used for SSR rendering.
npm package: @lwc/signals
Description: Provides the interface to interact with reactivity from outside the framework
Latest version: 9.1.2

# @lwc/signals

This is an experimental package containing the interface expected for signals.

A key point to note is that when a signal is both bound to an LWC class member variable and used on a template,
the LWC engine will attempt to subscribe a callback to rerender the template.

## Reactivity with Signals

A Signal is an object that holds a value and allows components to react to changes to that value.
It exposes a `.value` property for accessing the current value, and `.subscribe` methods for responding to changes.

```js
import { signal } from 'some/signals';

export default class ExampleComponent extends LightningElement {
    count = signal(0);

    increment() {
        this.count.value++;
    }
}
```

In the template, we can bind directly to the `.value` property:

```html
<template>
    <button onclick="{increment}">Increment</button>
    <p>{count.value}</p>
</template>
```

## Supported APIs

This package supports the following APIs.

### Signal

This is the shape of the signal that the LWC engine expects.

```js
export type OnUpdate = () => void;
export type Unsubscribe = () => void;

export interface Signal<T> {
    get value(): T;
    subscribe(onUpdate: OnUpdate): Unsubscribe;
}
```

### SignalBaseClass

A base class is provided as a starting point for implementation.

```js
export abstract class SignalBaseClass<T> implements Signal<T> {
    abstract get value(): T;

    private subscribers: Set<OnUpdate> = new Set();

    subscribe(onUpdate: OnUpdate) {
        this.subscribers.add(onUpdate);
        return () => {
            this.subscribers.delete(onUpdate);
        };
    }

    protected notify() {
        for (const subscriber of this.subscribers) {
            subscriber();
        }
    }
}
```
npm package: @lwc/style-compiler
Description: Transform style sheet to be consumed by the LWC engine
Latest version: 9.1.2

# @lwc/style-compiler

Transform style sheet to be consumed by the LWC engine.

## Features

- Shadow DOM style scoping:
    - transform `:host` pseudo-class selectors
    - scope all the other selectors using CSS attribute selectors
- Custom Properties: inline replacement of `var()` CSS function
- Right-to-left: transform the `:dir` pseudo class selector to `[dir]` attribute selectors
- CSS import: resolve imports via static ES module imports

## Installation

```sh
yarn add --dev @lwc/style-compiler
```

## Usage

```js
import { transform } from '@lwc/style-compiler';

const source = `
    :host {
        opacity: 0.4;
    }

    span {
        text-transform: uppercase;
    }
`;

const { code } = transform(source, 'example.css');
```

### API

#### `transform(source, id, options)`

**Options:**

- `source` (string, required) - the css source file to compiler
- `id` (string, required) - the css source file path, used by the compiler to produce errors with the file name
- `options` (object, optional)
    - `customProperties` (object, optional)
        - `resolverModule` (boolean, optional) - module name for the custom properties resolve
    - `scoped` (boolean, optional) - true if the styles are scoped (via Light DOM style scoping)
    - `disableSyntheticShadowSupport` (boolean, optional) - true if synthetic shadow DOM support is not needed, which can result in smaller output
    - `apiVersion` (number, optional) - API version to associate with the compiled stylesheet.

**Return:**

- `code` - the generated code

Note: The LWC style compiler doesn't preserve the authored format, and always produce compressed code.

## Selector scoping caveats

- No support for [`::slotted`](https://drafts.csswg.org/css-scoping/#slotted-pseudo) pseudo-element.
- No support for [`>>>`](https://drafts.csswg.org/css-scoping/#deep-combinator) deep combinator (spec still under consideration: [issue](https://github.com/w3c/webcomponents/issues/78)).
- No support for [`:host-context`](https://drafts.csswg.org/css-scoping/#selectordef-host-context) pseudo-selector (browser vendors are not able to agree: [webkit](https://bugs.webkit.org/show_bug.cgi?id=160038), [gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=1082060))
- This transform duplicates the `:host` selector to able to use the generated style in both the synthetic and native shadow DOM. The duplication is necessary to support the functional form of `:host()`, `:host(.foo, .bar) {}` needs to get transformed into `.foo[x-btn-host], .bar[x-btn-host] {}` to work in the synthetic shadow DOM.
- Scoped CSS has a non-negligeable performance impact:
    - Each selector chain is scoped and each compound expression passed to the `:host()` need to be spread into multiple selectors. This transformation greatly increases the overall size and complexity of the generated CSS, leading to more bits on the wire, longer parsing time and longer style recalculation.
    - In order to ensure CSS encapsulation, each element needs to add an extra attribute. This increases the actual rendering time.
npm package: @lwc/synthetic-shadow
Description: Synthetic Shadow Root for LWC
Latest version: 9.1.2

# Synthetic Shadow Root

## Summary

This is a polyfill for ShadowRoot that was tailor-made for LWC in order to meet the performance goals of the Lightning Platform. This doesn't mean that it cannot be used with any other framework, but we took shortcuts and made compromises that might not align well with other frameworks.

## Compromises

- Default content for `<slot>` elements is always empty.
- `slotchange` is only available directly on the `<slot>` (it doesn't bubble as in the case of the native implementation). This restriction is in place because implementing `slotchange` requires using `MutationObserver` which is expensive at runtime. By only supporting `slotchange` event applied directly on the `<slot>` element, the LWC engine receives a clear signal that the component author is interested in listening to this event. This avoids spending unnecessary CPU time when the `slotchange` event is never consumed.
- If you use `MutationObserver` to watch changes in a DOM tree, disconnect it or you will cause a memory leak. Note that a component can observe mutations only in its own template. It can't observe mutations within the shadow tree of other custom elements.
npm package: @lwc/test-runner
Description: ## Getting started
Latest version: 1.3.1

# LWC Test Runner

## Getting started

Add `@lwc/test-runner` to your `devDependencies`. Invoke the command in `package.json` NPM `scripts` or use `npx`.

## Basic usage

### Test Runner

Similarly to the playground, the test runner should be run from the same directory as `lwc.config.json` or `package.json`. It is invoked like so:

```
npm install --save-dev @lwc/test-runner
npx test-lwcs SPEC_FILE_PATTERN
```

You may want to surround your `SPEC_FILE_PATTERN` in single quotes, depending on whether your shell automatically expands glob patterns (ZSH, for example).

To distinguish SSR-related tests from existing Jest tests, you will likely want each type of test to have its own distinct file extension. For example, if your Jest tests are named `COMPONENT_NAME.spec.js`, you may want to name your SSR-related test file `COMPONENT_NAME.spec.ssr.js`. If you did so, the command to run your tests might be:

```
npx test-lwcs './src/**/*.spec.ssr.js'
````
You can use --quiet tag to supress console logs on terminal.
```
npx test-lwcs './src/**/*.spec.ssr.js' --quiet
````

The available utilities within tests are very much in flux at this time, so there is no extensive documentation. However, there are four imports that are likely to get heavy use in your SSR-related tests:

```
import {
  expect,
  renderToMarkup,
  insertMarkupIntoDom,
  hydrateElement,
} from '@lwc/test-runner/test';
```

- `expect` comes from the Chai assertion library, and has some DOM- and Web Component- related plugins preinstalled.
- `renderToMarkup` is an async function that takes the path to your component and the props that should be used for rendering. It returns `Promise<String>` where the `String` is HTML markup.
- `insertMarkupIntoDom` is an async function that takes SSR markup (like that returned from `renderToMarkup`) as its singe argument. It returns `Promise<HtmlElement>`, which is a handle to the root element of your SSR-rendered DOM subtree.
- `hydrateElement` is an async function that takes a root `el` (like that returned from `insertMarkupIntoDom`) and component props (which should probably be the same as what was passed to `renderToMarkup`). It a `Promise<Boolean>`, where the `Boolean` indicates whether hydration completed without validation errors. In most cases, you'll want this `Boolean` value to be `true`.
npm package: @lwc/types
Description: This package provides type definitions for LWC projects written in TypeScript.
Latest version: 9.1.2

# @lwc/types

This package provides type definitions for LWC projects written in TypeScript.

## Usage

> [!IMPORTANT]
> If you use the `lwc` package in your project, then HTML and CSS imports will work without any configuration required.

To enable importing [templates](https://lwc.dev/guide/html_templates) or [stylesheets](https://lwc.dev/guide/css), simply import this package once, from anywhere in your project.

```ts
// ./types/global.d.ts
import '@lwc/types';

// my-component.ts
import stylesheet from './my-component.css';
import template from './my-component.html';
```

## Module Definitions

This package provides module definitions for HTML and CSS files, so that they can be imported in LWC component script files.
npm package: @lwc/wds-core
Description: This is an internal package and provides the foundations for LWC to interact with [Web Dev Server](https://modern-web.dev/docs/dev-server/) and [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).
Latest version: 1.3.3

### LWC Web Dev Server Core

This is an internal package and provides the foundations for LWC to interact with [Web Dev Server](https://modern-web.dev/docs/dev-server/) and [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/).
npm package: @lwc/wire-service
Description: @wire service
Latest version: 9.1.2

# Wire Service

This code is the implementation of the Lightning Web Component wire service. The wire service enables declarative binding of data providers called _wire adapters_ to a Lightning web component using the `@wire` decorator. It fulfills the goals of the [data service proposal](https://github.com/salesforce/lwc-rfcs/blob/master/text/0000-data-service.md).

## Summary

Wire adapters simply provide data. A wire adapter doesn't know anything about the components that it provides data to.

In a component, declare its data needs by using the `@wire` decorator to connect (or wire) it to a wire adapter. In this example, the component is wired to the `getBook` wire adapter. This declarative technique makes component code easy to read and reason about.

```js
// bookItem.js
import { LightningElement } from 'lwc';

export default class WireExample extends {
    @api bookId;

    @wire(getBook, { id: '$bookId'})
    book;
}
```

Wire adapters are part of LWC's reactivity system. An `@wire` takes the name of a wire adapter and an optional configuration object, which is specific to the wire adapter. You can use a `$` to mark the property of a configuration object as reactive. When a reactive property’s value changes, the wire adapter's `update` method executes with the new value. When the wire adapter provisions new data, the component rerenders if necessary.

```js
// wire-adapter.js
import { bookEndpoint } from './server';

export class getBook {
    connected = false;
    bookId;

    constructor(dataCallback) {
        this.dataCallback = dataCallback;
    }

    connect() {
        this.connected = true;
        this.provideBookWithId(this.bookId);
    }

    disconnect() {
        this.connected = false;
    }

    update(config) {
        if (this.bookId !== config.id) {
            this.bookId = config.id;
            this.provideBookWithId(this.bookId);
        }
    }

    provideBookWithId(id) {
        if (this.connected && this.bookId !== undefined) {
            const book = bookEndpoint.getById(id);

            if (book) {
                this.dataCallback(Object.assign({}, book));
            } else {
                this.dataCallback(null);
            }
        }
    }
}
```

## Syntax

For complete information about syntax, see [lwc.dev/guide/wire_adapter](https://lwc.dev/guide/wire_adapter#wire-adapters).

## Implementation Example

The RCast App is a PWA podcast player written with Lightning Web Components.

https://github.com/pmdartus/rcast
npm package: @lwc2828/shared
Description: IP开发平台共享类型定义
Latest version: 1.0.0

# @ip-dev/shared

IP 开发平台共享类型定义和 API 客户端 SDK。

## 安装

```bash
npm install @ip-dev/shared
# 或
pnpm add @ip-dev/shared
```

## 类型使用

```typescript
import type { User, Project, Character, Task, TaskType } from '@ip-dev/shared';

// 使用类型
const user: User = {
  id: '123',
  username: 'test',
  role: 'user',
  created_at: new Date().toISOString(),
};
```

## API 客户端使用

```typescript
import { apiClient, userAPI, projectAPI, taskAPI } from '@ip-dev/shared';

// 设置 API Key
apiClient.setApiKey('your-api-key');

// 获取当前用户
const user = await userAPI.me();

// 创建项目
const project = await projectAPI.create({
  name: '我的IP项目',
  fruit_type: '龙眼',
  target_audience: '儿童',
  style: 'cute',
});

// 创建任务并轮询
const task = await taskAPI.create({
  task_type: 'generate_3d',
  params: { prompt: 'a cute dragon' },
});

// 轮询直到完成
const result = await taskAPI.poll(task.id, (t) => {
  console.log(`进度: ${t.status}`);
});
```

## 发布新版本

```bash
# 1. 更新版本号
npm version patch  # 1.0.0 -> 1.0.1
npm version minor  # 1.0.0 -> 1.1.0
npm version major  # 1.0.0 -> 2.0.0

# 2. 构建
npm run build

# 3. 发布到 npm
npm publish
```

## 目录结构

```
shared/
├── src/
│   ├── types/          # 类型定义
│   │   └── index.ts
│   ├── api-client/     # API 客户端
│   │   └── index.ts
│   └── index.ts        # 统一导出
├── package.json
├── tsconfig.json
└── README.md
```
npm package: @lwcdemo/ui-components
Description: This package contains some sample lwc components for demos
Author: Kevin Hill
Latest version: 0.0.1

# Overview

This project is a collection of sample components I use to build demonstrations of LWC components.

`npm i @greatgatsby/ui-components --save-dev`

# List of components

* ui-greeting - this is a simple greeting component that animates through hello in serveral languages
* ui-bootstrap-button - this is a bootstrap button that supports btn-label, and btn-type (e.g. primary, secondary, danger, info, etc.)