Description

Store JS files used by both frontend and backend

• Use ESM to avoid using webpack for compilation on frontend
• For backend refer to NodeJS document on how to use ESM in NodeJS (To Elaborate)

Running Script

To run the script use...

node <filename.js>

node csv-utils.js --input-type=module

HTML Custom Elements / Web Components

Useful aliasing for web components

// browser may already have these $ / $$...
const $ = (selector, el = document) => el.querySelector(selector);
const $$ = (selector, el = document) => el.querySelectorAll(selector);

Element.prototype.on = Element.prototype.addEventListener;
// TODO: how to auto unload event listener?

Custom Element (Web Component) Samples

Signature Pad

A component for capturing signature using canvas (component name: vcxwc-sign-pad)

Component file location sign-pad.js

Example Usage in https://github.com/es-labs/vue-antd-template file location src/apps/web-sample/views/Demo/DemoSignPad.vue

Features

• handle attibutes and properties
• pass in json attributes as string for canvas context settings
• css variables
• handle events
• interactive with vuejs v-model

Customizable Styles

vcxwc-sign-pad {
  --vcxwc-sign-pad-background-color: #faa;
}

Attributes

• width
• height
• context2d: 2D drawing context settings
• value (v-model used here, input event is created)

Web Cam

A component for capturing image using webcam (component name: vcxwc-web-cam)

Component file location web-cam.js

Example Usage in https://github.com/es-labs/vue-antd-template file location src/apps/web-sample/views/Demo/DemoWebCam.vue

Features

• shadowDOM and litDOM
  • css variables
• shadowDOM
  • slots
  • slotted css and slot styles
  • slot events
  • use to include other css files e.g. bulma, bootstrap
  • interactive with vuejs v-on

CSS Variables

vcxwc-web-cam {
  --vcxwc-web-cam-top: 5%;
  --vcxwc-web-cam-right: 5%;
}

Attributes

• width
• height

Slots

• button-snap
• button-unsnap

Event Emitted

• snap

TODO - Using web component inside a web component - its possible

• https://www.udemy.com/course/fundamentals-of-web-components
• https://github.com/basarbk/web-components-fundamentals.git