@icure/form 1.0.0

package/lib/iqr-text-field/suggestion-palette.js

@@ -0,0 +1,139 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuggestionPalette = void 0;
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
+class SuggestionPalette {
+    constructor(view, suggestionProvider, suggestionStopWordsProvider, delay) {
+        var _a, _b;
+        this.delay = () => false;
+        this.lastTime = 0;
+        this.hasFocus = false;
+        this.suggestions = [];
+        this.suggestionStopWordsProvider = suggestionStopWordsProvider;
+        this.suggestionProvider = suggestionProvider;
+        this.palette = document.createElement("div");
+        this.palette.className = "suggestion-palette";
+        (_b = (_a = view.dom) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.appendChild(this.palette);
+        delay && (this.delay = delay);
+        this.update(view, undefined);
+    }
+    focusItem(idx) {
+        const ul = this.palette.getElementsByTagName('ul')[0];
+        if (ul) {
+            ul.classList.add('focused');
+            const lis = ul.getElementsByTagName('li');
+            this.currentFocus !== undefined && lis[this.currentFocus].classList.remove('focused');
+            idx !== undefined && lis[idx].classList.add('focused');
+            this.currentFocus = idx;
+        }
+    }
+    focus() {
+        if (this.palette.style.display === "none")
+            return false;
+        this.hasFocus = true;
+        this.focusItem(0);
+        return true;
+    }
+    focusOrInsert(view, transactionProvider) {
+        if (this.palette.style.display === "none")
+            return false;
+        return this.hasFocus ? this.insert(view, transactionProvider) : this.focus();
+    }
+    insert(view, transactionProvider) {
+        if (this.palette.style.display === "none" || !this.hasFocus || this.currentFocus === undefined)
+            return false;
+        const sug = this.suggestions[this.currentFocus];
+        if (sug) {
+            const sel = view.state.selection;
+            const stopWords = this.suggestionStopWordsProvider();
+            let length = sug.terms.join(' ').length - 1;
+            while (sel.to - length >= 0 && !fast_deep_equal_1.default(view.state.doc.textBetween(sel.to - length, sel.to).split(/\s+/).filter(x => !stopWords.has(x)), sug.terms)) {
+                length++;
+            }
+            if (length > sel.to) {
+                length = sug.terms.join(' ').length;
+                while (sel.to - length >= 0 && !view.state.doc.textBetween(sel.to - length, sel.to).startsWith(sug.terms[0])) {
+                    length++;
+                }
+            }
+            if (length <= sel.to) {
+                transactionProvider(sel.to - length, sel.to, sug).then(tr => tr && view.dispatch(tr.scrollIntoView()));
+            }
+            return true;
+        }
+        return false;
+    }
+    arrowUp() {
+        if (!this.hasFocus)
+            return false;
+        this.currentFocus && this.focusItem(this.currentFocus - 1);
+        return true;
+    }
+    arrowDown() {
+        if (!this.hasFocus)
+            return false;
+        this.currentFocus !== undefined && this.currentFocus < this.palette.getElementsByTagName('ul')[0].childElementCount - 1 && this.focusItem(this.currentFocus + 1);
+        return true;
+    }
+    update(view, lastState) {
+        let state = view.state;
+        // Hide the palette if the selection is not empty
+        this.focusItem(undefined);
+        this.hasFocus = false;
+        if (!state.selection.empty) {
+            this.palette.style.display = "none";
+            return;
+        }
+        let $pos = state.selection.$head;
+        if ((lastState === null || lastState === void 0 ? void 0 : lastState.doc.textContent) === state.doc.textContent) {
+            this.palette.style.display = "none";
+            return;
+        }
+        const text = state.doc.textBetween($pos.pos ? $pos.before() + 1 : 0, $pos.pos);
+        const words = text.split(/\s+/);
+        const terms = words.filter(x => x.length > 2 && !this.suggestionStopWordsProvider().has(x));
+        const lastTerms = terms.length > 3 ? terms.slice(length - 3) : terms;
+        const fingerprint = lastTerms.join(' ');
+        const { to } = state.selection;
+        if (this.previousFingerprint !== fingerprint) {
+            this.previousFingerprint = fingerprint;
+            setTimeout(() => {
+                if (this.previousFingerprint !== fingerprint)
+                    return;
+                const res = this.suggestionProvider(lastTerms);
+                this.suggestions = res;
+                if (res.length) {
+                    this.palette.innerHTML = `<ul>${res.map(x => `<li id="${x.id}" data-code="${x.code}">${x.text}<div class="icn-container"><svg class="tab-icn" viewBox="0 0 24 24"><path d="M12.29 8.12L15.17 11H2c-.55 0-1 .45-1 1s.45 1 1 1h13.17l-2.88 2.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L13.7 6.7c-.39-.39-1.02-.39-1.41 0-.38.39-.39 1.03 0 1.42zM20 7v10c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z"/></svg><svg class="return-icn" viewBox="0 0 24 24"><path d="M19 8v3H5.83l2.88-2.88c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L2.71 11.3c-.39.39-.39 1.02 0 1.41L7.3 17.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L5.83 13H20c.55 0 1-.45 1-1V8c0-.55-.45-1-1-1s-1 .45-1 1z"/></svg></div></li>`).join('\n')}</ul>`;
+                    // These are in screen coordinates
+                    const end = view.coordsAtPos(to);
+                    this.display(end, (this.lastTime = +new Date()));
+                }
+                else {
+                    this.palette.style.display = "none";
+                }
+            }, 30);
+        }
+    }
+    display(pos, time) {
+        var _a;
+        if (time !== this.lastTime)
+            return;
+        if (this.delay()) {
+            setTimeout(() => this.display(pos, time), 100);
+            return;
+        }
+        this.palette.style.display = "";
+        const box = (_a = this.palette.offsetParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const palBox = this.palette.getBoundingClientRect();
+        if (box) {
+            const l = (box.left + pos.left);
+            this.palette.style.left = Math.max(box.left, l - palBox.width) + 'px';
+            this.palette.style.top = (pos.top + box.top) + "px";
+        }
+    }
+    destroy() { this.palette.remove(); }
+}
+exports.SuggestionPalette = SuggestionPalette;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@icure/form",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "start": "webpack-dev-server --env.mode development",
+		"build": "tsc",
+    "dist": "webpack --env.mode production",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@icure/api": "^4.0.8",
+    "@webcomponents/webcomponentsjs": "^2.4.4",
+    "fast-deep-equal": "^3.1.3",
+    "lit-element": "^2.4.0",
+    "prosemirror-commands": "^1.1.4",
+    "prosemirror-history": "^1.1.3",
+    "prosemirror-keymap": "^1.1.4",
+    "prosemirror-markdown": "^1.5.0",
+    "prosemirror-model": "^1.11.2",
+    "prosemirror-schema-basic": "^1.1.2",
+    "prosemirror-schema-list": "^1.1.4",
+    "prosemirror-state": "^1.3.4",
+    "prosemirror-view": "^1.16.0",
+    "yaml": "^1.10.0"
+  },
+  "devDependencies": {
+    "@types/mocha": "^8.2.0",
+    "@types/prosemirror-commands": "^1.0.3",
+    "@types/prosemirror-history": "^1.0.1",
+    "@types/prosemirror-keymap": "^1.0.3",
+    "@types/prosemirror-markdown": "^1.0.3",
+    "@types/prosemirror-schema-basic": "^1.0.1",
+    "@types/prosemirror-schema-list": "^1.0.1",
+		"@types/prosemirror-state": "^1.2.6",
+    "@types/prosemirror-view": "^1.15.1",
+    "assert": "^2.0.0",
+    "babel": "^6.23.0",
+    "babel-preset-es2017": "^6.24.1",
+    "copy-webpack-plugin": "^6.2.0",
+    "css-loader": "^5.0.1",
+    "extract-loader": "^5.1.0",
+    "html-webpack-plugin": "^4.5.0",
+    "lit-scss-loader": "^1.0.1",
+    "minisearch": "^3.0.2",
+    "mocha": "^8.2.1",
+    "sass": "^1.32.2",
+    "sass-loader": "^10.1.1",
+    "ts-loader": "^8.0.4",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  }
+}

package/test/form.yaml

@@ -0,0 +1,96 @@
+form: Waiting room GP
+description: Fill in the patient information inside the waiting room
+sections:
+  - section: All fields
+    fields:
+      - field: This field is a TextField
+        type: textfield
+        shortLabel: TextField
+        schema: styled-text-with-codes
+      - field: This field is a NumberField
+        type: number-field
+        shortLabel: NumberField
+      - field: This field is a MeasureField
+        type: measure-field
+        shortLabel: MeasureField
+      - field: This field is a DatePicker
+        type: date-picker
+        shortLabel: DatePicker
+      - field: This field is a TimePicker
+        type: time-picker
+        shortLabel: TimePicker
+      - field: This field is a DateTimePicker
+        type: date-time-picker
+        shortLabel: DateTimePicker
+      - field: This field is a MultipleChoice
+        type: multiple-choice
+        shortLabel: MultipleChoice
+  - section: Grouped fields
+    groups:
+      - group: You can group fields together
+        fields:
+          - field: This field is a TextField
+            type: textfield
+            shortLabel: TextField
+            schema: styled-text-with-codes
+          - field: This field is a NumberField
+            type: number-field
+            shortLabel: NumberField
+          - field: This field is a MeasureField
+            type: measure-field
+            shortLabel: MeasureField
+          - field: This field is a DatePicker
+            type: date-picker
+            shortLabel: DatePicker
+          - field: This field is a TimePicker
+            type: time-picker
+            shortLabel: TimePicker
+          - field: This field is a DateTimePicker
+            type: date-time-picker
+            shortLabel: DateTimePicker
+          - field: This field is a MultipleChoice
+            type: multiple-choice
+            shortLabel: MultipleChoice
+      - group: And you can add tags and codes
+        fields:
+          - field: This field is a TextField
+            type: textfield
+            shortLabel: TextField
+            rows: 3
+            grows: true
+            schema: text-document
+            tags:
+              - CD-ITEM|diagnosis|1
+            codifications:
+              - BE-THESAURUS
+              - ICD10
+            options:
+              option: blink
+          - field: This field is a NumberField
+            type: number-field
+            shortLabel: NumberField
+            tags:
+              - CD-ITEM|parameter|1
+              - CD-PARAMETER|bmi|1
+            codifications: []
+            options:
+              option: bang
+          - field: This field is a MeasureField
+            type: measure-field
+            shortLabel: MeasureField
+            tags:
+              - CD-ITEM|parameter|1
+              - CD-PARAMETER|heartbeat|1
+            codifications: []
+            options:
+              unit: bpm
+          - field: This field is a MultipleChoice
+            type: multiple-choice
+            shortLabel: MultipleChoice
+            rows: 4
+            columns: 4
+            tags: []
+            codifications:
+              - KATZ
+            options:
+              many: no

package/test/simple/test.spec.ts

@@ -0,0 +1,303 @@
+import { strictEqual } from "assert";
+import YAML from "yaml"
+import {
+	Form,
+	Section,
+	Group,
+	TextField,
+	NumberField,
+	DatePicker,
+	TimePicker, DateTimePicker, MultipleChoice, MeasureField
+} from "../../src/app/components/iqr-form/model"
+
+describe("Typescript usage suite", () => {
+	it("should Render simple form", () => {
+		const text = YAML.stringify(JSON.parse(JSON.stringify(new Form("Waiting room GP", [
+			new Section("The reason of your visit", [
+				new TextField("What symptoms, or more generally what reason motivated your visit" ),
+				new MultipleChoice("What is the level of pain that you are experiencing" )
+			]),
+			new Section("The reason of your visit", [
+				new Group("If you have measured your blood pressure. Please introduce it below", [
+					new MeasureField("Systolic blood pressure"),
+					new MeasureField( "Diastolic blood pressure")
+				])
+			]),
+		], "Fill in the patient information inside the waiting room"))))
+		console.log(text)
+		strictEqual(text, "form: Waiting room GP\n" +
+			"description: Fill in the patient information inside the waiting room\n" +
+			"sections:\n" +
+			"  - section: The reason of your visit\n" +
+			"    fields:\n" +
+			"      - field: What symptoms, or more generally what reason motivated your visit\n" +
+			"        type: textfield\n" +
+			"        schema: styled-text-with-codes\n" +
+			"      - field: What is the level of pain that you are experiencing\n" +
+			"        type: multiple-choice\n" +
+			"  - section: The reason of your visit\n" +
+			"    fields:\n" +
+			"      - group: If you have measured your blood pressure. Please introduce it below\n" +
+			"        fields:\n" +
+			"          - field: Systolic blood pressure\n" +
+			"            type: measure-field\n" +
+			"          - field: Diastolic blood pressure\n" +
+			"            type: measure-field\n");
+	});
+	it("should Parse simple form", () => {
+		const original = "form: Waiting room GP\n" +
+			"description: Fill in the patient information inside the waiting room\n" +
+			"sections:\n" +
+			"  - section: The reason of your visit\n" +
+			"    fields:\n" +
+			"      - field: What symptoms, or more generally what reason motivated your visit\n" +
+			"        type: textfield\n" +
+			"        schema: styled-text-with-codes\n" +
+			"      - field: What is the level of pain that you are experiencing\n" +
+			"        type: multiple-choice\n" +
+			"  - section: The reason of your visit\n" +
+			"    fields:\n" +
+			"      - group: If you have measured your blood pressure. Please introduce it below\n" +
+			"        fields:\n" +
+			"          - field: Systolic blood pressure\n" +
+			"            type: measure-field\n" +
+			"          - field: Diastolic blood pressure\n" +
+			"            type: measure-field\n"
+		const form = Form.parse(YAML.parse(original))
+		const text = YAML.stringify(JSON.parse(JSON.stringify(form)))
+		console.log(text)
+		strictEqual(text, original);
+	});
+	it("should Render complex form", () => {
+		const text = YAML.stringify(JSON.parse(JSON.stringify(new Form("Waiting room GP", [
+			new Section("All fields", [
+				new TextField("This field is a TextField", "TextField"),
+				new NumberField("This field is a NumberField", "NumberField"),
+				new MeasureField("This field is a MeasureField", "MeasureField"),
+				new DatePicker("This field is a DatePicker", "DatePicker"),
+				new TimePicker("This field is a TimePicker", "TimePicker"),
+				new DateTimePicker("This field is a DateTimePicker", "DateTimePicker"),
+				new MultipleChoice("This field is a MultipleChoice", "MultipleChoice"),
+			]),
+			new Section("Grouped fields", [
+				new Group("You can group fields together", [
+					new TextField("This field is a TextField", "TextField"),
+					new NumberField("This field is a NumberField", "NumberField"),
+					new MeasureField("This field is a MeasureField", "MeasureField"),
+					new DatePicker("This field is a DatePicker", "DatePicker"),
+					new TimePicker("This field is a TimePicker", "TimePicker"),
+					new DateTimePicker("This field is a DateTimePicker", "DateTimePicker"),
+					new MultipleChoice("This field is a MultipleChoice", "MultipleChoice"),
+				]),
+				new Group("And you can add tags and codes", [
+					new TextField("This field is a TextField", "TextField", 3, true, "text-document", ['CD-ITEM|diagnosis|1'], ['BE-THESAURUS','ICD10'], {option: "blink"}),
+					new NumberField("This field is a NumberField", "NumberField", ['CD-ITEM|parameter|1', 'CD-PARAMETER|bmi|1'], [], {option: "bang"}),
+					new MeasureField("This field is a MeasureField", "MeasureField", ['CD-ITEM|parameter|1', 'CD-PARAMETER|heartbeat|1'], [], {unit: "bpm"}),
+					new MultipleChoice("This field is a MultipleChoice", "MultipleChoice", 4, 4, [], ['KATZ'], {many:"no"}),
+				])
+			]),
+		], "Fill in the patient information inside the waiting room"))))
+		console.log(text)
+		strictEqual(text, `form: Waiting room GP
+description: Fill in the patient information inside the waiting room
+sections:
+  - section: All fields
+    fields:
+      - field: This field is a TextField
+        type: textfield
+        shortLabel: TextField
+        schema: styled-text-with-codes
+      - field: This field is a NumberField
+        type: number-field
+        shortLabel: NumberField
+      - field: This field is a MeasureField
+        type: measure-field
+        shortLabel: MeasureField
+      - field: This field is a DatePicker
+        type: date-picker
+        shortLabel: DatePicker
+      - field: This field is a TimePicker
+        type: time-picker
+        shortLabel: TimePicker
+      - field: This field is a DateTimePicker
+        type: date-time-picker
+        shortLabel: DateTimePicker
+      - field: This field is a MultipleChoice
+        type: multiple-choice
+        shortLabel: MultipleChoice
+  - section: Grouped fields
+    fields:
+      - group: You can group fields together
+        fields:
+          - field: This field is a TextField
+            type: textfield
+            shortLabel: TextField
+            schema: styled-text-with-codes
+          - field: This field is a NumberField
+            type: number-field
+            shortLabel: NumberField
+          - field: This field is a MeasureField
+            type: measure-field
+            shortLabel: MeasureField
+          - field: This field is a DatePicker
+            type: date-picker
+            shortLabel: DatePicker
+          - field: This field is a TimePicker
+            type: time-picker
+            shortLabel: TimePicker
+          - field: This field is a DateTimePicker
+            type: date-time-picker
+            shortLabel: DateTimePicker
+          - field: This field is a MultipleChoice
+            type: multiple-choice
+            shortLabel: MultipleChoice
+      - group: And you can add tags and codes
+        fields:
+          - field: This field is a TextField
+            type: textfield
+            shortLabel: TextField
+            rows: 3
+            grows: true
+            schema: text-document
+            tags:
+              - CD-ITEM|diagnosis|1
+            codifications:
+              - BE-THESAURUS
+              - ICD10
+            options:
+              option: blink
+          - field: This field is a NumberField
+            type: number-field
+            shortLabel: NumberField
+            tags:
+              - CD-ITEM|parameter|1
+              - CD-PARAMETER|bmi|1
+            codifications: []
+            options:
+              option: bang
+          - field: This field is a MeasureField
+            type: measure-field
+            shortLabel: MeasureField
+            tags:
+              - CD-ITEM|parameter|1
+              - CD-PARAMETER|heartbeat|1
+            codifications: []
+            options:
+              unit: bpm
+          - field: This field is a MultipleChoice
+            type: multiple-choice
+            shortLabel: MultipleChoice
+            rows: 4
+            columns: 4
+            tags: []
+            codifications:
+              - KATZ
+            options:
+              many: no
+`);
+	});
+	it("should Parse complex form", () => {
+		const original = "form: Waiting room GP\n" +
+			"description: Fill in the patient information inside the waiting room\n" +
+			"sections:\n" +
+			"  - section: All fields\n" +
+			"    fields:\n" +
+			"      - field: This field is a TextField\n" +
+			"        type: textfield\n" +
+			"        shortLabel: TextField\n" +
+			"        schema: styled-text-with-codes\n" +
+			"      - field: This field is a NumberField\n" +
+			"        type: number-field\n" +
+			"        shortLabel: NumberField\n" +
+			"      - field: This field is a MeasureField\n" +
+			"        type: measure-field\n" +
+			"        shortLabel: MeasureField\n" +
+			"      - field: This field is a DatePicker\n" +
+			"        type: date-picker\n" +
+			"        shortLabel: DatePicker\n" +
+			"      - field: This field is a TimePicker\n" +
+			"        type: time-picker\n" +
+			"        shortLabel: TimePicker\n" +
+			"      - field: This field is a DateTimePicker\n" +
+			"        type: date-time-picker\n" +
+			"        shortLabel: DateTimePicker\n" +
+			"      - field: This field is a MultipleChoice\n" +
+			"        type: multiple-choice\n" +
+			"        shortLabel: MultipleChoice\n" +
+			"  - section: Grouped fields\n" +
+			"    fields:\n" +
+			"      - group: You can group fields together\n" +
+			"        fields:\n" +
+			"          - field: This field is a TextField\n" +
+			"            type: textfield\n" +
+			"            shortLabel: TextField\n" +
+			"            schema: styled-text-with-codes\n" +
+			"          - field: This field is a NumberField\n" +
+			"            type: number-field\n" +
+			"            shortLabel: NumberField\n" +
+			"          - field: This field is a MeasureField\n" +
+			"            type: measure-field\n" +
+			"            shortLabel: MeasureField\n" +
+			"          - field: This field is a DatePicker\n" +
+			"            type: date-picker\n" +
+			"            shortLabel: DatePicker\n" +
+			"          - field: This field is a TimePicker\n" +
+			"            type: time-picker\n" +
+			"            shortLabel: TimePicker\n" +
+			"          - field: This field is a DateTimePicker\n" +
+			"            type: date-time-picker\n" +
+			"            shortLabel: DateTimePicker\n" +
+			"          - field: This field is a MultipleChoice\n" +
+			"            type: multiple-choice\n" +
+			"            shortLabel: MultipleChoice\n" +
+			"      - group: And you can add tags and codes\n" +
+			"        fields:\n" +
+			"          - field: This field is a TextField\n" +
+			"            type: textfield\n" +
+			"            shortLabel: TextField\n" +
+			"            rows: 3\n" +
+			"            grows: true\n" +
+			"            schema: text-document\n" +
+			"            tags:\n" +
+			"              - CD-ITEM|diagnosis|1\n" +
+			"            codifications:\n" +
+			"              - BE-THESAURUS\n" +
+			"              - ICD10\n" +
+			"            options:\n" +
+			"              option: blink\n" +
+			"          - field: This field is a NumberField\n" +
+			"            type: number-field\n" +
+			"            shortLabel: NumberField\n" +
+			"            tags:\n" +
+			"              - CD-ITEM|parameter|1\n" +
+			"              - CD-PARAMETER|bmi|1\n" +
+			"            codifications: []\n" +
+			"            options:\n" +
+			"              option: bang\n" +
+			"          - field: This field is a MeasureField\n" +
+			"            type: measure-field\n" +
+			"            shortLabel: MeasureField\n" +
+			"            tags:\n" +
+			"              - CD-ITEM|parameter|1\n" +
+			"              - CD-PARAMETER|heartbeat|1\n" +
+			"            codifications: []\n" +
+			"            options:\n" +
+			"              unit: bpm\n" +
+			"          - field: This field is a MultipleChoice\n" +
+			"            type: multiple-choice\n" +
+			"            shortLabel: MultipleChoice\n" +
+			"            rows: 4\n" +
+			"            columns: 4\n" +
+			"            tags: []\n" +
+			"            codifications:\n" +
+			"              - KATZ\n" +
+			"            options:\n" +
+			"              many: no\n"
+		const form = Form.parse(YAML.parse(original))
+		const text = YAML.stringify(JSON.parse(JSON.stringify(form)))
+		console.log(text)
+		strictEqual(text, original);
+	});
+
+
+});

package/webpack.config.js

@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = ({mode}) => {
+	return {
+		mode,
+		entry: './app/demo-app.ts',
+		plugins: [
+			new HtmlWebpackPlugin({
+				template: 'index.html'
+			}),
+			new CopyWebpackPlugin({
+				patterns: [
+					{context: 'node_modules/@webcomponents/webcomponentsjs', from: '**/*.js', to: 'webcomponents'},
+				]
+			})
+		],
+		devtool: mode === 'development' ? 'source-map' : 'none',
+		module: {
+			rules: [
+				{
+					test: /\.tsx?$/,
+					use: 'ts-loader',
+					exclude: /node_modules/,
+				},
+				{
+					test: /\.css|\.s(c|a)ss$/,
+					use: [{
+						loader: 'lit-scss-loader',
+						options: {
+							minify: true, // defaults to false
+						},
+					}, 'extract-loader', 'css-loader', 'sass-loader'],
+				},
+			],
+		},
+		resolve: {
+			extensions: ['.tsx', '.ts', '.js'],
+		},
+	};
+};