Compare commits
93 Commits
Author | SHA1 | Date | |
---|---|---|---|
8dd48fdc05 | |||
2538f59769 | |||
216a605f93 | |||
0808b9a5f9 | |||
dc13ad997b | |||
1c7c1c2432 | |||
969cd12725 | |||
f2aa825f95 | |||
9d072cde61 | |||
3b100a5b20 | |||
ef76535d2b | |||
b6e307d2e1 | |||
4b24440e2a | |||
4867099008 | |||
ac7e109f6c | |||
019297f998 | |||
d0ddeaca5d | |||
fe50d39d01 | |||
6da377f0f6 | |||
a39d46458a | |||
45be5f90ee | |||
67927cc3a2 | |||
f4b8260c45 | |||
5c86ee7bf3 | |||
50c4be30b8 | |||
dce8ec6470 | |||
14446ece3c | |||
794281541b | |||
fdd3a5da90 | |||
0394a656cc | |||
78051a5577 | |||
59c564af0a | |||
4178955313 | |||
4e4d29abcf | |||
06dbacb74d | |||
5fc730eeb2 | |||
1bdab82d0e | |||
76841a6b25 | |||
6dd5277f9e | |||
4cbbf941c0 | |||
61de38cb4d | |||
a3ab19e5db | |||
a7e1a02b52 | |||
9f974a97f5 | |||
d80f94db29 | |||
a32b6b425b | |||
9ca286697c | |||
07dcfbe531 | |||
ac919e2cce | |||
30e1822b5b | |||
b6c67a55e5 | |||
f20977e936 | |||
8ad5906e06 | |||
4008de283c | |||
1177ec6158 | |||
b8ced9a991 | |||
9b30853a56 | |||
acc1d7eea7 | |||
bb6818324d | |||
3dee5f9b68 | |||
ef92d1bde3 | |||
e394c999b2 | |||
68bcc10ee6 | |||
d2cd5ce6f3 | |||
29fb3a2f9b | |||
ef1e373fb3 | |||
d607968dfb | |||
45b2183c88 | |||
68f11d7e76 | |||
cc6f14551f | |||
12f6bb3317 | |||
b63fac3f75 | |||
61d7de2323 | |||
d6c7f5da97 | |||
36c7f8ae38 | |||
2cae90816d | |||
9e527d7fdb | |||
9e6887bc11 | |||
17a2504760 | |||
5622ea41e9 | |||
a0f6777930 | |||
265e5c2264 | |||
f15e4e2948 | |||
5b2218126c | |||
ae39ad12a1 | |||
dc71f41df3 | |||
41c93a0b27 | |||
192cd76012 | |||
b25be8c85e | |||
188690a845 | |||
85aa910046 | |||
7b8e9ecdf3 | |||
df79f7a27c |
66
.gitea/workflows/default_nottags.yaml
Normal file
66
.gitea/workflows/default_nottags.yaml
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
name: Default (not tags)
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
tags-ignore:
|
||||||
|
- '**'
|
||||||
|
|
||||||
|
env:
|
||||||
|
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
|
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
||||||
|
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||||
|
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||||
|
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||||
|
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
security:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
continue-on-error: true
|
||||||
|
container:
|
||||||
|
image: ${{ env.IMAGE }}
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Install pnpm and npmci
|
||||||
|
run: |
|
||||||
|
pnpm install -g pnpm
|
||||||
|
pnpm install -g @shipzone/npmci
|
||||||
|
|
||||||
|
- name: Run npm prepare
|
||||||
|
run: npmci npm prepare
|
||||||
|
|
||||||
|
- name: Audit production dependencies
|
||||||
|
run: |
|
||||||
|
npmci command npm config set registry https://registry.npmjs.org
|
||||||
|
npmci command pnpm audit --audit-level=high --prod
|
||||||
|
continue-on-error: true
|
||||||
|
|
||||||
|
- name: Audit development dependencies
|
||||||
|
run: |
|
||||||
|
npmci command npm config set registry https://registry.npmjs.org
|
||||||
|
npmci command pnpm audit --audit-level=high --dev
|
||||||
|
continue-on-error: true
|
||||||
|
|
||||||
|
test:
|
||||||
|
if: ${{ always() }}
|
||||||
|
needs: security
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
container:
|
||||||
|
image: ${{ env.IMAGE }}
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Test stable
|
||||||
|
run: |
|
||||||
|
npmci node install stable
|
||||||
|
npmci npm install
|
||||||
|
npmci npm test
|
||||||
|
|
||||||
|
- name: Test build
|
||||||
|
run: |
|
||||||
|
npmci node install stable
|
||||||
|
npmci npm install
|
||||||
|
npmci npm build
|
124
.gitea/workflows/default_tags.yaml
Normal file
124
.gitea/workflows/default_tags.yaml
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
name: Default (tags)
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
tags:
|
||||||
|
- '*'
|
||||||
|
|
||||||
|
env:
|
||||||
|
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
|
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
||||||
|
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||||
|
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||||
|
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||||
|
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
security:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
continue-on-error: true
|
||||||
|
container:
|
||||||
|
image: ${{ env.IMAGE }}
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Prepare
|
||||||
|
run: |
|
||||||
|
pnpm install -g pnpm
|
||||||
|
pnpm install -g @shipzone/npmci
|
||||||
|
npmci npm prepare
|
||||||
|
|
||||||
|
- name: Audit production dependencies
|
||||||
|
run: |
|
||||||
|
npmci command npm config set registry https://registry.npmjs.org
|
||||||
|
npmci command pnpm audit --audit-level=high --prod
|
||||||
|
continue-on-error: true
|
||||||
|
|
||||||
|
- name: Audit development dependencies
|
||||||
|
run: |
|
||||||
|
npmci command npm config set registry https://registry.npmjs.org
|
||||||
|
npmci command pnpm audit --audit-level=high --dev
|
||||||
|
continue-on-error: true
|
||||||
|
|
||||||
|
test:
|
||||||
|
if: ${{ always() }}
|
||||||
|
needs: security
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
container:
|
||||||
|
image: ${{ env.IMAGE }}
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Prepare
|
||||||
|
run: |
|
||||||
|
pnpm install -g pnpm
|
||||||
|
pnpm install -g @shipzone/npmci
|
||||||
|
npmci npm prepare
|
||||||
|
|
||||||
|
- name: Test stable
|
||||||
|
run: |
|
||||||
|
npmci node install stable
|
||||||
|
npmci npm install
|
||||||
|
npmci npm test
|
||||||
|
|
||||||
|
- name: Test build
|
||||||
|
run: |
|
||||||
|
npmci node install stable
|
||||||
|
npmci npm install
|
||||||
|
npmci npm build
|
||||||
|
|
||||||
|
release:
|
||||||
|
needs: test
|
||||||
|
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
container:
|
||||||
|
image: ${{ env.IMAGE }}
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Prepare
|
||||||
|
run: |
|
||||||
|
pnpm install -g pnpm
|
||||||
|
pnpm install -g @shipzone/npmci
|
||||||
|
npmci npm prepare
|
||||||
|
|
||||||
|
- name: Release
|
||||||
|
run: |
|
||||||
|
npmci node install stable
|
||||||
|
npmci npm publish
|
||||||
|
|
||||||
|
metadata:
|
||||||
|
needs: test
|
||||||
|
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
container:
|
||||||
|
image: ${{ env.IMAGE }}
|
||||||
|
continue-on-error: true
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Prepare
|
||||||
|
run: |
|
||||||
|
pnpm install -g pnpm
|
||||||
|
pnpm install -g @shipzone/npmci
|
||||||
|
npmci npm prepare
|
||||||
|
|
||||||
|
- name: Code quality
|
||||||
|
run: |
|
||||||
|
npmci command npm install -g typescript
|
||||||
|
npmci npm install
|
||||||
|
|
||||||
|
- name: Trigger
|
||||||
|
run: npmci trigger
|
||||||
|
|
||||||
|
- name: Build docs and upload artifacts
|
||||||
|
run: |
|
||||||
|
npmci node install stable
|
||||||
|
npmci npm install
|
||||||
|
pnpm install -g @git.zone/tsdoc
|
||||||
|
npmci command tsdoc
|
||||||
|
continue-on-error: true
|
@ -12,40 +12,36 @@ stages:
|
|||||||
- release
|
- release
|
||||||
- metadata
|
- metadata
|
||||||
|
|
||||||
|
before_script:
|
||||||
|
- pnpm install -g pnpm
|
||||||
|
- pnpm install -g @shipzone/npmci
|
||||||
|
- npmci npm prepare
|
||||||
|
|
||||||
|
# ====================
|
||||||
|
# security stage
|
||||||
|
# ====================
|
||||||
# ====================
|
# ====================
|
||||||
# security stage
|
# security stage
|
||||||
# ====================
|
# ====================
|
||||||
mirror:
|
|
||||||
stage: security
|
|
||||||
script:
|
|
||||||
- npmci git mirror
|
|
||||||
only:
|
|
||||||
- tags
|
|
||||||
tags:
|
|
||||||
- lossless
|
|
||||||
- docker
|
|
||||||
- notpriv
|
|
||||||
|
|
||||||
auditProductionDependencies:
|
auditProductionDependencies:
|
||||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
stage: security
|
stage: security
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
- npmci command npm install --production --ignore-scripts
|
- npmci command pnpm audit --audit-level=high --prod
|
||||||
- npmci command npm config set registry https://registry.npmjs.org
|
|
||||||
- npmci command npm audit --audit-level=high --only=prod --production
|
|
||||||
tags:
|
tags:
|
||||||
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
|
allow_failure: true
|
||||||
|
|
||||||
auditDevDependencies:
|
auditDevDependencies:
|
||||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
stage: security
|
stage: security
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci command npm install --ignore-scripts
|
|
||||||
- npmci command npm config set registry https://registry.npmjs.org
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
- npmci command npm audit --audit-level=high --only=dev
|
- npmci command pnpm audit --audit-level=high --dev
|
||||||
tags:
|
tags:
|
||||||
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
allow_failure: true
|
allow_failure: true
|
||||||
|
|
||||||
@ -56,7 +52,6 @@ auditDevDependencies:
|
|||||||
testStable:
|
testStable:
|
||||||
stage: test
|
stage: test
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci node install stable
|
- npmci node install stable
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci npm test
|
- npmci npm test
|
||||||
@ -67,10 +62,9 @@ testStable:
|
|||||||
testBuild:
|
testBuild:
|
||||||
stage: test
|
stage: test
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci node install stable
|
- npmci node install stable
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci command npm run build
|
- npmci npm build
|
||||||
coverage: /\d+.?\d+?\%\s*coverage/
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
tags:
|
tags:
|
||||||
- docker
|
- docker
|
||||||
@ -96,10 +90,9 @@ codequality:
|
|||||||
only:
|
only:
|
||||||
- tags
|
- tags
|
||||||
script:
|
script:
|
||||||
- npmci command npm install -g tslint typescript
|
- npmci command npm install -g typescript
|
||||||
- npmci npm prepare
|
- npmci npm prepare
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
|
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
@ -119,11 +112,9 @@ trigger:
|
|||||||
pages:
|
pages:
|
||||||
stage: metadata
|
stage: metadata
|
||||||
script:
|
script:
|
||||||
- npmci node install lts
|
- npmci node install stable
|
||||||
- npmci command npm install -g @gitzone/tsdoc
|
|
||||||
- npmci npm prepare
|
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci command tsdoc
|
- npmci command npm run buildDocs
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
|
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -2,28 +2,10 @@
|
|||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"configurations": [
|
"configurations": [
|
||||||
{
|
{
|
||||||
"name": "current file",
|
"command": "npm test",
|
||||||
"type": "node",
|
"name": "Run npm test",
|
||||||
"request": "launch",
|
"request": "launch",
|
||||||
"args": [
|
"type": "node-terminal"
|
||||||
"${relativeFile}"
|
|
||||||
],
|
|
||||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
|
||||||
"cwd": "${workspaceRoot}",
|
|
||||||
"protocol": "inspector",
|
|
||||||
"internalConsoleOptions": "openOnSessionStart"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "test.ts",
|
|
||||||
"type": "node",
|
|
||||||
"request": "launch",
|
|
||||||
"args": [
|
|
||||||
"test/test.ts"
|
|
||||||
],
|
|
||||||
"runtimeArgs": ["-r", "@gitzone/tsrun"],
|
|
||||||
"cwd": "${workspaceRoot}",
|
|
||||||
"protocol": "inspector",
|
|
||||||
"internalConsoleOptions": "openOnSessionStart"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
"githost": "gitlab.com",
|
"githost": "gitlab.com",
|
||||||
"gitscope": "designestate",
|
"gitscope": "designestate",
|
||||||
"gitrepo": "dees-element",
|
"gitrepo": "dees-element",
|
||||||
"shortDescription": "a custom element class extending lit element class",
|
"description": "a custom element class extending lit element class",
|
||||||
"npmPackagename": "@designestate/dees-element",
|
"npmPackagename": "@designestate/dees-element",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"projectDomain": "design.estate"
|
"projectDomain": "design.estate"
|
||||||
|
11892
package-lock.json
generated
11892
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
28
package.json
28
package.json
@ -1,30 +1,30 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-element",
|
"name": "@design.estate/dees-element",
|
||||||
"version": "1.0.19",
|
"version": "2.0.29",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "a custom element class extending lit element class",
|
"description": "a custom element class extending lit element class",
|
||||||
"main": "dist_ts/index.js",
|
"main": "dist_ts/index.js",
|
||||||
"typings": "dist_ts/index.d.ts",
|
"typings": "dist_ts/index.d.ts",
|
||||||
|
"type": "module",
|
||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "(tstest test/ --web)",
|
"test": "(tstest test/ --web)",
|
||||||
"build": "(tsbuild --web)"
|
"build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
|
||||||
|
"buildDocs": "tsdoc"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.25",
|
"@git.zone/tsbuild": "^2.1.70",
|
||||||
"@gitzone/tsbundle": "^1.0.80",
|
"@git.zone/tsbundle": "^2.0.8",
|
||||||
"@gitzone/tstest": "^1.0.44",
|
"@git.zone/tstest": "^1.0.81",
|
||||||
"@pushrocks/tapbundle": "^3.2.14",
|
"@push.rocks/tapbundle": "^5.0.15",
|
||||||
"@types/node": "^14.14.37",
|
"@types/node": "^20.6.2"
|
||||||
"tslint": "^6.1.3",
|
|
||||||
"tslint-config-prettier": "^1.15.0"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^1.0.87",
|
"@design.estate/dees-domtools": "^2.0.41",
|
||||||
"@pushrocks/isounique": "^1.0.4",
|
"@push.rocks/isounique": "^1.0.5",
|
||||||
"@pushrocks/smartrx": "^2.0.19",
|
"@push.rocks/smartrx": "^3.0.6",
|
||||||
"lit-element": "^2.4.0"
|
"lit": "^2.8.0"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"last 1 chrome versions"
|
"last 1 chrome versions"
|
||||||
|
5666
pnpm-lock.yaml
generated
Normal file
5666
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -21,7 +21,6 @@ Code Style | [](htt
|
|||||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@ -33,7 +32,6 @@ We are always happy for code contributions. If you are not the code contributing
|
|||||||
|
|
||||||
For further information read the linked docs at the top of this readme.
|
For further information read the linked docs at the top of this readme.
|
||||||
|
|
||||||
> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
## Legal
|
||||||
|
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||||
|
|
||||||
[](https://maintainedby.lossless.com)
|
|
||||||
|
@ -1,21 +1,22 @@
|
|||||||
import { expect, tap } from '@pushrocks/tapbundle';
|
import { expect, tap } from '@push.rocks/tapbundle';
|
||||||
import * as deesElement from '../ts/index';
|
import * as deesElement from '../ts/index.js';
|
||||||
|
|
||||||
tap.test('should create a static element', async () => {
|
tap.test('should create a static element', async () => {
|
||||||
@deesElement.customElement('my-button')
|
@deesElement.customElement('my-button')
|
||||||
class MyButton extends deesElement.DeesElement {
|
class MyButton extends deesElement.DeesElement {
|
||||||
// STATIC
|
// STATIC
|
||||||
public static styles = [
|
public static styles = [
|
||||||
|
deesElement.cssManager.defaultStyles,
|
||||||
deesElement.css`
|
deesElement.css`
|
||||||
.buttonClass {
|
.buttonClass {
|
||||||
background: ${deesElement.cssManager.bdTheme('blue', 'black')};
|
background: ${deesElement.cssManager.bdTheme('blue', 'black')};
|
||||||
}
|
}
|
||||||
`
|
`,
|
||||||
];
|
];
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
render() {
|
render() {
|
||||||
return deesElement.html`<div class="buttonClass">My Button</div>`
|
return deesElement.html`<div class="buttonClass">My Button</div>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
8
ts/00_commitinfo_data.ts
Normal file
8
ts/00_commitinfo_data.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* autocreated commitinfo by @pushrocks/commitinfo
|
||||||
|
*/
|
||||||
|
export const commitinfo = {
|
||||||
|
name: '@design.estate/dees-element',
|
||||||
|
version: '2.0.29',
|
||||||
|
description: 'a custom element class extending lit element class'
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
import { CSSResult, unsafeCSS } from 'lit-element';
|
import { CSSResult, unsafeCSS } from 'lit';
|
||||||
import * as plugins from './dees-element.plugins';
|
import * as plugins from './dees-element.plugins.js';
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
export interface IBdVarTriplet {
|
export interface IBdVarTriplet {
|
||||||
cssVarName: string;
|
cssVarName: string;
|
||||||
@ -28,24 +28,43 @@ export class CssManager {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
public get defaultStyles () {
|
public get defaultStyles() {
|
||||||
return domtools.elementBasic.staticStyles;
|
return domtools.elementBasic.staticStyles;
|
||||||
}
|
}
|
||||||
|
|
||||||
public cssForTablet(contentArg) {
|
public cssForDesktop(contentArg: CSSResult) {
|
||||||
|
return unsafeCSS(domtools.breakpoints.cssForDesktop(contentArg));
|
||||||
|
}
|
||||||
|
|
||||||
|
public cssForNotebook(contentArg: CSSResult) {
|
||||||
|
return unsafeCSS(domtools.breakpoints.cssForNotebook(contentArg));
|
||||||
|
}
|
||||||
|
|
||||||
|
public cssForTablet(contentArg: CSSResult) {
|
||||||
return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
|
return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
|
||||||
};
|
}
|
||||||
|
|
||||||
public cssForPhablet(contentArg) {
|
public cssForPhablet(contentArg: CSSResult) {
|
||||||
return unsafeCSS(domtools.breakpoints.cssForPhablet(contentArg));
|
return unsafeCSS(domtools.breakpoints.cssForPhablet(contentArg));
|
||||||
}
|
}
|
||||||
|
|
||||||
public cssForPhone(contentArg) {
|
public cssForPhone(contentArg: CSSResult) {
|
||||||
return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
|
return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
|
||||||
};
|
}
|
||||||
|
|
||||||
public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
|
public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
|
||||||
let returnCssVar: string;
|
let returnCssVar: string;
|
||||||
|
|
||||||
|
// lets determine the default value for quick page rendering.
|
||||||
|
let defaultValue: string;
|
||||||
|
if (domtools.DomTools.getGlobalDomToolsSync()) {
|
||||||
|
defaultValue = domtools.DomTools.getGlobalDomToolsSync().themeManager.goBrightBoolean
|
||||||
|
? brightValueArg
|
||||||
|
: darkValueArg;
|
||||||
|
} else {
|
||||||
|
defaultValue = darkValueArg;
|
||||||
|
}
|
||||||
|
|
||||||
const existingTriplet = this.bdVarTripletStore.find(
|
const existingTriplet = this.bdVarTripletStore.find(
|
||||||
(tripletArg) =>
|
(tripletArg) =>
|
||||||
tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg
|
tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg
|
||||||
@ -59,13 +78,14 @@ export class CssManager {
|
|||||||
darkValue: darkValueArg,
|
darkValue: darkValueArg,
|
||||||
};
|
};
|
||||||
this.bdVarTripletStore.push(newTriplet);
|
this.bdVarTripletStore.push(newTriplet);
|
||||||
|
|
||||||
this.domtoolsPromise.then(async (domtoolsArg) => {
|
this.domtoolsPromise.then(async (domtoolsArg) => {
|
||||||
await domtoolsArg.domReady.promise;
|
await domtoolsArg.domReady.promise;
|
||||||
document.body.style.setProperty(newTriplet.cssVarName, this.goBright ? newTriplet.brightValue : newTriplet.darkValue);
|
document.body.style.setProperty(newTriplet.cssVarName, defaultValue);
|
||||||
});
|
});
|
||||||
returnCssVar = newTriplet.cssVarName;
|
returnCssVar = newTriplet.cssVarName;
|
||||||
}
|
}
|
||||||
return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
|
return plugins.lit.unsafeCSS(`var(${returnCssVar}, ${defaultValue})`);
|
||||||
}
|
}
|
||||||
|
|
||||||
public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {
|
public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {
|
||||||
@ -75,6 +95,6 @@ export class CssManager {
|
|||||||
gapSizeArg * (amountOfColumnsArg - 1)
|
gapSizeArg * (amountOfColumnsArg - 1)
|
||||||
}px/${amountOfColumnsArg}))`;
|
}px/${amountOfColumnsArg}))`;
|
||||||
}
|
}
|
||||||
return plugins.litElement.unsafeCSS(returnString);
|
return plugins.lit.unsafeCSS(returnString);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -1,38 +1,51 @@
|
|||||||
import * as plugins from './dees-element.plugins';
|
import * as plugins from './dees-element.plugins.js';
|
||||||
|
|
||||||
export class DeesElement extends plugins.litElement.LitElement {
|
export class DeesElement extends plugins.lit.LitElement {
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
@plugins.litElement.property({ type: Boolean })
|
@plugins.lit.property({ type: Boolean })
|
||||||
public goBright: boolean = false;
|
public goBright: boolean = false;
|
||||||
|
|
||||||
// domtools
|
// domtools
|
||||||
public domtoolsPromise = plugins.domtools.elementBasic.setup(this);
|
public domtoolsPromise: Promise<plugins.domtools.DomTools>;
|
||||||
|
|
||||||
@plugins.litElement.property()
|
@plugins.lit.property()
|
||||||
domtools?: plugins.domtools.DomTools;
|
domtools?: plugins.domtools.DomTools;
|
||||||
|
|
||||||
|
public rxSubscriptions: plugins.smartrx.rxjs.Subscription[] = [];
|
||||||
private themeSubscription: plugins.smartrx.rxjs.Subscription;
|
private themeSubscription: plugins.smartrx.rxjs.Subscription;
|
||||||
|
|
||||||
constructor() {
|
private elementDomReadyDeferred = plugins.domtools.plugins.smartpromise.defer();
|
||||||
|
public elementDomReady = this.elementDomReadyDeferred.promise;
|
||||||
|
|
||||||
|
constructor(optionsArg: plugins.domtools.IDomToolsContructorOptions = {}) {
|
||||||
super();
|
super();
|
||||||
|
this.domtoolsPromise = plugins.domtools.elementBasic.setup(this, optionsArg);
|
||||||
this.domtoolsPromise.then((domtoolsArg) => {
|
this.domtoolsPromise.then((domtoolsArg) => {
|
||||||
this.domtools = domtoolsArg;
|
this.domtools = domtoolsArg;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
public connectedCallback() {
|
public async connectedCallback() {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
this.domtoolsPromise.then(async (domtools) => {
|
const domtools = await this.domtoolsPromise;
|
||||||
this.themeSubscription = domtools.themeManager.themeObservable.subscribe((goBrightArg) => {
|
this.themeSubscription = domtools.themeManager.themeObservable.subscribe((goBrightArg) => {
|
||||||
this.goBright = goBrightArg;
|
this.goBright = goBrightArg;
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
this.rxSubscriptions.push(this.themeSubscription);
|
||||||
this.dispatchEvent(new CustomEvent('deesElementConnected'));
|
this.dispatchEvent(new CustomEvent('deesElementConnected'));
|
||||||
}
|
}
|
||||||
|
|
||||||
public disconnectedCallback() {
|
public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
|
||||||
|
super.firstUpdated(_changedProperties);
|
||||||
|
this.elementDomReadyDeferred.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
public async disconnectedCallback() {
|
||||||
|
await this.domtoolsPromise;
|
||||||
super.disconnectedCallback();
|
super.disconnectedCallback();
|
||||||
this.themeSubscription.unsubscribe();
|
for (const subscription of this.rxSubscriptions) {
|
||||||
|
subscription.unsubscribe();
|
||||||
|
}
|
||||||
this.dispatchEvent(new CustomEvent('deesElementDisconnected'));
|
this.dispatchEvent(new CustomEvent('deesElementDisconnected'));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
50
ts/dees-element.classes.resolvedirective.ts
Normal file
50
ts/dees-element.classes.resolvedirective.ts
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import { type TemplateResult, noChange } from 'lit';
|
||||||
|
import { AsyncDirective, directive } from 'lit/async-directive.js';
|
||||||
|
|
||||||
|
class ResolveDirective extends AsyncDirective {
|
||||||
|
promise: Promise<unknown> | undefined;
|
||||||
|
hasPromiseSettled: boolean = false;
|
||||||
|
|
||||||
|
render(promise: Promise<unknown>) {
|
||||||
|
if (this.promise !== promise) {
|
||||||
|
this.promise = promise;
|
||||||
|
|
||||||
|
if (this.isConnected) {
|
||||||
|
this.handlePromise(promise);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return noChange;
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePromise(promise: Promise<unknown>) {
|
||||||
|
this.hasPromiseSettled = false;
|
||||||
|
|
||||||
|
promise.then((value) => {
|
||||||
|
if (this.promise === promise && !this.hasPromiseSettled) {
|
||||||
|
this.setValue(value);
|
||||||
|
this.hasPromiseSettled = true;
|
||||||
|
}
|
||||||
|
}).catch((error) => {
|
||||||
|
if (this.promise === promise && !this.hasPromiseSettled) {
|
||||||
|
this.setValue(error);
|
||||||
|
this.hasPromiseSettled = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnected() {
|
||||||
|
this.hasPromiseSettled = true; // prevent setting value if the promise settles after disconnection
|
||||||
|
}
|
||||||
|
|
||||||
|
reconnected() {
|
||||||
|
if (!this.hasPromiseSettled) {
|
||||||
|
this.handlePromise(this.promise!);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const resolve = directive(ResolveDirective);
|
||||||
|
export const resolveExec = (funcArg: () => Promise<TemplateResult | unknown>) => {
|
||||||
|
return resolve(funcArg());
|
||||||
|
}
|
37
ts/dees-element.classes.subscribedirective.ts
Normal file
37
ts/dees-element.classes.subscribedirective.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { noChange } from 'lit';
|
||||||
|
import { AsyncDirective, directive } from 'lit/async-directive.js';
|
||||||
|
import { rxjs } from '@push.rocks/smartrx';
|
||||||
|
|
||||||
|
class SubscribeDirective extends AsyncDirective {
|
||||||
|
observable: rxjs.Observable<unknown> | undefined;
|
||||||
|
sub: rxjs.Subscription | null = null;
|
||||||
|
|
||||||
|
render(observable: rxjs.Observable<unknown>) {
|
||||||
|
if (this.observable !== observable) {
|
||||||
|
this.sub?.unsubscribe();
|
||||||
|
this.observable = observable;
|
||||||
|
|
||||||
|
if (this.isConnected) {
|
||||||
|
this.subscribe(observable);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return noChange;
|
||||||
|
}
|
||||||
|
|
||||||
|
subscribe(observable: rxjs.Observable<unknown>) {
|
||||||
|
this.sub = observable.subscribe((v: unknown) => {
|
||||||
|
this.setValue(v);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnected() {
|
||||||
|
this.sub?.unsubscribe();
|
||||||
|
}
|
||||||
|
|
||||||
|
reconnected() {
|
||||||
|
this.subscribe(this.observable!);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const subscribe = directive(SubscribeDirective);
|
@ -1,24 +1,19 @@
|
|||||||
// pushrocks scope
|
// pushrocks scope
|
||||||
import * as isounique from '@pushrocks/isounique';
|
import * as isounique from '@push.rocks/isounique';
|
||||||
import * as smartrx from '@pushrocks/smartrx';
|
import * as smartrx from '@push.rocks/smartrx';
|
||||||
|
|
||||||
export {
|
export { isounique, smartrx };
|
||||||
isounique,
|
|
||||||
smartrx
|
|
||||||
};
|
|
||||||
|
|
||||||
// third party scope
|
// third party scope
|
||||||
import { css, unsafeCSS, LitElement, property } from 'lit-element';
|
import { css, unsafeCSS, LitElement } from 'lit';
|
||||||
const litElement = {
|
import { property } from 'lit/decorators/property.js';
|
||||||
|
const lit = {
|
||||||
css,
|
css,
|
||||||
unsafeCSS,
|
unsafeCSS,
|
||||||
LitElement,
|
LitElement,
|
||||||
property
|
property,
|
||||||
};
|
};
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@design.estate/dees-domtools';
|
||||||
|
|
||||||
export {
|
export { lit, domtools };
|
||||||
litElement,
|
|
||||||
domtools
|
|
||||||
};
|
|
||||||
|
43
ts/index.ts
43
ts/index.ts
@ -1,16 +1,35 @@
|
|||||||
import { CssManager } from './dees-element.classes.cssmanager';
|
import { CssManager } from './dees-element.classes.cssmanager.js';
|
||||||
import * as plugins from './dees-element.plugins';
|
|
||||||
|
|
||||||
export {
|
// lit exports
|
||||||
customElement,
|
export { html, type TemplateResult, css, unsafeCSS, render, type CSSResult } from 'lit';
|
||||||
property,
|
export { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
||||||
internalProperty,
|
|
||||||
html,
|
|
||||||
TemplateResult,
|
|
||||||
css,
|
|
||||||
unsafeCSS
|
|
||||||
} from 'lit-element';
|
|
||||||
|
|
||||||
export { DeesElement } from './dees-element.classes.dees-element';
|
export { customElement } from 'lit/decorators/custom-element.js';
|
||||||
|
|
||||||
|
export { property, state, query, queryAll, queryAsync } from 'lit/decorators.js';
|
||||||
|
|
||||||
|
export { until } from 'lit/directives/until.js';
|
||||||
|
export { asyncAppend } from 'lit/directives/async-append.js';
|
||||||
|
|
||||||
|
// domtools exports
|
||||||
|
import * as domtools from '@design.estate/dees-domtools';
|
||||||
|
export { domtools };
|
||||||
|
|
||||||
|
// DeesElements exports
|
||||||
|
export * from './dees-element.classes.dees-element.js';
|
||||||
|
export * from './dees-element.classes.subscribedirective.js';
|
||||||
|
export * from './dees-element.classes.resolvedirective.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* a singleton instance of CssManager
|
||||||
|
*/
|
||||||
export const cssManager = new CssManager();
|
export const cssManager = new CssManager();
|
||||||
|
|
||||||
|
// better scoped exports
|
||||||
|
import { resolve } from './dees-element.classes.resolvedirective.js';
|
||||||
|
import { subscribe } from './dees-element.classes.subscribedirective.js';
|
||||||
|
|
||||||
|
export const directives = {
|
||||||
|
resolve,
|
||||||
|
subscribe,
|
||||||
|
}
|
||||||
|
@ -1,16 +1,14 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es2017",
|
"experimentalDecorators": true,
|
||||||
"module": "es2015",
|
"useDefineForClassFields": false,
|
||||||
"moduleResolution": "node",
|
"target": "ES2022",
|
||||||
"lib": ["es2017", "dom"],
|
"module": "ES2022",
|
||||||
"declaration": true,
|
"moduleResolution": "nodenext",
|
||||||
"inlineSources": true,
|
"esModuleInterop": true,
|
||||||
"inlineSourceMap": true,
|
"verbatimModuleSyntax": true
|
||||||
"noUnusedLocals": true,
|
},
|
||||||
"noFallthroughCasesInSwitch": true,
|
"exclude": [
|
||||||
"outDir": "dist/",
|
"dist_*/**/*.d.ts"
|
||||||
"skipLibCheck": true,
|
]
|
||||||
"experimentalDecorators": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
17
tslint.json
17
tslint.json
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": ["tslint:latest", "tslint-config-prettier"],
|
|
||||||
"rules": {
|
|
||||||
"semicolon": [true, "always"],
|
|
||||||
"no-console": false,
|
|
||||||
"ordered-imports": false,
|
|
||||||
"object-literal-sort-keys": false,
|
|
||||||
"member-ordering": {
|
|
||||||
"options":{
|
|
||||||
"order": [
|
|
||||||
"static-method"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"defaultSeverity": "warning"
|
|
||||||
}
|
|
Reference in New Issue
Block a user