[add] Test page

EasyWebApp · Apr 25, 2024 · 8bf3c6d · 8bf3c6d
1 parent b53084f
commit 8bf3c6d
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 13 deletions.
diff --git a/.parcelrc b/.parcelrc
@@ -0,0 +1,8 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": [
+            "@parcel/transformer-typescript-tsc"
+        ]
+    }
+}
diff --git a/package.json b/package.json
@@ -37,8 +37,10 @@
         "web-utility": "^4.3.0"
     },
     "devDependencies": {
+        "@parcel/config-default": "~2.12.0",
         "@parcel/packager-ts": "~2.12.0",
         "@parcel/transformer-less": "~2.12.0",
+        "@parcel/transformer-typescript-tsc": "~2.12.0",
         "@parcel/transformer-typescript-types": "~2.12.0",
         "element-internals-polyfill": "^1.3.11",
         "husky": "^9.0.11",
@@ -67,6 +69,8 @@
     "scripts": {
         "prepare": "husky",
         "test": "lint-staged",
+        "clean": "rm -rf .parcel-cache/ dist/",
+        "start": "npm run clean  &&  cd test/  &&  parcel index.html --open",
         "pack-docs": "rm -rf docs/  &&  typedoc source/",
         "pack-dist": "rm -rf dist/  &&  parcel build source/index.tsx",
         "build": "npm run pack-docs  &&  npm run pack-dist",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/source/Editor.tsx b/source/Editor.tsx
@@ -0,0 +1,41 @@
+import { observable } from 'mobx';
+import Quill from 'quill';
+import { WebCell, attribute, component, observer } from 'web-cell';
+
+export interface QuillCell extends WebCell {}
+
+@component({
+    tagName: 'quill-cell',
+    mode: 'open'
+})
+@observer
+export class QuillCell extends HTMLElement implements WebCell {
+    core: Quill;
+
+    @attribute
+    @observable
+    accessor theme: 'bubble' | 'snow' = 'snow';
+
+    mountedCallback() {
+        const { theme } = this;
+
+        this.core = new Quill(
+            this.shadowRoot.lastElementChild as HTMLDivElement,
+            { theme }
+        );
+    }
+
+    render() {
+        const { theme } = this;
+
+        return (
+            <>
+                <link
+                    rel="stylesheet"
+                    href={`https://unpkg.com/quill@2/dist/quill.${theme}.css`}
+                />
+                <div />
+            </>
+        );
+    }
+}
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+    <head>
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
+        />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/[email protected]/font/bootstrap-icons.css"
+        />
+    </head>
+    <body>
+        <main></main>
+        <script type="module" src="index.tsx"></script>
+    </body>
+</html>
diff --git a/test/index.tsx b/test/index.tsx
@@ -0,0 +1,18 @@
+import { configure } from 'mobx';
+import { DOMRenderer } from 'dom-renderer';
+
+import { QuillCell } from '../source/Editor';
+
+configure({ enforceActions: 'never' });
+
+new DOMRenderer().render(
+    // @ts-ignore
+    <form className="container">
+        <legend>Quill Cell editor</legend>
+
+        <QuillCell />
+
+        <button className="btn btn-primary my-2">√</button>
+    </form>,
+    document.querySelector('main')
+);
diff --git a/test/package.json b/test/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@easywebapp/quill-cell-editor-demo",
+    "private": true,
+    "source": "index.html"
+}
diff --git a/test/tsconfig.json b/test/tsconfig.json
@@ -0,0 +1,4 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["**/*"]
+}