البدء السريع

1. اكتب البرنامج

أنشئ الملف counter.lolo:

lolo

app counter "1.0.0"
"A counter with increment, decrement and reset."
orbital CounterOrbital {
  entity Counter [runtime] {
    id : string!
    count : number = 0
  }

  trait Counting -> Counter [interaction, instance] {
    initial: ready

    state ready {
      INIT -> ready
        (render-ui main { type: stack, direction: horizontal, gap: md, align: center, children: [
          { type: button, label: "−", action: DECREMENT, variant: secondary, aria-label: "Decrease" },
          { type: typography, content: @entity.count, variant: h2 },
          { type: button, label: "+", action: INCREMENT, variant: primary, aria-label: "Increase" },
          { type: button, label: "Reset", action: RESET, variant: ghost }
        ] })
      INCREMENT -> ready
        (set @entity.count (+ @entity.count 1))
      DECREMENT -> ready
        (set @entity.count (- @entity.count 1))
      RESET -> ready
        (set @entity.count 0)
    }
  }

  page "/counter" -> Counting
}

اقرأه من أعلى إلى أسفل: الكيان Counter يحمل رقمًا واحدًا، والسمة Counting لها حالة واحدة هي ready. عند INIT (حين تُفتح الصفحة) ترسم صفًا من الأزرار والعدد. كل زر يرسل حدثًا، ولكل حدث انتقال يحدّث العدد. النص مرتبط بـ @entity.count، فيُعاد رسمه عندما يتغير العدد.

2. تحقّق

bash

orb validate counter.lolo

المعيار صفر أخطاء وصفر تحذيرات. جرّب كسره: احذف الانتقال RESET -> ready وتحقق مجددًا. يبلغ المترجم بأن زر Reset يرسل حدثًا لا تتعامل معه أي حالة. هذه هي الدائرة المغلقة: كل عنصر تفاعلي يجب أن يؤدي إلى مكان ما.

3. اختبر

bash

orb verify counter.lolo

يشغّل التحقق كل انتقال ويتأكد من أنه يفعل ما يعلنه: الحالة التي يصل إليها، والتأثيرات التي ينفذها، والشاشة التي يرسمها.

4. شغّله

bash

orb serve counter.lolo --open

يترجم orb serve البرنامج إلى تطبيق TypeScript ويقدّمه ببيئة تشغيل مدمجة، دون حاجة إلى Node.js. هذا البرنامج نفسه يعمل في هذه الصفحة:

آلة الحالات

Counting.lolololo

trait Counting -> Counter [interaction, instance] {
  state ready {
    INIT -> ready
      (render-ui main <Stack align={center} direction={horizontal} gap={md}>
        <Button action={DECREMENT} aria-label={Decrease} label={"−"} variant={secondary} />
        <Typography content={@entity.count} variant={h2} />
        <Button action={INCREMENT} aria-label={Increase} label={"+"} variant={primary} />
        <Button action={RESET} label={Reset} variant={ghost} />
      </Stack>)
    INCREMENT -> ready
      (emit MOVED { event: INCREMENT })
      (set @entity.count (+ @entity.count 1))
    DECREMENT -> ready
      (emit MOVED { event: DECREMENT })
      (set @entity.count (- @entity.count 1))
    RESET -> ready
      (emit MOVED { event: RESET })
      (set @entity.count 0)
  }

  emits {
    MOVED -> external {
      event : string!
    }
      @description "Each move names the event it took, so the diagram beside the demo can follow it."
  }
}

INIT

INCREMENT

DECREMENT

RESET

nowready

يعمل الآن مباشرة

std-orb-docex-counter.lolololo

app std-orb-docex-counter "1.0.0"
"std-orb-docex-counter — the smallest complete orbital: one entity, one trait with one state, three buttons and a closed circuit."
orbital CounterOrbital {
  entity Counter [runtime] {
    id : string!
    count : number = 0
  }

  trait Counting -> Counter [interaction, instance] {
    initial: ready

    state ready {
      INIT -> ready
        (render-ui main { type: stack, direction: horizontal, gap: md, align: center, children: [
          { type: button, label: "−", action: DECREMENT, variant: secondary, aria-label: "Decrease" },
          { type: typography, content: @entity.count, variant: h2 },
          { type: button, label: "+", action: INCREMENT, variant: primary, aria-label: "Increase" },
          { type: button, label: "Reset", action: RESET, variant: ghost }
        ] })
      INCREMENT -> ready
        (emit MOVED { event: "INCREMENT" })
        (set @entity.count (+ @entity.count 1))
      DECREMENT -> ready
        (emit MOVED { event: "DECREMENT" })
        (set @entity.count (- @entity.count 1))
      RESET -> ready
        (emit MOVED { event: "RESET" })
        (set @entity.count 0)
    }

    emits {
      MOVED -> external {
        event : string!
      }
        @description "Each move names the event it took, so the diagram beside the demo can follow it."
    }
  }

  page "/counter" -> Counting
}

ما الذي يحدث عندما يقع الحدث INCREMENT:

readyINCREMENT

→

ready

Effects (1)What runs, in order, when the transition fires.

(set @entity.count (+ @entity.count 1))

5. ترجمه

bash

orb compile counter.lolo --output ./counter-app

يكتب هذا تطبيقًا كاملًا يمكنك نشره في أي مكان. البرنامج هو المصدر، ولا تُحرَّر الشيفرة المولَّدة يدويًا أبدًا.

البدء السريع

1. اكتب البرنامج

2. تحقّق

3. اختبر

4. شغّله

→

5. ترجمه

التالي

Orb