Playing with Lit webcomponents

package.json

@@ -21,7 +21,8 @@
   },
   "homepage": "https://github.com/dli7319/html-color-picker#readme",
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.26.7",
+    "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
@@ -32,16 +33,18 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.11",
     "babel-loader": "^9.1.2",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.2.2",
     "clamp": "^1.0.1",
     "color-convert": "^2.0.1",
     "css-loader": "^6.7.3",
     "lerp": "^1.0.3",
-    "preact": "^10.12.1",
+    "lit": "^3.2.1",
+    "react": "^18.3.1",
     "react-bootstrap": "^2.7.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",
+    "ts-loader": "^9.5.2",
     "typescript": "^4.9.5",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.9.2",

src/ColorPicker.tsx

@@ -4,8 +4,8 @@ import ColorSelection from "./ColorSelection";
 import ColorConverter from "./ColorConverter";
 import ImageSampling from "./ImageSampling";
 import ColorInterpolation, { ActiveColorSide } from "./ColorInterpolation";
-import OtherTools from "./OtherTools";
 import styles from "./styles/ColorPicker.module.css";
+import './OtherTools.ts';
 
 export default function ColorPicker() {
   const [color, setColor] = useState(
@@ -78,7 +78,7 @@ export default function ColorPicker() {
         setActiveColor={setInterpolationActive}
         setColor={setColor}
       />
-      <OtherTools className={styles.component} />
+      <other-tools className={styles.component} />
     </div>
   );
 }

src/ImageSampling.tsx

@@ -117,9 +117,10 @@ export default function ImageSampling({
             onChange={(e) =>
               setOverlayColor(e.currentTarget.value as OverlayColor)
             }
+            defaultValue={OverlayColor.Black}
           >
             <option value={OverlayColor.Transparent}>None</option>
-            <option value={OverlayColor.Black} selected>
+            <option value={OverlayColor.Black}>
               Black
             </option>
             <option value={OverlayColor.White}>White</option>
@@ -129,9 +130,10 @@ export default function ImageSampling({
           <Form.Select
             aria-label="Select Overlay Size"
             onChange={(e) => setOverlaySize(e.target.value as OverlaySize)}
+            defaultValue={OverlaySize.Medium}
           >
             <option value={OverlaySize.Small}>Small</option>
-            <option value={OverlaySize.Medium} selected>
+            <option value={OverlaySize.Medium}>
               Medium
             </option>
             <option value={OverlaySize.Large}>Large</option>

src/OtherTools.ts

@@ -0,0 +1,27 @@
+import { html, css, LitElement, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+import bootstrapcss from 'bootstrap/dist/css/bootstrap.min.css?raw';
+
+import other_tools from "./other_tools.json";
+import { componentStyle } from "./styles/Common";
+
+@customElement("other-tools")
+export class OtherTools extends LitElement {
+  static styles = [componentStyle, css`${unsafeCSS(bootstrapcss)}`];
+
+  render() {
+    console.log("rendering");
+    console.log(bootstrapcss);
+    return html`<div class="component">
+      <h5>Other Tools</h5>
+      <ul>
+        ${Object.entries(other_tools).map(
+          ([key, value]) =>
+            html`<li key=${key}>
+              <a href=${value} target="_blank">${key}</a>
+            </li>`
+        )}
+      </ul>
+    </div>`;
+  }
+}

src/declarations.d.ts

@@ -0,0 +1,11 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    "other-tools": any;
+  }
+}
+declare module "*.css";
+
+declare module "*?raw" {
+  const content: string;
+  export default content;
+}

src/styles/Common.js

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+export const componentStyle = css`
+  .component {
+    border-radius: 1rem;
+    background: #eee;
+    padding: 1rem;
+    text-align: center;
+    flex: 1 1 30%;
+    display: flex;
+    flex-direction: column;
+}`;

tsconfig.json

@@ -16,14 +16,14 @@
     "moduleResolution": "node", // Resolve modules using Node.js style
     "isolatedModules": true, // Unconditionally emit imports for unresolved files
     "resolveJsonModule": true, // Include modules imported with .json extension
-    "noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
     "jsx": "react", // Support JSX in .tsx files
     "sourceMap": true, // Generate corrresponding .map file
     "declaration": true, // Generate corresponding .d.ts file
     "noUnusedLocals": true, // Report errors on unused locals
     "noUnusedParameters": true, // Report errors on unused parameters
     "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
-    "noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
+    "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement
+    "experimentalDecorators": true
   },
   "include": [
     "src/**/*" // *** The files TypeScript should type check ***

webpack.config.js

@@ -12,24 +12,23 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx|tsx|ts)$/,
+        test: /\.tsx?$/,
+        use: 'ts-loader',
         exclude: /node_modules/,
-        loader: 'babel-loader'
       },
       {
         test: /\.css$/i,
+        resourceQuery: { not: [/raw/] },
         use: ["style-loader", "css-loader"],
       },
+      {
+        resourceQuery: /raw/,
+        type: 'asset/source',
+      }
     ]
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
-    "alias": {
-      "react": "preact/compat",
-      "react-dom/test-utils": "preact/test-utils",
-      "react-dom": "preact/compat",     // Must be below test-utils
-      "react/jsx-runtime": "preact/jsx-runtime"
-    },
+    extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
   },
   devServer: {
     hot: true,