This folder contains the code for Lab2, which is our set of shared components and code for student labs. Lab2 is the preferred set of components for a new lab, as opposed to our legacy system (which includes StudioApp.js and project.js).

• Any code or component in /lab2 should be generic enough to be shared between multiple labs.
• Code should be written in TypeScript.
• Code should use functional React components.
• When loading a lab as a ScriptLevel page, the lab part of the server-rendered page should not have any level- or user-specific data. That information should be loaded afterwards using asynchronous calls to server APIs. This allows the page to be cached independent of the user, and also allows the page to switch levels to other supported variants without a reload.

• Ability to switch between levels without page reload, if the levels are from a specific subset of labs.
• A cleaner project system, managed by ProjectManager.
• A new progress system.
• A new instructions UI component.
  • Displays instructions, with support for clickable text.
  • Displays validation feedback messages from the new progress system.
  • Displays a "Continue" to next level message when validation passes.
• Shared wrapper components to handle various lab behaviors:
  • Lab2Wrapper: Manages showing and hiding a level based on load state.
  • ProjectContainer: Manages loading project and level data for a level, and swapping that data out if the level changes.
• An error boundary which catches errors, reports them, and displays an error message.

As of 2024, all new labs should be based on Lab2. To create a new lab, you need to do the following:

• Backend changes (ruby):
  • Backend changes can be modeled off [the initial aichat PR](modeled off this PR)
  • Set up the new level and game type, and add the new level to levels_controller. This is unchanged from how our previous labs were set up.
  • Override uses_lab2 in the new level file and return true.
  • There are a few other minor backend changes required, see the linked PR.
• Frontend Changes (ts/js):
  • Set up your new lab react views on the frontend. See the apps/aichat folder in this PR.
  • Register your lab with lab2, these steps have changed since the aichat PR so we'll be looking at an example from pythonlab instead:
    • Define a new entrypoint for your lab, see apps/pythonlab/entrypoint.ts
      • Use view: with a dynamic import() call with a webpack chunk name defined
    • Create an index.js file for your lab, see apps/pythonlab/index.js, this is required to make our typescript config work with dynamic imports.
    • Add the new lab type to apps/lab2EntryPoints.ts

That’s it!

Currently, the following level apps are built for Lab2:

• AI Chat
• BubbleChoice
• Music
• Panels
• Python Lab
• StandaloneVideo

Music drove the initial implementation of Lab2.