Esquema do BubbleScript

O BubbleScript representa cada área de um app Bubble com um pequeno número de estruturas de origem reconhecíveis.

Use os tipos gerados para obter a sintaxe exata

Os exemplos abaixo mostram como funcionam as principais estruturas, não todas as propriedades disponíveis.

O workspace clonado contém os tipos canônicos para o CLI e o app atuais em .buildprint/types. Esses tipos definem os construtores, as propriedades, os nomes e as referências exatos disponíveis para o agente.

Tipos de dados

Um tipo de dados contém campos e também pode conter regras de privacidade.

import {
  currentUser,
  dataType,
  dataTypeRef,
  thisItem,
} from "@buildprint/bubblescript";

export default dataType("Task", {
  fields: [
    { display: "Title", type: "text" },
    { display: "Complete", type: "boolean", defaultValue: false },
    { display: "Owner", type: dataTypeRef("User") },
  ],
  privacyRules: [
    {
      name: "Owner can view",
      condition: thisItem()
        .field("Owner")
        .equals(currentUser()),
      permissions: {
        view_all: true,
        search_for: true,
        auto_binding: false,
        view_attachments: false,
      },
    },
  ],
});

Os campos podem conter valores integrados, referências a outros tipos de dados, valores de conjuntos de opções e listas. As condições das regras de privacidade determinam quando as permissões listadas são concedidas.

Conjuntos de opções

Um conjunto de opções define uma lista fixa de valores e atributos opcionais para esses valores.

import { optionSet } from "@buildprint/bubblescript";

export default optionSet("Task Status", {
  attributes: [
    { display: "Colour", type: "text" },
  ],
  values: [
    { display: "To do", Colour: "#667085" },
    { display: "In progress", Colour: "#2E90FA" },
    { display: "Complete", Colour: "#12B76A" },
  ],
});

A ordem de values é a ordem exibida no Bubble. Cada valor pode fornecer dados para os atributos declarados acima dele.

Páginas e elementos reutilizáveis

Uma raiz de UI contém as configurações do Bubble e uma árvore aninhada de elementos.

import {
  button,
  group,
  page,
  staticText,
  text,
} from "@buildprint/bubblescript";

export default page("dashboard-page", {
  name: "dashboard",
  layout: {
    container: "column",
    width: "fill",
    height: "fill",
  },
  properties: {
    title: staticText("Dashboard"),
  },
  children: [
    group("task-card", {
      name: "Group task card",
      layout: {
        container: "column",
        width: "fill",
        height: "fit",
      },
      children: [
        text("task-title", {
          properties: {
            text: staticText("Create the proposal"),
          },
        }),
        button("complete-task", {
          properties: {
            text: staticText("Mark as complete"),
          },
        }),
      ],
    }),
  ],
});

Um elemento reutilizável usa o mesmo modelo de UI aninhada com uma raiz reusable(...). As visualizações para dispositivos móveis e os elementos globais também têm seus próprios construtores de raiz.

Elementos e condições

Um elemento agrupa suas configurações por finalidade e pode incluir substituições condicionais.

button("save-task", {
  name: "Button save task",
  layout: {
    width: "fill",
    height: "fit",
  },
  properties: {
    text: staticText("Save task"),
  },
  conditions: [
    condition({
      when: currentPageWidth().lessThanOrEqual(600),
      layout: {
        width: "fill",
      },
    }),
  ],
})

Diferentes construtores de elementos aceitam propriedades diferentes. Os tipos gerados mostram o que está disponível para um botão, grupo, entrada, grupo de repetição ou outro elemento.

Workflows de frontend

Um workflow de frontend exporta um evento com ações executadas em ordem.

import {
  elementClicked,
  goToPage,
  pageRef,
} from "@buildprint/bubblescript";

export default elementClicked("Button open dashboard", {
  actions: [
    goToPage({
      page: pageRef("dashboard"),
      replaceHistory: false,
    }),
  ],
});

Os arquivos de workflows de frontend ficam junto à página, ao elemento reutilizável ou à visualização para dispositivos móveis. O evento determina quando o workflow é executado, e cada ação descreve uma operação do Bubble.

Workflows de backend

Um workflow de backend declara seus parâmetros e ações no servidor.

import {
  apiWorkflow,
  changeThing,
  wfParam,
} from "@buildprint/bubblescript";

export default apiWorkflow("Complete task", {
  parameters: [
    { name: "Task", type: "custom.task" },
  ],
  actions: [
    changeThing({
      thing: wfParam("Task"),
      fields: {
        Complete: true,
      },
    }),
  ],
});

Os workflows de backend podem usar ações de backend e parâmetros de workflow. Ações exclusivas da UI e referências a elementos não estão disponíveis neste contexto.

Referências e identidades

As referências conectam nós sem copiar toda a definição deles.

dataTypeRef("Task")
optionSetRef("Task Status")
pageRef("dashboard")
element("Button save task")
option("Task Status", "Complete")

Os nós existentes geralmente incluem IDs estáveis. O agente mantém esses IDs ao renomear ou editar um nó para que o Buildprint atualize o mesmo objeto do Bubble.

Exclusão

Tipos de dados, campos, conjuntos de opções, atributos e valores de opções são compatíveis com exclusão lógica. No momento, o BubbleScript bloqueia a exclusão permanente desses tipos de nós, pois são mais difíceis de recuperar.

{ id: "legacy_text", display: "Legacy", type: "text", deleted: true }

Outros tipos de nós têm suas próprias regras de exclusão. O agente usa buildprint check para revisar a exclusão planejada e quaisquer referências restantes antes de aplicá-la.