Parsing Inline Strings Across Platforms: Building a Small Cross Platform Library by Vincent

Vincent Salamanca-Gagnon Android Developer, Transit Parsing Inline Strings Building a
Small Cross-Platform Library

Outline • Demonstrate library use case • Design decisions •
Implementation of a string parser • Learn something new

Strings

DevFest Montreal 2024

DevFest Montreal 2024 buildAnnotatedString { }

DevFest Montreal 2024 buildAnnotatedString { append("DevFest Montreal ") }

DevFest Montreal 2024 buildAnnotatedString { append("DevFest Montreal ") withStyle( style
= SpanStyle(fontWeight = FontWeight.Bold) ) { } }

DevFest Montreal 2024 buildAnnotatedString { append("DevFest Montreal ") withStyle( style
= SpanStyle(fontWeight = FontWeight.Bold) ) { append("2024") } }

Issues • Ressources? • Accessibility? • User preference? • Dynamic?

Library

Design Guidelines • Avoid code duplication between platforms • Make
it easy to extend and flexible • Minimize API surface • Performance

Kotlin Multiplatform (KMP) • Kotlin ❤ • Incremental Adoption •
Flexible API boundary

Flexible API Boundary

Design Considerations • Avoid code duplication between platforms • Make
it easy to extend and flexible • Minimize API surface • Performance

Design Considerations • Avoid code duplication between platforms ✅ •
Make it easy to extend and flexible • Minimize API surface • Performance

Language?

JSON? • Flexible ✅ • Typed ❌ • Ordering ❌
• Performance ? {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } } }

HTML • Markup language ✅ <html> <body> <h1>My First Heading
</ h1> <p>My first paragraph. </ p> < / body> < / html>

HTML • Markup language

Domain Specific Language (DSL) Stop: Sherbrooke 8 : 10PM <bold>Stop:
</ bold> Sherbrooke <eta|1731182400|late> • Minimal ✅ • Flexible/Extensible ✅ • Typed ✅ • Performance*

Keywords • <stop> • <branch-code|445> • <price|currency> • <number> •
<countdown> • …

<bold>Stop: </ bold> Sherbrooke <eta| 1731182400|late>

Stop: Sherbrooke 8 : 10PM

Stop: Sherbrooke 8 : 10PM Stop: Sherbrooke 20 : 10
Stop: Sherbrooke 8 : 10PM

Compiler?

String Parser

Implementation

Our Library

<bold>Stop: < / bold> Sherbrooke <eta|1731182400|late> <bold> Stop: < /
bold> Sherbrooke <eta | 1731182400 | late >

Tokens <NAME|PARAMETER>content </ NAME> • TAGBEGIN: <NAME • TAGEND: >
• TAGCLOSE: </ NAME> • PARAMETER: between | • CONTENT: Text between tags

Token Class sealed class Token { data class TagBegin(val name:
String, val position: Int) : Token() data class TagEnd(val position: Int) : Token() data class TagClose(val name: String, val position: Int) : Token() data class Parameter(val value: String, val position: Int) : Token() data class Content(val text: String, val position: Int) : Token() }

Lexer Class class Lexer(private val input: String) { private var
position: Int = 0 private val length = input.length fun lex(): List<Token> { val tokens = mutableListOf<Token>() return tokens } }

Lexer Class class Lexer(private val input: String) { private var
position: Int = 0 private val length = input.length fun lex(): List<Token> { val tokens = mutableListOf<Token>() while (position < length) { val currentChar = input[position] if (currentChar == '<') { tokens.addAll(readTag()) } else { tokens.add(readContent()) } } return tokens } }

private fun readContent(): Token.Content { val startPos = position val
content = StringBuilder() return Token.Content(content.toString(), startPos) } readContent()

private fun readContent(): Token.Content { val startPos = position val
content = StringBuilder() while (position < length && input[position] != '<') { content.append(input[position]) position++ } return Token.Content(content.toString(), startPos) } readContent()

private fun readTag(): List<Token> { val tokens = mutableListOf<Token>() val
startPos = position position++ // Skip '<' return tokens } readTag()

private fun readTag(): List<Token> { val tokens = mutableListOf<Token>() val
startPos = position position++ // Skip '<' if (input[position] == '/') { position++ // Skip '/' val name = readName() tokens.add(Token.TagClose(name, startPos)) expectChar('>') position++ // Skip '>' } else { } return tokens } readTag()

val name = readName() tokens.add(Token.TagBegin(name, startPos)) while (position < length
&& input[position] != '>') { } tokens.add(Token.TagEnd(position)) position++ // Skip '>' readTag()

readTag() val name = readName() tokens.add(Token.TagBegin(name, startPos)) while (position <
length && input[position] != '>') { if (input[position] == '|') { position++ // Skip '|' val param = readParameter() tokens.add(Token.Parameter(param, position)) } else if (input[position].isWhitespace()) { position++ // Skip whitespace } else { throw ParsingException("Unexpected character '${input[position]}' in tag", position) } } tokens.add(Token.TagEnd(position)) position++ // Skip '>'

readName() private fun readName(): String { val nameBuilder = StringBuilder()
while (position < length && input[position].isLetterOrDigit()) { nameBuilder.append(input[position]) position++ } if (nameBuilder.isEmpty()) { throw ParsingException("Tag name cannot be empty", position) } return nameBuilder.toString() }

class ParsingException(message: String, val position: Int) : Exception("$message at position
$position”) // ParsingException: Expected '>' at the end of tag at position 26 ParsingException

Result [ Content(text="Hello, ", position=0), TagBegin(name="bold", position=7), Parameter(value="param1", position=13), Parameter(value="param2",
position=20), TagEnd(position=26), Content(text="world", position=27), TagClose(name="bold", position=32), Content(text="!", position=38) ] Hello <bold|param1| param2>word < / bold>!

Parser • Add structure • Validate syntax • Output Abstract
Syntax Tree (AST)

Grammars • Terminals → Text Image Date • Non-Terminals →
Bold Light Color • Start Symbol

Grammars Production rules • Non-Terminal -> Terminal | Non-Terminal

AST Hello <bold> word <color| #FFD932>8 : 10am </ color>
</ bold>

StringElement interface StringElement data class TextElement(val content: String) : StringElement
data class BoldElement(val content: List<StringElement>) : StringElement

Make it easy to extend and flexible ✅ • Minimize API surface • Performance

Walking the tree [ StyledElement(content = "Hello, ", styles =
{}), StyledElement(content = "world", styles = {Style.BOLD}), StyledElement(content = “8:10AM”, styles = {Style.BOLD, Style.COLOR}), … ]

API // commonMain fun parseStyledText(input: String): List<StyledElement> { val tokens
= Lexer(input).lex() // Lexing val ast = Parser(tokens).parse() // Parsing val styledElements = ast. fl atMap { element -> fl attenAST(element) } // Flattening return styledElements }

API // commonMain fun parseStyledText(input: String): List<StyledElement> { val tokens
= Lexer(input).lex() // Lexing val ast = Parser(tokens).parse() // Parsing val styledElements = ast. fl atMap { element -> fl attenAST(element) } // Flattening return styledElements } // Android @Composable fun InlineStringComposable(input: String) { val styledElements = parseStyledText(input) val annotatedString = buildAnnotatedString { styledElements.forEach { element -> // render styled element } } }

Make it easy to extend and flexible ✅ • Minimize API surface ✅ • Performance

• Memory allocation • No code • Combine Lexer/Parser •
Caching Performance

Going further • 100% KMP • JIT • Test Coverage
• Versioning

References • Crafting Interpreters by Robert Nystrom craftinginterpreters.com

Thank you

Questions Vincent Salamanca-Gagnon @vinsg_ [email protected] Crafting Interpreters by Robert Nystrom
craftinginterpreters.com

Parsing Inline Strings Across Platforms: Buildi...

Parsing Inline Strings Across Platforms: Building a Small Cross Platform Library by Vincent

More Decks by GDG Montreal

Other Decks in Programming

Featured

Transcript