imba / imba.io Goto Github PK

📄The official website of Imba

License: MIT License

JavaScript 97.92% CSS 0.76% Dockerfile 0.01% HTML 0.01% Shell 0.01% TypeScript 0.24% Imba 1.07%

imba.io's Introduction

Imba

Imba is a friendly full-stack programming language for the web that compiles to performant JavaScript. It has language-level support for defining, extending, subclassing, instantiating and rendering DOM nodes.

Get started

Try Imba instantly in your browser with our playground, or create a new project with:

npx imba create

Documentation

To get started with Imba, we recommend reading through the official guide.

Why Imba?

Minimal syntax

Imba's syntax is minimal, beautiful, and packed with clever features. It combines logic, markup and styling in a powerful way. Fewer keystrokes and less switching files mean you'll be able to build things fast.

import './util/reset.css'

global css html,body m:0 p:0 w:100% h:100%

tag login-form < form

	css input rd:md bc:gray3 h:20px fs:md
	css button rd:md c:white bg:gray4 @hover:blue4

	<self @submit.prevent=api.login(name,secret)>
		<input.username type='text' bind=name>
		<input.password type='password' bind=secret>
		<button> "Login as {name}"

imba.mount <login-form[pos:abs d:grid ja:center]>

Runs on both server and client

Imba powers both the frontend and the backend of Scrimba.com, our learning platform with 100K+ monthly active users. On the frontend, Imba replaces e.g., Vue or React, and on the backend, it works with the Node ecosystem (e.g., npm).

import express from 'express'
import services from './services.ts'
import html from './index.html'
import image from './confused-cat.png'

const app = express!

app.get '/404' do (req,res)
	res.send String <html> <body>
		<img src=image>
		<h1> "We could not find this page!"

app.get '/' do (req,res)
	res.send html.body

Integrated styling

Inspired by Tailwind, Imba brings styles directly into your code. Styles can be scoped to files, components, and even parts of your tag trees. Style modifiers like @hover, @lg, @landscape and @dark can be used for extremely concise yet powerful styling.

# global styles
global css button
	position: relative
	display: block
	background: #b2f5ea
	@hover background: #b2f9ea

# tailwind-inspired shorthands
global css button
	pos:relative d:block bg:blue5 bg@hover:blue6

tag App
	# scoped styles
	css item bg:blue4 m:2

	<self[d:grid pos:relative]> # inline styles
		<ul> for {type,title} in items
			<li.item is-{type}> title

Blazing fast, Zero config

Imba comes with a built-in bundler based on the blazing fast esbuild. Import stylesheets, images, typescript, html, workers and more without any configuration. Bundling is so fast that there is no difference between production and development mode - it all happens on-demand.

# importing a worker
const worker = import.worker './analyzer'
const analyzer = new Worker(worker.url)
# import an image
const logo = import './images/logo.png'
console.log "logo size: {logo.width}x{logo.height} - at {logo.url}"

When you run your app with the imba command, it automatically bundles and compiles your imba code, along with typescript, css and many other file types. It provides automatic reloading of both the server and client.

Typing and tooling

The tooling is implemented as a typescript server plugin giving us great intellisense, diagnostics, and even cross-file refactorings that works with js/ts files in the same project. You can import types just like in typescript, and annotate variables, parameters and expressions. Like the language, the tooling is still in alpha, but improving every day.

import type { CookieOptions } from 'express-serve-static-core'

def flash res\Response, body\string, settings = {}
	let options\CookieOptions = {
		...settings
		maxAge: 86400
		secure: true
		httpOnly: false
	}

	res.cookie('flash',body,options)

Community

For questions and support, please use our community chat on Discord.

License

MIT

imba.io's People

Contributors

Stargazers

Watchers

imba.io's Issues

Sidebar takes up too much space on mobile screens

As the title says the sidebar occupies a lot of screen space. Also it does not close when selecting items, would be nice if it collapsed after selecting an item.

Screenshot

missing link in language caveats section

http://imba.io/guides/language#toc-caveats-self-vs-this

on that page, under "implicit invocation" there is a link with no URL:

...You can read more about the reasons for this [here]. If you're...

Look into using GitHub actions to update imba.io server

Would be sweet to automate this.

http is 404

http://imba.io responce 404
I guess redirect is needed

New slogan for v2

Now that Imba v2 is arriving soon, what should the new slogan on the front page be? Currently it's

Create complex web apps with ease!

I think you can come up with something better, what do you think?

Setup proper redirects to docs.imba.io

To preserve the links that are related we will be redirecting imba.io/* to docs.imba.io. We can use a dictionary and let express handle it.

Show current Imba version in the navigation bar

Clicking the version should open new tab on GitHub for the latest release.

rename the guide directory to files

The point with the renaming is that we are using that directory for more than just the guide. It's also making translation much easier. So the name guide is confusing and misleading.

can't start server

when I run gulp server i get this error

{ [Error: spawn imba ENOENT]
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'spawn imba',
  path: 'imba',
  spawnargs: [ 'src/server.imba' ] }

and also I was getting an error that said scrimbla/src/core/highlighter module cannot be found,

README: Update clone url to use imba/imba.io

The README is currently telling you to clone somebee/imba.io.git but it should say imba/imba.io instead.

https://github.com/imba/imba.io/blame/master/README.md#L6

We should get the imba.js.org domain. It's free.

Here are the steps on how to get it. https://js.org/

Fix checkbox rendering

Checkboxes are currently rendering poorly on the site. We should style them.

Need codeblock highlighting for non imba code.

Need code blocks for non imba code such as commandline code. it seems that everything has imba highlighting at the moment.

git clone https://github.com/imba/template my-app

Add a new dedicated playground section

This will ideally come with lots of examples but the reader should have the option to change anything inside of the playground.

I think this way we can provide complete examples and explain concepts more interactively.

Svelte has a great examples section that we can model this after https://svelte.dev/examples#hello-world

Can we embed Scrimba playgrounds for this @somebee?

Related-to: imba/imba.io#55

Fix css highlighting in code

CSS blocks are not highlighted in markdown code blocks or the editor

Create new landing page design

Well before the Imba v2 release, we want to have a brand new landing page that links to the various things. This page should intrigue you try out Imba or easily find useful links. Also, the new slogan has to be prominent/visible.

Some Links

Listed the ones I remember but probably more could be added.

Imba Changelog
Imba Bi-Weekly Community Meeting
docs.imba.io
etc.

Fix the compile errors from the Markdown

It looks like what is happening is that the markdown renderer extension to code is triggering compilation on code snippets which are not supposed to be compiled.

The compile errors don't prevent the server for running but are annoying and make testing changes that happen at initial load time harder since so much text is outputted by default. I comment out the error logging locally but would be good to have a proper fix.

https://github.com/imba/imba.io/blob/master/src/util/markdown.imba#L146-L150

Related-to: #28

Allow serverside code in playground

Could allow minimal serverside code in the playground by compiling in the serviceworker and using a koa-like interface - or even use kao directly. Worth exploring.

Is there any example without using javascript on the server side.?

Is there any example without using javascript on the server side.? Something simple, like connecting to a ruby based json rest api and using a router whitin?

Perform validation on Imba code in Markdown files

It's very easy to mess up indentation or introduce unwanted characters to the Imba code examples, would be nice to have some kind of way to run all of them easily via yarn and spot any syntax issues early.

Link to website in description

Repo description line should have a link to the website in it.

Middle-clicking a link navigates to that link

...instead of opening the link in a new tab which is the default behavior supported by major browsers.

add proper meta tags to all pages

Sharing the imba.io link on Slack and Facebook messenger looks boring. We should more meta fields, add twitter ones and Facebook.

<!-- HTML Meta Tags -->
<title>imba.io</title>
<meta name="description" content="">

<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="imba.io">
<meta itemprop="description" content="">
<meta itemprop="image" content="">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="http://imba.io">
<meta property="og:type" content="website">
<meta property="og:title" content="imba.io">
<meta property="og:description" content="">
<meta property="og:image" content="">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="imba.io">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

<!-- Meta Tags Generated via http://heymeta.com -->

Could you explain that: <todo[todo]@{todo.id}>

Could you explain the following row from TodoMVC-Imba code:
app.imba: 92

<ul.todo-list>
    for todo in items
        <todo[todo]@{todo.id}>
           |    |   ^ ???
           |    ^ pass the todo object to the tag as their 'object' field
           ^ create a todo tag

Sorry if you already mentioned it somewhere, but I couldn't find it in the docs.

Inclusive for...in range loop gives error in v2

for num in [0...10] Works
for num in [0..10] Error: Error: Parse error at [15:1]: Unexpected 'NUMBER' (/index.js:1)

update npm modules

Some of them might be outdated, will look into it.

Create imba plugin for Webstorm IDE

@somebee Hi. Do you plan to add imba language support for Webstorm IDE?

I cannot run this repo locally, I want to make some PR's

I follow the steps in the Read me file, and it doesn't run.
As soon as I open localhost:3011 on the browser the browser and terminall will show error.
On Browser

TypeError: Cannot read property 'toString' of undefined
    at Renderer.renderer.code (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:219:22)
    at Parser.tok (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:999:28)
    at Parser.parse (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:944:17)
    at Object.exports.render.self.render (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:298:23)
    at add (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:33:18)
    at add (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:27:5)
    at new Guide (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:63:2)
    at Function.Guide.get (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:70:33)
    at /Users/eric/dev/git/imba-org/imba.io/src/server.imba:32:20
    at Layer.handle [as handle_request] (/Users/eric/dev/git/imba-org/imba.io/node_modules/express/lib/router/layer.js:95:5)

On Terminal

        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.stop' } .stop
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.prevent' } .prevent
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.silence' } .silence
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.self' } .self
error compiling undefined
error?! { [Error: Parse error at [3:1]: Unexpected '.']
  error: { message: 'Parse error at [3:1]: Unexpected \'.\'' },
  message: 'Parse error at [3:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens:
      [ [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 3,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'tag.trigger(name, data = null)' } tag.trigger(name, data = null)
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.classname' } .classname
error compiling undefined
error?! { [Error: Parse error at [4:2]: Unexpected 'FORIN']
  error: { message: 'Parse error at [4:2]: Unexpected \'FORIN\'' },
  message: 'Parse error at [4:2]: Unexpected \'FORIN\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: 'FORIN',
        _value: 'in',
        _loc: 4,
        _len: 2,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'FORIN',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'for in' } for in
error compiling undefined
error?! { [Error: Parse error at [5:0]: Unexpected 'TERMINATOR']
  error:
   { message: 'Parse error at [5:0]: Unexpected \'TERMINATOR\'' },
  message: 'Parse error at [5:0]: Unexpected \'TERMINATOR\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token] ],
     token:
      Token {
        _type: 'TERMINATOR',
        _value: '\n',
        _loc: 5,
        _len: 0,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'TERMINATOR',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'await' } await
error compiling undefined
error?! { [Error: inconsistent    indentation]
  error:
   { SyntaxError: inconsistent    indentation
       at Lexer.error (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:2176:12)
       at Lexer.lineToken (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:1480:18)
       at Lexer.basicContext (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:384:138)
       at Lexer.parse (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:375:109)
       at Lexer.tokenize (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:351:7)
       at Object.exports.tokenize.self.tokenize (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/compiler.js:29:20)
       at Object.exports.compile.self.compile (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/compiler.js:78:21)
       at Object.exports.compile.self.compile (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/index.js:25:18)
       at Renderer.renderer.code (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:190:18)
       at Parser.tok (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:999:28) line: undefined },
  message: 'inconsistent    indentation',
  filename: undefined,
  line: undefined,
  _options:
   { tokens:
      [ [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token] ],
     pos: 14 },
  region: [ 57, 57 ],
  _code:
   'var number = 1\nvar numberString = switch number\n  when 0\n\t"zero"\n   when 1\n\t"one"\n   else\n\t"not 1 nor 0"\n\n# compact \nvar numberString2 = switch number\n  when 0 then "zero"\n  when 1 then "one"\n  else "not 1 nor 0"\n\n# you can also mix them\nvar numberString3 = switchnumber\n  when 0 then "zero"\n  when 1\n\t"one"\n  else "not 1 nor 0"' } var number = 1
var numberString = switch number
  when 0
        "zero"
   when 1
        "one"
   else
        "not 1 nor 0"

# compact
var numberString2 = switch number
  when 0 then "zero"
  when 1 then "one"
  else "not 1 nor 0"

# you can also mix them
var numberString3 = switch number
  when 0 then "zero"
  when 1
        "one"
  else "not 1 nor 0"
TypeError: Cannot read property 'toString' of undefined
    at Renderer.renderer.code (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:219:22)
    at Parser.tok (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:999:28)
    at Parser.parse (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:944:17)
    at Object.exports.render.self.render (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:298:23)
    at add (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:33:18)
    at add (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:27:5)
    at new Guide (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:63:2)
    at Function.Guide.get (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:70:33)
    at /Users/eric/dev/git/imba-org/imba.io/src/server.imba:32:20
    at Layer.handle [as handle_request] (/Users/eric/dev/git/imba-org/imba.io/node_modules/express/lib/router/layer.js:95:5)
^C
~/d/g/i/imba.io ❯❯❯ npm run start                                ✘ 130

> [email protected] start /Users/eric/dev/git/imba-org/imba.io
> imba ./src/server.imba

server is running on port 3011
error compiling undefined
error?! { [Error: Parse error at [3:0]: Unexpected 'TERMINATOR']
  error:
   { message: 'Parse error at [3:0]: Unexpected \'TERMINATOR\'' },
  message: 'Parse error at [3:0]: Unexpected \'TERMINATOR\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token] ],
     token:
      Token {
        _type: 'TERMINATOR',
        _value: '\n',
        _loc: 3,
        _len: 0,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'TERMINATOR',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'tag' } tag
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.stop' } .stop
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.prevent' } .prevent
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.silence' } .silence
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.self' } .self
error compiling undefined
error?! { [Error: Parse error at [3:1]: Unexpected '.']
  error: { message: 'Parse error at [3:1]: Unexpected \'.\'' },
  message: 'Parse error at [3:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens:
      [ [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 3,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'tag.trigger(name, data = null)' } tag.trigger(name, data = null)
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.classname' } .classname
error compiling undefined
error?! { [Error: Parse error at [4:2]: Unexpected 'FORIN']
  error: { message: 'Parse error at [4:2]: Unexpected \'FORIN\'' },
  message: 'Parse error at [4:2]: Unexpected \'FORIN\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: 'FORIN',
        _value: 'in',
        _loc: 4,
        _len: 2,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'FORIN',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'for in' } for in
error compiling undefined
error?! { [Error: Parse error at [5:0]: Unexpected 'TERMINATOR']
  error:
   { message: 'Parse error at [5:0]: Unexpected \'TERMINATOR\'' },
  message: 'Parse error at [5:0]: Unexpected \'TERMINATOR\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token] ],
     token:
      Token {
        _type: 'TERMINATOR',
        _value: '\n',
        _loc: 5,
        _len: 0,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'TERMINATOR',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'await' } await
error compiling undefined
error?! { [Error: inconsistent    indentation]
  error:
   { SyntaxError: inconsistent    indentation
       at Lexer.error (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:2176:12)
       at Lexer.lineToken (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:1480:18)
       at Lexer.basicContext (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:384:138)
       at Lexer.parse (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:375:109)
       at Lexer.tokenize (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:351:7)
       at Object.exports.tokenize.self.tokenize (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/compiler.js:29:20)
       at Object.exports.compile.self.compile (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/compiler.js:78:21)
       at Object.exports.compile.self.compile (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/index.js:25:18)
       at Renderer.renderer.code (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:190:18)
       at Parser.tok (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:999:28) line: undefined },
  message: 'inconsistent    indentation',
  filename: undefined,
  line: undefined,
  _options:
   { tokens:
      [ [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token] ],
     pos: 14 },
  region: [ 57, 57 ],
  _code:
   'var number = 1\nvar numberString = switch number\n  when 0\n\t"zero"\n   when 1\n\t"one"\n   else\n\t"not 1 nor 0"\n\n# compact \nvar numberString2 = switch number\n  when 0 then "zero"\n  when 1 then "one"\n  else "not 1 nor 0"\n\n# you can also mix them\nvar numberString3 = switchnumber\n  when 0 then "zero"\n  when 1\n\t"one"\n  else "not 1 nor 0"' } var number = 1
var numberString = switch number
  when 0
        "zero"
   when 1
        "one"
   else
        "not 1 nor 0"

# compact
var numberString2 = switch number
  when 0 then "zero"
  when 1 then "one"
  else "not 1 nor 0"

# you can also mix them
var numberString3 = switch number
  when 0 then "zero"
  when 1
        "one"
  else "not 1 nor 0"
TypeError: Cannot read property 'toString' of undefined
~/d/g/i/imba.io ❯❯❯ npm run start

> [email protected] start /Users/eric/dev/git/imba-org/imba.io
> imba ./src/server.imba

server is running on port 3011
error compiling undefined
error?! { [Error: Parse error at [3:0]: Unexpected 'TERMINATOR']
  error:
   { message: 'Parse error at [3:0]: Unexpected \'TERMINATOR\'' },
  message: 'Parse error at [3:0]: Unexpected \'TERMINATOR\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token] ],
     token:
      Token {
        _type: 'TERMINATOR',
        _value: '\n',
        _loc: 3,
        _len: 0,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'TERMINATOR',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'tag' } tag
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.stop' } .stop
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.prevent' } .prevent
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.silence' } .silence
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.self' } .self
error compiling undefined
error?! { [Error: Parse error at [3:1]: Unexpected '.']
  error: { message: 'Parse error at [3:1]: Unexpected \'.\'' },
  message: 'Parse error at [3:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens:
      [ [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 3,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'tag.trigger(name, data = null)' } tag.trigger(name, data = null)
error compiling undefined
error?! { [Error: Parse error at [0:1]: Unexpected '.']
  error: { message: 'Parse error at [0:1]: Unexpected \'.\'' },
  message: 'Parse error at [0:1]: Unexpected \'.\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 1,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: '.',
        _value: '.',
        _loc: 0,
        _len: 1,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: '.',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: '.classname' } .classname
error compiling undefined
error?! { [Error: Parse error at [4:2]: Unexpected 'FORIN']
  error: { message: 'Parse error at [4:2]: Unexpected \'FORIN\'' },
  message: 'Parse error at [4:2]: Unexpected \'FORIN\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token], [Token] ],
     token:
      Token {
        _type: 'FORIN',
        _value: 'in',
        _loc: 4,
        _len: 2,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'FORIN',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'for in' } for in
error compiling undefined
error?! { [Error: Parse error at [5:0]: Unexpected 'TERMINATOR']
  error:
   { message: 'Parse error at [5:0]: Unexpected \'TERMINATOR\'' },
  message: 'Parse error at [5:0]: Unexpected \'TERMINATOR\'',
  filename: undefined,
  line: undefined,
  _options:
   { pos: 2,
     tokens: [ [Token], [Token] ],
     token:
      Token {
        _type: 'TERMINATOR',
        _value: '\n',
        _loc: 5,
        _len: 0,
        _meta: null,
        generated: false,
        newLine: false,
        spaced: false,
        call: false },
     meta:
      { lexer: [Object],
        text: undefined,
        token: 'TERMINATOR',
        line: undefined,
        expected: [],
        recoverable: false } },
  _code: 'await' } await
error compiling undefined
error?! { [Error: inconsistent    indentation]
  error:
   { SyntaxError: inconsistent    indentation
       at Lexer.error (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:2176:12)
       at Lexer.lineToken (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:1480:18)
       at Lexer.basicContext (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:384:138)
       at Lexer.parse (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:375:109)
       at Lexer.tokenize (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/lexer.js:351:7)
       at Object.exports.tokenize.self.tokenize (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/compiler.js:29:20)
       at Object.exports.compile.self.compile (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/compiler.js:78:21)
       at Object.exports.compile.self.compile (/Users/eric/dev/git/imba-org/imba.io/node_modules/imba/lib/compiler/index.js:25:18)
       at Renderer.renderer.code (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:190:18)
       at Parser.tok (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:999:28) line: undefined },
  message: 'inconsistent    indentation',
  filename: undefined,
  line: undefined,
  _options:
   { tokens:
      [ [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token],
        [Token] ],
     pos: 14 },
  region: [ 57, 57 ],
  _code:
   'var number = 1\nvar numberString = switch number\n  when 0\n\t"zero"\n   when 1\n\t"one"\n   else\n\t"not 1 nor 0"\n\n# compact \nvar numberString2 = switch number\n  when 0 then "zero"\n  when 1 then "one"\n  else "not 1 nor 0"\n\n# you can also mix them\nvar numberString3 = switchnumber\n  when 0 then "zero"\n  when 1\n\t"one"\n  else "not 1 nor 0"' } var number = 1
var numberString = switch number
  when 0
        "zero"
   when 1
        "one"
   else
        "not 1 nor 0"

# compact
var numberString2 = switch number
  when 0 then "zero"
  when 1 then "one"
  else "not 1 nor 0"

# you can also mix them
var numberString3 = switch number
  when 0 then "zero"
  when 1
        "one"
  else "not 1 nor 0"
TypeError: Cannot read property 'toString' of undefined
    at Renderer.renderer.code (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:219:22)
    at Parser.tok (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:999:28)
    at Parser.parse (/Users/eric/dev/git/imba-org/imba.io/node_modules/marked/lib/marked.js:944:17)
    at Object.exports.render.self.render (/Users/eric/dev/git/imba-org/imba.io/src/util/markdown.imba:298:23)
    at add (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:33:18)
    at add (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:27:5)
    at new Guide (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:63:2)
    at Function.Guide.get (/Users/eric/dev/git/imba-org/imba.io/src/data/guide.imba:70:33)
    at /Users/eric/dev/git/imba-org/imba.io/src/server.imba:32:20
    at Layer.handle [as handle_request] (/Users/eric/dev/git/imba-org/imba.io/node_modules/express/lib/router/layer.js:95:5)

Safari blocked script

I see the below output in the console

Blocked script execution in 'https://scrimba.com/__sw__blank.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
https://www.imba.io/favicon.ico

Cmd+click on links does not open in new tab

sqrt is not square

In the doc for methods, there is :

def sqrt num
    num * num

Which should be :

def square num
    num * num

EDIT : Same for blocks, just below.

global search

Please consider adding search field to the pages. This makes it easier for beginners to quickly lookup syntax and related things.

Thanks.

Document `imbac --target`

Would be nice to explain when to use the different targets and the magic constants like $web$ and $node$ .

Add examples for ranges

# ranges
for item in [0...10] # exclusive
	item * 2
	
for item in [0..10] # inclusive (0 - 10)
	item * 2

Reference: https://scrimba.com/p/pJkZsB/cNRrLUL

Add link to YouTube Channel

https://www.youtube.com/channel/UCPOqjieI7GOx-gAKBLMktVg

Show compiled output for examples

Would be nice to the compiled Javascript on the website similar to what was done on the old site but using tabs instead.

Add a page on community

Link to

Gitter
Spectrum
YouTube
Code of Conduct

Change the `Community` item on the navigation bar to render this page.

Related-to: #92

Add Edit on GitHub to all pages

This should encourage more people to contribute and ease proofreading.

Code samples flow off-screen on mobile

Add X scroll overflow at the very least. Also code comment color does not have sufficient contrast on dark background.

Add .github files from Imba project

The Imba project has several useful files for contributors. It would be nice to also have some of them here. This includes doing the following

Copy the imba/.github/PULL_REQUEST_TEMPLATE.md
to imba.io/.github/PULL_REQUEST_TEMPLATE.md
Copy imba/.github/CODE_OF_CONDUCT.md to imba.io/.github/CODE_OF_CONDUCT.md
Copy imba/.github/CONTRIBUTING.md to imba.io/.github/CONTRIBUTING.md

Reduce the duplicated markdown files

Due to the way we load the files and cache them I choose to duplicate the structure so routing does not break. When a language has not managed to translate everything yet it results in duplicate content. It would be nice to only have the files that are actually translated in history. So maybe we can load the English directory and then dynamically merge it with the selected language. This would provide the desired fallback and reduce duplication in the repository.

Welcome to imba.io

We've finally launched a decent site with documentation and guides. Up until now, it has been very difficult to learn Imba, even if you were really interested. We still have a long road ahead, but at least
we have docs, guides, and examples to lead the way.

Dogfooding

The whole site is written in Imba, and uses the same code on server and client (including rendering and routing). All navigation after initial page-load happens through the history API rendered locally on the client, while any full reload should return the same page from the server. This is a great benefit of using the same code in both environments. The source can be found at somebee/imba.io. Even though it is still quite messy and the comments are few and far between, it is a good example of how to structure a site / project of decent size in imba.

Scrimbla

Every snippet on the site is editable, and runnable, thanks to a brand new web-based code editor written in Imba. It still has many quirks and issues, but it already includes some cool features, like live error
reporting, both compile-time errors and runtime errors (with proper sourcemapping). The long-term plan is to make Scrimbla the goto editor for coding imba, but for now it is only used for these tiny snippets around here.

var msg = "I am editable"

The editor is very experimental. Expect crashes, quirks, and tons of weird issues. When you do, please file an issue over at somebee/scrimbla.

Going forward

The documentation is still lacking, and the ecosystem is in its early days. We are working on a more usable playground for testing

We'd love for you to try it out. If you run into any trouble, make sure to file an issue or contact us on gitter. We'll do everything we can to help you out! Happy coding!

Update the plugins section and sync with imba/imba

https://github.com/imba/imba.io/blob/master/docs/guides.md#plugins
https://github.com/imba/imba#plugins

Compiled Javascript tab on documentation examples.

I'm thinking that it might be good to have a way to view compiled Javascript on the documentation examples. It might be helpful to some people, to learn what the syntax is actually doing.

[typo][minor]

Just a minor suggestion... In page:

http://imba.io/guides/essentials/state-management#state-management

https://github.com/imba/imba.io/blob/master/guide/1-Essentials/state-management.md

"unoppinionated" is not an actual word. "not opinionated" (only one 'p') is probably a better option ;)

Keep up the excellent work.

tutorials link is broken

This page: http://imba.io/guides#toc-tutorials

has a link for tutorials which goes to a 404 page: https://scrimba.com/topic/imba

Create a docset for Dash or similiar tools

I use Dash a lot to browse documentation locally and even offline. It makes sense to provide these for people using documentation browsing tools.

Reference: Docset Generation Guide

Add link to the twitter account on the navigation bar

Add the link after GitHub, see

https://github.com/imba/imba.io/blob/master/src/views/Site.imba#L64

Twitter account: https://twitter.com/imbajs

Create Imba template for CodeSandbox

See the documentation page on Contributing to CodeSandbox Client

How to add event handler to standard element?

Is it possible to add an onclick handler to e.g. just one button element without first subclassing button? I didn't find this mentioned in the imba docs.
Handling onclick by subclassing of course worked:

tag clickable-button < button
   def onclick evt
      console.log("clickable-button onclick, target %s", evt.target)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.