llm-testrunner-components 1.0.0 → 1.0.2

package/dist/react/components.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { LlmTestRunner as LlmTestRunnerElement, defineCustomElement as defineLlmTestRunner } from "llm-testrunner-components/dist/components/llm-test-runner.js";
+import React from 'react';
+export const LlmTestRunner = /*@__PURE__*/ createComponent({
+    tagName: 'llm-test-runner',
+    elementClass: LlmTestRunnerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineLlmTestRunner
+});

package/dist/react/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../generated/react/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC"}

package/dist/react/index.js

@@ -0,0 +1,2 @@
+// Re-export all React components
+export * from './components';

package/dist/types/components/error-message/error-message.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalComponent } from '../../stencil-public-runtime';
+interface ErrorMessageProps {
+    message: string;
+    onClear?: () => void;
+}
+export declare const ErrorMessage: FunctionalComponent<ErrorMessageProps>;
+export {};

package/dist/types/components/llm-test-runner/llm-test-runner.d.ts

@@ -0,0 +1,42 @@
+import { EvaluationResult } from '../../lib/evaluation/types';
+export interface TestCase {
+    id: string;
+    question: string;
+    expectedKeywords: string[];
+    expectedSourceLinks: string[];
+    output?: string;
+    isRunning?: boolean;
+    error?: string;
+    evaluationResult?: EvaluationResult;
+}
+export declare class LLMTestRunner {
+    apiKey: string;
+    testCases: TestCase[];
+    isRunningAll: boolean;
+    error: string;
+    private fileInput;
+    isExportingTestSuite: boolean;
+    private evaluationEngine;
+    private apiUrl;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private addNewTestCase;
+    private updateTestCase;
+    private runSingleTest;
+    private deleteTestCase;
+    private addKeyword;
+    private removeKeyword;
+    private addSourceLink;
+    private removeSourceLink;
+    private callGeminiAPI;
+    private evaluateResponse;
+    private runAllTests;
+    private generateId;
+    private handleFileSelect;
+    private handleFileChange;
+    private readFileAsync;
+    private downloadFile;
+    private handleExportTestSuite;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -6,69 +6,34 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
-    interface CurrentTime {
-    }
-    interface MyComponent {
-        /**
-          * The first name
-         */
-        "first": string;
-        /**
-          * The last name
-         */
-        "last": string;
-        /**
-          * The middle name
-         */
-        "middle": string;
+    interface LlmTestRunner {
+        "apiKey": string;
     }
 }
 declare global {
-    interface HTMLCurrentTimeElement extends Components.CurrentTime, HTMLStencilElement {
-    }
-    var HTMLCurrentTimeElement: {
-        prototype: HTMLCurrentTimeElement;
-        new (): HTMLCurrentTimeElement;
-    };
-    interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
+    interface HTMLLlmTestRunnerElement extends Components.LlmTestRunner, HTMLStencilElement {
     }
-    var HTMLMyComponentElement: {
-        prototype: HTMLMyComponentElement;
-        new (): HTMLMyComponentElement;
+    var HTMLLlmTestRunnerElement: {
+        prototype: HTMLLlmTestRunnerElement;
+        new (): HTMLLlmTestRunnerElement;
     };
     interface HTMLElementTagNameMap {
-        "current-time": HTMLCurrentTimeElement;
-        "my-component": HTMLMyComponentElement;
+        "llm-test-runner": HTMLLlmTestRunnerElement;
     }
 }
 declare namespace LocalJSX {
-    interface CurrentTime {
-    }
-    interface MyComponent {
-        /**
-          * The first name
-         */
-        "first"?: string;
-        /**
-          * The last name
-         */
-        "last"?: string;
-        /**
-          * The middle name
-         */
-        "middle"?: string;
+    interface LlmTestRunner {
+        "apiKey"?: string;
     }
     interface IntrinsicElements {
-        "current-time": CurrentTime;
-        "my-component": MyComponent;
+        "llm-test-runner": LlmTestRunner;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "current-time": LocalJSX.CurrentTime & JSXBase.HTMLAttributes<HTMLCurrentTimeElement>;
-            "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+            "llm-test-runner": LocalJSX.LlmTestRunner & JSXBase.HTMLAttributes<HTMLLlmTestRunnerElement>;
         }
     }
 }

package/dist/types/index.d.ts

@@ -1,11 +1,3 @@
-/**
- * @fileoverview entry point for your component library
- *
- * This is the entry point for your component library. Use this file to export utilities,
- * constants or data structure that accompany your components.
- *
- * DO NOT use this file to export your components. Instead, use the recommended approaches
- * to consume components of this package as outlined in the `README.md`.
- */
-export { format } from './utils/utils';
+export { LLMTestRunner } from './components/llm-test-runner/llm-test-runner';
+export type { TestCase } from './components/llm-test-runner/llm-test-runner';
 export type * from './components.d.ts';

package/dist/types/lib/evaluation/evaluation-engine.d.ts

@@ -0,0 +1,8 @@
+import { EvaluationRequest, EvaluationCallback } from './types';
+export declare class LLMEvaluationEngine {
+    constructor();
+    evaluateResponse(request: EvaluationRequest, callback: EvaluationCallback): Promise<void>;
+    private performEvaluation;
+    private evaluateKeywords;
+    private evaluateSourceLinks;
+}

package/dist/types/lib/evaluation/index.d.ts

@@ -0,0 +1,5 @@
+import { LLMEvaluationEngine } from './evaluation-engine';
+import type { EvaluationRequest, EvaluationResult, KeywordMatch, SourceLinkMatch, EvaluationCallback } from './types';
+export { LLMEvaluationEngine };
+export type { EvaluationRequest, EvaluationResult, KeywordMatch, SourceLinkMatch, EvaluationCallback };
+export declare function evaluateLLMResponse(request: EvaluationRequest, callback: EvaluationCallback): Promise<void>;

package/dist/types/lib/evaluation/types.d.ts

@@ -0,0 +1,23 @@
+export interface EvaluationRequest {
+    testCaseId: string;
+    question: string;
+    expectedKeywords: string[];
+    expectedSourceLinks: string[];
+    actualResponse: string;
+}
+export interface EvaluationResult {
+    testCaseId: string;
+    passed: boolean;
+    keywordMatches: KeywordMatch[];
+    sourceLinkMatches: SourceLinkMatch[];
+    timestamp?: string;
+}
+export interface KeywordMatch {
+    keyword: string;
+    found: boolean;
+}
+export interface SourceLinkMatch {
+    link: string;
+    found: boolean;
+}
+export type EvaluationCallback = (result: EvaluationResult) => void;

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,5 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -151,7 +152,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -233,6 +240,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -323,8 +338,9 @@ export declare function forceUpdate(ref: any): void;
  * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
-export interface HTMLStencilElement extends HTMLElement {
+export interface HTMLStencilElement extends Omit<HTMLElement, 'autocorrect'> {
     componentOnReady(): Promise<this>;
+    autocorrect: 'on' | 'off';
 }
 /**
  * Schedules a DOM-write task. The provided callback will be executed
@@ -349,6 +365,28 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```
+ * import { Mixin, MixinFactory } from '@stencil/core';
+ *
+ * const AWrap: MixinFactory = (Base) => {class A extends Base { propA = A }; return A;}
+ * const BWrap: MixinFactory = (Base) => {class B extends Base { propB = B }; return B;}
+ * const CWrap: MixinFactory = (Base) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "llm-testrunner-components",
-  "version": "1.0.0",
-  "description": "A Stencil web component library with greeting and current time components",
+  "version": "1.0.2",
+  "description": "A Stencil web component library for LLM test runner functionality",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -9,18 +9,19 @@
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/llm-testrunner-components/llm-testrunner-components.esm.js",
   "exports": {
-    ".": {
-      "import": "./dist/llm-testrunner-components/llm-testrunner-components.esm.js",
-      "require": "./dist/llm-testrunner-components/llm-testrunner-components.cjs.js"
-    },
-    "./my-component": {
-      "import": "./dist/components/my-component.js",
-      "types": "./dist/components/my-component.d.ts"
+    "./react": {
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
     },
     "./loader": {
       "import": "./loader/index.js",
       "require": "./loader/index.cjs",
       "types": "./loader/index.d.ts"
+    },
+    "./dist/*": {
+      "import": "./dist/*",
+      "types": "./dist/*"
     }
   },
   "repository": {
@@ -32,20 +33,40 @@
     "loader/"
   ],
   "scripts": {
-    "build": "stencil build",
+    "build": "stencil build && npm run build:react",
+    "build:react": "tsc --project tsconfig.react.json",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate"
+    "generate": "stencil generate",
+    "publish": "npm publish",
+    "publish:public": "npm publish --access=public"
+  },
+  "dependencies": {
+    "@types/uuid": "^10.0.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@stencil/core": "^4.27.1",
+    "@stencil/react-output-target": "^1.2.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.5",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "puppeteer": "^24.3.0"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "license": "MIT",
   "keywords": [
     "web-components",
@@ -53,4 +74,4 @@
     "react",
     "typescript"
   ]
-}
+}

package/dist/cjs/current-time.my-component.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"current-time.my-component.entry.cjs.js","sources":["src/components/my-component/current-time.tsx","src/components/my-component/my-component.css?tag=my-component&encapsulation=shadow","src/components/my-component/my-component.tsx"],"sourcesContent":["// First, we import State from '@stencil/core'\nimport { Component, State, h } from '@stencil/core';\n\n@Component({\n    tag: 'current-time',\n})\nexport class CurrentTime {\n    // `timer` is not decorated with `@State()`, as\n    // we do not wish to trigger a rerender when its\n    // value changes\n    timer: number;\n\n    // `currentTime` is decorated with `@State()`,\n    // as we need to trigger a rerender when its\n    // value changes to show the latest time\n    @State() currentTime: number = Date.now();\n\n    connectedCallback() {\n        // the assignment to `this.timer` will not\n        // trigger a re-render\n        this.timer = window.setInterval(() => {\n            // the assignment to `this.currentTime`\n            // will trigger a re-render\n            this.currentTime = Date.now();\n        }, 1000);\n    }\n\n    disconnectedCallback() {\n        window.clearInterval(this.timer);\n    }\n\n    render() {\n        const time = new Date(this.currentTime).toLocaleTimeString();\n\n        return (\n            <span>{time}</span>\n        );\n    }\n}",":host {\n  display: block;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { format } from '../../utils/utils';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.css',\n  shadow: true,\n})\nexport class MyComponent {\n  /**\n   * The first name\n   */\n  @Prop() first: string;\n\n  /**\n   * The middle name\n   */\n  @Prop() middle: string;\n\n  /**\n   * The last name\n   */\n  @Prop() last: string;\n\n  private getText(): string {\n    return format(this.first, this.middle, this.last);\n  }\n\n  render() {\n    return (\n      <div>\n        Hello, World! I'm {this.getText()} <br />\n        Current time: <current-time />\n      </div>\n    );\n  }\n}\n"],"names":["h","format"],"mappings":";;;;;MAMa,WAAW,GAAA,MAAA;;;;;;;AAIpB,IAAA,KAAK;;;;AAKI,IAAA,WAAW,GAAW,IAAI,CAAC,GAAG,EAAE;IAEzC,iBAAiB,GAAA;;;QAGb,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,MAAK;;;AAGjC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE;SAChC,EAAE,IAAI,CAAC;;IAGZ,oBAAoB,GAAA;AAChB,QAAA,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGpC,MAAM,GAAA;AACF,QAAA,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,kBAAkB,EAAE;AAE5D,QAAA,QACIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAQ;;;;ACnC/B,MAAM,cAAc,GAAG,sBAAsB;;MCQhC,WAAW,GAAA,MAAA;;;;AACtB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,MAAM;AAEd;;AAEG;AACK,IAAA,IAAI;IAEJ,OAAO,GAAA;AACb,QAAA,OAAOC,cAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;IAGnD,MAAM,GAAA;QACJ,QACED,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,wBACqB,IAAI,CAAC,OAAO,EAAE,OAAEA,OAAM,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,oBAC3BA,OAAgB,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAC1B;;;;;;;;"}

package/dist/cjs/current-time_2.cjs.entry.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var index = require('./index-CCrH7f-W.js');
-var index$1 = require('./index.cjs.js');
-
-const CurrentTime = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    // `timer` is not decorated with `@State()`, as
-    // we do not wish to trigger a rerender when its
-    // value changes
-    timer;
-    // `currentTime` is decorated with `@State()`,
-    // as we need to trigger a rerender when its
-    // value changes to show the latest time
-    currentTime = Date.now();
-    connectedCallback() {
-        // the assignment to `this.timer` will not
-        // trigger a re-render
-        this.timer = window.setInterval(() => {
-            // the assignment to `this.currentTime`
-            // will trigger a re-render
-            this.currentTime = Date.now();
-        }, 1000);
-    }
-    disconnectedCallback() {
-        window.clearInterval(this.timer);
-    }
-    render() {
-        const time = new Date(this.currentTime).toLocaleTimeString();
-        return (index.h("span", { key: '45b0df3ce3817ac64d22582b1a45c188b61656a4' }, time));
-    }
-};
-
-const myComponentCss = ":host{display:block}";
-
-const MyComponent = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /**
-     * The first name
-     */
-    first;
-    /**
-     * The middle name
-     */
-    middle;
-    /**
-     * The last name
-     */
-    last;
-    getText() {
-        return index$1.format(this.first, this.middle, this.last);
-    }
-    render() {
-        return (index.h("div", { key: '538552b1fa1db142ea88eb71047cd1da9fbfb224' }, "Hello, World! I'm ", this.getText(), " ", index.h("br", { key: 'f27acd01ea5f08223805a7f79b0763d45a2e70bf' }), "Current time: ", index.h("current-time", { key: '615f447c114321de1a748703672a3cf9217df591' })));
-    }
-};
-MyComponent.style = myComponentCss;
-
-exports.current_time = CurrentTime;
-exports.my_component = MyComponent;
-//# sourceMappingURL=current-time.my-component.entry.cjs.js.map
-
-//# sourceMappingURL=current-time_2.cjs.entry.js.map

package/dist/cjs/current-time_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"current-time.my-component.entry.cjs.js","mappings":";;;;;MAMa,WAAW,GAAA,MAAA;;;;;;;AAIpB,IAAA,KAAK;;;;AAKI,IAAA,WAAW,GAAW,IAAI,CAAC,GAAG,EAAE;IAEzC,iBAAiB,GAAA;;;QAGb,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,MAAK;;;AAGjC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE;SAChC,EAAE,IAAI,CAAC;;IAGZ,oBAAoB,GAAA;AAChB,QAAA,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGpC,MAAM,GAAA;AACF,QAAA,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,kBAAkB,EAAE;AAE5D,QAAA,QACIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAQ;;;;ACnC/B,MAAM,cAAc,GAAG,sBAAsB;;MCQhC,WAAW,GAAA,MAAA;;;;AACtB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,MAAM;AAEd;;AAEG;AACK,IAAA,IAAI;IAEJ,OAAO,GAAA;AACb,QAAA,OAAOC,cAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;IAGnD,MAAM,GAAA;QACJ,QACED,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,wBACqB,IAAI,CAAC,OAAO,EAAE,OAAEA,OAAM,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,oBAC3BA,OAAgB,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CAC1B;;;;;;;;","names":["h","format"],"sources":["src/components/my-component/current-time.tsx","src/components/my-component/my-component.css?tag=my-component&encapsulation=shadow","src/components/my-component/my-component.tsx"],"sourcesContent":["// First, we import State from '@stencil/core'\nimport { Component, State, h } from '@stencil/core';\n\n@Component({\n    tag: 'current-time',\n})\nexport class CurrentTime {\n    // `timer` is not decorated with `@State()`, as\n    // we do not wish to trigger a rerender when its\n    // value changes\n    timer: number;\n\n    // `currentTime` is decorated with `@State()`,\n    // as we need to trigger a rerender when its\n    // value changes to show the latest time\n    @State() currentTime: number = Date.now();\n\n    connectedCallback() {\n        // the assignment to `this.timer` will not\n        // trigger a re-render\n        this.timer = window.setInterval(() => {\n            // the assignment to `this.currentTime`\n            // will trigger a re-render\n            this.currentTime = Date.now();\n        }, 1000);\n    }\n\n    disconnectedCallback() {\n        window.clearInterval(this.timer);\n    }\n\n    render() {\n        const time = new Date(this.currentTime).toLocaleTimeString();\n\n        return (\n            <span>{time}</span>\n        );\n    }\n}",":host {\n  display: block;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { format } from '../../utils/utils';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.css',\n  shadow: true,\n})\nexport class MyComponent {\n  /**\n   * The first name\n   */\n  @Prop() first: string;\n\n  /**\n   * The middle name\n   */\n  @Prop() middle: string;\n\n  /**\n   * The last name\n   */\n  @Prop() last: string;\n\n  private getText(): string {\n    return format(this.first, this.middle, this.last);\n  }\n\n  render() {\n    return (\n      <div>\n        Hello, World! I'm {this.getText()} <br />\n        Current time: <current-time />\n      </div>\n    );\n  }\n}\n"],"version":3}