Compare commits
85 Commits
Author | SHA1 | Date | |
---|---|---|---|
e321286259 | |||
5f141feb50 | |||
7b99c70275 | |||
9f3b396633 | |||
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 |
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
|
||||
- metadata
|
||||
|
||||
before_script:
|
||||
- pnpm install -g pnpm
|
||||
- pnpm install -g @shipzone/npmci
|
||||
- npmci npm prepare
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
mirror:
|
||||
stage: security
|
||||
script:
|
||||
- npmci git mirror
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
auditProductionDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --production --ignore-scripts
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command npm audit --audit-level=high --only=prod --production
|
||||
- npmci command pnpm audit --audit-level=high --prod
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --ignore-scripts
|
||||
- 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:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
@ -56,7 +52,6 @@ auditDevDependencies:
|
||||
testStable:
|
||||
stage: test
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm test
|
||||
@ -67,10 +62,9 @@ testStable:
|
||||
testBuild:
|
||||
stage: test
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command npm run build
|
||||
- npmci npm build
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- docker
|
||||
@ -96,10 +90,9 @@ codequality:
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g tslint typescript
|
||||
- npmci command npm install -g typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
@ -119,11 +112,9 @@ trigger:
|
||||
pages:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci node install lts
|
||||
- npmci command npm install -g @gitzone/tsdoc
|
||||
- npmci npm prepare
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command tsdoc
|
||||
- npmci command npm run buildDocs
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
|
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -2,28 +2,10 @@
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "current file",
|
||||
"type": "node",
|
||||
"command": "npm test",
|
||||
"name": "Run npm test",
|
||||
"request": "launch",
|
||||
"args": [
|
||||
"${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"
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -5,7 +5,7 @@
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "designestate",
|
||||
"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",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
|
25988
package-lock.json
generated
25988
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",
|
||||
"version": "1.0.25",
|
||||
"name": "@design.estate/dees-element",
|
||||
"version": "2.0.31",
|
||||
"private": false,
|
||||
"description": "a custom element class extending lit element class",
|
||||
"main": "dist_ts/index.js",
|
||||
"typings": "dist_ts/index.d.ts",
|
||||
"type": "module",
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "(tstest test/ --web)",
|
||||
"build": "(tsbuild --web)"
|
||||
"build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
|
||||
"buildDocs": "tsdoc"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.27",
|
||||
"@gitzone/tsbundle": "^1.0.87",
|
||||
"@gitzone/tstest": "^1.0.57",
|
||||
"@pushrocks/tapbundle": "^3.2.14",
|
||||
"@types/node": "^16.9.1",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.18.0"
|
||||
"@git.zone/tsbuild": "^2.1.70",
|
||||
"@git.zone/tsbundle": "^2.0.10",
|
||||
"@git.zone/tstest": "^1.0.81",
|
||||
"@push.rocks/tapbundle": "^5.0.15",
|
||||
"@types/node": "^20.8.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.95",
|
||||
"@pushrocks/isounique": "^1.0.4",
|
||||
"@pushrocks/smartrx": "^2.0.19",
|
||||
"lit-element": "^2.5.1"
|
||||
"@design.estate/dees-domtools": "^2.0.54",
|
||||
"@push.rocks/isounique": "^1.0.5",
|
||||
"@push.rocks/smartrx": "^3.0.6",
|
||||
"lit": "^3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
|
5665
pnpm-lock.yaml
generated
Normal file
5665
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 (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
||||
|
||||
## 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.
|
||||
|
||||
> 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)
|
||||
|
||||
[](https://maintainedby.lossless.com)
|
||||
|
@ -1,21 +1,22 @@
|
||||
import { expect, tap } from '@pushrocks/tapbundle';
|
||||
import * as deesElement from '../ts/index';
|
||||
import { expect, tap } from '@push.rocks/tapbundle';
|
||||
import * as deesElement from '../ts/index.js';
|
||||
|
||||
tap.test('should create a static element', async () => {
|
||||
@deesElement.customElement('my-button')
|
||||
class MyButton extends deesElement.DeesElement {
|
||||
// STATIC
|
||||
public static styles = [
|
||||
deesElement.cssManager.defaultStyles,
|
||||
deesElement.css`
|
||||
.buttonClass {
|
||||
background: ${deesElement.cssManager.bdTheme('blue', 'black')};
|
||||
}
|
||||
`
|
||||
`,
|
||||
];
|
||||
|
||||
// INSTANCE
|
||||
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.31',
|
||||
description: 'a custom element class extending lit element class'
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
import { CSSResult, unsafeCSS } from 'lit-element';
|
||||
import * as plugins from './dees-element.plugins';
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import { CSSResult, unsafeCSS } from 'lit';
|
||||
import * as plugins from './dees-element.plugins.js';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
export interface IBdVarTriplet {
|
||||
cssVarName: string;
|
||||
@ -28,24 +28,43 @@ export class CssManager {
|
||||
});
|
||||
}
|
||||
|
||||
public get defaultStyles () {
|
||||
public get defaultStyles() {
|
||||
return domtools.elementBasic.staticStyles;
|
||||
}
|
||||
|
||||
public cssForTablet(contentArg) {
|
||||
return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
|
||||
};
|
||||
public cssForDesktop(contentArg: CSSResult) {
|
||||
return unsafeCSS(domtools.breakpoints.cssForDesktop(contentArg));
|
||||
}
|
||||
|
||||
public cssForPhablet(contentArg) {
|
||||
public cssForNotebook(contentArg: CSSResult) {
|
||||
return unsafeCSS(domtools.breakpoints.cssForNotebook(contentArg));
|
||||
}
|
||||
|
||||
public cssForTablet(contentArg: CSSResult) {
|
||||
return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
|
||||
}
|
||||
|
||||
public cssForPhablet(contentArg: CSSResult) {
|
||||
return unsafeCSS(domtools.breakpoints.cssForPhablet(contentArg));
|
||||
}
|
||||
|
||||
public cssForPhone(contentArg) {
|
||||
public cssForPhone(contentArg: CSSResult) {
|
||||
return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
|
||||
};
|
||||
}
|
||||
|
||||
public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
|
||||
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(
|
||||
(tripletArg) =>
|
||||
tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg
|
||||
@ -59,13 +78,14 @@ export class CssManager {
|
||||
darkValue: darkValueArg,
|
||||
};
|
||||
this.bdVarTripletStore.push(newTriplet);
|
||||
|
||||
this.domtoolsPromise.then(async (domtoolsArg) => {
|
||||
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;
|
||||
}
|
||||
return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
|
||||
return plugins.lit.unsafeCSS(`var(${returnCssVar}, ${defaultValue})`);
|
||||
}
|
||||
|
||||
public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {
|
||||
@ -75,6 +95,6 @@ export class CssManager {
|
||||
gapSizeArg * (amountOfColumnsArg - 1)
|
||||
}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
|
||||
@plugins.litElement.property({ type: Boolean })
|
||||
@plugins.lit.property({ type: Boolean })
|
||||
public goBright: boolean = false;
|
||||
|
||||
// domtools
|
||||
public domtoolsPromise = plugins.domtools.elementBasic.setup(this);
|
||||
public domtoolsPromise: Promise<plugins.domtools.DomTools>;
|
||||
|
||||
@plugins.litElement.property()
|
||||
@plugins.lit.property()
|
||||
domtools?: plugins.domtools.DomTools;
|
||||
|
||||
public rxSubscriptions: 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();
|
||||
this.domtoolsPromise = plugins.domtools.elementBasic.setup(this, optionsArg);
|
||||
this.domtoolsPromise.then((domtoolsArg) => {
|
||||
this.domtools = domtoolsArg;
|
||||
});
|
||||
}
|
||||
|
||||
public connectedCallback() {
|
||||
public async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.domtoolsPromise.then(async (domtools) => {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
this.themeSubscription = domtools.themeManager.themeObservable.subscribe((goBrightArg) => {
|
||||
this.goBright = goBrightArg;
|
||||
});
|
||||
});
|
||||
this.rxSubscriptions.push(this.themeSubscription);
|
||||
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();
|
||||
this.themeSubscription.unsubscribe();
|
||||
for (const subscription of this.rxSubscriptions) {
|
||||
subscription.unsubscribe();
|
||||
}
|
||||
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
|
||||
import * as isounique from '@pushrocks/isounique';
|
||||
import * as smartrx from '@pushrocks/smartrx';
|
||||
import * as isounique from '@push.rocks/isounique';
|
||||
import * as smartrx from '@push.rocks/smartrx';
|
||||
|
||||
export {
|
||||
isounique,
|
||||
smartrx
|
||||
};
|
||||
export { isounique, smartrx };
|
||||
|
||||
// third party scope
|
||||
import { css, unsafeCSS, LitElement, property } from 'lit-element';
|
||||
const litElement = {
|
||||
import { css, unsafeCSS, LitElement } from 'lit';
|
||||
import { property } from 'lit/decorators/property.js';
|
||||
const lit = {
|
||||
css,
|
||||
unsafeCSS,
|
||||
LitElement,
|
||||
property
|
||||
property,
|
||||
};
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
export {
|
||||
litElement,
|
||||
domtools
|
||||
};
|
||||
export { lit, domtools };
|
||||
|
53
ts/index.ts
53
ts/index.ts
@ -1,21 +1,42 @@
|
||||
import { CssManager } from './dees-element.classes.cssmanager';
|
||||
import * as plugins from './dees-element.plugins';
|
||||
import { CssManager } from './dees-element.classes.cssmanager.js';
|
||||
|
||||
export {
|
||||
customElement,
|
||||
property,
|
||||
html,
|
||||
TemplateResult,
|
||||
css,
|
||||
unsafeCSS,
|
||||
state
|
||||
} from 'lit-element';
|
||||
// lit exports
|
||||
export { html, type TemplateResult, css, unsafeCSS, render, type CSSResult } from 'lit';
|
||||
export { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
export {
|
||||
domtools
|
||||
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();
|
||||
|
||||
// better scoped exports
|
||||
import { resolve } from './dees-element.classes.resolvedirective.js';
|
||||
import { subscribe } from './dees-element.classes.subscribedirective.js';
|
||||
|
||||
export const directives = {
|
||||
resolve,
|
||||
subscribe,
|
||||
}
|
||||
|
||||
export { DeesElement } from './dees-element.classes.dees-element';
|
||||
// type exports
|
||||
import type { rxjs } from '@push.rocks/smartrx';
|
||||
|
||||
export const cssManager = new CssManager();
|
||||
export type {
|
||||
rxjs,
|
||||
}
|
@ -1,16 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es2017", "dom"],
|
||||
"declaration": true,
|
||||
"inlineSources": true,
|
||||
"inlineSourceMap": true,
|
||||
"noUnusedLocals": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"outDir": "dist/",
|
||||
"skipLibCheck": true,
|
||||
"experimentalDecorators": true
|
||||
}
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"moduleResolution": "nodenext",
|
||||
"esModuleInterop": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"exclude": [
|
||||
"dist_*/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
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