llm-testrunner-components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# LLM TestRunner Web Components
+
+A Stencil web component library that provides reusable components for displaying greetings and current time.
+
+## Components
+
+### `<my-component>`
+A greeting component that displays a personalized message with the current time.
+
+**Props:**
+- `first` (string): First name
+- `middle` (string, optional): Middle name  
+- `last` (string): Last name
+
+**Example:**
+```html
+<my-component first="John" middle="William" last="Doe"></my-component>
+```
+
+### `<current-time>`
+A component that displays the current time and updates every second.
+
+**Example:**
+```html
+<current-time></current-time>
+```
+
+## Publishing to NPM
+
+1. **Login to NPM:**
+   ```bash
+   npm adduser
+   ```
+
+2. **Build the components:**
+   ```bash
+   npm run build
+   ```
+
+3. **Publish to NPM:**
+   ```bash
+   npm publish --access public
+   ```
+
+## Using in React Applications
+
+### Installation
+
+```bash
+npm install @arupmishra/llm-testrunner-components
+```
+
+### Integration
+
+1. **Import and define custom elements in your React component:**
+
+```tsx
+import React, { useEffect } from 'react';
+import { defineCustomElements } from '@arupmishra/llm-testrunner-components/loader';
+
+// Define TypeScript types for the custom elements
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'my-component': any;
+      'current-time': any;
+    }
+  }
+}
+
+function App() {
+  useEffect(() => {
+    // Define the custom elements when the component mounts
+    defineCustomElements();
+  }, []);
+
+  return (
+    <div>
+      <my-component first="John" middle="William" last="Doe"></my-component>
+      <current-time></current-time>
+    </div>
+  );
+}
+```
+
+2. **For better TypeScript support, create type definitions:**
+
+```tsx
+// types/stencil-components.d.ts
+import { JSX as LocalJSX } from '@arupmishra/llm-testrunner-components';
+import { HTMLAttributes } from 'react';
+
+type StencilToReact<T> = {
+  [P in keyof T]?: T[P] & Omit<HTMLAttributes<Element>, 'className'> & {
+    class?: string;
+  };
+};
+
+declare global {
+  export namespace JSX {
+    interface IntrinsicElements
+      extends StencilToReact<LocalJSX.IntrinsicElements> {}
+  }
+}
+```
+
+## Development
+
+### Building
+```bash
+npm run build
+```
+
+### Testing
+```bash
+npm test
+```
+
+### Development Server
+```bash
+npm start
+```
+
+## Demo
+
+A complete React demo application is available in the `../react-web-component-demo` directory showing how to integrate these web components into a React application.
+
+To run the demo:
+```bash
+cd ../react-web-component-demo
+npm start
+```
+
+## License
+
+MIT

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map
+
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map

package/dist/cjs/app-globals-V2Kpy_OQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-V2Kpy_OQ.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\nexport const globalStyles = \"\";\n"],"names":[],"mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,67 @@
+'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

@@ -0,0 +1 @@
+{"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}