DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:
- Look good via DDD, HAX design system
- Simple, easy to read code via Lit
- Great workflow via OpenWC tooling + Vercel for sharing demos
- Simplify contribution to the HAX ecosystem
- Publish and distribute via npmjs.com
npm install- installs dependencies so you can work
npm start- runs your web component for development, reloading on file changesnpm run build- builds your web component and outputs it in yourdistdirectory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.npm run release- this will build your code, update the version, and publish it to npm for others to use
- edit
/src/counter-app.js - edit your 'demo' by modifying
./index.html - add dependencies using
npm install --save @whatever/repoor editing./package.jsondirectly - if you must reference additional non-JS files, ensure you use the
new URL('./my-file.jpg', import.meta.url).hrefsyntax so that it builds correctly - if you add additional
.jsfiles / web components then place them under/src/ - to improve HAX wiring edit file in
/lib/counter-app.haxProperties.json
- Load VS code in 1 window to project root
- Browser open
- Right click -> Inspect and open the Console to see error output
Name: lit-html Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings Publisher: Matt Bierner VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
Name: lit-plugin Description: Syntax highlighting, type checking and code completion for lit-html Publisher: Rune Mehlsen VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin
A brighter future dreamed and developed by the Penn State HAXTheWeb initative.
Never. Stop. innovating.