a + b
// Useful for functional helpers
numbers: [1, 2, 3]
doubled: numbers.map((n) => n * 2)
_(doubled) // [2, 4, 6]
\`\`\`
## Booleans and Equality
[placeholder topic]
## Conditional Expressions
[placeholder topic]
\`\`\`javascript
// A simple 'if' to execute code conditionally
status: \"active\"
(status == \"active\") ? { _(\"User is active.\") }
\`\`\`
[placeholder topic]
\`\`\`javascript
// if / else for choosing an action
isOnline: !0
(isOnline == !0) ? { _(\"Online\") } : { _(\"Offline\") } // Prints \"Online\"
\`\`\`
[placeholder topic]
\`\`\`javascript
// if / else returning a value
result: (1 > 2) ? { \"A\" } : { \"B\" } // result is \"B\"
\`\`\`
[placeholder topic]
\`\`\`javascript
// if / else if / else
score: 75
grade: (score >= 90) ? { \"A\" }
: (score >= 80) ? { \"B\" }
: (score >= 70) ? { \"C\" }
: { \"D\" }
_(grade) // Prints \"C\"
\`\`\`
## Data Structures
### Arrays
[placeholder topic]
\`\`\`javascript
primes: [2, 3, 5, 7]
_(primes[0]) // Random access: 2
primes[0] = 1
_(primes) // Mutation: [1, 3, 5, 7]
\`\`\`
### Strings
[placeholder topic]
\`\`\`javascript
greeting: \"Hi\"
_(greeting[1]) // \"i\"
\`\`\`
## Destructuring
[placeholder topic]
\`\`\`javascript
// Setup
user: { name: \"Zeta\", role: \"Admin\", id: 101 }
coords: [10, -5, 8]
// Extract 'name' and 'role' from the user block
user -> { name, role }
_(name) // \"Zeta\"
// Extract 'id' and alias it to 'userID'
user -> { id -> userID }
_(userID) // 101
// Extract first two elements from the array
coords -> [x, y]
_(y) // -5
\`\`\`
## Repetition
[placeholder topic]
### Iterating Collections
[placeholder topic]
\`\`\`javascript
// Iterate over an Array's values
([\"a\", \"b\"] -> item) * { _(item) }
// Iterate over an Array with index and value
([\"a\", \"b\"] -> [i, item]) * { _(i + \": \" + item) }
// Iterate over a Block's key-value pairs
({ id: 1 } -> [k, v]) * { _(k + \" is \" + v) }
// Iterate over a String's characters
(\"Hi\" -> char) * { _(char) }
// Destructure directly in the loop signature
users: [{ name: \"Orion\" }]
(users -> { name }) * { _(\"User: \" + name) }
\`\`\`
### Numeric Ranges
[placeholder topic]
\`\`\`javascript
// A range from 0 up to (but not including) 3
(0..3 -> i) * {
_(\"Iteration: \" + i) // Prints 0, 1, 2
}
\`\`\`
### Loop Control
[placeholder topic]
\`\`\`javascript
(0..10 -> i) * {
(i == 2) ? { >> } // Skip 2
(i == 5) ? { >< } // Break at 5
_(\"i is \" + i)
}
// Prints: i is 0, i is 1, i is 3, i is 4
\`\`\`
## Imports
[placeholder topic]
\`\`\`javascript
// Import 'block1' and 'block2' (as 'alias2') from a module
+ \"npm://hi-lang@0.1/path/file.hi\" -> { block1, block2 -> alias2 }
block1()
alias2(\"some value\")
\`\`\`
## Context Reference: @
[placeholder topic]
\`\`\`javascript
// This block is a portable method.
// It relies on '@' to get the context.
loggable: {
logId: { _(\"ID is: \" + @id) }
}
user: { id: 101, log: loggable.logId }
item: { id: \"abc-789\", log: loggable.logId }
user.log() // Prints \"ID is: 101\" (@ is 'user')
item.log() // Prints \"ID is: abc-789\" (@ is 'item')
\`\`\`
## Expression Blocks and Fluent Chaining
[placeholder topic]
\`\`\`javascript
// The last expression, \`a + b\`, is returned.
add: (a, b) {
_(\"adding...\") // Side-effect
a + b // Return value
}
result: add(2, 3) // result is 5
// An early, explicit return
check: (n) {
(n < 0) ? { ^ \"Negative\" }
\"Positive\"
}
\`\`\`
### Fluent Chaining
[placeholder topic]
\`\`\`javascript
calculator: {
#total: 0
add: (n) { total = total + n } // Assignment has no value, returns '@'
sub: (n) { total = total - n } // Also returns '@'
get: { ^ total } // Explicitly returns the final value
}
// .add() and .sub() return the calculator, allowing the chain
result: calculator.add(10).sub(4).get()
_(result) // Prints 6
\`\`\`
---
Hi is in early development. The syntax and features are subject to change.
`,
'json': `
# Building a better JSON
[placeholder topic]
`
},
renderContent() {
const contentEl = this.$root.querySelector('.markdown-body');
const mdContent = this.pages[this.activePage];
const init = () => {
if (!window.markdownit || !window.hljs) { setTimeout(init, 50); return }
const md = window.markdownit({
html: !0, linkify: !0, typographer: !0,
highlight: (s, l) => {
if (l && hljs.getLanguage(l)) try { return hljs.highlight(s, { language: l, ignoreIllegals: !0 }).value } catch (_) { }
return md.utils.escapeHtml(s)
}
});
contentEl.innerHTML = md.render(mdContent);
window.lucide?.createIcons();
};
init();
}
}" x-init="$watch('activePage', renderContent); renderContent()" class="w-full h-full bg-gray-50 text-gray-900 selection:bg-cyan-400/20 flex">