plinth-ui 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/angular/index.ts +6 -0
- package/dist-angular/index.cjs +114 -0
- package/dist-angular/index.js +95 -0
- package/dist-react/index.cjs +48 -0
- package/dist-react/index.js +17 -0
- package/package.json +24 -14
- package/react-library/src/components/generated/entry.ts +7 -0
package/angular/index.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Angular entry point for plinth-ui.
|
|
3
|
+
* Import from 'plinth-ui/angular' in your Angular app.
|
|
4
|
+
*/
|
|
5
|
+
export { DIRECTIVES } from '../angular-workspace/projects/plinth-ui/src/lib/stencil-generated/index';
|
|
6
|
+
export * from '../angular-workspace/projects/plinth-ui/src/lib/stencil-generated/components';
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
19
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
20
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
21
|
+
if (decorator = decorators[i])
|
|
22
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
23
|
+
if (kind && result) __defProp(target, key, result);
|
|
24
|
+
return result;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// angular/index.ts
|
|
28
|
+
var index_exports = {};
|
|
29
|
+
__export(index_exports, {
|
|
30
|
+
DIRECTIVES: () => DIRECTIVES,
|
|
31
|
+
MyComponent: () => MyComponent
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(index_exports);
|
|
34
|
+
|
|
35
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/components.ts
|
|
36
|
+
var import_core = require("@angular/core");
|
|
37
|
+
|
|
38
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/angular-component-lib/utils.ts
|
|
39
|
+
var import_rxjs = require("rxjs");
|
|
40
|
+
var proxyInputs = (Cmp, inputs) => {
|
|
41
|
+
const Prototype = Cmp.prototype;
|
|
42
|
+
inputs.forEach((item) => {
|
|
43
|
+
Object.defineProperty(Prototype, item, {
|
|
44
|
+
get() {
|
|
45
|
+
return this.el[item];
|
|
46
|
+
},
|
|
47
|
+
set(val) {
|
|
48
|
+
this.z.runOutsideAngular(() => this.el[item] = val);
|
|
49
|
+
},
|
|
50
|
+
/**
|
|
51
|
+
* In the event that proxyInputs is called
|
|
52
|
+
* multiple times re-defining these inputs
|
|
53
|
+
* will cause an error to be thrown. As a result
|
|
54
|
+
* we set configurable: true to indicate these
|
|
55
|
+
* properties can be changed.
|
|
56
|
+
*/
|
|
57
|
+
configurable: true
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
var proxyMethods = (Cmp, methods) => {
|
|
62
|
+
const Prototype = Cmp.prototype;
|
|
63
|
+
methods.forEach((methodName) => {
|
|
64
|
+
Prototype[methodName] = function() {
|
|
65
|
+
const args = arguments;
|
|
66
|
+
return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
function ProxyCmp(opts) {
|
|
71
|
+
const decorator = function(cls) {
|
|
72
|
+
const { defineCustomElementFn, inputs, methods } = opts;
|
|
73
|
+
if (defineCustomElementFn !== void 0) {
|
|
74
|
+
defineCustomElementFn();
|
|
75
|
+
}
|
|
76
|
+
if (inputs) {
|
|
77
|
+
proxyInputs(cls, inputs);
|
|
78
|
+
}
|
|
79
|
+
if (methods) {
|
|
80
|
+
proxyMethods(cls, methods);
|
|
81
|
+
}
|
|
82
|
+
return cls;
|
|
83
|
+
};
|
|
84
|
+
return decorator;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/components.ts
|
|
88
|
+
var import_my_component = require("plinth-ui/components/my-component.js");
|
|
89
|
+
var MyComponent = class {
|
|
90
|
+
constructor(c, r, z) {
|
|
91
|
+
this.z = z;
|
|
92
|
+
c.detach();
|
|
93
|
+
this.el = r.nativeElement;
|
|
94
|
+
}
|
|
95
|
+
el;
|
|
96
|
+
};
|
|
97
|
+
MyComponent = __decorateClass([
|
|
98
|
+
ProxyCmp({
|
|
99
|
+
defineCustomElementFn: import_my_component.defineCustomElement,
|
|
100
|
+
inputs: ["first", "last", "middle"]
|
|
101
|
+
}),
|
|
102
|
+
(0, import_core.Component)({
|
|
103
|
+
selector: "my-component",
|
|
104
|
+
changeDetection: import_core.ChangeDetectionStrategy.OnPush,
|
|
105
|
+
template: "<ng-content></ng-content>",
|
|
106
|
+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
107
|
+
inputs: ["first", "last", "middle"]
|
|
108
|
+
})
|
|
109
|
+
], MyComponent);
|
|
110
|
+
|
|
111
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/index.ts
|
|
112
|
+
var DIRECTIVES = [
|
|
113
|
+
MyComponent
|
|
114
|
+
];
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
+
if (decorator = decorators[i])
|
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
+
if (kind && result) __defProp(target, key, result);
|
|
9
|
+
return result;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/components.ts
|
|
13
|
+
import { ChangeDetectionStrategy, Component } from "@angular/core";
|
|
14
|
+
|
|
15
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/angular-component-lib/utils.ts
|
|
16
|
+
import { fromEvent } from "rxjs";
|
|
17
|
+
var proxyInputs = (Cmp, inputs) => {
|
|
18
|
+
const Prototype = Cmp.prototype;
|
|
19
|
+
inputs.forEach((item) => {
|
|
20
|
+
Object.defineProperty(Prototype, item, {
|
|
21
|
+
get() {
|
|
22
|
+
return this.el[item];
|
|
23
|
+
},
|
|
24
|
+
set(val) {
|
|
25
|
+
this.z.runOutsideAngular(() => this.el[item] = val);
|
|
26
|
+
},
|
|
27
|
+
/**
|
|
28
|
+
* In the event that proxyInputs is called
|
|
29
|
+
* multiple times re-defining these inputs
|
|
30
|
+
* will cause an error to be thrown. As a result
|
|
31
|
+
* we set configurable: true to indicate these
|
|
32
|
+
* properties can be changed.
|
|
33
|
+
*/
|
|
34
|
+
configurable: true
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
var proxyMethods = (Cmp, methods) => {
|
|
39
|
+
const Prototype = Cmp.prototype;
|
|
40
|
+
methods.forEach((methodName) => {
|
|
41
|
+
Prototype[methodName] = function() {
|
|
42
|
+
const args = arguments;
|
|
43
|
+
return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
function ProxyCmp(opts) {
|
|
48
|
+
const decorator = function(cls) {
|
|
49
|
+
const { defineCustomElementFn, inputs, methods } = opts;
|
|
50
|
+
if (defineCustomElementFn !== void 0) {
|
|
51
|
+
defineCustomElementFn();
|
|
52
|
+
}
|
|
53
|
+
if (inputs) {
|
|
54
|
+
proxyInputs(cls, inputs);
|
|
55
|
+
}
|
|
56
|
+
if (methods) {
|
|
57
|
+
proxyMethods(cls, methods);
|
|
58
|
+
}
|
|
59
|
+
return cls;
|
|
60
|
+
};
|
|
61
|
+
return decorator;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/components.ts
|
|
65
|
+
import { defineCustomElement as defineMyComponent } from "plinth-ui/components/my-component.js";
|
|
66
|
+
var MyComponent = class {
|
|
67
|
+
constructor(c, r, z) {
|
|
68
|
+
this.z = z;
|
|
69
|
+
c.detach();
|
|
70
|
+
this.el = r.nativeElement;
|
|
71
|
+
}
|
|
72
|
+
el;
|
|
73
|
+
};
|
|
74
|
+
MyComponent = __decorateClass([
|
|
75
|
+
ProxyCmp({
|
|
76
|
+
defineCustomElementFn: defineMyComponent,
|
|
77
|
+
inputs: ["first", "last", "middle"]
|
|
78
|
+
}),
|
|
79
|
+
Component({
|
|
80
|
+
selector: "my-component",
|
|
81
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
82
|
+
template: "<ng-content></ng-content>",
|
|
83
|
+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
84
|
+
inputs: ["first", "last", "middle"]
|
|
85
|
+
})
|
|
86
|
+
], MyComponent);
|
|
87
|
+
|
|
88
|
+
// angular-workspace/projects/plinth-ui/src/lib/stencil-generated/index.ts
|
|
89
|
+
var DIRECTIVES = [
|
|
90
|
+
MyComponent
|
|
91
|
+
];
|
|
92
|
+
export {
|
|
93
|
+
DIRECTIVES,
|
|
94
|
+
MyComponent
|
|
95
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// react-library/src/components/generated/entry.ts
|
|
31
|
+
var entry_exports = {};
|
|
32
|
+
__export(entry_exports, {
|
|
33
|
+
MyComponent: () => MyComponent
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(entry_exports);
|
|
36
|
+
|
|
37
|
+
// react-library/src/components/generated/my-component.ts
|
|
38
|
+
var import_runtime = require("@stencil/react-output-target/runtime");
|
|
39
|
+
var import_my_component = require("plinth-ui/components/my-component.js");
|
|
40
|
+
var import_react = __toESM(require("react"));
|
|
41
|
+
var MyComponent = /* @__PURE__ */ (0, import_runtime.createComponent)({
|
|
42
|
+
tagName: "my-component",
|
|
43
|
+
elementClass: import_my_component.MyComponent,
|
|
44
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
45
|
+
react: import_react.default,
|
|
46
|
+
events: {},
|
|
47
|
+
defineCustomElement: import_my_component.defineCustomElement
|
|
48
|
+
});
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// react-library/src/components/generated/my-component.ts
|
|
4
|
+
import { createComponent } from "@stencil/react-output-target/runtime";
|
|
5
|
+
import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "plinth-ui/components/my-component.js";
|
|
6
|
+
import React from "react";
|
|
7
|
+
var MyComponent = /* @__PURE__ */ createComponent({
|
|
8
|
+
tagName: "my-component",
|
|
9
|
+
elementClass: MyComponentElement,
|
|
10
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
11
|
+
react: React,
|
|
12
|
+
events: {},
|
|
13
|
+
defineCustomElement: defineMyComponent
|
|
14
|
+
});
|
|
15
|
+
export {
|
|
16
|
+
MyComponent
|
|
17
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "plinth-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Stencil Component Starter",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -29,34 +29,44 @@
|
|
|
29
29
|
"require": "./dist/plinth-ui/plinth-ui.cjs.js"
|
|
30
30
|
},
|
|
31
31
|
"./angular": {
|
|
32
|
-
"types": "./angular
|
|
33
|
-
"import": "./angular
|
|
34
|
-
"require": "./angular
|
|
35
|
-
"default": "./angular
|
|
36
|
-
},
|
|
37
|
-
"./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/": {
|
|
38
|
-
"types": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
|
|
39
|
-
"import": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
|
|
40
|
-
"require": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts",
|
|
41
|
-
"default": "./angular-workspace/projects/plinth-ui/src/lib/stencil-generated/public-api.ts"
|
|
32
|
+
"types": "./angular/index.ts",
|
|
33
|
+
"import": "./dist-angular/index.js",
|
|
34
|
+
"require": "./dist-angular/index.cjs",
|
|
35
|
+
"default": "./dist-angular/index.js"
|
|
42
36
|
},
|
|
43
37
|
"./react": {
|
|
44
38
|
"types": "./react-library/src/components/generated/components.ts",
|
|
45
|
-
"
|
|
39
|
+
"import": "./dist-react/index.js",
|
|
40
|
+
"require": "./dist-react/index.cjs",
|
|
41
|
+
"default": "./dist-react/index.js"
|
|
46
42
|
}
|
|
47
43
|
},
|
|
48
44
|
"repository": {
|
|
49
45
|
"type": "git",
|
|
50
46
|
"url": "https://github.com/stenciljs/component-starter.git"
|
|
51
47
|
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@stencil/react-output-target": "^1.4.1"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"@angular/core": "*",
|
|
53
|
+
"react": "*",
|
|
54
|
+
"rxjs": "*"
|
|
55
|
+
},
|
|
52
56
|
"files": [
|
|
53
57
|
"dist/",
|
|
58
|
+
"dist-angular/",
|
|
59
|
+
"dist-react/",
|
|
54
60
|
"loader/",
|
|
61
|
+
"angular/",
|
|
55
62
|
"angular-workspace/projects/plinth-ui/src/lib/stencil-generated/",
|
|
56
63
|
"react-library/src/components/generated/"
|
|
57
64
|
],
|
|
58
65
|
"scripts": {
|
|
59
|
-
"
|
|
66
|
+
"prebuild": "mkdir -p dist-angular dist-react",
|
|
67
|
+
"build": "stencil build && npm run build:react && npm run build:angular",
|
|
68
|
+
"build:react": "node ./scripts/build-react.mjs && esbuild ./react-library/src/components/generated/entry.ts --bundle --packages=external --format=esm --outfile=dist-react/index.js && esbuild ./react-library/src/components/generated/entry.ts --bundle --packages=external --format=cjs --outfile=dist-react/index.cjs",
|
|
69
|
+
"build:angular": "esbuild ./angular/index.ts --bundle --packages=external --format=esm --outfile=dist-angular/index.js && esbuild ./angular/index.ts --bundle --packages=external --format=cjs --outfile=dist-angular/index.cjs",
|
|
60
70
|
"start": "stencil build --dev --watch --serve",
|
|
61
71
|
"test": "stencil test --spec --e2e",
|
|
62
72
|
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
@@ -65,9 +75,9 @@
|
|
|
65
75
|
"devDependencies": {
|
|
66
76
|
"@stencil/angular-output-target": "^1.3.0",
|
|
67
77
|
"@stencil/core": "^4.27.1",
|
|
68
|
-
"@stencil/react-output-target": "^1.4.1",
|
|
69
78
|
"@types/jest": "^29.5.14",
|
|
70
79
|
"@types/node": "^22.13.5",
|
|
80
|
+
"esbuild": "^0.25.1",
|
|
71
81
|
"jest": "^29.7.0",
|
|
72
82
|
"jest-cli": "^29.7.0",
|
|
73
83
|
"puppeteer": "^24.3.0"
|