OMeta in JavaScript

Smalltalk and OMeta, implemented in OMeta/JS

Instructions: the text area below (source) works just like a Smalltalk workspace. To evaluate some code, just select it and press the "do it" button. "Print it" is like "do it", but it also prints the result by sending it the printString message.

Once you have finished going through these examples, make sure you check out my Logo and Prolog interpreters.

Source

1 + 2 * 3

123 printString size

6 perform: #* withArguments: {7}

self inform: 'hello', ' world'

Transcript
  show: 'hello world'; cr;
  show: 'isn''t this neat?'; cr

[:x :y | x + y] value: 1 value: 2

Transcript clear.
1 to: 20 do: [:n | Transcript show: 'n = ', n printString; cr]

sum := 0.
1 to: 100 do: [:x | sum := sum + x].
sum

" Arrays in this Smalltalk are more like OrderedCollections,
  but 0-based for compatibility w/ JavaScript "
r := {}.
x := 10.
[x > 0] whileTrue: [
  r addLast: x.
  x := x - 1
].
r

myArray := {1. 2. 3} at: 1 put: 5; yourself

" We've got variadic methods: the following calls the #new, passing
  arguments 1, 2, 3, and 4 "
Array new: 1 : 2 : 3 : 4

" You can use this Smalltalk to script your web browser.
  This will add a new canvas element to this page. "
canvas := document createElement: 'canvas'.
canvas setAttribute: 'width'  : '500'.
canvas setAttribute: 'height' : '275'.
(document getElementById: 'playArea') appendChild: canvas.
ctxt := canvas getContext: '2d'.
ctxt at: #fillStyle put: 'rgb(200,0,0)'.
ctxt fillRect: 10 : 10 : 55 : 50.
ctxt at: #fillStyle put: 'rgba(0,0,200,0.5)'.
ctxt fillRect: 30 : 30 : 55 : 50.

" The language of this workspace is not just a Smalltalk-like syntax for JS;
  it's actually the union of that and OMeta. Here are a few examples. "

" pattern matching on streams of integers "
ometa M {
  one ::= 1.
  ones ::= <one>+.
}.
M match: 1 with: #one.
M match: 2 with: #one.
M matchAll: #(1 1 1 1) with: #ones.

" pattern matching on streams of characters "
ometa M {
  x  ::= $x.
  xs ::= <x>+.
}.
M match: 'x' with: #x.
M match: 'y' with: #x.
M matchAll: 'xxxxx' with: #xs.

" left recursion "
ometa N {
  digit  ::= <super #digit>:d     => [d digitValue].
  number ::= <number>:n <digit>:d => [n * 10 + d]
           | <digit>. 
}.
N matchAll: '48271' with: #number

" ML-style pattern matching "
ometa Fact {
  fact 0                       => [1];
  fact :n ::= <fact (n - 1)>:m => [n * m].
}.
Fact match: 5 with: #fact

" recursive interpreter using pattern matching "
ometa Interp {
  interp ::= :x ?[x isNumber]               => [x]
           | {#plus  <interp>:x <interp>:y} => [x + y]
           | {#times <interp>:x <interp>:y} => [x * y].
}.
Interp match: {#plus. 5. {#times. 3. 2}} with: #interp

" a calculator "
ometa Calc {
  digit   ::= <char>:c ?[c isDigit]        => [c digitValue].
  number  ::= <number>:n <digit>:d         => [n * 10 + d]
            | <digit>.
  priExpr ::= <number>
            | "(" <expr>:e ")"             => [e].
  mulExpr ::= <mulExpr>:x "*" <priExpr>:y  => [x * y]
            | <mulExpr>:x "/" <priExpr>:y  => [x / y]
            | <priExpr>.
  addExpr ::= <addExpr>:x "+" <mulExpr>:y  => [x + y]
            | <addExpr>:x "-" <mulExpr>:y  => [x - y]
            | <mulExpr>.
  expr    ::= <addExpr>.
}.
Calc matchAll: '12-(34+2)*2' with: #expr

" using the #super rule to delegate to the 'supergrammar' "
ometa SuperTest {
  exactly :x ::= ![Transcript show: 'looking for ', x printString; cr]
                 <super #exactly x>.
  test       ::= "this is a test".
}.
SuperTest matchAll: 'this is a test' with: #test

" extend the smalltalk translator w/ method definitions "
ometa MDefSqueakParser : SqueakParser {
  unaryMsgPat       ::= <identifier>:m                        => [{{$'. m. $'}. {}}].
  binaryMsgPat      ::= <binary>:m  <identifier>:a            => [{m squish join: ''. {a}}].
  keywordMsgPatPart ::= <keyword>:k <identifier>:a            => [{k. a}].
  keywordMsgPat     ::= <keywordMsgPatPart>+:parts
                          ![parts collect: [:p | p at: 0]]:ks
                          ![parts collect: [:p | p at: 1]]:as
                          ![ks squish join: '']:ks            => [{{$'. ks escape. $'}. as}].
  msgPat            ::= <keywordMsgPat> 
                      | <binaryMsgPat>
                      | <unaryMsgPat>.
  methodDef         ::= <identifier>:cls <msgPat>:nameAndArgs <block false>:body
                          => [cls,, '.prototype[',, (nameAndArgs at: 0),, '] = ',,
                              'function(',, ((nameAndArgs at: 1) delimWith: ', '),, ') { ',,
                                'var $elf = this; ',,
                                'try { (',, body,, ')() } ',,
                                'catch (_r) { ',,
                                  'if (_r instanceof Return) return _r.value;',,
                                  'else throw _r } return this }'].
}.
ometa NewSqueakParser {
   expr ::= <foreign MDefSqueakParser #methodDef>
          | <foreign MDefSqueakParser #expr>.
}.
SqueakParser := NewSqueakParser.

" Important: the method declarations below will only work after the
  assignment above is evaluated. This is because the original parser
  does not understand method declarations.

So you should 'do it' the stuff above before you try anything below. "

Array first [^ self at: 0].
{1. 2. 3} first

String +++ aString [^ {self. aString} squish join: ''].
'foo' +++ 'bar'

String from: start to: end [^ self substring: start : end].
'hello world' from: 0 to: 5

" grand finale "

Scheduler := SqueakObject subclassWithFields: 'tasks timeout'.
Scheduler initialize [
  self
    tasks: {};
    timeout: 20;
    tick;
    yourself
].
Scheduler schedule: aTask [
  self tasks addLast: aTask
].
Scheduler tick [
  self tasks notEmpty ifTrue: [self tasks removeFirst value].
  window setTimeout: [self tick] : self timeout
].

theScheduler := Scheduler new.

Turtle := SqueakObject subclassWithFields: 'x y angle color'.
Turtle initialize [
  self
    x: 250;
    y: 60;
    angle: 0;
    color: 'black'
].
Turtle forwardBy: n [
  theScheduler schedule: [
    ctxt at: #strokeStyle put: self color.
    ctxt beginPath.
    ctxt moveTo: self x : self y.
    self x: self x + (n * (Math cos: self angle)).
    self y: self y + (n * (Math sin: self angle)).
    ctxt lineTo: self x : self y.
    ctxt stroke.
  ]
].
Turtle turnBy: n [
  theScheduler schedule: [
    self angle: self angle + (n * (Math at: #PI) / 180).
  ]
].

smiley := Turtle new.
smiley color: 'blue'.
1 to: 40 do: [:i |
  smiley forwardBy: 2 * i;
         turnBy: 89
].

Translation
Transcript

Note: I have tested OMeta/JS on Firefox 2.0.0.9, Safari 3.0.4, and IE 7.0.5730.11. Please e-mail me if it doesn't work for you (don't forget to let me know what browser you are using).

Known quirks:

On Safari, ctrl+p and ctrl+d don't work.

On IE, ctrl+p works, but also makes a print dialog pop up.

On IE, the canvas examples don't work.

Acknowledgements:

the code for this user interface was adapted from Takashi Yamamiya's JavaScript Workspace.

thanks to Dan Ingalls for suggesting the Turtle example.

To learn more about OMeta, click here.