@stencil/vue-output-target - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1-0

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.6.0",
+  "version": "0.6.1-0",
   "description": "Vue output target for @stencil/core components.",
@@ -16,2 +16,3 @@ "main": "dist/index.cjs.js",
   "scripts": {
+    "prepublishOnly": "npm run build",
     "prebuild": "rimraf ./dist",
@@ -18,0 +19,0 @@ "build": "tsc && npm run rollup",

README.md

 # @stencil/vue-output-target
 
-This is an output plugin for stencil.
+Stencil can generate Vue component wrappers for your web components. This allows your Stencil components to be used within a Vue application.
+
+For a detailed guide on how to add the vue output target to a project, visit: https://stenciljs.com/docs/vue.
+
+## Installation
+
+```bash
+npm install @stencil/vue-output-target
+```
+
+### Usage
+
+In your `stencil.config.ts` add the following configuration to the `outputTargets` section:
+
+```ts
+import { Config } from '@stencil/core';
+import { vueOutputTarget } from '@stencil/vue-output-target';
+
+export const config: Config = {
+  namespace: 'demo',
+  outputTargets: [
+    vueOutputTarget({
+      componentCorePackage: 'component-library',
+      proxiesFile: '../component-library-vue/src/components.ts',
+    }),
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+    },
+  ],
+};
+```
+
+## Config Options
+
+| Property                      | Description                                                                                                                                                                                                                                                                                                                      |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `componentCorePackage`        | The NPM package name of your Stencil component library. This package is used as a dependency for your Vue 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 Vue 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 `v-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](https://stenciljs.com/docs/custom-elements) 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](https://stenciljs.com/docs/custom-elements). Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.                                                                        |
+
+## Interfaces
+
+### ComponentModelConfig
+
+The interface used for `componentModels`.
+
+```typescript
+export interface ComponentModelConfig {
+  /**
+   * An array of element names that
+   * should have v-model integration.
+   */
+  elements: string | string[];
+
+  /**
+   * The event emitted from the Web Component
+   * that should trigger a `v-model` update.
+   */
+  event: string;
+
+  /**
+   * The Web Component property that the value
+   * of the `v-model` reference is based off.
+   */
+  targetAttr: string;
+
+  /**
+   * (optional) The event to emit from the Vue component
+   * wrapper. When listening directly to the `event` emitted
+   * from the Web Component, the `v-model` reference has not
+   * yet had a chance to update. By setting `externalEvent`,
+   * your Web Component can emit `event`, the Vue output target
+   * can update the `v-model` reference, and then emit `externalEvent`,
+   * notifying the end user that `v-model` has changed. Defaults to `event`.
+   */
+  externalEvent?: string;
+}
+```
+
+Example usage within `stencil.config.ts`:
+
+```typescript
+vueOutputTarget({
+  ...,
+  componentModels: [
+    {
+      elements: ['my-input', 'my-textarea'],
+      event: 'v-on-change',
+      externalEvent: 'on-change',
+      targetAttr: 'value'
+    }
+  ]
+})
+```

vue-component-lib/utils.ts

 import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
-export interface InputProps extends Object {
-  modelValue: string | boolean;
+export interface InputProps {
+  modelValue?: string | boolean;
 }
@@ -6,0 +6,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54450

increased by12.45%

Number of lines in readme file

104

increased by2500%

No dependency changes