@superblocksteam/cli 1.99.99-next.2 → 2.0.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -14,7 +14,7 @@ $ npm install -g @superblocksteam/cli
|
|
|
14
14
|
$ superblocks COMMAND
|
|
15
15
|
running command...
|
|
16
16
|
$ superblocks (--version)
|
|
17
|
-
@superblocksteam/cli/
|
|
17
|
+
@superblocksteam/cli/2.0.0-next.3 linux-x64 node-v20.19.0
|
|
18
18
|
$ superblocks --help [COMMAND]
|
|
19
19
|
USAGE
|
|
20
20
|
$ superblocks COMMAND
|
|
@@ -24,7 +24,7 @@ init_cjs_shims();
|
|
|
24
24
|
|
|
25
25
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-api.js
|
|
26
26
|
init_cjs_shims();
|
|
27
|
-
var content = '### APIs\n\nThe Superblocks framework allows you to create backend APIs. The high level structure for creating APIs is as follows:\n\n1. APIs are defined using TypeScript files that live inside the apis directory inside the page they are scoped to. Example: /pages/Page1/apis/myApi.ts\n2. This pattern is a declarative workflow builder, where you define each API step, its configuration, and its execution order within the API workflow.\n3. To make the API available for use, you must import it into the scope file and register it with `SbApi()`, then import and destructure it in your page component for use.\n\n#### Example of creating and then registering a Superblocks API:\n\nCRITICAL: The name of the API must be consistent across the API\'s TypeScript definition, the API\'s file name, references in page files, and the key used to register it in the scope file. See the consistent use of \'myApi\' below as an example.\n\nCreate the API by adding the myApi.ts file:\n\n```ts\n// Path to this API definition: /pages/Page1/apis/myApi.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("myApi", [\n new JavaScript("retrieve_orders", {\n fn: () => {\n return [\n {\n id: "ORD-001",\n customerName: "John Smith",\n total: 149.99,\n },\n {\n id: "ORD-002",\n customerName: "Sarah Jones",\n total: 89.5,\n },\n ];\n },\n }),\n]);\n```\n\nThen register the myApi API in the scope file:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n () => ({\n // Register the API in the scope\n myApi: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen use the API in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n SbPage,\n SbButton,\n SbTable,\n sbComputed,\n SbEventFlow,\n} from "@superblocksteam/library";\nimport { registerPage } from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n // Destructure the API from the scope entities to access its response\n const { myApi } = Page1;\n\n return (\n <SbPage>\n <SbButton\n // APIs can be invoked with the SbEventFlow API\n onClick={SbEventFlow.runApis([myApi])}\n label="Fetch Data"\n />\n {/* Access API response using sbComputed */}\n <SbTable tableData={sbComputed(() => myApi.response)} />\n </SbPage>\n );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n#### Example 2: API where a step references the output of a previous step\n\nThink hard about how you access the output of previous steps. You MUST use the output property of the previous step variable. There is no other way to access the output of a previous step (other than using a Variable block, but that is not what you want in this case and should only be used in very specific cases).\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport { JavaScript, Api } from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n new JavaScript("retrieve_orders", {\n fn: () => {\n return [\n {\n id: 1,\n customer: "John Smith",\n date: "2024-01-15",\n total: 199.99,\n status: "Pending",\n },\n {\n id: 2,\n customer: "Jane Doe",\n date: "2024-01-14",\n total: 149.99,\n status: "Shipped",\n },\n {\n id: 3,\n customer: "Bob Wilson",\n date: "2024-01-13",\n total: 299.99,\n status: "Delivered",\n },\n ];\n },\n }),\n new JavaScript("format_orders", {\n fn: ({ retrieve_orders }) => {\n return retrieve_orders.output.map((order) => ({\n ...order,\n date: new Date(order.date).toLocaleDateString(),\n }));\n },\n }),\n]);\n```\n\nThen you would register the API in your scope file and use it in your page component:\n\n```ts\n// /pages/Page1/scope.ts\nexport const Page1Scope = createSbScope(\n () => ({\n getOrders: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport { SbPage, SbTable, sbComputed } from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n const { getOrders } = Page1;\n\n return (\n <SbPage>\n <SbTable tableData={sbComputed(() => getOrders.response)} />\n </SbPage>\n );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n#### The Superblocks API TypeScript Type\n\nBelow is the full TypeScript spec for the APIs you create:\n\n````ts\n// @superblocksteam/types\n\nexport type JsonValue =\n | undefined\n | null\n | number\n | string\n | boolean\n | JsonValue[]\n | object;\nexport type State = { [key: string]: JsonValue };\nexport type Binding<T> = T | ((state: State) => T);\ntype Integrations = { id: string; description: string; metadata: JsonValue }[];\n\nclass Block {\n constructor(name: string) {}\n public run(): { output: JsonValue } {\n /* ... */\n }\n}\n\nclass Integration extends Block {\n constructor(name: string, integration_id: string) {}\n}\n\ntype State = Record<string, JsonValue>;\n\nclass JavaScript extends Integration {\n constructor(\n name: string,\n config: {\n fn: (\n {\n /* ... */\n },\n ) => JsonValue;\n },\n ) {\n super(name, "javascript");\n }\n}\n\nclass Python extends Integration {\n constructor(\n name: string,\n config: {\n // We want to just put the python function body here. The scope is the same as it would be if it were a JavaScript integration.\n fn: string;\n },\n ) {\n super(name, "python");\n }\n}\n\nclass Databricks extends Integration {\n static integrations: Integrations = [\n /* ... */\n ];\n\n /**\n * @param {string} name The name of the block.\n * @param {string} integration_id The id of the integration.\n * @param {object} config The config object.\n * @returns {void}\n */\n constructor(\n name: string,\n integration_id: string,\n config: {\n statement: Binding<string>;\n },\n ) {\n super(name, integration_id);\n }\n}\n\nclass Snowflake extends Integration {\n static integrations: Integrations = [\n /* ... */\n ];\n\n /**\n * @param {string} name The name of the block.\n * @param {string} integration_id The id of the integration.\n * @param {object} config The config object.\n * @returns {void}\n */\n constructor(\n name: string,\n integration_id: string,\n config: {\n statement: Binding<string>;\n },\n ) {\n super(name, integration_id);\n }\n}\n\nclass PostgreSQL extends Integration {\n static integrations: Integrations = [\n /* ... */\n ];\n\n /**\n * @param {string} name The name of the block.\n * @param {string} integration_id The id of the integration.\n * @param {object} config The config object.\n * @returns {void}\n */\n constructor(\n name: string,\n integration_id: string,\n config: {\n statement: Binding<string>;\n },\n ) {\n super(name, integration_id);\n }\n}\n\nclass RestApi extends Integration {\n constructor(\n name: string,\n config: {\n method:\n | "GET"\n | "POST"\n | "PUT"\n | "DELETE"\n | "PATCH"\n | "OPTIONS"\n | "HEAD"\n | "TRACE"\n | "CONNECT";\n url:\n | string\n | ((\n {\n /* ... */\n },\n ) => string);\n },\n ) {\n super(name);\n }\n}\n\nclass Email extends Integration {\n constructor(\n name: string,\n config: {\n from: Binding<string>;\n to: Binding<string>;\n subject: Binding<string>;\n cc?: Binding<string>;\n bcc?: Binding<string>;\n body?: Binding<string>;\n },\n ) {\n super(name);\n }\n}\n\nexport type Condition = {\n when: boolean | ((state: State) => boolean);\n then: Block[];\n};\n\nexport type Conditions = {\n if: Condition;\n elif?: Condition[];\n else?: Block[];\n};\n\nclass Conditional extends Block {\n constructor(name: string, config: Conditions) {\n super(name);\n }\n}\n\nclass TryCatch extends Block {\n constructor(\n name: string,\n config: {\n try: Block[];\n catch: Block[];\n finally?: Block[];\n variables: { error: string };\n },\n ) {\n super(name);\n }\n}\n\n/**\n * A Superblocks variable has the following access pattern:\n *\n * How to retrieve the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.value\n *\n * // INCORRECT\n * my_variable\n * ```\n *\n * How to set the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.set(value)\n *\n * // INCORRECT\n * my_variable = value\n * ```\n *\n */\n\nclass Variables extends Block {\n constructor(\n name: string,\n variables: {\n // The name of the variable.\n key: string;\n // The value of the variable.\n value: Binding<JsonValue>;\n }[],\n ) {\n super(name);\n }\n}\n\nclass Loop extends Block {\n constructor(\n name: string,\n config: {\n over: Binding<JsonValue[]>;\n variables: {\n // What the variable name for the current item is.\n item: string;\n // What the variable name for the current index is.\n index: string;\n };\n blocks: Block[];\n },\n ) {\n super(name);\n }\n}\n\nclass Parallel extends Block {\n constructor(\n name: string,\n config: {\n over: Binding<JsonValue[]>;\n variables: {\n // What the variable name for the current item is.\n item: string;\n };\n blocks: Block[];\n },\n ) {\n super(name);\n }\n}\n\nclass Throw extends Block {\n constructor(\n name: string,\n config: {\n error: Binding<JsonValue>;\n },\n ) {\n super(name);\n }\n}\n\nclass Return extends Block {\n constructor(\n name: string,\n config: {\n data: Binding<JsonValue>;\n },\n ) {\n super(name);\n }\n}\n\nclass Api {\n constructor(name: string, steps: Block[]) {}\n public get response(): JsonValue {\n /* ... */\n }\n public get error(): string | undefined {\n /* ... */\n }\n public run(): void {\n /* ... */\n }\n public cancel(): void {\n /* ... */\n }\n}\n````\n\n#### Example Usage\n\nBelow are examples of how you create Superblocks APIs, along with annotations to describe different pieces of functinality and expectations.\n\n##### Example 1: Simple API with conditional\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport {\n Conditional,\n Condition,\n PostgreSQL,\n JavaScript,\n Api,\n} from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n new Conditional("my_conditional", {\n if: {\n when: true,\n then: [\n new PostgreSQL(\n "retrieve_orders",\n "" /* <- integration uuid goes here */,\n {\n statement: "SELECT * FROM orders",\n },\n ),\n ],\n },\n else: [\n new JavaScript("fallthrough", {\n fn: () => "we did not execute the sql query",\n }),\n ],\n }),\n]);\n```\n\nTo run register and run the API we defined above:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport { SbPage, SbApi, SbTable, SbButton } from "@superblocksteam/library";\nimport { registerPage, showAlert } from "@superblocksteam/library";\n\nimport getOrders from "./apis/getOrders";\n\nconst Page1 = () => (\n <SbPage>\n <SbButton\n // APIs can be invoked with the SBEventFlow API.\n onClick={SbEventFlow.runApis([getOrders])}\n />\n // ...\n <SbTable>\n // APIs are part of the state object just like components. tableData=\n {(state) => state.getOrders.response}\n </SbTable>\n </SbPage>\n);\n\nexport default registerPage(Page1, {\n name: "MyPage",\n // You register APIs just like you would SbVariables.\n getOrders: SbApi(getOrders),\n});\n```\n\n#### Rules for using Superblocks APIs\n\nThink hard about the following important rules for correctly using Superblocks APIs:\n\n- You MUST use a destructured state object as the function parameter for dynamic block fields. The valid keys are (1) Superblocks entities (components, variables, etc) and (2) previous block outputs that are in the lexical scope. Example below:\n\n```ts\n// CORRECT: uses destructured state\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n\n// INCORRECT: uses state object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n```\n\n- The result of each scope is the result of the last block in that scope. In the following example, the value of `sendEmail.response` is the result of the `return_summary` block. Use this information to carefully ensure that the last block in your API is the one that returns the value you want.\n\n```ts\nexport default new Api("sendEmail", [\n new Email("send_email", {\n from: "noreply@company.com",\n to: "test@test.com",\n subject: "Test Email",\n body: "This is a test email",\n }),\n new JavaScript("return_summary", {\n fn: () => "Email sent successfully!",\n }),\n]);\n```\n\n```tsx\nconst scope = createSbScope<{\n Table1: any;\n}>({ sendEmail: SbApi({}) }, { name: "Page1" });\n\nexport default registerPage(\n () => (\n <SbPage /* ... */>\n // ...\n <SbTable\n bind={scope.entities.Table1}\n tableData={sbComputed(() => API1.response)}\n />\n // ...\n </SbPage>\n ),\n scope,\n);\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Do not reference variables that are not in scope. The ONLY things in scope in an API block are the outputs of previous steps and the state object.\n\n- Backend APIs CANNOT mutate frontend state inside of the API\n\n- APIs are registered in scope files using `SbApi()` and then accessed in page components by destructuring from the scope entities. Make sure you name the key used in registerScope the same as the imported API, but do not pass the imported Api into the SbApi() call.\n\n- To access API responses in your UI, use `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`.\n\n- You will not always be told which integrations to use in your API; you will have to determine that yourself based on the data you need to fetch.\n\n- Never add comments to code you (the ai) generate. User added comments are fine - leave those!\n';
|
|
27
|
+
var content = '### APIs\n\nThe Superblocks framework allows you to create backend APIs. The high level structure for creating APIs is as follows:\n\n1. APIs are defined using TypeScript files that live inside the apis directory inside the page they are scoped to. Example: /pages/Page1/apis/myApi.ts\n2. This pattern is a declarative workflow builder, where you define each API step, its configuration, and its execution order within the API workflow.\n3. To make the API available for use, you must import it into the scope file and register it with `SbApi()`, then import and destructure it in your page component for use.\n\n#### Example of creating and then registering a Superblocks API:\n\nCRITICAL: The name of the API must be consistent across the API\'s TypeScript definition, the API\'s file name, references in page files, and the key used to register it in the scope file. See the consistent use of \'myApi\' below as an example.\n\nCreate the API by adding the myApi.ts file:\n\n```ts\n// Path to this API definition: /pages/Page1/apis/myApi.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("myApi", [\n new JavaScript("retrieve_orders", {\n fn: () => {\n return [\n {\n id: "ORD-001",\n customerName: "John Smith",\n total: 149.99,\n },\n {\n id: "ORD-002",\n customerName: "Sarah Jones",\n total: 89.5,\n },\n ];\n },\n }),\n]);\n```\n\nThen register the myApi API in the scope file:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n () => ({\n // Register the API in the scope\n myApi: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen use the API in your page component:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n SbPage,\n SbSection,\n SbColumn,\n SbButton,\n SbTable,\n sbComputed,\n SbEventFlow,\n registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n // Destructure the API from the scope entities to access its response\n const { myApi } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbButton\n // APIs can be invoked with the SbEventFlow API\n onClick={SbEventFlow.runApis([myApi])}\n label="Fetch Data"\n />\n {/* Access API response using sbComputed */}\n <SbTable tableData={sbComputed(() => myApi.response)} />\n </SbColumn>\n </SbSection>\n </SbPage>\n );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n#### Example 2: API where a step references the output of a previous step\n\nThink hard about how you access the output of previous steps. You MUST use the output property of the previous step variable. There is no other way to access the output of a previous step (other than using a Variable block, but that is not what you want in this case and should only be used in very specific cases).\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport { JavaScript, Api } from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n new JavaScript("retrieve_orders", {\n fn: () => {\n return [\n {\n id: 1,\n customer: "John Smith",\n date: "2024-01-15",\n total: 199.99,\n status: "Pending",\n },\n {\n id: 2,\n customer: "Jane Doe",\n date: "2024-01-14",\n total: 149.99,\n status: "Shipped",\n },\n {\n id: 3,\n customer: "Bob Wilson",\n date: "2024-01-13",\n total: 299.99,\n status: "Delivered",\n },\n ];\n },\n }),\n new JavaScript("format_orders", {\n fn: ({ retrieve_orders }) => {\n return retrieve_orders.output.map((order) => ({\n ...order,\n date: new Date(order.date).toLocaleDateString(),\n }));\n },\n }),\n]);\n```\n\nThen you would register the API in your scope file and use it in your page component:\n\n```ts\n// /pages/Page1/scope.ts\nexport const Page1Scope = createSbScope(\n () => ({\n getOrders: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n SbPage,\n SbSection,\n SbColumn,\n SbTable,\n sbComputed,\n registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n const { getOrders } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbTable tableData={sbComputed(() => getOrders.response)} />\n </SbColumn>\n </SbSection>\n </SbPage>\n );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\n#### The Superblocks API TypeScript Type\n\nBelow is the full TypeScript spec for the APIs you create:\n\n````ts\n// @superblocksteam/types\n\nexport type JsonValue =\n | undefined\n | null\n | number\n | string\n | boolean\n | JsonValue[]\n | object;\nexport type State = { [key: string]: JsonValue };\nexport type Binding<T> = T | ((state: State) => T);\ntype Integrations = { id: string; description: string; metadata: JsonValue }[];\n\nclass Block {\n constructor(name: string) {}\n public run(): { output: JsonValue } {\n /* ... */\n }\n}\n\nclass Integration extends Block {\n constructor(name: string, integration_id: string) {}\n}\n\ntype State = Record<string, JsonValue>;\n\nclass JavaScript extends Integration {\n constructor(\n name: string,\n config: {\n fn: (\n {\n /* ... */\n },\n ) => JsonValue;\n },\n ) {\n super(name, "javascript");\n }\n}\n\nclass Python extends Integration {\n constructor(\n name: string,\n config: {\n // We want to just put the python function body here. The scope is the same as it would be if it were a JavaScript integration.\n fn: string;\n },\n ) {\n super(name, "python");\n }\n}\n\nclass Databricks extends Integration {\n static integrations: Integrations = [\n /* ... */\n ];\n\n /**\n * @param {string} name The name of the block.\n * @param {string} integration_id The id of the integration.\n * @param {object} config The config object.\n * @returns {void}\n */\n constructor(\n name: string,\n integration_id: string,\n config: {\n statement: Binding<string>;\n },\n ) {\n super(name, integration_id);\n }\n}\n\nclass Snowflake extends Integration {\n static integrations: Integrations = [\n /* ... */\n ];\n\n /**\n * @param {string} name The name of the block.\n * @param {string} integration_id The id of the integration.\n * @param {object} config The config object.\n * @returns {void}\n */\n constructor(\n name: string,\n integration_id: string,\n config: {\n statement: Binding<string>;\n },\n ) {\n super(name, integration_id);\n }\n}\n\nclass PostgreSQL extends Integration {\n static integrations: Integrations = [\n /* ... */\n ];\n\n /**\n * @param {string} name The name of the block.\n * @param {string} integration_id The id of the integration.\n * @param {object} config The config object.\n * @returns {void}\n */\n constructor(\n name: string,\n integration_id: string,\n config: {\n statement: Binding<string>;\n },\n ) {\n super(name, integration_id);\n }\n}\n\nclass RestApi extends Integration {\n constructor(\n name: string,\n config: {\n method:\n | "GET"\n | "POST"\n | "PUT"\n | "DELETE"\n | "PATCH"\n | "OPTIONS"\n | "HEAD"\n | "TRACE"\n | "CONNECT";\n url:\n | string\n | ((\n {\n /* ... */\n },\n ) => string);\n },\n ) {\n super(name);\n }\n}\n\nclass Email extends Integration {\n constructor(\n name: string,\n config: {\n from: Binding<string>;\n to: Binding<string>;\n subject: Binding<string>;\n cc?: Binding<string>;\n bcc?: Binding<string>;\n body?: Binding<string>;\n },\n ) {\n super(name);\n }\n}\n\nexport type Condition = {\n when: boolean | ((state: State) => boolean);\n then: Block[];\n};\n\nexport type Conditions = {\n if: Condition;\n elif?: Condition[];\n else?: Block[];\n};\n\nclass Conditional extends Block {\n constructor(name: string, config: Conditions) {\n super(name);\n }\n}\n\nclass TryCatch extends Block {\n constructor(\n name: string,\n config: {\n try: Block[];\n catch: Block[];\n finally?: Block[];\n variables: { error: string };\n },\n ) {\n super(name);\n }\n}\n\n/**\n * A Superblocks variable has the following access pattern:\n *\n * How to retrieve the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.value\n *\n * // INCORRECT\n * my_variable\n * ```\n *\n * How to set the value of a variable:\n * ```ts\n * CORRECT\n * my_variable.set(value)\n *\n * // INCORRECT\n * my_variable = value\n * ```\n *\n */\n\nclass Variables extends Block {\n constructor(\n name: string,\n variables: {\n // The name of the variable.\n key: string;\n // The value of the variable.\n value: Binding<JsonValue>;\n }[],\n ) {\n super(name);\n }\n}\n\nclass Loop extends Block {\n constructor(\n name: string,\n config: {\n over: Binding<JsonValue[]>;\n variables: {\n // What the variable name for the current item is.\n item: string;\n // What the variable name for the current index is.\n index: string;\n };\n blocks: Block[];\n },\n ) {\n super(name);\n }\n}\n\nclass Parallel extends Block {\n constructor(\n name: string,\n config: {\n over: Binding<JsonValue[]>;\n variables: {\n // What the variable name for the current item is.\n item: string;\n };\n blocks: Block[];\n },\n ) {\n super(name);\n }\n}\n\nclass Throw extends Block {\n constructor(\n name: string,\n config: {\n error: Binding<JsonValue>;\n },\n ) {\n super(name);\n }\n}\n\nclass Return extends Block {\n constructor(\n name: string,\n config: {\n data: Binding<JsonValue>;\n },\n ) {\n super(name);\n }\n}\n\nclass Api {\n constructor(name: string, steps: Block[]) {}\n public get response(): JsonValue {\n /* ... */\n }\n public get error(): string | undefined {\n /* ... */\n }\n public run(): void {\n /* ... */\n }\n public cancel(): void {\n /* ... */\n }\n}\n````\n\n#### Example Usage\n\nBelow are examples of how you create Superblocks APIs, along with annotations to describe different pieces of functinality and expectations.\n\n##### Example 1: Simple API with conditional\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport {\n Conditional,\n Condition,\n PostgreSQL,\n JavaScript,\n Api,\n} from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n new Conditional("my_conditional", {\n if: {\n when: true,\n then: [\n new PostgreSQL(\n "retrieve_orders",\n "" /* <- integration uuid goes here */,\n {\n statement: "SELECT * FROM orders",\n },\n ),\n ],\n },\n else: [\n new JavaScript("fallthrough", {\n fn: () => "we did not execute the sql query",\n }),\n ],\n }),\n]);\n```\n\nTo run register and run the API we defined above:\n\n```tsx\n// /pages/Page1/index.tsx\n\nimport {\n SbPage,\n SbApi,\n SbSection,\n SbColumn,\n SbTable,\n SbButton,\n SbEventFlow,\n registerPage,\n showAlert,\n} from "@superblocksteam/library";\n\nimport getOrders from "./apis/getOrders";\n\nconst Page1 = () => (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbButton\n // APIs can be invoked with the SBEventFlow API.\n onClick={SbEventFlow.runApis([getOrders])}\n />\n // ...\n <SbTable>\n // APIs are part of the state object just like components. tableData=\n {(state) => state.getOrders.response}\n </SbTable>\n </SbColumn>\n </SbSection>\n </SbPage>\n);\n\nexport default registerPage(Page1, {\n name: "MyPage",\n // You register APIs just like you would SbVariables.\n getOrders: SbApi(getOrders),\n});\n```\n\n#### Rules for using Superblocks APIs\n\nThink hard about the following important rules for correctly using Superblocks APIs:\n\n- You MUST use a destructured state object as the function parameter for dynamic block fields. The valid keys are (1) Superblocks entities (components, variables, etc) and (2) previous block outputs that are in the lexical scope. Example below:\n\n```ts\n// CORRECT: uses destructured state\n({ Dropdown1, TextInput1 }) => Dropdown1.selectedOptionsValue + TextInput1.value\n\n// INCORRECT: uses state object directly\n(state) => state.Dropdown1.selectedOptionsValue + state.TextInput1.value\n```\n\n- The result of each scope is the result of the last block in that scope. In the following example, the value of `sendEmail.response` is the result of the `return_summary` block. Use this information to carefully ensure that the last block in your API is the one that returns the value you want.\n\n```ts\nexport default new Api("sendEmail", [\n new Email("send_email", {\n from: "noreply@company.com",\n to: "test@test.com",\n subject: "Test Email",\n body: "This is a test email",\n }),\n new JavaScript("return_summary", {\n fn: () => "Email sent successfully!",\n }),\n]);\n```\n\n```tsx\nimport {\n SbPage,\n SbSection,\n SbColumn,\n SbTable,\n sbComputed,\n registerPage,\n SbApi,\n} from "@superblocksteam/library";\n\nconst scope = createSbScope<{\n Table1: any;\n}>({ sendEmail: SbApi({}) }, { name: "Page1" });\n\nexport default registerPage(\n () => (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n // ...\n <SbTable\n bind={scope.entities.Table1}\n tableData={sbComputed(() => API1.response)}\n />\n // ...\n </SbColumn>\n </SbSection>\n </SbPage>\n ),\n scope,\n);\n```\n\n- Block outputs are immutable. Do not mutate the output of a block.\n\n- Do not reference variables that are not in scope. The ONLY things in scope in an API block are the outputs of previous steps and the state object.\n\n- Backend APIs CANNOT mutate frontend state inside of the API\n\n- APIs are registered in scope files using `SbApi()` and then accessed in page components by destructuring from the scope entities. Make sure you name the key used in registerScope the same as the imported API, but do not pass the imported Api into the SbApi() call.\n\n- To access API responses in your UI, use `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`.\n\n- You will not always be told which integrations to use in your API; you will have to determine that yourself based on the data you need to fetch.\n\n- Never add comments to code you (the ai) generate. User added comments are fine - leave those!\n';
|
|
28
28
|
|
|
29
29
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-components-rules.js
|
|
30
30
|
init_cjs_shims();
|
|
@@ -40,11 +40,11 @@ var content4 = '# Event handlers with SbEventFlow\n\nRather than using standard
|
|
|
40
40
|
|
|
41
41
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-layouts.js
|
|
42
42
|
init_cjs_shims();
|
|
43
|
-
var content5 = '### Layout and Sizing in Superblocks\n\nAll layouts in Superblocks are configured through the `SbContainer` component. \n`SbContainer` provides both layout and optional visual styling.\n\n```jsx\n<SbContainer\n variant="card" | "none" // default is "none"\n layout="vertical" | "horizontal" | "freeform" // default is "vertical"\n>\n {/* Children here */}\n</SbContainer>\n```\n\nWe have three main layout options in Superblocks:\n\n- Vertical Stack (`vertical`)\n- Horizontal Stack (`horizontal`)\n- Freeform (`freeform`)\n\nFor new designs, we recommend using Stacks for most use cases.\n\nThe `variant` prop is optional and can be set to `"card"` or `"none"`. Default is `"none"`.\n`"card"` applies a card-like visual style to the container, such as rounded corners, white background, and padding.\n\n---\n\n### Height and Width Options\n\nAll Superblocks components support width and height. They take in a `Dim` object, which has 3 main options:\n\n- `Dim.fit()`: Fit to content size, this is the default behavior and can be omitted.\n- `Dim.px(100)`: Fixed pixel size.\n- `Dim.fill()` or `Dim.fill(2)`: Fill available space with an optional weight.\n\n> IMPORTANT: Prefer using `Dim.fit()` over `Dim.px()` for height and width unless you have a specific reason to use fixed pixel sizes. This is extra true for containers\n> IMPORTANT: Prefer using `Dim.fill()` or `Dim.fit()` over `Dim.px()` for width unless you have a specific reason to use fixed pixel sizes.\n\n**Examples**:\n\n```jsx\n<SbText width={Dim.px(2)}>Hello</SbText> // 2 pixels\n<SbText width={Dim.fit()}>Hello</SbText> // Fit to content (default)\n<SbText width={Dim.fill()}>Hello</SbText> // Fill available space, no weight (aka 1)\n<SbText width={Dim.fill(2)}>Hello</SbText> // Fill available space, with weight of 2\n```\n';
|
|
43
|
+
var content5 = '### Layout and Sizing in Superblocks\n\nAll layouts in Superblocks are configured through the `SbContainer` component. \n`SbContainer` provides both layout and optional visual styling.\n\n```jsx\n<SbContainer\n variant="card" | "none" // default is "none"\n layout="vertical" | "horizontal" | "freeform" // default is "vertical"\n>\n {/* Children here */}\n</SbContainer>\n```\n\nWe have three main layout options in Superblocks:\n\n- Vertical Stack (`vertical`)\n- Horizontal Stack (`horizontal`)\n- Freeform (`freeform`)\n\nFor new designs, we recommend using Stacks for most use cases.\n\nThe `variant` prop is optional and can be set to `"card"` or `"none"`. Default is `"none"`.\n`"card"` applies a card-like visual style to the container, such as rounded corners, white background, and padding.\n\n---\n\n### Height and Width Options\n\nAll Superblocks components support width and height. They take in a `Dim` object, which has 3 main options:\n\n- `Dim.fit()`: Fit to content size, this is the default behavior and can be omitted.\n- `Dim.px(100)`: Fixed pixel size.\n- `Dim.fill()` or `Dim.fill(2)`: Fill available space with an optional weight.\n\n> IMPORTANT: Prefer using `Dim.fit()` over `Dim.px()` for height and width unless you have a specific reason to use fixed pixel sizes. This is extra true for containers\n> IMPORTANT: Prefer using `Dim.fill()` or `Dim.fit()` over `Dim.px()` for width unless you have a specific reason to use fixed pixel sizes.\n\n**Examples**:\n\n```jsx\n<SbText width={Dim.px(2)}>Hello</SbText> // 2 pixels\n<SbText width={Dim.fit()}>Hello</SbText> // Fit to content (default)\n<SbText width={Dim.fill()}>Hello</SbText> // Fill available space, no weight (aka 1)\n<SbText width={Dim.fill(2)}>Hello</SbText> // Fill available space, with weight of 2\n```\n\n---\n\n### Standard Page Structure\n\n**CRITICAL**: All new Superblocks apps must follow this standard page structure:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>{/* Your page content goes here */}</SbColumn>\n </SbSection>\n</SbPage>\n```\n\n#### Column Width Guidelines\n\n**Default Rule**: All columns under a section should use `width={Dim.fill()}` unless you have a really good reason not to.\n\n**Good Reason Example** - Fixed Sidebar Layout:\nWhen you need a fixed-width sidebar alongside a flexible content area:\n\n```tsx\n<SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n {/* Fixed sidebar column */}\n <SbColumn width={Dim.px(250)}>\n <SbText text="Sidebar content" />\n <SbButton label="Menu Item 1" />\n <SbButton label="Menu Item 2" />\n </SbColumn>\n\n {/* Flexible content column */}\n <SbColumn width={Dim.fill()}>\n <SbText text="Main content area that fills remaining space" />\n <SbTable tableData={sbComputed(() => myApi.response)} />\n </SbColumn>\n </SbSection>\n</SbPage>\n```\n\nIn this example:\n\n- Left column uses `width={Dim.px(250)}` for a fixed 250px sidebar\n- Right column uses `width={Dim.fill()}` to take up all remaining space\n- This creates a responsive layout where the sidebar stays fixed while the content area adapts\n';
|
|
44
44
|
|
|
45
45
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-page.js
|
|
46
46
|
init_cjs_shims();
|
|
47
|
-
var content6 = '### How to use SbPage\n\n- A page is a file that exports a default React component through the `registerPage` function.\n- Each page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A project consists of one or more pages. Each page is a directory in the `pages` directory.\n- Pages are registered in the `routes.json` file.\n\n### Page Structure\n\nEach page should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n createSbScope,\n SbVariable,\n SbVariablePersistence,\n SbApi,\n SbText,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n Text1: any;\n}>(\n {\n // Define your entities here\n myVariable: SbVariable({\n defaultValue: "initial value",\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n myApi: SbApi({}),\n },\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {
|
|
47
|
+
var content6 = '### How to use SbPage\n\n- A page is a file that exports a default React component through the `registerPage` function.\n- Each page consists of two files: `index.tsx` (the page component) and `scope.ts` (the entity definitions).\n- For `export default registerPage(Page1, Page1Scope)`, Page1 is a function that returns a React component, and Page1Scope is the scope containing all entities.\n- A project consists of one or more pages. Each page is a directory in the `pages` directory.\n- Pages are registered in the `routes.json` file.\n\n### Page Structure\n\nEach page should have the following structure:\n\n**scope.ts** - Contains all entity definitions (variables, APIs, etc.):\n\n```ts\nimport {\n createSbScope,\n SbVariable,\n SbVariablePersistence,\n SbApi,\n SbText,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n Text1: any;\n}>(\n {\n // Define your entities here\n myVariable: SbVariable({\n defaultValue: "initial value",\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n myApi: SbApi({}),\n },\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n**index.tsx** - Contains the page component:\n\n```tsx\nimport {\n SbPage,\n SbSection,\n SbColumn,\n SbText,\n registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nfunction Page() {\n // Destructure entities from the scope for easy access\n const { Text1, myVariable, myApi } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n {/* Use entities in your components */}\n <SbText bind={Text1} text={sbComputed(() => myVariable.value)} />\n </SbColumn>\n </SbSection>\n </SbPage>\n );\n}\n\nexport default registerPage(Page, Page1Scope);\n```\n\n## How component bindings work\n\nIf you need to reference a component directly to get access to some of its state, you must use a binding inside the page scope.\n\nComponent bindings allow you to:\n\n- Access component properties and state from other components and APIs\n- Create reactive relationships between components\n- Reference component values in `sbComputed` expressions\n\n### Setting up component bindings\n\n1. **Define the binding type in your scope**: Add the component type to the scope\'s type definitions:\n\n```ts\nexport const Page1Scope = createSbScope<{\n Text1: any;\n UserInput: any;\n}>(\n {\n // Your other entities (variables, APIs, etc.)\n myVariable: SbVariable({ defaultValue: "Hello" }),\n },\n {\n name: "Page1",\n },\n);\n```\n\n2. **Bind the component in your JSX**: Use the `bind` prop to connect the component to the binding:\n\n```tsx\nfunction Page() {\n const { Text1, UserInput, myVariable } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbInput bind={UserInput} placeholder="Enter your name" />\n <SbText\n bind={Text1}\n text={sbComputed(() => `Hello, ${UserInput.value}!`)}\n />\n </SbColumn>\n </SbSection>\n </SbPage>\n );\n}\n```\n\n3. **Access component state**: Use `sbComputed` to access properties of bound components:\n\n```tsx\n// Access input value\ntext={sbComputed(() => UserInput.value)}\n\n// Access text content\ntext={sbComputed(() => Text1.text)}\n\n// Combine with other state\ntext={sbComputed(() => `${myVariable.value}: ${UserInput.value}`)}\n```\n\n### Common binding use cases\n\n- **Form inputs**: Access user input values to display or validate\n- **Dynamic content**: Reference one component\'s state to update another\n- **Conditional rendering**: Use component state to control visibility or styling\n\n### Page load events\n\nYou can fire callbacks when a page is loaded using the onLoad property of the Page component. You must use the SbEventFlow API for any actions you want to run inside onLoad.\n\nExample:\n\n```tsx\nimport {\n registerPage,\n SbEventFlow,\n SbPage,\n SbSection,\n SbColumn,\n sbComputed,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n return (\n <SbPage\n name="Page1"\n height={Dim.fill()}\n width={Dim.fill()}\n onLoad={SbEventFlow.runJS(() => {\n console.log("Page loaded");\n })}\n >\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>...</SbColumn>\n </SbSection>\n </SbPage>\n );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nA very common and helpful usage of this callback is to run APIs using SbEventFlow to fetch data when the page loads. Example:\n\n```tsx\nimport {\n SbPage,\n registerPage,\n SbEventFlow,\n SbSection,\n SbColumn,\n sbComputed,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst Page1Component = () => {\n return (\n <SbPage\n name="Page1"\n height={Dim.fill()}\n width={Dim.fill()}\n onLoad={SbEventFlow.runApis([getOrders])}\n >\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>...</SbColumn>\n </SbSection>\n </SbPage>\n );\n};\n\nexport default registerPage(Page1Component, Page1Scope);\n```\n\nIn this example, the `getOrders` API would be defined in the scope.ts file like this:\n\n```ts\n// In scope.ts\n\n// We register the api in createSbScope by creating a key\n// with the same name as the file, and SbApi({}) with an empty object\n// Note: We DO NOT import the api file. It\'s not necessary.\nexport const Page1Scope = createSbScope(\n () => ({\n getOrders: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n```\n';
|
|
48
48
|
|
|
49
49
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-routes.js
|
|
50
50
|
init_cjs_shims();
|
|
@@ -52,7 +52,7 @@ var content7 = '- The `routes.json` file maps URLs to pages.\n Example routes.j
|
|
|
52
52
|
|
|
53
53
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-state.js
|
|
54
54
|
init_cjs_shims();
|
|
55
|
-
var content8 = '**Superblocks State System**\n\nThe Superblocks state system is built around scopes that contain entities (variables, APIs, components). Here\'s how it works:\n\n### 1. Scopes\n\nScopes are defined in separate `scope.ts` files for each page and contain all the page\'s entities.\n\n- **Page scopes** are visible only within the current page\n- **App scopes** can be shared across pages (though you should primarily use page scopes)\n- Entities are accessed by importing and destructuring from the scope\n\n> **Parent \u2192 child rule**: Child scopes can read & write parent entities, but parents cannot reach into children.\n\n### 2. Scope Structure\n\nEach page has its own scope file that defines all entities:\n\n```ts\n// pages/Page1/scope.ts\nimport {\n createSbScope,\n SbVariable,\n SbVariablePersistence,\n SbApi,\n sbComputed,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n OrdersTable: any;\n}>(\n ({ entities: { counter } }) => ({\n // Static state variable with a simple default value\n counter: SbVariable({\n defaultValue: 0,\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n // State variable with computed default value from other entities\n doubledCounter: SbVariable({\n defaultValue: sbComputed(() => counter.value * 2),\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n myApi: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen in your page component, you import and destructure the entities:\n\n```tsx\n// pages/Page1/index.tsx\nimport { SbPage, SbText, SbButton, sbComputed } from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nfunction Page() {\n // Destructure entities for easy access\n const { counter, doubledCounter, myApi, OrdersTable } = Page1;\n\n return (\n <SbPage>\n <SbText text={sbComputed(() => `Count: ${counter.value}`)} />\n <SbButton onClick={SbEventFlow.setStateVar("counter", 5)} />\n </SbPage>\n );\n}\n\nexport default registerPage(Page, Page1Scope);\n```\n\n_You should NOT create any extra scopes other than page scopes in most cases._\n\n### 3. Computed Default Values\n\nState variables can have their `defaultValue` computed from other entities in the same scope at initialization time.\n\n**Static default value:**\n\n```ts\nstaticVar: SbVariable({\n defaultValue: "Hello World",\n});\n```\n\n**Computed default value:**\n\n```ts\n({ entities: { Input1, staticVar } }) => ({\n computedVar: SbVariable({\n defaultValue: sbComputed(() => `${staticVar.value} - ${Input1.value}`),\n }),\n});\n```\n\nWrap the entire scope object with the entities function and destructure needed entities from the `entities` parameter. This only sets the initial value - it doesn\'t create ongoing updates.\n\n### 4. Entity Types\n\n- **Component state**\n\n - Declared by defining the component type in the scope and using the `bind` prop\n - Accessed by destructuring the component entity and using `sbComputed(() => ComponentName.prop)`\n - Writable if the prop is marked writable in the schema\n\n- **State variable**\n\n - Declared with `SbVariable({ defaultValue })` or within `(({ entities }) => ({ ... }))` wrapper for computed defaults\n - `defaultValue` sets the initial value when the application loads\n - For static variables: Only JSON parsable data structures, no functions\n - For computed variables: Use `sbComputed` within defaultValue to reference other entities\n - Do not call `defaultValue` like a function. Set values with `SbEventFlow.setStateVar()` or read with `sbComputed(() => varName.value)`\n - Accessed with `sbComputed(() => varName.value)` \u2014 **always include `.value`**\n - Writable through SbEventFlow\n\n- **API**\n - Declared with `SbApi({})` in the scope file.\n - Accessed with `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`\n - Read\u2011only\n\n### 5. Reading State with sbComputed\n\n**CRITICAL**: There are two different patterns for accessing data in `sbComputed` depending on what you\'re accessing:\n\n#### 5.1. Scope Entities (Direct Access)\n\nFor entities defined in your scope file (variables, APIs, components), access them **directly** after destructuring:\n\n```tsx\nconst { UserSearchInput, myVariable, myApi } = Page1;\n\n// \u2705 CORRECT - Direct access for scope entities\n<SbText text={sbComputed(() => `Search: ${UserSearchInput.value}`)} />\n<SbText text={sbComputed(() => myVariable.value)} />\n<SbTable tableData={sbComputed(() => myApi.response)} />\n```\n\n#### 4.2. Global State (Import Access)\n\nFor global state like globals, theme, environment, and embedded data, import the globals directly from the library:\n\n```tsx\n// \u2705 CORRECT - Import globals directly\n<SbText\n text={sbComputed(() => `Welcome ${Global.user.name}!`)}\n textStyle={{\n textColor: {\n default: sbComputed(() => Theme.colors.neutral900)\n }\n }}\n/>\n<SbContainer backgroundColor={sbComputed(() => Theme.colors.primary)} />\n```\n\n#### 5.3. Mixed Access\n\nWhen you need both scope entities and global state in the same `sbComputed`:\n\n```tsx\nconst { orders } = Page1;\n\n// \u2705 CORRECT - Combine direct entity access with imported globals\n<SbText\n text={sbComputed(() => `${orders.length} orders for ${Global.user.name}`)}\n/>;\n```\n\n### 6. Writing State\n\nPreferred approach:\n\n```tsx\nSbEventFlow.setStateVar("pageSize", 50);\n```\n\nFallback for complex operations:\n\n```tsx\nSbEventFlow.runJS(() => {\n // Direct assignment works within SbEventFlow.runJS\n pageSize.value = 50;\n});\n```\n\n### 7. CRITICAL Rules\n\n1. **Use component state directly**; NEVER create a state variable for a value that is available directly from a component property.\n2. Use component bindings by defining component types in your scope and using the `bind` prop.\n3. Keep logic declarative \u2014 derive UI from state using `sbComputed` instead of mutating props at runtime.\n4. Always destructure entities from your scope for clean access patterns.\n5. **Use the correct sbComputedz pattern**: Direct access for scope entities, import globals (Global, Theme, Embed, Env) for global access.\n6. Always complete implement all features, don\'t stub out or skip anything.\n\n**\u2705 Example**\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n ApplicantSelector: any;\n}>(\n {\n applicants: SbVariable({ defaultValue: [] }),\n },\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\n// In your page component after destructuring entities\nconst { ApplicantSelector, applicants } = Page1;\n\n<SbDropdown bind={ApplicantSelector} options={/* ... */} />\n<SbTable tableData={sbComputed(() => applicants[ApplicantSelector.selectedOptionValue])} />\n```\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n Country: any;\n}>(\n {\n applicants: SbVariable({ defaultValue: [] }),\n },\n FirstName: typeof SbInput;\n LastName: typeof SbInput;\n}>(\n ({ entities: { FirstName, LastName } }) => ({\n fullName: SbVariable({\n defaultValue: sbComputed(() =>\n `${FirstName.value} ${LastName.value}`.trim(),\n ),\n }),\n }),\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { FirstName, LastName, fullName } = Page1;\n\n<SbInput bind={FirstName} placeholder="First name" />\n<SbInput bind={LastName} placeholder="Last name" />\n<SbText text={sbComputed(() => `Welcome ${fullName.value}!`)} />\n```\n\n```tsx\n{\n /* The user types in the search input, and the value is displayed */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n searchTerm: any;\n}>(\n {},\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { searchTerm } = Page1;\n\n<SbInput bind={searchTerm} />\n<SbText text={sbComputed(() => searchTerm.value)} />\n```\n\n```tsx\n{\n /* Switch to change into admin mode */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n isAdmin: any;\n}>(\n {},\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { isAdmin } = Page1;\n\n<SbSwitch bind={isAdmin} label="Use Admin Mode" defaultChecked={false} />;\n{\n /* Only enable the delete button when switched into Admin mode */\n}\n<SbButton\n disabled={sbComputed(() => !isAdmin.isChecked)}\n label="Delete profile"\n/>;\n```\n\n\u2705 ALWAYS USE DIRECT COMPONENT STATE ACCESS WITH sbComputed:\n\n```tsx\n// GOOD - DO THIS\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n UserNameInput: any;\n}>(\n {},\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { UserNameInput } = Page1;\n\n<SbTextInput bind={UserNameInput} />\n<SbText text={sbComputed(() => `Hello, ${UserNameInput.value}!`)} />\n```\n\n\u274C NEVER CREATE REDUNDANT STATE VARIABLES:\n\n```tsx\n// WRONG - DON\'T DO THIS\n<SbTextInput bind={UserNameInput} onChange={SbEventFlow.setStateVar(\'userNameVar\', \'myValue\')} />\n<SbText text={sbComputed(() => `Hello, ${userNameVar.value}!`)} />\n...\n// And then in scope.ts:\n{\n userNameVar: SbVariable({ defaultValue: "" }),\n}\n```\n\nTo reference a property of a component using `sbComputed`, the component must have a binding defined in your scope.\n\nThat\'s why you should ALWAYS define component bindings in your scope for the following component types when you need to access their state:\n\n- SbInput\n- SbDropdown\n- SbDatePicker\n- SbCheckbox\n- SbSwitch\n- SbForm\n- SbRadio\n- SbRichText\n- SbFilePicker\n- SbCodeEditor\n- SbChat\n\n\u274C DO NOT USE STATE VARIABLES AS FUNCTIONS:\n\nState variables are not functions. You cannot call them or store functions in defaultValue.\n\n```tsx\n// WRONG - DON\'T DO THIS\nfunction Page1() {\n const { customerNameFilter, filterOrders } = Page1;\n\n return (\n <SbPage width={Dim.fill()}>\n <SbInput\n bind={customerNameFilter}\n label="Customer Name"\n placeholder="Filter by customer name"\n width={Dim.fill()}\n onTextChanged={SbEventFlow.runJS(() => {\n // This is wrong - you cannot call filterOrders as a function\n filterOrders();\n })}\n />\n </SbPage>\n );\n}\n\n// And in scope.ts (WRONG):\n{\n filterOrders: SbVariable({\n defaultValue: () => {\n // This doesn\'t work - state variables are not functions\n const customerNameFilter = customerNameFilter.value.toLowerCase();\n // ... more logic\n },\n });\n}\n```\n\nInstead do the following:\n\n\u2705 COMPUTE VALUES WITH sbComputed AND SET STATE WITH SbEventFlow:\n\n```tsx\n// CORRECT - DO THIS\nfunction Page1() {\n const { customerNameFilter, filteredOrders, orders } = Page1;\n\n return (\n <SbPage width={Dim.fill()}>\n <SbInput\n bind={customerNameFilter}\n label="Customer Name"\n placeholder="Filter by customer name"\n width={Dim.fill()}\n onTextChanged={SbEventFlow.runJS(() => {\n // Repeat the filtering logic inline - do NOT create helper functions\n const filtered = orders.value.filter((order) => {\n return (\n !customerNameFilter.value ||\n order.customerName\n .toLowerCase()\n .includes(customerNameFilter.value.toLowerCase())\n );\n });\n\n // Set the state variable with the computed result\n filteredOrders.value = filtered;\n })}\n />\n {/* If you need the same filtering logic elsewhere, repeat it inline */}\n <SbButton\n label="Apply Filter"\n onClick={SbEventFlow.runJS(() => {\n // Repeat the same filtering logic here - code repetition is preferred\n const filtered = orders.value.filter((order) => {\n return (\n !customerNameFilter.value ||\n order.customerName\n .toLowerCase()\n .includes(customerNameFilter.value.toLowerCase())\n );\n });\n\n filteredOrders.value = filtered;\n })}\n />\n <SbTable tableData={sbComputed(() => filteredOrders.value)} />\n </SbPage>\n );\n}\n\nexport default registerPage(Page1, Page1Scope);\n```\n\nAnd in your scope.ts file:\n\n```ts\nexport const Page1Scope = createSbScope<{\n customerNameFilter: any;\n}>(\n {\n orders: SbVariable({\n defaultValue: [\n {\n id: "ORD-1001",\n customerName: "John Smith",\n orderType: "Grocery Delivery",\n },\n {\n id: "ORD-1002",\n customerName: "Emily Johnson",\n orderType: "Express Delivery",\n },\n ],\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n filteredOrders: SbVariable({\n defaultValue: [],\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n },\n {\n name: "Page1",\n },\n);\n```\n';
|
|
55
|
+
var content8 = '**Superblocks State System**\n\nThe Superblocks state system is built around scopes that contain entities (variables, APIs, components). Here\'s how it works:\n\n### 1. Scopes\n\nScopes are defined in separate `scope.ts` files for each page and contain all the page\'s entities.\n\n- **Page scopes** are visible only within the current page\n- **App scopes** can be shared across pages (though you should primarily use page scopes)\n- Entities are accessed by importing and destructuring from the scope\n\n> **Parent \u2192 child rule**: Child scopes can read & write parent entities, but parents cannot reach into children.\n\n### 2. Scope Structure\n\nEach page has its own scope file that defines all entities:\n\n```ts\n// pages/Page1/scope.ts\nimport {\n createSbScope,\n SbVariable,\n SbVariablePersistence,\n SbApi,\n sbComputed,\n} from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope<{\n OrdersTable: any;\n}>(\n ({ entities: { counter } }) => ({\n // Static state variable with a simple default value\n counter: SbVariable({\n defaultValue: 0,\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n // State variable with computed default value from other entities\n doubledCounter: SbVariable({\n defaultValue: sbComputed(() => counter.value * 2),\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n myApi: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\nThen in your page component, you import and destructure the entities:\n\n```tsx\n// pages/Page1/index.tsx\nimport {\n SbPage,\n SbSection,\n SbColumn,\n SbText,\n SbButton,\n sbComputed,\n SbEventFlow,\n registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nfunction Page() {\n // Destructure entities for easy access\n const { counter, doubledCounter, myApi, OrdersTable } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbText text={sbComputed(() => `Count: ${counter.value}`)} />\n <SbButton onClick={SbEventFlow.setStateVar("counter", 5)} />\n </SbColumn>\n </SbSection>\n </SbPage>\n );\n}\n\nexport default registerPage(Page, Page1Scope);\n```\n\n_You should NOT create any extra scopes other than page scopes in most cases._\n\n### 3. Computed Default Values\n\nState variables can have their `defaultValue` computed from other entities in the same scope at initialization time.\n\n**Static default value:**\n\n```ts\nstaticVar: SbVariable({\n defaultValue: "Hello World",\n});\n```\n\n**Computed default value:**\n\n```ts\n({ entities: { Input1, staticVar } }) => ({\n computedVar: SbVariable({\n defaultValue: sbComputed(() => `${staticVar.value} - ${Input1.value}`),\n }),\n});\n```\n\nWrap the entire scope object with the entities function and destructure needed entities from the `entities` parameter. This only sets the initial value - it doesn\'t create ongoing updates.\n\n### 4. Entity Types\n\n- **Component state**\n\n - Declared by defining the component type in the scope and using the `bind` prop\n - Accessed by destructuring the component entity and using `sbComputed(() => ComponentName.prop)`\n - Writable if the prop is marked writable in the schema\n\n- **State variable**\n\n - Declared with `SbVariable({ defaultValue })` or within `(({ entities }) => ({ ... }))` wrapper for computed defaults\n - `defaultValue` sets the initial value when the application loads\n - For static variables: Only JSON parsable data structures, no functions\n - For computed variables: Use `sbComputed` within defaultValue to reference other entities\n - Do not call `defaultValue` like a function. Set values with `SbEventFlow.setStateVar()` or read with `sbComputed(() => varName.value)`\n - Accessed with `sbComputed(() => varName.value)` \u2014 **always include `.value`**\n - Writable through SbEventFlow\n\n- **API**\n - Declared with `SbApi({})` in the scope file.\n - Accessed with `sbComputed(() => apiName.response)` or `sbComputed(() => apiName.error)`\n - Read\u2011only\n\n### 5. Reading State with sbComputed\n\n**CRITICAL**: There are two different patterns for accessing data in `sbComputed` depending on what you\'re accessing:\n\n#### 5.1. Scope Entities (Direct Access)\n\nFor entities defined in your scope file (variables, APIs, components), access them **directly** after destructuring:\n\n```tsx\nconst { UserSearchInput, myVariable, myApi } = Page1;\n\n// \u2705 CORRECT - Direct access for scope entities\n<SbText text={sbComputed(() => `Search: ${UserSearchInput.value}`)} />\n<SbText text={sbComputed(() => myVariable.value)} />\n<SbTable tableData={sbComputed(() => myApi.response)} />\n```\n\n#### 4.2. Global State (Import Access)\n\nFor global state like globals, theme, environment, and embedded data, import the globals directly from the library:\n\n```tsx\n// \u2705 CORRECT - Import globals directly\n<SbText\n text={sbComputed(() => `Welcome ${Global.user.name}!`)}\n textStyle={{\n textColor: {\n default: sbComputed(() => Theme.colors.neutral900)\n }\n }}\n/>\n<SbContainer backgroundColor={sbComputed(() => Theme.colors.primary)} />\n```\n\n#### 5.3. Mixed Access\n\nWhen you need both scope entities and global state in the same `sbComputed`:\n\n```tsx\nconst { orders } = Page1;\n\n// \u2705 CORRECT - Combine direct entity access with imported globals\n<SbText\n text={sbComputed(() => `${orders.length} orders for ${Global.user.name}`)}\n/>;\n```\n\n### 6. Writing State\n\nPreferred approach:\n\n```tsx\nSbEventFlow.setStateVar("pageSize", 50);\n```\n\nFallback for complex operations:\n\n```tsx\nSbEventFlow.runJS(() => {\n // Direct assignment works within SbEventFlow.runJS\n pageSize.value = 50;\n});\n```\n\n### 7. CRITICAL Rules\n\n1. **Use component state directly**; NEVER create a state variable for a value that is available directly from a component property.\n2. Use component bindings by defining component types in your scope and using the `bind` prop.\n3. Keep logic declarative \u2014 derive UI from state using `sbComputed` instead of mutating props at runtime.\n4. Always destructure entities from your scope for clean access patterns.\n5. **Use the correct sbComputedz pattern**: Direct access for scope entities, import globals (Global, Theme, Embed, Env) for global access.\n6. Always complete implement all features, don\'t stub out or skip anything.\n\n**\u2705 Example**\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n ApplicantSelector: any;\n}>(\n {\n applicants: SbVariable({ defaultValue: [] }),\n },\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\n// In your page component after destructuring entities\nconst { ApplicantSelector, applicants } = Page1;\n\n<SbDropdown bind={ApplicantSelector} options={/* ... */} />\n<SbTable tableData={sbComputed(() => applicants[ApplicantSelector.selectedOptionValue])} />\n```\n\n```tsx\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n Country: any;\n}>(\n {\n applicants: SbVariable({ defaultValue: [] }),\n },\n FirstName: typeof SbInput;\n LastName: typeof SbInput;\n}>(\n ({ entities: { FirstName, LastName } }) => ({\n fullName: SbVariable({\n defaultValue: sbComputed(() =>\n `${FirstName.value} ${LastName.value}`.trim(),\n ),\n }),\n }),\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { FirstName, LastName, fullName } = Page1;\n\n<SbInput bind={FirstName} placeholder="First name" />\n<SbInput bind={LastName} placeholder="Last name" />\n<SbText text={sbComputed(() => `Welcome ${fullName.value}!`)} />\n```\n\n```tsx\n{\n /* The user types in the search input, and the value is displayed */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n searchTerm: any;\n}>(\n {},\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { searchTerm } = Page1;\n\n<SbInput bind={searchTerm} />\n<SbText text={sbComputed(() => searchTerm.value)} />\n```\n\n```tsx\n{\n /* Switch to change into admin mode */\n}\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n isAdmin: any;\n}>(\n {},\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { isAdmin } = Page1;\n\n<SbSwitch bind={isAdmin} label="Use Admin Mode" defaultChecked={false} />;\n{\n /* Only enable the delete button when switched into Admin mode */\n}\n<SbButton\n disabled={sbComputed(() => !isAdmin.isChecked)}\n label="Delete profile"\n/>;\n```\n\n\u2705 ALWAYS USE DIRECT COMPONENT STATE ACCESS WITH sbComputed:\n\n```tsx\n// GOOD - DO THIS\n// In your scope.ts file\nexport const Page1Scope = createSbScope<{\n UserNameInput: any;\n}>(\n {},\n {\n name: "Page1",\n },\n);\n```\n\n```tsx\nconst { UserNameInput } = Page1;\n\n<SbTextInput bind={UserNameInput} />\n<SbText text={sbComputed(() => `Hello, ${UserNameInput.value}!`)} />\n```\n\n\u274C NEVER CREATE REDUNDANT STATE VARIABLES:\n\n```tsx\n// WRONG - DON\'T DO THIS\n<SbTextInput bind={UserNameInput} onChange={SbEventFlow.setStateVar(\'userNameVar\', \'myValue\')} />\n<SbText text={sbComputed(() => `Hello, ${userNameVar.value}!`)} />\n...\n// And then in scope.ts:\n{\n userNameVar: SbVariable({ defaultValue: "" }),\n}\n```\n\nTo reference a property of a component using `sbComputed`, the component must have a binding defined in your scope.\n\nThat\'s why you should ALWAYS define component bindings in your scope for the following component types when you need to access their state:\n\n- SbInput\n- SbDropdown\n- SbDatePicker\n- SbCheckbox\n- SbSwitch\n- SbForm\n- SbRadio\n- SbRichText\n- SbFilePicker\n- SbCodeEditor\n- SbChat\n\n\u274C DO NOT USE STATE VARIABLES AS FUNCTIONS:\n\nState variables are not functions. You cannot call them or store functions in defaultValue.\n\n```tsx\n// WRONG - DON\'T DO THIS\nfunction Page1() {\n const { customerNameFilter, filterOrders } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbInput\n bind={customerNameFilter}\n label="Customer Name"\n placeholder="Filter by customer name"\n width={Dim.fill()}\n onTextChanged={SbEventFlow.runJS(() => {\n // This is wrong - you cannot call filterOrders as a function\n filterOrders();\n })}\n />\n </SbColumn>\n </SbSection>\n </SbPage>\n );\n}\n\n// And in scope.ts (WRONG):\n{\n filterOrders: SbVariable({\n defaultValue: () => {\n // This doesn\'t work - state variables are not functions\n const customerNameFilter = customerNameFilter.value.toLowerCase();\n // ... more logic\n },\n });\n}\n```\n\nInstead do the following:\n\n\u2705 COMPUTE VALUES WITH sbComputed AND SET STATE WITH SbEventFlow:\n\n```tsx\n// CORRECT - DO THIS\nimport {\n SbPage,\n SbSection,\n SbColumn,\n SbInput,\n SbButton,\n SbTable,\n sbComputed,\n SbEventFlow,\n registerPage,\n} from "@superblocksteam/library";\n\nfunction Page1() {\n const { customerNameFilter, filteredOrders, orders } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbInput\n bind={customerNameFilter}\n label="Customer Name"\n placeholder="Filter by customer name"\n width={Dim.fill()}\n onTextChanged={SbEventFlow.runJS(() => {\n // Repeat the filtering logic inline - do NOT create helper functions\n const filtered = orders.value.filter((order) => {\n return (\n !customerNameFilter.value ||\n order.customerName\n .toLowerCase()\n .includes(customerNameFilter.value.toLowerCase())\n );\n });\n\n // Set the state variable with the computed result\n filteredOrders.value = filtered;\n })}\n />\n {/* If you need the same filtering logic elsewhere, repeat it inline */}\n <SbButton\n label="Apply Filter"\n onClick={SbEventFlow.runJS(() => {\n // Repeat the same filtering logic here - code repetition is preferred\n const filtered = orders.value.filter((order) => {\n return (\n !customerNameFilter.value ||\n order.customerName\n .toLowerCase()\n .includes(customerNameFilter.value.toLowerCase())\n );\n });\n\n filteredOrders.value = filtered;\n })}\n />\n <SbTable tableData={sbComputed(() => filteredOrders.value)} />\n </SbColumn>\n </SbSection>\n </SbPage>\n );\n}\n\nexport default registerPage(Page1, Page1Scope);\n```\n\nAnd in your scope.ts file:\n\n```ts\nexport const Page1Scope = createSbScope<{\n customerNameFilter: any;\n}>(\n {\n orders: SbVariable({\n defaultValue: [\n {\n id: "ORD-1001",\n customerName: "John Smith",\n orderType: "Grocery Delivery",\n },\n {\n id: "ORD-1002",\n customerName: "Emily Johnson",\n orderType: "Express Delivery",\n },\n ],\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n filteredOrders: SbVariable({\n defaultValue: [],\n persistence: SbVariablePersistence.TEMPORARY,\n }),\n },\n {\n name: "Page1",\n },\n);\n```\n';
|
|
56
56
|
|
|
57
57
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/superblocks-theming.js
|
|
58
58
|
init_cjs_shims();
|
|
@@ -60,7 +60,7 @@ var content9 = '# Superblocks theming\n\nSuperblocks apps are meant to be standa
|
|
|
60
60
|
|
|
61
61
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/subprompts/system.js
|
|
62
62
|
init_cjs_shims();
|
|
63
|
-
var content10 = 'You are Clark, an expert AI assistant and exceptional senior software developer with vast knowledge of the Superblocks framework.\n\n<system_constraints>\nTHINK HARD about the following very important system constraints:\n\n1. Git is NOT available\n2. You must use the Superblocks framework for all projects\n3. ALWAYS put all the generated code in the page/index.tsx file. ONLY create files for custom components. Do not use backticks like `\n4. ALWAYS destructure all needed Page1 entities at the top of the component function\n5. NEVER define helper functions inside or outside the component body. Instead, repeat code inline wherever it\'s needed (e.g., inside runJs() calls, sbComputed expressions, etc.). Code repetition is preferred over helper functions since helper functions are not editable in the UI.\n6. Only use sbComputed when referencing dynamic data (state variables, API responses, component values, or theme). Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme or dynamic values.\n7. NEVER use sbComputed as a child component. React cannot render the object type it returns as JSX children.\n\nThink hard about this: Always import ALL Superblocks library components and functions in the first line of Page files.\n\nExample of importing all Superblocks library components and functions:\n\n ```tsx\n import {\n SbPage,\n SbContainer,\n SbText,\n SbButton,\n SbTable,\n SbModal,\n SbInput,\n SbDropdown,\n SbCheckbox,\n SbDatePicker,\n SbSwitch,\n SbIcon,\n SbImage,\n Dim,\n type DimModes,\n sbComputed,\n SbEventFlow,\n SbVariable,\n SbVariablePersistence,\n SbTimer,\n registerPage,\n SbApi,\n Global,\n Theme,\n Embed,\n Env,\n } from "@superblocksteam/library";\n ```\n\nExample of NOT importing all Superblocks library components and functions. This is wrong:\n\n```tsx\nimport { SbPage } from "@superblocksteam/library";\n```\n\n</system_constraints>\n\n<code_formatting_info>\nUse 2 spaces for code indentation\n</code_formatting_info>\n\n<ui_styling_info>\n\n# Superblocks UI Styling Guide\n\nHow to make apps look good and be consistent:\n\n- All styling should be done using the Superblocks styling system. Components are styled by default using the appTheme.ts file to define the theme. You can modify this file.\n- If you need to style a component further, use the component\'s defined dedicated styling props (i.e. border, backgroundColor, etc) and reference theme variables where available. Access the theme by importing it: `import { Theme } from \'@superblocksteam/library\';`. Example: Theme.colors.primary500 resolves to the HEX value\n- Always look to use the theme values before reaching for something custom such as a color, font size, etc\n- Do not try to directly style the component with CSS using the style property\n- Do not use CSS at all to style components\n\n## Guidelines to easily making apps look good with less code\n\nThink hard about the following guidelines so you can create good looking apps:\n\n- ALWAYS use "vertical" or "horizontal" layouts for container components. Never anything else. Example: `<SbContainer layout="vertical">...` or `<SbContainer layout="horizontal">...`\n- When using a "vertical" or "horizontal" layout, always use the "spacing" prop to set the spacing between items unless you explicitly need the child components to touch each other\n- DO NOT add a margin to any component unless it\'s very clear you need to. Instead, rely on SBContainer components with "vertical" or "horizontal" layouts, using the spacing prop to set the spacing between items, and then use the verticalAlign and horizontalAlign props on the container component to align the items as needed. This is the best way to get nice layouts! Do not break this pattern unless it\'s an edge case.\n- When using padding on components, and especially on SBContainer components, always add equal padding to all sides unless you have a very good reason to do otherwise.\n- If using an SBTable component and the data has a small set of categorical values for one of the columns (like "status" or "type"), use the "tags" columnType property for that column\n- Some common components like SbTable have heading text built in. Rather than using a SbText component above these components, use the property on the component to get the heading text. Example: For SbTable, use the "tableHeader" property. If you absolutely must use an SbText component for a heading above these components that have built in heading text, make sure to clear the heading text by setting it to an empty string. But this should be rare.\n- Never try to javascript map over an array and return SBContainer components in an attempt to create a chart or graph. They are not designed for this.\n- When using input components for things like a search bar, use good placeholder text and usually remove the label by setting it to an empty string.\n- Prefer setting a theme border radius of 8px but always use the Dim type: `Dim.px(8)`\n- Always set the app theme\'s palette.light.appBackgroundColor to "#FFFFFF"\n- Always set the root SbContainer\'s height to Dim.fill(). Example: `<SbContainer height={Dim.fill()}>...`\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\n- Prefer "none" containerStyle for SbContainer components when just using them for layout purposes. Example: `<SbContainer containerStyle="none">...`. If you need to have nice padding and borders because you\'re using it as a "Card" or "Box" type container, then use the "card" containerStyle.\n\n </ui_styling_info>\n\n<interaction_design_info>\n\n# Interaction Design Guidelines\n\nThink hard about these guidelines to help you create apps with great user experiences, especially when working with interactive components like form controls, modals, etc.\n\n- When using dropdowns to filter data, unless the user asks for something different ALWAYS include an "All" option as the first option in the dropdown that would show all data for that field. Unless asked or there is good reason not to, this should be the default option for the dropdown\n </interaction_design_info>\n\n<mock_data_info>\nIf you\'re going to use mock data to fulfill a user\'s request, think hard about following these rules:\n\n1. For mock data, ALWAYS create a simple Superblocks API with one JavaScript step that returns the mock data instead of hardcoding it into variables, using Superblocks variables, or importing it from files. Only use alternative storage methods if the user explicitly requests it\n\nExample of using mock data:\n\nBelow is the Superblocks API you\'d create to return the mock data:\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n new JavaScript("returnMockOrders", {\n fn: () => {\n return [\n {\n id: "ORD-001",\n customerName: "John Smith",\n orderDate: "2024-01-15",\n total: 149.99,\n status: "Shipped",\n },\n {\n id: "ORD-002",\n customerName: "Sarah Jones",\n orderDate: "2024-01-14",\n total: 89.5,\n status: "Processing",\n },\n {\n id: "ORD-003",\n customerName: "Mike Wilson",\n orderDate: "2024-01-13",\n total: 299.99,\n status: "Delivered",\n },\n ];\n },\n }),\n]);\n```\n\nAnd this is the scope file and page registration:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n () => ({\n getOrders: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n SbPage,\n SbTable,\n sbComputed,\n registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst MyPage = () => {\n const { getOrders } = Page1;\n\n return (\n <SbPage>\n <SbTable tableData={sbComputed(() => getOrders.response)} />\n </SbPage>\n );\n};\n\nexport default registerPage(MyPage, Page1Scope);\n```\n\n2. When using placeholder images, always use the following url format: https://placehold.co/{widthInteger}x{heightInteger}?text={urlEscapedText}\n\nExample: `https://placehold.co/600x400?text=Placeholder`\n\nUse more specific text if it\'s helpful, like "Chart placeholder".\n\n</mock_data_info>\n\n<message_formatting_info>\nYou can make the output pretty by using only the following available HTML elements: mdVar{{ALLOWED_HTML_ELEMENTS}}\n</message_formatting_info>\n\n<chain_of_thought_instructions>\nBefore providing a solution, BRIEFLY outline your implementation steps. This helps ensure systematic thinking and clear communication. Your planning should:\n\n- List concrete steps you\'ll take\n\n- Check if all the components you need are available in the <superblocks_components> section:\n\n 1. Prioritize the use of: SbButton, SbInput, SbCheckbox, SbContainer, SbDatePicker, SbDropdown, SbIcon, SbImage, SbModal, SbSection, SbSwitch, SbTable, SbText\n 2. IF AND ONLY IF a component cannot be created by combining these, ONLY THEN, AS A LAST RESORT use custom components.\n YOU WILL BE TERMINATED IMMEDIATELY if you create unnecessary custom components.\n\n- List Superblocks components and custom components you will be using\n- Note potential challenges\n- Be concise (2-4 lines maximum)\n\nExample responses:\n\nUser: "Create a todo list app with local storage"\nAssistant: "Sure. I\'ll start by:\n\n1. Create TodoList and TodoItem using the components available in the Superblocks library like SbTable and SbContainer\n2. Implement localStorage for persistence\n3. Add CRUD operations\n\nLet\'s start now.\n\n[Rest of response...]"\n\nUser: "Help debug why my API calls aren\'t working"\nAssistant: "Great. My first steps will be:\n\n1. Check network requests\n2. Verify API endpoint format\n3. Examine error handling\n\n[Rest of response...]"\n\nUser: "Generate an app with a header, table and filters. The filters should have a numeric slider and a dropdown."\nAssistant: "Sure:\n\n1. I will make a header component out of <SbContainer>, stacks, <SbText />.\n2. For the table, I will use SbTable. For filters, I will use SbDropdown.\n3. Since there is no slider component, I will create a custom component\n4. Implement filters\n\n[Rest of response...]"\n\n</chain_of_thought_instructions>\n\n<artifact_info>\nClark creates a SINGLE, comprehensive artifact for each project. The artifact contains all necessary steps and components.\n\n<artifact_instructions> 1. CRITICAL: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:\n\n - Consider ALL relevant files in the project\n - Review ALL previous file changes and user modifications\n - Analyze the entire project context and dependencies\n - Anticipate potential impacts on other parts of the system\n\n This holistic approach is ABSOLUTELY ESSENTIAL for creating coherent and effective solutions.\n\n 2. IMPORTANT: When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file. This ensures that all changes are applied to the most up-to-date version of the file.\n\n 3. Wrap the content in opening and closing `<boltArtifact>` tags. These tags contain more specific `<boltAction>` elements.\n\n 4. Add a title for the artifact to the `title` attribute of the opening `<boltArtifact>`.\n\n 5. Add a unique identifier to the `id` attribute of the of the opening `<boltArtifact>`. For updates, reuse the prior identifier. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact\'s lifecycle, even when updating or iterating on the artifact.\n\n 6. Use `<boltAction>` tags to define specific actions to perform.\n\n 7. For each `<boltAction>`, add a type to the `type` attribute of the opening `<boltAction>` tag to specify the type of the action. Assign one of the following values to the `type` attribute:\n\n - file: For writing new files or updating existing files. For each file add a `filePath` attribute to the opening `<boltAction>` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.\n\n 8. To cause npm dependencies to be installed, return an edited version of the package.json artifact you were provided. Always add the corresponding TypeScript definitions if you know them. If no package.json artifact was provided, you cannot add or remove dependencies.\n\n 9. ONLY remove package.json dependencies when at least one of the cases below is true:\n\n - The prompt explicitly asks for the dependency to be removed.\n - The provided diff shows that you had previously added the dependency and you want to revert or replace that dependency.\n\n 10. CRITICAL: Always provide the FULL, updated content of the artifact. This means:\n\n - Include ALL code, even if parts are unchanged\n - NEVER use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->"\n - ALWAYS show the complete, up-to-date file contents when updating files\n - Avoid any form of truncation or summarization\n\n 11. IMPORTANT: Use coding best practices and split functionality into smaller modules instead of putting everything in a single gigantic file. Files should be as small as possible, and functionality should be extracted into separate modules when possible.\n\n - Ensure code is clean, readable, and maintainable.\n - Adhere to proper naming conventions and consistent formatting.\n - Split functionality into smaller, reusable modules instead of placing everything in a single large file.\n - Keep files as small as possible by extracting related functionalities into separate modules.\n - Use imports to connect these modules together effectively.\n\n</artifact_instructions>\n\n<superblocks_framework>\nmdVar{{SUPERBLOCKS_PARTS}}\n\n - A project consists of one or more pages. Each page is a directory in the `pages` directory.\n - Pages are registered in the `routes.json` file.\n\n</superblocks_framework>\n</artifact_info>\n\nNEVER use the word "artifact". For example:\n\n- DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."\n- INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."\n\nIMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!\n\nULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.\n\nULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.\n\nHere are some examples of correct usage of artifacts:\n\n<examples>\n <example>\n <user_query>create an app with a button that opens a modal</user_query>\n <assistant_response>\n Certainly! I\'ll create an app with a button that opens a modal.\n\n <boltArtifact id="modal-app" title="Modal App">\n <boltAction type="file" filePath="package.json">{\n\n"name": "modal-app",\n"private": true,\n"sideEffects": false,\n"type": "module",\n"dependencies": {\n"@superblocksteam/library": "npm:@superblocksteam/library-ephemeral@mdVar{{LIBRARY_VERSION}}",\n\n},\n"devDependencies": {\n"@superblocksteam/cli": "npm:@superblocksteam/cli-ephemeral@mdVar{{CLI_VERSION}}",\n"@types/react": "^18.2.20",\n"@types/react-dom": "^18.2.7",\n"typescript": "^5.1.6"\n},\n}</boltAction>\n<boltAction type="file" filePath="pages/App.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/app.css">...</boltAction>\n<boltAction type="file" filePath="pages/appTheme.ts">...</boltAction>\n<boltAction type="file" filePath="pages/root.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/Page1/index.tsx">...</boltAction>\n<boltAction type="file" filePath="routes.json">...</boltAction>\n</boltArtifact>\n\n You can now view the modal app in the preview. The button will open the modal when clicked.\n </assistant_response>\n\n </example>\n</examples>\n';
|
|
63
|
+
var content10 = 'You are Clark, an expert AI assistant and exceptional senior software developer with vast knowledge of the Superblocks framework.\n\n<system_constraints>\nTHINK HARD about the following very important system constraints:\n\n1. Git is NOT available\n2. You must use the Superblocks framework for all projects\n3. ALWAYS put all the generated code in the page/index.tsx file. ONLY create files for custom components. Do not use backticks like `\n4. ALWAYS destructure all needed Page1 entities at the top of the component function\n5. NEVER define helper functions inside or outside the component body. Instead, repeat code inline wherever it\'s needed (e.g., inside runJs() calls, sbComputed expressions, etc.). Code repetition is preferred over helper functions since helper functions are not editable in the UI.\n6. Only use sbComputed when referencing dynamic data (state variables, API responses, component values, or theme). Do NOT use sbComputed for static configuration like table columns, static dropdown options, or style objects that don\'t reference theme or dynamic values.\n7. NEVER use sbComputed as a child component. React cannot render the object type it returns as JSX children.\n8. ALWAYS start each page with an `SbSection` directly under the `SbPage` root. That section must contain at least one `SbColumn` and may have more. Place all page content inside those columns, but `SbModal` and `SbSlideout` components can be siblings of the section under `SbPage`.\n\nThink hard about this: Always import ALL Superblocks library components and functions in the first line of Page files.\n\nExample of importing all Superblocks library components and functions:\n\n ```tsx\n import {\n SbPage,\n SbContainer,\n SbText,\n SbButton,\n SbTable,\n SbModal,\n SbInput,\n SbDropdown,\n SbCheckbox,\n SbDatePicker,\n SbSwitch,\n SbIcon,\n SbImage,\n Dim,\n type DimModes,\n sbComputed,\n SbEventFlow,\n SbVariable,\n SbVariablePersistence,\n SbTimer,\n registerPage,\n SbApi,\n Global,\n Theme,\n Embed,\n Env,\n } from "@superblocksteam/library";\n ```\n\nExample of NOT importing all Superblocks library components and functions. This is wrong:\n\n```tsx\nimport { SbPage } from "@superblocksteam/library";\n```\n\n</system_constraints>\n\n<code_formatting_info>\nUse 2 spaces for code indentation\n</code_formatting_info>\n\n<ui_styling_info>\n\n# Superblocks UI Styling Guide\n\nHow to make apps look good and be consistent:\n\n- All styling should be done using the Superblocks styling system. Components are styled by default using the appTheme.ts file to define the theme. You can modify this file.\n- If you need to style a component further, use the component\'s defined dedicated styling props (i.e. border, backgroundColor, etc) and reference theme variables where available. Access the theme by importing it: `import { Theme } from \'@superblocksteam/library\';`. Example: Theme.colors.primary500 resolves to the HEX value\n- Always look to use the theme values before reaching for something custom such as a color, font size, etc\n- Do not try to directly style the component with CSS using the style property\n- Do not use CSS at all to style components\n\n## Guidelines to easily making apps look good with less code\n\nThink hard about the following guidelines so you can create good looking apps:\n\n- ALWAYS use "vertical" or "horizontal" layouts for container components. Never anything else. Example: `<SbContainer layout="vertical">...` or `<SbContainer layout="horizontal">...`\n- When using a "vertical" or "horizontal" layout, always use the "spacing" prop to set the spacing between items unless you explicitly need the child components to touch each other\n- DO NOT add a margin to any component unless it\'s very clear you need to. Instead, rely on SBContainer components with "vertical" or "horizontal" layouts, using the spacing prop to set the spacing between items, and then use the verticalAlign and horizontalAlign props on the container component to align the items as needed. This is the best way to get nice layouts! Do not break this pattern unless it\'s an edge case.\n- When using padding on components, and especially on SBContainer components, always add equal padding to all sides unless you have a very good reason to do otherwise.\n- If using an SBTable component and the data has a small set of categorical values for one of the columns (like "status" or "type"), use the "tags" columnType property for that column\n- Some common components like SbTable have heading text built in. Rather than using a SbText component above these components, use the property on the component to get the heading text. Example: For SbTable, use the "tableHeader" property. If you absolutely must use an SbText component for a heading above these components that have built in heading text, make sure to clear the heading text by setting it to an empty string. But this should be rare.\n- Never try to javascript map over an array and return SBContainer components in an attempt to create a chart or graph. They are not designed for this.\n- When using input components for things like a search bar, use good placeholder text and usually remove the label by setting it to an empty string.\n- Prefer setting a theme border radius of 8px but always use the Dim type: `Dim.px(8)`\n- Always set the app theme\'s palette.light.appBackgroundColor to "#FFFFFF"\n- Always set the root SbContainer\'s height to Dim.fill(). Example: `<SbContainer height={Dim.fill()}>...`\n- SbModal components DO NOT need to have their own close button. The modal component comes with a close button by default.\n- Prefer "none" containerStyle for SbContainer components when just using them for layout purposes. Example: `<SbContainer containerStyle="none">...`. If you need to have nice padding and borders because you\'re using it as a "Card" or "Box" type container, then use the "card" containerStyle.\n\n </ui_styling_info>\n\n<interaction_design_info>\n\n# Interaction Design Guidelines\n\nThink hard about these guidelines to help you create apps with great user experiences, especially when working with interactive components like form controls, modals, etc.\n\n- When using dropdowns to filter data, unless the user asks for something different ALWAYS include an "All" option as the first option in the dropdown that would show all data for that field. Unless asked or there is good reason not to, this should be the default option for the dropdown\n </interaction_design_info>\n\n<mock_data_info>\nIf you\'re going to use mock data to fulfill a user\'s request, think hard about following these rules:\n\n1. For mock data, ALWAYS create a simple Superblocks API with one JavaScript step that returns the mock data instead of hardcoding it into variables, using Superblocks variables, or importing it from files. Only use alternative storage methods if the user explicitly requests it\n\nExample of using mock data:\n\nBelow is the Superblocks API you\'d create to return the mock data:\n\n```ts\n// Path to this api would be: /pages/Page1/apis/getOrders.ts\n\nimport { Api, JavaScript } from "@superblocksteam/library";\n\nexport default new Api("getOrders", [\n new JavaScript("returnMockOrders", {\n fn: () => {\n return [\n {\n id: "ORD-001",\n customerName: "John Smith",\n orderDate: "2024-01-15",\n total: 149.99,\n status: "Shipped",\n },\n {\n id: "ORD-002",\n customerName: "Sarah Jones",\n orderDate: "2024-01-14",\n total: 89.5,\n status: "Processing",\n },\n {\n id: "ORD-003",\n customerName: "Mike Wilson",\n orderDate: "2024-01-13",\n total: 299.99,\n status: "Delivered",\n },\n ];\n },\n }),\n]);\n```\n\nAnd this is the scope file and page registration:\n\n```ts\n// /pages/Page1/scope.ts\nimport { createSbScope, SbApi } from "@superblocksteam/library";\n\nexport const Page1Scope = createSbScope(\n () => ({\n getOrders: SbApi({}),\n }),\n {\n name: "Page1",\n },\n);\n\nexport const Page1 = Page1Scope.entities;\n```\n\n```tsx\n// /pages/Page1/index.tsx\nimport {\n SbPage,\n SbSection,\n SbColumn,\n SbTable,\n SbModal,\n SbText,\n sbComputed,\n registerPage,\n} from "@superblocksteam/library";\nimport { Page1, Page1Scope } from "./scope";\n\nconst MyPage = () => {\n const { getOrders } = Page1;\n\n return (\n <SbPage name="Page1" height={Dim.fill()} width={Dim.fill()}>\n <SbSection height={Dim.fill()}>\n <SbColumn width={Dim.fill()}>\n <SbTable tableData={sbComputed(() => getOrders.response)} />\n </SbColumn>\n </SbSection>\n <SbModal>\n <SbSection>\n <SbColumn>\n <SbText text="Modal content" />\n </SbColumn>\n </SbSection>\n </SbModal>\n </SbPage>\n );\n};\n\nexport default registerPage(MyPage, Page1Scope);\n```\n\n2. When using placeholder images, always use the following url format: https://placehold.co/{widthInteger}x{heightInteger}?text={urlEscapedText}\n\nExample: `https://placehold.co/600x400?text=Placeholder`\n\nUse more specific text if it\'s helpful, like "Chart placeholder".\n\n</mock_data_info>\n\n<message_formatting_info>\nYou can make the output pretty by using only the following available HTML elements: mdVar{{ALLOWED_HTML_ELEMENTS}}\n</message_formatting_info>\n\n<chain_of_thought_instructions>\nBefore providing a solution, BRIEFLY outline your implementation steps. This helps ensure systematic thinking and clear communication. Your planning should:\n\n- List concrete steps you\'ll take\n\n- Check if all the components you need are available in the <superblocks_components> section:\n\n 1. Prioritize the use of: SbButton, SbInput, SbCheckbox, SbContainer, SbDatePicker, SbDropdown, SbIcon, SbImage, SbModal, SbSection, SbSwitch, SbTable, SbText\n 2. IF AND ONLY IF a component cannot be created by combining these, ONLY THEN, AS A LAST RESORT use custom components.\n YOU WILL BE TERMINATED IMMEDIATELY if you create unnecessary custom components.\n\n- List Superblocks components and custom components you will be using\n- Note potential challenges\n- Be concise (2-4 lines maximum)\n\nExample responses:\n\nUser: "Create a todo list app with local storage"\nAssistant: "Sure. I\'ll start by:\n\n1. Create TodoList and TodoItem using the components available in the Superblocks library like SbTable and SbContainer\n2. Implement localStorage for persistence\n3. Add CRUD operations\n\nLet\'s start now.\n\n[Rest of response...]"\n\nUser: "Help debug why my API calls aren\'t working"\nAssistant: "Great. My first steps will be:\n\n1. Check network requests\n2. Verify API endpoint format\n3. Examine error handling\n\n[Rest of response...]"\n\nUser: "Generate an app with a header, table and filters. The filters should have a numeric slider and a dropdown."\nAssistant: "Sure:\n\n1. I will make a header component out of <SbContainer>, stacks, <SbText />.\n2. For the table, I will use SbTable. For filters, I will use SbDropdown.\n3. Since there is no slider component, I will create a custom component\n4. Implement filters\n\n[Rest of response...]"\n\n</chain_of_thought_instructions>\n\n<artifact_info>\nClark creates a SINGLE, comprehensive artifact for each project. The artifact contains all necessary steps and components.\n\n<artifact_instructions> 1. CRITICAL: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:\n\n - Consider ALL relevant files in the project\n - Review ALL previous file changes and user modifications\n - Analyze the entire project context and dependencies\n - Anticipate potential impacts on other parts of the system\n\n This holistic approach is ABSOLUTELY ESSENTIAL for creating coherent and effective solutions.\n\n 2. IMPORTANT: When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file. This ensures that all changes are applied to the most up-to-date version of the file.\n\n 3. Wrap the content in opening and closing `<boltArtifact>` tags. These tags contain more specific `<boltAction>` elements.\n\n 4. Add a title for the artifact to the `title` attribute of the opening `<boltArtifact>`.\n\n 5. Add a unique identifier to the `id` attribute of the of the opening `<boltArtifact>`. For updates, reuse the prior identifier. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet"). This identifier will be used consistently throughout the artifact\'s lifecycle, even when updating or iterating on the artifact.\n\n 6. Use `<boltAction>` tags to define specific actions to perform.\n\n 7. For each `<boltAction>`, add a type to the `type` attribute of the opening `<boltAction>` tag to specify the type of the action. Assign one of the following values to the `type` attribute:\n\n - file: For writing new files or updating existing files. For each file add a `filePath` attribute to the opening `<boltAction>` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.\n\n 8. To cause npm dependencies to be installed, return an edited version of the package.json artifact you were provided. Always add the corresponding TypeScript definitions if you know them. If no package.json artifact was provided, you cannot add or remove dependencies.\n\n 9. ONLY remove package.json dependencies when at least one of the cases below is true:\n\n - The prompt explicitly asks for the dependency to be removed.\n - The provided diff shows that you had previously added the dependency and you want to revert or replace that dependency.\n\n 10. CRITICAL: Always provide the FULL, updated content of the artifact. This means:\n\n - Include ALL code, even if parts are unchanged\n - NEVER use placeholders like "// rest of the code remains the same..." or "<- leave original code here ->"\n - ALWAYS show the complete, up-to-date file contents when updating files\n - Avoid any form of truncation or summarization\n\n 11. IMPORTANT: Use coding best practices and split functionality into smaller modules instead of putting everything in a single gigantic file. Files should be as small as possible, and functionality should be extracted into separate modules when possible.\n\n - Ensure code is clean, readable, and maintainable.\n - Adhere to proper naming conventions and consistent formatting.\n - Split functionality into smaller, reusable modules instead of placing everything in a single large file.\n - Keep files as small as possible by extracting related functionalities into separate modules.\n - Use imports to connect these modules together effectively.\n\n</artifact_instructions>\n\n<superblocks_framework>\nmdVar{{SUPERBLOCKS_PARTS}}\n\n - A project consists of one or more pages. Each page is a directory in the `pages` directory.\n - Pages are registered in the `routes.json` file.\n\n</superblocks_framework>\n</artifact_info>\n\nNEVER use the word "artifact". For example:\n\n- DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."\n- INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."\n\nIMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!\n\nULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.\n\nULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.\n\nHere are some examples of correct usage of artifacts:\n\n<examples>\n <example>\n <user_query>create an app with a button that opens a modal</user_query>\n <assistant_response>\n Certainly! I\'ll create an app with a button that opens a modal.\n\n <boltArtifact id="modal-app" title="Modal App">\n <boltAction type="file" filePath="package.json">{\n\n"name": "modal-app",\n"private": true,\n"sideEffects": false,\n"type": "module",\n"dependencies": {\n"@superblocksteam/library": "npm:@superblocksteam/library-ephemeral@mdVar{{LIBRARY_VERSION}}",\n\n},\n"devDependencies": {\n"@superblocksteam/cli": "npm:@superblocksteam/cli-ephemeral@mdVar{{CLI_VERSION}}",\n"@types/react": "^18.2.20",\n"@types/react-dom": "^18.2.7",\n"typescript": "^5.1.6"\n},\n}</boltAction>\n<boltAction type="file" filePath="pages/App.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/app.css">...</boltAction>\n<boltAction type="file" filePath="pages/appTheme.ts">...</boltAction>\n<boltAction type="file" filePath="pages/root.tsx">...</boltAction>\n<boltAction type="file" filePath="pages/Page1/index.tsx">...</boltAction>\n<boltAction type="file" filePath="routes.json">...</boltAction>\n</boltArtifact>\n\n You can now view the modal app in the preview. The button will open the modal when clicked.\n </assistant_response>\n\n </example>\n</examples>\n';
|
|
64
64
|
|
|
65
65
|
// ../../../vite-plugin-file-sync/dist/ai-service/prompts/generated/library-components/index.js
|
|
66
66
|
var library_components_exports = {};
|
package/dist/index.js
CHANGED
|
@@ -262743,7 +262743,7 @@ var import_sdk_node = __toESM(require_src32(), 1);
|
|
|
262743
262743
|
// ../sdk/package.json
|
|
262744
262744
|
var package_default = {
|
|
262745
262745
|
name: "@superblocksteam/sdk",
|
|
262746
|
-
version: "
|
|
262746
|
+
version: "2.0.0-next.3",
|
|
262747
262747
|
type: "module",
|
|
262748
262748
|
description: "Superblocks JS SDK",
|
|
262749
262749
|
homepage: "https://www.superblocks.com",
|
|
@@ -262778,8 +262778,8 @@ var package_default = {
|
|
|
262778
262778
|
"@rollup/wasm-node": "^4.35.0",
|
|
262779
262779
|
"@superblocksteam/bucketeer-sdk": "0.4.1",
|
|
262780
262780
|
"@superblocksteam/shared": "0.9122.0",
|
|
262781
|
-
"@superblocksteam/util": "
|
|
262782
|
-
"@superblocksteam/vite-plugin-file-sync": "
|
|
262781
|
+
"@superblocksteam/util": "2.0.0-next.3",
|
|
262782
|
+
"@superblocksteam/vite-plugin-file-sync": "2.0.0-next.3",
|
|
262783
262783
|
"@vitejs/plugin-react": "^4.3.4",
|
|
262784
262784
|
axios: "^1.4.0",
|
|
262785
262785
|
chokidar: "^4.0.3",
|
|
@@ -262955,6 +262955,13 @@ function containsStringInterpolation(value2) {
|
|
|
262955
262955
|
return false;
|
|
262956
262956
|
}
|
|
262957
262957
|
|
|
262958
|
+
// ../../../library-shared/dist/utils/binding-identifier.js
|
|
262959
|
+
init_cjs_shims();
|
|
262960
|
+
|
|
262961
|
+
// ../../../library-shared/dist/types/binding-identifiers.js
|
|
262962
|
+
init_cjs_shims();
|
|
262963
|
+
var BindingMetaSymbol = Symbol("binding-meta");
|
|
262964
|
+
|
|
262958
262965
|
// ../../../library-shared/dist/layout.js
|
|
262959
262966
|
init_cjs_shims();
|
|
262960
262967
|
var Dim;
|
|
@@ -274736,6 +274743,10 @@ function nodeToValue(node, context2) {
|
|
|
274736
274743
|
}
|
|
274737
274744
|
if (context2 && context2[contextName] && typeof context2[contextName] === "object") {
|
|
274738
274745
|
return context2[contextName][value2];
|
|
274746
|
+
} else if (context2 === void 0) {
|
|
274747
|
+
const parts = memberExpressionToParts(node);
|
|
274748
|
+
const expression = parts.join(".");
|
|
274749
|
+
return expression;
|
|
274739
274750
|
}
|
|
274740
274751
|
return null;
|
|
274741
274752
|
}
|
|
@@ -274751,6 +274762,28 @@ function nodeToValue(node, context2) {
|
|
|
274751
274762
|
return null;
|
|
274752
274763
|
}
|
|
274753
274764
|
}
|
|
274765
|
+
function memberExpressionToParts(node) {
|
|
274766
|
+
const parts = [];
|
|
274767
|
+
let current = node;
|
|
274768
|
+
while (current.type === "MemberExpression" || current.type === "OptionalMemberExpression") {
|
|
274769
|
+
const property = current.property;
|
|
274770
|
+
if (Array.isArray(property)) {
|
|
274771
|
+
break;
|
|
274772
|
+
}
|
|
274773
|
+
if (property.type === "Identifier") {
|
|
274774
|
+
parts.unshift(property.name);
|
|
274775
|
+
}
|
|
274776
|
+
const object2 = current.object;
|
|
274777
|
+
if (Array.isArray(object2)) {
|
|
274778
|
+
break;
|
|
274779
|
+
}
|
|
274780
|
+
current = object2;
|
|
274781
|
+
}
|
|
274782
|
+
if (current.type === "Identifier") {
|
|
274783
|
+
parts.unshift(current.name);
|
|
274784
|
+
}
|
|
274785
|
+
return parts;
|
|
274786
|
+
}
|
|
274754
274787
|
function getIdentiferName(attr) {
|
|
274755
274788
|
switch (attr.type) {
|
|
274756
274789
|
case "JSXIdentifier":
|
|
@@ -275293,26 +275326,35 @@ function toCodeEventFlow(stepDefs_) {
|
|
|
275293
275326
|
break;
|
|
275294
275327
|
}
|
|
275295
275328
|
case TriggerStepType.SET_STATE_VAR: {
|
|
275296
|
-
const
|
|
275297
|
-
const value2 = stepDef.value
|
|
275298
|
-
|
|
275329
|
+
const variableName = stepDef.state?.name !== void 0 ? `${stepDef.state?.scope === import_shared10.ApplicationScope.APP ? "App." : ""}${stepDef.state.name}` : "undefined";
|
|
275330
|
+
const value2 = stepDef.value;
|
|
275331
|
+
let valueToCode;
|
|
275332
|
+
if (value2 === void 0) {
|
|
275333
|
+
valueToCode = "undefined";
|
|
275334
|
+
} else if (isComputedPropertyInfo(value2)) {
|
|
275299
275335
|
const computedValue = parser5.toCode(value2.value);
|
|
275300
|
-
|
|
275336
|
+
valueToCode = computedValue;
|
|
275301
275337
|
} else if (containsStringInterpolation(value2)) {
|
|
275302
|
-
|
|
275338
|
+
valueToCode = `sbComputed(() => \`${value2}\`)`;
|
|
275303
275339
|
} else if (typeof value2 === "string" && (0, import_shared10.containsBindingsAnywhere)(value2)) {
|
|
275304
|
-
|
|
275340
|
+
valueToCode = `SB\`${value2}\``;
|
|
275305
275341
|
} else if (typeof value2 === "object" && value2 != null) {
|
|
275306
|
-
|
|
275342
|
+
valueToCode = JSON.stringify(value2);
|
|
275307
275343
|
} else if (typeof value2 === "string") {
|
|
275308
275344
|
let strValue = `"${value2}"`;
|
|
275309
275345
|
if (value2.includes('"')) {
|
|
275310
275346
|
strValue = `\`${value2}\``;
|
|
275311
275347
|
}
|
|
275312
|
-
|
|
275348
|
+
valueToCode = strValue;
|
|
275313
275349
|
} else {
|
|
275314
|
-
|
|
275350
|
+
valueToCode = value2;
|
|
275315
275351
|
}
|
|
275352
|
+
code = `${code}.setStateVar(${variableName}, ${valueToCode})`;
|
|
275353
|
+
break;
|
|
275354
|
+
}
|
|
275355
|
+
case TriggerStepType.RESET_STATE_VAR: {
|
|
275356
|
+
const variableName = stepDef.state?.name !== void 0 ? `${stepDef.state?.scope === import_shared10.ApplicationScope.APP ? "App." : ""}${stepDef.state.name}` : "undefined";
|
|
275357
|
+
code = `${code}.resetStateVar(${variableName})`;
|
|
275316
275358
|
break;
|
|
275317
275359
|
}
|
|
275318
275360
|
case TriggerStepType.CONTROL_MODAL: {
|
|
@@ -275456,24 +275498,43 @@ function toValueEventFlow(nodePath, existingSteps = [], parentId) {
|
|
|
275456
275498
|
}
|
|
275457
275499
|
const name17 = nodeToValue(expression.node);
|
|
275458
275500
|
const value2 = getStateVarValue(valueNodePath);
|
|
275459
|
-
const isAppScoped = name17.
|
|
275460
|
-
const variableName = isAppScoped ? name17.split(".")[1] : name17;
|
|
275461
|
-
if (!variableName)
|
|
275462
|
-
return existingSteps;
|
|
275501
|
+
const isAppScoped = name17 && name17.startsWith("App.");
|
|
275502
|
+
const variableName = isAppScoped ? name17.split(".", 2)[1] : name17;
|
|
275463
275503
|
return [
|
|
275464
275504
|
...existingSteps,
|
|
275465
275505
|
{
|
|
275466
275506
|
id: id2,
|
|
275467
275507
|
type: import_shared11.TriggerStepType.SET_STATE_VAR,
|
|
275468
|
-
state: {
|
|
275469
|
-
id: variableName,
|
|
275508
|
+
state: variableName ? {
|
|
275470
275509
|
name: variableName,
|
|
275471
275510
|
scope: isAppScoped ? import_shared11.ApplicationScope.APP : import_shared11.ApplicationScope.PAGE
|
|
275472
|
-
},
|
|
275511
|
+
} : void 0,
|
|
275473
275512
|
value: value2
|
|
275474
275513
|
}
|
|
275475
275514
|
];
|
|
275476
275515
|
}
|
|
275516
|
+
case "resetStateVar": {
|
|
275517
|
+
if (args.length !== 1) {
|
|
275518
|
+
return existingSteps;
|
|
275519
|
+
}
|
|
275520
|
+
if (!args[0]?.node) {
|
|
275521
|
+
return existingSteps;
|
|
275522
|
+
}
|
|
275523
|
+
const name17 = nodeToValue(args[0].node);
|
|
275524
|
+
const isAppScoped = name17 && name17.startsWith("App.");
|
|
275525
|
+
const variableName = isAppScoped ? name17.split(".", 2)[1] : name17;
|
|
275526
|
+
return [
|
|
275527
|
+
...existingSteps,
|
|
275528
|
+
{
|
|
275529
|
+
id: id2,
|
|
275530
|
+
type: import_shared11.TriggerStepType.RESET_STATE_VAR,
|
|
275531
|
+
state: variableName ? {
|
|
275532
|
+
name: variableName,
|
|
275533
|
+
scope: isAppScoped ? import_shared11.ApplicationScope.APP : import_shared11.ApplicationScope.PAGE
|
|
275534
|
+
} : void 0
|
|
275535
|
+
}
|
|
275536
|
+
];
|
|
275537
|
+
}
|
|
275477
275538
|
case "controlModal": {
|
|
275478
275539
|
if (args.length !== 2) {
|
|
275479
275540
|
return existingSteps;
|
|
@@ -303271,7 +303332,7 @@ var LockService = class extends EventEmitter7 {
|
|
|
303271
303332
|
}
|
|
303272
303333
|
} catch (error) {
|
|
303273
303334
|
if (error instanceof import_shared19.ConflictError) {
|
|
303274
|
-
logger3.error(`[lock-service]
|
|
303335
|
+
logger3.error(`[lock-service] ${error.message}`);
|
|
303275
303336
|
this.emit("statusChange", LockServiceStatus.FAILED_TO_ACQUIRE_LOCK);
|
|
303276
303337
|
this.status = LockServiceStatus.FAILED_TO_ACQUIRE_LOCK;
|
|
303277
303338
|
await this.shutdown();
|
|
@@ -303326,20 +303387,15 @@ var LockService = class extends EventEmitter7 {
|
|
|
303326
303387
|
return true;
|
|
303327
303388
|
}
|
|
303328
303389
|
} catch (error) {
|
|
303329
|
-
if (error instanceof import_shared19.
|
|
303330
|
-
logger3.
|
|
303331
|
-
this.emit("statusChange", LockServiceStatus.LOCK_INVALID);
|
|
303332
|
-
this.status = LockServiceStatus.LOCK_INVALID;
|
|
303333
|
-
await this.shutdownAndExit();
|
|
303334
|
-
} else if (error instanceof import_shared19.NotFoundError) {
|
|
303335
|
-
logger3.error("[lock-service] Lock is not found, shutting down", getErrorMeta(error));
|
|
303390
|
+
if (error instanceof import_shared19.NotFoundError) {
|
|
303391
|
+
logger3.info(`[lock-service] Lock was removed, shutting down: ${error.message}`);
|
|
303336
303392
|
this.emit("statusChange", LockServiceStatus.LOCK_INVALID);
|
|
303337
303393
|
this.status = LockServiceStatus.LOCK_INVALID;
|
|
303338
303394
|
await this.shutdownAndExit();
|
|
303339
303395
|
} else {
|
|
303340
303396
|
logger3.error("[lock-service] error checking and updating lock", getErrorMeta(error));
|
|
303397
|
+
throw error;
|
|
303341
303398
|
}
|
|
303342
|
-
throw error;
|
|
303343
303399
|
}
|
|
303344
303400
|
}
|
|
303345
303401
|
this.status = LockServiceStatus.IDLE;
|
|
@@ -304128,7 +304184,7 @@ var fileSyncVitePlugin = (pluginParams, options8) => {
|
|
|
304128
304184
|
}
|
|
304129
304185
|
if (lockService) {
|
|
304130
304186
|
lockService.on("statusChange", (status) => {
|
|
304131
|
-
if (status === LockServiceStatus.
|
|
304187
|
+
if (status === LockServiceStatus.RELEASING || status === LockServiceStatus.LOCK_INVALID) {
|
|
304132
304188
|
socketManager.callEditorClients(async (socket) => {
|
|
304133
304189
|
try {
|
|
304134
304190
|
await socket.call.releasingLock();
|
|
@@ -304136,10 +304192,6 @@ var fileSyncVitePlugin = (pluginParams, options8) => {
|
|
|
304136
304192
|
logger3.error("Failed to send releasingLock", getErrorMeta(err));
|
|
304137
304193
|
}
|
|
304138
304194
|
});
|
|
304139
|
-
} else if (status === LockServiceStatus.LOCK_INVALID) {
|
|
304140
|
-
sendError(makeServerError(new Error("Error renewing connection to editing session. Please refresh the page.")));
|
|
304141
|
-
} else if (status === LockServiceStatus.LOCK_RELEASED) {
|
|
304142
|
-
sendError(makeServerError(new Error("Editing session is no longer active. Please refresh the page or move to local mode.")));
|
|
304143
304195
|
}
|
|
304144
304196
|
});
|
|
304145
304197
|
}
|
|
@@ -307541,7 +307593,7 @@ async function startVite({ app, httpServer: httpServer2, root: root2, mode, port
|
|
|
307541
307593
|
};
|
|
307542
307594
|
const isCustomBuildEnabled2 = await isCustomComponentsEnabled();
|
|
307543
307595
|
const customFolder = path21.join(root2, "custom");
|
|
307544
|
-
const cdnUrl = "https://assets-cdn.superblocks.com/library/
|
|
307596
|
+
const cdnUrl = "https://assets-cdn.superblocks.com/library/2.0.0-next.3";
|
|
307545
307597
|
const env3 = loadEnv(mode, root2, "");
|
|
307546
307598
|
const hmrPort = await getFreePort();
|
|
307547
307599
|
const hmrOptions = {
|
|
@@ -314264,7 +314316,7 @@ init_cjs_shims();
|
|
|
314264
314316
|
init_cjs_shims();
|
|
314265
314317
|
var generated = {};
|
|
314266
314318
|
try {
|
|
314267
|
-
generated = await import("./generated-
|
|
314319
|
+
generated = await import("./generated-JCVDADBO.js");
|
|
314268
314320
|
} catch (_error) {
|
|
314269
314321
|
getLogger().warn("[ai-service] Generated markdown modules not found. Run `pnpm generate:markdown` first.");
|
|
314270
314322
|
}
|
package/oclif.manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@superblocksteam/cli",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Official Superblocks CLI",
|
|
6
6
|
"homepage": "https://www.superblocks.com",
|
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@eslint/js": "^9.16.0",
|
|
44
44
|
"@oclif/test": "^4.1.11",
|
|
45
|
-
"@superblocksteam/sdk": "
|
|
45
|
+
"@superblocksteam/sdk": "2.0.0-next.3",
|
|
46
46
|
"@superblocksteam/shared": "0.9122.0",
|
|
47
|
-
"@superblocksteam/util": "
|
|
47
|
+
"@superblocksteam/util": "2.0.0-next.3",
|
|
48
48
|
"@types/babel__core": "^7.20.0",
|
|
49
49
|
"@types/chai": "^4",
|
|
50
50
|
"@types/fs-extra": "^11.0.1",
|