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

Comparing version 0.0.1-dev.11729028168.122837bc to 0.0.1-dev.11730913953.1fecd221

dist/generate-vue-component.d.ts

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

dist/index.cjs.js

@@ -118,5 +118,2 @@ 'use strict';
         : '';
-    // tagName: string;
-    // hydrateModule: Promise<{ renderToString: RenderToString }>;
-    // props?: Record<string, any>;
     let templateString = `
@@ -123,0 +120,0 @@ export const ${tagNameAsPascal} = /*@__PURE__*/${ssrTernary}defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;

dist/index.js

@@ -116,5 +116,2 @@ import path from 'node:path';
         : '';
-    // tagName: string;
-    // hydrateModule: Promise<{ renderToString: RenderToString }>;
-    // props?: Record<string, any>;
     let templateString = `
@@ -121,0 +118,0 @@ export const ${tagNameAsPascal} = /*@__PURE__*/${ssrTernary}defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;

dist/runtime.cjs.js

@@ -6,2 +6,7 @@ 'use strict';
 const LOG_PREFIX = '[vue-output-target]';
+/**
+ * returns true if the value is a primitive, e.g. string, number, boolean
+ * @param value - the value to check
+ * @returns true if the value is a primitive, false otherwise
+ */
 function isPrimitive(value) {
@@ -13,3 +18,5 @@ return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
         async setup(props, context) {
-            let stringProps = '';
+            /**
+             * resolve light dom into a string
+             */
             const slots = vue.useSlots();
@@ -22,3 +29,6 @@ let renderedLightDom = '';
             }
-            const { renderToString } = await options.hydrateModule;
+            /**
+             * compose element props into a string
+             */
+            let stringProps = '';
             for (const [key, value] of Object.entries(props)) {
@@ -28,8 +38,6 @@ if (typeof value === 'undefined') {
                 }
+                /**
+                 * Stencils metadata tells us which properties can be serialized
+                 */
                 const propName = options.props?.[key][1];
-                if (!propName) {
-                    console.warn(`${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
-                        "- property type is unknown or not a primitive and can't be serialized");
-                    continue;
-                }
                 const propValue = isPrimitive(value)
@@ -47,3 +55,5 @@ ? typeof value === 'boolean'
                         : undefined;
-                if (!propValue || (typeof propValue === 'string' && propValue.length === 0)) {
+                if (!propName || !propValue) {
+                    console.warn(`${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
+                        "- property type is unknown or not a primitive and can't be serialized");
                     continue;
@@ -53,5 +63,10 @@ }
             }
+            /**
+             * transform component into Declarative Shadow DOM by lazy loading the hydrate module
+             */
             const toSerialize = `<${options.tagName}${stringProps}>${renderedLightDom}</${options.tagName}>`;
+            const { renderToString } = await options.hydrateModule;
             const { html } = await renderToString(toSerialize, {
                 fullDocument: false,
+                serializeShadowRoot: true,
             });
@@ -76,2 +91,5 @@ if (!html) {
         }, {}),
+        /**
+         * the template tags can be arbitrary as they will be replaced with above compiled template
+         */
         template: '<div></div>',
@@ -78,0 +96,0 @@ });

dist/runtime.js

 import { defineComponent, useSlots, createSSRApp, compile, ref, getCurrentInstance, inject, h, withDirectives } from 'vue';
 
 const LOG_PREFIX = '[vue-output-target]';
+/**
+ * returns true if the value is a primitive, e.g. string, number, boolean
+ * @param value - the value to check
+ * @returns true if the value is a primitive, false otherwise
+ */
 function isPrimitive(value) {
@@ -10,3 +15,5 @@ return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
         async setup(props, context) {
-            let stringProps = '';
+            /**
+             * resolve light dom into a string
+             */
             const slots = useSlots();
@@ -19,3 +26,6 @@ let renderedLightDom = '';
             }
-            const { renderToString } = await options.hydrateModule;
+            /**
+             * compose element props into a string
+             */
+            let stringProps = '';
             for (const [key, value] of Object.entries(props)) {
@@ -25,8 +35,6 @@ if (typeof value === 'undefined') {
                 }
+                /**
+                 * Stencils metadata tells us which properties can be serialized
+                 */
                 const propName = options.props?.[key][1];
-                if (!propName) {
-                    console.warn(`${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
-                        "- property type is unknown or not a primitive and can't be serialized");
-                    continue;
-                }
                 const propValue = isPrimitive(value)
@@ -44,3 +52,5 @@ ? typeof value === 'boolean'
                         : undefined;
-                if (!propValue || (typeof propValue === 'string' && propValue.length === 0)) {
+                if (!propName || !propValue) {
+                    console.warn(`${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
+                        "- property type is unknown or not a primitive and can't be serialized");
                     continue;
@@ -50,5 +60,10 @@ }
             }
+            /**
+             * transform component into Declarative Shadow DOM by lazy loading the hydrate module
+             */
             const toSerialize = `<${options.tagName}${stringProps}>${renderedLightDom}</${options.tagName}>`;
+            const { renderToString } = await options.hydrateModule;
             const { html } = await renderToString(toSerialize, {
                 fullDocument: false,
+                serializeShadowRoot: true,
             });
@@ -73,2 +88,5 @@ if (!html) {
         }, {}),
+        /**
+         * the template tags can be arbitrary as they will be replaced with above compiled template
+         */
         template: '<div></div>',
@@ -75,0 +93,0 @@ });

dist/ssr.d.ts

@@ -19,3 +19,3 @@ /**
 }
-export declare function defineStencilSSRComponent(options: StencilSSRComponentOptions): import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+export declare function defineStencilSSRComponent(options: StencilSSRComponentOptions): import("vue").DefineComponent<Record<string, any>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Record<string, any>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export {};

package.json

 {
   "name": "@stencil/vue-output-target",
-  "version": "0.0.1-dev.11729028168.122837bc",
+  "version": "0.0.1-dev.11730913953.1fecd221",
   "description": "Vue output target for @stencil/core components.",
@@ -42,3 +42,4 @@ "author": "Ionic Team",
     "release": "np",
-    "test": "vitest --run"
+    "test": "vitest --run",
+    "test.watch": "vitest --run --watch"
   },
@@ -60,8 +61,9 @@ "peerDependencies": {
     "@types/node": "^18.0.0",
+    "@vue/shared": "^3.5.12",
     "rimraf": "^5.0.0",
     "rollup": "^4.14.3",
-    "typescript": "~5.0.0",
+    "typescript": "~5.6.0",
     "vitest": "^2.0.5"
   },
-  "gitHead": "22837bc3a4015b4295b8effa7aad77728e082a79"
+  "gitHead": "fecd221ccc756da90b0c2e29d29b7a0ca9e5ef26"
 }

src/generate-vue-component.ts

@@ -49,6 +49,2 @@ import { dashToPascalCase } from './utils';
 
-    // tagName: string;
-    // hydrateModule: Promise<{ renderToString: RenderToString }>;
-    // props?: Record<string, any>;
-
     let templateString = `
@@ -55,0 +51,0 @@ export const ${tagNameAsPascal} = /*@__PURE__*/${ssrTernary}defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;

src/ssr.ts

@@ -1,2 +0,3 @@
-import { defineComponent, useSlots, compile, createSSRApp } from 'vue';
+import { defineComponent, useSlots, compile, createSSRApp, type SetupContext } from 'vue';
+import { type LooseRequired } from '@vue/shared';
 
@@ -21,2 +22,7 @@ const LOG_PREFIX = '[vue-output-target]';
 
+/**
+ * returns true if the value is a primitive, e.g. string, number, boolean
+ * @param value - the value to check
+ * @returns true if the value is a primitive, false otherwise
+ */
 function isPrimitive(value: any) {
@@ -27,5 +33,7 @@ return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
 export function defineStencilSSRComponent(options: StencilSSRComponentOptions) {
-  return defineComponent({
-    async setup(props, context) {
-      let stringProps = '';
+  return defineComponent<Record<string, any>, {}, string, {}>({
+    async setup(props: LooseRequired<Readonly<{}> & Readonly<{}> & {}>, context: SetupContext) {
+      /**
+       * resolve light dom into a string
+       */
       const slots = useSlots();
@@ -39,3 +47,6 @@ let renderedLightDom = '';
 
-      const { renderToString } = await options.hydrateModule;
+      /**
+       * compose element props into a string
+       */
+      let stringProps = '';
       for (const [key, value] of Object.entries(props)) {
@@ -46,11 +57,6 @@ if (typeof value === 'undefined') {
 
+        /**
+         * Stencils metadata tells us which properties can be serialized
+         */
         const propName = options.props?.[key][1];
-        if (!propName) {
-          console.warn(
-            `${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
-              "- property type is unknown or not a primitive and can't be serialized"
-          );
-          continue;
-        }
-
         const propValue = isPrimitive(value)
@@ -68,4 +74,7 @@ ? typeof value === 'boolean'
           : undefined;
-
-        if (!propValue || (typeof propValue === 'string' && propValue.length === 0)) {
+        if (!propName || !propValue) {
+          console.warn(
+            `${LOG_PREFIX} ignore component property "${key}" for ${options.tagName} ` +
+              "- property type is unknown or not a primitive and can't be serialized"
+          );
           continue;
@@ -76,5 +85,11 @@ }
       }
+
+      /**
+       * transform component into Declarative Shadow DOM by lazy loading the hydrate module
+       */
       const toSerialize = `<${options.tagName}${stringProps}>${renderedLightDom}</${options.tagName}>`;
+      const { renderToString } = await options.hydrateModule;
       const { html } = await renderToString(toSerialize, {
         fullDocument: false,
+        serializeShadowRoot: true,
       });
@@ -104,4 +119,7 @@
     }, {} as Record<string, Function | Object | Number | String>),
+    /**
+     * the template tags can be arbitrary as they will be replaced with above compiled template
+     */
     template: '<div></div>',
   });
 }

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

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

Improved metrics

Total package byte prevSize

111398

increased by1.78%

Lines of code

2424

increased by2.24%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes