Rapidly build web components for the Web that work with HAX. HAX The Web's CLI tools empower you to rapidly..
# this allows you to then use hax command
npm install @haxtheweb/create --global
# then run this for interactive prompt
hax starthax start- fun ascii art and interactive CLI (via clack )hax webcomponent my-element --y- Make a new HAX capable, i18n wired, Design system (DDD) driven web component- if in a monorepo root, will place in correct location / inherit settings
hax site mysite --y- create a new HAXsite (HAXcms, single site)hax audit- Audits web components for compliance with DDD (HAX design system)
Run hax help or hax webcomponent --help or hax site --help for up-to-date listing
Usage: hax [options] [command]
Options:
--
--v Verbose output
--debug Output for developers
--format <char> Output format; json (default), yaml
--path <char> where to perform operation
--name <char> name of the project/web component
--npm-client <char> npm client to use (must be installed)
npm, yarn, pnpm (default: "npm")
--y yes to all questions
--skip skip frills like animations
--quiet remove console logging
--auto yes to all questions, alias of y
--no-i prevent interactions / sub-process, good
for scripting
--to-file <char> redirect command output to a file
--no-extras skip all extra / automatic command
processing
--root <char> root location to execute the command from
--org <char> organization for package.json
--author <char> author for site / package.json
--writeHaxProperties Write haxProperties for the element
--import-site <char> URL of site to import
--import-structure <char> import method to use:
pressbooksToSite
elmslnToSite
haxcmsToSite
notionToSite
gitbookToSite
evolutionToSite
htmlToSite
docxToSite
--node-op <char> node operation to perform
--item-id <char> node ID to operate on
--domain <char> published domain name
--title-scrape <char> CSS Selector for `title` in resource
--content-scrape <char> CSS Selector for `body` in resource
--items-import <char> import items from a file / site
--recipe <char> path to recipe file
--custom-theme-name <char> custom theme name
--custom-theme-template <char> custom theme template; (options: base,
polaris-flex, polaris-sidebar)
--repos <char...> repositories to clone
-V, --version output the version number
--title <char> Title
--content <char> Page content
--slug <char> Path (slug)
--published <char> Publishing status
--tags <char> Tags
--parent <char> Parent
--order <char> Order
--theme <char> Theme
--hide-in-menu <char> Hide in menu
-h, --help display help for command
Commands:
start Select which hax sub-program to run
update [options] hax cli self update
serve Launch HAXsite in development mode
(http://localhost)
site [options] [action] create or administer a HAXsite
wc|webcomponent [options] [action] Create Lit based web components, with HAX
recommendations
audit [options] Audits web components for compliance with
DDD (HAX design system)
party [options] [action] Party time! Join the HAX community and
get involved!
help [command] display help for command
For a detailed list of example commands that you can perform with hax see examples.
Run man hax to get detailed manual.
# also this will invoke 1x
npx @haxtheweb/create
# this is same as above, better windows CLI support
npm init @haxtheweb
- Try Hax: https://hax.cloud
- HAXCellence https://haxtheweb.org/what-is-hax
"scripts": {
"hax": "hax"
}# script creating a new element called my-element w/ all defaults
npm run hax -- --name my-element --yTry setting a different cache path to load from npm config set cache C:\tmp\nodejs\npm-cache --global
If you wish to use PowerShell over Command Prompt, you may need to change your execution policy to allow scripts using the Set-ExecutionPolicy command with the -ExecutionPolicy and -Scope parameters. You should not need to do this if you are using Command Prompt.
# To see your current execution policy
Get-ExecutionPolicySet-ExecutionPolicy command documentation: https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.security/set-executionpolicy?view=powershell-7.4
Follow the prompts and let's HAX the Web together!
Step through answering basic install questions to build a HAX capable web component that works anywhere! Features:
- LitElement based
- DDDSuper class which adds our design system in
- Common conventions used to demonstrate and work with property binding
- Minor CSS variable inclusion for initial learning
Build a HAX site that can be published and transported anywhere. Your users might love it on the front end, now you get the simplicity of building on the CLI.
- Same HAX sites you can create via front end
- Templated files that work just like any HAX site
- End points baked in to do CLI commands for common endpoint operations like adding pages, deleting and editing.
- Ability to import via URL just like the front-end
- Theme development starting point to be able to build themes locally
- Primed to publish to gh-pages, vercel and more
Audits your HAX based web components to suggest improvements to better align with DDD, the design system built into HAX components.
- Use
.dddignorefile to instruct audit program what files should be ignored. Each component generated comes with a.dddignorefile in its root directory. - Run command from root of the component project.
- Provides suggested changes for component CSS to align with DDD design standards, if a change cannot be suggested, developer will be refered to look at the manual for a change that works for them!
# Directories
# (Must start with with / or \, as seen below)
/.github # Inline comments are supported
/.vscode
/.idea
/locales
\test
/dist
/build
/public # ignored by program regardless of presence in .dddignore
/node_modules # ignored by program regardless of presence in .dddignore
# Files
# (Must include filename and extension, as seen below)
LICENSE
.dddignore
.editorconfig
.gitignore
.nojekyll
.npmignore
.surgeignore
rollup.config.js
# File extension
# (Must start with *, as seen below)
*.md
*.yml
*.json
*.toml
*.mjs
*.cjs
*.png
*.ico
*.svg
*.jpg
*.jpeg- Discord Channel - https://bit.ly/hax-discord
- Unified issue queue - https://github.com/haxtheweb/issues/issues
- DDD Documentation - https://haxtheweb.org/documentation/ddd
- Using Merlin directly in any HAX spaces and type "Issue" to jump start a report!
- Try Hax: https://hax.cloud
- HAXCellence https://haxtheweb.org/what-is-hax
- Youtube channel - https://www.youtube.com/@haxtheweb
