@operato/scene-switch 0.0.1

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.
Files changed (25) hide show
  1. package/.editorconfig +29 -0
  2. package/CHANGELOG.md +16 -0
  3. package/LICENSE +21 -0
  4. package/README.md +41 -0
  5. package/assets/icon-simple-switch.png +0 -0
  6. package/demo/index.html +109 -0
  7. package/dist/src/index.js +3 -0
  8. package/helps/scene/component/simple-switch.ko.md +20 -0
  9. package/helps/scene/component/simple-switch.md +19 -0
  10. package/helps/scene/component/simple-switch.zh.md +19 -0
  11. package/package.json +55 -0
  12. package/src/editors/index.ts +1 -0
  13. package/src/index.ts +2 -0
  14. package/src/simple-switch-element.ts +92 -0
  15. package/src/simple-switch.ts +107 -0
  16. package/src/things-scene.d.ts +1 -0
  17. package/templates/index.js +3 -0
  18. package/templates/simple-switch.js +19 -0
  19. package/templates/simple-switch.png +0 -0
  20. package/things-scene.config.js +7 -0
  21. package/translations/en.json +6 -0
  22. package/translations/ko.json +6 -0
  23. package/translations/zh.json +6 -0
  24. package/tsconfig.json +22 -0
  25. package/web-dev-server.config.mjs +27 -0
package/.editorconfig ADDED
@@ -0,0 +1,29 @@
1
+ # EditorConfig helps developers define and maintain consistent
2
+ # coding styles between different editors and IDEs
3
+ # editorconfig.org
4
+
5
+ root = true
6
+
7
+
8
+ [*]
9
+
10
+ # Change these settings to your own preference
11
+ indent_style = space
12
+ indent_size = 2
13
+
14
+ # We recommend you to keep these unchanged
15
+ end_of_line = lf
16
+ charset = utf-8
17
+ trim_trailing_whitespace = true
18
+ insert_final_newline = true
19
+
20
+ [*.md]
21
+ trim_trailing_whitespace = false
22
+
23
+ [*.json]
24
+ indent_size = 2
25
+
26
+ [*.{html,js,md}]
27
+ block_comment_start = /**
28
+ block_comment = *
29
+ block_comment_end = */
package/CHANGELOG.md ADDED
@@ -0,0 +1,16 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ### 0.0.1 (2021-11-29)
7
+
8
+
9
+ ### :rocket: New Features
10
+
11
+ * add @operato/scene-switch 0.0.1 ([7ad1116](https://github.com/things-scene/operato-scene/commit/7ad1116fbc3064b8e9e38a330ddcb692e21b416d))
12
+
13
+
14
+ ### :bug: Bug Fix
15
+
16
+ * @operato/scene-switch package.json ([8d7ca6b](https://github.com/things-scene/operato-scene/commit/8d7ca6baf655d33d9d54e46a65550b14c03b41eb))
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 scene-switch
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,41 @@
1
+ # \<scene-switch>
2
+
3
+ ## Installation
4
+
5
+ ```bash
6
+ npm i scene-switch
7
+ ```
8
+
9
+ ## Usage
10
+
11
+ ```html
12
+
13
+ ```
14
+
15
+ ## Linting and formatting
16
+
17
+ To scan the project for linting and formatting errors, run
18
+
19
+ ```bash
20
+ npm run lint
21
+ ```
22
+
23
+ To automatically fix linting and formatting errors, run
24
+
25
+ ```bash
26
+ npm run format
27
+ ```
28
+
29
+ ## Tooling configs
30
+
31
+ For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
32
+
33
+ If you customize the configuration a lot, you can consider moving them to individual files.
34
+
35
+ ## Local Demo with `web-dev-server`
36
+
37
+ ```bash
38
+ npm start
39
+ ```
40
+
41
+ To run a local development server that serves the basic demo located in `demo/index.html`
package/assets/icon-simple-switch.png ADDED
Binary file
package/demo/index.html ADDED
@@ -0,0 +1,109 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" />
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ padding: 0;
10
+ overflow: hidden;
11
+
12
+ /* This is a font-stack that tries to use the system-default sans-serifs first */
13
+ font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
14
+ line-height: 1.5;
15
+ -webkit-font-smoothing: antialiased;
16
+ }
17
+
18
+ ox-board-viewer {
19
+ width: 100vw;
20
+ height: 100vh;
21
+ }
22
+ </style>
23
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
24
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
25
+ </head>
26
+ <body>
27
+ <div id="demo"></div>
28
+ <script type="module">
29
+ import { html, render } from 'lit'
30
+ import { ReferenceMap, create, error } from '@hatiolab/things-scene'
31
+ import '@operato/board'
32
+ import './dist/src/simple-switch.js'
33
+
34
+ const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
35
+ const boards = colors.map((color, idx) => {
36
+ var to = colors[(idx + 1) % colors.length]
37
+ return {
38
+ id: color,
39
+ model: {
40
+ width: 400,
41
+ height: 300,
42
+ fillStyle: color,
43
+ components: [
44
+ {
45
+ type: 'text',
46
+ left: 100,
47
+ top: 100,
48
+ width: 200,
49
+ height: 30,
50
+ text: `Click to move to ${to}`,
51
+ event: {
52
+ tap: {
53
+ action: 'goto',
54
+ target: to
55
+ }
56
+ }
57
+ },
58
+ {
59
+ type: 'simple-switch',
60
+ left: 100,
61
+ top: 300,
62
+ width: 100,
63
+ height: 30
64
+ }
65
+ ]
66
+ }
67
+ }
68
+ })
69
+
70
+ var provider = new ReferenceMap(
71
+ async (boardId, resolve, reject) => {
72
+ try {
73
+ const board = boards.find(board => {
74
+ return board.id === boardId
75
+ })
76
+ if (!board) {
77
+ throw `no board named as ${boardId}`
78
+ }
79
+
80
+ var scene
81
+
82
+ try {
83
+ scene = await provider.get(boardId)
84
+ console.warn('Board fetched more than twice.', boardId)
85
+ } catch (e) {
86
+ scene = create({
87
+ model: JSON.parse(JSON.stringify(board.model)),
88
+ mode: 0,
89
+ refProvider: provider
90
+ })
91
+ }
92
+ resolve(scene, board)
93
+ } catch (e) {
94
+ error(e)
95
+ reject(e)
96
+ }
97
+ },
98
+ async (id, ref) => {
99
+ ref.dispose()
100
+ }
101
+ )
102
+
103
+ render(
104
+ html` <ox-board-viewer .board=${boards[0]} .provider=${provider}></ox-board-viewer> `,
105
+ document.querySelector('#demo')
106
+ )
107
+ </script>
108
+ </body>
109
+ </html>
package/dist/src/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import SimpleSwitch from './simple-switch';
2
+ export default [SimpleSwitch];
3
+ //# sourceMappingURL=index.js.map
package/helps/scene/component/simple-switch.ko.md ADDED
@@ -0,0 +1,20 @@
1
+ # simple switch
2
+
3
+ ON / OFF 상태를 갖는 스위치 모양의 컴포넌트이다.
4
+ 마우스 클릭(또는 터치)으로 토글시킬 수 있다.
5
+
6
+ 컴포넌트의 value 값(true/false)으로 스위치를 ON / OFF 시킬 수 있다.
7
+ 스위치의 현재 상태 값은 data 속성으로 반영되므로, 데이타 스프레드에서 활용될 수 있다.
8
+
9
+ ## properties
10
+
11
+ - 둥글게
12
+ - 스위치의 모양
13
+ - on/off
14
+ - 스위치의 초기 상태
15
+ - on 색
16
+ - 스위치 ON 상태의 색상
17
+ - off 색
18
+ - 스위치 OFF 상태의 색상
19
+ - 썸네일 색
20
+ - 스위치 썸네일의 색상
package/helps/scene/component/simple-switch.md ADDED
@@ -0,0 +1,19 @@
1
+ # simple switch
2
+ It is a switch-shaped component with ON / OFF states.
3
+ It can be toggled with a mouse click (or touch).
4
+
5
+ You can turn the switch ON / OFF with the component value (true/false).
6
+ Since the current state value of the switch is reflected in the data attribute, it can be used in data spread.
7
+
8
+ ## properties
9
+
10
+ - round
11
+ - switch button use round shape
12
+ - on/off
13
+ - Initial state of the switch
14
+ - on-color
15
+ - Color of the switch ON state
16
+ - off-color
17
+ - Color of the switch OFF state
18
+ - thumbnail-color
19
+ - Switch thumbnail color
package/helps/scene/component/simple-switch.zh.md ADDED
@@ -0,0 +1,19 @@
1
+ # simple switch
2
+ 它是具有ON / OFF状态的开关状组件。
3
+ 可以通过单击（或触摸）来切换。
4
+
5
+ 您可以使用组件值(true/false)打开/关闭开关。
6
+ 由于开关的当前状态值反映在data属性中，因此可以将其用于数据传播。
7
+
8
+ ## properties
9
+
10
+ - 弧形
11
+ - 是否使用弧形开关
12
+ - 开/关
13
+ - 开关的初始状态
14
+ - 开起时颜色
15
+ - 开关ON状态的颜色
16
+ - 关闭时颜色
17
+ - 开关OFF状态的颜色
18
+ - 缩图颜色
19
+ - 缩略图颜色
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@operato/scene-switch",
3
+ "description": "switch component for operato-scene",
4
+ "license": "MIT",
5
+ "author": "heartyoh",
6
+ "version": "0.0.1",
7
+ "main": "dist/src/index.js",
8
+ "module": "dist/src/index.js",
9
+ "things-scene": true,
10
+ "exports": {
11
+ ".": "./dist/src/index.js"
12
+ },
13
+ "scripts": {
14
+ "serve": "tsc && things-factory-dev",
15
+ "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
16
+ "build": "tsc",
17
+ "prepublish": "tsc",
18
+ "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
19
+ "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
20
+ "migration": "things-factory-migration"
21
+ },
22
+ "dependencies": {
23
+ "lit": "^2.0.2"
24
+ },
25
+ "devDependencies": {
26
+ "@hatiolab/prettier-config": "^1.0.0",
27
+ "@hatiolab/things-scene": "^2.7.12",
28
+ "@operato/board": "^0.2.27",
29
+ "@things-factory/builder": "^4.0.5",
30
+ "@things-factory/operato-board": "^4.0.5",
31
+ "@typescript-eslint/eslint-plugin": "^4.33.0",
32
+ "@typescript-eslint/parser": "^4.33.0",
33
+ "@web/dev-server": "^0.1.28",
34
+ "concurrently": "^5.3.0",
35
+ "eslint": "^7.32.0",
36
+ "eslint-config-prettier": "^8.3.0",
37
+ "husky": "^4.3.8",
38
+ "lint-staged": "^10.5.4",
39
+ "prettier": "^2.4.1",
40
+ "tslib": "^2.3.1",
41
+ "typescript": "^4.5.2"
42
+ },
43
+ "prettier": "@hatiolab/prettier-config",
44
+ "husky": {
45
+ "hooks": {
46
+ "pre-commit": "lint-staged"
47
+ }
48
+ },
49
+ "lint-staged": {
50
+ "*.ts": [
51
+ "eslint --fix",
52
+ "prettier --write"
53
+ ]
54
+ }
55
+ }
package/src/editors/index.ts ADDED
@@ -0,0 +1 @@
1
+ export default [];
package/src/index.ts ADDED
@@ -0,0 +1,2 @@
1
+ import SimpleSwitch from './simple-switch'
2
+ export default [SimpleSwitch]
package/src/simple-switch-element.ts ADDED
@@ -0,0 +1,92 @@
1
+ import { LitElement, css, html } from 'lit'
2
+ import { customElement, property } from 'lit/decorators.js'
3
+
4
+ @customElement('ox-simple-switch')
5
+ export class SimpleSwitchElement extends LitElement {
6
+ static styles = css`
7
+ /* The switch - the box around the slider */
8
+ label {
9
+ position: relative;
10
+ display: inline-block;
11
+ width: 100%;
12
+ height: 100%;
13
+ }
14
+
15
+ /* Hide default HTML checkbox */
16
+ label input {
17
+ opacity: 0;
18
+ width: 0;
19
+ height: 0;
20
+ }
21
+
22
+ /* The slider */
23
+ span {
24
+ position: absolute;
25
+ cursor: pointer;
26
+ width: var(--ox-simple-switch-fullwidth);
27
+ height: var(--ox-simple-switch-fullheight);
28
+ top: calc(0 - var(--ox-simple-switch-thumbnail-size));
29
+ left: 0;
30
+ background-color: var(--ox-simple-switch-off-color, #ccc);
31
+ -webkit-transition: 0.4s;
32
+ transition: 0.4s;
33
+ }
34
+
35
+ span:before {
36
+ position: absolute;
37
+ content: '';
38
+ height: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
39
+ width: calc(var(--ox-simple-switch-thumbnail-size) - 8px);
40
+ left: 4px;
41
+ top: 4px;
42
+ background-color: var(--ox-simple-switch-thumbnail-color, white);
43
+ -webkit-transition: 0.4s;
44
+ transition: 0.4s;
45
+ }
46
+
47
+ input:checked + span {
48
+ background-color: var(--ox-simple-switch-on-color, #2196f3);
49
+ }
50
+
51
+ input:checked + span:before {
52
+ -webkit-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
53
+ translateY(calc(var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)));
54
+ -ms-transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
55
+ translateY(calc(var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)));
56
+ transform: translateX(calc(var(--ox-simple-switch-fullwidth) - var(--ox-simple-switch-thumbnail-size)))
57
+ translateY(calc(var(--ox-simple-switch-fullheight) - var(--ox-simple-switch-thumbnail-size)));
58
+ }
59
+
60
+ /* Rounded sliders */
61
+ span[round] {
62
+ border-radius: calc(var(--ox-simple-switch-thumbnail-size) / 2);
63
+ }
64
+
65
+ span[round]:before {
66
+ border-radius: calc((var(--ox-simple-switch-thumbnail-size) - 8px) / 2);
67
+ }
68
+ `
69
+
70
+ @property({ type: Boolean }) round: boolean = false
71
+ @property({ type: Boolean }) value: boolean = false
72
+
73
+ render() {
74
+ return html`
75
+ <label>
76
+ <input type="checkbox" .checked=${this.value} />
77
+ <span ?round=${this.round}></span>
78
+ </label>
79
+ `
80
+ }
81
+
82
+ firstUpdated() {
83
+ this.renderRoot.addEventListener('change', (e: Event) => {
84
+ this.value = (e.target as HTMLInputElement)?.checked
85
+ this.dispatchEvent(
86
+ new CustomEvent('value-change', {
87
+ detail: this.value
88
+ })
89
+ )
90
+ })
91
+ }
92
+ }
package/src/simple-switch.ts ADDED
@@ -0,0 +1,107 @@
1
+ /*
2
+ * Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+
5
+ import './simple-switch-element';
6
+
7
+ import { Component, HTMLOverlayElement } from '@hatiolab/things-scene';
8
+
9
+ import { SimpleSwitchElement } from './simple-switch-element';
10
+
11
+ const NATURE = {
12
+ mutable: false,
13
+ resizable: true,
14
+ rotatable: true,
15
+ properties: [
16
+ {
17
+ type: 'checkbox',
18
+ label: 'round',
19
+ name: 'round'
20
+ },
21
+ {
22
+ type: 'checkbox',
23
+ label: 'on/off',
24
+ name: 'data'
25
+ },
26
+ {
27
+ type: 'color',
28
+ label: 'on-color',
29
+ name: 'onColor'
30
+ },
31
+ {
32
+ type: 'color',
33
+ label: 'off-color',
34
+ name: 'offColor'
35
+ },
36
+ {
37
+ type: 'color',
38
+ label: 'thumbnail-color',
39
+ name: 'thumbnailColor'
40
+ }
41
+ ],
42
+ 'value-property': 'data',
43
+ help: 'scene/component/simple-switch'
44
+ }
45
+
46
+ export default class SimpleSwitch extends HTMLOverlayElement {
47
+ static get nature() {
48
+ return NATURE
49
+ }
50
+
51
+ oncreate_element(toggle: SimpleSwitchElement) {
52
+ toggle.addEventListener('value-change', (e: Event) => {
53
+ var checked = (e as CustomEvent).detail
54
+
55
+ this.setState({
56
+ data: checked
57
+ })
58
+ })
59
+ }
60
+
61
+ dispose() {
62
+ super.dispose()
63
+ }
64
+
65
+ /*
66
+ * 컴포넌트의 생성 또는 속성 변화 시에 호출되며,
67
+ * 그에 따른 html element의 반영이 필요한 부분을 구현한다.
68
+ *
69
+ * ThingsComponent state => HTML element properties
70
+ */
71
+ setElementProperties(toggle: SimpleSwitchElement) {
72
+ var { round, data, onColor, offColor, thumbnailColor } = this.state
73
+
74
+ toggle.round = round
75
+ toggle.value = 'true' == String(data)
76
+
77
+ onColor && toggle.style.setProperty('--ox-simple-switch-on-color', onColor)
78
+ offColor && toggle.style.setProperty('--ox-simple-switch-off-color', offColor)
79
+ thumbnailColor && toggle.style.setProperty('--ox-simple-switch-thumbnail-color', thumbnailColor)
80
+ }
81
+
82
+ /*
83
+ * 컴포넌트가 ready 상태가 되거나, 컴포넌트의 속성이 변화될 시 setElementProperties 뒤에 호출된다.
84
+ * 변화에 따른 기본적인 html 속성이 super.reposition()에서 진행되고, 그 밖의 작업이 필요할 때, 오버라이드 한다.
85
+ */
86
+ reposition() {
87
+ super.reposition()
88
+
89
+ var element = this.element
90
+
91
+ if (!element) {
92
+ return
93
+ }
94
+
95
+ var { height, width } = this.bounds
96
+
97
+ element.style.setProperty('--ox-simple-switch-fullwidth', `${width}px`)
98
+ element.style.setProperty('--ox-simple-switch-fullheight', `${height}px`)
99
+ element.style.setProperty('--ox-simple-switch-thumbnail-size', `${Math.min(height, width)}px`)
100
+ }
101
+
102
+ get tagName() {
103
+ return 'ox-simple-switch'
104
+ }
105
+ }
106
+
107
+ Component.register('simple-switch', SimpleSwitch)
package/src/things-scene.d.ts ADDED
@@ -0,0 +1 @@
1
+ declare module '@hatiolab/things-scene'
package/templates/index.js ADDED
@@ -0,0 +1,3 @@
1
+ import simpleSwitch from './simple-switch'
2
+
3
+ export default [simpleSwitch]
package/templates/simple-switch.js ADDED
@@ -0,0 +1,19 @@
1
+ import icon from '../assets/icon-simple-switch.png';
2
+
3
+ export default {
4
+ type: 'simple-switch',
5
+ description: 'simple-switch',
6
+ group: 'IoT',
7
+ /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
8
+ icon,
9
+ model: {
10
+ type: 'simple-switch',
11
+ left: 10,
12
+ top: 10,
13
+ width: 100,
14
+ height: 40,
15
+ thumbnailColor: '#ffffff',
16
+ onColor: '#2196f3',
17
+ offColor: '#cccccc'
18
+ }
19
+ }
package/templates/simple-switch.png ADDED
Binary file
package/things-scene.config.js ADDED
@@ -0,0 +1,7 @@
1
+ import editors from './dist/src/editors'
2
+ import templates from './templates'
3
+
4
+ export default {
5
+ templates,
6
+ editors
7
+ }
package/translations/en.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "label.on/off": "on/off",
3
+ "label.on-color": "on color",
4
+ "label.off-color": "off color",
5
+ "label.thumbnail-color": "thumbnail"
6
+ }
package/translations/ko.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "label.on/off": "on/off",
3
+ "label.on-color": "on 색",
4
+ "label.off-color": "off 색",
5
+ "label.thumbnail-color": "썸네일 색"
6
+ }
package/translations/zh.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "label.on/off": "开/关",
3
+ "label.on-color": "开起时颜色",
4
+ "label.off-color": "关闭时颜色",
5
+ "label.thumbnail-color": "缩图颜色"
6
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,22 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es2018",
4
+ "module": "esnext",
5
+ "moduleResolution": "node",
6
+ "noEmitOnError": true,
7
+ "lib": ["es2017", "dom"],
8
+ "strict": true,
9
+ "esModuleInterop": false,
10
+ "allowSyntheticDefaultImports": true,
11
+ "experimentalDecorators": true,
12
+ "importHelpers": true,
13
+ "outDir": "dist",
14
+ "sourceMap": true,
15
+ "inlineSources": true,
16
+ "rootDir": "./",
17
+ "declaration": true,
18
+ "incremental": true,
19
+ "types": ["node"]
20
+ },
21
+ "include": ["**/*.ts", "*.d.ts"]
22
+ }
package/web-dev-server.config.mjs ADDED
@@ -0,0 +1,27 @@
1
+ // import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
2
+
3
+ /** Use Hot Module replacement by adding --hmr to the start command */
4
+ const hmr = process.argv.includes('--hmr')
5
+
6
+ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
7
+ open: '/demo/',
8
+ /** Use regular watch mode if HMR is not enabled. */
9
+ watch: !hmr,
10
+ /** Resolve bare module imports */
11
+ nodeResolve: {
12
+ exportConditions: ['browser', 'development']
13
+ },
14
+
15
+ /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
16
+ // esbuildTarget: 'auto'
17
+
18
+ /** Set appIndex to enable SPA routing */
19
+ // appIndex: 'demo/index.html',
20
+
21
+ plugins: [
22
+ /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
23
+ // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
24
+ ]
25
+
26
+ // See documentation for all available options
27
+ })