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

Comparing version 0.6.0 to 0.6.1-dev.11648179954.1c2dc085

dist/index.cjs.js

@@ -14,3 +14,3 @@ 'use strict';
 
-const readFile = util.promisify(fs__default['default'].readFile);
+const readFile = util.promisify(fs__default["default"].readFile);
 const toLowerCase = (str) => str.toLowerCase();
@@ -60,3 +60,3 @@ const dashToPascalCase = (str) => toLowerCase(str)
 function relativeImport(pathFrom, pathTo, ext) {
-    let relativePath = path__default['default'].relative(path__default['default'].dirname(pathFrom), path__default['default'].dirname(pathTo));
+    let relativePath = path__default["default"].relative(path__default["default"].dirname(pathFrom), path__default["default"].dirname(pathTo));
     if (relativePath === '') {
@@ -68,6 +68,6 @@ relativePath = '.';
     }
-    return normalizePath(`${relativePath}/${path__default['default'].basename(pathTo, ext)}`);
+    return normalizePath(`${relativePath}/${path__default["default"].basename(pathTo, ext)}`);
 }
 async function readPackageJson(rootDir) {
-    const pkgJsonPath = path__default['default'].join(rootDir, 'package.json');
+    const pkgJsonPath = path__default["default"].join(rootDir, 'package.json');
     let pkgJson;
@@ -160,4 +160,4 @@ try {
 function generateProxies(config, components, pkgData, outputTarget, rootDir) {
-    const distTypesDir = path__default['default'].dirname(pkgData.types);
-    const dtsFilePath = path__default['default'].join(rootDir, distTypesDir, GENERATED_DTS);
+    const distTypesDir = path__default["default"].dirname(pkgData.types);
+    const dtsFilePath = path__default["default"].join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.proxiesFile, dtsFilePath, '.d.ts');
@@ -210,4 +210,4 @@ const pathToCorePackageLoader = getPathToCorePackageLoader(config, outputTarget);
     }
-    const srcDirectory = path__default['default'].join(__dirname, '..', 'vue-component-lib');
-    const destDirectory = path__default['default'].join(path__default['default'].dirname(outputTarget.proxiesFile), 'vue-component-lib');
+    const srcDirectory = path__default["default"].join(__dirname, '..', 'vue-component-lib');
+    const destDirectory = path__default["default"].join(path__default["default"].dirname(outputTarget.proxiesFile), 'vue-component-lib');
     return config.sys.copy([
@@ -226,10 +226,10 @@ {
     const distOutputTarget = (_a = config.outputTargets) === null || _a === void 0 ? void 0 : _a.find((o) => o.type === 'dist');
-    const distAbsEsmLoaderPath = (distOutputTarget === null || distOutputTarget === void 0 ? void 0 : distOutputTarget.esmLoaderPath) && path__default['default'].isAbsolute(distOutputTarget.esmLoaderPath)
+    const distAbsEsmLoaderPath = (distOutputTarget === null || distOutputTarget === void 0 ? void 0 : distOutputTarget.esmLoaderPath) && path__default["default"].isAbsolute(distOutputTarget.esmLoaderPath)
         ? distOutputTarget.esmLoaderPath
         : null;
     const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath
-        ? path__default['default'].relative(config.rootDir, distAbsEsmLoaderPath)
+        ? path__default["default"].relative(config.rootDir, distAbsEsmLoaderPath)
         : null;
     const loaderDir = outputTarget.loaderDir || distRelEsmLoaderPath || DEFAULT_LOADER_DIR;
-    return normalizePath(path__default['default'].join(basePkg, loaderDir));
+    return normalizePath(path__default["default"].join(basePkg, loaderDir));
 }
@@ -269,4 +269,4 @@ const GENERATED_DTS = 'components.d.ts';
     }
-    if (outputTarget.directivesProxyFile && !path__default['default'].isAbsolute(outputTarget.directivesProxyFile)) {
-        results.proxiesFile = normalizePath(path__default['default'].join(config.rootDir, outputTarget.proxiesFile));
+    if (outputTarget.directivesProxyFile && !path__default["default"].isAbsolute(outputTarget.directivesProxyFile)) {
+        results.proxiesFile = normalizePath(path__default["default"].join(config.rootDir, outputTarget.proxiesFile));
     }
@@ -273,0 +273,0 @@ return results;

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.6.0",
+  "version": "0.6.1-dev.11648179954.1c2dc085",
   "description": "Vue output target for @stencil/core components.",
@@ -51,3 +51,3 @@ "main": "dist/index.cjs.js",
   },
-  "gitHead": "a3588e905186a0e86e7f88418fd5b2f9531b55e0"
+  "gitHead": "c2dc0854544b1f52ec973beb30f63acd49193cfe"
 }

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;
+  modelValue?: string | boolean;
 }
@@ -6,0 +6,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54449

increased by12.45%

Number of lines in readme file

104

increased by2500%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes