Finish v2 docs

[trafnar]

Let's use this issue to keep track of which sections are incomplete.

Language

• [x] Identifiers
• [x] Grammar > Scoping > Global Variables
• [x] Control Flow > Await
• [x] Control Flow > Error Handling
• [x] Classes > Lazy Getters
• [ ] Global identifiers incomplete description

Rendering

• [x] Basic Syntax > Fragments (needs example)
• [ ] Custom Components > Self & Rendering
• [ ] Custom Components > Declaring Attributes
• [ ] Handling Events > Resize Event
• [ ] Handling Events > Selection Event
• [ ] Event Modifiers > Resize Modifiers
• [ ] Event Modifiers > Intersection Modifiers
• [ ] Tag Inheritance

Tags

• [ ] Server-Side Rendering
• [ ] State Management

Styling

• [x] Basic Syntax > Custom Units
• [ ] Style Modifiers > Class Modifiers
• [x] Style Modifiers > Breakpoints
• [ ] Style Modifiers > Custom Modifiers

[trafnar]

We should also check for broken links. I know there are some.

[trafnar]

• [ ] Add this content sindre shared from discord:

I added support for arbitrary breakpoints in css yesterday, so instead of pl@md: ... you can do pl@1024 or pl@900: ... etc. It turned out to be a very important feature while working on new scrimba site - when you want to really polish responsivity So even if it was an experiment I know already it's a stayer Also pl@!900 is essentially @media (max-width: 899px). All modifiers will support negation at some point The highlighting is lagging a little behind - so these breakpoint modifiers dont look that nice in vscode atm Anyone here have experience writing tmLanguage grammars? We're currently using a modified version of the typescript tmLanguage in vscode-imba, and it is insanely slow. Now that vscode has added support for semantic highlighting it could be so much simpler (and thereby faster). The easiest approach might be to just start removing rules from the tmLanguage file but I suspect that it should be relatively easy to just create a new one.

[ericvida]

• [ ] Explain Optional Chaining Operator:

const dogName = animals.dog?.name # JS
const dogName = animals.dog..name # IMBA ?

[ericvida]

• [ ] Document different ways to do Dynamic Styles

tag App
	def state = true
	def color = red5
	def dynamicClasses = ["primary", "secondary"]
	css h1 c:teal5
		&.optionOne	c:indigo5
	css h3 c: $variable
	css h4 c: var(--variable)
	css h5
		&.primary c:red5
		&.secondary c:purple5
	def render
		<self>
			<h1.optionOne=state> "Option one" # conditional classes
			<h2[c:{color}]> "Option Two" # dynamic Values
			<h3[$variable:color]> "Option Three" # Imba style variable syntax
			<h4{--variable:color}> "Option Four" # Css variable syntax
			<h5.{dynamicClass[0]}> "Option Four" # Dynamic Classes

[ericvida]

More to document

• [ ] How to make custom event modifiers
• [ ] How to extend tag element
• [ ] imba.commit! vs render!
• [ ] Custom css breakpoints p@1080:1 p@2000:2
• [ ] Selecting nested named objects in imba app.$child.$grandchild
• [ ] Private Properties #count = init
• [ ] renaming instance variables const {inc:inc2} = useCount(1)

[trafnar]

• [ ] callback syntax should use parens

[trafnar]

• [ ] How to insert special characters like  

[haikyuu]

• [ ] #196

[trafnar]

• [ ] https://imba.io/events/event-modifiers#util-sel the description is in the code, just write it in the body, some others on this page aren't documented either like passive

[haikyuu]

• [ ] Adding non standard attributes to a tag. From discord

You can define 'attr myattrname' on your components, or set 'html:attrname=value' on tags to set raw attributes

It already has a section in the website: https://imba.io/tags/custom-components#declaring-attributes

[ghost]

We should also check for broken links. I know there are some.

I just did a link check for imba.io with the help of the W3C Link Checker, and there were no issues detected.

[ghost]

I am working on a PR for global identifiers, but how are global classes, variables/constants, and functions required to start with an uppercase letter while global tags use all lowercase letters?

[haikyuu]

@IRod22 this only applies to tags. tag my-app makes <my-app> available in all the app as long as its file has been imported once. export default tag App behaves like regular es modules. You need to import it in order to be able to use it.