plinth-ui 0.0.2 → 0.0.4

package/dist/angular/angular-component-lib/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const proxyInputs: (Cmp: any, inputs: string[]) => void;
+export declare const proxyMethods: (Cmp: any, methods: string[]) => void;
+export declare const proxyOutputs: (instance: any, el: any, events: string[]) => void;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export declare function ProxyCmp(opts: {
+    defineCustomElementFn?: () => void;
+    inputs?: any;
+    methods?: any;
+}): (cls: any) => any;

package/dist/angular/angular-component-lib/utils.js

@@ -0,0 +1,58 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+export const proxyInputs = (Cmp, inputs) => {
+    const Prototype = Cmp.prototype;
+    inputs.forEach((item) => {
+        Object.defineProperty(Prototype, item, {
+            get() {
+                return this.el[item];
+            },
+            set(val) {
+                this.z.runOutsideAngular(() => (this.el[item] = val));
+            },
+            /**
+             * In the event that proxyInputs is called
+             * multiple times re-defining these inputs
+             * will cause an error to be thrown. As a result
+             * we set configurable: true to indicate these
+             * properties can be changed.
+             */
+            configurable: true,
+        });
+    });
+};
+export const proxyMethods = (Cmp, methods) => {
+    const Prototype = Cmp.prototype;
+    methods.forEach((methodName) => {
+        Prototype[methodName] = function () {
+            const args = arguments;
+            return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+        };
+    });
+};
+export const proxyOutputs = (instance, el, events) => {
+    events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts) {
+    const decorator = function (cls) {
+        const { defineCustomElementFn, inputs, methods } = opts;
+        if (defineCustomElementFn !== undefined) {
+            defineCustomElementFn();
+        }
+        if (inputs) {
+            proxyInputs(cls, inputs);
+        }
+        if (methods) {
+            proxyMethods(cls, methods);
+        }
+        return cls;
+    };
+    return decorator;
+}

package/dist/angular/components.d.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import type { Components } from 'plinth-ui/components';
+export declare class MyComponent {
+    protected z: NgZone;
+    protected el: HTMLMyComponentElement;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+}
+export declare interface MyComponent extends Components.MyComponent {
+}

package/dist/angular/components.js

@@ -0,0 +1,73 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ProxyCmp } from './angular-component-lib/utils';
+import { defineCustomElement as defineMyComponent } from 'plinth-ui/components/my-component.js';
+let MyComponent = (() => {
+    let _classDecorators = [ProxyCmp({
+            defineCustomElementFn: defineMyComponent,
+            inputs: ['first', 'last', 'middle']
+        }), Component({
+            selector: 'my-component',
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: '<ng-content></ng-content>',
+            // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+            inputs: ['first', 'last', 'middle'],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var MyComponent = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            MyComponent = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        z;
+        el;
+        constructor(c, r, z) {
+            this.z = z;
+            c.detach();
+            this.el = r.nativeElement;
+        }
+    };
+    return MyComponent = _classThis;
+})();
+export { MyComponent };

package/dist/angular/index.d.ts

@@ -0,0 +1,2 @@
+import * as d from './components';
+export declare const DIRECTIVES: (typeof d.MyComponent)[];

package/dist/angular/index.js

@@ -0,0 +1,4 @@
+import * as d from './components';
+export const DIRECTIVES = [
+    d.MyComponent
+];

package/dist/react/components.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+export { MyComponent } from "./my-component.js";

package/dist/react/components.js

@@ -0,0 +1,6 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+/* eslint-disable */
+export { MyComponent } from "./my-component.js";

package/dist/react/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React proxies entrypoint.
+ *
+ * This file is written by scripts/prepare-framework-proxies.cjs
+ * and should be committed to the build output only.
+ */
+export * from './components';

package/dist/react/index.js

@@ -0,0 +1,7 @@
+/**
+ * React proxies entrypoint.
+ *
+ * This file is written by scripts/prepare-framework-proxies.cjs
+ * and should be committed to the build output only.
+ */
+export * from './components';

package/dist/react/index.ts

@@ -0,0 +1,8 @@
+/**
+ * React proxies entrypoint.
+ *
+ * This file is written by scripts/prepare-framework-proxies.cjs
+ * and should be committed to the build output only.
+ */
+
+export * from './components';

package/dist/react/my-component.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { MyComponent as MyComponentElement } from "plinth-ui/components/my-component.js";
+export type MyComponentEvents = NonNullable<unknown>;
+export declare const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents>;

package/dist/react/my-component.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "plinth-ui/components/my-component.js";
+import React from 'react';
+export const MyComponent = /*@__PURE__*/ createComponent({
+    tagName: 'my-component',
+    elementClass: MyComponentElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineMyComponent
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plinth-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -29,20 +29,14 @@
       "require": "./dist/plinth-ui/plinth-ui.cjs.js"
     },
     "./angular": {
-      "types": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
-      "import": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
-      "require": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
-      "default": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts"
-    },
-    "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/": {
-      "types": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
-      "import": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
-      "require": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
-      "default": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts"
+      "types": "./dist/angular/index.d.ts",
+      "import": "./dist/angular/index.js",
+      "default": "./dist/angular/index.js"
     },
     "./react": {
-      "types": "./react-library/src/components/generated/components.ts",
-      "default": "./react-library/src/components/generated/components.ts"
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "default": "./dist/react/index.js"
     }
   },
   "repository": {
@@ -52,25 +46,34 @@
   "files": [
     "dist/",
     "loader/",
-    "angular-workspace/projects/plinth-ui/src/lib/stencil-generated/",
-    "react-library/src/components/generated/"
+    "scripts/"
   ],
   "scripts": {
-    "build": "stencil build",
+    "build": "stencil build && npm run build:framework-proxies",
+    "build:framework-proxies": "node ./scripts/prepare-framework-proxies.cjs && tsc -p ./tsconfig.proxies.json",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate"
   },
   "devDependencies": {
+    "@angular/core": "^21.1.4",
     "@stencil/angular-output-target": "^1.3.0",
     "@stencil/core": "^4.27.1",
-    "@stencil/react-output-target": "^1.4.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.13.5",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "puppeteer": "^24.3.0"
+    "puppeteer": "^24.3.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rxjs": "^7.8.2",
+    "typescript": "^5.9.3"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@stencil/react-output-target": "^1.4.1"
+  }
 }

package/scripts/prepare-framework-proxies.cjs

@@ -0,0 +1,47 @@
+const fs = require('fs');
+const path = require('path');
+
+const repoRoot = path.join(__dirname, '..');
+
+function ensureDir(dir) {
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+function writeReactEntrypoint() {
+  const reactDistDir = path.join(repoRoot, 'dist', 'react');
+  ensureDir(reactDistDir);
+
+  const indexTsPath = path.join(reactDistDir, 'index.ts');
+  const contents = `/**
+ * React proxies entrypoint.
+ *
+ * This file is written by scripts/prepare-framework-proxies.cjs
+ * and should be committed to the build output only.
+ */
+
+export * from './components';
+`;
+
+  fs.writeFileSync(indexTsPath, contents, 'utf8');
+}
+
+function copyAngularUtils() {
+  const src = path.join(
+    repoRoot,
+    'node_modules',
+    '@stencil',
+    'angular-output-target',
+    'angular-component-lib',
+    'utils.ts'
+  );
+
+  const angularLibDir = path.join(repoRoot, 'dist', 'angular', 'angular-component-lib');
+  ensureDir(angularLibDir);
+
+  const dest = path.join(angularLibDir, 'utils.ts');
+  fs.copyFileSync(src, dest);
+}
+
+writeReactEntrypoint();
+copyAngularUtils();
+