Open Source Adventures: Episode 20: Imba 2 ROT-N
Tomasz Wegrzanowski
Posted on March 23, 2022
I want to start porting Imba 1 apps to Imba 2 with the simplest one - ROT-N decoder. Here's Imba 1 version.
You either paste text into the box or use file upload, and then it decodes every ROT-N from ROT-1 to ROT-25. It's somewhat useful for elementary hacking challenges.
Imba 1 app.imba
There's very little complicated here. rot(n) does the the rotating, upload handles upload events, and render renders the view.
tag App
def setup
@text = "Hello, world!"
def rot(n)
@text.replace /[a-z]/gi do |c|
let i = c.charCodeAt(0)
if i >= 97 and i <= 122
String.fromCharCode(((i - 97 + n) % 26) + 97)
else if i >= 65 and i <= 90
String.fromCharCode(((i - 65 + n) % 26) + 65)
else
c
def upload(event)
let file = event.native:target:files[0]
return unless file
let reader = FileReader.new
reader:onload = do |event|
@text = event:target:result
@error = nil
Imba.commit
reader.read-as-text(file)
def render
<self>
<div.contents>
<header>
"ROT-N"
<textarea[@text]>
<div>
<input#file type="file" :change.upload>
<table>
for i in [1..25]
<tr .{"rot-{i}"}>
<th>
i
<td>
rot(i)
Imba.mount <App>
Imba 1 app.scss
@import 'normalize-scss';
@include normalize();
.App {
display: flex;
justify-content: space-around;
max-width: 1000px;
margin: auto;
header {
font-size: 64px;
text-align: center;
}
textarea {
min-width: 50vw;
min-height: 100px;
}
th {
padding-right: 5px;
}
}
Getting started
I had a boilerplate with settings I like, like GitHub Pages, SCSS, but let's start fresh with npx imba create imba2-rotn.
There are some truly attrocious settings in it - .vscode and .editorconfig forcing 4 space indentation, both straight into trash. Even if Imba insists on tabs, they should be visually 2 spaced, or it looks like ass.
OK, with that out of the way we can start coding.
app/index.html
This only requires changing the title, the rest is fine.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Imba 2 ROT-N</title>
<!-- reference to the client script styles -->
<style src='*'></style>
</head>
<body>
<!-- reference to the client script -->
<script type="module" src="./client.imba"></script>
</body>
</html>
app/client.imba
This is fairly close to direct translation:
tag app
prop text = "Hello, World!"
def rot(n)
text.replace /[a-z]/gi do |c|
let i = c.charCodeAt(0)
if i >= 97 and i <= 122
String.fromCharCode(((i - 97 + n) % 26) + 97)
else if i >= 65 and i <= 90
String.fromCharCode(((i - 65 + n) % 26) + 65)
else
c
def upload(event)
let file = event.target.files[0]
return unless file
let reader = new FileReader
reader.onload = do |event|
text = event.target.result
imba.commit()
reader.readAsText(file)
<self>
<div.contents>
<header>
"ROT-N"
<textarea bind=text>
<div>
<input#file type="file" :change.upload>
<table>
for i in [1 .. 25]
<tr>
<th>
i
<td>
rot(i)
css
display: flex
justify-content: space-around
max-width: 1000px
margin: auto
ff: sans
header
font-size: 64px
text-align: center
textarea
min-width: 50vw
min-height: 100px
th
padding-right: 5px
imba.mount <app>
Some differences:
- CSS is not in the component, getting translated the usual way just like Svelte does it
- there's no wrapping
renderfunction, it's just a<self>(which becomes<app-tag>, it's all web components on top level) - syntax is a bit different
<textarea[text]>becomes<textarea bind=text> - extra spaces needed in range
[1 .. 25] - no more
:vs.distinction - no more
read-as-textbecomingreadAsText- Imba 2 still allows-in names, but it translates them to some Unicode character, so all DOM APIs will beuglyCamelCame - Ruby-style
FileReader.newis now JavaScript-stylenew FileReader - I'm not totally sure where
()are needed and where they aren't, the rules are different now
But overall it was very straightforward port.
Source code
Source code is in imba2-rotn repository. At some point I'll try to add GitHub Pages support for it.
Coming next
In the next few episodes I'll try to port a few more Imba 1 apps to Imba 2, and then I guess I'll summarize my thoughts about Imba situation.
Posted on March 23, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.