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

Comparing version 0.0.1-dev.11728078825.10143da0 to 0.0.1-dev.11729028168.122837bc

dist/generate-vue-component.d.ts

 import { ComponentCompilerMeta } from '@stencil/core/internal';
-import { ComponentModelConfig } from './types';
-export declare const createComponentDefinition: (importTypes: string, componentModelConfig: ComponentModelConfig[] | undefined, includeCustomElement?: boolean) => (cmpMeta: Pick<ComponentCompilerMeta, 'properties' | 'tagName' | 'methods' | 'events'>) => string;
+import { OutputTargetVue } from './types';
+export declare const createComponentDefinition: (importTypes: string, outputTarget: OutputTargetVue) => (cmpMeta: Pick<ComponentCompilerMeta, 'properties' | 'tagName' | 'methods' | 'events'>) => string;

dist/index.cjs.js

 'use strict';
 
-var path = require('path');
-var util = require('util');
-var fs = require('fs');
+var path = require('node:path');
+var fs = require('node:fs/promises');
+var path$1 = require('path');
 
-const readFile = util.promisify(fs.readFile);
-const toLowerCase = (str) => str.toLowerCase();
-const dashToPascalCase = (str) => toLowerCase(str)
+const dashToPascalCase = (str) => str
+    .toLowerCase()
     .split('-')
@@ -65,3 +64,3 @@ .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
     try {
-        pkgJson = await readFile(pkgJsonPath, 'utf8');
+        pkgJson = await fs.readFile(pkgJsonPath, 'utf8');
     }
@@ -84,17 +83,43 @@ catch (e) {
 
-const createComponentDefinition = (importTypes, componentModelConfig, includeCustomElement = false) => (cmpMeta) => {
+const createComponentDefinition = (importTypes, outputTarget) => (cmpMeta) => {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = includeCustomElement ? 'define' + tagNameAsPascal : 'undefined';
+    const importAs = outputTarget.includeImportCustomElements ? 'define' + tagNameAsPascal : 'undefined';
     let props = [];
+    let propMap = {};
     if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
         props = cmpMeta.properties.map((prop) => `'${prop.name}'`);
+        cmpMeta.properties.forEach((prop) => {
+            if (['boolean', 'string', 'number'].includes(prop.type)) {
+                propMap[prop.name] = [prop.type[0].toUpperCase() + prop.type.slice(1), prop.attribute];
+            }
+        });
     }
     if (Array.isArray(cmpMeta.events) && cmpMeta.events.length > 0) {
         props = [...props, ...cmpMeta.events.map((event) => `'${event.name}'`)];
+        cmpMeta.events.forEach((event) => {
+            const handlerName = `on${event.name[0].toUpperCase() + event.name.slice(1)}`;
+            propMap[handlerName] = ['Function', undefined];
+        });
     }
     const componentType = `${importTypes}.${tagNameAsPascal}`;
-    const findModel = componentModelConfig && componentModelConfig.find((config) => config.elements.includes(cmpMeta.tagName));
+    const findModel = outputTarget.componentModels?.find((config) => config.elements.includes(cmpMeta.tagName));
     const modelType = findModel !== undefined ? `, ${componentType}["${findModel.targetAttr}"]` : '';
+    const supportSSR = typeof outputTarget.hydrateModule === 'string';
+    const ssrTernary = supportSSR ? ' globalThis.window ? ' : ' ';
+    const ssrCondition = supportSSR
+        ? ` : defineStencilSSRComponent({
+  tagName: '${cmpMeta.tagName}',
+  hydrateModule: import('${outputTarget.hydrateModule}'),
+  props: {
+    ${Object.entries(propMap)
+            .map(([key, [type, attr]]) => (attr ? `'${key}': [${type}, "${attr}"]` : `'${key}': [${type}]`))
+            .join(',\n    ')}
+  }
+})`
+        : '';
+    // tagName: string;
+    // hydrateModule: Promise<{ renderToString: RenderToString }>;
+    // props?: Record<string, any>;
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;
+export const ${tagNameAsPascal} = /*@__PURE__*/${ssrTernary}defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;
     if (props.length > 0) {
@@ -132,3 +157,3 @@ templateString += `, [
     }
-    templateString += `);\n`;
+    templateString += `)${ssrCondition};\n`;
     return templateString;
@@ -143,3 +168,2 @@ };
     await compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText);
-    await copyResources(config, outputTarget);
 }
@@ -150,10 +174,14 @@ function getFilteredComponents(excludeComponents = [], cmps) {
 function generateProxies(config, components, pkgData, outputTarget, rootDir) {
-    const distTypesDir = path.dirname(pkgData.types);
-    const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
+    const distTypesDir = path$1.dirname(pkgData.types);
+    const dtsFilePath = path$1.join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.proxiesFile, dtsFilePath, '.d.ts');
     const pathToCorePackageLoader = getPathToCorePackageLoader(config, outputTarget);
+    const importKeys = [
+        'defineContainer',
+        typeof outputTarget.hydrateModule === 'string' ? 'defineStencilSSRComponent' : undefined,
+    ].filter(Boolean);
     const imports = `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';\n`;
+import { ${importKeys.join(', ')} } from '@stencil/vue-output-target/runtime';\n`;
     const generateTypeImports = () => {
@@ -191,33 +219,15 @@ if (outputTarget.componentCorePackage !== undefined) {
         registerCustomElements,
-        components
-            .map(createComponentDefinition(IMPORT_TYPES, outputTarget.componentModels, outputTarget.includeImportCustomElements))
-            .join('\n'),
+        components.map(createComponentDefinition(IMPORT_TYPES, outputTarget)).join('\n'),
     ];
     return final.join('\n') + '\n';
 }
-async function copyResources(config, outputTarget) {
-    if (!config.sys || !config.sys.copy || !config.sys.glob) {
-        throw new Error('stencil is not properly initialized at this step. Notify the developer');
-    }
-    const srcDirectory = path.join(__dirname, '..', 'vue-component-lib');
-    const destDirectory = path.join(path.dirname(outputTarget.proxiesFile), 'vue-component-lib');
-    return config.sys.copy([
-        {
-            src: srcDirectory,
-            dest: destDirectory,
-            keepDirStructure: false,
-            warn: false,
-        },
-    ], srcDirectory);
-}
 function getPathToCorePackageLoader(config, outputTarget) {
-    var _a;
     const basePkg = outputTarget.componentCorePackage || '';
-    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.isAbsolute(distOutputTarget.esmLoaderPath)
+    const distOutputTarget = config.outputTargets?.find((o) => o.type === 'dist');
+    const distAbsEsmLoaderPath = distOutputTarget?.esmLoaderPath && path$1.isAbsolute(distOutputTarget.esmLoaderPath)
         ? distOutputTarget.esmLoaderPath
         : null;
-    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath ? path.relative(config.rootDir, distAbsEsmLoaderPath) : null;
+    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath ? path$1.relative(config.rootDir, distAbsEsmLoaderPath) : null;
     const loaderDir = outputTarget.loaderDir || distRelEsmLoaderPath || DEFAULT_LOADER_DIR;
-    return normalizePath(path.join(basePkg, loaderDir));
+    return normalizePath(path$1.join(basePkg, loaderDir));
 }
@@ -243,4 +253,9 @@ const GENERATED_DTS = 'components.d.ts';
 function normalizeOutputTarget(config, outputTarget) {
-    var _a, _b;
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], componentModels: outputTarget.componentModels || [], includePolyfills: (_a = outputTarget.includePolyfills) !== null && _a !== void 0 ? _a : true, includeDefineCustomElements: (_b = outputTarget.includeDefineCustomElements) !== null && _b !== void 0 ? _b : true });
+    const results = {
+        ...outputTarget,
+        excludeComponents: outputTarget.excludeComponents || [],
+        componentModels: outputTarget.componentModels || [],
+        includePolyfills: outputTarget.includePolyfills ?? true,
+        includeDefineCustomElements: outputTarget.includeDefineCustomElements ?? true,
+    };
     if (config.rootDir == null) {
@@ -255,7 +270,15 @@ throw new Error('rootDir is not set and it should be set by stencil itself');
     }
+    if (typeof outputTarget.includeDefineCustomElements === 'boolean' &&
+        !outputTarget.includeDefineCustomElements &&
+        typeof outputTarget.includeImportCustomElements === 'boolean' &&
+        !outputTarget.includeImportCustomElements) {
+        throw new Error('`includeDefineCustomElements` and `includeImportCustomElements` cannot both be set to `false`!\n\n' +
+            'Enable one of the options depending whether you would like to lazy load the Stencil components (includeDefineCustomElements: true) or ' +
+            'include all component code within your application bundle and have the bundler lazy load the chunks (includeImportCustomElements: true).');
+    }
     if (outputTarget.includeImportCustomElements && outputTarget.includePolyfills) {
         throw new Error('includePolyfills cannot be used at the same time as includeImportCustomElements. Set `includePolyfills: false` in your Vue output target config to resolve this.');
     }
-    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
-        results.proxiesFile = normalizePath(path.join(config.rootDir, outputTarget.proxiesFile));
+    if (outputTarget.directivesProxyFile && !path$1.isAbsolute(outputTarget.directivesProxyFile)) {
+        results.proxiesFile = normalizePath(path$1.join(config.rootDir, outputTarget.proxiesFile));
     }
@@ -262,0 +285,0 @@ return results;

dist/index.js

@@ -1,8 +0,7 @@
-import path from 'path';
-import { promisify } from 'util';
-import fs from 'fs';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import path$1 from 'path';
 
-const readFile = promisify(fs.readFile);
-const toLowerCase = (str) => str.toLowerCase();
-const dashToPascalCase = (str) => toLowerCase(str)
+const dashToPascalCase = (str) => str
+    .toLowerCase()
     .split('-')
@@ -63,3 +62,3 @@ .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
     try {
-        pkgJson = await readFile(pkgJsonPath, 'utf8');
+        pkgJson = await fs.readFile(pkgJsonPath, 'utf8');
     }
@@ -82,17 +81,43 @@ catch (e) {
 
-const createComponentDefinition = (importTypes, componentModelConfig, includeCustomElement = false) => (cmpMeta) => {
+const createComponentDefinition = (importTypes, outputTarget) => (cmpMeta) => {
     const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-    const importAs = includeCustomElement ? 'define' + tagNameAsPascal : 'undefined';
+    const importAs = outputTarget.includeImportCustomElements ? 'define' + tagNameAsPascal : 'undefined';
     let props = [];
+    let propMap = {};
     if (Array.isArray(cmpMeta.properties) && cmpMeta.properties.length > 0) {
         props = cmpMeta.properties.map((prop) => `'${prop.name}'`);
+        cmpMeta.properties.forEach((prop) => {
+            if (['boolean', 'string', 'number'].includes(prop.type)) {
+                propMap[prop.name] = [prop.type[0].toUpperCase() + prop.type.slice(1), prop.attribute];
+            }
+        });
     }
     if (Array.isArray(cmpMeta.events) && cmpMeta.events.length > 0) {
         props = [...props, ...cmpMeta.events.map((event) => `'${event.name}'`)];
+        cmpMeta.events.forEach((event) => {
+            const handlerName = `on${event.name[0].toUpperCase() + event.name.slice(1)}`;
+            propMap[handlerName] = ['Function', undefined];
+        });
     }
     const componentType = `${importTypes}.${tagNameAsPascal}`;
-    const findModel = componentModelConfig && componentModelConfig.find((config) => config.elements.includes(cmpMeta.tagName));
+    const findModel = outputTarget.componentModels?.find((config) => config.elements.includes(cmpMeta.tagName));
     const modelType = findModel !== undefined ? `, ${componentType}["${findModel.targetAttr}"]` : '';
+    const supportSSR = typeof outputTarget.hydrateModule === 'string';
+    const ssrTernary = supportSSR ? ' globalThis.window ? ' : ' ';
+    const ssrCondition = supportSSR
+        ? ` : defineStencilSSRComponent({
+  tagName: '${cmpMeta.tagName}',
+  hydrateModule: import('${outputTarget.hydrateModule}'),
+  props: {
+    ${Object.entries(propMap)
+            .map(([key, [type, attr]]) => (attr ? `'${key}': [${type}, "${attr}"]` : `'${key}': [${type}]`))
+            .join(',\n    ')}
+  }
+})`
+        : '';
+    // tagName: string;
+    // hydrateModule: Promise<{ renderToString: RenderToString }>;
+    // props?: Record<string, any>;
     let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;
+export const ${tagNameAsPascal} = /*@__PURE__*/${ssrTernary}defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;
     if (props.length > 0) {
@@ -130,3 +155,3 @@ templateString += `, [
     }
-    templateString += `);\n`;
+    templateString += `)${ssrCondition};\n`;
     return templateString;
@@ -141,3 +166,2 @@ };
     await compilerCtx.fs.writeFile(outputTarget.proxiesFile, finalText);
-    await copyResources(config, outputTarget);
 }
@@ -148,10 +172,14 @@ function getFilteredComponents(excludeComponents = [], cmps) {
 function generateProxies(config, components, pkgData, outputTarget, rootDir) {
-    const distTypesDir = path.dirname(pkgData.types);
-    const dtsFilePath = path.join(rootDir, distTypesDir, GENERATED_DTS);
+    const distTypesDir = path$1.dirname(pkgData.types);
+    const dtsFilePath = path$1.join(rootDir, distTypesDir, GENERATED_DTS);
     const componentsTypeFile = relativeImport(outputTarget.proxiesFile, dtsFilePath, '.d.ts');
     const pathToCorePackageLoader = getPathToCorePackageLoader(config, outputTarget);
+    const importKeys = [
+        'defineContainer',
+        typeof outputTarget.hydrateModule === 'string' ? 'defineStencilSSRComponent' : undefined,
+    ].filter(Boolean);
     const imports = `/* eslint-disable */
 /* tslint:disable */
 /* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';\n`;
+import { ${importKeys.join(', ')} } from '@stencil/vue-output-target/runtime';\n`;
     const generateTypeImports = () => {
@@ -189,33 +217,15 @@ if (outputTarget.componentCorePackage !== undefined) {
         registerCustomElements,
-        components
-            .map(createComponentDefinition(IMPORT_TYPES, outputTarget.componentModels, outputTarget.includeImportCustomElements))
-            .join('\n'),
+        components.map(createComponentDefinition(IMPORT_TYPES, outputTarget)).join('\n'),
     ];
     return final.join('\n') + '\n';
 }
-async function copyResources(config, outputTarget) {
-    if (!config.sys || !config.sys.copy || !config.sys.glob) {
-        throw new Error('stencil is not properly initialized at this step. Notify the developer');
-    }
-    const srcDirectory = path.join(__dirname, '..', 'vue-component-lib');
-    const destDirectory = path.join(path.dirname(outputTarget.proxiesFile), 'vue-component-lib');
-    return config.sys.copy([
-        {
-            src: srcDirectory,
-            dest: destDirectory,
-            keepDirStructure: false,
-            warn: false,
-        },
-    ], srcDirectory);
-}
 function getPathToCorePackageLoader(config, outputTarget) {
-    var _a;
     const basePkg = outputTarget.componentCorePackage || '';
-    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.isAbsolute(distOutputTarget.esmLoaderPath)
+    const distOutputTarget = config.outputTargets?.find((o) => o.type === 'dist');
+    const distAbsEsmLoaderPath = distOutputTarget?.esmLoaderPath && path$1.isAbsolute(distOutputTarget.esmLoaderPath)
         ? distOutputTarget.esmLoaderPath
         : null;
-    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath ? path.relative(config.rootDir, distAbsEsmLoaderPath) : null;
+    const distRelEsmLoaderPath = config.rootDir && distAbsEsmLoaderPath ? path$1.relative(config.rootDir, distAbsEsmLoaderPath) : null;
     const loaderDir = outputTarget.loaderDir || distRelEsmLoaderPath || DEFAULT_LOADER_DIR;
-    return normalizePath(path.join(basePkg, loaderDir));
+    return normalizePath(path$1.join(basePkg, loaderDir));
 }
@@ -241,4 +251,9 @@ const GENERATED_DTS = 'components.d.ts';
 function normalizeOutputTarget(config, outputTarget) {
-    var _a, _b;
-    const results = Object.assign(Object.assign({}, outputTarget), { excludeComponents: outputTarget.excludeComponents || [], componentModels: outputTarget.componentModels || [], includePolyfills: (_a = outputTarget.includePolyfills) !== null && _a !== void 0 ? _a : true, includeDefineCustomElements: (_b = outputTarget.includeDefineCustomElements) !== null && _b !== void 0 ? _b : true });
+    const results = {
+        ...outputTarget,
+        excludeComponents: outputTarget.excludeComponents || [],
+        componentModels: outputTarget.componentModels || [],
+        includePolyfills: outputTarget.includePolyfills ?? true,
+        includeDefineCustomElements: outputTarget.includeDefineCustomElements ?? true,
+    };
     if (config.rootDir == null) {
@@ -253,7 +268,15 @@ throw new Error('rootDir is not set and it should be set by stencil itself');
     }
+    if (typeof outputTarget.includeDefineCustomElements === 'boolean' &&
+        !outputTarget.includeDefineCustomElements &&
+        typeof outputTarget.includeImportCustomElements === 'boolean' &&
+        !outputTarget.includeImportCustomElements) {
+        throw new Error('`includeDefineCustomElements` and `includeImportCustomElements` cannot both be set to `false`!\n\n' +
+            'Enable one of the options depending whether you would like to lazy load the Stencil components (includeDefineCustomElements: true) or ' +
+            'include all component code within your application bundle and have the bundler lazy load the chunks (includeImportCustomElements: true).');
+    }
     if (outputTarget.includeImportCustomElements && outputTarget.includePolyfills) {
         throw new Error('includePolyfills cannot be used at the same time as includeImportCustomElements. Set `includePolyfills: false` in your Vue output target config to resolve this.');
     }
-    if (outputTarget.directivesProxyFile && !path.isAbsolute(outputTarget.directivesProxyFile)) {
-        results.proxiesFile = normalizePath(path.join(config.rootDir, outputTarget.proxiesFile));
+    if (outputTarget.directivesProxyFile && !path$1.isAbsolute(outputTarget.directivesProxyFile)) {
+        results.proxiesFile = normalizePath(path$1.join(config.rootDir, outputTarget.proxiesFile));
     }
@@ -260,0 +283,0 @@ return results;

dist/types.d.ts

@@ -0,11 +1,64 @@
+/**
+ * Options for the Vue Output Target
+ */
 export interface OutputTargetVue {
+    /**
+     * The NPM package name of your Stencil component library.
+     * This package is used as a dependency for your Vue wrappers.
+     */
     componentCorePackage?: string;
+    /**
+     * 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.
+     */
     proxiesFile: string;
+    /**
+     * 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.
+     */
     excludeComponents?: string[];
+    /**
+     * This is an array of `ComponentModelConfig` objects for components that
+     * should be integrated with `v-model`.
+     */
     componentModels?: ComponentModelConfig[];
+    /**
+     * 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.
+     */
     loaderDir?: string;
+    /**
+     * 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`.
+     */
     includePolyfills?: boolean;
+    /**
+     * 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`.
+     */
     includeDefineCustomElements?: boolean;
+    /**
+     * 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.
+     */
     includeImportCustomElements?: boolean;
+    /**
+     * 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`.
+     */
     customElementsDir?: string;
+    /**
+     * To enable server side rendering, provide the path to the hydrate module, e.g. `my-component/hydrate`.
+     * By default this value is undefined and server side rendering is disabled.
+     */
+    hydrateModule?: string;
 }
@@ -20,1 +73,8 @@ export interface ComponentModelConfig {
 }
+/**
+ * This is needed as Vue references this type but can't find it for unknown reason.
+ */
+declare global {
+    interface ToggleEvent {
+    }
+}

dist/utils.d.ts

 import type { PackageJSON } from './types';
-export declare const toLowerCase: (str: string) => string;
 export declare const dashToPascalCase: (str: string) => string;
@@ -4,0 +3,0 @@ export declare function sortBy<T>(array: T[], prop: (item: T) => string): T[];

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.0.1-dev.11728078825.10143da0",
+  "version": "0.0.1-dev.11729028168.122837bc",
   "description": "Vue output target for @stencil/core components.",
+  "author": "Ionic Team",
+  "homepage": "https://stenciljs.com/",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ionic-team/stencil-ds-output-targets.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.js",
+      "require": "./dist/runtime.cjs.js"
+    }
+  },
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist/",
-    "vue-component-lib/"
-  ],
   "publishConfig": {
@@ -18,6 +36,4 @@ "access": "public"
     "prebuild": "rimraf ./dist",
-    "build": "tsc && pnpm run rollup",
-    "watch": "tsc --watch",
-    "rollup": "rollup -c",
-    "version": "pnpm run build",
+    "build": "rollup -c ./rollup.config.mjs",
+    "dev": "pnpm run build --watch",
     "prettier": "pnpm run prettier.base --write",
@@ -27,39 +43,25 @@ "prettier.base": "prettier \"./({vue-component-lib,src,test,__tests__}/**/*.{ts,tsx,js,jsx})|*.{ts,tsx,js,jsx}\"",
     "release": "np",
-    "test": "jest"
+    "test": "vitest --run"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ionic-team/stencil-ds-output-targets.git"
+  "peerDependencies": {
+    "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0",
+    "vue": "^3.4.38"
   },
-  "author": "Ionic Team",
-  "homepage": "https://stenciljs.com/",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": false
+    },
+    "@stencil/core": {
+      "optional": true
+    }
   },
-  "peerDependencies": {
-    "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
-  },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^12.1.0",
     "@types/node": "^18.0.0",
-    "jest": "^27.0.0",
     "rimraf": "^5.0.0",
     "rollup": "^4.14.3",
-    "typescript": "~5.0.0"
+    "typescript": "~5.0.0",
+    "vitest": "^2.0.5"
   },
-  "jest": {
-    "transform": {
-      "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js"
-    },
-    "testRegex": "(\\.(test|spec))\\.(ts?|tsx?|jsx?)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "json",
-      "jsx"
-    ],
-    "testURL": "http://localhost"
-  },
-  "gitHead": "0143da04981286eb90046d72ce990f4147a1cb05"
+  "gitHead": "22837bc3a4015b4295b8effa7aad77728e082a79"
 }

README.md

@@ -41,3 +41,3 @@ # @stencil/vue-output-target
 | `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.                                                                                                                                                                         |
+| `outDir`                 | 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.                                                                                                              |
@@ -44,0 +44,0 @@ | `componentModels`             | This is an array of `ComponentModelConfig` objects for components that should be integrated with `v-model`.                                                                                                                                                                                                                      |

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109452

increased by98.92%

Number of package files

31

increased by82.35%

Lines of code

2371

increased by134.29%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

2

increased by100%

Dev dependency count

6

increased by20%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes