imba / vscode-imba Goto Github PK

Imba language support for Visual Studio Code

Home Page: https://marketplace.visualstudio.com/items?itemName=scrimba.vsimba

JavaScript 67.60% TypeScript 4.40% Imba 28.00%

vscode-imba'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

vscode-imba's People

Contributors

Stargazers

Watchers

Forkers

braunse haikyuu trafnar tekigg

vscode-imba's Issues

Propose allowing monarch syntax definitions in vscode

Include css selectors in outline

Support import path completions

Use the Programmatic Language Features #19

https://code.visualstudio.com/api/language-extensions/programmatic-language-features

From: somebee/vscode-imba#19

Make def target.methods appear in outline

Use imba-document for semantic highlighting

We are currently using semantic token info from the compiler. This is pretty slow, since we need to compile to get the regions, but it also means that semantic hl will be very broken whenever compilation fails.

With the approach from imba-document, which is just using a customized fast monarch grammar, we can highlight variables much faster and more consistently even while the file is in an erroneous state. It also supports incremental parsing, so it should be relatively easy to enable near-instant colorization down the road.

Service workers / examples not working in safari

add support for showing compiled JavaScript

This is useful for debugging Imba bugs

Backwards slash breaks syntax highlighting

See the attached picture below

syntax highlighting is broken for export default class className

export default class settings
	prop size = "10"

root identifier is wrongly highlighted as support.variable.object.node

Support style modifier completions

Offer rewriting JavaScript code

This would be super useful for experimentation and using example code from Node.js docs, npm modules, etc.

Related-to: imba/imba#366

Add more contrast to color scheme

Making the background darker would help a lot for bright environments / poor screens. Alternatively add a high-contrast version.

Support autocomplete for decorators

Add smart tag snippet on root that fills out tag declaration with the same name as file

Bring theme generation into repository

imba-language-server publish to npm ? #3

if publish to npm the other editor can use the language server

From: somebee/vscode-imba#3

Plugin crashes due to memory

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x113f28dc5 node::Abort() [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 2: 0x113f28e34 node::Abort() [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 3: 0x10fc37177 v8::internal::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 4: 0x10fc37117 v8::internal::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 5: 0x10fc7bfe5 v8::internal::Heap::StartIdleIncrementalMarking(v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 6: 0x10fc7d659 v8::internal::Heap::StartIdleIncrementalMarking(v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 7: 0x10fc7a32c v8::internal::Heap::CreateFillerObjectAt(unsigned long, int, v8::internal::ClearRecordedSlots, v8::internal::ClearFreedMemoryMode) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 8: 0x10fc77f42 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
 9: 0x10fc833aa v8::internal::Heap::PromotedExternalMemorySize() [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
10: 0x10fc83791 v8::internal::Heap::PromotedExternalMemorySize() [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
11: 0x10fe8493a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
12: 0x11010db00 v8::internal::RegExp::CompileForTesting(v8::internal::Isolate*, v8::internal::Zone*, v8::internal::RegExpCompileData*, v8::base::Flags<v8::internal::JSRegExp::Flag, int>, v8::internal::Handle<v8::internal::String>, v8::internal::Handle<v8::internal::String>, bool) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]
13: 0x11074f759 v8::internal::compiler::ZoneStats::ReturnZone(v8::internal::Zone*) [/Applications/Visual Studio Code.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework]

<--- Last few GCs --->
ca[21847:0x10e593000]  7295948 ms: Mark-sweep 4084.7 (4091.2) -> 4084.6 (4091.2) MB, 2569.0 / 0.0 ms  (+ 19.0 ms in 3 steps since start of marking, biggest step 9.0 ms, walltime since start of marking 2596 ms) (average mu = 0.192, current mu = 0.087) alloca[21847:0x10e593000]  7298916 ms: Mark-sweep 4090.6 (4097.2) -> 4090.6 (4097.2) MB, 2679.7 / 0.0 ms  (+ 34.7 ms in 5 steps since start of marking, biggest step 8.6 ms, walltime since start of marking 2722 ms) (average mu = 0.140, current mu = 0.085) alloca

Need to investigate. Find out whether it happens in ts-land or imba-land.

Language Server crashing

Hello, I am just starting to use Imba today...after installing the CLI and the VS Code extension, I opened a Imba file and the extension said the language server has crashed, I restarted up to 5 times and the same thing happens in all the restarts.

Simplify tmLanguage grammar

The current tmLanguage is based on typescript, which is insanely complex. It was created to get maximal semantic_ish_ highlighting before vscode really supported actual semantic highlighting. Since we're coloring variables via the language-server it makes sense to radically simplify the regular highlighting. This will improve hl performance, but more importantly make basic highlighting more consistent, and break much less.

Shows compiler error while writing style selectors

The compiler throws an error on selectors without any style properties. This is okay, but looks bad when we show these errors during editing.

Plugin seems to show errors in json files

Add completions and docs for tailwind class completion

Not a high priority, but would be a very cool addition.

Better markdown highlighting in imba-dark

Move tmLanguage and theme generation into repo

Support completions for easing functions in styles

Backspace randomly stops working

purpose autofix for inconsistent indentation

Similar to what eslint and company do, we can suggest fixing this for the user in place.

br incorrectly maps to radius alias

Error in tmLanguage and parser for multiline string

	
export const TransformMixin = '''
	--t_x:0;--t_y:0;--t_z:0;--t_rotate:0;--t_scale:1;--t_scale-x:1;--t_scale-y:1;--t_skew-x:0;--t_skew-y:0;
	transform: translate3d(var(--t_x),var(--t_y),var(--t_z)) rotate(var(--t_rotate)) skewX(var(--t_skew-x)) skewY(var(--t_skew-y)) scaleX(var(--t_scale-x)) scaleY(var(--t_scale-y)) scale(var(--t_scale));
'''

export class StyleRule

Block comments not highlighted correctly

Support highlighting imba blocks in markdown

Errors in highlighting

Allow jumping to files via import path string

Implement semantic highlighting using the semantic tokens api

Will probably be moved out of experimental status in vscode 1.45

Top-level tags are not highlighted

<div>
	if items
		<h1> "List of items:"
		<ul> for item in items

The div is not highlighted in vscode

Document special width/height css values

Make path completion overwrite path correctly

There are tons of issues with autocompletions for paths. Need to overhaul it completely to respect the current path-prefix etc.

Correctly mark catch e variable

Include named elements in outline and goto symbol

### Comment blocks syntax colors are broken

For me the syntax colors are broken on comment blocks in VS Code.
Everything works fine with css comment blocks thought.

css

VSCode red underline at end of document.

I get a syntax error red-underline at the end of this code. Not sure why. The code works fine.
v2.4.1
Huge improvement from previous version of the plugin. Less errors overall.

tag Face
	prop title = "red"
	css svg
		position: absolute
		width: 5.75em;
		left: 4.2em;
		top: 4.2em;
		animation: face 2s infinite;	
	def render
		<self>
			<svg viewBox="0 0 387 232" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
				<g>
					# upper beak
					<path[fill:red6] d="M216.621,143.922c-16.687,4.351 -34.072,7.166 -51.074,4.369l-0.106,-0.018c3.906,14.881 17.123,28.064 34.588,24.817c8.818,-1.639 17.408,-8.327 18.505,-17.829c0.44,-3.812 -0.226,-7.681 -1.469,-11.333c0,0 -0.248,-0.058 -0.444,-0.006Z" />
					# lower beak
					<path[fill:red6] d="M206.753,107.703c-15.557,0.135 -31.575,6.056 -40.484,18.958c-1.975,2.859 -3.585,6.052 -3.821,9.466l0,0.005c15.878,4.187 33.106,1.509 49.552,-2.645c14.753,-3.726 29.081,-9 43.155,-14.844l0.363,-0.151c-15.24,-6.043 -31.408,-10.611 -47.653,-10.788c-0.371,-0.002 -0.741,-0.002 -1.112,-0.001Z"/>
					<g>
						# right brow
						<path[fill:gray9] d="M264.198,5.92c16.578,0.105 31.506,10.493 40.804,24.697c0,0 2.341,7.471 -3.222,8.813c-5.489,1.323 -8.895,-7.567 -14.66,-12.961c-5.105,-4.775 -11.519,-8.124 -18.584,-9.015c-6.719,-0.847 -13.541,0.339 -19.974,2.233c0,0 -3.164,0.63 -5.212,-1.093c-3.141,-2.641 -2.174,-8.483 2.52,-9.849c5.843,-1.701 11.794,-2.778 17.827,-2.825c0.167,-0.001 0.334,-0.001 0.501,0Z"/>
						<g>
							# right eye
							<path[fill:gray9] d="M265.837,50.183c-9.673,0.838 -16.846,9.373 -16.007,19.046c0.838,9.674 9.373,16.846 19.046,16.008c9.674,-0.839 16.846,-9.373 16.008,-19.047c-0.839,-9.673 -9.373,-16.846 -19.047,-16.007Z"/>
							# right eye speck
							<circle[fill:white] cx="273.048" cy="59.188" r="4.171"/>
					<g>
						# left brow
						<path[fill:gray9] d="M92.408,24.036c4.676,0.036 10.93,0.778 9.878,6.751c-0.968,5.49 -9.306,4.027 -16.506,4.844c-10.361,1.176 -20.084,6.934 -25.768,15.716c-2.35,3.63 -4.154,7.586 -5.623,11.646c0,0 -2.255,3.893 -5.609,3.704c-3.367,-0.189 -6.082,-3.847 -5.079,-7.223c3.981,-13.387 15.815,-28.666 32.189,-33.346c5.344,-1.528 10.887,-2.097 16.518,-2.092Z"/>
						<g>
							# left eye
							<path[fill:gray9] d="M92.892,72.131c-9.674,0.839 -16.846,9.373 -16.008,19.047c0.839,9.673 9.373,16.846 19.046,16.007c9.674,-0.838 16.847,-9.373 16.008,-19.046c-0.839,-9.674 -9.373,-16.846 -19.046,-16.008Z"/>
							# left teye speck
							<circle[fill:white] cx="100.102" cy="81.137" r="4.171"/>
					# left cheek
					<path[fill:yellow4] d="M44.732,136.693c24.484,-3.497 47.202,13.542 50.699,38.027c3.496,24.484 -13.543,47.202 -38.027,50.699c-24.485,3.497 -47.202,-13.543 -50.699,-38.027c-3.497,-24.485 13.542,-47.202 38.027,-50.699Z"/>
					# right cheek
					<path[fill:yellow4] d="M328.865,98.211c24.485,-3.497 47.202,13.543 50.699,38.027c3.497,24.485 -13.542,47.202 -38.027,50.699c-24.484,3.497 -47.202,-13.543 -50.699,-38.027c-3.497,-24.485 13.543,-47.202 38.027,-50.699Z"/>
tag Head
	css svg
		position: absolute
		width: 7.5em;
		left: 2.75em;
		top: 2.75em;
	def render
		<self>
			<svg viewBox="0 0 520 524" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
				<rect[fill:yellow4] x="0" y="0" width="519.66" height="523.399" style="fill:none;"/>
				<path[fill:yellow3] d="M223.621,10.151c149.911,-22.108 266.464,79.957 286.166,217.906c19.702,137.95 -76.299,265.942 -214.248,285.644c-137.95,19.702 -265.942,-76.299 -285.644,-214.248c-18.56,-129.947 63.815,-267.194 213.726,-289.302Z"/>
				<path[fill:yellow4/40] d="M77.282,85.164c-25.295,48.055 -35.282,103.874 -27.494,158.407c19.702,137.95 147.695,233.951 285.644,214.249c58.857,-8.406 110.079,-36.525 147.935,-76.72c-36.456,69.27 -104.487,120.698 -187.828,132.601c-137.95,19.702 -265.942,-76.299 -285.644,-214.248c-11.067,-77.488 13.756,-157.571 67.387,-214.289Z"/>
tag WingLeft
	css svg
		position: absolute
		width: 3.625em;
		top: 5.46em;
		left: 0%;
		animation: flap .2s infinite;
		display: block;
		transform-origin: right center;
	def render
		<self>
			<svg viewBox="0 0 292 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
				<rect[fill:none] x="0" y="0" width="291.667" height="250" />
				<path[fill:yellow4] d="M286.523,84.597c-33.898,-56.826 -313.274,-102.554 -281.408,-65.474c31.866,37.079 167.094,83.35 174.999,83.937c-40.027,14.821 -147.426,43.2 -123.217,61.325c24.209,18.125 133.493,-8.988 133.329,-8.636c-29.403,24.572 -63.953,96.02 -26.468,79.237c59.143,-26.479 142.517,-117.278 122.765,-150.389Z"/>
tag WingRight
	css svg
		position: absolute
		width: 3.625em;
		top: 5em;
		right: 0em;
		animation: flap .2s infinite;
		transform-origin: left center;
		animation-delay: -0.1s;
	def render
		<self>
			<svg width="100%" viewBox="0 0 292 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
				<rect[fill:none] x="0" y="0" width="291.667" height="250" style="fill:none;"/>
				<path[fill:yellow4] d="M5.346,87.982c33.898,-56.826 313.273,-102.554 281.408,-65.474c-31.866,37.079 -167.094,83.35 -174.999,83.937c40.027,14.821 147.426,43.2 123.217,61.325c-24.209,18.125 -133.494,-8.988 -133.329,-8.635c29.403,24.571 63.953,96.019 26.468,79.236c-59.144,-26.478 -142.517,-117.278 -122.765,-150.389Z"/>
tag Crest
	css svg
		position: absolute
		width: 2.5em;
		top: .9em;
		left: 4.2em;
		animation: crest 4s infinite;
		animation-delay: 1s;
		transform-origin: bottom right;
	def render
		<self>
			<svg width="100%" viewBox="0 0 40 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
				<rect[fill:none] x="0" y="0" width="40" height="41.2"/>
				<path[fill:red6] d="M38.137,28.047c-0.828,-6.118 -2.131,-12.166 -3.479,-18.191c-0.531,-2.377 -1.337,-4.688 -2.152,-6.985c-1.045,-2.943 -2.882,-2.476 -3.697,0.555c-1.142,4.252 -1.98,8.572 -2.313,12.968c-0.085,1.128 -0.667,2.561 0.1,3.391c-15.712,-16.742 -27.47,-11.698 -10.625,6.923c-20.338,-1.481 -16.376,4.096 -5.164,8.683c10.471,4.284 30.355,11.274 27.33,-7.344"/>
tag Legs
	css svg
		position: absolute
		width: 3em;
		left: 4.5em;
		top: 9.6em;
		animation: dangle 2s infinite;
		animation-delay: 1s;
		transform-origin: top center;
	def render
		<self>
			<svg[fill:none] width="100%" viewBox="0 0 192 165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect x="0" y="0" width="191.605" height="164.233"/>
				<path[fill:red6] d="M96.857,18.518c5.392,0.897 5.088,8.594 4.633,14.914c-2.292,31.851 -17.427,63.215 -42.208,83.227c-11.087,8.953 -24.421,15.714 -38.621,16.439c-3.434,0.175 -7.136,-1.692 -7.353,-5.228c-0.218,-3.558 3.321,-5.794 7.321,-6.046c22.544,-1.525 41.868,-19.958 53.943,-39.951c10.395,-17.209 16.009,-37.307 15.97,-57.416c0,0 1.194,-6.35 6.315,-5.939Z"/>
				<path[fill:red6] d="M158.398,9.675c2.861,0.379 4.711,3.359 5.355,5.196c11.828,33.724 19.076,71.133 11.367,103.758c-3.443,14.572 -11.655,28.753 -25.974,35.41c0,0 -3.024,1.256 -5.416,-0.125c-3.86,-2.229 -3.108,-8.17 1.729,-10.593c13.28,-6.775 18.837,-23.605 20.388,-37.071c3.441,-29.873 -3.079,-60.785 -13.22,-89.067c0,0 -0.699,-2.259 0.153,-4.181c0.94,-2.119 3.174,-3.416 5.618,-3.327Z"/>
tag chico-bird
	css .shadow
		background-color: purple9/0;
		width: 6em;
		height: 6em;
		border-radius: 100%;
		top: 50%;
		left: 50%;
		box-shadow: 0 1.5em 3em yellow4/20, 0 1.5em 5em yellow3/5;
		transform: translateX(-50%) translateY(-50%);
		position: absolute;
	css chico-bird
		position: relative;
		font-size: 60px;
		width: 13em;
		height: 13em;
		display: block;
		animation: fly 2s infinite;
	css svg
		position: absolute
	css span
		position: absolute;
	css @keyframes 
		blink
			50% transform: translateY(2px)
		flap
			50% transform: rotate(10deg)
		dangle
			50% transform: rotate(10deg)
		crest
			50% transform: rotate(10deg)
		fly
			50% transform: translateY(30px)
	prop shadow = true
	def render
		<self>
			<span.shadow>
			<Legs>
			<WingRight>
			<WingLeft>
			<Crest>
			<Head>
			<Face>

methods
props

Anything exported really