experimental: generate global system variable with CLI

apps/builder/app/builder/features/address-bar.stories.tsx

@@ -61,7 +61,7 @@ $pages.set({
 const $selectedPageSystem = computed(
   [$selectedPage, $dataSourceVariables],
   (selectedPage, dataSourceVariables) => {
-    if (selectedPage === undefined) {
+    if (selectedPage?.systemDataSourceId === undefined) {
       return {};
     }
     return dataSourceVariables.get(selectedPage.systemDataSourceId);

apps/builder/app/builder/features/address-bar.tsx

@@ -65,7 +65,7 @@ const $selectedPagePath = computed([$selectedPage, $pages], (page, pages) => {
 const $selectedPagePathParams = computed(
   [$selectedPageDefaultSystem, $selectedPage, $dataSourceVariables],
   (defaultSystem, selectedPage, dataSourceVariables) => {
-    if (selectedPage === undefined) {
+    if (selectedPage?.systemDataSourceId === undefined) {
       return defaultSystem.params;
     }
     const system = dataSourceVariables.get(selectedPage.systemDataSourceId) as

apps/builder/app/builder/features/settings-panel/resource-panel.tsx

@@ -375,7 +375,7 @@ const $hiddenDataSourceIds = computed(
         dataSourceIds.add(dataSource.id);
       }
     }
-    if (page && isFeatureEnabled("filters")) {
+    if (page?.systemDataSourceId && isFeatureEnabled("filters")) {
       dataSourceIds.delete(page.systemDataSourceId);
     }
     return dataSourceIds;

apps/builder/app/canvas/interceptor.ts

@@ -27,7 +27,7 @@ const getSelectedPagePathname = () => {
   const pages = $pages.get();
   const page = $selectedPage.get();
   const dataSourceVariables = $dataSourceVariables.get();
-  if (page && pages) {
+  if (page?.systemDataSourceId && pages) {
     const system = dataSourceVariables.get(page.systemDataSourceId) as
       | undefined
       | System;

apps/builder/app/shared/nano-states/variables.ts

@@ -60,6 +60,9 @@ export const mergeSystem = (left: System, right?: System): System => {
 };
 
 export const updateSystem = (page: Page, update: Partial<System>) => {
+  if (page.systemDataSourceId === undefined) {
+    return;
+  }
   const dataSourceVariables = new Map($dataSourceVariables.get());
   const system = dataSourceVariables.get(page.systemDataSourceId) as
     | undefined

apps/builder/app/shared/page-utils.ts

@@ -118,7 +118,8 @@ export const insertPageCopyMutable = ({
   const newRootInstanceId =
     newInstanceIds.get(page.rootInstanceId) ?? page.rootInstanceId;
   const newSystemDataSourceId =
-    newDataSourceIds.get(page.systemDataSourceId) ?? page.systemDataSourceId;
+    newDataSourceIds.get(page.systemDataSourceId ?? "") ??
+    page.systemDataSourceId;
   const newPage: Page = {
     ...page,
     id: newPageId,

packages/cli/src/prebuild.ts

@@ -47,6 +47,7 @@ import {
   replaceFormActionsWithResources,
   isCoreComponent,
   coreMetas,
+  SYSTEM_VARIABLE_ID,
 } from "@webstudio-is/sdk";
 import type { Data } from "@webstudio-is/http-client";
 import { LOCAL_DATA_FILE } from "./config";
@@ -584,12 +585,19 @@ export const prebuild = async (options: {
       rootInstanceId,
       parameters: [
         {
-          id: `system`,
+          id: `page-system`,
           instanceId: "",
           name: "system",
           type: "parameter",
           value: pageData.page.systemDataSourceId ?? "",
         },
+        {
+          id: "global-system",
+          type: "parameter",
+          instanceId: "",
+          name: "system",
+          value: SYSTEM_VARIABLE_ID,
+        },
       ],
       instances,
       props,