@haxtheweb/create
v11.0.7
Published
CLI for all things HAX the web
Downloads
39
Maintainers
btoproReadme
HAX The CLI
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 startCommands
Default / global / new context
hax 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)
--help
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
Examples
For a detailed list of example commands that you can perform with hax see examples.
Manual
Linux / macOS
Run man hax to get detailed manual.
Alternative Usage
# also this will invoke 1x
npx @haxtheweb/create
# this is same as above, better windows CLI support
npm init @haxtheweb# script creating a new element called my-element w/ all defaults
npm run hax -- --name my-element --yWindows problems?
Try 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!
Web component
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
HAX Site
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
HAX Audit
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!
.dddignore Template
# 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
*.jpegGet Help / Issues / Support
- 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!
Watch and Learn more about HAX here:
- Try Hax: https://hax.cloud
- HAXCellence https://haxtheweb.org/what-is-hax
- Youtube channel - https://www.youtube.com/@haxtheweb
Related links and tech
